Membangun Sebuah Situs Portofolio Ramping dari Awal

Indonesian (Bahasa Indonesia) translation by Agus (you can also view the original English article)

Tidak ada yang seperti membangun seluruh situs untuk menunjukkan kepada Anda gambaran umum yang bagus tentang cara kerja tata letak CSS.¬† Selama di PSDTUTS kami mendapat¬†tutorial where you design up a sleek, high end web design. Dalam tutorial ini kita akan mengambil file PSD dan membangunnya dengan beberapa HTML bersih dan CSS yang bagus.

Demo dan Kode Sumber

Langkah 1

Jadi inilah desain yang akan kita bangun. Seperti disebutkan, Anda dapat mengikuti tutorial di¬†PSDTUTS to build this design from scratch. Dalam tutorial ini kita hanya akan membangun homepage ini, tetapi menggunakan itu sebagai basis Anda akan dapat membangun halaman interior mengikuti tata letak yang sama.

Langkah 2

Hal pertama yang harus dilakukan adalah memutuskan bagaimana kita akan membangun struktur kita. Proses ini semakin mudah seiring waktu ketika Anda belajar bagaimana tata letak CSS dapat berfungsi. Untuk desain ini saya pikir kita bisa pergi dengan build yang sangat sederhana yang menggunakan sedikit posisi absolut dan gambar latar belakang yang besar.

Apa itu Pemosisian Mutlak?
Bila Anda menempatkan elemen HTML pada halaman (misalnya<div>,<p>dan sebagainya) memiliki posisi alami yang ditentukan oleh apa yang ada sebelumnya. Jadi misalnya jika Anda memasukkan <p></p>¬†ke bawah dengan beberapa teks di dalamnya, dan kemudian Anda menempatkan yang lain <p></p>¬†maka secara alami akan muncul tepat di bawah¬†yang pertama <p>. Itu hanya akan mengalir relatif terhadap elemen terakhir.

Pemosisian Absolute berbeda karena Anda menentukan penempatan yang tepat untuk suatu objek dan mengambilnya dari aliran reguler elemen. Jadi jika Anda memiliki <p></p>pertama Anda seperti sebelumnya, tetapi untuk selanjutnya <p></p> Anda memberikan posisi mutlak kiri:500px; atas: 500px; Maka akan muncul tepat di lokasi itu terlepas dari sebelumnya.

Anda menetapkan posisi absolut dari sesuatu seperti ini:



.className {

  position:absolute;
    top:0px;
    left:0px;

}

Kelemahan untuk Pemosisian Mutlak

Masalah utama dengan menggunakan posisi mutlak adalah bahwa elemen Anda tidak benar-benar berhubungan dengan satu sama lain. Jadi misalnya jika Anda memiliki satu blok teks di dekat bagian atas halaman Anda, dan blok teks lain sedikit lebih bawah, mungkin terlihat bagus ketika setiap blok teks pendek. Tetapi jika blok atas memiliki esai yang besar di dalamnya, maka alih-alih mendorong blok teks berikutnya ke bawah, itu hanya akan melewati bagian atas. Ini karena Anda mengambil elemen dari aliran alami halaman.

Jadi Pemosisian Mutlak hanya benar-benar berguna untuk objek yang Anda tahu akan selalu menjadi ukuran tertentu, dan yang tidak benar-benar perlu berinteraksi dengan elemen lain.

Mengapa hal ini berguna untuk kita hari ini
Hal yang baik tentang Pemosisian Absolut, adalah bahwa itu benar-benar sangat mudah! Anda memberi tahu browser tempat menaruh sesuatu dan di situlah muncul! Untuk melengkapi itu, ada masalah kompatibilitas browser yang jauh lebih sedikit ketika Anda memposisikan semuanya secara mutlak. Setelah semua 100px adalah 100px apakah Anda di Firefox, Internet Explorer, atau Safari.

SOOO tata letak kami
Jadi cara kita akan membuat situs web kami adalah:

Miliki gambar latar belakang yang besar
Letakkan logo, menu, dan panel heading secara tepat di tempat yang seharusnya.
Minta semua konten kami muncul di tag <div> biasa, tetapi berikan begitu banyak padding sehingga konten didorong ke bawah sampai ke tempat yang dimaksudkan untuk menjadi
Minta footer kami duduk di bawahnya¬†

