ShutterPress Design & Koda En bildportföljwebbplats (Dag 3 HTML / CSS)

Idag fortsätter vi tutorial-serien för att skapa ShutterPress-designen genom att konvertera den från en rå PSD till en funktionell webbplats med hjälp av HTML och CSS. Nu har vi skapat den ursprungliga webbdesignen och samlat in de nödvändiga tillgångarna för kodning. Nu ska vi faktiskt koda det så det kommer att fungera i alla större webbläsare!

Intro: Dag 3, HTML / CSS-konvertering

Idag handlar det om att konvertera vår PSD-design till en helt fungerande HTML-sida! Vi går igenom markeringen steg för steg tills vi har en webbplats som ser bra ut på alla större webbläsare. Vi kommer att närma oss detta från en mellanliggande nivå av förståelse, så om vi går för fort förbi några av de grundläggande stegen, är du välkommen att fråga några specifika frågor i avsnittet Kommentarer nedan.

En speciell shoutout går till CodeMyConcept, vem har nådigt givit koden och handledning för den här dagen i serien!

Om du saknade de tidigare två dagarna i denna serie, kolla dem här:

Dag ett: Design
Dag två: Pre-flight

Oj, med våra mål nu tydligt definierade, låt oss börja!

Steg 1 Grundläggande mappstruktur och layout

Först börjar vi med att skapa den grundläggande mappstrukturen för vårt projekt, vilket vi definitivt måste behålla tillgångarna väl strukturerad och organiserad.

I det här fallet behöver vi en "css" -mapp med vår huvudsakliga css-fil, en mapp "bilder" och en "js" (Javascript) -mapp när HTML och CSS är fullständiga så att vi kan lägga till skjutreglaget, ljusboxen och dragspel plugins. Även index.html-filen i rotmappen

Då skapar vi layoutens grundläggande HTML-struktur med vänster och höger sektioner. Vi ska använda en wrapper div för att innehålla och centrera allt och våra vänster och höger behållare inuti, liksom en div på toppen och botten av omslaget för att hjälpa oss med de avrundade hörnen samtidigt som layoutet är flexibelt.

    ShutterPress       
   LEFFT MENU HÄR 
   RÄTT INNEHÅLL HÄR

Vi föredrar faktiskt att skapa HTML innan du skriver någon CSS, även om vissa personer gör en del av HTML och CSS samtidigt och sedan gå vidare till nästa avsnitt. Vi har funnit att hela HTML-filen först hjälper oss att tänka på CSS i förväg och allt annat som kan behövas, till exempel Javascript eller PHP. Allt jag lägger till vid denna punkt är min CSS Reset.

Steg 2 Vänster meny HTML

Så börjar vi med att koda vänstra menyn. Här behöver vi en h1-tagg och en länk till vår logotyp, och en oorderad lista för våra menyalternativ. Vi måste också näsa en annan oordnad lista på den tredje li-taggen i vår undermeny och göra detsamma med några dummy-objekt på den andra li-taggen så att vi kan se vår javascript-dragspel som fungerar senare.

Vi måste också lägga till några "öppna" och "slutna" klasser till länkarna och undermenyn så att vi kan styra ikonerna och vilken undermeny som öppnas som standard och den aktiva klassen markerar den sida vi tittar på.

 ShutterPress
  Hem
  Om studion  Artikel 1
 Punkt 2
 Punkt 3
 
  
  Bildgallerier  4X4 Galleri
 Porträtt Galleri
 Slider Gallery
 
  
 Kontakta

Nu strax efter kommer de sociala ikonerna och sökfältet i vår vänstra sektion längst ner. Så ska vi skapa en container div för bottensektionen och separera [divs] för var och en av de två delarna i den behållaren.

För de sociala ikonerna behöver vi en spänning för texten och en lista för ikonerna, var och en med en klass för att få rätt ikonavbildning och dess respektive svävare.

