Bakgrunner innen webdesign: Legge til tekststiler

Dette er det siste innlegget i serien min om bakgrunner innen webdesign. I det siste innlegget la vi navigasjon til det ferdige designet; nå avslutter vi temamalen for restauranten med tekststiler inkludert avsnitt, overskrifter, ankere og lister. Merk at alle arbeidsfilene finner du i ledsagernedlastingen.

Hvis du ikke allerede har lest de forrige innleggene i denne serien, anbefaler jeg på det sterkeste at du går gjennom dem når de er uthevet og lenket i rekkefølge nedenfor:

  • Bakgrunner innen webdesign: Lage et tema
  • Bakgrunner innen webdesign: Går fra PSD til kode
  • Bakgrunner innen webdesign: Legger til navigasjon

Før vi begynner med kodingen må vi ta en titt på den originale PSD-filen som vi opprettet i bilderedigeringsverktøyet vårt, i dette tilfellet Photoshop. Åpning av denne filen vil gi oss et forfriskende bilde av det endelige ferdige produktet som må gjengis i kode. Filen BackgroundDesign.psd er inkludert i nedlastingen.

Når redigeringsverktøyet ditt for HTML-kode er åpent, er det på tide å forvandle finpussen med tekstelementer, men først må vi legge inn den semantiske kodingen til HTML-filen vår. I denne iterasjonen heter den Page_v4.html, og er inkludert i nedlastingen.

La oss starte med den semantiske koden der vi vil legge til "Velkomst"-overskriften og underoverskriften "til restauranten vår", sammen med den første introduksjonsteksten, venstre side og høyre kolonnetekst og bunnteksten. Se et delvis skjermbilde av koden som vises i Dreamweaver i figur A:

Koden er tilgjengelig for kopiering til en ny HTML-fil nedenfor:


Velkommen


til restauranten vår



Vi tilbyr det beste i kontinentale retter som bare bruker ferske og lokale ingredienser, og oppskrifter fra vår rike kulturarv.



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, ved nonummy quam ante ac quam. purus a augue condimentum adipiscing. Aenean sagittis.




Daglige spesialiteter


~ ~ Fisk ~~

Tunfisk 16


 Laks 19 

 Såle 24 

 Yellowtail 18


~ ~ Sjømat ~ ~

Reker 17


 Kamskjell 15 

 Krabber 22 

 Hummer markedspris


~~ Beef ~~

Filet (9 oz) 16


 Filet (12 oz) 22 

 T-bein (16 oz) 26 

 Rib-eye (16 oz) 24




Restaurantblogg


Oppskrift: Ferske bær a la Creme

Av Chef


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, ved nonummy quam ante ac quam. purus a augue condimentum adipiscing. Aenean sagittis. (Les mer)


Ny meny: Sunday Jazz Brunch

Av ledelsen


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, ved nonummy quam ante ac quam. purus a augue condimentum adipiscing. Aenean sagittis. (Les mer)


Fresh Local: Fall Crops

Av Chef


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, ved nonummy quam ante ac quam. purus a augue condimentum adipiscing. Aenean sagittis. (Les mer)






 Restauranten 

 123 Main Street 

 Anytown, AB 12345 

 (123) 123-4567 

 

Som du ser fra den semantiske markeringen, har vi tatt det tekstlige innholdet fra PSD-filen og kopiert det over med elementkoder inkludert h2, h3, h4, h5, p, a, a: hover og byline. Merk at forankringene til blogginnleggstitlene og "Les mer" bare er plassholdere og ikke løser seg til noen sider; disse er gitt for å vise effekten av a og a: hover tag element-stilene.

