Genomgång

Vi kommer nu att sätta upp en fungerande hemsida, och det gäller att du har följt hela kursen för att hänga med.

Resultat

Såhär kommer vårat exempel att bli, tryck här för att ladda ner exempelsidans alla filer.

Sätta upp det viktigaste

Vi börjar med vår HTML-grund, samt style.css och en CSS-reset.

<!doctype html>

<html>

  <head>
    <meta charset="utf-8">
    <title>Matlagning</title>
    <link rel="stylesheet" href="assets/reset.css">
    <link rel="stylesheet" href="assets/style.css">
  </head>

  <body>
    <!-- Innehållet på hemsidan ska ligga här -->
  </body>

</html>

Det här är de fyra områdena som jag tänkt ha på hemsidan. Jag skriver dom som divar men de kan även skrivas som <header> <content> och <footer> i senaste versionen HTML 5.

  <body>
    
    <div id="header">
    </div>

    <div id="content">
    </div>

    <div id="sidebar">
    <div>

    <div id="footer">
    </div>
  
  </body>
#header{

}

#content{

}

#sidebar{

}

#footer{

}

Storlekar och positionering

Header och footer tänker jag mig ska vara 100% breda, medan content och sidebar ska ligga bredvid varandra och vara 70% respektive 30% breda.

#header{
  width: 100%;
}

#content{
  width: 70%;
}

#sidebar{
  width: 30%;
}

#footer{
  width: 100%;
}

Floata sidebaren till höger om content

Content och sidebar tänker jag mig ska ligga bredvid varandra, det fixar vi med att sätta float: left och right på divarna, samt en div som omringar de två divarna och avslutar floaten. Jag döper den diven till container.

      <div id="container">

        <div id="content">
        </div>

        <div id="sidebar">
        <div>

      </div>
#content{
  width: 70%;
  float: left;	
}

#sidebar{
  width: 30%;
  float: right;	
}

#container{
  overflow: hidden;
}

Avstånd mellan content och sidebar

Jag vill ha ett avstånd mellan #content och #sidebar, det gör vi genom att minska storleken till 20% på #sidebar.

#sidebar{
  width: 20%;
  float: right;
}

Wrapper

Allt ska centreras inom ett 960px brett område hade jag tänkt. Vi lägger därför alla divar inom en wrapper.

  <body>
    
    <div class="siteWrapper">

      <div id="header">
      </div>

      <div id="container">

        <div id="content">
        </div>

        <div id="sidebar">
        <div>

      </div>

      <div id="footer">
      </div>

    </div>
  
  </body>
.siteWrapper{
  width: 960px;
  margin: 0 auto;
}

Färger och bakgrunder

Vi börjar med att sätta en bakgrundsfärg på hela sidan, alltså body. Där tänker jag mig en ljusgrå färg. Headern kan vi strunta i att ge bakgrund åt och container gör vi vit. Footern blir mörkgrå.

body{
  background: #e4e5e4;
}

#container{
  overflow: hidden;
  background: #fff;
}

#footer{
  width: 100%;
  background: #1d1d1d;
}

Texter

Vi fyller vår hemsida med textinnehåll, i det här exemplet kommer jag att skriva en massa Lorem Ipsum.

  <body>

    <div class="siteWrapper">

      <div id="header">
        <h1>Matlagning</h1>
      </div>

      <div id="container">
        <div id="content">
          <h2>Vegetarisk mat är bra för hälsan</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
          Fugit, non aut tempore itaque veniam ipsam aperiam quae quasi.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
          Totam, consequatur, nam, labore, recusandae cum quas provident 
          obcaecati quaerat quibusdam porro a praesentium assumenda i
          llum impedit doloribus perspiciatis sequi rem ullam.</p>
        </div>
 
        <div id="sidebar">
          <h3>Fakta om vegetarisk mat</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
          Similique, magni, quaerat blanditiis odio quibusdam perspiciatis 
          placeat commodi iste repudiandae rem veniam aperiam dolores 
          reprehenderit ut amet beatae accusamus. Quia, dicta.</p>
        </div>
      </div>
 
      <div id="footer">
        <span>Skapades av <a href="http://webbdesignkurser.se">Webbdesignkurser</a></span>
      </div>
      
    </div>
  
  </body>

Padding

Som du märker är det väldigt trångt just nu. Det fixar vi med hjälp av padding#header, #container och span som ligger i footern. Eftersom span inte reagerar som ett block vanligtvis, måste vi ge den display: block för att kunna ha en padding.

#header{
  width: 100%;
  padding: 30px 0px;
}

#container{
  overflow: hidden;
  background: #fff;
  padding: 30px;
}

#footer span{
  display: block;
  padding: 30px;
}

Textstiler

Sist men inte minst så ska alla texter stylas.

h1 {
  font-size: 40px;
  line-height: 45px;
  font-family: helvetica;
  font-weight: bold;
}

h2 {
  font-size: 25px;
  line-height: 30px;
  margin-bottom: 15px;
  font-family: helvetica;
}

h3 {
  font-size: 20px;
  line-height: 25px;
  margin-bottom: 15px;
  font-family: helvetica;
}

p {
  font-size: 14px;
  line-height: 25px;
  margin-bottom: 15px;
  font-family: helvetica;
}

a{
  color: #eb4f9a;
  text-decoration: none;
}

#footer span{
  display: block;
  padding: 30px;
  color: #eee;
  font-size: 14px;
  font-family: helvetica;
}

Snyggt! Nu har vi designat upp en enkel hemsida

Om vi känner oss nöjda så är det dags att publicera den på internet.

Hur man publicerar hemsidan


Vill du bidra till ett öppnare och friare läromedel?

Bidra med eget material
comments powered by Disqus