För avsnittet Sök skapar vi ett formulär och divs som innehåller motsvarande ingångar för att hjälpa till att flyta dem och lägga till bakgrunder och ikoner. Om du gör det här istället för att tillämpa stilar direkt på ingångarna fungerar det mycket bättre för att undvika problem med tvärbussning med rader och textinställningar.

   Social:  tumblr
 picasa
 vimeo
 flickr
 Twitter
 Facebook
 rss

Så här är hur det ser ut i vår webbläsare tillsammans med CSS Reset

Steg 3 Höger innehåll HTML

Nu när vi har slutfört vår vänstra meny kan vi börja koda den högra innehållsdelen för miniatyrgalleriet.

Så först skapar vi en orörd lista med bilder inuti länkar så att de är klickbara för vårt ljusbox-plugin, och därefter skapar vi en div för att innehålla våra tidigare och nästa knappar.

  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
   Föregående Nästa

Vid denna tidpunkt måste vi börja skiva miniatyrerna och spara dem med motsvarande namn från HTML så vi kan få några inlinebilder som visar.

Så här ska hela vår HTML se i Firefox

Steg 4 CSS Reset och Wrapper

Nu för vissa styling ställer vi upp några generella inställningar för teckensnitt, text och länkar färger och bakgrundsbild

 / * ------------------------------ * / / * GENERAL RESET * / / * -------- -------------------- * / html, kropp, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote pre-a-abbr-acronym-adress big cite kod del dfn em-typsnitt img ins kbd q s samp liten strejk stark sub sub sup tt, var, b, du, mitt, dl, dt, dd, ol, ul, li, fieldset, form, etikett, legend, bord, bildtext, tbody, tfoot, thead, tr, th, td, hr, marginal: 0; padding: 0; kant: 0; disposition: 0; font-size: 100%; vertikaljustering: baslinje; bakgrund: none;  ol, ul listestil: none; h1, h2, h3, h4, h5, h6, li linjehöjd: 100%; blockquote, q citat: none; q: före, q: efter content: "; bord border-collapse: collapse; border-spacing: 0; inmatning, textarea, välj font: 11px Arial, Helvetica, sans-serif; 0; inmatning: fokus, textarea: fokus kontur: none; form, fieldset gränsstil: none; html, body margin: 0; padding: 0; minhöjd: 100%; / * - --------------------------------*/ /* ALLMÄNNA INSTÄLLNINGAR */ /*-------- ----------------------- * / body height: 100%; font: 12px / 12px "Lucida Sans", "Lucida Grande", sans-serif ; färg: # 000; bakgrund: url ('? /images/bg.jpg') repeat #fff; a text-decoration: none; color: # 000; a: svävar text-decoration: none; color : # 0285da;

Sedan ställer vi in wrappestilarna så att vi kan bygga basen av vår layout, som vi börjar göra genom att definiera bredden på vår omslag och centrera den med en marginal: 0 auto;

För de övre och nedre delarna som vi definierade tidigare ställer vi upp bakgrundsbilder och de nödvändiga dimensionerna för att skapa våra övre och nedre rundade hörn och för omslaget ställer vi upp en bakgrundsbild upprepad i Y-axeln som täcker vårt innehåll som innehåller divisionslinjen mellan vänster och höger innehåll.

För wrapper-bottom div måste vi skapa en klar: båda; för att när jag flyter min höger och vänster behållare kommer inpakningen att kollapsa, så vi måste förhindra detta genom att rensa flottorna.

 / * -------------------------- * / / * WRAPPER * / / * ------------- ----------- * / # wrapper-top bakgrund: url ("? /images/content-top.jpg") ingen upprepa rullpunkts topp #FFFFFF; höjd: 18px; bredd: 994px;  #wrapper width: 994px; överflöde: gömd; marginal: 64px auto 0; bakgrund: url ("? /images/content-bg.jpg") Repeat-y-rullningscenter #FFFFFF;  # wrapper-bottom bakgrund: url ("? /images/content-bottom.jpg") ingen upprepa rullpunkts topp #FFFFFF; höjd: 61px; bredd: 994px; klara: båda;