Jika itu tidak terlalu masuk akal, jangan khawatir karena Anda akan melihat situs terbentuk!¬†

Langkah 3

Sekarang dalam hal gambar latar belakang, kita butuh dua. Satu akan menjadi raksasa, dan faktanya setelah saya menyimpannya sebagai JPG, ukurannya sekitar 56kb. Dulu ada waktu di mana itu akan menjadi terlalu besar, tetapi hari-hari ini bukan masalah besar.¬†

Jadi itulah area utama, maka kita membutuhkan gambar latar belakang kedua yang akan menjadi irisan tipis. Potongan ini akan berulang-ulang ke kanan sehingga ketika jendela browser diseret terbuka ubin keluar.

(Perhatikan logo tidak seharusnya ditampilkan di bawah ini di gambar latar belakang, itu hanya beberapa screenshotting yang buruk, maaf!)¬†

Anda dapat melihat dua gambar yang saya buat di sini dan di sini.

Langkah 4

OK jadi sekarang mari kita mulai HTML kita. Pertama kami memberikan beberapa dasar:



<!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>PSD vs NET</title>
	<link rel="stylesheet" href="step1_style.css" type="text/css" media="screen" />
</head>

<body>
<div id="outside_container">
	<div id="container">
	

		<!-- The Main Area -->


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

	<img src="images/footer_logo.jpg" />
    
    <span id="footer_text">
        Made for a PSDTUTS and NETTUTS tutorial by Collis!  
        See the <a href="http://psdtuts.com">Photoshop Tutorial</a>, 
        see the <a href="http://nettuts.com">Web Tutorial</a>
    </span>
    
</div>    
</body>
</html>

Selalu yang terbaik untuk bekerja dari luar dengan tata letak kami. Jadi yang saya lakukan di sini adalah menempatkan tiga ¬†utama. Dua yang pertama adalah¬†¬†the¬†outside_container¬†/¬†container¬†dan yang lainnya adalah footer. Ini membutuhkan sedikit penjelasan::

Saya telah membuat the¬†outside_container¬†dan¬†container¬†karena saya membutuhkan gambar latar belakang ganda. Itu adalah saya membutuhkan gambar latar belakang, dan kemudian di atas itu saya membutuhkan gambar latar belakang yang besar itu.¬† Jadi di the¬†outside_container¬†saya akan menempatkan latar belakang ubin, lalu pada the¬†container<div>¬†yang akan muncul di atas wadah luar, saya akan memiliki latar belakang utama yang besar..
Footer harus berada di luar wadah karena jika jendela browser direntangkan memanjang, footer harus menyala dan menyala. Karena memiliki latar belakang sendiri, itu tidak bisa di kontainer - jika itu dan Anda membentang di beberapa titik Anda akan melihat latar belakang kontainer dan bukan footer!¬†

Juga Anda akan melihat saya menambahkan beberapa konten di dalam footer, itu hanya logo mini, dan teks. Saya telah membungkus teks dalam tag <span>¬† sehingga saya dapat memanipulasinya. Tidak ada alasan untuk memberikan tag <img>¬†id atau kelas, karena kita bisa mengatakan #footer img dan karena itu satu-satunya gambar di sana, kita bisa menyebutnya seperti itu. Ini membuat HTML kami sedikit lebih sederhana.sederhana.

Langkah 5

Sekarang CSS untuk kode kami sejauh ini:



body {
	margin:0px; padding:0px;
	background-color:#11090a;
	font-family:Arial, Helvetica, sans-serif;
}
#outside_container {
	background:url(images/background_slice.jpg) repeat-x #000000;
}
#container {
	background:url(images/background_main.jpg) no-repeat;
	min-height:800px;
}
#footer {
	border-top:1px solid #3f2324;
	padding:30px 50px 80px 50px;
}

Jadi akan melalui satu per satu waktu:

