Bakgrunner innen webdesign: Legger til navigasjon

Fortsetter vi der vi slapp fra mitt forrige innlegg "Bakgrunner i webdesign: går fra PSD til kode", i dette innlegget, vil vi opprette navigasjonslinkene i overskriften ved å bruke CSS til å definere flere klikkbare lenkeområder, eller hotspots, i en enkelt image, Header.gif vist i figur A. I tillegg vil jeg også definere CSS-tekststiler for ankertekstlinkene for den generiske restauranttema-malen. Alle arbeidsfiler og bilder er inkludert i nedlastingsfilen . Serien så langt:

  • Bakgrunner innen nettdesign: Lage et tema
  • Bakgrunner innen webdesign: går fra PSD til kode

Figur A

CSS-bildekartlegging

Dokumenter pikslene

Vi lager et bildekart av sortering med tittelen på overskriften fra forrige innlegg. Jeg sier "sorts" fordi det ikke er et sant "bildekart", men et sett med CSS-stiler som vil lage koblbare hot spots i et HTML-dokument. Med Photoshop som åpner og ser på Header.gif- filen som er funnet i nedlastingen, gjør sikker på at rutenettet er satt til piksler, da vi bruker rutenettet til å bestemme pikselposisjonene som referansepunkter når vi oppretter CSS-stiler. Ved hjelp av pikselgittervinduet i Photoshop for topptekstbildet, lagde jeg flere notater, og registrerte bredde- og høydedimensjonene for hver "knapp" -del, og noterte også topp- og venstreposisjonen til hver av de fem "knapp" -delene. Mine notater vises nedenfor:

  • Hjem - bredde: 155px, høyde: 75px, topp: 52px, venstre: 85px
  • Meny - bredde: 180px, høyde: 72px, topp: 48px, venstre: 245px
  • Oppskrifter - bredde: 160px, høyde: 74px, topp: 48px, venstre: 430px
  • Blogg - bredde: 150px, høyde: 75px, topp: 45px, venstre: 594px
  • Reservasjoner - bredde: 205px, høyde: 80px, topp: 45px, venstre: 748px

Disse notasjonene vil bli brukt til fremtidig referanse når det er på tide å legge til stylingen senere i CSS.

Semantisk markering

