Hoe het bouwen van een basis css lay-out
Ontwerpen zonder tabellen met behulp van CSS-lay-outs is hard op weg de nieuwe standaard op het web, omdat van de voordelen vermeld in mijn vorige artikel. Web browsers deze dagen gebruikt, zijn nu in staat om webpagina's te maken deskundig. In dit artikel zal ik proberen om een fundamentele 2 kolom CSS-lay-out die u kunt gebruiken voor toekomstige vormgeving projects.Web Pagina: http://www.isitebuild.com/css/css-layout.html Style Sheet: http://www.isitebuild.com/css/stylesheet.htm1. Verdeel uw pagina in secties - de div id tags kunt u maken afzonderlijke afdelingen op uw webpagina. Zij worden geïdentificeerd met een unieke id. Vervolgens kunt u een stijl (CSS selector) die specifiek van toepassing op de div van die id. Vergeet niet om de DOCTYPE te nemen (aan uw pagina nauwkeurig maken in de browsers) en meta-tags (kunnen zoekmachines om uw pagina's spin). Wrapper: is de div dat wikkelt rond alle andere divs als een container voor de pagina-elementen. header: definieert de banner boven aan de pagina belangrijkste: definieert de belangrijkste inhoud van de pagina nav: definieert de navigatie van de pagina voettekst: definieert de voettekst en sub-navigatie van de page2. Maak de CSS-code - de CSS-code stijlen de pagina als een gecentreerd 2 kolom CSS-lay-out met een navigatie bar en een voettekst. De div # wrapper stijl creëert de gecentreerd doos die fungeert als een container voor de rest van de pagina-inhoud. De breedte: 80%-regel wordt de breedte van de div. De background-color: # FFFFFF regel kan in een witte achtergrond voor de div. De margin-top: 50px en margin-bottom: 50px regels creëren een ruimte van 50 pixels voor de boven-en onderaan de marges voor de div itself.The juiste manier om naar het midden een blok-niveau element met CSS is de marge set-left: auto-en margin-right: auto. Dit verzoekt de browser automatisch gelijke marges te berekenen voor beide partijen, dus centreren van de div. De border: thin solid # 000000 regel voegt een rand rond de buitenste div. De rest van de CSS-code stijlen de divs voor de koptekst, voettekst, nav, en de belangrijkste content.The div # header en footer div # stijlen set marges en opvulling voor die divs. Bovendien, div # header de tekst bevat-align: center regel tot midden de koptekst, en div # footer bevat de border-top: thin solid # 000000 regel een grens langs de bovenrand van de div naar de horizontale regel boven de voettekst in de tabel vervangen op basis creëren layout.The div # nav en div # main stijlen Maak de twee kolommen in het midden van de gecentreerde box. In de div # nav stijl, de float: left regel duwt de div naar de linkerkant van haar moedermaatschappij element (de wrapper div), en de breedte: 25%-regel stelt breedte van de div's tot 25 procent van de ouder element. Met de div nav zweefde naar links en beperkt tot een bepaalde breedte, laat het ruimte voor de belangrijkste div omhoog te laten komen aan het recht van de div nav, waardoor de twee-kolom effect. De div # main stijl bevat de margin-left: 30%-regel de belangrijkste tekst uitgelijnd in een nette kolom in plaats van zich te verspreiden onder de nav kolom te houden. Linkermarge De belangrijkste div is ingesteld op een waarde iets groter dan de breedte van de nav div.Style Sheet http://www.isitebuild.com/css/stylesheet.htmIf links zijn elders op de pagina geplaatst zij zullen erven dezelfde eigenschappen als hierboven .. een blauwe link die zweeft naar rood. Wat als u Maak een andere set banden die een andere kleur en het behalen van uw muis over hen zijn underlined.4. Maak de onderste navigatie - om dit in het gedeelte van de pagina, gebruik ik div # footer en code elke link dienovereenkomstig. Om de lijst te gaan horizontaal gebruik ik: display: inline; Nu ik klaar bent met het maken van mijn style sheet wil ik de code op pagina verkorten door het te koppelen aan mijn externe style sheet. Here's how: 4. Maak een externe style sheet - kopieer en plak alle css-code (zonder deze tags:) in notepad en label het iets als "style sheet". Plaats deze style sheet tussen het hoofd-tags van uw website page.This zal vermindering van de code op uw pagina dus het zal snel laden plus de zoekmachines kan gemakkelijker spin uw web page.4. Inhoud toevoegen aan uw pagina - nadat u uw pagina heb zoek correct, kunt u meer inhoud aan het. Aanpassingen kunnen eenvoudig worden aangebracht in elke stijl op de pagina (of uw hele site) door simpelweg het bewerken van een stijl sheet.5. Upload je bestanden - zorg ervoor dat uw webpagina's en style sheet te uploaden naar de root directory van uw server.6. Valideer uw code - zorg ervoor dat je xhtml code te valideren: http://validator.w3.org/ en css-code: http://jigsaw.w3.org/css-validator/ en maakt correcties necessary.7. Check browser compatibiliteit en schermresolutie - controleren of uw pagina goed maakt in het populaire browsers (IE6, NN7, Firefox) Als je beginnen met CSS lay-outs, uit te voeren dan langzaam door kleine veranderingen aan uw pagina's dwz het creëren van een stijl blad voor uw belangrijkste headers en lettertypen alleen. Als u meer vertrouwd raken met CSS kan je uiteindelijk bouwen al uw toekomstige locaties met CSS layouts.Resources: Basis CSS-lay-out http://www.isitebuild.com/css/css-layout.htmlCSS http://www.isitebuild.com/css/stylesheet.htmBenefits van CSS stylesheet http://www.isitebuild.com/css/index. htmHerman Drost is de Certified Internet Webmaster (CIW) eigenaar en auteur van http://www.iSiteBuild.com Affordable Web Site Design en Web Hosting. Abonneren op zijn "Marketing Tips" nieuwsbrief voor meer originele artikelen. mailto: subscribe@isitebuild.com. U kunt lezen
Artikel Bron: Messaggiamo.Com
Related:
» Seo Elite: New Seo Software!» AntiSpywareBOT
» Reverse Mobile
» Error Nuker
Webmaster krijgen html code
Voeg dit artikel aan uw website!
Webmaster verzenden van artikelen
Geen registratie vereist! Vul het formulier in en uw artikel is in de Messaggiamo.Com Directory!
