Accentsconagua

Bouw een slanke portfoliosite van Scratch

Code
Share

Er gaat niets boven het bouwen van een hele site om u een goed overzicht te geven van hoe een CSS-lay-out zou moeten werken. Bij PSDTUTS hebben we een tutorial waarin je een gestroomlijnd, high-end webontwerp ontwerpt. In deze tutorial nemen we dat PSD-bestand en bouwen het met een aantal mooie schone HTML en CSS.

Demo en broncode


Stap 1

Dus hier is het ontwerp dat we gaan bouwen. Zoals vermeld kun je de tutorial op PSDTUTS volgen om dit ontwerp helemaal opnieuw te maken. In deze zelfstudie gaan we deze homepage alleen bouwen, maar als basis zou je binnenpagina's volgens dezelfde lay-out kunnen bouwen.

Stap 2

Het eerste wat u moet doen, is bepalen hoe we onze build gaan structureren. Dit proces wordt met de tijd eenvoudiger naarmate u meer leert hoe CSS-lay-outs kunnen werken. Voor dit ontwerp denk ik dat we weg kunnen komen met een zeer eenvoudige build die vrij veel absolute positionering en een grote achtergrondafbeelding gebruikt.

Wat is Absolute positionering?
Wanneer u een HTML-element op een pagina plaatst (bijvoorbeeld een

,

en zo verder) heeft het een natuurlijke positie die bepaald wordt door wat eraan vooraf ging. Dus als je bijvoorbeeld eentje neerlegt met wat tekst erin, en dan plaats je er nog eentje, dan verschijnt deze natuurlijk net onder de eerste

. Het zal gewoon verder stromen ten opzichte van het laatste element.

Absolute positionering is anders, omdat u een exacte plaatsing voor een object opgeeft en deze uit de normale stroom elementen haalt. Dus als je je eerste had net zoals voorheen, maar voor je volgende gaf je het een absolute positie van links: 500px; top: 500px; Dan lijkt het precies op die locatie, ongeacht de vorige

.

Je stelt de absolute positie in van zoiets als dit:

 .className positie: absoluut; top: 0px; left: 0px;

Nadelen aan Absolute Positionering
Het grootste probleem bij het gebruik van absolute positionering is dat uw elementen niet echt op elkaar lijken. Dus als u bijvoorbeeld een tekstblok bovenaan uw pagina heeft en een ander tekstblok iets verder naar beneden, kan het er geweldig uitzien wanneer elk tekstblok kort is. Maar als het bovenste blok een groot essay bevat, dan zal het in plaats van het volgende blok tekst naar beneden duwen, gewoon over de top gaan. Dit komt omdat je de elementen uit de natuurlijke stroom van de pagina haalt.

Absolute positionering is dus alleen echt handig voor objecten waarvan je weet dat ze altijd een bepaalde grootte hebben en die niet echt hoeven te communiceren met andere elementen.

Waarom het vandaag nuttig voor ons is
Het goede aan Absolute Positionering is dat het echt heel gemakkelijk is! U vertelt de browser waar iets moet worden geplaatst en dat is waar het verschijnt! Als klap op de vuurpijl zijn er veel minder problemen met browsercompatibiliteit als je de dingen absoluut plaatst. Immers 100px is 100px, of u zich nu in Firefox, Internet Explorer of Safari bevindt.

ZIE onze lay-out
Dus de manier waarop we onze website gaan maken is:

  • Heb een grote achtergrondafbeelding
  • Plaats het logo, de menu's en het deelvenster absoluut precies op de plek waar ze moeten verschijnen
  • Laat al onze inhoud verschijnen in een standaard
    tag, maar geef het zoveel padding-top dat de inhoud helemaal naar beneden wordt gedrukt tot waar het hoort te zijn
  • Laat ons voetje eronder zitten

Als dat nog niet heel veel zin heeft, maak je geen zorgen, het zal zoals je ziet de site vorm krijgen!

Stap 3

Wat betreft achtergrondafbeeldingen hebben we er twee nodig. De ene wordt gigantisch, en in feite nadat ik het als een JPG bewaard heb, is het ongeveer 56 kb groot. Er was een tijd dat dat iets te groot was geweest, maar tegenwoordig is het geen probleem.

