Dalam bab sebelumnya Dreamweaver tutorial ini, kami menambahkan bar navigasi menu yang sederhana ke halaman web dua kolom yang sebelumnya dirancang, belajar bagaimana mengubah warna dan font dan hyperlink ditambahkan.
Dalam bab ini, Anda akan menggunakan built-in Dreamweaver fasilitas untuk menambahkan bar navigasi menu mewah untuk website Anda. Bar navigasi ini akan memiliki efek rollover agak seperti apa yang Anda lihat di menu navigasi thesitewizard.com 's ketika Anda membawa mouse ke item menu.
Pada akhir bab ini, halaman utama Anda akan selesai, dan akan membentuk dasar untuk halaman lain di situs Anda. Jika sebelumnya Anda telah menggunakan teks contoh yang disertakan dalam tutorial ini untuk membuat halaman utama Anda, Anda harus mengambil kesempatan dalam bab ini untuk menggantikan teks dengan isi yang sebenarnya dari situs Anda. Pada saat ini, Anda akan belajar cukup untuk melakukan sebagian besar hal-hal yang desainer web biasanya perlu dilakukan di halaman web.
Selain itu, jika Anda telah melewatkan angsuran awal dari tutorial ini, dan ingin mengetahui bagaimana Anda dapat membuat website sendiri dari awal, Anda dapat menemukan bab pertama dalam Dreamweaver Tutorial: Cara Membuat Website dengan Dreamweaver CS3 (Bagian 1 ). Bab ini mengasumsikan bahwa Anda telah menyelesaikan semua langkah yang disebutkan dalam bab-bab sebelumnya. Dreamweaver Menu Bar Widget dan Framework Spry
Dreamweaver CS3 memiliki fasilitas built-in bagi Anda untuk menambahkan berbagai fitur interaktif untuk website Anda. Fasilitas built-in menggunakan fitur pemrograman yang dikenal sebagai kerangka sigap. Editor WYSIWYG Web memudahkan Anda untuk menggunakan kerangka sigap tanpa perlu tahu bagaimana program. Anda hanya menggunakannya sebagai telah Anda lakukan di bab-bab sebelumnya. Cara Menambahkan Menu Bar Navigasi untuk Website Anda
Start up Dreamweaver.
Muat halaman index.html Anda seperti sebelumnya. Artinya, DoubleClick file dalam pane File di kolom kanan.
Cari menu yang ada navigasi Anda, yang pada saat ini hanya terdiri dari serangkaian link ke halaman rumah Anda, halaman Tentang Kami, halaman Hubungi Kami dan Peta Situs. Memilih mereka dan menghapus mereka. Kami akan sepenuhnya menggantikan mereka di bab ini.
Dalam kasus Anda bertanya-tanya mengapa kita repot-repot untuk membuat link tersebut jika kita akan menghancurkan mereka lagi pula, hyperlink adalah salah satu fitur yang paling penting dari suatu halaman web. Sebagai seorang webmaster, Anda akan terus membuat hyperlink ke halaman lain di situs Anda serta link ke situs lain di internet. Tidak semua link ini akan ditempatkan dalam menu navigasi Anda. Dengan demikian penting untuk menutup aspek desain web di tutorial.
Pastikan bahwa kursor teks berkedip saat ini di side bar. Jika tidak, klik di suatu tempat di side bar. Sekarang klik "Insert | sigap | sigap Menu Bar" dari menu. Artinya, klik "Insert" menu, maka "sigap" item pada menu yang muncul, dan akhirnya pada "Menu Bar sigap" pada submenu yang muncul.
Sebuah kotak dialog akan muncul menanyakan apakah Anda ingin menu bar horizontal atau satu vertikal. Karena kita menempatkan menu bar di kolom kiri, kita ingin menu bar vertikal. Pilih "Vertikal" pilihan dan klik OK.
Sebuah menu bar default akan dimasukkan ke side bar Anda. Jika Anda melihat panel Properties di bagian bawah jendela Dreamweaver Anda, Anda akan melihat bahwa teks dan link untuk item menu akan ditampilkan di sana.
Pilih "Item 1" dengan mengklik di atasnya, jika belum dipilih. Pada kotak "Text", ganti kata "Item 1" dengan "Home" (tanpa tanda kutip). Ganti default "Link" teks "#" dengan "index.html" (tanpa tanda kutip).
Secara default Dreamweaver membuat submenu untuk menu Anda. Kita tidak perlu satu, sehingga kita perlu untuk menghapusnya. Pilih "Item 1.1". Tepat di atas "Item 1.1" adalah dua tombol "+" dan "-". Klik tombol "-" item untuk menghapus item 1.1. Lakukan hal yang sama untuk "Item 1.2" dan "Item 1.3".
Sekarang lakukan hal yang sama dengan item lainnya, mengganti teks dengan kata-kata yang tepat untuk situs Anda, dan link dengan nama halaman yang sebenarnya. Jika ada submenu, menghapusnya seperti yang Anda lakukan untuk Item 1. Untuk kenyamanan Anda, teks pengganti dan link yang dikutip di bawah ini dari bab 3. Perhatikan bahwa Butir 3 memiliki sistem menu tiga tingkat. Hapus semua submenu (butir 3.1.1, 3.1.2, 3.1, 3.2, 3.3) - kita tidak akan membutuhkan mereka.
Teks: Tentang Kami, Link: aboutus.html
Teks: Hubungi Kami, Link: feedback.html
Teks: Peta Situs, Link: sitemap.html
Klik "File | Save". Sebuah kotak dialog akan muncul memberitahu Anda bahwa file tertentu telah ditambahkan ke situs Anda, dan bahwa file-file ini perlu upload. Klik "OK".
Sekarang upload halaman ke situs Web Anda menggunakan "Situs | Masukan" dan memeriksa hasil di browser Anda. Hover mouse Anda ke tombol menu, dan Anda akan melihat bahwa mereka berubah warna.
Menyesuaikan Widget Menu Bar Kerangka yang sigap
Sambil menambahkan Framework Spry menu bar itu navigasi untuk halaman web Anda adalah prosedur sederhana di bawah Dreamweaver, mengubahnya, bagaimanapun, secangkir teh. Tidak ada metode built-in untuk melakukannya di bawah antarmuka pengguna Dreamweaver. Anda harus melakukannya secara manual.
Cara tercepat untuk melakukan ini adalah untuk melakukannya melalui pandangan Dreamweaver "Kode".
Dreamweaver memiliki dua cara dasar yang dapat Anda bekerja di website Anda. Sejauh ini, Anda telah membuat situs Anda dengan menggunakan "Desain" tampilan. "Design" view mengijinkan anda untuk bekerja pada halaman web Anda menggunakan Apa-Anda-Lihat-Is-What-You-Get (WYSIWYG) editor - yang, ketika Anda membuat halaman web Anda, pada dasarnya anda melihat halaman sebagai pengunjung akan ketika mereka mengunjungi situs Anda.
"Desain" melihat menyembunyikan kode nyata, HTML dan CSS kode, bahwa Dreamweaver menghasilkan untuk website Anda. Ini kode, "mentah" kode, jika Anda akan, adalah konten yang sebenarnya yang diupload (dipublikasikan) ke website Anda. Bila pengunjung Anda beban halaman web Anda, browser mengambil "mentah" kode dan menampilkan sesuai dengan petunjuk yang diberikan dalam kode "mentah".
Untuk menyesuaikan widget bar menu Framework sigap, Anda akan menggunakan fasilitas Dreamweaver untuk melihat ini "mentah" kode untuk website Anda. Bahkan jika Anda menemukan widget menu bar yang memuaskan pada saat ini, Anda masih harus mengambil langkah-langkah berikut untuk membiasakan diri dengan pandangan Dreamweaver "Kode". Anda akan menggunakan tampilan Kode di bab masa depan untuk menyisipkan kode formulir umpan balik Anda.
Untuk beralih ke tampilan "Kode", klik "Lihat | Kode" dari menu. Alih-alih dari halaman web yang Anda terbiasa melihat, Anda sekarang akan melihat "mentah" kode HTML untuk halaman tersebut. Jika Anda gulir ke atas dan ke bawah halaman, Anda harus dapat melihat konten Anda di tengah-tengah karakter lain. Ini karakter lain, hal-hal seperti "<p>" dan sejenisnya, adalah kode format yang memberitahu browser bagaimana harus membuat halaman Anda.
Keterpusatan Menu Bar
Gulir ke bagian atas dari file index.html dalam pandangan "Kode". Cari teks "</ head>" (tanpa tanda kutip) di suatu tempat dekat bagian atas dari file. Tempatkan kursor anda sebelum "</ head>" pada baris yang sama. Tekan ENTER (atau RETURN) untuk menyisipkan baris kosong. Ketika Anda melakukan ini, seluruh baris dengan "</ head>" harus bergerak ke bawah, menciptakan baris kosong baru. Pindahkan kursor ke baris kosong.
Sekarang salin teks dari kotak di bawah ini dan paste ke dalam baris kosong baru saja Anda buat dalam Dreamweaver. Untuk menyalin teks, pilih semua teks dalam kotak dengan mouse anda, klik tombol kanan mouse (atau jika Anda menggunakan Mac OS X, tahan tombol Control pada keyboard dan klik mouse), lalu pilih Salin dari menu yang muncul. Untuk paste ke Dreamweaver, beralih ke jendela Dreamweaver. Pastikan bahwa kursor teks Anda di lokasi yang benar (dalam baris kosong di atas kata "</ head>"). Pilih "Edit | Paste" dari menu.
<style type="text/css"> ul.MenuBarVertical {margin: 0 auto; width: 8em;} </ style>
<style type="text/css">
ul.MenuBarVertical
{
margin: 0 auto ;
width: 8em;
}
</style>
Untuk memeriksa bahwa penyisipan Anda bekerja, klik "Lihat | Design" dari menu. Anda harus melihat bahwa menu sekarang berpusat di Design view. Anda dapat kembali klik "Lihat | Kode" lagi dari menu jika Anda ingin kembali ke tampilan "Kode".
Mengubah Warna dari Menu Bar
Di sisi kanan jendela Dreamweaver, pada panel Files, DoubleClick folder "SpryAssets". Ini harus memperluas, menunjukkan kepada Anda file lainnya. DoubleClick file "SpryMenuBarVertical.css". Jika panel File terlalu sempit bagi Anda untuk melihat apa file yang Anda klik, hover mouse Anda ke setiap file pada gilirannya sampai Dreamweaver menampilkan tooltip memberitahu Anda nama lengkap file.
File lain, penuh kode asing, akan muncul di panel tengah Dreamweaver. Ini adalah kode CSS untuk menu Anda. Kode CSS berisi kode format untuk menu Anda.
Klik "Edit | Cari dan Ganti" dari menu. Ketik "ul.MenuBarVertical sebuah" (tanpa tanda kutip) ke dalam besar "Cari" kotak. Klik "Find Next" tombol. Hilangkan kotak dialog dengan mengklik tombol "Close". Pada jendela utama, Anda akan melihat kata-kata yang disorot "ul.MenuBarVertical sebuah". Dalam kata-kata ini adalah sebuah blok teks tertutup antara "{" dan "}" (tanpa tanda kutip). Anda harus dapat menemukan "background-color" diikuti dengan nilai "# EEE" di blok ini. Baris ini menentukan warna menu ketika mouse tidak melayang di atas itu. "# EEE" adalah kode untuk warna abu-abu yang Anda lihat dalam menu.
Pane CSS dengan warna latar belakang-dilingkari
Di kolom sebelah kanan dari jendela Dreamweaver, pada panel CSS, Anda harus dapat melihat "Properties untuk ul.MenuBarVertical". Jika tidak, gerakkan mouse anda ke atas garis yang memisahkan "Aplikasi" biru dan bagian atas dan tarik ke bawah untuk membuat ruang lebih. Di bawah "Properties untuk ul.MenuBarVertical sebuah", cari baris yang mengatakan "latar belakang warna" (atau bagian dari "warna latar belakang-" jika jendela terlalu sempit untuk menampilkan teks penuh). Ke kanan, Anda akan melihat sebuah kotak persegi yang diikuti oleh "# EEE". Klik kotak persegi untuk menampilkan jendela color picker dan memilih warna pilihan Anda.
Untuk mengubah warna tombol menu ketika mouse bergerak di atasnya, klik "Edit | Cari dan Ganti" lagi dan mencari "ul.MenuBarVertical a: hover". Hilangkan kotak dialog ketika Anda menemukan teks. Sekali lagi, Anda harus dapat mengubah "background-color" properti dari panel CSS di kolom sebelah kanan.
Ketika Anda sudah selesai membuat perubahan Anda, memeriksa output dengan beralih kembali ke jendela index.html. Untuk melakukan ini, pilih "Window | index.html" dari menu. Jika Anda masih dalam tampilan "Kode" ketika Anda beralih ke jendela index.html, beralih ke tampilan "Desain" dengan memilih "View | Desain".
Bila Anda puas dengan perubahan yang telah dibuat, simpan pekerjaan Anda dengan "File | Save All" dari menu. Perhatikan bahwa Anda perlu menggunakan "Simpan Semua" bukan "Simpan" karena Anda telah memodifikasi dua file, index.html dan SpryMenuBarVertical.css. Mengklik "Simpan" saja hanya akan menyimpan file apapun yang Anda kebetulan bekerja pada terakhir.
Sekali lagi, gunakan "Situs | Put" untuk mempublikasikan pekerjaan Anda dan periksa dengan browser Anda.
Pada titik ini, halaman rumah untuk situs web Anda selesai. Jika Anda telah bekerja pada halaman menggunakan beberapa teks dan gambar boneka, seperti yang saya diberikan dalam bab 1, sekarang adalah waktu untuk mengubah mereka untuk konten Anda yang sesungguhnya. Anda telah belajar semua yang anda butuhkan untuk membuat sebuah halaman utama kerja yang terlihat layak dan bekerja dengan benar. Kami tidak akan kembali ke halaman ini dalam beberapa bab berikutnya. Sebaliknya, kita akan merancang halaman lain Anda menggunakan halaman ini utama sebagai template.
lanjut bag 5
dudu.rojo
0 komentar:
Post a Comment