Dynamische Web Design Tutorial

Een dynamische webdesign bevat kenmerken, zoals elastische inhoud, ter bevordering van de interactie van de gebruiker of een webbrowser. Op deze manier kunt u een actuele, gebruiksvriendelijke ervaring voor uw bezoekers. Informatie over het gebruik van HyperText Markup Language (HTML) en trapsgewijze opmaakmodellen (CSS) voor de bouw van een verstelbare, "vloeibaar" lay-out en uw webpagina's dynamisch maken.

Het bestand vloeibare lay-out maken

Open een document in een HTML-teksteditor, zoals Dreamweaver, om het bestand vloeibare lay-out te maken. Vloeibare lay-outs kunnen de gebruiker om te minimaliseren of uitvouwen van het browservenster zo veel als zij verkiezen. Dit is een ideale instelling voor kijkers hebben kleinere computerschermen, of voor degenen die graag webinhoud wilt bekijken in een bepaalde breedte.

Bereid het bestand door het instellen van een CSS-gebied in de kopsectie van het HTML-document. Geef het type "text/css" voor de einddatum "< / head >" element. Bijvoorbeeld:
< stijl type = "text/css" >
< / head >

De opmaakregels maken

De stijlregels gebruikt voor het maken van het vloeibare lay-outontwerp maken. Elke regel gaat direct onder de stijl type tag ingevoegd in de vorige stap.

Definieer eerst, de pagina's lichaam eigenschappen. De marge en opvulling moeten een nulwaarde zodat elke browser standaardwaarden bevatten. Verder, de tekst in een "text-align" attribuut centreren. Typ de "body"-element, gevolgd door een opening en sluiten krullend beugel en voer de stijlen tussen de haakjes als zodanig:
lichaam {marge: 0; padding: 0; text-align: Midden;}

Nu, de vormgeving van de container houden de hele pagina, zodat het zich uitstrekt en met succes krimpt bepalen. Dit doen door te kiezen voor een woord aan het opmaakprofiel, zoals 'pagina' een naam en een hekje vóór het woord om aan te geven dat dit een id toevoegen De regel ID stijlen slechts één gedeelte van een pagina zodat het werkt onafhankelijk van alles. Voer deze regel als volgt:

pagina

Blijven door de breedte van de regel "#page" instellen op 80 procent, zodat de inhoud wordt verplaatst. Nu, toewijzen de marge "auto 0" zodat het werkt met de breedte naar het midden van de pagina. Ten slotte, maken de tekstuitlijning "links" om ervoor te zorgen dat tekst correct wordt geplaatst wanneer op elke browser te bekijken. Voer de volledige regel als volgt:

pagina {breedte: 80%; marge: 0 auto; text-align: links;}

Voltooien door het creëren van een andere regel, zodat de tekst van uw document een ruimte kussen heeft. Doe dit door het invoegen van een andere ID, zoals "#content", en een opvulling van "0 15px" als de waarde toevoegen. Om te illustreren:

inhoud {0 15px;}

CSS toewijzen aan de HTML-code

Met behulp van woorden, kunt u de CSS-regels toewijzen aan de HTML-inhoud en opmaken van het werk, volgens de regels die zijn ingesteld. U hoeft niet te nemen verdere actie voor het "lichaam" CSS omdat de HTML "< body >" tag automatisch de bijbehorende stijlen actieve maakt.

Eerst, voer de naam van de "#page"-ID in een "< div >" div-tag om de stijl van de pagina-inhoud. Plaats deze regel onder de lichaamsmarkering "< body >". Bijvoorbeeld:
< body >
< div id = "#page" >

Vervolgens typt in de ID "#content" en plaats deze onder de eerste stijlregel. Pagina-inhoud kan nu worden ingevoerd onder dit "< div >" DIV-element dat de opmaakregels van kracht. Voer de CSS in als volgt:
< div id = "#page" >
< div id = "#content" >

Ten slotte, Voeg twee afsluitende "< / div >" tags aan het einde van de twee stijlregels. Typt u deze in voordat het einde "< / body >" tag. Bijvoorbeeld:
< / div >
< / div >
< / body >

Sla het bestand zodat u uw browser "Preview"-functie gebruiken kunt om te zien de vloeibare lay-out in actie.