Dus dat is het hoofdgebied, dan hebben we een tweede achtergrondafbeelding nodig die een dun plakje zal zijn. Deze slice herhaalt zich telkens opnieuw naar rechts, zodat wanneer het browservenster wordt opengetrokken, het uitsteekt.

(Let op het logo zou niet hieronder moeten worden weergegeven in de achtergrondafbeelding, dat was gewoon een slechte screenshot, sorry!)

Je kunt de twee afbeeldingen zien die ik hier en hier heb gemaakt.

Stap 4

OK dus laten we nu onze HTML starten. Eerst leggen we wat basisprincipes op:

    PSD versus NET    
 
  
 
 
   Gemaakt voor een PSDTUTS- en NETTUTS-zelfstudie door Collis! Zie de Photoshop-zelfstudie, zie de Webhandleiding

Zoals altijd is het het beste om van buiten naar binnen te werken met onze lay-out. Dus wat ik hier heb gedaan is plaats drie

'S. De eerste twee zijn de outside_container / houder en de andere is de footer. Dit vereist een beetje uitleg:

  1. Ik heb de outside_container en houder omdat ik een dubbele achtergrondafbeelding nodig heb. Dat wil zeggen dat ik een tegel-achtergrondafbeelding nodig heb en dan heb ik die grote achtergrondafbeelding nodig. Dus in de outside_container Ik plaats de tegelachtergrond en vervolgens op de houder
    die bovenop de buitencontainer zal verschijnen, ik zal die grote hoofdachtergrond hebben.
  2. De voettekst moet zich buiten de containers bevinden, omdat als het browservenster in de lengte wordt uitgerekt, de voettekst moet aan en uit gaan. Omdat het een eigen achtergrond heeft, kan het niet in de containers staan ​​- als het ware en je uitgerekt zou je op een gegeven moment de achtergrond van de container zien en niet de footer!

Je zult ook zien dat ik wat inhoud in het voetgedeelte heb toegevoegd, dat is alleen het mini-logo en de tekst. Ik heb de tekst ingepakt in a tag zodat ik het kan manipuleren. Er is geen reden om het te geven een ID of een klasse taggen, omdat we #footer img gewoon kunnen zeggen en omdat dit de enige afbeelding is die er is, kunnen we het zo noemen. Dit houdt onze HTML een beetje eenvoudiger.

Stap 5

Nu de CSS voor onze code tot nu toe:

 body margin: 0px; padding: 0px; background-color: # 11090a; font-family: Arial, Helvetica, sans-serif;  #outside_container background: url (images / background_slice.jpg) repeat-x # 000000;  #container background: url (images / background_main.jpg) niet herhalen; min-height: 800 pixels;  #footer border-top: 1px solid # 3f2324; opvulling: 30px 50px 80px 50px;

