ID-er kan brukes for å knytte stilarkregler til en enkelt tagg i HTML-dokumentet. ID-er kan også brukes for å lenke til en del av en side. Lenken:
<a href="filnavn.html#bokmerke1">punkt 2 i oppskriften</a>
vil lenke til HTML-dokumentet som heter filnavn.html som må finnes i samme mappe. Deretter vil det ser etter en tagg som har et id-attributt med innholdet 'bokmerke1'.
Plassere markøren i taggen som skal få ID-en. Skriv inn ID-en i ID-felt i Properties-ruten.
Klikk på New CSS Regel-knapp i CSS Styles-ruten.
Opprettelse av nye stilarkregler består av to trinn
Når du velger selektør er det igjen tre valg:
I trinn to defineres hvilke regler som skal knyttes til selektøren, f.eks. skrifttype, størrelser, farger, luft, osv.
Dvs. i trinn 1 defineres selektøren. Dette tilsvarer det som vi har gjørt tidligere i kurset slik:
#bokmerke1 { color: #966; }
I trinn 2 defineres reglene, som tilsvarer:
#bokmerke1 { color: #966; }
IDen vises nå under All Rules i CSS Styles-ruten:
NB IDer har # foran navnet, mens klasser har et punktum foran navnet.
Nederst i ruten vises de reglene som er definert for denne selektøren. Nye regler kan knyttes til selektøren ved å klikke på Add Property eller velge blyant-knappen nederst i ruten. Når Add Property velges vises en alfabetisk liste over mulige egenskaper:
Etter at egenskap er valgt vises en liste av relevante verdier for egenskapen:
Igjen, dette tilsvarer:
#bokmerke1 { color: #966;
float: left; }
Hvis blyant-knappen velges vises CSS Rule Definition vinduet:
Mens ID-attributtet brukes kun en gang i et HTML-dokument, kan class-attributtet brukes mange ganger.
Klassen defineres på forhånd ved hjelp av CSS Styles-ruten. Velg New CSS Rule-knapp i CSS Styles-ruten.
Reglene defineres som før i trinn 2.
Dette gjøres i Properties-ruten. Klasser som er definert i stilarket som er knyttet til HTML-dokumentet vises i listen under Class:
Properties-ruten forholder seg til hvilken tagg i dokument som er aktiv, dvs. hvor markøren er dokumentet. I skjermbildet overfor ser vi at det står '<body><p>' i Tag Selector og at '<p>' er aktiv. 'Paragraph' vises i format-listen i Properties-ruten.
Klasser vises i CSS Styles-ruten med punktum foran selektør:
Merk teksten som skal være lenketeksten. Husk ingen 'klikk her', 'les mer'!
Velg lenke-knappen (Hyperlink) som finnes under Common i Insert-ruten:
Følgende vinduet vises:
Hvis dokumentet det skal lenkes til finnes på samme server, kan mappe-knappen til høyre for Link-feltet brukes for å bla deg frem til dokumentet. Dette vil opprette en relativ-lenk mellom dokumentene. Hvis dokumentet finnes på en annen server kopierer du adressen fra adressefelt i nettleseren og limer den inn i Link-feltet.
Velg New CSS Rule-knappen fra Insert-ruten.
Relevante stilarkregler er Text-decoration og Color som finnes under Type:
Legg inn basisinnhold:
Markere de fire områder med div-tagger. Markere teksten og velg Insert Div Tag fra Layout i Insert-ruten:
Følgende vinduet vises:
Velg 'Wrap around selection' fra Insert-listen og skriv inn en ID i ID-feltet. Div-området merkets med striplet linje:
Div-en vises også i Tag Selector nederst i dokument-ruten:
Innholdet i Tag Selector leses slik: innenfor body-tagg har vi en div-tagg som har en id-attributt med verdi 'sidetopp'. Innenfor div-en er det en h1-tagg. Dvs:
...
<body>
<div id="sidetopp">
<h1>
...
De tre andre områder merkes på samme måte. Neste div-en skal omfatte en liste. For å velge hele listen og ikke bare et enkelt listepunkt, kan vi klikk på et listepunkt i dokument-rute og velg ul-taggen i Tag Selector:
Når alle fire områder er merket med div-tagger vil siden se slik ut:
Velg div-ene ved å klikk innenfor div-en og velg i Tag Selector. Div-en blir merket med en hel blå linje. Velg deretter New CSS Rule-knappen i CSS Styles-ruten. ID-en til den merket div foreslås som selektør:
Valgene knyttet til plassering av div-ene finnes under Category Box:
Her sier vi at div-taggen skal være 200 piksler i bredden og at den skal plasseres til venstre og andre innhold skal flyte til høyre.
Boksmodellen som brukes i stilark kan illustreres:
I tillegg til margin, border og padding som vises i tegning kan bredden bestemmes vha width-regelen. Width bestemmer bredden av området som er farget grått i tegningen. NB. det virkelig bredden av et element er summen av width, margin, padding og border-width.
Div-en som har id 'innhold' flyttes til høyre for menyen ved å legge til en venstremarg:
Dette tilsvarer:
#innhold { margin-left: 220px; }
Margen til venstre for div-en innhold vises i Dreamweaver slik når div-en er valgt i Tag Selector:
For å tvinge div-en 'sidebunn' å komme nederst brukes stilarkregelen Clear som også finnes under Box:
Resultatet etter disse endringer er:
Padding vises slik:
Merk at dette kun vises for div-tagger og når div-en er valgt i Tag Selector.
Velg New... fra File-meny. Hvis HTML velges under Page Type vises en liste over ferdige sideutlegg:
Under Layout beskrives sideutlegg, f.eks. '1 column fixed, centered, header and footer'. En illustrasjon av siden vises. Her brukes ulike symboler for å vise de ulike valg.
Bredden på kolonnene defineres i piksler. Bredden endres ikke i forhold til bredden på nettleseren, dvs. hvis bredden er større enn nettleseren må brukere skrolle til venstre og høyre. Omvendt hvis nettleseren er større enn bredden vil det være tom rom på sidene.
Bredden på kolonnene defineres i prosent og vil endre seg i forhold til bredden på nettleseren.
Bredden på kolonnene defineres i em. 1.0em er standardstørrelse av teksten i siden. Hvis brukeren velger å øke skriftstørrelsen i nettleseren vil bredden på kolonnen også utvides med denne teknikken.
Sideutlegget består av flere kolonner og ulike teknikker kombineres for å bestemme bredden.
Velg mellom Create New File eller Link to Existing File under Layout CSS. Den siste alternativ kan brukes hvis flere HTML-dokumenter skal dele det samme sideutlegg.
Hvis Create New File er valgt får du opp et vindu for å angi navnet på stilarket og plasseringen.
Hvis 'Link to existing file' er valgt fra Layout CSS-listen må stilarket kobles ved hjelp av lenke-knapp før dokumentet kan opprettes.
Dokumentet åpner slik:
Div-ene er merket med striplet linger og fylt med innhold som kan redigeres.
Dreamweavers sideutleggdokumenter alltid har en div med ID 'container' som omfatter hele innholdet i siden. Hvis markøren står i teksten 'Main Content' vises følgende i Tag Selector:
Dvs. innenfor body-tagg er det en div-tagg med IDen 'container' og innenfor den ny div-tagg med ID mainContent. Innenfor denne er det en h1-tagg. Strukturen i HTML-dokumentet kunne tegnes slik:
En slik div-tagg som 'container' brukes ofte for å bestemme bredden på siden og at det er midstilt. Under vises de stilarkreglene til #container:
Margin og padding kan oppgis slik i stilark:
Margin 0 auto betyr at topp and bunn skal det ikke være marg. Til høyre og venstre er verdien 'auto' som betyr midstilt.
Arbeid videre med å erstatte liksom innholdet til ekte innhold og endre stilarkregler til ønsket utseende.
Legg inn en div-tagg ved å velge Insert Div Tag som finnes under Layout i Insert-ruten.
Følgende vindu vises:
Velg 'After tag' i Insert-listen. Div-ene som finnes i dokumentet listes. Velg hvor i strukturen menyen skal plasseres, f.eks. etter '<div id="header">'. Gi div-en en ID. Div-en legges inn i dokumentet med teksten 'Content for id "meny" Goes Here'. Erstatt teksten med menypunktene, markere de og gjør dem om til en ul-liste (Insert-rute > Text > ul):
Gjør menypunktene om til lenker.
Velg ul-tagg fra Tag Selector:
Legg til en stilarkregel ved å klikke på New CSS Rule-knapp nederst i CSS Styles-ruten.
'.twoColFixLtHdr #container #meny ul' leses slik - vi begynner til høyre. Regelen skal gjelde en ul-tagg, men kun når det finnes innen en tagg med id 'meny' som finnes innenfor en tagg med id 'container' som finnes innenfor en tagg med class 'twoColFixLtHdr'.
Velg List fra Category og endre list-style-type til 'none'. Tilsvarer:
.twoColFixLtHdr #container #meny ul { list-style-type: none; }
Bruk Tag Selector for å velge et listeelement (li) i ul-listen. Igjen legg til en stilarkregel:
Velg Block under Category og endre display til 'inline'. Velg Box under Category og legg inn 20px med padding til høyre for listepunktene:
Tilsvarer:
.twoColFixLtHdr #container #meny ul li { display: inline;
padding-right: 20px; }
Til slutt bruk Tag Selector for å velge div-en med ID 'meny'. Legg til en stilarkregel:
Velg Block under Category og endre Text-align til center for å midstille menyen. Tilsvarer:
.twoColFixLtHdr #container #meny { text-align: center; }
Resultatet ser nå slik ut:
Begynn på arbeidskravnummer 2
Dette verk er lisensieret under en Creative Commons Navngivelse-Ikkekommersiell-Del på samme vilkår 3.0 Unported lisens.