Artiklar » (X)HTML/CSS » Konsten att bygga hemsida ifrån grunden

 
 

Konsten att bygga hemsida ifrån grunden

Författare: mactommy
Datum: den 25 juli 2009
Antal lästa: 6071
Ej stjärnmärkt

I den här artikeln så kommer jag utgå ifrån dom erfarenheterna som jag fått med mig det senaste året i konsten att bygga en hemsida ifrån grunden. Hur kan man bygga hemsidan enkelt och hur kan man utnyttja CSS för att minska tecknen som skickas mellan server och client, men ändå ha möjlighet designa upp sidan på ett snyggt sätt.

Det senaste året så har jag insett att ett flashigt utseende inte är A och O i bygget av den ultimata sidan. En bra uppbyggd sida med god struktur ger en goda förutsättningar till att enkelt kunna bygga flera teman till sidan, utan att påverka HTML-koden. Genom att strukturera sidan och använda hierarktisk CSS ger oss möjlighet till att minimera det som lämnar servern och leverera snygga HTML-sidor utan massa kladd.

Om man börjar titta på de olika HTML-taggarna som finns, så kommer vi inse att de har olika egenskaper. Dessa egenskaper kommer vi inse först om vi sätter bakgrundsfärgen på dessa och kör igenom samtliga element. Vi kommer att här se 3st "grund typer" av element.
1) Element som omsluter enbart ord. T.ex. <a>, <i> och <span>.
2) Element som anpassar sig efter bredden på föregående element. T.ex. <div> och <fieldset>.
3) Element som anpassar sig efter bredden på föregående element med marginaler. T.ex. <p>, <blockquote>, <h?> m.fl.

Vi behöver aldrig vara rädda att utnyttja olika typer av HTML-element, utan vi kan styra upp detta med CSS i efterhand om vi inte är nöjda med utseendet. Genom att utnyttja dessa olika egenskaper så kommer vi att kunna bygga en hemsida som är läsbar även om vi skulle tappa CSS:en på sidan och ger oss goda förutsättningar till att göra en "print.css" utan bygga en separat sida för utskrift. Detta har jag sett allt för många pyssla med och som sedan glöms bort när man ändrar på något innehåll att även ta med printout.aspx-sidan.

Vi börjar med att skapa en vanlig grundstruktur som består av <div>-element. Det innebär att vi sätter en "master" <div> som håller hela vårat innehåll och som bestämmer bredden på våran "design". Jag sätter ID på mina huvudelement som endast får finnas på ett ställe och använder mig av "class" om dessa kan finnas på flera ställen, eller det tredje alternativet med hierarkisk CSS som minmerar "skräpet" i den färdiga HTML-koden.
Kod:
<div id="wrapper">
  <div id="header">
    <h1>Konsten att bygga en hemsida ifrån grunden - ASPsidan.se</h1>
  </div>
  <div id="menu">
    <h2>Meny</h2>
    <ul>
      <li><a href="start.aspx" title="Start">Start</a></li>
      <li><a href="sida1.aspx" title="Sida 1">Sida 1</a></li>
      <li><a href="sida2.aspx" title="Sida 2">Sida 2</a></li>
    </ul>
  </div>
  <div id="content">
    <h2>Konsten att bygga en hemsida ifrån grunden</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the

industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it

to make a type specimen book.</p>
  </div>
  <div id="footer">
    Copyright ASPsidan 2009
  </div>
</diV>

Vi har satt ihop en enkel hemsida som vi kan köra mot en webläsare (ni får fylla på själva med de saknade grundelementen). Vi ser här att elementen som jag valt ger oss en tydlig text att läsa utan CSS. Vi har utrymme mellan rubriker och texter, utan att vi behövt pilla med CSS. Sidan läses uppifrån och ned som gör enkelt att läsa sidan om vi skippar allt som har med design att göra.

Efter att vi fått till grundstrukturen på sidan, så kan vi nu börja pilla med CSS:en. Vi har ganska många element på sidan som ger oss marginaler och mellanrum. Dessa kan vi enkelt trolla bort med några rader överst i våran CSS. Den magiska "CSS-classen" är *, *... Kod:
*, *
{
  margin: 0px;
  padding: 0px;
}

Nu har vi tagit bort alla marginaler utanför och innanför elementen med lite CSS. Nu är det upp till oss att lägga till och anpassa marginalerna själva där vi vill ha margin/padding i våran design. Våra element ärver ifrån tidigare classer och sista ändringen gäller. Skulle vi lägga "*, *" sist så har vi inga marginaler m.m. kvar på sidan, eftersom det är den sista ändringen som gäller.

Vi kan även passa på att ändra tysnittet på sidan så att vi har ett genomgående typsnitt och det gör vi med dessa rader, Kod:
html, body
{
  font: 12px Arial, Tahoma, Verdana;
}