Pertama kita mendefinisikan kembali¬†the¬†body¬†tag. Ini hampir selalu hal pertama yang saya lakukan. Kami menyingkirkan semua margin dan padding default, mengatur warna latar belakang dan font-family untuk halaman. Perhatikan bahwa warna latar belakang sebenarnya adalah warna latar belakang footer. Seperti yang saya sebutkan sebelumnya ini adalah bahwa jika Anda meregangkan jendela browser secara vertikal Anda akan terus melihat footer.
Selanjutnya kita memiliki tag outside_container. Saya telah memberikannya latar belakang slice, itu akan mengulang hanya sepanjang sumbu x (yaitu dari kiri ke kanan) dan di mana pun tidak ada gambar latar belakang kita akan melihat hitam lurus (# 000000).¬† Jadi pada dasarnya karena halaman semakin panjang ubin tidak akan terus berjalan karena kami katakan hanya mengulang kiri-kanan, sebaliknya kita akan mendapatkan latar belakang hitam. Ini sempurna karena gambar ubin kami memudar menjadi hitam!
Selanjutnya kita memiliki the¬†container.¬†Di sini kita memiliki gambar latar belakang raksasa yang ditetapkan untuk tidak mengulangi - sehingga hanya muncul sekali. Perhatikan bahwa kami tidak menentukan warna latar belakang, jika kami memilikinya akan menutupi bagian luar_container kami. Itu karena tag <div>¬†ini ada di dalam tag sebelumnya, dan secara otomatis akan direntangkan untuk mengisinya sepenuhnya.. Jadi gambar latar belakang kami muncul di atas dan kemudian di luar area itu Anda dapat melihat latar belakang wadah luar yang ditampilkan.
Saya juga telah memberikan wadah ketinggian minimum, ini hanya agar ketika kita melihat halaman HTML pada titik ini Anda dapat melihat kira-kira bagaimana itu akan terlihat ketika ada konten. Nanti konten kami akan menghasilkan tinggi minimum pula.
Footer pada dasarnya hanyalah garis perbatasan tunggal dan beberapa padding. Tidak perlu memberikan warna latar belakang, karena kami mengaturnya di <body> sebelumnya. Ingat dengan definisi padding seperti ini:¬†padding: top right bottom left ¬†(searah jarum jam!)

Di sinilah kita sampai sekarang ...

Lihat Situs Sejauh Ini

Langkah 6

Selanjutnya kita akan menyelesaikan footer itu dengan menambahkan beberapa gaya ekstra seperti ini:¬†



/*
	Footer
*/
#footer {
	border-top:1px solid #3f2324;
	padding:30px 50px 80px 50px;
	color:#674f5d;
	font-size:9px;
	line-height:14px;
}
#footer img {
	float:left;
	margin-right:10px;
}
#footer span {
	display:block;
	float:left;
	width:250px;
}
#footer a {
	color:#9e8292;
	text-decoration:none;
}
#footer a:hover { color:#ffffff; }

Jadi di sini saya telah menambahkan beberapa bit ke kelas #footer kami dan membuat beberapa kelas lagi. Mari kita bahas satu per satu:

Pertama-tama bit antara / * dan * / adalah komentar CSS. Sangat menyenangkan memiliki komentar di file CSS Anda karena file ini benar-benar memecahnya dan membantu membuat semuanya tetap jelas.¬† Sebenarnya pada proyek yang lebih besar saya menemukan file CSS bisa menjadi sangat tidak terkendali jika Anda tidak berhati-hati. Jadi, sangat baik untuk mencoba masuk ke kebiasaan baik lebih awal: beri nama pemilih Anda dengan baik, tambahkan komentar, jauhkan hal-hal bersama-sama, hancurkan beberapa file CSS untuk proyek yang lebih besar dan seterusnya.
Di #footer saya telah menambahkan warna font, ukuran font dan tinggi garis ke definisi kami sebelumnya. Ketinggian baris adalah atribut teks yang sangat berguna karena membantu Anda menghemat teks. Tanpa teks garis-ketinggian yang baik dapat terlihat banyak dan sulit dibaca. Terlalu tinggi garis dan teks akan begitu tipis sehingga terlihat aneh. Jadi Anda mungkin ingin bereksperimen untuk menemukan ketinggian yang tepat untuk font dan ukuran yang berbeda. Di sini 14px sepertinya cocok.¬†
Berikutnya saya telah mengatur rentang #footer img dan #footer span untuk kedua float: left. Karena keduanya diatur untuk mengapung ke kiri, mereka berakhir di kolom di samping satu sama lain. Saya akan berbicara lebih banyak tentang mengambang dan kolom nanti di tutorial ini.
Terakhir, kami memberi tahu browser apa yang harus dilakukan dengan tag <a>¬†(yaitu tautan) yang muncul di footer. Yaitu bahwa mereka seharusnya tidak digarisbawahi, dan harus berubah warna ketika Anda membawa mouse..