Dus een voor een doorlopen:

  1. Eerst herdefiniëren we de lichaam label. Dit is bijna altijd het eerste wat ik doe. We verwijderen elke standaardmarge en opvulling, stellen een achtergrondkleur en een lettertypefamilie voor de pagina in. Merk op dat de achtergrondkleur in feite de footer achtergrond kleur. Zoals ik eerder al zei, is dit zo dat als je het browservenster verticaal uitrekt, je steeds voettekst ziet.
  2. Vervolgens hebben we de outside_container label. Ik heb het die segmentachtergrond gegeven, deze gaat alleen langs de x-as herhalen (d.w.z. van links naar rechts) en waar er geen achtergrondafbeelding is, zien we recht zwart (# 000000). Dus eigenlijk als de pagina langer wordt, zullen de tegels niet doorgaan omdat we zeiden dat we alleen links-rechts moesten herhalen, in plaats daarvan kregen we de zwarte achtergrond. Dit is perfect omdat ons tegelbeeld vervaagt naar zwart!
  3. Vervolgens hebben we de houder. Hier hebben we de gigantische achtergrondafbeelding ingesteld om niet te herhalen - dus het verschijnt maar één keer. Merk op dat we geen achtergrondkleur hebben gespecificeerd, als we hadden zou het onze outside_container afgedekt hebben. Dat komt omdat dit
    tag bevindt zich in de vorige en wordt automatisch uitgerekt om volledig te worden gevuld. Dus onze achtergrondafbeelding verschijnt bovenaan en dan buiten dat gebied kun je de outside_container achtergrond zien verschijnen.
  4. Ik heb de container ook een minimale hoogte gegeven, dit is alleen zo dat wanneer we naar de HTML-pagina op dit punt kijken, je ongeveer kunt zien hoe het eruit zal zien als er inhoud is. Later zal onze inhoud hoe dan ook de minimumhoogte produceren.
  5. De voettekst is in feite slechts een enkele regelrand en wat opvulling. Het is niet nodig om het een achtergrondkleur te geven, omdat we dat in de eerder. Onthoud met de opvullende definities dat het zo gaat: opvulling: rechtsboven onder links (met de klok mee!)

Hier zijn we tot nu toe ...

Bekijk de site tot nu toe

Stap 6

Vervolgens maken we dat voettekstje af door een paar extra stijlen toe te voegen, zoals deze:

 / * Voettekst * / #footer border-top: 1px solid # 3f2324; opvulling: 30px 50px 80px 50px; color: # 674f5d; font-size: 9px; line-height: 14 pixels;  #footer img float: links; margin-right: 10px;  #footer span display: block; float: left; Breedte: 250 pixels;  #footer a color: # 9e8292; text-decoration: none;  #footer a: hover color: #ffffff;

Dus hier heb ik een paar stukjes aan onze #footer-klasse toegevoegd en nog een paar klassen gemaakt. Laten we er één voor één doorheen gaan:

  1. Allereerst zijn de bits tussen / * en * / CSS-opmerkingen. Het is fijn om opmerkingen in uw CSS-bestand te hebben, omdat deze het echt opdelen en de dingen begrijpelijk houden. Eigenlijk op grotere projecten vind ik dat CSS-bestanden behoorlijk uit de hand kunnen lopen als je niet voorzichtig bent. Dus het is echt goed om vroeg in goede gewoonten proberen te komen: noem je selectors goed, voeg opmerkingen toe, hou dingen bij elkaar, speel in op meerdere CSS-bestanden voor grotere projecten, enzovoort.
  2. In #footer Ik heb een lettertypekleur, lettergrootte en regelhoogte toegevoegd aan onze vorige definitie. Lijnhoogte is een erg handig tekstattribuut omdat het je ruimte helpt wegruimen. Zonder goede tekst op regelhoogte kan de bundel omhoog en moeilijker leesbaar zijn. Te veel lijnhoogte en de tekst is zo gespreid dat het er raar uitziet. U wilt dus misschien experimenteren om de juiste hoogte te vinden voor verschillende lettertypen en formaten. Hier leek 14px een goede match.
  3. Vervolgens heb ik de #footer img en #footeroverspanning om beide te zweven: links. Omdat ze allebei naar links zweven, eindigen ze in kolommen naast elkaar. Ik zal later in deze tutorial meer over zweven en kolommen praten.
  4. Eindelijk vertellen we de browser wat hij moet doen tags (dat wil zeggen links) die in het voettekst verschijnen. Namelijk dat ze niet onderstreept moeten worden en van kleur moeten veranderen als je er met een muis overheen zweeft.

Dus met de toevoeging van de voettekst hier is waar tot:

Bekijk de site tot nu toe

Stap 7

Laten we nu, met het voettekst uit de weg, nog wat meer inhoud toevoegen aan de pagina binnen de hoofdcontainergebieden. Eerst hebben we twee nieuwe afbeeldingen nodig die we van ons PSD-bestand maken:


Merk op dat ik een afbeelding heb gebruikt voor het grote tekstblok. Over het algemeen is het het beste om tekst voor deze dingen te gebruiken, omdat het de pagina veel meer doorzoekbaar maakt en het een goede gewoonte is. Maar het zou veel moeilijker geweest zijn om te doen, omdat we een beetje Flash en SIFr nodig zouden hebben om dat effect te bereiken. Dus omdat dit een redelijk eenvoudige tutorial is, heb ik ervoor gekozen om gewoon een grote afbeelding te gebruiken :-)

Hier is een fragment van onze HTML-code - alleen de bit van de containers:

 
 
  
     
  • retoucheren
    •  
  • Digitale effecten
    •  
  • Webwerk
    •  
 
     
  • Wat betreft
    •  
  • Contact
    •