Som vi kan se när vi kör denna är att den ändrar på alla typsnitt som vi har, men den behåller en viss storlek på våra <h1> och <h2> element jämtemot våra 12px som övrig text är i. Gillar man det inte så kan man formatera om <h1> och <h2> i CSS:en, allt efter eget tycke och smak. Ändrar ni på h2 så gäller det samtliga h2-element som inte är modifierade senare i CSS:en. Eftersom mitt exempel bygger på olika <h2>-element, varav ena är dold. Därför visar jag det inte här.

Som ni ser så har jag valt att placera min <h1>-tagg i "headern", det är för att få det största rubrik-elementet att hamna före menyn eftersom jag valt att placera min meny i en <ul>-lista. Framför listorna bör man ha en egen rubrik som man kan dölja med CSS. Sidan ska bara innehålla ett <h1>-element och sen <h2> o.s.v., därför hamnar <h1> före menyn och <h2> som förklarar vad våran lista innhåller. Man får ha flera <h2>, <h3>, <h4> o.s.v., men de bör ligga i ordning så att man inte har en <h4> efter en <h2>:a, utan den <h4>:an bör vara en <h3>:a för ordningen skull.

Vi ska nu göra något som flera säger att det är inte bra för sökmotorerna. Men denna artikel är inte för sökmotorerna, utan för hur man kan få en bättre struktur på sin egna sida. Vi har <h1>-rubriken som ligger i huvudet, här kanske vi vill ha en bild. Bilden har vi två möjligheter att få ut, den ena är att lägga en <img>-tagg eller lägga den som en bakgrundsbild i våran <div>. Eftersom jag vill ha olika bilder i olika teman så väljer jag att lägga den som en bakgrundsbild eftersom jag då styr bilden ifrån CSS:en. Bilden slipper jag även få med vid utskrift - om jag vill. "Huvudrubriken" vill jag inte att den ska synas, så därför döljer jag den med CSS.
Jag kommer att använda mig av hierarkisk CSS för att tydligöra vad jag vill få ut med artikeln och jag gör ordning allt innehåll i "header" på samma gång, Kod:
#header
{
  background: #4b6476 url("top.jpg") no-repeat;
  height: 100px;
}

#header h1
{
  display: none;
}

Först så sätter jag "header" där jag väljer färg, bakgrund och height. Har vi inget "synligt" så måste vi se till att bakgrunden syns genom att sätta höjden. Vi använder #header h1 för att tala om att detta gäller enbart "h1" som finns i ett element namngivet med ID:et "header" och sätter display: none; för att dölja rubriken. För att tydligöra detta mera är att gå vidare till menyn och innehållet eftersom det innehåller dubbla <h2>-element.

Snabbvisning så kan ni själva leka med denna CSS-kod senare, Kod:
#menu
{
  padding: 5px;
}

#menu h2
{
  display: none;
}

#content
{
}

#content h2
{
  font-size: 20px;
  border-bottom: 1px solid red;
}

#content p
{
  padding: 5px;
}

Som ni nu ser så har vi två <h2> där båda uppför sig olika genom att vi har utgått ifrån tidigare elementen "#menu" och "#content". Vi slipper även i våran HTML-kod sätta en class på dessa rubriker för att skilja dessa två från varandra. Vi får även en renare HTML-kod när vi använder CSS:en på det här sättet.

Om vi nu går in och sätter bredden på våran "wrapper" så kommer vi se att innhållet i "header", "menu", "content" och "footer" anpassar sig till våran "wrapper" i bredd och det är då wrappern som vi placerar ut på skärmen för att centrera sidan. Resten följer med... Detta eftersom jag valt att lägga design-strukturen i <div>-element som anpassar sig till tidigare bredd, utan att behöva göra något extra vare sig i HTML-koden eller i CSS:en.

Nu har vi en bra grund att bygga en sida som är hårt anpassad efter en viss bredd eller bygga en sida som fyller hela skärmbredden... eller då olika teman som ger oss båda möjligheterna - allt i samma HTML-struktur.

Jag brukar använda mig utav en class som jag döper till "hide", där jag döljer vissa elementet som innhåller hjälptexter på sidan, som enbart syns när man kör sidan CSS-löst. På det sättet så kan man tydliggöra viss information vid t.ex. utskrift som annars enbart hade varit synlig vid utskrift av sidan inkl. bilder.

Lycka till med eran nya struktur på sidorna...
 
     

  » Logga in  
 
Användarnamn

Lösenord

 
     

  » Bli medlem  
  Bli medlem på ASPsidan!  
     

     
  Microsoft  
     

  » Partners  
  Comsolvia  
     
  » ANNONS  
  ingen annons än  
     

  » Senast online  
  Endast för inloggade  
  Antal inloggade: 1  
     

Copyright © 2007 www.ASPsidan.se
ingen sponsrar längre ASPsidan med Dedikerad Server
ASPsidan RSS
   
 XHTML / CSS
Det tog 0,0625 sekunder att ladda sidan