Jadi dengan penambahan footer inilah di mana hingga:

Lihat Situs Sejauh Ini

Langkah 7

Sekarang dengan footer keluar dari jalan, mari menambahkan lebih banyak konten ke halaman di dalam area kontainer utama. Pertama kita membutuhkan dua gambar baru yang kita buat dari file PSD kami:

Perhatikan bahwa saya telah menggunakan gambar untuk blok teks besar. Secara umum, yang terbaik adalah menggunakan teks untuk hal-hal ini karena membuat halaman lebih mudah ditelusuri dan merupakan praktik yang baik. Tapi itu akan jauh lebih sulit untuk dilakukan karena kami harus menggunakan sedikit Flash dan SIFr untuk mencapai efek itu. Jadi karena ini adalah tutorial yang cukup sederhana, saya memilih untuk menggunakan gambar besar :-)

Berikut ini cuplikan kode HTML kami - hanya bit peti:

1
2
3	<div id="outside_container">
4	<div id="container">
5
6	<a href="#"><img src="images/logo.jpg" id="logo" /></a>
7
8	<ul id="menu">
9	<li><a href="#">Retouching</a></li>
10	<li><a href="#">Digital Effects</a></li>
11	<li><a href="#">Web Work</a></li>
12	</ul>
13
14	<ul id="right_menu">
15	<li><a href="#">About</a></li>
16	<li><a href="#">Contact</a></li>
17	</ul>
18
19	<img src="images/panel_home.jpg" id="panel" />
20
21	<div id="content">
22
23	<!-- THE CONTENT GOES IN HERE -->
24
25	</div>
26
27	</div>
28	</div>

Jadi di dalam area penampung, kami telah menambahkan lima hal:

Our logo: Ini tertaut, jadi mengekliknya akan membawa Anda ke beranda, dan memiliki id = "logo"¬†
Main menu: Ini hanyalah daftar yang tidak diurutkan dengan id = "menu"
The right hand side menu: Ini sama dengan menu lainnya, hanya berbeda id = "right_menu"¬†
Big text panel image: Ini adalah teks judul utama kami yang disimpan sebagai gambar, id = "panel"
Content Div: Dan ini adalah tempat kita akan menempatkan semua konten halaman kita nanti. Saya telah membiarkannya kosong sekarang kecuali untuk komentar HTML.¬†

Jadi sebelum kami mulai menata tampilannya, ada baiknya untuk melihat bagaimana tampilan halaman dengan semua yang dibuang seperti ini:

Seperti yang Anda lihat, kami harus melakukan beberapa perubahan serius agar semuanya berjalan lancar. Seperti yang Anda ingat, kita akan menggunakan Pemosisian Absolut untuk melakukan ini dengan cepat dan mudah.

Langkah 8

Berikut adalah CSS yang kami tambahkan untuk membuat elemen kami mulai sesuai dengan tempatnya:



#container {
	background:url(images/background_main.jpg) no-repeat;
	min-height:800px;
	width:1000px;
	position:relative;
}


/*
	Logo / Menu / Panel Positioning
*/

#logo { position:absolute; top:58px; left:51px; }

#panel { position:absolute; top:165px; left:51px; }

ul#menu { 
	margin:0px;	padding:0px;
	position:absolute; top:145px; left:75px;
}
ul#right_menu { 
	margin:0px;	padding:0px;
	position:absolute; top:145px; right:75px;	
}

Jadi mari kita bahas¬†lagi setiap bagian demi bagian:

Pertama-tama, Anda akan melihat sedikit kode lama kami -¬†¬†the¬†container. Saya telah menunjukkan ini karena saya telah menambahkan dua baris lagi sekarang. Sekarang memiliki¬†width:1000px¬†dan¬†position:relative. Ini penting karena ketika Anda mengatur posisi menjadi relatif, apa pun yang benar-benar diposisikan di dalam, dilakukan relative terhadap tag penampung tersebut. Jadi ini berarti saya dapat memposisikan hal-hal di dalam kotak ini, menggunakan fakta yang saya tahu itu lebar 1000px. Yaitu saya akan menggunakan itu untuk right_menu.
Berikutnya karena ini adalah rangkaian CSS baru, saya telah memisahnya dengan komentar¬†
Dengan logo dan panel saya telah memberikan posisi absolut pada halaman. Bagaimana saya tahu nomor apa yang digunakan? Sederhana kembali ke dokumen Photoshop asli dan ukur di mana mereka seharusnya! Anda dapat melihat definisi kelas yang sangat sederhana, itulah sebabnya penentuan posisi absolut sangat mudah.
Selanjutnya dengan dua menu, ini juga benar-benar diposisikan, tetapi di sini saya juga memberi mereka margin: 0px; padding: 0px; definisi untuk memastikan kita menghapus semua margin dan padding default yang memiliki daftar tidak berurutan.
Selanjutnya perhatikan bahwa pada right_menu ketika saya telah menentukan posisi absolut untuk menjadi¬†right: 75px. Ini berarti akan muncul 75px dari sisi kanan wadahnya.¬† Biasanya itu akan menjadi jendela browser, tetapi karena ingat sebelumnya saya mengatur¬†the¬†container¬†untuk memiliki¬†position:relative¬†itu berarti akan 75px jauh dari sisi kanan <div id="container"></div>
Sekarang Anda mungkin berpikir, apa gunanya, tidak bisakah saya memosisikan hal-hal hanya dengan menggunakan kiri saja? Anda bisa, tetapi dengan menu kami, jika Anda menambahkan item menu tambahan, Anda harus memosisikannya lagi dan lagi sehingga masih 75px dari sisi kanan. Sedangkan dengan menggunakan kanan item menu ekstra mengalir ke kiri ketika Anda menambahkannya. Cobalah dan lihat!

Jadi di sinilah di mana kita berada di:

Langkah 9

Seperti yang Anda lihat pada gambar sebelumnya, logo dan elemen heading sekarang terlihat seperti berada pada posisi yang tepat. Tapi menu tampak agak aneh. Sebelum kita gaya mereka, kata cepat pada logo / gambar panel. Anda mungkin bertanya-tanya, apakah keduanya gambar, mengapa tidak menjadikannya bagian dari gambar latar belakang?

Jawabannya adalah logo yang ingin kita buat dapat ditautkan, sehingga dengan mengkliknya akan membawa Anda kembali ke homepage (menjadikan situs lebih bermanfaat), dan panel teks utama, yang mungkin akan berubah dari halaman ke halaman. Jadi dengan memiliki satu gambar, kita dapat memiliki banyak halaman HTML menggunakan stylesheet CSS yang sama tetapi cukup memposisikan gambar yang berbeda di sana dengan teks yang berbeda.¬†

Sekarang mari kita gabungkan dua menu dan buat halaman kita benar-benar mulai terbentuk. Untuk melakukan itu kita membutuhkan CSS berikut:



ul#menu { 
	margin:0px;	padding:0px;
	position:absolute; top:138px; left:75px;
}
ul#right_menu { 
	margin:0px;	padding:0px;
	position:absolute; top:138px; right:110px;	
}
ul#menu li, ul#right_menu li {
	margin:0px;	padding:0px;
	list-style:none;
	margin-right:10px;
	font-size:9px;
	text-transform:uppercase;
	display:inline;
}
ul#menu li a, ul#right_menu li a {
	text-decoration:none;
	color:#bd92b2;
}
ul#menu li a:hover, ul#right_menu li a:hover {
	text-decoration:none;
	color:#ffffff;
}

Dua bit pertama dari kode ini adalah sama seperti sebelumnya (meskipun saya sedikit menyesuaikan posisinya agar terlihat tepat setelah styling). Perhatikan bahwa kedua definisi ini terpisah karena mereka memiliki posisi yang berbeda, tetapi setelah itu kami menggabungkan keduanya menjadi definisi kelas yang sama karena item menu itu sendiri harus terlihat sama. Format untuk mendefinisikan dua kelas bersama adalah:

.myClass, .myClass2 {...}

Hal ini sangat berbeda dari definisi ini:

.myClass .myClass2 {...}

Karena definisi kedua mengatakan, Semua elemen dengan class = "myClass2" dalam sebuah elemen dengan class = "myClass".

Namun demikian, kembali ke gaya kami, mari kita bahas beberapa poin penting:

Kami telah mengatur elemen <ul>sendiri menjadi 0 margin dan padding, dan posisi absolut, seperti yang telah kita diskusikan sebelumnya
Kemudian kami telah mengatakan untuk semua elemen <li>di dalam <ul>, kami ingin mereka tidak memiliki gaya daftar (yaitu tidak ada poin-poin), kami ingin mereka menjadi 9px, semua huruf besar, dan yang penting mereka harus display:inline. Inline display berarti alih-alih blok yang muncul satu di bawah yang berikutnya, ini akan muncul di samping satu sama lain!
Definisi berikutnya mengatakan bahwa untuk <a>¬†tag tautan yang muncul di dalam tag <li>yang ada di dalam <ul id = "menu"> atau <ul id="righ_menu">, mereka harus berwarna tertentu dan tidak memiliki garis bawah .

Dan dengan itu, halaman kami sekarang tampak cukup bagus!

Lihat Situs Sejauh Ini

Langkah 10

Selanjutnya saatnya untuk menambahkan beberapa konten! Pertama mari kita tambahkan beberapa teks atau dummy, siapkan agar kita dapat membuat kolom. Berikut adalah HTML-nya:



<div id="outside_container">
	<div id="container">
	
		<a href="#"><img src="images/logo.jpg" id="logo" /></a>
        
        <ul id="menu">
        	<li><a href="#">Retouching</a></li>
        	<li><a href="#">Digital Effects</a></li>
        	<li><a href="#">Web Work</a></li>                    
		</ul>
        
        <ul id="right_menu">
        	<li><a href="#">About</a></li>
        	<li><a href="#">Contact</a></li>
        </ul>
        
        <img src="images/panel_home.jpg" id="panel" />

		<div id="content">
        
        	<div class="column1">
            
            	<h2>a sleek design</h2>
                
                <p>Dummy Text: This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
				<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
                <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
				<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>

            </div>
            <div class="column2">
            	
                <h2>tutorials</h2>
            
                <p>Dummy Text: This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
				<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
				<p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
				<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>


            </div>
            <div class="column3">
            
            	<h2>recent work</h2>

                <p>Dummy Text: This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
				<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
				<p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
				<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>

            
            </div>

            
        </div>

	</div>
</div>

OK jadi dalam potongan ini, Anda dapat melihat saya telah menambahkan 3 baru<div>di dalam wilayah konten. Masing-masing memiliki elemen judul <h2> dan mereka beberapa teks. Mereka memiliki kelas nama column1, column2 dan column3. Alasan saya telah menambahkan semua teks tambahan adalah untuk menunjukkan sesuatu tentang membuat kolom.

Pertama mari kita tambahkan beberapa CSS untuk membuat mereka tampak seperti kolom:




/*
	Content
*/

#content {
	padding-top:435px;
	padding-left:85px;
	width:815px;
	color:#674f5d;
	font-size:13px;
	line-height:20px;
}
.column1 { float:left; width:230px; margin-right:30px; }
.column2 { float:left; width:230px; margin-right:30px; }
.column3 { float:left; width:270px; }

Seperti biasa saya telah memisahkan sedikit CSS kami dengan komentar. Lalu saya telah menetapkan beberapa gaya untuk #content. Perhatikan berapa banyak padding-top yang ada ... 435px! Ini untuk memberi ruang bagi semua elemen yang benar-benar terposisi tadi. Tidak seperti elemen-elemen ini, area konten ini berada dalam aliran normal halaman.

Itu harus dalam aliran reguler karena ketika Anda menambahkan lebih banyak konten ke sana, itu harus mendorong footer ke bawah. Jika ini benar-benar diposisikan, itu hanya akan melewati bagian atas footer.

