• Articles
• admin

hver hjemmeside er anderledes. Dette skyldes, at alle vælger et andet tema eller” look and feel ” til deres hjemmeside. Oprettelse af en overskrift og topnavigationsmenu i ordtryk vil være en lidt anden proces for hvert sted.

her bruger jeg Genesis-temarammen for ordtryk, fordi jeg absolut elsker det. Der vil dog være vigtige punkter i denne artikel, der vil hjælpe nogen med en hjemmeside.

dette er en del af en serie af artikler og videoer, hvor jeg opretter en hjemmeside fra bunden. Jeg forklarede først, hvordan man laver et barnetema til Genesis-rammen, og så skrev jeg om at begynde at style temaet ved at tilføje baggrunden og logoet.

tilføjelse af Facebook-link, kvidre-link og anden information til overskriften

når vi allerede har tilføjet logoet øverst til venstre på vores sides overskrift, tilføjer vi nu nogle ekstra oplysninger til højre side af vores overskrift. I dette tilfælde vil vi tilføje kvidre og Facebook links, etc., ved hjælp af en kontrol.

jeg må indrømme, at jeg er blevet lidt skør for nylig, efter at have været lidt afvisende over for dem i fortiden. Hvad er en dims? Nå, de er selvstændige bits af en hjemmeside, som du kan trække rundt og kontrollere via et brugervenligt kontrolområde.

en af de mange skønheder i Genesis er det ubesværet evne til at udvide ethvert område af hjemmesiden. Så:

• hvis du vil have en anden rækkefølge af kasser på sidebjælken, kan du gøre det på få sekunder.
• hvis du vil have et fremhævet indlæg her, 5 seneste kategorioverskrifter med miniaturebilleder der på hjemmesiden, kan du gøre det på få sekunder.
• hvis du vil have en søgefelt, social deling, Kvidrefeed, kalender, tag cloud osv., her, der eller hvor som helst, kan du gøre det på få sekunder.

denne intuitive, brugervenlige back-end-funktionalitet er især nyttig, når du opretter hjemmesider til kunder, der ønsker evnen til at kontrollere alle områder af en hjemmeside, men mangler færdighederne til at gøre dette.

alligevel, i dette tilfælde er vi nødt til at oprette vores egen brugerdefinerede kontrol, og det gør vi ved at trække over en tekstkontrol til det højre område i grænsefladen udseende >.

og i denne tekst Kontrol kan du sætte HTML. Her er den HTML, jeg lægger til netop dette sted. Jeg har lige et Facebook-link, Et kvidre link og et telefonnummer.

<div>
<ul>
<li><a href=""><img src="http://site.com/images/facebook.jpg" style="border:0;" /></a></li>
<li><a href=""><img src="http://site.com/images/twitter.jpg" style="border:0;" /></a></li>
</ul>
<p><strong>Tel:</strong> +44 20 xxxx xxxx</p>
</div>

og her er CSS til at style ovenstående:

#connect {float: right;}
#connect ul {float: right;}
#connect ul li {list-style: none; display: inline;}
#connect p#tel {margin-top: 33px; font-size: 18px; color: #66504e;}

her er hvad der vises på højre side af hovedet som et resultat:

Video om tilføjelse af overskriftsinfo og navigationsmenu

i denne video viser jeg, hvordan du tilføjer kontrollen til overskriften, og hvordan du kan style menuen i Genesis.

oprettelse af den øverste navigationsmenu

Topnavigationsmenuer (eller “navbars”) plejede at være bane for min eksistens, men nu har jeg udviklet et virkelig nemt system til at oprette dem, der tager sekunder i modsætning til timer.

Genesis har allerede mulighed for at have en primær og sekundær navigationsmenu. For dette særlige eksempel blev jeg af med den sekundære navigationsmenu ved hjælp af Genesis-temaindstillingerne, da klienten kun ønskede en.

i videoen ovenfor viser jeg, hvordan jeg ændrer CSS for at få menuen til at ligne den i PSD-visualen, jeg gjorde.

ved at bruge Chrome-udviklerværktøjer eller Firebug-tilføjelsen til Firebug kan du se, hvilke vælgere i HTML ‘ en der bruges i CSS til at style menuen.

#nav {-khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
background: #745d5c url(images/nav.gif) repeat-x ;
border: 1px solid #745d5c;
width: 958px; }

som du kan se i ovenstående video, øgede jeg radius for de afrundede hjørner, tilføjede en gradientbaggrund og ændrede menuens kantfarve. Så nu ser menuen ikke ud som den kedelige grå, Du får med en vanilla Genesis-installation.

jeg tilføjede også følgende CSS for at ændre farven på teksten i menuen til hvid.

#nav li a {color: #fff; }

der er også mulighed for at ændre stilen på de aktuelle sidelink, svævelinkene, undersidelinkene og undersidelinkene.

med Genesis kan du nemt have rullemenuer til undersider (eller underordnede sider) og derefter fly-out links til underundersider (eller børnebørnsider). Du kan have disse på både de primære og sekundære navigationsmenuer.

oprettelse af sider, børnesider og børnebørnssider

her er min video, hvor jeg tilføjer nye sider til menuen, så de vises i navigationsmenuen som sider, børnesider (som rullemenuer) og børnebørnssider (som flyouts).

du kan vælge en side til at være et barn eller barnebarn side under forælder i sideeditoren. Og når du ser på siderne (under Sider > alle sider) er børne-og barnebarnssiderne indrykket under deres forælder. At gøre dette vil også give dem en logisk URL (for eksempel www.site.com/music/jazz/charlie-parker hvor siden “Charlie Parker” er et barn af “musik”).

oprettelse af en navigationsmenu med rullemenuer og fly-outs

for at få disse sider til at vises i navigationsmenuen korrekt, skal du bare trække og slippe dem i deres respektive positioner i udseende > menuer. Igen er børnesider indrykket under deres forælder. Glem ikke at give menuen et navn (som “navbar”, for eksempel) og indstil det til at være den primære navigationsmenu.

så arrangere sider i udseendet > menuer område som dette…

… vil oprette en rullemenu med fly-outs som denne:

se videoen ovenfor for en demonstration af dette.

hvad synes du?

hvad synes du om denne metode til redigering af overskrift og navigationsmenu på en hjemmeside? Gør du det på en anden måde?