Dus binnen het containergebied hebben we vijf dingen toegevoegd:

  1. Ons logo: Het is gekoppeld, dus klikken erop zou je naar de startpagina moeten brengen en dat heeft
  2. Hoofdmenu: Dit is gewoon een ongeordende lijst met
  3. Het rechter menu: Dit is hetzelfde als het andere menu, alleen anders
  4. Grote afbeelding van een tekstpaneel: Dit is onze hoofdkoptekst die is opgeslagen als een afbeelding,
  5. Content Div: En dit is waar we onze pagina-inhoud later zullen plaatsen. Ik heb het nu leeg gelaten, behalve een HTML-opmerking.

Dus voordat we het gaan opmaken, is het de moeite waard om eens te kijken hoe de pagina eruitziet met alles wat op deze manier is gedumpt:

Zoals je kunt zien, zullen we serieus moeten schakelen om alles op zijn plaats te krijgen. Zoals je je zult herinneren, gebruiken we Absolute Positioning om dit snel en gemakkelijk te doen.

Stap 8

Dit is de CSS die we toevoegen om onze elementen op hun plaats te laten passen:

 #container background: url (images / background_main.jpg) niet herhalen; min-height: 800 pixels; width: 1000 px; position: relative;  / * Logo / Menu / Paneelpositie * / #logo positie: absoluut; top: 58px; left: 51px;  #panel positie: absoluut; top: 165px; left: 51px;  ul # menu margin: 0px; padding: 0px; positie: absoluut; top: 145px; left: 75px;  ul # right_menu margin: 0px; padding: 0px; positie: absoluut; top: 145px; rechts: 75px;

Laten we dus opnieuw stuk voor stuk elk stukje doorlopen:

  1. Eerst en vooral zie je een oud stukje van onze code - de houder. Ik heb dit getoond, omdat ik er nu nog twee regels aan heb toegevoegd. Het heeft nu een Breedte: 1000 pixels en position: relative. Dit is belangrijk omdat wanneer u de positie als relatief instelt, alles wat absoluut in de binnenkant is geplaatst, zo wordt gedaan familielid naar die containertag. Dus dit betekent dat ik dingen in deze doos kan positioneren, gebruikmakend van het feit dat ik weet dat het 1000 px breed is. Dat gebruik ik namelijk voor het right_menu.
  2. Vervolgens, omdat dit een nieuwe set CSS is, heb ik het doorgesneden met een opmerking
  3. Met de logo en paneel Ik heb beide een absolute positie op de pagina gegeven. Hoe weet ik welke nummers ik moet gebruiken? Simpel teruggaan naar het originele Photoshop-document en meten waar ze zijn bedoeld! Je kunt zien dat het een heel eenvoudige klassedefinitie is, daarom is absolute positionering zo eenvoudig.
  4. Volgende met de twee menu's, deze zijn ook absoluut gepositioneerd, maar hier heb ik ze ook gegeven margin: 0px; padding: 0px; definities om ervoor te zorgen dat we alle standaard marges en opvulling die niet-geordende lijsten hebben, verwijderen.
  5. Volgende merk op dat op de right_menu wanneer ik de absolute positie heb gespecificeerd rechts: 75px. Dit betekent dat het 75 px verwijderd is van de rechterkant van de container. Normaal gesproken zou dat het browservenster zijn, maar omdat ik het eerder heb onthouden heb ik de houder hebben position: relative dat betekent dat het 75px verwijderd is van de rechterkant van
    .

    Nu denk je misschien wel, nou, wat is het punt, kan ik dingen gewoon niet gebruiken met links enkel en alleen? Nou, dat kan, maar met ons menu, als je extra menu-items zou toevoegen, zou je het steeds opnieuw moeten verplaatsen, zodat het nog steeds 75px verwijderd is van de rechterkant. Overwegende dat door het gebruik van rechts de extra menu-items lopen naar links wanneer je ze toevoegt. Probeer het en zie!

Dus hier is waar we zijn:

Stap 9

Zoals u in de vorige afbeelding kunt zien, zien het logo en het titelelement er nu uit alsof ze zich op de juiste positie bevinden. Maar de menu's zien er nogal raar uit. Voordat we die stijlen stijlen, een kort woordje op het logo / beeldpaneel. Je vraagt ​​je misschien af ​​of ze beide afbeeldingen zijn, waarom maak je ze dan geen deel uit van de achtergrondafbeelding?

