Hvordan lage en vertikal linje på din webside

Hvordan lage en vertikal linje på din webside


Mange nettsteder dele sitt innhold inn i kolonner og dele dem med vertikale linjer. I motsetning til en horisontal linje, som kan settes inn ved hjelp av en standard "<t>" HTML-kode, vertikale linjer trenger å bli manipulert fra en liten farget boks som kan bli strukket og forlenget inn i en linje. Tilsvarende tegne en loddrett linje mellom tekster ved å opprette en tabell med bare én synlig vertikal linje.

Bruksanvisning

1 Logg inn på din nettside content management system, eller starte PCen webdesign programvare. Microsoft Frontpage bør være PCens standardprogram.

2 Legge en eksisterende nettside i Frontpage ved å klikke på "File" -menyen og velge "Open" fra rullegardinmenyen. Opprett en ny side ved å klikke på "Opprett en ny side" knappen på hovedverktøylinjen, som er symbolisert ved bildet av en hvit tomt dokument.

3 Naviger til websider i din content management system ved å klikke på sidenavnet. Alle systemer skal ha en "HTML" -knappen over hvert innlegg eller side design vinduet. Klikk på den for å avsløre den grunnleggende HTML-koding av websiden.

4 Lag en frittstående loddrett linje ved først å opprette en "2 x 2" pixel bilde av en farge som du vil at linjen skal være. Lagre bildet som en "image.gif" i nettsidens database før du skriver inn følgende kode inn i HTML-boksen:

<Img src = "image.gif" width = "2" height = "200" border = "0">

Endre "width" og "height" verdier for å endre lengden og tykkelsen på linjen din.

5 Sett inn en vertikal linje i mellom tekst ved hjelp av følgende kode:

<Table cellspacing = "5" border = "0" cellpadding = "0">

<Tr valign = "top" align = "left">

<Td width = "300"> <p> hovedsiden her </ p> </ td>

<Td width = "1" bgcolor = "# 00FFFF"> <BR> </ td>

<Td width = "150" valign = "top" align = "left">

<P> venstre blah </ p>

<P> riktig blahright blahright blah </ p>

</ Td>

</ Tr>

</ Table>

Denne koden skaper et bord uten grenser, med unntak av linjen i midten, som bør være en solid vertikal linje. Øke tykkelsen av denne linjen ved å forstørre nummeret i "<td width =" 1 ">" value - endre teksten på hver side av den vertikale linjen ved å erstatte "venstre blah" og "riktig blah" felt for din egen personlig tekst.

Hint

  • Legg til mer tekst i venstre eller høyre side av den vertikale linjen ved å skille hvert punkt med en "." Pass på at det ikke er noen mellomrom mellom teksten og "" koder.