Här är resultatet i vår webbläsare:

Steg 5 Vänster meny CSS

Nu när vi har vår omslag klar kan vi fortsätta med innehållet: Först ställer vi upp bredden på både höger och vänster behållare så att vi kan flyta dem till rätt position.

 / * -------------------------- * / / * VÄNSTER MENY * / / * ------------ ------------ * / / * Huvudmeny * / #left bredd: 235px; flyta till vänster;  / * ------------------------------ * / / * RÄTT INNEHÅLL * / / * ------- --------------------- * / / * Thumbnail Gallery Content * / #right width: 758px; float: right;

Nu börjar vi ställa in navigeringen genom att skapa en spritbild för logotypen, knapparna och ikonerna på designen.

Denna speciella layout verkar inte som att den kommer att växa i höjd, men vi vill ändå hålla böjliga saker bara om det finns ett framtida behov av att lägga till fler element i navigeringen.

Så vi sätter upp vänsterbehållaren med en minsta höjd så att den vänstra bottens div kan placeras helt utan att behöva använda en enorm marginal för att trycka ner den. På så sätt om nya element läggs till kommer layouten fortfarande att hålla sina ursprungliga dimensioner.

Vi ställer också upp länkarna i navigeringen som ska visas som block så hela området kan vara klickbart och inte bara texten och lägga till öppna och stänga bakgrunder med respektive klaser och justera vår sprite.

Undermenyn med en klass "stängd" är inställd för visning: ingen; så bara den vanliga visas.

 / * -------------------------- * / / * VÄNSTER MENY * / / * ------------ ------------ * / / * Huvudmeny * / #left bredd: 235px; flyta till vänster; minhöjd: 615px; position: relativ;  #left .logo a background: url ("? /images/sprite.png") no-repeat scroll 0 0 transparent; display: block; höjd: 32px; marginal: 8px auto 0; text-indent: -999999px; bredd: 190px;  #left .menu width: 100%; border-top: 1px solid #eaeaea; marginal-topp: 30px;  #left .menu li a display: block; höjd: 35px; linjehöjd: 35px; polstring-vänster: 22px; border-bottom: 1px solid #eaeaea;  #left .menu li a.active color: # 0285DA; gränsen-höger: 1px solid #fff;  #left .menu li.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 .sub-meny li a padding-left: 38px;  #left .menu .sub-menu.closed display: none;  # vänster-botten position: absolut; botten: 0; bredd: 100%;

För de nedre sociala ikonerna ställer vi upp bilderna med respektive klass och ställer in bakgrundsbilderna med hjälp av stationer, det går också bra för svängningsstatusen.

 / * Social * / # left-bottom .social översvämning: dold; höjd: 34px; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; padding-vänster: 25px;  # vänster-botten. socialt span float: left; linjehöjd: 34px;  # left-bottom. social ul float: left; marginal: 9px 0 0 10px;  # vänster-botten .social ul li float: left; höjd: 34px;  # left-bottom .social ul li a background: url ("? /images/sprite.png") no-repeat-scroll -5px -50px transparent; display: block; höjd: 16px; bredd: 16px; marginal: 0 5px 0 0; textindelning: -999999px;  # left-bottom .social ul li a: sväva bakgrundsposition: -5px -80px;  # left-bottom .social ul li a.picasa bakgrundsposition: -26px -50px;  # vänster-botten .social ul li a.picasa: svep bakgrundsställning: -26px -80px;  # left-bottom .social ul li a.vimeo bakgrundsposition: -47px -50px;  # left-bottom .social ul li a.vimeo: sväva bakgrundsställning: -47px -80px;