Het antwoord is dat het logo dat we willen koppelen koppelbaar zijn, zodat als u erop klikt u teruggaat naar de startpagina (waardoor de site beter bruikbaar wordt) en het hoofdtekstvenster, dat waarschijnlijk van pagina tot pagina zal veranderen. Dus door er een enkele afbeelding van te maken, kunnen we veel HTML-pagina's gebruiken met dezelfde CSS-stylesheet, maar gewoon een andere afbeelding plaatsen met verschillende tekst.

Laten we nu de twee menu's opmaken en onze pagina echt vorm beginnen te geven. Om dat te doen hebben we de volgende CSS nodig:

 ul # menu margin: 0px; padding: 0px; positie: absoluut; top: 138px; left: 75px;  ul # right_menu margin: 0px; padding: 0px; positie: absoluut; top: 138px; rechts: 110px;  ul # menu li, ul # right_menu li margin: 0px; padding: 0px; list-style: none; margin-right: 10px; font-size: 9px; text-transform: in hoofdletters; weergave: inline;  ul # menu li a, ul # right_menu li a text-decoration: none; color: # bd92b2;  ul # menu li a: hover, ul # right_menu li a: hover text-decoration: none; color: #ffffff;

De eerste twee delen van deze code zijn hetzelfde als voorheen (hoewel ik de posities iets heb aangepast zodat ze er meteen na de styling uitzagen). Merk op dat deze twee definities gescheiden zijn omdat ze verschillende posities hebben, maar daarna hebben we de twee definities gecombineerd in dezelfde klassendefinities als de menu-items zelf er hetzelfde uitzien. Het formaat voor het samen definiëren van twee klassen is:

.myClass, .myClass2 ...

Dit is heel anders dan deze definitie:

.myClass .myClass2 ...

Omdat de tweede definitie zegt, alle elementen met binnen een element met.

Hoe dan ook, terug naar onze stijlen, laten we enkele belangrijke punten doornemen:

  1. We hebben de

En daarmee ziet onze pagina er nu best goed uit!

Bekijk de site tot nu toe

Stap 10

Vervolgens is het tijd om wat inhoud toe te voegen! Laten we eerst wat dummy tekst toevoegen, die zo is opgezet dat we kolommen kunnen maken. Dit is de HTML:

 
 
  
     
  • retoucheren
    •  
  • Digitale effecten
    •  
  • Webwerk
    •  
 
     
  • Wat betreft
    •  
  • Contact
    •  
  
 
 
een strak ontwerp
 
Dummy-tekst: dit ontwerp is gemaakt voor een zelfstudie over photoshop en webontwikkeling. Je kunt het eerste deel bekijken op PSDTUTS.com, waar je leert hoe je een mooi, maar eenvoudig ontwerp maakt met een abstracte achtergrond en type.
 
Het tweede deel van de tutorial is beschikbaar via NETTUTS.com, waar we een snelle build van de PSD doen naar een levensvatbare, werkende HTML / CSS-site.
 
Dit ontwerp is gemaakt voor een zelfstudie over photoshop en webontwikkeling. Je kunt het eerste deel bekijken op PSDTUTS.com, waar je leert hoe je een mooi, maar eenvoudig ontwerp maakt met een abstracte achtergrond en type.
 
Het tweede deel van de tutorial is beschikbaar via NETTUTS.com, waar we een snelle build van de PSD doen naar een levensvatbare, werkende HTML / CSS-site.
 
 
 
tutorials
 
Dummy-tekst: dit ontwerp is gemaakt voor een zelfstudie over photoshop en webontwikkeling. Je kunt het eerste deel bekijken op PSDTUTS.com, waar je leert hoe je een mooi, maar eenvoudig ontwerp maakt met een abstracte achtergrond en type.
 
Het tweede deel van de tutorial is beschikbaar via NETTUTS.com, waar we een snelle build van de PSD doen naar een levensvatbare, werkende HTML / CSS-site.
 
Dit ontwerp is gemaakt voor een zelfstudie over photoshop en webontwikkeling. Je kunt het eerste deel bekijken op PSDTUTS.com, waar je leert hoe je een mooi, maar eenvoudig ontwerp maakt met een abstracte achtergrond en type.
 