Sekarang kelas tiga kolom, perhatikan mereka masing-masing diatur dengan lebar dan dengan float: left. Ini memberitahu mereka bahwa mereka harus melayang ke kiri halaman selaras di sebelah elemen mengambang kiri lainnya. Saya telah memberikan dua margin kanan pertama sehingga mereka tidak terjebak satu sama lain.

Mengambang elemen membuatnya melayang ke kiri atau kanan, dan memberi tahu semua hal lain untuk membungkusnya. Ketika elemen lain juga mengambang, mereka membentuk kolom. Umumnya setiap kali Anda melihat tata letak kolom, itu menggunakan pelampung.¬†

Sayangnya ada satu masalah aneh dengan pelampung. Yaitu mereka memiliki masalah dengan wadah mereka. Alih-alih mendorong elemen berikutnya ke bawah, mereka hanya melayang di atas. Cara untuk mengatasi masalah ini adalah memiliki elemen yang muncul setelah mereka yang memiliki properti yang jelas: keduanya.

Properti Clear mengatakan untuk berhenti membungkus barang di sekitar <div>¬†yang mengambang. Agak sulit untuk dijelaskan, jadi mari kita lihat apa yang terjadi dengan dan tanpa kliring.membersihkan.

Tanpa Kliring
Berikut adalah bagaimana tata letak terlihat seperti:

Lihat bagaimana kolom telah melayang di atas footer dan footer itu sendiri sudah mulai membungkus di sekitar mereka. Hal itu tidak tepat!!

Dengan Kliring
Solusinya cukup sederhana, kita perlu menambahkan<div>setelah tiga kolom seperti ini:



<div id="content">
        
    <div class="column1">
    
        <h2>a sleek design</h2>
        
        <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
        <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
        <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
        <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>

    </div>
    <div class="column2">
        
        <h2>tutorials</h2>
    
        <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
        <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
        <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
        <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>


    </div>
    <div class="column3">
    
        <h2>recent work</h2>

        <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
        <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
        <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
        <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>

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

Lihat <div style="clear:both"></div¬†di bagian bawah? Ini hanya<div> kosong yang mengatakan untuk membersihkan tiga kolom. Dan itu memperbaiki masalah kita,

Lihat Situs Di Sini.

Beberapa Kata Terakhir di Floats & Clearing Them
Anda mungkin bertanya-tanya mengapa saya tidak menempatkan "jelas: keduanya" kedalam definisi <div id="footer">, tapi sayangnya itu tidak berhasil karena latar belakang kami menggunakan... di sini adalah screenshot:

Rupanya ada solusi yang tidak melibatkan memasukkan tag<div>yang tidak berguna, dan Anda dapat membaca tentang hal itu di QuirksMode. Secara pribadi saya telah menggunakan metode ini untuk sementara, dan itu bekerja dengan baik dan konsisten sehingga terus melakukannya.

Langkah 11

OK, hampir sampai sekarang !! Tata letak utama semua disortir, yang harus kita lakukan adalah menambahkan dan mengatur gaya konten kita. Berikut HTML untuk itu:



	<div id="content">
        
        	<div class="column1">
            
            	<h2>a sleek design</h2>
                
                <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
				<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>

            </div>
            <div class="column2">
            	
                <h2>tutorials</h2>
                
                <p>Psdtuts and nettuts provide tutorials on the following topics (sorta):</p>
                	
                <img src="images/adobe.jpg" />

            </div>
            <div class="column3">
            
            	<h2>recent work</h2>
            
            	<ul class="work">
                	<li>
                    	<a href="">
                        	<img src="images/work_1.jpg" />
                            <h4>Working Within Limitations to Achieve Great Designs</h4>
							Sean Hodge
                        </a>
                    </li>
                    <li>
                    	<a href="">
                        	<img src="images/work_2.jpg" />
                            <h4>Create a Slick Tabbed Content Area using jQuery</h4>
							Collis Ta‚Äôeed
                        </a>
                    </li>
                    <li>
                    	<a href="">
                        	<img src="images/work_3.jpg" />
                            <h4>Creating a PayPal Payment Form</h4>
							Collis Ta‚Äôeed
                        </a>
                    </li>
                </ul>
            	
            </div>
            
            <div style="clear:both"></div>
            
        </div>