Och för sökdelen är vi i grunden flytande inmatningsbehållarens divs och inställer sylesna till dem snarare än till ingången.

 / * Sök * / # vänster-botten .sök översvämning: dold; marginal-topp: 12px;  # left-bottom .search .left background: url ("? /images/sprite.png") no-repeat-scroll-5px -203px transparent; flyta till vänster; höjd: 27px; margin-left: 20px; vaddering: 6px 0 0 10px; bredd: 158px;  # left-bottom .search .left input border: none; bakgrund: transparent; bredd: 100%;  # left-bottom .search. right background: url ("? /images/sprite.png") no-repeat-scroll -173px -203px transparent; flyta till vänster; höjd: 27px;  # left-bottom .search. right input background: none repeat scroll 0 0 transparent; gräns: medium ingen; markören: pointer; höjd: 27px; bredd: 27px;

Så här är vad vi har just nu i Firefox

Steg 6 Rätt innehåll CSS

Här flyter vi bara listobjekten för att få en rutnätvisning, vi lägger till vaddering, bakgrundsfärg och gränser för att få en ram för varje knäppning och även lägga till marginaler för separation.

Till sist. vi har våra knappar med en container div som är centrerad och båda länkarna är flytande.

 / * ------------------------------ * / / * RÄTT INNEHÅLL * / / * -------- -------------------- * / / * Thumbnail Gallery Content * / #right width: 758px; float: right;  #right.thumbnails overflow: hidden; vaddering: 10px 0 0 32px;  #right.thumbnails li float: left; marginal: 0 21px 18px 0;  #right.thumbnails li a border: 1px solid #eaeaea; vaddering: 2px; bakgrund: # f2f2f2; display: block;  #right .navigation margin: -10px auto 0; överflöde: gömd; bredd: 50px;  #right .navigation a background: url ("? /images/sprite.png") no-repeat scroll 0 0 transparent; display: block; flyta till vänster; höjd: 21px; text-indent: -999999px; bredd: 21px;  #right .navigation .prev bakgrundsposition: -159px -75px; marginal: 0 8px 0 0;  #right .navigation .next bakgrundsposition: -186px -75px;

Heres vår första sida färdig i firefox!

Steg 7 andra sidan HTML

Fortsätt till vår undersida, vad vi gör är duplicera vårt index.html och namnge det något som subpage.html eller inner.html, så tar vi ut allt innehåll i vår #right-behållare och börjar bygga den html som behövs för vårt bildspel och de 3 modulerna nedan.

Vi behöver en div för att hålla hela markeringen för mitt bildspel, en lista med bilder som kommer att bli bilderna och vi använder också 3 olika versioner av bilderna så att vi kan se lite åtgärd senare med jQuery Cycle plugin.

Vi ställer också in en blank div som kommer att vara helt placerad ovanpå bilderna för att fungera som en ram om denna layout någonsin behöver implementeras i ett CMS för att få lite dynamiskt innehåll. Om det händer kan vi bara lägga till en bild utan att behöva photoshop de rundade hörnen och skuggorna före handen.

Och äntligen för bildspelet behöver vi skapa en navigations div med ett par länkar för vår "tidigare" och "nästa" gallerihantering.

   
 
 
 
  
  Föregående Nästa

Vårt sista block av innehåll har våra 3 moduler i sin egen behållare, varje modul är en div på egen hand som jag kommer att flyta så de är bredvid varandra. Insidan har jag och h2 taggar för titeln och en stycke för texten.

   Modul En
 Sed korem sitta feugiat erat vid ante vestibulum auktor. Cras rhoncus diam et som gravida sagittis. Ut tempor sapien i neque ultrices varius. Skriv ut texten.
 
  Modul två
 Pellentesque lacinia, ögue vel venenatis commodo, ante neque tempor augue, sempre rhoncus diam justo in ante. Alquam i ultrices eleifend libero, i sin amen consectetur velit quis.
 
  Modul Tre
 Suspendisse porta som vel en molestie suscipit element leo porta. Cras lorem lectus, viverra är en avgörande fråga för dig själv.

Steg 8 Second Page CSS

I denna speciella design var det lätt att få ramarna för bilderna, så här är vad vi gjorde:

Vi tog skiktet "Form 90" och släppte fyllningen till 0%. Högerklickade sedan på skiktet "1720729_high", vald utklippsmask och dolde sedan lagret.

Gick tillbaka till lagret "Form 90" och ställ in opaciteten till 50%. Högerklickade lagret och gjorde en dubblett, valda båda "Shape 90" -lagren och slog dem samman.

Nu kan du spara ramen som en separat transparent .png och lägg bara till en vit bakgrund i hörnen så att den täcker bilderna på baksidan.

Vi satte dimensionerna för modulerna och flyttade dem för att få dem inline; efter det har vi satt upp stilar tillsammans med sprite som bakgrundsbild för ikonerna.

Vi ställer in listobjekten från reglaget för att ha en position: absolut; i förhållande till ul så att de kommer att kollapsa och se ut som bara en bild så att vi kan få det verkliga utseendet på layouten, lägger vi till funktionaliteten när allt är klart.

De föregående och nästa knapparna är också placerade absolut så att vi kan få dem centrerad vertikalt.

 / * Bildspel Galleri Innehåll * / # gallery-holder position: relative; bredd: 719px; marginal: 20px auto 0; höjd: 442px;  # gallerihållare .slideshow-frame background: url ("? /images/slideshow-frame.png") no-repeat scroll 0 0 transparent; höjd: 442px; position: absolute; top: 0; vänster: 0; bredd: 719px; z-index: 10;  # gallery-holder .slideshow li height: 442px; position: absolute; top: 0; bredd: 719px # gallerihållare .navigation a height: 92px; vänster: 0; margin-top: -44px; position: absolute; top: 50%; bredd: 47px; z-index: 15;  # gallerihållare .navigation a.prev bakgrundsposition: -6px -103px; margin-top: -44px;  # gallerihållare .navigation a.next bakgrundsposition: -65px -103px; vänster: auto; höger: 0;  # moduler-hållare överfyllning: dold; marginal-topp: 24px; marginal-vänster: 20px;  # moduler-hållare. modul float: left; bredd: 204px; marginal-höger: 40px;  # moduler-hållare .module h2 font-size: 18px; font-weight: normal; margin-bottom: 5px; padding-vänster: 25px;  # moduler-hållare .module h2.module-one background: url ("? /images/sprite.png") no-repeat-scroll -128px -170px transparent;  # moduler-hållare .module h2.module-two background: url ("? /images/sprite.png") no-repeat-scroll -128px -140px transparent;  # moduler-hållare .module h2.module-three background: url ("? /images/sprite.png") no-repeat-scroll -128px -110px transparent;  # moduler-hållare. modul p färg: # 6a6a6a; linjehöjd: 15px;