Het tweede deel van de tutorial is beschikbaar via NETTUTS.com, waar we een snelle build van de PSD doen naar een levensvatbare, werkende HTML / CSS-site.
 
 
 
recent werk
 
Dummy-tekst: dit ontwerp is gemaakt voor een zelfstudie over photoshop en webontwikkeling. Je kunt het eerste deel bekijken op PSDTUTS.com, waar je leert hoe je een mooi, maar eenvoudig ontwerp maakt met een abstracte achtergrond en type.
 
Het tweede deel van de tutorial is beschikbaar via NETTUTS.com, waar we een snelle build van de PSD doen naar een levensvatbare, werkende HTML / CSS-site.
 
Dit ontwerp is gemaakt voor een zelfstudie over photoshop en webontwikkeling. Je kunt het eerste deel bekijken op PSDTUTS.com, waar je leert hoe je een mooi, maar eenvoudig ontwerp maakt met een abstracte achtergrond en type.
 
Het tweede deel van de tutorial is beschikbaar via NETTUTS.com, waar we een snelle build van de PSD doen naar een levensvatbare, werkende HTML / CSS-site.

OK dus in dit fragment kun je zien dat ik er 3 heb toegevoegd

is binnen het inhoudsgebied. Elk heeft een

titelelement en ze wat tekst. Ze hebben klassenamen kolom 1, kolom 2 en kolom3. De reden dat ik alle extra tekst heb toegevoegd is om u iets te laten zien over het maken van kolommen.

Laten we eerst een paar CSS toevoegen om ze als kolommen te laten lijken:

 / * Inhoud * / #content padding-top: 435px; padding-left: 85px; width: 815px; color: # 674f5d; font-size: 13px; line-height: 20px;  .column1 float: left; width: 230px; margin-right: 30px;  .column2 float: left; width: 230px; margin-right: 30px;  .column3 float: left; width: 270px;

Zoals gebruikelijk heb ik ons ​​nieuwe stukje CSS doorgesneden met een opmerking. Dan heb ik een aantal stijlen ingesteld #inhoud. Merk op hoeveel padding er is ... 435px! Dit is om ruimte te maken voor al die absoluut gepositioneerde elementen eerder. In tegenstelling tot deze elementen bevindt dit inhoudsgebied zich in de normale stroom van de pagina.

Het moet in de normale flow zitten, want als je er meer content aan toevoegt, zou het de footer naar beneden moeten duwen. Als dit absoluut was gepositioneerd, zou het gewoon over de bovenkant van het voettekst gaan.

Nu, de drie kolomklassen, merk op dat ze elk zijn ingesteld met een breedte en met float: left. Dit vertelt hen dat ze naar links van de pagina moeten zweven, uitgelijnd naast andere zwevende elementen links. Ik heb de eerste twee een goede marge gegeven, zodat ze niet aan elkaar vastzitten.

Drijven van een element zorgt ervoor dat het naar links of rechts zweeft en vertelt alles om er omheen te wikkelen. Wanneer de andere elementen ook drijven, vormen ze kolommen. Over het algemeen gebruikt elke keer dat u een kolomlay-out ziet, drijfniveaus.

Helaas is er een raar probleem met drijvers. Namelijk dat ze een probleem hebben met hun containers. In plaats van de volgende elementen naar beneden te duwen, dobberen ze alleen maar over de top. De manier om dit probleem op te lossen is om een ​​element te hebben dat na hen komt en dat de eigenschap heeft beiden opschonen.

De eigenschap Clear zegt om te stoppen met het inpakken van spullen rond het zweven

'S. Het is een beetje moeilijk uit te leggen, dus laten we eens kijken naar wat er gebeurt met en zonder het opruimen.

Zonder Clearing
Hier ziet u hoe de lay-out eruit ziet als:

Zie hoe de kolommen over de bovenkant van het voettekstje zijn gedreven en de voettekst zelf is begonnen om zich heen te wikkelen. Dat klopt niet!!

Met Clearing
De oplossing is redelijk eenvoudig, we moeten een toevoegen

na de drie kolommen zoals deze:

 
 
 
een strak ontwerp
 
