Langkah Mudah Membuat Website Pertama Anda dari Desain Sekaligus Kodingnya

() translation by (you can also view the original English article)

Pada tutorial kali ini kita akan membuat website sederhana versi pertama kita yang dimulai dari pembuatan desain dan koding dengan tahapan yang sangat mudah. Tutorial ini dibuat dan ditujukan kepada pemula dengan harapan mereka dapat mengetahui Ini adalah minggu yang baru; mungkin sekarang saatnya untuk belajar keterampilan baru!

Langkah 1 - Apa yang Kita Buat

Kita akan mendesain dan mengkode situs web sangat sederhana ini. Desain yang spektakuler, bukan itu, tapi akan menjadi sangat efektif untuk dasar pengajaran teknik mengkode.

Langkah 2 - Bersiap-siap

Apa yang Anda butuhkan

Tutorial ini ditulis dengan asumsi bahwa Anda belum pernah mengkode situs web sebelumnya, atau hanya melakukannya beberapa kali. Namun demikian, untuk menyelesaikan tutorial ini, Anda akan memerlukan berikut:

Photoshop atau editor gambar yang serupa
Editor kode (lebih pada nanti)
Pemahaman dasar tentang bagaimana html bekerja, sintaks dan tag dasar. Untuk meningkatkan kecepatan, periksa sumber resmi di w3 Schools, di mana Anda dapat mempelajari semua kebutuhan dasar untuk tutorial ini.
Demikian untuk css, Anda harus memahami bagaimana penyeleksi bekerja dan menjadi akrab dengan properti-properti dasar. Sekali lagi, sumber daya terbaik di sini adalah w3 Schools
Browser, jelas. Saya menggunakan Firefox, dan jika Anda ingin situs Anda untuk terlihat seperti screenshot saya di setiap langkah, Anda juga harus

Tata letak

Kami membuat situs web yang sangat sederhana di sini, dengan empat elemen dasar: header, konten, sidebar dan footer, tata letak akan terlihat seperti ini:

Ini adalah ide yang bagus untuk merancang tata letak desain sebelum Anda mulai, baik di atas kertas atau di Photoshop, untuk merampingkan alur kerja Anda dan mengatur ide-ide Anda.

Langkah 3 - Memulai

Buka dokumen Photoshop baru, katakanlah, 1000px x 1200px. Kita bisa selalu memangkasnya nanti. Saya membuatnya cukup sempit karena saya bekerja pada sebuah laptop di sini, tetapi Anda bebas untuk menjadikannya lebih lebar jika Anda ingin lebih banyak ruang untuk bekerja.

Sekarang, saya tidak akan masuk ke perdebatan tentang resolusi layar dan lebar optimal situs web di sini. Semua yang perlu Anda ketahui adalah bahwa isi dari halaman kami akan lebar 800px, dan itu baik-baik saja. Jadi, pada dokumen 1000px kita, kita akan menyeret guide di tanda 100 dan 900px untuk mengatur lebarnya. Desain kami memiliki sidebar, dan saya telah memutuskan untuk membuat sepertiga lebar halaman. Dua pertiga dari 800 adalah sekitar 530, jadi mari kita masukkan ke dalam satu guide lagi di 630px. Kami juga akan mengatur latar belakang warna yang bagus dari #ebe8e8.

Langkah 4 - Header

Ambil rectangle tool dan buatlah kotak biru, besar di atas dokumen, milik saya sekitar tinggi 170px dan warnanya adalah #23b6eb. Berikutnya gambarlah bar abu-abu gelap, kurus di bagian paling atas halaman, saya menggunakan # 5d5a5a

Langkah 5 - Highlight

Sekarang kita akan menambahkan sedikit efek pencahayaan di area header warna biru. Membuat sebuah clipping mask di atas layer biru, kemudian ambil kuas besar, lembut (memiliki lebar 400px) dan pilih warna sedikit lebih cerah daripada latar belakang biru.

Sekarang klik ringan ujung kuas tepat di bawah bar, di sekitar bagian tengah dokumen. Jaga tetap halus, dan cobalah untuk tidak membiarkan warna yang lebih cerah mencapai tepi halaman (ini akan menjadi jelas nanti). Dan atur blending mode ke screen.

Langkah 6 - Bar Navigasi

Sekarang kita akan menambahkan satu bar lagi ke bawah warna biru, kita bisa membuatnya abu-abu, tapi kita akan tambahkan gradient overlay sehingga itu tidak terlalu penting.

Di panel layer styles, tambahkan gradien dari #e2e3e4 ke #bebdbd di 90degrees.

Langkah 7 - Footer

Selanjutnya, mari kita menggambar sebuah kotak abu-abu di bagian bawah halaman, saya memilih warna yang sedikit lebih gelap dari abu-abu dari bar di bagian atas.

Langkah 8 - Logo

Latar belakang

Untuk logo, kita akan menggambar persegi panjang dan menambah anchor point pada akhirnya, kemudian tarik ke samping. Untuk menyingkirkan pembulatan, option-klik pada titiknya.

Selanjutnya, tambahkan beberapa layer styles: gradient overlay dan stroke 1px: Gradien dari #aec457 ke #cdf399

Teks

Sekarang untuk teks: besar dan tebal.

Font: Myriad Pro
Style: Bold
Ukuran: 60px
Warna: #36809a

Untuk memberikan beberapa kedalaman, tambahkan inner shadow:

Langkah 9 - Tagline

Selanjutnya saya hanya menambahkan tagline pendek:

Font: Arial
Style: Bold
Ukuran: 30pt
Warna: #e4dfdf

Langkah 10 - Navigasi

Tulis di tautan navigasi yang bagus dan besar, menyebarkan mereka keluar dan merata.

Font: Arial
Style: Bold
Ukuran: 30pt
Warna: #676666

Langkah 11 - Konten Utama

Waktu untuk menyisipkan beberapa konten dummy. Saya menggunakan sedikit header, yang akan menjadi h2 dan yang lebih kecil akan h3 me-link ke html ipsum.

Buat kotak teks dengan lebar sekitar 2 pertiga pertama dari halaman. Gaya teks:

h2 Header:

Font: Arial
Style: Bold
Ukuran: 36pt
Warna: #0e5d7a

h3 Header:

Font: Arial
Style: Bold
Ukuran: 24pt
Warna: #444444

Paragraf:

Font: Arial
Style: Normal
Ukuran: 14pt
Warna: #595858

Tanggal di bawah "update terbaru" akan dibungkus dalam tag small, font-nya sama seperti paragraf, tapi 12pt. Saya menyalin item berita dua kali, karena saya malas.

Langkah 12 - Sidebar

Link

Berikutnya gambar persegi panjang kurus di atas wilayah sidebar, warna #d4d6d3, dengan stroke 1 px #bebdbd

Isi sidebar dengan beberapa lagi konten dummy, Anda bisa mendapatkan ikon gratis yang saya gunakan di sini. Font-nya adalah:

h3 Headers:

Font: Arial
Style: Normal
Ukuran: 24pt
Warna: #044055

List items:

Font: Arial
Style: Normal
Ukuran: 18/14pt
Warna: #373737

Tombol

Berikutnya kita akan menambahkan tombol "join our team" di bawah link kontributor. Tombol ini hanya persegi panjang dengan gradien yang sama seperti logo, dan stroke 1px berwarna c7c7c7. Teksnya adalah:

Font: Arial
Style: Normal
Ukuran: 24pt
Warna: #434343

Langkah 13 - Footer

Untuk menyelesaikan mockup, cukup tambahkan sedikit teks hak cipta dummy, atau apa pun yang Anda inginkan, untuk footer. Font-nya adalah:

Font: Arial
Style: Normal
Ukuran: 14pt
Warna: #e0e2e2

Dan itu untuk desain halaman, itu tidak ada yang istimewa, tapi kesederhanaan akan membuat lebih mudah bagi anda untuk mengikuti seluruh proses.

Mengiris PSD

Sekarang bahwa kita memiliki psd lengkap yang indah, saatnya untuk memotongnya menjadi potongan-potongan yang bisa kita gunakan. Idenya di sini adalah untuk menggunakan gambar sesedikit mungkin, dan membuat mereka sekecil mungkin. Oke, jadi mari kita mulai dengan header. Kami ingin meregang di seluruh layar, tidak peduli seberapa lebarnya. Untuk melakukannya, kita akan mengambil sepotong kecil dari header, dan mengulangnya di sepanjang layar lagi dan lagi, tidak peduli seberapa lebarnya.

Langkah 14 - Slice Tool

Sekarang Anda mungkin belum pernah menggunakan slice tool sebelumnya, tapi itu benar-benar sangat sederhana. Ini hanya memungkinkan Anda memotong-motong file Anda menjadi potongan-potongan kecil mungil yang dapat diekspor untuk web.

Header

Jadi, mari kita lanjutkan dan mengambil sepotong kecil dari header kami. Klik dan seret untuk membuat potongan, seperti rectangular marquee tool. Berhati-hatilah untuk mengambil sepotong dari sisi gambar, sehingga Anda tidak mendapatkan apapun dari highlight.

Sekarang kita memiliki garis kecil, kita dapat mengulanginya sepanjang sumbu-x. Area yang disorot, bagaimanapun, adalah tidak-berulang, jadi kami harus memotong semuanya. Iris bagian header antara dua guide yang menunjukkan lebar 800px kami.

Footer

Kami menggunakan proses yang sama persis untuk mengiris footer, ambil bagian tipis footer.

Segala Sesuatu Yang Lain

Kita hanya perlu beberapa gambar lainnya: ikon "subscribe" dan tombol "join our team".

Karena ikon dan logo berbentuk tidak teratur, kita akan menyimpannya sebagai file .png transparan, jadi kita akan kembali dan mengambil mereka secara terpisah.

Oke, jadi untuk mengiris tombol, kita dapat menggunakan teknik yang sama seperti header dan footer, tapi kali ini kita hanya membutuhkan satu irisan tipis. Ketika Anda membuat potongannya, pastikan untuk tidak menyertakan stroke 1px, (kita akan menambahkan ini kemudian) yang mungkin Anda butuhkan untuk memperbesar sampai benar-benar dekat.

Langkah 15 - Ekspor untuk Web

Sekarang kita memiliki gambar-gambar semua sudah diiris, mari kita simpan sebagai jpeg dioptimalkan dan menempatkan mereka di tempat yang berguna.

Pergi ke File/Save for web and devices... Di jendela popup, tahan shift dan klik untuk memilih setiap irisan (sekali lagi, Anda mungkin ingin untuk memperbesarnya) periksa bahwa menu drop-down "preset" diatur ke JPEG-High, hapus centang "convert to srgb" dan klik "save"

Di jendela berikutnya yang muncul, pilih nama dan lokasi untuk gambar Anda, saya hanya akan menyimpannya ke desktop untuk saat ini.

Pastikan itu sudah diatur untuk "images only", "default settings", dan "selected slices only."

Selanjutnya, periksa lokasi dimana Anda menyimpan file Anda. Alih-alih melihat gambar individu, Anda akan menemukan sebuah folder yang diberi label "images" di mana semua gambar Anda berada. Komputer akan memberikan nomor pada masing-masing gambar, yang sangat tidak berguna. Periksa bahwa Anda memiliki gambar yang tepat, kemudian namakan mereka dengan tepat.

Sekarang, kembali ke ikon dan logo. Pastikan untuk menyembunyikan semua layer latar belakang, kemudian ambil slice tool lagi dan potong kotak-kotak kecil di sekitar masing-masing ikon dan logo.

Sekarang kita ke proses yang sama dengan mengekspor untuk web seperti yang kita lakukan dengan jpeg, hanya saja kali ini pastikan untuk memilih PNG-24 dari menu dropdown "preset", dan kotak "transparansi" dengan tanda kotak-kotak. Ubah nama file ini juga, dan folder gambar Anda akan terlihat seperti ini:

Baiklah, itu saja, kita sudah selesai memotong psd kita, dan kita memiliki semua gambar yang kita butuhkan. Jangan menutup Photoshop dulu, kita masih akan perlu untuk memilih warna, font, dimensi, dll.

Bagian 3 - HTML

Langkah 16 - Persiapan

Baiklah, waktunya untuk menyelam ke dalam beberapa html. Hal pertama yang akan Anda butuhkan adalah beberapa jenis editor kode. Ini sering merupakan daerah preferensi pribadi,
tapi saya sarankan mulai dengan yang gratis. Untuk mac dan PC, saya sangat merekomendasikan Komodo edit sebagai editor kode. Ia memiliki banyak fitur yang ideal untuk pemula dan pengguna tingkat lanjut.
Salah satu fitur terbaik adalah syntax-checker, yang seperti spell-check di pengolah kata, yang akan mengidentifikasi dan menjelaskan kesalahan-kesalahan kecil.
Untuk PC, ada lebih banyak pilihan, tidak ada yang saya sangat akrab dengannya, tetapi memeriksa artikel Andrew Burgess 22 Editor Kode yang Rapi untuk Windows

Dalam tutorial ini, kita akan menggunakan Komodo edit, tetapi prinsip-prinsipnya sama dalam setiap editor.

Langkah 17 - Pengaturan Folder kami

Hal yang pertama kali, kita perlu menyiapkan tempat untuk menyimpan semua file yang terkait ke situs kami. Buat folder untuk situs web Anda, milik saya adalah disebut "MySite", di dalam folder ini, buat folder yang berisi gambar-gambar yang baru saja kita iris.
Namakan folder ini "images". Sekarang kita membuka editor kode, bagian ini akan sedikit berbeda tergantung pada software apa yang Anda gunakan:
Jika Anda mengikuti bersama di Komodo, pilih "create new project" dan simpan/pindahkan file .kpf ke folder "MySite". Ketika Anda membuka file, file browser di samping Komodo harus menampilkan isi dari folder.
Selanjutnya klik kanan pada file proyek, dan gulir ke "add" dan pilih "new file". Di jendela yang muncul, pilih "html(xhtml)" dan nama file "index.html".