Efter allt detta kan vi se att modulrubrikerna har en Museo-typsnitt på dem som inte är ett webbsäkert teckensnitt, så vi måste ställa in det här med @ font-face. Så vi körde teckensnittet via Font Equirrel (http://www.fontsquirrel.com/fontface/generator) och lade teckensnittet i sin egen typsnitt mapp i roden av vårt projekt och ställa in CSS i våra allmänna inställningar med höger vägar för teckensnitt.

 /*---------------------------------*/ /* ALLMÄNNA INSTÄLLNINGAR */ /*----- -------------------------- * / kropp höjd: 100%; typsnitt: 12px / 12px "Lucida Sans", "Lucida Grande", sans-serif; färg: # 000; bakgrund: url ('? /images/bg.jpg') repeat #fff;  en text-decoration: none; färg: # 000; a: svävar text-decoration: none; färg: # 0285da; @ font-face font-family: 'Museo700'; src: url ('? /fonts/museo700-regular-webfont.eot'); src: url ('? /fonts/museo700-regular-webfont.eot?#iefix') format ('embedded-opentype'), url ('? /fonts/museo700-regular-webfont.woff') format '), url ('? /fonts/museo700-regular-webfont.ttf ') format ("truetype"), url ('? /fonts/museo700-regular-webfont.svg#Museo700 ') format (' svg ') ; typsnitt: normal; typsnittstyp: normal;

Så allt vi behöver göra nu är stilsortsfamiljen till våra h2-taggar, och nu är vår andra sida klar.

 # moduler-hållare .module h2 font-family: 'Museo700'; font-size: 18px; font-weight: normal; margin-bottom: 5px; padding-vänster: 25px;

Steg 9 jQuery Magic

För att lägga till lite funktionalitet och animering till vårt projekt ska vi använda två plugins: jQuery Cycle för vårt bildspel (http://jquery.malsup.com/cycle/) och prettyPhoto för vårt ljusbox galleri (http: // www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/) och då skapar vi en anpassad funktion för vår meny dragspel.

Se till att du laddar ner pluginet prettyPhoto och kopierar nödvändiga tillgångar till respektive mappar (javascript i mappen "js", stylesheets till "css" -mappen etc.), cykelpluggen kan kopplas från Github och jQuery kan länkas från Google API: er.

Vi skapar också en main.js-fil i vår JS-mapp där vi kan ställa in vår anpassade funktion och plugin-konfiguration.

Så hänvisar vi till vårt stylesheet i rubriken i html-filerna

    ShutterPress

Vi hänvisar också till våra javascript-filer längst ner i vårt dokument strax före den slutgiltiga HTML-taggen.

Nu går vi tillbaka till vår miniatyrlista och sätter upp länkarna med rel attributet för vårt ljusbox galleri att fungera. Vi har också länkarna som pekar på en platshållare 500x500 bild så att vi kan visa något på vår lightbox

Och slutligen går vi över till vår main.js-fil och börjar konfigurera våra plugins. Se till att du läser plugins dokumentation så att du kan ta reda på exakt hur de fungerar och vilka alternativ du behöver anpassa dem.

För vårt dragspel behöver vi skapa en klickfunktion som kontrollerar om länken har en klass av "öppnad" eller "sluten". Om den är "stängd" öppnar den respektive undermenyn och kollapsar alla andra och ändrar klassen av länkarna så att rätt ikon visas. Om den som klickas har en klass av "öppen", stängs den bara och ändrar ikonen.

 $ (dokument) .ready (funktion () // prettyPhoto LIGHTBOX $ ("a [rel ^ = 'prettyPhoto']"). prettyPhoto (); // MENU ACCORDION $ ('# vänster .menu li a'). klick (funktion () if ($ (detta) .hasClass ('stängt')) $ (detta) .toggleClass ('öppnat stängt'); $ (detta) .parent () .sub-meny '). slideUp (); $ (this) .parent (). syskon (). hitta (' a.opened '). toggleClass (' öppnat stängt '); $ (detta) .next (). slideDown (); return false; annars om ($ (detta) .hasClass ('öppnat')) $ (this) .toggleClass ('öppnat stängt'); $ (detta) .next (). slideUp (); returnera false;) // SLIDERGALLERY $ ('bildspel') .cykel (fx: 'blekna', nästa: '# gallery-holder .navigation a.next', föregående: '# gallery-holder .navigation a.prev '););

Slut på dag 3: granskning

Och nu har vi ett 100% färdigt Projekt med arbetsgallerier och undermeny animeringar. Njut av!

På den sista dagen i vår tutorial-serie kommer vi att gå igenom hur du skapar egna anpassade variationer av denna mall med bara några få snabba ändringar. Från mörka, grungiga stilar till moderna metalliska effekter, vill du inte missa sista dagen!

åh! Och vi nämnde det här på den första dagen i handledningen, men om du är intresserad av att ha en WordPress-version av denna mall tillgänglig på ThemeForest, låt mig veta i kommentarfältet!

Kodningskrediter

Kodningen och handledningen för denna fas i serien var alla tillhandahållna av CodeMyConcept, som erbjuder ett brett utbud av kodningstjänster för designers - från PSD> HTML-konverteringar till e-mails och WordPress-temakonvertering. Kolla in deras webbplats på CodeMyConcept.com!

Webbdesign