Med Dreamweaver åpen, må vi nå lage den semantiske markeringen i HTML-filen vår; se filen Page_v3.html i nedlastingen. Vi vil legge til en uordnet liste og bruke Header.gif- filen som bakgrunnsbilde. Følgende markering legges til i HTML-filen som vist nedenfor:



  • Hjemmeside


  • oppskrifter

  • bloggen

  • Reservasjoner


  • Den uordnede listen er den eneste semantiske markeringen som er lagt til HTML-dokumentet for navigasjonen i overskriften. Alt gjenværende arbeid blir utført i CSS-filen style_v3.css, som også finnes i nedlastingen. Vær oppmerksom på at forankringene til menu.html, oppskrifter.html, blog.html og reservasjoner.html bare er stedsholdere. Det er ingen eksisterende HTML-dokumentsider; forankringene kan imidlertid tilordnes en hvilken som helst aktiv side for testing. Eller kopier av hjemmesiden kan lages og gi nytt navn deretter.

    CSS Styling Hvis du har fulgt med på forrige innlegg, vil du vite at #header-elementet inneholdt den originale CSS "bakgrunn: url (bilder / Header.gif);" erklæring, dette er nå flyttet til et nytt stilelement, ul # menylisten, som vist nedenfor:
     ul # menyliste { 

     listestil: ingen; 

     bakgrunn: url (images / Header.gif); 

     stilling: relativ; 

     padding-bottom: 240 piksler; 

     Bakgrunnen-stilling: center; 

     background-repeat: no-repeat; 

     flow: auto; 

     color: # 030303; 

     z-indeks: 1; 

    Det er flere elementer å merke seg her; erklæringen du må ta hensyn til i ul # menuList- elementet er dens posisjonsverdi av relativ, også polstring, overflow og z-indeks deklarasjoner flyttes inn i dette elementet fra det originale #header elementet. Den uordnede listen vises nå øverst til venstre i overskriftsdelingen som vist i figur B :

    For enkel å plassere li- elementene, har jeg lagt til en rød rød kant på hver side, og gitt en retningslinje for å visualisere hotspots. Vi fjerner grensen når vi er ferdige med å justere li- elementene. Dessuten har alle li- elementene en absolutt posisjonsverdi. Nedenfor er ul # menuList li- elementet lagt til CSS:

     ul # menuList li { 

     stilling: absolutt; 

     grense: 1px solid # FF0000; 

     } 

    Hvis du går gjennom HTML-dokumentsiden nå, som vist i figur C, vil du se at li- elementene er samlet sammen i venstre hjørne av overskriftsdelingen og overlapper hverandre. Dette er fordi de alle har en absolutt posisjon, men vi har ikke lagt til noen verdi-, venstre-, høyre- eller bunnverdierklæring.

    Figur C

    Med merknadene vi tok fra Photoshop-pikselnettvisningen som referansepunkt, opprettet jeg deretter de individuelle stilene som id hver, og justert deklarasjonsverdiene da jeg gjennomgikk HTML-dokumentet, og foretok justeringer deretter. Rett under ul # menuList li elementstiler, har jeg lagt til følgende stiler som vist nedenfor:

     #hjem { 

     bredde: 155px; 

     høyde: 75px; 

     topp: 52px; 

     venstre: 85px; 

     } 

     #Meny { 

     bredde: 180px; 

     høyde: 72px; 

     topp: 48px; 

     venstre: 245px; 

     } 

     #oppskrifter { 

     bredde: 160px; 

     høyde: 74px; 

     topp: 48px; 

     venstre: 430px; 

     } 

     #blog { 

     bredde: 150px; 

     høyde: 75px; 

     topp: 45px; 

     venstre: 594px; 

     } 

     #reservere { 

     bredde: 205px; 

     høyde: 80px; 

     topp: 45px; 

     venstre: 748px; 

     } 

    Hvert li-element har nå en høyde og breddeverdi, i tillegg til en egenskap til venstre og topp. Det resulterende dokumentvisningen med plasseringen av li, koblingsankere og definerte hotspots i er sett i figur D:

    Legg merke til i det gjeldende HTML-dokumentet at hyperkoblingsankrene fremdeles er synlige innenfor hotspots, og li-elementene våre er de eneste "klikkbare" delene av ankerelementene. For å få hele li-elementet til å være klikkbart må vi legge til ul # menuList li en stil til CSS opprette erklæringer for ankerelementene som vist nedenfor:

     ul # menuList li a { 

     skjerm: blokkering; 

     høyde: 100%; 

     tekstinnrykk: -9000px; 

     } 

    Noen få merknader om denne stilen: Skjermegenskapens verdi er nå blokkert, i stedet for standard for inline, og dette tillater en høydeverdi, med en innstilling på 100%. Dessuten tillater den negative tekstinnrykkverdien på -9000px at teksten bare vises hvis CSS er deaktivert; Ellers ønsker vi ikke at det vises på displayet. Ta en titt på HTML-dokumentsiden nå, og hold musepekeren over "hotspots", og legg merke til at hotspotene inkluderer hele li- elementet (se figur E ). Når som helst kan du gå tilbake for å justere bredden, høyden, toppen og venstre innstillingene til hotspots for å justere dem til de respektive bakgrunnsbildene og legge til avstand mellom som jeg har gjort. Hvis du trengte å legge til en annen "knapp" på siden, er alt du trenger å legge til et nytt li- element og opprette posisjonering i henhold til bildeplassering.

    Figur E

    Vi kan nå fjerne grensen: 1px solid # FF0000; erklæring fra ul # menuList li- elementet i CSS siden vår posisjonering er angitt for navigasjonen.

    I neste avdrag vil jeg demonstrere å legge til tekststilelementene for topptekst-, hovedinnholds- og bunntekstdivisjonene.

    © Copyright 2021 | pepebotifarra.com