Jika Anda menggunakan editor lain, prosesnya seharusnya sama, tetapi esensinya sama: Anda perlu membuat sebuah file index.html, dan perlu di dalam folder "MySite" bersamaan dengan folder gambar.

Langkah 18 - Menyiapkan File index.html Kami

Hal pertama yang perlu kita lakukan adalah mendeklarasikan doc type, encoding karakter, dan membuat tag <html>. Banyak editor akan melakukan ini untuk Anda, tetapi jika tidak, itu akan terlihat seperti ini:

1	<?xml version="1.0" encoding="UTF-8"?>
2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4	</html>

di antara tag html, kita perlu bagian "head", yang berisi segala macam informasi penting tentang situs yang tidak ditampilkan di dalam body dari situs Anda.
Bagi kami, pada saat ini semua itu akan berisi judul halaman, seperti ini:

1	<head>
2	<title>MySite</title>
3	</head>

di bawah head, secara logis, kita menambahkan body, juga terkandung dalam tag <html>. Oke, sejauh ini kita memiliki:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <title>MySite</title>
  </head>
  <body>
     <!-- content goes here -->
  </body>
</html>

Ini adalah dasar-dasar pengaturan halaman, Anda mungkin ingin menyimpan klip ini di suatu tempat untuk penggunaan di masa depan.
Jadi ingat ketika kita mengatakan kita akan memiliki bagian header, konten, sidebar, dan footer?
Baik, sekarang masing-masing akan berada dalamsendiri, dan akan diberikan id yang sesuai.

<body>
    <div id="header">
    </div><!--end header -->
    
    <div id="content">
    </div><!--end content-->
    
    <div id="sidebar">
    </div><!--end sidebar-->
   
    <div id="footer">
    </div><!--end footer-->
    
</body>

CATATAN: ini adalah ide yang baik, terutama ketika Anda pertama kali memulai, untuk menambahkan komentar di setiap <div> sehingga Anda dapat melacak dari hirarki div.

Sekarang mari kita melihat psd kita lagi - ingat bagaimana kita menginginkan irisan footer dan header untuk mengulang tanpa batas ke samping?
Kita akan membutuhkan suatu cara untuk membiarkan elemen-elemen ini meregang keluar, tapi pada saat yang sama, kita membutuhkan konten utama ("content" "sidebar")
terkandung dalam lebar yang ditentukan di bagian tengah layar.

Untuk menangani ini, kita perlu div yang besar memegang elemen memperluas kami, dan div berisi konten utama.
Kita juga harus melihat bahwa teks footer di tengah juga, jadi kita perlu mengulang proses yang sama untuk footer.
Untuk melakukan ini, kita perlu membungkus beberapa div di sekitar satu yang sudah kita miliki. Kami memiliki dua bagian dasar, bagian utama dan bagian footer.
Masing-masing akan terkandung dalam satu div besar, tegar dengan lebar yang tidak ditentukan,
dan konten dari masing-masing akan dibungkus dalam div individu yang menentukan lebar dan ke tengah.

Kami ingin menggunakan aturan yang sama untuk konten main dan footer, jadi bukan (atau di samping) id tertentu, mereka akan memiliki kelas yang ditentukan,
yang berarti Anda dapat membuat satu set aturan untuk mendefinisikan semua div dengan kelas yang sama.

Jadi konten utama akan dibungkus dalam sebuah div dengan id "main" dan footer kami akan dibungkus dalam sebuah div dengan id "footer." Jika hal ini membantu memvisualisasikan strukturnya, berikut adalah diagramnya:

Dan markup terlihat seperti ini:

<body>
    <div id="main">
        <div id="header">
        </div><!--end header -->
    
        <div id="content">
        </div><!--end content-->
    
        <div id="sidebar">
        </div><!--end sidebar-->
        
    </div><!--end main--> 
   
    <div id="footer">
    </div><!--end footer-->
    
</body>

Sekarang kami membungkus setiap bagian dalam sebuah div yang berisi, dengan kelas "container."

 
<div id="main">
    <div class="container">
         <div id="header">
         </div><!--end header -->
    
         <div id="content">
         </div><!--end content-->
    
         <div id="sidebar">
         </div><!--end sidebar-->
            
    </div><!--end main container--> 
</div><!--end main-->
        
<div id="footer">
    <div class="container">
    </div><!--end footer container--> 
</div><!--end footer-->

Saya tahu semua div pembungkus ini tampak berlebihan, tetapi mereka akan menjadi relevan ketika kita mulai men-style halaman.

Langkah 19 - Menambahkan Konten

Sekarang struktur halaman kami telah diatur, kita dapat mulai menambahkan konten, dari atas ke bawah. Berikut ini adalah garis besar dari elemen html yang akan membuat halaman kami:

Header

Di atas kami memiliki header, dan di dalam header kita memiliki 3 unsur utama: logo, tagline, dan menu navigasi.
Jadi mari kita membuat sebuah div untuk header kita, dan untuk menjaga hal-hal tetap bersih, kita akan menempatkan logo dan tagline di div mereka sendiri.

 
<div id="header">
	<div id="logo">
    	</div>
	<div id="tagline">
    	</div>
</div><!--end header -->

Karena itu yang paling penting dari halaman, Logo akan berada di dalam tag <h1>. Kami memiliki lebih banyak pilihan untuk tagline, tergantung pada seberapa relevan untuk situs Anda. Dalam kasus ini, saya menggunakan tag <h3>.

Untuk navigasi, penerapan standar adalah menempatkan item menu dalam sebuah unordered list, dengan masing-masing item daftar yang berisi sebuah tag anchor.
Jadi kita memiliki:

1	<div id="header">
2	<div id="logo">
3	<h1>Logo</h1>
4	</div>
5	<div id="tagline">
6	<h3>And a little tagline, too.</h3>
7	</div>
8	<ul id="menu">
9	<li><a href="#">Home</a></li>
10	<li><a href="#">About</a></li>
11	<li><a href="#">Portfolio</a></li>
12	<li><a href="#">Contact</a></li>
13	</ul>
14	</div><!--end header -->

CATATAN: "href" nilai di tag anchor biasanya akan menentukan ke mana link menuju, tetapi dalam kasus ini, simbol pound hanya berarti "link ke bagian atas halaman."

Konten utama

Melihat konten utama kami, kami memiliki 4 jenis gaya yang berbeda: judul besar di atas, yang lebih kecil,
dan bahkan lebih kecil untuk judul item berita, ditambah beberapa paragraf, dan tanggal kecil pada item berita.
Kita akan menyebutnya masing-masing <h2>, <h3>, <h4>, <p>, dan <small>. Sekarang adalah hanya soal paste di konten Anda, yang tidak menyenangkan, tapi cukup mudah.