Dit ontwerp is gemaakt voor een zelfstudie over photoshop en webontwikkeling. Je kunt het eerste deel bekijken op PSDTUTS.com, waar je leert hoe je een mooi, maar eenvoudig ontwerp maakt met een abstracte achtergrond en type.
 
Het tweede deel van de tutorial is beschikbaar via NETTUTS.com, waar we een snelle build van de PSD doen naar een levensvatbare, werkende HTML / CSS-site.
 
Dit ontwerp is gemaakt voor een zelfstudie over photoshop en webontwikkeling. Je kunt het eerste deel bekijken op PSDTUTS.com, waar je leert hoe je een mooi, maar eenvoudig ontwerp maakt met een abstracte achtergrond en type.
 
Het tweede deel van de tutorial is beschikbaar via NETTUTS.com, waar we een snelle build van de PSD doen naar een levensvatbare, werkende HTML / CSS-site.
 
 
 
tutorials
 
Dit ontwerp is gemaakt voor een zelfstudie over photoshop en webontwikkeling. Je kunt het eerste deel bekijken op PSDTUTS.com, waar je leert hoe je een mooi, maar eenvoudig ontwerp maakt met een abstracte achtergrond en type.
 
Het tweede deel van de tutorial is beschikbaar via NETTUTS.com, waar we een snelle build van de PSD doen naar een levensvatbare, werkende HTML / CSS-site.
 
Dit ontwerp is gemaakt voor een zelfstudie over photoshop en webontwikkeling. Je kunt het eerste deel bekijken op PSDTUTS.com, waar je leert hoe je een mooi, maar eenvoudig ontwerp maakt met een abstracte achtergrond en type.
 
Het tweede deel van de tutorial is beschikbaar via NETTUTS.com, waar we een snelle build van de PSD doen naar een levensvatbare, werkende HTML / CSS-site.
 
 
 
recent werk
 
Dit ontwerp is gemaakt voor een zelfstudie over photoshop en webontwikkeling. Je kunt het eerste deel bekijken op PSDTUTS.com, waar je leert hoe je een mooi, maar eenvoudig ontwerp maakt met een abstracte achtergrond en type.
 
Het tweede deel van de tutorial is beschikbaar via NETTUTS.com, waar we een snelle build van de PSD doen naar een levensvatbare, werkende HTML / CSS-site.
 
Dit ontwerp is gemaakt voor een zelfstudie over photoshop en webontwikkeling. Je kunt het eerste deel bekijken op PSDTUTS.com, waar je leert hoe je een mooi, maar eenvoudig ontwerp maakt met een abstracte achtergrond en type.
 
Het tweede deel van de tutorial is beschikbaar via NETTUTS.com, waar we een snelle build van de PSD doen naar een levensvatbare, werkende HTML / CSS-site.

Zie de

onderaan? Het is gewoon een leeg
dat zegt om de drie kolommen te verwijderen. En het lost ons probleem op,

Bekijk hier de site.

Een paar laatste woorden over zweven en ze opruimen
Je vraagt ​​je misschien af ​​waarom ik de "clear: both" niet in de

definitie, maar helaas werkt dat niet vanwege de achtergrond die we gebruiken ... hier is een screenshot:

Blijkbaar is er een oplossing waarbij geen nutteloos wordt ingevoegd

tag, en je kunt erover lezen op QuirksMode. Persoonlijk gebruik ik deze methode al een tijdje, en het werkt goed en consistent, dus ik blijf het doen.

Stap 11

OK, bijna daar nu !! De hoofdlay-out is allemaal gesorteerd, alles wat we moeten doen is onze inhoud toevoegen en opmaken. Hier is de HTML voor:

 
 
 
een strak ontwerp
 
Dit ontwerp is gemaakt voor een zelfstudie over photoshop en webontwikkeling. Je kunt het eerste deel bekijken op PSDTUTS.com, waar je leert hoe je een mooi, maar eenvoudig ontwerp maakt met een abstracte achtergrond en type.
 
Het tweede deel van de tutorial is beschikbaar via NETTUTS.com, waar we een snelle build van de PSD doen naar een levensvatbare, werkende HTML / CSS-site.
 
 
 
tutorials
 
Psdtuts en nettuts bieden tutorials over de volgende onderwerpen (sorta):

Het is eigenlijk dezelfde structuur als eerder, behalve in de derde kolom die ik heb gemaakt

×