Layout HTML
Layout halaman web adalah sangat penting untuk menambah baik penampilan tapak web.
Sila reka reka letak halaman web anda dengan teliti.
Reka Letak Laman Web
Kebanyakan tapak web akan menyusun kandungannya ke dalam berbilang lajur (sama seperti majalah atau akhbar).
Kebanyakan tapak web boleh menggunakan elemen <div> untuk membuat berbilang lajur. CSS digunakan untuk meletakkan elemen atau mencipta latar belakang dan rupa berwarna-warni untuk halaman.
Walaupun kita boleh menggunakan teg jadual HTML untuk mereka bentuk reka letak yang cantik, teg jadual tidak disyorkan sebagai alat susun atur - Jadual tidak alatan susun atur.
Reka Letak HTML - Menggunakan Elemen <div>
Elemen div ialah elemen peringkat blok yang digunakan untuk mengumpulkan elemen HTML.
Contoh berikut menggunakan lima elemen div untuk mencipta susun atur berbilang lajur:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#cc6666;}
div#menu {background-color:#99CCFF; height:200px; width:100px; float:left;}
div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;}
div#footer {background-color:#99bbbb; clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>网站头部图片，标题</h1>
</div>
<div id="menu">
<h2>菜单</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">内容</div>
<div id="footer">底部</div>
</div>
</body>
</html>Susun atur HTML - menggunakan jadual
Menggunakan teg <table> HTML ialah cara mudah untuk membuat reka letak.
Anda boleh menggunakan elemen <div> atau <jadual> CSS digunakan untuk meletakkan elemen atau mencipta latar belakang dan rupa berwarna-warni untuk halaman.
Petua: Walaupun anda boleh menggunakan jadual HTML untuk mencipta reka letak yang cantik, jadual direka bentuk untuk mempersembahkan data berjadual - jadual bukan alatan reka letak!
Contoh berikut menggunakan jadual dengan tiga baris dan dua lajur - baris pertama dan terakhir menggunakan atribut colspan untuk merentangi dua lajur:
Contoh
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1>网站头部图片，标题</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
内容</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
标题</td>
</tr>
</table>
</body>
</html>
Dua kaedah berbeza, tetapi kesannya adalah sama.
Reka Letak HTML - Petua Berguna
Petua: Manfaat terbesar menggunakan CSS ialah tapak akan lebih mudah diselenggara jika kod CSS disimpan dalam helaian gaya luaran. Dengan mengedit satu fail, anda boleh menukar reka letak semua halaman. Untuk mengetahui lebih lanjut tentang CSS, lawati tutorial CSS kami.
Petua: Memandangkan membuat reka letak lanjutan boleh memakan masa, menggunakan templat ialah pilihan yang pantas. Terdapat banyak templat laman web percuma yang tersedia melalui enjin carian (anda boleh menggunakan reka letak tapak web pra-bina ini dan mengoptimumkannya).
bahagian seterusnya