<div id="content">
        <h2>Lorem ipsum, Dolor sit</h2>
    	<h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>
    	<p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. 
    		Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl. 
    		Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. 
   	    	Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel.  </p>
    	<p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. 
    		Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl. 
   	    	Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit, 
		gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p>
    <div id="news">
    	<h3>Latest Updates</h3>
    	<h4>Vestibulum id nulla eu sapien pellentesque</h4>
    	<small>June 1, 2009</small>
    	<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu, 
        	facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales. 
   	    	Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
   	<h4>Vestibulum id nulla eu sapien pellentesque</h4>
   	<small>June 1, 2009</small>
   	<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu, 
   	   	facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales. 
      	Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
    </div><!--end news-->
</div><!--end content-->

Saya telah menambahkan tag anchor dengan nilai "Read More" pada akhir dari masing-masing item berita.

Sidebar

Sekarang pada sidebar. Sidebar memiliki tiga unsur, masing-masing yang akan dibungkus div sendiri.
Masing-masing div akan mengandung header <h3>, dan unordered list, dan masing-masing item daftar akan mengandung sebuah tag anchor lagi.
Jadi langsung copy dan paste teks Anda, dan itu harus terlihat seperti ini:

<div id="sidebar">
                <div id="subscribe">
                    <h3>Subscribe!</h3>
                    <ul>
                        <li><a href="#">Subscribe via RSS</a></li>
                        <li><a href="#">Get Email Updates</a></li>
                        <li><a href="#">Follow us on Twitter</a></li>
                    </ul>
                </div>
                <div id="popular">
                    <h3>Popular Items</h3>
                    <ul>
                        <li><a href="#">Lorem ipsum dolor site amet</a></li>
                        <li><a href="#">Ulvinar tincidunt, Mauris id</a></li>
                        <li><a href="#">Lorem ipsum dolor site amet</a></li>
                        <li><a href="#">Proin tempor erat sit tene</a></li>
                    </ul>
                </div>
                <div id="contributors">
                    <h3>Contributors</h3>
                    <ul>
                        <li><a href="#">John Smith, freelance writer</a></li>
                        <li><a href="#">Jack McCoy, designer</a></li>
                        <li><a href="#">Lenny Briscoe, editor</a></li>
                        <li><a href="#">John Smith, martketing</a></li>
                    </ul>
                    <a href="#">Join Our Team</a> 
                </div>
            </div><!--end sidebar-->

Footer

Kita mungkin juga menempatkan footer sebelum memeriksa di browser, itu hanya sebentar.
Yang perlu dicatat adalah bahwa setiap simbol yang ingin Anda gunakan dalam teks Anda memiliki kode-kode khusus di html, sebagai contoh, simbol hak cipta dikodekan sebagai ©

<div id="footer">
        <div class="container">
            <p>Copyright © 2009  MySite <br />
            All Rights Reserved</p>
        </div><!--end footer container--> 
    </div><!--end footer-->

Dan itu semua tentang markup, mari kita lihat:

terlihat cukup baik, bukan? Yah, tidak, belum. Tapi itu tidak mengandung semua informasi yang kita butuhkan, dan siap untuk di-styling.

Bagian Empat - CSS

Langkah 20 - Menambahkan CSS

Sekarang, ini adalah di mana keajaiban terjadi.
Buat file baru di folder situs kami, dan namakan "style.css".
Sekarang kita perlu sebuah cara untuk memberitahu browser bahwa file css ini milik file index.html kita, jadi kita link itu dengan tag "link href". Masukkan baris kode ini ke dalam bagian <head>, di bawah judul.

1	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Sekarang file html kita dapat mengakses file css kita, sehingga apapun perubahan yang kita buat untuk css yang akan mempengaruhi file html.

Langkah 21 - Pembersihan Dasar

Ada beberapa hal-hal buruk tentang situs kami sehingga kami dapat memperbaikinya segera: kami ingin mengubah font default, kami ingin konten yang akan lebar 800px dan ke tengah, dan kami ingin menyingkirkan semua jarak antara elemen-elemen.

Pertama, kita akan memilih font untuk semua teks dalam body halaman, yang akan ditampilkan kecuali ditentukan lainnya:

1	body { font-family: Arial, Helvetica, sans-serif; }

Selanjutnya, mari kita tentukan lebar dan margin dari kelas div "container" kita.

1	.container {
2	width: 800px;
3	margin: 0 auto;
4	}

Properti margin: 0 auto adalah istilah yang berarti bahwa tidak ada margin di atas, dan bahwa hal itu akan secara otomatis berpusat ke tengah secara horizontal.
Mari kita lihat.

Jauh lebih baik. Langkah berikutnya adalah akan membuat hal-hal terlihat jauh lebih buruk, tapi tetap dengan saya.

CSS reset

Semua browser default menggunakan nilai-nilai padding dan margin untuk masing-masing elemen, yang membuat halaman tanpa style terlihat bagus, tapi bagi kami mereka hanya mengganggu dari gaya kita sendiri.

Untuk menyingkirkan semua margin berantakan ini, kita akan menggunakan css reset yang sangat sederhana, yang adalah hanya aturan yang menghilangkan padding dan margin default pada elemen-elemen yang kami gunakan. Tempatkan ini di bagian atas file css:

1	'
2	body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

sekarang mari kita lihat:

Langkah 22 - Header

Oke, jadi segala sesuatu sudah lancar dan siap untuk kita manipulasi! Sekarang kita bisa mulai menambahkan gaya kita sendiri, sekali lagi, dari atas ke bawah.
Mari kita dapatkan bagian yang sulit keluar pertama kali: pengaturan gambar latar belakang untuk header.

Kita akan mulai dengan mengulangi slice yang kami ambil dari header. Gambar berulang akan berada dalam div "main", yang memiliki lebar tak terdefinisikan. Kita perlu membiarkan browser tahu di mana gambar berada, dan apa yang harus dilakukan dengannya (repeat, no-repeat) untuk mengatur gambar latar belakang, kami menggunakan properti "background" dan menentukan lokasi gambar atau 'url': dalam kasus kami, gambar berada dalam folder gambar, jadi kami menentukan lokasi seperti ini:

1
2	url (images/header_slice.jpg)

kemudian tentukan bahwa kita ingin mengulang sepanjang sumbu-x:

1	#main {
2	background: url(images/header_slice.jpg) repeat-x;
3	}

Periksa:

mengagumkan, bukan? Coba rentangkan browser Anda, itu hanya berjalan dan terus dan terus... Tapi kami masih kehilangan highlight pada bar biru, dan karena kita memotong bagian 800px dari header, kita dapat memasukkannya ke dalam div "container" kita. Masalahnya adalah, kita memiliki dua dari itu (satu untuk div main, satu untuk footer) jadi kita perlu menentukan bahwa kita ingin div dengan class "container" yang ada di dalam div dengan id "main"
atur gambar dengan cara yang sama seperti sebelumnya, tapi kali ini kita perlu menentukan "no-repeat":

