Bab 4 Implementasi Homepage BLOG Doking
Sekarang semuanya sudah siap, sekarang kita mulai dengan desain halaman BLOG Doking dan implementasi front-end database.
Di sini, kami tidak akan berbicara tentang pengetahuan pembuatan web art, tetapi menjelaskan ide dan metode pembuatan halaman internal situs web di Dreamweaver MX2004.
4.1.1 Ide desain situs web
Sebelum memulai setiap halaman web, desain halaman dasar umumnya harus dirancang di Firworks atau perangkat lunak desain gambar seperti Photoshop. Gambar 4-1-1 adalah desain halaman dasar yang dirancang di Photoshop.
Gambar 4-1-1 Desain halaman dasar BLOG Doking
diberi nomor pada Gambar 4-1-1. ①Bagian yang ditandai dengan lingkaran kotak merah adalah kolom kiri halaman web, yang saat ini kosong satu per satu di bab-bab berikutnya. Yang ditambahkan, dan bagian yang ditandai dengan lingkaran kotak merah di nomor seri ② adalah bilah navigasi situs web, yang dihasilkan secara dinamis dari tabel LM di database dkblog.mdb yang dibuat di Bab. 3. Setelah ide dasarnya jelas, mulailah membuat template untuk website.
4.1.2 Ide desain untuk membuat templat situs web
: Membangun templat situs web dan menyatukan desain web situs web. Isi menu kolom situs web dihasilkan oleh LM dinamis tabel data, yang juga memfasilitasi modifikasi konten menu kolom situs web.
(1) Buka [File] → [New], buka kotak dialog [New Document], pilih "Category:" sebagai "Template Page", pilih "Template Page:" sebagai "ASP.NET VB Template", hasilnya adalah seperti yang ditunjukkan pada gambar. Seperti yang ditunjukkan pada 4-1-2.
Gambar 4-1-2 Kotak dialog template baru
(2) Klik tombol "Buat", masukkan layer, di jendela propertinya, atur ID menjadi "utama", ubah "Kiri (L)" dan "Atas (T) )" menjadi 0px, atur "Lebar (W)" menjadi 100%, dan atur perataannya ke tengah. Ini untuk memusatkan halaman web.
(3) Masukkan tabel, atur ID ke "bodyT", atur lebar menjadi 780 piksel (ini dirancang berdasarkan lebar desain halaman dasar Anda), atur margin dan spasi sel satuan ke 0, dan atur ketebalan tepi Setel ke 0.
(4) Atur perataan vertikal baris kedua tabel "bodyT" ke atas, lalu bagi menjadi 2 kolom. Atur lebar kolom pertama menjadi 220px dan lebar kolom pertama menjadi 560px (lebar). dari kolom yang dialokasikan juga berdasarkan (ditetapkan oleh desain halaman dasar Anda), atur warna latar belakang kolom 1 ke RGB (236, 236, 236).
(5) Sisipkan gambar latar belakang yang sesuai ke dalam baris pertama dan ketiga tabel "bodyT", atur perataan vertikal baris pertama ke bawah dan perataan horizontal ke kanan.
(6) Anda juga dapat mendesain judul, ukuran font, koneksi warna font atau skema warna sesuai kebutuhan.
(7) Menetapkan bilah navigasi situs web.
① Mulai Access2003, buka database dkblog.mdb, dan masukkan empat record secara berurutan, termasuk desain grafis, desain 3D, desain web, dan pemrograman jaringan, di bidang LM pada tabel LM, seperti yang ditunjukkan pada Gambar 4-1-3 .
Gambar 4-1-3 Entri data tabel LM
② Kembali ke Dreamweaver, beralih ke panel [Server Behavior], klik tombol "+", dan pilih "Data Set" di menu drop-down, seperti yang ditunjukkan pada Gambar 4- 1-4.
Gambar 4-1-4 Menambahkan kumpulan data
③ Pada kotak dialog pop-up [Kumpulan Data], masukkan nama kumpulan data sebagai "menuda", pilih "dkconn" di menu tarik-turun koneksi, pilih tabel LM di menu tarik-turun tabel, dan pilih Kolom adalah opsi "Semua", pilih bidang "LMID" di menu tarik-turun pengurutan, dan atur pengurutan ke urutan menaik. Hasilnya ditunjukkan pada Gambar 4-1-5 :
Gambar 4-1-5 Kotak dialog kumpulan data
④ Klik tombol "Uji", dan kotak dialog seperti pada Gambar 4-1-6 akan muncul, menunjukkan bahwa kumpulan data berhasil dibuat. Klik tombol "OK" untuk menyelesaikan .
Gambar 4-1-6 Kotak dialog pengujian kumpulan data
⑤ Beralih ke tab [Binding] dan perluas bidang kumpulan data (menuda), seperti yang ditunjukkan pada Gambar 4-1-7:
Gambar 4-1-7 Tab pengikatan
⑥ Seret bidang LM ke baris pertama badan tabel, seperti yang ditunjukkan pada Gambar 4-1-8:
Gambar 4-1-8 Tarik bidang LM
⑦ Lepaskan mouse, dan karakter yang diarsir akan ditambahkan ke baris pertama: {menuda.LM}, masukkan "Halaman Beranda | " di depannya, lalu masukkan simbol " |.Hubungi Kami”, hasilnya ditunjukkan pada Gambar 4-1-9:
Gambar 4-1-9 Mengikat data ke tabel bodyT
⑧ Pilih karakter yang diarsir {menuda.LM} dan karakter berikut "|", pilih menu [Insert] → [Application Object] → [Repeat Area], di pop- up Di kotak dialog [Repeat Area], pilih kumpulan data sebagai "menuda" dan pilih rekaman yang ditampilkan sebagai "Semua Catatan", seperti yang ditunjukkan pada Gambar 4-1-10. Klik tombol "OK" untuk menyelesaikan navigasi situs web menu.
Gambar 4-1-10 Kotak dialog Area berulang
(7) Gerakkan mouse ke baris kedua dan kolom kedua badan tabel, pilih menu [Sisipkan] → [Objek Templat] → [Area yang Dapat Diedit], dan klik [Area yang Dapat Diedit Baru] Pada kotak dialog, masukkan nama "mainbody" dan tekan tombol "OK", seperti yang ditunjukkan pada Gambar 4-1-11:
Gambar 4-1-11 Membuat area baru yang dapat diedit.
Ini menyelesaikan pekerjaan awal templat situs web. Simpan templat sebagai bkblog.dwt.aspx.
4.1.3 Ide desain untuk desain halaman beranda
: Setelah menyelesaikan pekerjaan konstruksi templat situs web, gunakan untuk membangun dan memperbarui situs web.
(1) Buat halaman dinamis "ASP.NET VB" baru, buka menu [Modify] → [Template] → [Apply template to page], pada kotak dialog pop-up [Select Template], pilih template "dkblog ", dan klik tombol" Pilih ", seperti yang ditunjukkan pada Gambar 4-1-12:
Gambar 4-1-12 Pilih template
(2) Gerakkan mouse ke area "bagian utama" yang dapat diedit, masukkan tabel, dan atur ID-nya ke "ztre". Inilah yang akan ditunjukkan oleh setiap catatan pelajaran.
Gambar 4-1-13 Isi yang akan ditampilkan pada setiap catatan belajar
Memasukkan kumpulan data yang dijelaskan pada bagian ini tidaklah sesederhana yang dijelaskan pada bagian sebelumnya. Pertama, lihat Gambar 4-1-13. Setiap catatan studi akan menampilkan topik, waktu publikasi, kategori catatan (yaitu, subkolomnya), penulis (nama), dan balasan (nomor). lihat diagram desain tabel ZT (Gambar 3-2-2 di Bagian 3.2), hanya ada LMID (ID kolom klasifikasi) dan tidak ada nama kolom, yang dapat diperoleh dengan menghubungkan ke tabel LM di sana; hanya YHID (ID penerbit), tetapi tidak ada nama penulis yang perlu dihubungkan. Hanya dapat diperoleh dari tabel YH; data lainnya dapat diperoleh dari tabel ZT. "Rumit sekali!" Sebenarnya jangan khawatir, semua kesulitan bisa diselesaikan di Access.
4.2.1 Membuat kueri koneksi tabel data
(1) Mulai Access2003, pilih [Query] → klik dua kali [Create Query in Design View], dan jendela [Show Table] akan muncul, seperti yang ditunjukkan pada Gambar 4-2-1 :
Gambar 4-2-1 Tambahkan tabel koneksi query
(2) Tambahkan tabel LM, tabel ZT, dan tabel YH secara berurutan.
Gambar 4-2-2 Tampilan sambungan tabel data
(3) Rancang bidang kueri seperti yang ditunjukkan pada Gambar 4-2-3:
Gambar 4-2-3 Diagram desain bidang kueri
(4) Simpan kueri ini sebagai ZTRE dan lengkapi kueri koneksi tabel data di Access.
4.2.2 Masukkan kumpulan data
(1) Kembali ke Dreamweaver, beralih ke panel [Perilaku Server], klik tombol "+", tambahkan kumpulan data Ztre, pilih tabel sebagai kueri ZTRE yang baru saja dibuat di Access, dan lainnya yang relevan pengaturan, Seperti yang ditunjukkan pada Gambar 4-2-4:
Gambar 4-2-4 Pengaturan kumpulan data Ztre
(2) Beralih ke tab [Binding], perluas kumpulan data (Ztre), seret bidang ZTNAME untuk menggantikan "Topik Catatan Studi" di tabel ztre, dan seret bidang ZTTIME untuk menggantikan "Terbitkan" Waktu", seret bidang LM untuk menggantikan "Kategori", seret bidang ZYTEXT ke ruang kosong pada baris kedua tabel ztre, desain lainnya ditunjukkan pada Gambar 4-2-5:
Gambar 4-2-5 Mengikat data ke tabel ztre
(3) Beralih ke panel [Server Behavior] Anda dapat melihat bahwa banyak teks dinamis telah ditambahkan. Klik dua kali teks dinamis (Ztre.ZYTEXT) dan pilih formatnya sebagai Format "Encoding—HTML Encoding", seperti yang ditunjukkan pada Gambar 4-2-6:
Gambar 4-2-6 Mengatur format teks dinamis
(4) Pilih baris pertama, kedua, dan ketiga dari tabel ztre, dan tentukan sebagai area berulang. Pengaturannya seperti yang ditunjukkan pada Gambar 4-2-7.
Gambar 4-2-7 Menentukan area berulang.
Ini menyelesaikan pekerjaan memasukkan kumpulan data dan pengikatan data di halaman beranda.
(1) Pilih "Home", pada panel [Server Behavior], klik tombol "+", pilih [Dataset Paging] → [Move to the first page], seperti yang ditunjukkan pada Gambar 4-3-1:
Gambar 4-3-1 Menu paging kumpulan data
(2) Pada kotak dialog pop-up, pilih kumpulan data sebagai Ztre dan tekan tombol "OK", seperti yang ditunjukkan pada Gambar 4-3-2:
Gambar 4-3-2 Kotak dialog Pindah ke halaman pertama
(3) Pilih "Halaman Sebelumnya" dan tentukan sebagai "Pindah ke Halaman Sebelumnya" dari halaman kumpulan data, pilih "Halaman Berikutnya" dan tentukan sebagai kumpulan data " Pindah ke halaman berikutnya" untuk penomoran halaman; Pilih "Terakhir" untuk menentukan "Pindah ke halaman terakhir" untuk penomoran halaman kumpulan data.
(4) Ubah "Nomor Halaman" menjadi "Nomor Halaman Saat Ini:" Di panel [Perilaku Server], klik tombol "+" dan pilih [Tampilkan Jumlah Catatan] → [Tampilkan Nomor Halaman Saat Ini].
(5) Simpan index.aspx, sehingga melengkapi desain beranda. Masukkan beberapa catatan ke dalam tabel ZT dan tabel YH yang sesuai di Access, dan telusuri di browser IE (jika tidak ada instruksi khusus di bab berikutnya, Semua catatan termasuk dalam kolom "Pemrograman Jaringan"), seperti yang ditunjukkan pada Gambar 4-3-3:
Gambar 4-3-3 Gambar penelusuran halaman beranda