Gaande van tabellen . (deel 1 - Het creëren van de lay-out) 24 oktober 2008 door Brady Feiereisel · 3 Reacties 
OK, is wat we zullen volbrengen hier nemen van uw Photoshop lay-out en in kaart brengen het uit met CSS - div's, in plaats van standaard Photoshop HTML - tabellen. Om succesvol te zijn in deze tutorial moet je al weet html-codering, en sommige CSS ervaring is nuttig ook.
Laten we beginnen met de basis. In plaats van met HTML en het gebruik van tabelcellen aan onze achtergrond beelden houden aan de lay-out vorm, zullen we gebruik maken van <div> 's die op dezelfde manier handelen, maar zijn veel gemakkelijker te bewerken en het formaat voor elke <div> we zullen verbonden een id aan, dus ze weet hoe de website voor het opmaken van de cel. Dus de opmaak van de html-codering is nu <div id="idname here"> </ div>. Nu we de parameters voor de cel set die overeenkomt met die id naam, dit gaat binnenkant van de <head> tag.
Vanaf het af, stel ik de achtergrond kleur en beeld. Voor deze heb ik besloten om gebruik
die is gelegen op http://urbanm.net/blog/bg.jpg, de CSS-codering voor dit
body (
background-image: url (http://urbanm.net/blog/bg.jpg);
background-repeat: repeat-x;
background-color: # 010066;
)
Wat dit doet is het bepalen van een html-aspect dat was met gecodeerde <body> te hebben van de achtergrond afbeelding zelf horizontaal herhalen totdat het vult de hele browser, en de achtergrond afbeelding aan de onderkant van de helling we in ons imago wedstrijd, zodat het een soepele overdracht.
Je moet zoiets als DIT
Nu moeten we zorgen te maken over de werkelijke inhoud van de site. Ik normaal houden alles midden uitgelijnd, dus je moet center align alles binnen uw <body> element. U kunt <center> toevoegen na <body>. Dus nu je lichaam HTML moet er als volgt:
<body>
<center>
</ center>
</ body>
Tijd om onze banner op de site. We hebben het scheppen van de cel die zal houden de banner, tussen ur <center> tags kunt onze eerste cel betreden door het plaatsen van een <div id="banner"> </ div> daar. Zonder het instellen van de parameters voor het id label "banner" niets zal verschijnen, dus we moeten de parameter van deze cel met CSS set. Ik zal met behulp van de volgende afbeelding als mijn banner.
# banner (
background-image: url (http://urbanm.net/blog/banner.png);
height: 200px;
width: 800px;
)
Wat het bovenstaande zegt is dat een html-object dat de id etiket van banner zal hebben van het bovenstaande beeld, en het zal ook de hoogte en breedte van de banner beeld dat toevallig 200px door 800px. Onze site is het oppakken van nu, moet het nu lijken op iets als DIT.
Nu ben ik normaal zou doen de navigatiebalk, maar ik zal bespreken deze stap in deel 2 van deze tutorial.
Skipping de navigatiebalk, gaan we naar de inhoud van vakken die zal houden al onze informatie. Bij het maken van uw beeld, bedenk dan dat je zal splitsen in 3 verschillende plaatsen, het bovenste deel, met daarin de kop, voor mij ik ben een fan van afgeronde randen. De 2de splice hebt u zal de inhoud zijn beeld dat zal worden herhaald zich verticaal in te vullen de ruimte die u hebt ingevuld op al uw informatie over. De 3e splitsen is de voettekst, nogmaals ik ben een fan van afgeronde randen. Hier zijn de drie beelden die ik gebruikt voor dit deel. Header - Content Repeater - Footer.
Als het alles is samen te stellen vormt dit vak. Nu moeten we het opzetten van de HTML-codering, zodat het mogelijk maakt de beelden naar het vak goed te vormen. We zullen met behulp van vier totaal cellen te vormen onze content box. De eerste van de vier gaat houden de overige drie cellen binnenkant van het. Het doel van deze cel, zal je later begrijpen op met meer begrip, maar dit zal in principe kunt u de tekst stijlen op de verschillende pagina's die u zal doen indien nodig te wijzigen. Dus laat beginnen de HTML, dit is de nieuwe HTML.
<body>
<center>
<div id="banner"> </ div>
<div id="indexcontent">
<div id="header"> </ div>
<div id="contentrepeater"> </ div>
<div id="footer"> </ div>
</ div>
</ center>
</ body>
Nu hebben we de cellen opgericht als we willen, maar nu moeten we de id parameters voor elk etiket set. Dit moet er ongeveer zo uitzien.
# indexcontent (
display: block;
width: 600px;
)
indexcontent # # header (
height: 35px;
width: 600px;
background-image: url (http://urbanm.net/blog/header.png);
background-repeat: no-repeat;
)
indexcontent # # contentbg (
background-image: url (http://urbanm.net/blog/content.png);
background-repeat: repeat-y;
hoogte: 150px;
width: 600px;
)
indexcontent # # footer (
background-image: url (http://urbanm.net/blog/footer.png);
background-repeat: no-repeat;
height: 37px;
width: 600px;
)
Whoa - dat is veel te doen in een stap toch? Laat me het uitleggen voor u en u verder helpen.
Beginnen met # indexcontent, zetten we de breedte van het aan 600px dat is wat mijn inhoud doos beelden zijn. We stellen niet de hoogte, zodat het kan uitbreiden en instorten afhankelijk van hoeveel inhoud die u hebt in je cellen binnenkant van het. We stellen het display te blokkeren, zodat de cel zal uitbreiden naar de juiste hoeveelheid pixels op de hoogte.
Vervolgens kregen we de indexcontent # # header, de afmetingen zijn ingesteld op de beeldgrootte wedstrijd en we hebben de achtergrondafbeelding ingesteld op de juiste locatie.
Dan we hebben indexcontent # # contentbg, wij hebben de juiste afbeelding geselecteerd als onze achtergrond beeld, en we moeten het bij-y herhalen, zodat het zich herhaalt verticaal naar de cel grootte past. Ik pakte 150px voor de hoogte, zodat u kunt zien dat de jongens herhalen effect, zou u deze aan te passen alle inhoud die u hebt daarin.
Tot slot hebben we indexcontent # # footer, dat is net hetzelfde als de header.
Door nu moet u uw basis-layout ingesteld voor u klaar up!
Stay tuned voor deel 2, uit te leggen hoe de navigatiebalk te maken.
Reacties
3 Reacties op "Going van tabellen . (deel 1 - Het creëren van de lay-out) "
24 oktober 2008 door Brady Feiereisel · 3 Reacties
OK, is wat we zullen volbrengen hier nemen van uw Photoshop lay-out en in kaart brengen het uit met CSS - div's, in plaats van standaard Photoshop HTML - tabellen. Om succesvol te zijn in deze tutorial moet je al weet html-codering, en sommige CSS ervaring is nuttig ook.
Laten we beginnen met de basis. In plaats van met HTML en het gebruik van tabelcellen aan onze achtergrond beelden houden aan de lay-out vorm, zullen we gebruik maken van <div> 's die op dezelfde manier handelen, maar zijn veel gemakkelijker te bewerken en het formaat voor elke <div> we zullen verbonden een id aan, dus ze weet hoe de website voor het opmaken van de cel. Dus de opmaak van de html-codering is nu <div id="idname here"> </ div>. Nu we de parameters voor de cel set die overeenkomt met die id naam, dit gaat binnenkant van de <head> tag.
Vanaf het af, stel ik de achtergrond kleur en beeld. Voor deze heb ik besloten om gebruik
die is gelegen op http://urbanm.net/blog/bg.jpg, de CSS-codering voor dit
body (
background-image: url (http://urbanm.net/blog/bg.jpg);
background-repeat: repeat-x;
background-color: # 010066;
)
Wat dit doet is het bepalen van een html-aspect dat was met gecodeerde <body> te hebben van de achtergrond afbeelding zelf horizontaal herhalen totdat het vult de hele browser, en de achtergrond afbeelding aan de onderkant van de helling we in ons imago wedstrijd, zodat het een soepele overdracht.
Je moet zoiets als DIT
Nu moeten we zorgen te maken over de werkelijke inhoud van de site. Ik normaal houden alles midden uitgelijnd, dus je moet center align alles binnen uw <body> element. U kunt <center> toevoegen na <body>. Dus nu je lichaam HTML moet er als volgt:
<body>
<center>
</ center>
</ body>
Tijd om onze banner op de site. We hebben het scheppen van de cel die zal houden de banner, tussen ur <center> tags kunt onze eerste cel betreden door het plaatsen van een <div id="banner"> </ div> daar. Zonder het instellen van de parameters voor het id label "banner" niets zal verschijnen, dus we moeten de parameter van deze cel met CSS set. Ik zal met behulp van de volgende afbeelding als mijn banner.
# banner (
background-image: url (http://urbanm.net/blog/banner.png);
height: 200px;
width: 800px;
)
Wat het bovenstaande zegt is dat een html-object dat de id etiket van banner zal hebben van het bovenstaande beeld, en het zal ook de hoogte en breedte van de banner beeld dat toevallig 200px door 800px. Onze site is het oppakken van nu, moet het nu lijken op iets als DIT.
Nu ben ik normaal zou doen de navigatiebalk, maar ik zal bespreken deze stap in deel 2 van deze tutorial.
Skipping de navigatiebalk, gaan we naar de inhoud van vakken die zal houden al onze informatie. Bij het maken van uw beeld, bedenk dan dat je zal splitsen in 3 verschillende plaatsen, het bovenste deel, met daarin de kop, voor mij ik ben een fan van afgeronde randen. De 2de splice hebt u zal de inhoud zijn beeld dat zal worden herhaald zich verticaal in te vullen de ruimte die u hebt ingevuld op al uw informatie over. De 3e splitsen is de voettekst, nogmaals ik ben een fan van afgeronde randen. Hier zijn de drie beelden die ik gebruikt voor dit deel. Header - Content Repeater - Footer.
Als het alles is samen te stellen vormt dit vak. Nu moeten we het opzetten van de HTML-codering, zodat het mogelijk maakt de beelden naar het vak goed te vormen. We zullen met behulp van vier totaal cellen te vormen onze content box. De eerste van de vier gaat houden de overige drie cellen binnenkant van het. Het doel van deze cel, zal je later begrijpen op met meer begrip, maar dit zal in principe kunt u de tekst stijlen op de verschillende pagina's die u zal doen indien nodig te wijzigen. Dus laat beginnen de HTML, dit is de nieuwe HTML.
<body>
<center>
<div id="banner"> </ div>
<div id="indexcontent">
<div id="header"> </ div>
<div id="contentrepeater"> </ div>
<div id="footer"> </ div>
</ div>
</ center>
</ body>
Nu hebben we de cellen opgericht als we willen, maar nu moeten we de id parameters voor elk etiket set. Dit moet er ongeveer zo uitzien.
# indexcontent (
display: block;
width: 600px;
)
indexcontent # # header (
height: 35px;
width: 600px;
background-image: url (http://urbanm.net/blog/header.png);
background-repeat: no-repeat;
)
indexcontent # # contentbg (
background-image: url (http://urbanm.net/blog/content.png);
background-repeat: repeat-y;
hoogte: 150px;
width: 600px;
)
indexcontent # # footer (
background-image: url (http://urbanm.net/blog/footer.png);
background-repeat: no-repeat;
height: 37px;
width: 600px;
)
Whoa - dat is veel te doen in een stap toch? Laat me het uitleggen voor u en u verder helpen.
Beginnen met # indexcontent, zetten we de breedte van het aan 600px dat is wat mijn inhoud doos beelden zijn. We stellen niet de hoogte, zodat het kan uitbreiden en instorten afhankelijk van hoeveel inhoud die u hebt in je cellen binnenkant van het. We stellen het display te blokkeren, zodat de cel zal uitbreiden naar de juiste hoeveelheid pixels op de hoogte.
Vervolgens kregen we de indexcontent # # header, de afmetingen zijn ingesteld op de beeldgrootte wedstrijd en we hebben de achtergrondafbeelding ingesteld op de juiste locatie.
Dan we hebben indexcontent # # contentbg, wij hebben de juiste afbeelding geselecteerd als onze achtergrond beeld, en we moeten het bij-y herhalen, zodat het zich herhaalt verticaal naar de cel grootte past. Ik pakte 150px voor de hoogte, zodat u kunt zien dat de jongens herhalen effect, zou u deze aan te passen alle inhoud die u hebt daarin.
Tot slot hebben we indexcontent # # footer, dat is net hetzelfde als de header.
Door nu moet u uw basis-layout ingesteld voor u klaar up!
Stay tuned voor deel 2, uit te leggen hoe de navigatiebalk te maken.
Hebben mensen nog steeds gebruik maken van de tag? Waarom geen gebruik maken van CSS om het middelpunt van de inhoud?
^ Dat moet het centrum tag.
De post echt zin om mij ... maar als u probeert om een aantal van mijn video tutorials te controleren in verband met deze CSS ... voor dat je meer leert ... van te maken ...