1	#main .container {
2	background: url(images/header.jpg) no-repeat;
3	}

Perhatikan:

hebat! highlight berada di tempat yang kita inginkan, dan menyatu ke dalam ke sisi berulang.

Langkah 23 - Pengganti Gambar Logo

Logo kami adalah cukup rumit, kan? kita menggunakan gambar latar belakang, dan font non-html dengan inner shadow. kita tidak dapat melakukannya dalam css, jadi kita harus mengganti teks dengan gambar.
"mengapa tidak hanya menempatkan gambar di tempat baris <h1>?"
anda mungkin bertanya. Nah, di internet, header <h1> pada dasarnya adalah 'nama' dari halaman Anda, dan penting, robot yang kuat (google) memindai properti ini ketika mencari kata kunci. Jika Anda tidak memiliki header <h1>, situs Anda bisa disebut kalamazoo, tapi itu tidak akan muncul di pencarian untuk kata yang tepat tersebut.
Ada berbagai teknik yang memiliki keuntungan mereka sendiri daripada satu ini, (lihat di sini, terutama teknik #8) tetapi ini adalah yang paling sederhana dan teknik yang paling tepat untuk situasi ini.

Jadi, untuk memperbaiki masalah ini, kita menggunakan teknik yang agak licik disebut "pengganti gambar" untuk menggunakan gambar yang kita inginkan, sambil tetap menggunakan header <h1> di markup kami. Pertama, mari kita tambahkan gambar sebagai latar belakang untuk div #logo.

1	#logo {
2	background: url(images/logo.png) no-repeat;
3	}

jika Anda melihat di browser, Anda akan melihat bahwa logo kami telah terpotong setengah. Ini karena kita belum memberikan ruangan apapun, kita dapat memecahkan masalah ini dengan menetapkan dimensi gambar:

#logo {
    background: url(images/logo.png) no-repeat;
    height: 84px;
    width: 235px; 
}

Lebih baik, tapi kami masih memiliki teks <h1> original menghalangi kami, tapi kami dapat memperbaikinya! Semua yang akan kita lakukan adalah mengatur nilai text-indent menjadi sesuatu yang konyol, seperti -9999px, menjauh dari halaman, sehingga tidak ada yang akan pernah melihatnya, kecuali robot mesin pencari.

1	#logo h1 {
2	text-indent: -9999px;
3	}

sekarang kita lihat, dan gambar logo kita dengan senang berada di tempat yang dulunya adalah teks <h1> kami. Tapi itu masih tampak sangat buruk, semuanya berdesakan di atas sana. Ketika kita ingin memindahkan item dari posisi semula pada halaman, kita bisa menggunakan semua properti padding dan margin. Kita akan mencoba semuanya untuk melihat perbedaannya

Pertama, mari kita coba menambahkan margin untuk tag h1. Kita dapat mengetahui seberapa besar dengan ruler tool di Photoshop.

1	#logo h1 {
2	text-indent: -9999px;
3	margin-top: 40px;
4	}

Oops! Kami berhasil memindahkan logo, tapi mengambil seluruh halaman dengannya! Mari kita mencoba menyesuaikan padding:

1	#logo h1 {
2	text-indent: -9999px;
3	padding-top: 40px;
4	}

Sekarang kita lihat, dan hal itu kembali ke tempat dimana ia dimulai! Hal ini karena properti margin menggerakkan seluruh elemen, tapi padding hanya memindahkan konten dari elemen, meninggalkan latar belakang apa adanya. Jadi, jika layar kita, katakanlah, lebar 19999px, kita akan melihat kami header <h1> terbuang bergerak turun 40px, tapi ini bukanlah apa yang kita mau.

Jadi, untuk memindahkan gambar latar belakang dari logo, kita perlu untuk memindahkan div di atasnya, karena seluruh div logo adalah "konten" dari div header. mari kita mencobanya:

#logo h1 {
    text-indent: -9999px;
}

#header {
    padding-top: 40px; 
}

Jauh lebih baik! Sekarang logo kami terlihat seperti di psd kita, di tempat yang tepat. Jika saja kita bisa memperbaiki tagline itu...

Langkah 24 - Tagline Mengambang

Jadi sekarang kita perlu menemukan cara untuk mengeluarkan tagline di samping logo. Masalahnya adalah, elemen html secara alami tersusun secara vertikal, mendorong satu sama lain ke atas dan ke bawah halaman.
Kami memiliki beberapa pilihan untuk memperbaiki ini, tapi saya akan menggunakan float, yang sedikit rumit, tapi secara serius berguna setelah Anda memahami mereka.

Oke, jadi apa itu float? Nah, itu rumit. Pada dasarnya, ketika Anda menyatakan elemen agar 'float', ia melekat ke sisi sebuah halaman atau elemen, dan juga membawanya keluar dari "aliran" normal dari halaman. Bingung? Biarkan saya menunjukkannya.

#logo {
    background: url(images/logo.png) no-repeat;
    height: 84px;
    width: 235px;
    float: left; 
}

Nah, seperti yang Anda lihat, kami berhasil mendapatkan tagline kami keluar ke samping, tapi itu membawa menu navigasi dengannya.
Saya memikirkan itu dengan cara ini: elemen yang normal (misalnya, sebuah div, atau sebuah header h1, atau sebuah gambar), bahkan jika itu benar-benar kecil, tak terlihat menempati semua ruang ke samping itu, seperti satu bar horisontal panjang besar.

Inilah sebabnya semua elemen lainnya tetap di bawahnya, bukannya tetap sampingnya. Ketika Anda float elemen, Anda mengambil semua ruang tambahan di sisinya, dan membatasi hanya dengan ruang yang langsung dibutuhkan, memungkinkan elemen lainnya untuk membungkus itu.
Sekarang bahwa Anda tahu bagaimana float bekerja, bagaimana kita bisa memperbaiki situasi kita sekarang? Pertama, kita harus mengisolasi tagline menjadi float sendiri, sehingga ia juga terletak di luar "aliran" normal halaman:

1	#tagline {
2	float: left;
3	}

Lihat di browser, dan melihat bahwa, kami membuatnya lebih buruk. Sekarang item menu membungkus di sekitar tagline kami! Apa yang kami butuhkan di sini adalah untuk mengembalikan aliran normal dokumen setelah elemen di-float. Ada beberapa cara untuk melakukan hal ini, tapi kami menggunakan metode yang paling tepat. Kembali ke file index.html Anda, dan tambahkan div baru di bawah div float kita. Bukannya menambahkan sebuah kelas atau id untuk div ini, kita akan memberikan gaya (ya itu gaya inline, tetapi hanya mungil kecil) clear: both.

<div id="header">
    <div id="logo">
    	<h1>Logo</h1>
    </div>
    <div id="tagline">
    	<h3>And a little tagline, too.</h3>
    </div>

<div style="clear:both"></div>

