Sigit Purnomo

Tutorial Konversi Visual Design Bagian Header ke CSS dan XHTML

Posted: October 27th 2007

Saya belum expert di bidang ini tetapi melalui tulisan ini saya akan mencoba menyampaikan tutorial mengenai bagaimana melakukan konversi dari visual design situs web/weblog ke dalam bentuk CSS dan XHTML (Web Standard) atau sering disebut juga dengan istilah XHTMLizer. Tutorial ini saya susun berdasarkan apa yang saya lakukan pada saat membuat theme “the dark side” untuk weblog ini. Fokus bagian pertama dari tutorial ini adalah bagian header dari visual design.

Berdasarkan gambar di atas (kalau kurang jelas lihat header weblog), dapat dilihat bahwa header dari visual design terdiri atas beberapa elemen, yaitu menu, vector image, weblog title, box about me, search form dan bloginfo. Elemen-elemen ini berguna untuk menentukan struktur CSS maupun XHTML-nya. Langkah pertama yang kita lakukan dalam tutorial ini adalah membuat CSS-nya terlebih dahulu.

Headerwrap
Bagian ini adalah wrapper untuk seluruh elemen yang ada di dalam header. Pada bagian ini kita mengatur margin dan padding-nya ke 0px (biasanya agar tampilan di IE dan browser lain sama), tinggi bagian header sebesar 325px, dan background image-nya. Kode CSS-nya adalah sebagai berikut:


#headerwrap {
       margin: 0px;
       padding: 0px;
       height: 325px;
       background: transparent url("images/bg-header.png") no-repeat top left;
}

HeaderElement
Bagian HeaderElement digunakan untuk mengatur style dari setiap elemen header, yaitu title, vector-image, profile, profile-text, menu, searchform dan bloginfo.

Weblog Title
Biasanya weblog title menggunakan Heading tetapi dalam theme the dark side saya menggunakan image (sebagai background). CSS bagian ini berguna untuk mengatur posisinya dan saya menggunakan absolute. CSS-nya sebagai berikut:


#headerelement .title {
        top: 210px;
        width: 536px;
        height: 80px;
        position: absolute;
        background: transparent url("images/blog-title.png") no-repeat top left;
}

Vector Image
CSS bagian ini juga berguna untuk mengatur posisi dari vector image (sebagai background image). CSS-nya sebagai berikut:


#headerelement .vector-image {
      left: 545px;
      top: 0px;
      width: 169px;
      height: 290px;
      position: absolute;
      background: url("images/vector-image.png") no-repeat top left;
}

About Me (Profile)
CSS bagian ini berguna untuk mengatur posisi dari area about me (profile) dan elemen-elemennya. Class profile berguna untuk mengatur posisi dari box about me, sedangkan profile-text berguna untuk mengatur style dari text yang ada dalam box. Text terdiri dari 2 bagian yaitu Heading dan Content. CSS-nya sebagai berikut:


#headerelement .profile {
       left: 698px;
       top: 0px;
       width: 245px;
       height: 300px;
       position: absolute;
       background: url("images/bg-profile.png") no-repeat top left;
}
#headerelement .profile-text  {
       margin:0px;
       width: 225px;
       padding:0px;
       top: 80px;
       left: 700px;
       position: absolute;
}

#headerelement .profile-text h2 {
       font: bold 16px Georgia, Times, serif;
       color: #ffcc99;
       padding-top: 4px;
       margin-left: 15px;
       letter-spacing: 1px;
       border-bottom: #baa187 1px dotted;
}

#headerelement .profile-text p {
       font: 11px Helvetica, serif;
       color: #fff;
       padding-top: 2px;
       margin-left: 15px;
       letter-spacing: 1px;
       text-align: justify;
}

#headerelement .profile-text p a {
       color: #595959;
       text-decoration: none;
}

#headerelement .profile-text p a:hover {
        color: #99cccc;
        text-decoration: underline;
}

Menu
CSS bagian ini berguna untuk mengatur menu dengan memanfaatkan list, yaitu unordered list. Posisinya diatur dengan class menu sebagai wrapper. Setiap item menu (list item) memiliki lebar yang sama dan diset floating-nya left. CSS-nya sebagai berikut:


#headerelement .menu {
       height: 20px;
       top: 40px;
       left: 320px;
       position: absolute;
}

#headerelement .menu ul {
       margin: 0px;
       padding: 0px;
}

#headerelement .menu ul li {
       float: left;
       font: 11px/20px Verdana, Arial, Helvetica, serif;
       text-align: center;
       padding-left: 20px;
       padding-right: 4px;
       height: 20px;
       height: auto!important;
       list-style: none;
       display: block;
}

#headerelement .menu ul li a {
       color: #595959;
       text-decoration:none;
}

#headerelement .menu ul li a:hover {
       color: #99cccc;
       text-decoration:underline;
}

Search Form
CSS bagian ini berguna untuk mengatur posisi dari elemen-elemen search form. CSS-nya sebagai berikut:


#headerelement .searchform {
        top: 300px;
        left: 60px;
        position: absolute;
        width: 536px;
        float: left;
        margin: 0px;
        padding: 0px;
}

#headerelement .searchform p {
        color: #000;
        font: 11px Helvetica, serif;
        margin: 0px;
        padding: 0px;
}

#headerelement .searchform p small {
        font: 11px Helvetica, serif;
        color: #000;
}

#headerelement .searchform label {
        width: 150px;
        float: left;
        position: relative;
        padding-top: 2px;
        padding-bottom: 2px;
}

#headerelement .searchform .textfield {
        width: 200px;
        float: left;
        position: relative;
        background: #fff;
        border: solid 1px #99cccc;
        padding-top: 4px;
        padding-bottom: 4px;
        font: 11px Verdana, Arial, Helvetica, serif;
        color: #333366;
}

#headerelement .searchform .button {
        margin-top: 0px;
        background:#333366;
        color:#fff;
        cursor:pointer;
        padding:1px;
}

Bloginfo
CSS bagian ini berguna untuk mengatur posisi dari text blog info (RSS Feed, XHTML Valid, dan CSS Valid) dengan memanfaatkan list, yaitu unordered list. Posisinya diatur dengan class bloginfo sebagai wrapper. Setiap item (list item) memiliki lebar yang sama dan diset floating-nya left. CSS-nya sebagai berikut:


#headerelement .bloginfo {
        top: 300px;
        left: 560px;
        width: 436px;
        float: right;
        position: absolute;
}
#headerelement .bloginfo ul {
        margin: 0px;
        padding: 0px;
}

#headerelement .bloginfo ul li {
        float: left;
        font: 11px/20px Verdana, Arial, Helvetica, serif;
        text-align: left;
        padding-left: 2px;
        padding-right: 4px;
        height: 20px;
        height: auto!important;
        list-style: none;
        display: block;
}

#headerelement .bloginfo ul li a {
        color: #99cccc;
        text-decoration:none;
}

#headerelement .bloginfo ul li a:hover {
        color: #ffcc99;
        text-decoration:underline;
 }

XHTML
Setelah selesai membuat CSS-nya, maka langkah berikutnya adalah membuat halaman Web-nya menggunakan XHTML. Code XHTML-nya dapat anda download di sini (downloaded times).


2 responses to “Tutorial Konversi Visual Design Bagian Header ke CSS dan XHTML”

  1. heru says:

    ok thank tutorialnya bos

  2. dani says:

    wah makasi tutorialnya..kebetulan lg nyari2..save page dl 🙂

Leave a Reply to heru Cancel reply

Your email address will not be published. Required fields are marked *

© 2021 Universitas Atma Jaya Yogyakarta
css.php