Merencanakan situs web
Pertama Anda perlu merencanakan situs web. Tutorial ini akan mengambil gambar berikut sebagai contoh untuk membangun sebuah situs web.
Gambar 1
ditunjukkan di bawah ini:
Gambar 2
terutama terdiri dari lima bagian:
1. Bilah navigasi Navigasi Utama, dengan efek tombol.
Lebar: 760 piksel Tinggi: 50 piksel
2. Header Ikon header website berisi logo dan nama website.
Lebar: 760 piksel Tinggi: 150 piksel
3. Konten Konten utama website.
Lebar: 480px Tinggi: Berubah tergantung konten
4. Batas sidebar, beberapa informasi tambahan.
Lebar: 280px Tinggi: Berubah tergantung pada
5. Kolom bawah Footer website berisi informasi hak cipta, dll.
Lebar: 760 piksel Tinggi: 66 piksel
1. Membuat template html dan direktori file, dll.
Kodenya adalah sebagai berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transisi//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<kepala>
<meta http-equiv="Jenis konten" content="teks/html; charset=UTF-8" />
<title>Nama Perusahaan - Nama Halaman</title>
<meta http-equiv="Isi-Bahasa" content="en-us" />
<meta http-equiv="imagetoolbar" content="tidak" />
<meta name="MSSmartTagsPreventParsing" content="benar" />
<meta name="deskripsi" content="Deskripsi" />
<meta name="kata kunci" content="Kata Kunci" />
<meta name="author" content="Desain yang Mencerahkan" />
<style type="text/css" media="all">@import "css/master.css";</style>
</kepala>
<tubuh>
</tubuh>
</html>
Simpan sebagai index.html, dan buat folder css dan gambar. Struktur websitenya adalah sebagai berikut:
Gambar 3
2. Membuat kotak besar untuk website :
Buat kotak selebar 760px yang akan memuat semua elemen situs web.
Tulis <div id="page-container"> antara <body> dan </body> di file html
Halo dunia.
</div>
Buat file css, beri nama master.css, dan simpan di folder /css/. Menulis:
#penampung halaman {
lebar: 760 piksel;
latar belakang: merah;
}
Lebar kotak yang id page-containernya dikontrol menjadi html adalah 760px, dan backgroundnya berwarna merah.
Gambar 4
Sekarang untuk memusatkan kotaknya, tuliskan margin:auto;, sehingga file cssnya adalah:
#penampung halaman {
lebar: 760 piksel;
margin: otomatis;
latar belakang: merah;
}
Sekarang Anda dapat melihat ada celah lebar 8px antara bagian atas kotak dan browser. Hal ini disebabkan oleh padding dan batas default browser. Untuk menghilangkan kesenjangan ini, Anda perlu menulis di file css:
html, isi {
margin: 0;
bantalan: 0;
}
Bagilah situs web menjadi lima div
1. Masukkan lima bagian yang disebutkan pada "Langkah 1" ke dalam kotak dan tulis dalam file html:
<div id="wadah-halaman">
<div id="main-nav">Navigasi Utama</div>
<div id="header">Tajuk</div>
<div id="sidebar-a">Bilah Sisi A</div>
<div id="content">Konten</div>
<div id="footer">Footer</div>
</div>
berperilaku sebagai berikut:
Gambar 5
2. Untuk membedakan kelima bagian tersebut, kita tandai kelima bagian tersebut dengan warna background yang berbeda dan tulis pada file css:
#nav-utama {
latar belakang: merah;
tinggi: 50 piksel;
}
#tajuk {
latar belakang: biru;
tinggi: 150 piksel;
}
#bilah samping-a {
latar belakang: hijau tua;
}
#isi {
latar belakang: hijau;
}
#footer {
latar belakang: oranye;
tinggi: 66 piksel;
}
Kinerjanya adalah sebagai berikut:
Gambar 6
Tata letak halaman web dan div mengambang, dll.
1. Mengambang: Pertama, biarkan batas melayang di sebelah kanan konten utama. Gunakan css untuk mengontrol mengambang.
#bilah samping-a {
mengapung: benar;
lebar: 280 piksel;
latar belakang: hijau tua;
}
Kinerjanya adalah sebagai berikut:
Gambar 7
2. Tulis beberapa teks ke dalam kotak konten utama. Tulis di file html:
<div id="konten">
Lorem ipsum dolor sit amet, konsektetuer adipiscing elit.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim.
Donec in sapien di nibh rutrum gravida
euismod vulputate. Nullam rhoncus mauris ac metus.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
Purus. Suspendisse mattis nunc vestibulum ligula.
</div>
Performanya adalah sebagai berikut:
Gambar 8
Namun Anda dapat melihat bahwa kotak konten utama memenuhi seluruh lebar penampung halaman, dan kita perlu mengatur batas kanan #content menjadi 280px. agar tidak bertentangan dengan perbatasan.
Kode cssnya seperti berikut:
#isi {
margin-kanan: 280 piksel;
latar belakang: hijau;
}
Pada saat yang sama, tuliskan beberapa teks pada pembatas. Tulis di file html:
<div id="bilah samping-a">
Lorem ipsum dolor sit amet, konsektetuer adipiscing elit.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim.
Donec in sapien di nibh rutrum gravida
euismod vulputate. Nullam rhoncus mauris ac metus.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
Purus. Suspendisse mattis nunc vestibulum ligula.
</div>
berperilaku sebagai berikut:
Gambar 9
Ini bukan yang kita inginkan. Bingkai bawah situs web telah berada di bawah batas. Hal ini karena kita mengapungkan perbatasan ke kanan. Karena mengambang, dapat dipahami bahwa perbatasan tersebut berada pada lapisan lain di atas keseluruhan kotak. Oleh karena itu, kotak bawah dan kotak konten sejajar.
Jadi kami menulis di css:
#footer {
jelas: keduanya;
latar belakang: oranye;
tinggi: 66 piksel;
}
Kinerjanya adalah sebagai berikut:
Gambar 10
Tata letak dan penyajian struktur tambahan di luar bingkai utama halaman web. Penyajian (Layout) struktur tambahan di luar bingkai utama halaman web, antara lain sebagai berikut:
1. Bilah navigasi utama;
2. Judul, meliputi nama website dan judul konten;
3. Konten;
4. Informasi footer, termasuk hak cipta, sertifikasi, dan bilah sub-navigasi (opsional).
Saat menambahkan struktur ini, agar tidak merusak kerangka asli, kita perlu menambahkan di bawah tag "body" (TAG) dari file css:
.tersembunyi {
tampilan: tidak ada;
}
".hidden" adalah kelas yang kita tambahkan. Kelas ini dapat membuat elemen apa pun di halaman milik kelas tersembunyi tidak ditampilkan. Ini akan digunakan nanti, jadi lupakan saja untuk saat ini.
Sekarang kita tambahkan headingnya:
Pertama kembali ke kode HTML, <h1> hingga <h6> adalah kode heading html yang biasa kita gunakan. Misalnya, kami biasanya menggunakan <h1>nama situs web</h1>, <h2>subjudul situs web</h2>, <h3>judul utama konten</h3>, dll. Kami menambahkan yang berikut ini ke lapisan Header (Div) dari file html:
<div id="tajuk">
<h1>Desain yang Mencerahkan</h1>
</div>
Refresh halaman dan Anda dapat melihat judul besar dan spasi di sekitar judul. Hal ini disebabkan oleh ukuran default dan margin tag <h1>>.
jam1 {
margin: 0;
bantalan: 0;
}
Berikutnya adalah bilah navigasi :
Kode css yang mengontrol kinerja bilah navigasi relatif rumit. Kami akan memperkenalkannya secara rinci pada langkah kesembilan atau kesepuluh. Sekarang tambahkan kode navigasi ke file html:
<div id="nav-utama">
<ul>
<li id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Tentang</a></li>
<li id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Layanan</a></li>
<li id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Portofolio</a></li>
<li id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Hubungi Kami</a></li>
</ul>
</div>
(Catatan: Tutorial asli menggunakan dl dan dt, jorux menggunakan tag ul dan li yang lebih umum digunakan di sini)
Saat ini, kinerja bilah navigasi relatif buruk, tetapi kinerja khususnya akan diperkenalkan di tutorial mendatang, jadi bilah navigasi perlu disembunyikan untuk sementara, jadi saya menambahkan:
<div id="nav-utama">
<dl kelas="tersembunyi">
<dt id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Tentang</a></dt>
<dt id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Layanan</a></dt>
<dt id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Portofolio</a></dt>
<dt id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Hubungi Kami</a></dt>
</dl>
</div>