Simpan ulang file html Anda dan periksa di browser: Anda akan melihat tagline di samping logo, dengan menu di bawahnya. Sekarang yang harus kita lakukan adalah membentuk tagline, dan meletakkannya di mana sebenarnya. Mari kita mulai dengan menyalin gaya font dari Photoshop:

1	#tagline h3 {font-size: 30px; color: #e4dfdf; }

dan kemudian menambahkan sedikit padding di bagian atas dan kiri:

#tagline {
    float: left;
    padding-top: 20px;
    padding-left: 20px; 
}

lihat: sekarang kita berada di suatu tempat!

Langkah 25 - Bar Navigasi

sekarang kita perlu meluruskan menu navigasi dalam satu baris. Hal yang pertama kali, meskipun, kita akan men-style font sehingga kami dapat memberi jarak dengan sesuai. Ketika Anda men-style font dari daftar tag anchor, Anda perlu menentukan tidak hanya Anda merujuk ke item daftar, tetapi untuk anchor di dalamnya. Kita menetapkan unordered list tertentu kami, sehingga kita dapat menangani dengan yang lain secara terpisah. Kita juga perlu menyingkirkan underline dan poin-poin.

ul#menu {
    list-style: none; 
}

ul#menu li a {
    font-size: 30px;
    color: #676666;
    text-decoration: none; 
}

Bagus, sekarang, kita perlu menemukan cara untuk mendapatkan semua link kami berjajar. Bagaimana? Lebih Banyak Float! Kita akan mengatur item-daftar agar float kiri, sehingga masing-masing item menempel ke satu di sampingnya.

1	ul#menu li {
2	float: left;
3	}

Jika Anda melihat di browser, Anda akan melihat masalah yang sama yang kita miliki sebelumnya dengan item float: unsur-unsur lain yang membungkus di sekitarnya. Sama seperti sebelumnya, kita dapat menyisipkan div clearing tepat setelah unordered list.

1	<ul id="menu">
2	<li><a href="#">Home</a></li>
3	<li><a href="#">About</a></li>
4	<li><a href="#">Portfolio</a></li>
5	<li><a href="#">Contact</a></li>
6	</ul>
7	<div style="clear:both"></div>
8	</div><!--end header -->

Semua item daftar kita harus sejajar sekarang, kita hanya harus memberi jarak mereka dan memindahkan menu sedikit turun. Jadi pertama ukur jarak dari dasar logo kami ke atas teks menu, dan kita mendapatkan sekitar 55px.
item pertama adalah sekitar kiri 30px dari guide kami, jadi mari kita mengatur padding item daftar menjadi kiri 30px.

ul#menu {
    list-style: none;
    padding-top: 55px; 
}

ul#menu li {
    float: left;
    padding-left: 30px; 
}

Kita masih perlu menempatkan lebih banyak ruang antara setiap item, jika kita mengukur ruang dalam psd kami, itu adalah tentang 105px, tetapi karena kita sudah memiliki 30px padding di antara masing-masing, kita hanya perlu menambahkan padding 75px ke kanan setiap item.

ul#menu li {
    float: left;
    padding-left: 30px;
    padding-right: 75px; 
}

Dan akhirnya, kagumi pekerjaan kami:

Sempurna! Menu kami sudah seperti psd. Ke konten!

Langkah 26 - Konten

Area atas

Hal pertama yang kita lakukan di sini adalah mengatur semua font, sehingga kita dapat melihat jarak yang kita miliki untuk bekerja dengannya. cukup pasang info font dari Photoshop:

#content h2 {
    font-size: 36px;
    color: #015878; 
}

#content h3 {
    font-size: 24px;
    color: #444444;
}

#content h4 {
    font-size: 18px;
    color: #373737;
    font-weight: normal; 
}

#content p {
    font-size: 14px;
    color: #595858; 
}

#content small {
    font-size: 12px;
    color: #373737; 
}

#content a {
    color: #0f6c8d;
    font-weight: bold;
    text-decoration: none; 
}

Kita mendapatkan sesuatu seperti ini:

Pada titik ini Anda mungkin memperhatikan bahwa kita belum mengatur warna latar belakang untuk area konten. Hal ini karena... Saya lupa. Jadi mari kita lakukan sekarang, mari?

1	body {
2	font-family: Arial, Helvetica, sans-serif;
3	background: #ebe8e8;
4	}

Baiklah, sekarang kita siap untuk menambahkan beberapa padding untuk memberi jarak semuanya.
pertama, jarak dari bagian bawah menu nav ke atas judul h2 adalah 25px:

#content h2 {
    font-size: 36px;
    color: #015878;
    padding-top: 25px; 
}

Berikutnya, jarak dari dasar heading h2 menuju ke atas heading h3 juga sekitar 25px, jadi ulangi kode yang pada dasarnya sama:

#content h3 {
    font-size: 24px;
    color: #444444;
    padding-top: 20px; 
}

Sekarang, jarak dari bagian bawah heading h3 menuju ke atas paragraf pertama adalah tentang 45px, tetapi jika kita mengatur padding-top ke 40px, kami juga akan berakhir dengan 40px padding antara dua paragraf. Sejak paragraf yang hanya terpisah sekitar 20px, kita perlu membagi padding ke atas dan bawah: tambahkan 20px padding ke bawah heading h3, dan 20px padding ke atas paragraf.

#content h3 {
    font-size: 24px;
    color: #444444;
    padding-top: 20px;
    padding-bottom: 20px; 
}

#content p {
    font-size: 14px;
    color: #595858;
    padding-top: 20px; 
}

Periksa hasilnya:

Bagian Berita

Jarak ini sedikit berbeda di bagian berita, pertama-tama, kita perlu mendorong halaman sedikit ke bawah. Ada juga padding yang terlalu banyak di bawah heading h3, jadi kita akan menghapusnya sedikit.
Kita juga perlu mengurangi padding di atas paragraf, dan menambahkan beberapa padding di antara dua item berita.

#news {
    padding-top: 10px; 
}

#news h3 {
    padding-bottom: 10px; 
}

#news p {
    padding-top: 10px;
    padding-bottom: 14px; 
}

Yang terlihat seperti ini:

Di sana, sekarang semua yang perlu kita lakukan adalah meletakkan sidebar ke samping, dan kita sudah selesai konten utama.

Langkah 27 - Floating Sidebar

pertama, kita perlu mengatur lebar untuk bagian konten:

1	#content {
2	width: 510px;
3	}

Sekarang, untuk mendapatkan sidebar di luar sana, kita sekali lagi akan menggunakan float, mengatur semua area konten dan sidebar menjadi float kiri.

#content {
    width: 510px;
    float: left; 
}

#sidebar {
    float: left; 
}

Jika Anda melihat di browser, Anda akan melihat bahwa teks footer kami telah membungkus sidebar. Kita tahu bagaimana untuk menangani masalah ini sekarang: kita hanya perlu menambahkan sedikit markup div clearing kami:

<div id="contributors">
	<h3>Contributors</h3>
	<ul>
		<li><a href="#">John Smith, freelance writer</a></li>
		<li><a href="#">Jack McCoy, designer</a></li>
		<li><a href="#">Lenny Briscoe, editor</a></li>
		<li><a href="#">John Smith, martketing</a></li>
	</ul>
	<a href="#">Join Our Team</a> 
</div>
</div><!--end sidebar-->
<div style="clear:both"></div>

</div><!--end main container--> 

</div><!--end main-->

Baiklah, langkah berikutnya adalah untuk hanya menyalin gaya font dari psd kami untuk sidebar:

#sidebar h3 {
    font-size: 24px;
    color: #044055;
    font-weight: normal;
}

#sidebar ul li a {
    font-size: 14px;
    color: #393838; 
}

Ingat bahwa men-style font dari link di unordered list, kita perlu merujuk pada tag anchor, daripada item daftar itu sendiri.
Sekarang, jika kita melihat psd kami lagi, kita akan melihat bahwa teks untuk item daftar di widget "subscribe" sedikit lebih besar daripada di seluruh sidebar. Untuk memperbaiki ini, kita perlu menarget unordered list yang spesifik, jadi kita perlu menambahkan nilai id ke ul subscribe di markup:

1	<ul id="subscribe">
2	<li><a href="#">Subscribe via RSS</a></li>
3	<li><a href="#">Get Email Updates</a></li>
4	<li><a href="#">Follow us on Twitter</a></li>
5	</ul>

Kemudian kita dapat merujuk ke dalam css kami:

1	ul#subscribe li a {
2	font-size: 18px;
3	}

Sekarang kita perlu untuk men-style sidebar kami: menambahkan padding, margin, latar belakang dan border. Pertama mari kita menyingkirkan poin:

1	#sidebar ul {
2	list-style: none;
3	}

OK jadi ini masih di jalan yang salah, jadi mari kita perbaiki dengan menambahkan margin ke bagian atas dan kiri. Ketika mengukur di psd Anda, ukur sampai di mana border sidebar dimulai.

#sidebar {
    float: left;
    margin-left: 55px;
    margin-top: 35px;
}

Sekarang untuk latar belakang: di bawah properti margin-top, tambahkan properti latar belakang dan border:

1	background: #d4d6d3;
2	border: 1px solid #BEBDBD;

Selanjutnya kami akan menambahkan padding 15 px di semua sisi:

1	padding: 15px;

Dan kemudian menambahkan padding untuk gaya teks kita untuk memberi jarak menu kami:

#sidebar h3 {
    font-size: 24px;
    color: #044055;
    font-weight: normal;
    padding-bottom: 20px;
    padding-left: 15px;
}

#sidebar ul {
    list-style: none;
    padding-bottom: 25px;
}

#sidebar ul li a {
    font-size: 14px;
    color: #393838; 
}

ul#subscribe li {
    padding-bottom: 5px; 
}

ul#subscribe li a {
    font-size: 18px; 
}

Sidebar kami sudah terlihat hampir sempurna, kita hanya perlu menambahkan ikon dalam bagian subscribe, dan men-style tag anchor "join us".

Oke, jadi mari kita mendapatkan ikon-ikon tersebut bekerja. Menambahkan gambar ke unordered list dapat tampak membingungkan, tetapi jika Anda mengambil hal-hal langkah demi langkah, itu masuk akal. Tapi itu adalah sedikit membosankan.
Untuk memulai, kita akan harus membuat beberapa ruang untuk ikon. Kami akan menetapkan mereka sebagai gambar latar belakang, jadi jika kita menggunakan properti padding untuk memindahkan item daftar kami sedikit, gambar tidak akan terpengaruh. Lebar ikon adalah sekitar 26px, jadi kita akan menambahkan beberapa padding kiri dari item daftar:

1	ul#subscribe li {
2	padding-bottom: 5px;
3	padding-left: 30px;
4	}

Sekarang kita perlu cara untuk menargetkan setiap item daftar, jadi kita akan menambahkan beberapa id di markup:

1	<ul id="subscribe">
2	<li id="rss"><a href="#">Subscribe via RSS</a></li>
3	<li id="email"><a href="#">Get Email Updates</a></li>
4	<li id="twitter"><a href="#">Follow us on Twitter</a></li>
5	</ul>

Sekarang kita menambahkan gambar latar belakang untuk masing-masing item daftar:

li#rss {
    background: url(images/rss_icon.png) no-repeat; 
}

li#email {
    background: url(images/email_icon.png) no-repeat; 
}

li#twitter {
    background: url(images/twitter_icon.png) no-repeat; 
}

Pada titik ini terjadi kepada saya bahwa mungkin 18px agak terlalu besar untuk link di sini, jadi saya menguranginya menjadi kurang dramatis 16px, yang memungkinkan saya untuk menambahkan sedikit padding lebih mungil pada kiri tanpa peregangan sidebar.

1	ul#subscribe li {
2	padding-bottom: 5px;
3	padding-left: 35px;
4	}

Sidebar kami hampir selesai! Sekarang untuk men-style tombol kami:

Kita perlu menarget tombol, jadi mari kita menambahkan kelas ke markup: (kali ini saya menggunakan kelas bukannya id, yang merupakan praktek umum, seperti secara hipotetis kita bisa menambahkan lebih banyak tombol nantinya)

1	<a href="#" class="button">Join Our Team</a>

Jadi mari kita memperbaiki gaya teks dan menambahkan ke potongan latar belakang yang mengulang kami:

a.button {
    color: #393838;
    text-decoration: none;
    background: url(images/button_slice.jpg) repeat-x; 
}

seperti yang Anda lihat, gambar latar belakang kita di sana, tapi itu hanya muncul tepat di belakang teks, kita perlu untuk memberikan ruang untuk menyebar. Pertama, mari kita memberikan margin untuk menengahkan ke sidebar:

1	margin-left: 30px;

dan beberapa padding pada masing-masing sisi sehingga tombol kami merata:

1	padding: 13px 23px;

Ini adalah cara menulis singkat properti padding, dan sepenuhnya dapat diterima, dan bahkan disarankan, karena ini akan menghemat ruang. Dalam hal ini, menentukan padding 13px pada bagian atas DAN bawah, dan 23px dari padding pada kiri dan kanan.

tombol terlihat bagus, tapi ups! ia berpindah ke kanan 23px, jadi mari kita mengurangi margin sedikit untuk mengkompensasinya:

1	margin-left: 14px;

Sekarang mari kita hanya memberikan beberapa ruang di bawahnya dengan menambahkan padding untuk seluruh div sidebar:

#sidebar {
    float: left;
    margin-left: 55px;
    margin-top: 35px;
    background: #d4d6d3;
    border: 1px solid #BEBDBD;
    padding: 15px 15px 30px 15px;  
}

di sini properti singkatan lagi: ia berada dalam urutan ini: atas, kiri, bawah, kanan. Jadi di sini dikatakan 15px di semua sisi kecuali bagian bawah, yang harus 30px.