Ini pada dasarnya struktur yang sama seperti sebelumnya kecuali di kolom ketiga saya telah membuat elemen <ul>¬†untuk memuat karya terbaru.. Perhatikan bahwa dalam elemen <ul>¬†ini saya telah mengaturnya sehingga ada tautan <a>¬†tag yang menutup gambar, judul dan teks. Jadi semuanya akan menjadi link blok. Itu berarti jika Anda menggulirkan gambar, teks yang terkait dengannya akan berubah warna.

Jadi, inilah CSS untuk konten kami:



#content h2 {
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#dbaa70;
	margin:0px 0px 20px 0px;
	font-weight:normal;
}

ul.work {
	margin:0px; padding:0px;
}
ul.work li {
	list-style:none;
	margin:0px; padding:0px;
	clear:both;
}
ul.work li a {
	color:#e0b882;
	display:block;
	padding:5px 10px 5px 10px;
	text-decoration:none;
	font-size:10px;
}
ul.work li a img {
	float:left;
	margin-right:20px;
	margin-bottom:20px;	
}
ul.work li a h4 {
	color:#674f5d;
	margin:0px;
	font-weight:normal;
	font-size:13px;
}
ul.work li a:hover, ul.work li a:hover h4 { color:#ffffff; }

Mari kita bahas kelas satu per satu:

Pertama kita mendefinisikan ulang apa yang <h2>¬†muncul di dalam <div id="content">¬†seperti. Kita bisa saja mendefinisi ulang semua <h2>, tetapi Anda tidak pernah tahu kapan kita mungkin memiliki <h2>¬†yang muncul di tempat lain, jadi itu praktik yang baik untuk menjadi cukup spesifik. Semua yang saya lakukan di sini adalah mengubah warna, font, berat dan margin agar terlihat seperti yang saya butuhkan.¬†
Kemudian kita memiliki definisi <ul class="work">. Definisi <ul> hanya menghilangkan margin dan padding.
Kemudian definisi <li> mengatakan seharusnya tidak ada gaya daftar (yaitu tidak ada titik-titik peluru). Ia juga mengatakan jelas: keduanya. Seperti yang Anda ingat dari langkah terakhir ini adalah untuk menghapus unsur-unsur yang mengambang. Dan jika Anda memindai sedikit Anda akan melihat bahwa definisi img nanti memiliki pelampung. Jadi di sini kami mengatakan setiap elemen daftar baru <li>¬†harus jelas dan tidak membungkus bagian-bagian yang terakhir.
Selanjutnya di bagian <a>, kami mengatakan bahwa tag <a>¬† akan ditampilkan sebagai blok. Artinya kami ingin tautan kami menjadi blok besar yang membungkus gambar dan teks. Kami memberikannya beberapa padding untuk menyempurnakan blok dan mengatur beberapa gaya untuk bagaimana teks seharusnya muncul.¬†
Selanjutnya kita mengatakan bahwa <img> di dalam <a>¬†kita harus melayang ke kiri dengan sedikit margin.
Terakhir kita mendefinisikan warna teks dalam bit <h4>.

Dan hanya itu! Kita sudah selesai!

Selesai!

Dan dengan itu situs beranda selesai. Anda dapat mengunduh ZIP dari file situs untuk melihat-lihat - ini berisi HTML untuk berbagai tahap dari tutorial ini. Dan tentu saja Anda dapat melihat dokumen HTML final:

Lihat Halaman Akhir Di Sini

Internet Explorer

Sekarang Anda harus selalu melakukan pengujian lintas browser. Sayangnya saya baru saja beralih dari Windows ke Mac baru yang bagus dan belum menginstal Parallels / Win, jadi saya tidak bisa!¬† Saya melakukan pemeriksaan cepat melalui BrowserShots.org dan dapat melihat itu sebagian besar bekerja dengan baik di IE6 / 7, namun ada masalah dengan tiga kolom memaksa footer lebih jauh ke bawah dari yang seharusnya. Bagaimanapun harus menjadi perbaikan yang mudah, tetapi sampai minggu depan ketika saya menginstal Windows, pengguna IE Anda sendiri :-)¬†

Saya akan memperbarui di sini setelah saya memiliki kesempatan untuk menyetrika belokan tetapi saya tidak ingin menunda penerbitan sampai saat itu!