De basisprincipes van een op Div gebaseerde website: 7 stappen
De basisprincipes van een op Div gebaseerde website: 7 stappen

Inhoudsopgave:

Anonim

Deze instructable laat je de basis zien van het bouwen van een website met divs. Omdat tabellen die worden gebruikt voor lay-out slecht zijn!:pOm deze instructable te begrijpen, moet je de basis html en css kennen. Als je iets niet begrijpt, vraag het dan gerust. Mijn persoonlijke homepage gebruikt ook zo'n div-structuur.https://www.erwtje.netEnjoy

Stap 1: Maak de basisbestanden

Maak eerst je html-bestand aan. We zullen er de basis aan toevoegen. Het css-bestand is voorlopig leeg.html-bestand bevat nu: test Sla uw html-bestand op als iets.html. De naam mag je zelf kiezen. Uw css-bestand moet worden opgeslagen als.css. Zorg ervoor dat je het dezelfde naam geeft als vermeld in het html-bestand. In dit geval "style.css". We hebben nu een gewone lege html-pagina wanneer deze wordt bekeken in onze browser.

Stap 2: Bewerk de bodytag voor basiskleuren, lettertypen, …

We laten het html-bestand zoals het is en bewerken alleen het css-bestand. Voeg de volgende code toe aan uw css-bestand:body { background: #444444; font-familie: verdana, arial, schreefloos; kleur: #444444; lettergrootte: 12px; margin: 0px;}Met dit stukje code definiëren we alle eigenschappen van de body-tag. Aangezien alle inhoud zich in de body-tag bevindt, hebben deze instellingen invloed op de hele pagina. De achtergrond en letterkleur (kleur) zijn ingesteld op donkergrijs. De lettertypefamilie (lettertypefamilie) is ingesteld op verdana. Als de computer die wordt gebruikt voor het bekijken van onze website niet het lettertype "verdana" heeft, wordt onze site weergegeven in het lettertype "arial". U kunt meer lettertypen aan de lijst toevoegen. De "sans-serif" is het generieke type dat zal worden gebruikt wanneer geen door u opgegeven lettertype beschikbaar was. De lettergrootte (lettergrootte) is ingesteld op 12 pixels. Dit is een absolute waarde. Als u andere lettergroottes wilt wijzigen (zoals de kopteksten, alinea's, menu-items, …) kunt u de relatieve eenheid "em" gebruiken in plaats van "px". Op deze manier hoef je, als je het formaat van je website wilt wijzigen, alleen de body font size te wijzigen. De marge is ingesteld op 0px voor alle vier de zijden van de body tag. Dit wordt gedaan om ervoor te zorgen dat de site aan de bovenkant van het venster blijft plakken.

Stap 3: Een container met koptekst en inhoud toevoegen

We gaan nu de container toevoegen. Dit is gewoon een gecentreerde div die onze hele website zal bevatten. In deze container zullen we nog twee divs toevoegen; een content-div en een header-div. Ons html-bestand ziet er nu als volgt uit: test Content Header We voegen de volgende code toe aan ons css-bestand:div#container { width: 800px; marge: 0px automatisch; achtergrond: #FFFFFF; opvulling: 0px;}div#content { breedte: 800px; opvulling-top: 100px; achtergrond: geel;}div#header { breedte: 800px; hoogte: 100px; achtergrond: blauw; positie: absoluut; top: 0px;}.clearfix:na {content:"."; weergave:blok; hoogte:0; beiden opschonen; zichtbaarheid:hidden;}.clearfix {display:inline-block;}/* Verbergen voor IE Mac \*/.clearfix {display:block;}div#container betekent dat we een div-tag hebben met id "container". We voegen wat kleuren toe en een "marge: 0px auto;" om ervoor te zorgen dat onze container gecentreerd is op de pagina. We moeten de inhoud een padding-top geven en de header een absolute waarde met een "top: 0px" om ervoor te zorgen dat de header boven de andere inhoud staat. de lelijke kleuren. Het is gewoon om het gemakkelijker te maken om de kleuren te lezen en de verschillende div's te zien. We hebben deze rare clearfix-code nodig om ervoor te zorgen dat onze navigatie- en inhoudsdiv's (toegevoegd in de volgende stap) niet uit de omringende div vallen.

Stap 4: Maak twee divs in de Content Div voor navigatie en werkelijke inhoud

We voegen nu nog twee div's toe aan de content-div. Een voor navigatie en een voor de eigenlijke inhoud. Tussen de content-tag; je voegt de nieuwe code toe:

Navigatie Hoofdinhoud We zullen wat css-code toevoegen om de navigatie en hoofdinhoud weer te geven divs;div#nav { width: 200px; zweven: links; achtergrond: oranje;}div#maincontent { width: 600px; drijven: rechts; background: pink;}Let op het feit dat deze twee divs beide zwevend zijn. Als we de extra clearfix-code niet in de vorige stap hadden geplaatst, zouden de div's buiten de omringende div zweven. Met de clearfix methode zorgen we ervoor dat dit niet gebeurt.

Stap 5: Voeg wat extra divs toe voor structuur in navigatie

We zullen nu wat extra div's toevoegen aan beide "nav" div om een soort structuur in onze webpagina te creëren. Verander het volgende stukje code:

  • Foo
  • Bar

We zullen nu een stukje code toevoegen om te definiëren hoe de div "navblock" moet worden weergegeven. Merk op dat het navblock een klasse heeft, geen id. De reden hiervoor is simpel; divs met een id worden slechts één keer weergegeven (het navigatieblok, koptekst, voettekst, …). Div's met klassen kunnen meer dan één keer worden weergegeven. Hier gebruiken we een klasse. Voor het geval we later nog een navigatieblok willen toevoegen.div.navblock { width: 180px; marge: 5px automatisch; border: 1px effen rood;}Als we nog een navigatieblok willen toevoegen, hoeft u alleen maar een nieuwe … structuur toe te voegen. Uw code ziet er nu als volgt uit;

  • Foo
  • Bar
  • Boe
  • Ver

Stap 6: Voeg wat extra divs toe voor structuur in hoofdinhoud

We gaan nu hetzelfde doen voor de maincontent div. De code ziet er nu als volgt uit:

Lorem ipsum dolor sit amet, …

Nogmaals, we voegen een stukje code toe aan ons css-bestand om te bepalen hoe de div moet worden weergegeven:div.contentblock { width: 580px; marge: 5px automatisch; border: 1px effen wit;}We kunnen nu nog een blok inhoud toevoegen door nog een " … " toe te voegen aan de maincontent div zoals deze;

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementum dictum, …

Stap 7: Maak de site een beetje minder lelijk

Nu het leuke gedeelte; kleuren. Nu we de belangrijkste div-structuur hebben, kunnen we de kleuren veranderen in iets minder chaotisch/lelijk/… Speel gewoon wat met de kleuren in het css-bestand. Hier is het volledige html-bestand van de webpagina die in de afbeelding wordt weergegeven: toets

  • Foo
  • Bar
  • Boe
  • Ver

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementum dictum, …

Header En dit is het volledige CSS-bestand:body { background: #444444; font-familie: verdana, arial, schreefloos; kleur: #444444; lettergrootte: 12px; marge: 0px;}div#container { breedte: 800px; marge: 0px automatisch; achtergrond: #FFFFFF; opvulling: 0px;}div#content { breedte: 800px; opvulling-top: 100px; achtergrond: #FFFFFF;}div#header { breedte: 800px; hoogte: 100px; achtergrond: #888888; positie: absoluut; top: 0px;}div#nav { breedte: 200px; zweven: links; achtergrond: #FFFFFF;}div#maincontent { breedte: 600px; drijven: rechts; achtergrond: #DDDDDD;}div.navblock { breedte: 180px; marge: 5px automatisch; rand: 1px solide #DDDDDD;}div.contentblock { breedte: 580px; marge: 5px automatisch; border: 1px solide #FFFFFF;}.clearfix:after {content:"."; weergave:blok; hoogte:0; beiden opschonen; zichtbaarheid:hidden;}.clearfix {display:inline-block;}/* Verbergen voor IE Mac \*/.clearfix {display:block;}Dus nu heb je de basis. Natuurlijk valt er nog veel te bewerken, zoals kleuren, lettergroottes, een beter uitziend navigatieblok, … Maar deze instructables gaat alleen over de div-structuur. Als je andere gerelateerde instructables wilt zien, kun je dat altijd vragen. Ik zal kijken of ik de tijd kan vinden.