Share
Vandaag zetten we de tutorialserie voort voor het maken van het ShutterPress-ontwerp door het om te zetten van een onbewerkte PSD naar een functionele website met behulp van HTML en CSS. Inmiddels hebben we het oorspronkelijke ontwerp van de site gemaakt en de benodigde items verzameld voor codering. Nu gaan we het echt coderen, zodat het in alle belangrijke browsers werkt!
Vandaag draait alles om het omzetten van ons PSD-ontwerp naar een volledig werkende HTML-site! We zullen u stap voor stap door de markup leiden totdat we een site hebben die er geweldig uitziet in alle belangrijke browsers. We benaderen dit van een tussen- niveau van begrip, dus als we te snel voorbij gaan aan een van de basisstappen, aarzel dan niet om specifieke vragen te stellen in het gedeelte Opmerkingen hieronder.
Een speciale shoutout gaat naar CodeMyConcept, die de code en de tutorial voor deze dag van de serie gracieus heeft verstrekt!
Als je de vorige twee dagen van deze serie hebt gemist, kijk dan hier:
Ok, met onze doelen nu duidelijk gedefinieerd, laten we beginnen!
Allereerst beginnen we met het maken van de basismapstructuur voor ons project, die we zeker nodig hebben om de assets goed gestructureerd en georganiseerd te houden.
In dit geval hebben we een "css" -map nodig met ons hoofdcss-bestand, een "afbeeldingen" -map en een "js" (Javascript) -map zodra de HTML en CSS voltooid is, zodat we de schuifregelaar, lightbox kunnen toevoegen en accordeon-plug-ins. Ook het index.html-bestand in de hoofdmap
Vervolgens maken we de eenvoudige HTML-structuur van de lay-out met de secties Links en Rechts. We gaan een wrapper div gebruiken om alles en onze Left en Right-containers erin te plaatsen en centreren, evenals een div boven- en onderaan de wrapper om ons te helpen met de afgeronde hoeken terwijl de lay-out flexibel blijft.
ShutterPress LEFFT MENU HIERJUISTE INHOUD HIER
We geven er eigenlijk de voorkeur aan om de HTML te maken voordat we CSS schrijven, hoewel sommige mensen een gedeelte van HTML en CSS tegelijk doen en vervolgens doorgaan naar het volgende gedeelte. We hebben ontdekt dat het doen van de volledige HTML-code ons helpt bij het vooraf bedenken van de CSS en al het andere dat nodig kan zijn, zoals Javascript of PHP. Alles wat ik op dit moment toevoeg, is mijn CSS-reset.
Dus beginnen we met het coderen van het menu aan de linkerkant. Hier hebben we een h1-tag en een link voor ons logo nodig en een ongeordende lijst voor onze menu-items. We moeten ook een andere ongeordende lijst nesten op de derde li-tag in ons submenu en hetzelfde doen met enkele dummyitems op de tweede li-tag, zodat we onze javascript-accordeon later kunnen zien werken.
We moeten ook een aantal 'open' en 'gesloten' klassen toevoegen aan de links en het submenu, zodat we de pictogrammen kunnen besturen en welk submenu standaard wordt geopend, en de actieve klasse om de pagina te markeren die we momenteel bekijken.
ShutterPress
Nu, direct daarna, komen de sociale pictogrammen en het zoekveld in ons linkerdeel onderaan. Dus we maken een container-div voor het onderste gedeelte en scheiden [divs] voor elk van de twee delen in die container.
Voor de sociale pictogrammen hebben we een reeks nodig voor de tekst en een lijst voor de pictogrammen, elk met een klasse om het juiste pictogramafbeelding en de bijbehorende zweeftoestand te krijgen.
Voor het gedeelte Zoeken maken we een formulier en div's met de bijbehorende ingangen om ze te laten zweven en de achtergronden en pictogrammen toe te voegen. Dit doen in plaats van de stijlen rechtstreeks op de ingangen toe te passen, werkt een stuk beter om cross-browsing problemen met regelhoogten en tekstindentatie te voorkomen.
social:
- tumblr
- picasa
- vimeo
- flickr
- tjilpen
- rss
Dus dit is hoe het eruit ziet in onze browser, samen met de CSS Reset
Nu we ons linkermenu hebben voltooid, kunnen we beginnen met het coderen van het juiste inhoudsgedeelte voor de miniatuurgalerij.
Dus eerst maken we een ongeordende lijst met afbeeldingen in de koppelingen zodat ze klikbaar zijn voor onze lightbox-plug-in, en daarna maken we een div om onze vorige en volgende knoppen te bevatten.
Op dit moment moeten we beginnen met het minderen van de miniaturen en deze opslaan met hun overeenkomstige naam uit de HTML zodat we wat inline afbeeldingen kunnen laten zien.
Hier is hoe al onze HTML in Firefox zou moeten kijken
Voor sommige opmaak hebben we nu enkele algemene instellingen voor de lettertypen, tekst en koppelingen kleuren en achtergrondafbeelding
Accentsconagua
/ * ------------------------------ * / / * ALGEMENE RESET * / / * -------- -------------------- * / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, adres, big, cite, code, del, dfn, em, lettertype, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, centrum, dl, dt, dd, ol, ul, li, veldset, vorm, label, legenda, tabel, bijschrift, tbody, tfoot, thead, tr, th, td, hr, button margin: 0; padding: 0; border: 0; schets: 0; font-size: 100%; vertical-align: basislijn; background: none; ol, ul lijststijl: geen; h1, h2, h3, h4, h5, h6, li regelhoogte: 100%; blockquote, q quotes: none; q: before, q: after content: "; table border-collapse: collapse; border-spacing: 0; input, textarea, select font: 11px Arial, Helvetica, sans-serif; vertical-align: middle; padding: 0; margin: 0; invoer: focus, textarea: focus outline: none; form, fieldset border-style: none; html, body margin: 0; padding: 0; min-height: 100%; / * - --------------------------------*/ /* ALGEMENE INSTELLINGEN */ /*-------- ----------------------- * / body height: 100%; font: 12px / 12px "Lucida Sans", "Lucida Grande", sans-serif ; kleur: # 000; achtergrond: url ('? /images/bg.jpg') herhaal #fff; a text-decoration: none; kleur: # 000; a: hover text-decoration: none; color : # 0285da; Vervolgens stellen we de wrapper-stijlen in, zodat we de basis van onze lay-out kunnen bouwen, waarmee we beginnen door de breedte van onze wrapper te definiëren en deze te centreren met een marge: 0 auto;
Voor de bovenste en onderste divs die we eerder hebben gedefinieerd, stellen we achtergrondafbeeldingen en de vereiste afmetingen in om onze bovenste en onderste afgeronde hoeken te maken, en voor de verpakking plaatsen we een achtergrondafbeelding die herhaald wordt op de Y-as die onze inhoud bevat die de scheidingslijn tussen de inhoud links en rechts.
Voor de wrapper-bottom div moeten we een clear instellen: beide; omdat als ik eenmaal mijn containers voor Rechts en Links drijf, de wrapper instort, dus we moeten dit voorkomen door de dobbers te verwijderen.
/ * -------------------------- * / / * WRAPPER * / / * ------------- ----------- * / # wrapper-top background: url ("? /images/content-top.jpg") no-repeat scroll center top #FFFFFF; hoogte: 18 pixels; width: 994px; #wrapper width: 994px; overloop verborgen; marge: 64 px automatisch 0; background: url ("? /images/content-bg.jpg") repeat-y scroll center center #FFFFFF; # wrapper-bottom background: url ("? /images/content-bottom.jpg") no-repeat scroll center bovenaan #FFFFFF; hoogte: 61px; width: 994px; beiden opschonen; 
Dit is het resultaat in onze browser:
Nu we onze wrapper klaar hebben kunnen we verder gaan met de inhoud: eerst stellen we de breedte van zowel de containers rechts als links zo in dat we ze naar de juiste positie kunnen drijven.
/ * -------------------------- * / / * LINKERMENU * / / * ------------ ------------ * / / * Hoofdmenu * / #left width: 235px; zweven: links; / * ------------------------------ * / / * RECHTERE INHOUD * / / * ------- --------------------- * / / * Miniatuurgalerij Inhoud * / #right width: 758px; zweven: rechts;
Nu beginnen we met het stileren van de navigatie door een sprite-afbeelding te maken voor het logo, de knoppen en de pictogrammen op het ontwerp.
Deze lay-out lijkt niet in de hoogte te groeien, maar we willen de dingen flexibel houden, voor het geval er in de toekomst meer elementen aan de navigatie moeten worden toegevoegd.
Daarom hebben we de linkercontainer met een minimale hoogte ingesteld, zodat de divisie links onder in absoluut kan worden gepositioneerd zonder een enorme marge te hoeven gebruiken om het naar beneden te duwen, op deze manier als nieuwe elementen worden toegevoegd, behoudt de lay-out nog steeds de originele afmetingen.
We hebben ook de koppelingen in de navigatie ingesteld om als blokken te worden weergegeven, zodat het hele gebied kan worden aangeklikt en niet alleen de tekst en de open en gesloten achtergronden worden toegevoegd met behulp van hun respectievelijke klassen en de positie van onze sprite wordt aangepast.
Het submenu met een klasse 'gesloten' wordt ingesteld om weer te geven: geen; dus alleen de standaardversie wordt weergegeven.
/ * -------------------------- * / / * LINKERMENU * / / * ------------ ------------ * / / * Hoofdmenu * / #left width: 235px; zweven: links; minimale hoogte: 615 px; positie: relatief; #left .logo a background: url ("? /images/sprite.png") no-repeat scroll 0 0 transparent; display: block; hoogte: 32px; marge: 8px auto 0; text-indent: -999999px; width: 190px; #left .menu width: 100%; border-top: 1px vaste #eaeaea; margin-top: 30px; #left .menu li a display: block; hoogte: 35 px; regelhoogte: 35px; padding-links: 22px; border-bottom: 1px solid #eaeaea; #left .menu li a.active color: # 0285DA; border-right: 1px solid #fff; #links .menu li a.closed background: url ("? /images/sprite.png") no-repeat scroll 46px -231px transparent; #left .menu li a.opened background: url ("? /images/sprite.png") no-repeat scroll 46px -257px transparent; #left .menu li. submenu li a padding-left: 38px; #links .menu .sub-menu.gesloten weergave: geen; # links-onder positie: absoluut; onderkant: 0; breedte: 100%; Voor de onderste sociale pictogrammen stellen we de afbeeldingen in met behulp van de respectieve clasess en stellen we de achtergrondafbeeldingen in met behulp van posities, dit geldt ook voor de hover-status.
/ * Social * / # left-bottom .social overflow: verborgen; hoogte: 34 px; border-top: 1px vaste #eaeaea; border-bottom: 1px solid #eaeaea; padding-left: 25px; # left-bottom .social span float: left; regelhoogte: 34 px; # left-bottom .social ul float: left; marge: 9px 0 0 10px; # left-bottom .social ul li float: left; hoogte: 34 px; # left-bottom .social ul li a background: url ("? /images/sprite.png") no-repeat scroll -5px -50px transparent; display: block; hoogte: 16px; width: 16px; marge: 0 5px 0 0; text-indent: -999999px; # left-bottom .social ul li a: hover background-position: -5px -80px; # left-bottom .social ul li a.picasa background-position: -26px -50px; # left-bottom .social ul li a.picasa: hover background-position: -26px -80px; # left-bottom .social ul li a.vimeo background-position: -47px -50px; # left-bottom .social ul li a.vimeo: hover background-position: -47px -80px; En voor het zoekgedeelte drijven we in feite de invoer container divs en zetten de syles daarop in plaats van de invoer.
/ * Zoeken * / # left-bottom .search overflow: hidden; margin-top: 12px; # left-bottom .search .left background: url ("? /images/sprite.png") no-repeat scroll -5px -203px transparent; float: left; hoogte: 27px; margin-left: 20px; opvulling: 6px 0 0 10px; width: 158px; # left-bottom .search .left input border: none; achtergrond: transparant; breedte: 100%; # left-bottom .search. right background: url ("? /images/sprite.png") no-repeat scroll -173px -203px transparent; float: left; hoogte: 27px; # left-bottom .search. right input background: none repeat scroll 0 0 transparent; grens: medium geen; cursor: wijzer; hoogte: 27px; width: 27px; Dit is wat we nu hebben in firefox
Hier zweven we alleen de lijstitems om een rasterweergave te krijgen, we voegen opvulling, achtergrondkleur en randen toe om een frame voor elke submodule te krijgen en voegen ook marges toe voor scheiding.
Tenslotte. we hebben onze knoppen met een container-div die gecentreerd is en beide schakels zijn zwevend.
/ * ------------------------------ * / / * RECHTSGEHALTE * / / * -------- -------------------- * / / * Thumbnail Gallery Content * / #right width: 758px; zweven: rechts; #rechts .thumbnails overflow: hidden; opvulling: 10px 0 0 32px; #rechts .thumbnails li float: left; marge: 0 21px 18px 0; #right .thumbnails li a border: 1px solid #eaeaea; opvulling: 2px; achtergrond: # f2f2f2; weergave: blok; #recht .navigatie margin: -10px auto 0; overloop verborgen; breedte: 50px; #recht .navigatie a background: url ("? /images/sprite.png") no-repeat scroll 0 0 transparent; display: block; float: left; hoogte: 21px; text-indent: -999999px; width: 21px; #right .navigation .prev background-position: -159px -75px; marge: 0 8px 0 0; #right .navigation .next background-position: -186px -75px; Hier is onze eerste pagina klaar in firefox!
Als we doorgaan naar onze subpagina, dupliceren we onze index.html en noemen het iets als subpage.html of inner.html, dan halen we alle inhoud in onze # right container weg en beginnen we met het bouwen van de html die nodig is voor onze slider gallery en de 3 onderstaande modules.
We hebben een div nodig om de volledige opmaak voor mijn diavoorstelling vast te houden, een lijst met afbeeldingen die de dia's zullen zijn en we zullen ook 3 verschillende versies van de afbeeldingen gebruiken, zodat we wat actie later met de jQuery Cycle-plug-in kunnen zien.
We stellen ook een lege div in die absoluut boven op de afbeeldingen staat om als frame te fungeren voor het geval deze layout ooit in een CMS geïmplementeerd moet worden om wat dynamische inhoud te krijgen. Als dit gebeurt, kunnen we gewoon elke afbeelding toevoegen zonder de afgeronde hoeken en schaduwen voor de hand te photoshoppen.
En tot slot voor de slideshow moeten we een navigatie-div maken met een paar links voor onze "vorige" en "volgende" galerijnavigatie.
Ons laatste blok met inhoud heeft onze 3 modules in hun eigen container, elke module is een div op zichzelf en ik zweef zodat ze naast elkaar staan. Binnenin heb ik een h2-tag voor de titel en een alinea voor de tekst.
Module één
Sed korem sit feugiat erat at ante vestibulum auctor. Cras rhoncus diam et sem gravida sagittis. Ut tempor sapien in neque ultrices varius. Lorem ipsum-tekst.
Module twee
Pellentesque lacinia, augue vel venenatis commodo, ante neque tempor augue, sempre rhoncus diam justo in ante. Aliquam in ultrices eleifend libero, in sit amen consectetur velit quis.
Module Drie
Suspendisse porta sem vel enim molestie suscipit elementum leo porta. Cras lorem lectus, viverra zit in semper quis, vehicula quis velit.
In dit specifieke ontwerp was het een beetje lastig om het frame voor de dia's te krijgen, dus dit is wat we deden:
We namen de laag met de naam "Shape 90" en we lieten de vulling naar 0% vallen. Klik vervolgens met de rechtermuisknop op de laag met de naam "1720729_high", selecteer het geselecteerde knipmasker en verborg vervolgens de laag.
Teruggegaan naar de laag "Vorm 90" en zet de dekking op 50%. Klikte met de rechtermuisknop op de laag en maakte een duplicaat, selecteerde beide lagen "Shape 90" en voegde ze samen.
Nu kunt u het frame opslaan als een afzonderlijke transparante .png en gewoon wat witte achtergrond toevoegen in de hoeken, zodat deze de afbeeldingen op de achterkant bedekt.
We hebben de afmetingen voor de modules ingesteld en laten ze zwevend om ze inline te krijgen; daarna stellen we de stijlen samen met de sprite in als achtergrondafbeelding voor de pictogrammen.
We plaatsen de lijstitems van de schuifregelaar om een positie te hebben: absoluut; met betrekking tot de ul zodat ze samenvouwen en eruit zien als slechts één afbeelding, zodat we de echte uitstraling van de lay-out kunnen krijgen, zullen we de functionaliteit toevoegen nadat het hele ding klaar is.
De vorige en volgende knoppen zijn ook absoluut geplaatst, zodat we ze verticaal gecentreerd kunnen houden.
/ * Diavoorstelling Inhoud * / # gallery-holder position: relative; breedte: 719px; marge: 20 px auto 0; hoogte: 442 px; # gallery-holder .slideshow-frame background: url ("? /images/slideshow-frame.png") no-repeat scroll 0 0 transparent; Hoogte: 442px; positie: absoluut; top: 0; links: 0; width: 719px; z-index: 10; # gallery-houder .slideshow li height: 442px; positie: absoluut; top: 0; width: 719px # gallery-holder .navigation a height: 92px; left: 0; margin-top: -44px; positie: absoluut; boven: 50%; width: 47px; z-index: 15; # gallery-houder .navigation a.prev background-position: -6px -103px; margin-top: -44px; # gallery-houder .navigatie a.next background-position: -65px -103px; left: auto; rechts: 0; # modules-houder overflow: verborgen; margin-top: 24px; marge links: 20 px; # modules-houder. module float: links; breedte: 204 px; margin-right: 40px; # modules-houder. module h2 font-size: 18px; font-weight: normal; margin-bottom: 5px; padding-left: 25px; # modules-houder. module h2.module-one background: url ("? /images/sprite.png") no-repeat scroll -128px -170px transparent; # modules-houder. module h2.module-two background: url ("? /images/sprite.png") no-repeat scroll -128px -140px transparent; # modules-houder. module h2.module-three background: url ("? /images/sprite.png") no-repeat scroll -128px -110px transparent; # modules-houder. module p color: # 6a6a6a; regelhoogte: 15px; Na dit alles kunnen we zien dat de moduletitels een Museo-lettertype erop hebben, wat geen webveilig lettertype is, dus we moeten dit instellen met @ font-face. Dus hebben we het lettertype beheerd via Font Squirrel (http://www.fontsquirrel.com/fontface/generator) en de lettertypen in hun eigen map met lettertypen geplaatst in de hoofdmap van ons project en de CSS in onze algemene instellingen ingesteld met de juiste paden voor de lettertypen.
/*---------------------------------*/ /* ALGEMENE INSTELLINGEN */ /*----- -------------------------- * / lichaam hoogte: 100%; lettertype: 12px / 12px "Lucida Sans", "Lucida Grande", schreefloos; kleur: # 000; achtergrond: url ('? /images/bg.jpg') herhaal #fff; een text-decoration: none; kleur: # 000; a: hover text-decoration: none; kleur: # 0285da; @ font-face font-family: 'Museo700'; src: url ('? /fonts/museo700-regular-webfont.eot'); src: url ('? /fonts/museo700-regular-webfont.eot?#iefix') formaat ('embedded-opentype'), url ('? /fonts/museo700-regular-webfont.woff') formaat ('woff '), url ('? /fonts/museo700-regular-webfont.ttf ') formaat (' truetype '), url ('? /fonts/museo700-regular-webfont.svg#Museo700 ') formaat (' svg ') ; font-gewicht: normaal; lettertype: normaal; Dus alles wat we nu moeten doen, is de lettertypefamilie instellen op onze h2-tags, en nu is onze tweede pagina voltooid.
# modules-houder. module h2 font-family: 'Museo700'; font-size: 18px; font-weight: normal; margin-bottom: 5px; padding-left: 25px;
Om nu wat functionaliteit en animatie aan ons project toe te voegen, zullen we twee plug-ins gebruiken: jQuery Cycle voor onze diavoorstelling (http://jquery.malsup.com/cycle/) en prettyPhoto voor onze lightbox-galerij (http: // www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/) en dan maken we een aangepaste functie voor onze menuaccordeon.
Zorg ervoor dat u de prettyPhoto-plug-in downloadt en de benodigde items naar hun respectieve mappen kopieert (javascript in de map "js", stylesheets naar de map "css", enz.), De cyclus-plug-in kan worden gekoppeld vanuit Github en jQuery kan worden gekoppeld van Google API's.
We zullen ook een main.js-bestand maken in onze JS-map waarin we onze aangepaste functie en plug-insamenstelling kunnen plaatsen.
We verwijzen dus naar ons stylesheet in de kop van de html-bestanden
ShutterPress
We verwijzen ook naar onze javascript-bestanden onder aan ons document vlak voor de afsluitende html-tag.