CSS-elementene for de nye tekststilene vises nedenfor, ved å bruke Bookman Old Style-skriften for det meste av teksten, med en serif, og fontstabelen er bygget for hvert tekstelement.

 / * Tekststiler * / 

 h2 { 

 margin: 0px 0px 20px 5px; 

 skriftstørrelse: 44px; 

 font-family: "Bookman Old Style", serif; 

 font-stil: kursiv; 

 farge: # 000000; 

 polstring-venstre: 145px; 

 polstring-bunn: 5px; 

 stilling: absolutt; 

 z-indeks: 3; 

 } 

 h3 { 

 margin: 40px 0px 20px 5px; 

 skriftstørrelse: 22px; 

 font-family: "Bookman Old Style", serif; 

 font-stil: normal; 

 farge: # 666666; 

 polstring-topp: 5px; 

 polstring-venstre: 155px; 

 polstring-bunn: 20px; 

 stilling: absolutt; 

 z-indeks: 3; 

 } 

 h4 { 

 font-family: "Bookman Old Style", serif; 

 skriftstørrelse: 18px; 

 farge: # 333333; 

 } 

 h5 { 

 font-family: "Bookman Old Style", serif; 

 skriftstørrelse: 16px; 

 farge: # 993333; 

 } 

 liten { 

 farge: # 595856; 

 font-vekt: fet; 

 skriftstørrelse: 11px; 

 skjerm: blokkering; 

 margin-bottom: 15px; 

 } 

 en { 

 farge: # 993333; 

 tekstdekorasjon: ingen; 

 } 

 a: hover { 

 farge: # 1E9378; 

 } 

 p { 

 margin: 0px 0px 2px 0px; 

 font-family: "Bookman Old Style", serif; 

 skriftstørrelse: 18px; 

 } 

 #byline { 

 polstring-bunn: 10px; 

 margin-top: -25px; 

 font-size: 16px; 

 font-style: oblique; 

 } 

Legg merke til følgende høydepunkter i tekststiler:

  1. For h2-elementet har jeg lagt til erklæringen for en z-indeks på 3, dette for å la overskriftsteksten overlappe bildemontasjen som har en z-indeks på 2, og venstre polstring på 145px slik at den er synlig, ellers ville det ligge bak montasjen.
  2. H3-elementet har lignende erklæringer med litt forskjellige pikselreferanser.
  3. Elementene h4 og h5 brukes i venstre og høyre kolonne for menyspesialiteter og bloggtitler.
  4. Bylineelementet justerer teksten rett under overskriftene, og justerer for normalområdet som skulle oppstå under et normalt toppelement.
  5. Elementet "a" har en tekstdekorasjon på ingen, med fjerner alle understrek fra hyperkoblinger og bevarer fargedeklarasjonen til # 993333, som er en magenta fargetone.
  6. A: hover-elementet har en fargedeklarasjon på # 1E9378, som er en cyan fargetone.

I tillegg er det flere oppdateringer til andre elementer i CSS fra forrige segment i denne serien, og de er notert i filen style_v4.css som er inkludert i nedlastingen. Oppdateringene inkluderer følgende modifikasjoner:

 #TopContentText - Omdøpt fra #contentText 

 polstring-topp: 80px; - Lagt til denne erklæringen 

 polstring-høyre: 150px; - Endret denne erklæringen fra polstring-høyre: 30px; 

 polstring-bunn: 20px; - Lagt til denne erklæringen 

 polstring-venstre: 180px; - Endret denne erklæringen fra polstring-venstre: 170px; 

 #right_column 

 polstring-topp: 40px; - Lagt til denne erklæringen 

 #left_sidebar 

 bredde: 400px; - Endret fra bredde: 475px; 

 polstring-venstre: 80px; - Endret fra polstring til venstre: 20px; 

 polstring-topp: 40px; - Lagt til denne erklæringen 

 #footImage 

 margin-top: 20px; - Endret denne erklæringen fra margin-top: 90px; 

Den resulterende siden inneholder nå alle elementene som ble utviklet i PSD-filen BackgroundDesign.psd, vist i figur B, som kan vises i nettleseren din fra HTML-filen Page_v4.html som er inkludert i nedlastingen. Den endelige HTML-en ble testet i både IE og Firefox for kompatibilitet.

Figur B

© Copyright 2021 | pepebotifarra.com