akhirnya, kita hanya perlu menambahkan border 1px itu ke kelas tombol:

1	border: 1px solid #c7c7c7;

Dan yang kita miliki, sebuah sidebar!

Langkah 28 - Footer

Terakhir tapi bukan yang terburuk, footer kecil sederhana kami. Kami akan mengatur footer dengan cara yang sama seperti kita mengatur header:
Menggunakan potongan yang mengulang dalam sebuah div yang tidak ditentukan lebarnya, dan kemudian menambahkan isi di dalamnya div fixed-width, di tengah.
Ini adalah di mana div .container kami berguna, karena kita tidak perlu menentukan 800px atau margin:auto saat ini, karena itu sudah dilakukan.
Mari kita mulai dengan potongan yang mengulang:

1	#footer {
2	background: url(images/footer_slice.jpg) repeat-x;
3	}

Itu sebuah awal, tapi itu benar-benar kecil. mari kita tambahkan beberapa padding, dan membuat teks putih:

#footer {
    background: url(images/footer_slice.jpg) repeat-x;
    padding-top: 20px;
    padding-bottom:60px;
    margin-top: 40px;
    color: #fff; 
}

dan secara keseluruhan:

Langkah 29 - Perubahan Kecil

Dalam sebuah browser, hal-hal terlihat sedikit berbeda dari di Photoshop, jadi kita mungkin ingin membuat beberapa perubahan kecil. Misalnya, saya ingin sedikit menambahkan padding di atas konten utama dan sidebar. Kami akan menambahkannya ke bagian bawah menu.

1	ul#menu {padding-bottom: 50px}

Saya juga memutuskan bahwa saya ingin menu agar menyelaraskan ke kiri, jadi saya akan menghapus padding-left. Sekarang item-item lebih dekat bersama-sama, karena kami memiliki padding 75px di kanan dan 30px di sebelah kiri, untuk total 105. Sekarang kita telah mengambil padding kiri, kita perlu menambahkannya ke kanan untuk membuat perbedaannnya:

ul#menu li {
    float: left;
    padding-right: 105px;
    width: 95px; 
}

Dan grand final:

Jadi berikutnya... tunggu? apa? kita selesai?
Kita sudah selesai!

Sekarang hanya beberapa perawatan untuk dikhawatirkan: Validasi.

Langkah 30 - Validasi

Sekarang validasi merupakan langkah penting dalam desain situs web, saya tidak akan pergi ke alasan tak berujung di sini karena artikel ini melakukannya untuk saya. Di sini saya hanya akan berjalan melalui proses:

Validasi HTML

Pergi ke Layanan Validasi w3.org, pilih validate by file upload, dan pilih file index.html Anda, dan klik "check."
Berikutnya... Saatnya kebenaran:

MERAH (Merah berarti buruk!)

Jangan khawatir, itu tidak begitu buruk, mari kita tinjau apa yang salah:
sepertinya saya hanya memiliki satu kesalahan:

Mereka menangkap saya menggunakan id tag yang sama dua kali, yang bisa menyebabkan kebingungan yang serius. Karena kami memiliki banyak gaya yang didefinisikan untuk ul dengan id "subscribe", kita hanya akan mengubah nama div: mari kita menyebutnya "feeds"
Sekarang kita perlu memeriksa bahwa kita belum mendefinisikan gaya untuk #subscribe, dan kami belum!
Agar lebih aman, mari kita reload halaman kami untuk memastikan tidak ada perubahan yang tak disengaja.
Terlihat baik! Sekarang mari kita jalankan validasi lagi:

Sukses! Halaman kami sekarang XHTML valid. Anda bahkan dapat men-download ikon jika Anda ingin menyombongkan diri.

Catatan: saya terkejut menemukan hanya satu kesalahan, jika Anda tidak begitu beruntung, baca info yang disarankan di w3 shcools, atau periksa artikel ini oleh Glen Stansberry.

Sepertinya kita sudah selesai! Ah, tapi jika saja semudah itu. Kita masih harus memvalidasi CSS kami!

Validasi CSS

Pergi ke The w3 CSS Validator dan pergi melalui proses yang sama dengan html, hanya saja kali ini pilih file style.css Anda. Memeriksa...

Kita Valid!

Namun, kami mendapatkan beberapa peringatan. Untuk tetap berada dalam rahmat yang baik dari gereja, kita tentu harus memperhatikan mereka:

Itu hanya beberapa masalah kecil: kita harus menyatakan lebar untuk semua item float kita. Sekali lagi, saran ini adalah opsional, tapi itu yang terbaik untuk mendengarkan kritik yang membangun.
Membersihkan: tagline kami, item menu unordered list, dan sidebar semua harus memiliki lebar yang dinyatakan. Kami juga ingin melakukan hal ini tanpa mengubah tampilan halaman.
Pertama, tagline. Kita bisa hanya membuat perkiraan kasar pada yang satu ini, lebar 400px.

#tagline {
    float: left;
    padding-top: 20px;
    padding-left: 20px;
    width: 400px; 
}

Dan reload: tidak ada perubahan, sempurna. Berikutnya, menu item daftar. ini adalah sedikit rumit: Lebar halaman kami adalah 800px, jadi itu adalah lebar total maksimum dari semua item daftar bersama-sama. Jika kita membagi dengan empat item daftar, dan mengatur lebar 200px, item-item tercampur dan terdaftar secara vertikal. Ini karena kami memiliki padding pada kedua sisi dari setiap item daftar: 30px di sebelah kiri dan 75px di sebelah kanan. Kurangi 105 itu dari 200, dan lebar sisanya 95px.

ul#menu li {
    float: left;
    padding-left: 30px;
    padding-right: 75px;
    width: 95px; 
}

Ide yang sama dengan sidebar: mari kita pertama kita lihat lebar area konten: 510px. Sisanya pada halaman 800px kami adalah 290px, tapi pertama-tama kita perlu mengurangi semua padding pada kiri dan kanan: 290-30=260. Berikutnya kurangi margin kiri, dan kami mendapatkan 205px. Satu masalah terakhir: border 1px kita, jadi mari kita kurangi 2px lagi, dan mengatur lebar sidebar menjadi 203px. Periksa lagi, tidak ada perubahan.

Bagus sekali, jika kita memvalidasi lagi, tidak ada kesalahan, bahkan peringatan!
Halaman web kami, sejauh standar w3c yang bersangkutan, telah sempurna.

Kesimpulan

Jadi Anda sudah memilikinya, salah satu yang sangat sederhana, situs web yang dikode dengan baik. Sepanjang tutorial ini, harapan saya adalah bahwa Anda mengambil beberapa keterampilan yang berharga untuk diterapkan ke desain Anda sendiri, dan sekarang siap untuk memulai koding situs Anda sendiri.

Ikuti kami di Twitter, atau berlangganan Nettuts+ RSS Feed untuk tuts dan artikel pengembangan web harian.