Dalam bab sebelumnya Dreamweaver tutorial ini, kita dirapikan halaman dua kolom web Anda sebelumnya dirancang di bab 1 dengan menambahkan logo untuk website Anda dan memasukkan gambar ke dalam tubuh utama.
Dalam bab ini, Anda akan terus menggunakan Dreamweaver untuk meningkatkan situs Anda dan menambah fungsionalitas untuk itu. Secara khusus, Anda akan belajar bagaimana
menambahkan link atau hyperlink ke halaman web Anda, memungkinkan Anda untuk link ke halaman lain di situs Anda serta di Internet;
mengubah wajah font, gaya, ukuran dan warna;
mengubah warna latar belakang.
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. Menambahkan Menu Navigasi Dasar ke Sidebar Anda
Sejauh ini, semua modifikasi kita ke halaman awal telah berkunjung ke header, di mana kita menambahkan logo situs Anda dan nama situs, serta tubuh utama, di mana kita menambahkan informasi tentang situs web Anda dan produk. Sampai titik ini, kolom paling kiri dari halaman web Anda masih berisi teks default placeholder yang dimasukkan Dreamweaver CS3 ketika menciptakan halaman.
Dreamweaver mengacu pada kolom paling kiri sebagai "sidebar". Kebanyakan website, seperti thesitewizard.com, menyisipkan menu navigasi ke ruang ini. Sebuah menu navigasi biasanya link ke halaman yang penting tertentu di website, seperti halaman rumah (halaman yang sedang merancang), peta situs, "Tentang Kami" halaman, dan "Hubungi Kami" halaman. Jika situs memiliki sejumlah besar halaman, juga akan link ke bagian utama.
Dengan kata lain, menu navigasi, dalam bentuk paling dasar, hanyalah serangkaian link ke halaman tertentu lainnya dari situs Anda. Untuk bab ini, kita akan membuat menu navigasi yang sederhana namun penuh-fungsional. Dalam bab berikutnya, Anda akan memodifikasi bahwa menu menggunakan tombol agak seperti yang Anda lihat pada thesitewizard.com dan situs-situs lain. Namun, untuk saat ini, penting bagi Anda untuk bekerja melalui proses menambahkan link untuk membuka jalan bagi yang menu lanjutan bab 4.
Start up Dreamweaver, jika Anda belum melakukannya.
Seperti sebelumnya, buka halaman index.html Anda. Anda dapat melakukan ini dengan klik dua kali nama file di kolom kanan jendela Dreamweaver Anda.
Pada kolom kiri, Anda akan melihat subjudul berani dengan kata-kata "sidebar1 Konten". Kita tidak perlu header ini, jadi kami akan menghapusnya. Untuk menghapusnya, gunakan mouse dan tarik di seluruh kata-kata "sidebar1 Konten" memilihnya. Perhatikan bahwa di dekat bagian bawah jendela Dreamweaver, tepat di atas panel "Properties", kata "<h3>" disorot.
Untuk kenyamanan, saya akan merujuk ke bar ini, di mana Anda dapat melihat "<h3>" disorot, seperti status bar. Status bar berisi informasi yang berguna tentang mana kursor saat ini terletak dalam kode HTML mentah bahwa Dreamweaver menghasilkan di balik layar untuk Anda.
Klik disorot "<h3>" kata - yang, gerakkan mouse anda ke atas tag "<h3>", dan klik tombol mouse. Sebuah klik tunggal akan melakukan trik. Kemudian tekan tombol DEL. Hal ini tidak hanya akan menghapus kata "sidebar1 Konten", tetapi juga akan menghapus kode menandai bahwa bagian sebagai subjudul.
Sekarang menghapus sisa teks di bar samping. Cukup memilih semua dengan mouse Anda, dan tekan tombol DEL.
Dengan kursor teks Anda masih di side bar, klik "Insert | Hyperlink". Artinya, klik "Insert" menu, dan kemudian klik "Hyperlink" item pada menu yang muncul. Sebuah kotak dialog muncul, meminta Anda untuk rincian link.
Masukkan "Home" (tanpa tanda kutip) ke dalam kotak yang berjudul "Teks:". Lalu masukkan "index.html" (tanpa tanda kutip) untuk kotak yang berjudul "Link:". Pastikan Anda memasukkan "index.html" persis seperti yang saya ditentukan, tanpa huruf besar (tidak ada huruf besar), tanpa spasi dan tanpa tanda kutip. Klik OK.
Anda akan melihat link muncul di side bar Anda. Bila halaman Anda diterbitkan ke server web Anda, dan pengguna mengklik link tersebut, mereka akan dibawa ke halaman "index.html" dari situs Anda. Kami telah menambahkan "Home" link meskipun Anda sudah di index.html karena kebijakan yang baik untuk memiliki menu navigasi standar di situs Anda - yaitu, kami ingin semua halaman di situs memiliki menu navigasi persis sama . Ini mengurangi kebingungan dalam pengunjung Anda ketika mereka ingin berburu untuk item menu tertentu.
Saat ini, link disorot. Pindahkan kursor mouse ke akhir dari "Home" kata dan klik pada ruang kosong sedikit ke kanan kata. Kata "Home" seharusnya tidak lagi dipilih. Lihatlah status bar. Jika item terakhir dalam status bar "<p>", Anda dapat melanjutkan ke langkah berikutnya. Jika item terakhir adalah "<a>", Anda perlu untuk mengklik sedikit lebih jauh ke ruang kosong di sebelah kanan "Home", tetapi masih dalam kolom sisi bar.
Tekan tombol (atau RETURN) ENTER untuk membuat baris baru.
Menggunakan prosedur di atas, membuat link ke halaman-halaman berikut juga.
Teks: Tentang Kami, Link: aboutus.html
Teks: Hubungi Kami, Link: feedback.html
Teks: Peta Situs, Link: sitemap.html
Jika situs Web Anda tidak website perusahaan, tetapi satu pribadi, Anda dapat menggunakan "Tentang Saya" bukan "Tentang Kami" jika Anda inginkan. Namun, untuk menghindari kebingungan nanti, saya sarankan Anda menyimpan nama file yang saya diberikan. Artinya, tidak berubah "aboutus.html", "feedback.html" atau "sitemap.html". Lebih penting lagi, nama file Anda tidak harus mencakup spasi atau (huruf besar) huruf kapital. Menggunakan spasi atau huruf kapital di nama file Anda memperkenalkan berbagai komplikasi perlu di jalan.
Perhatikan bahwa side bar hanya memperpanjang sejauh link terakhir Anda. Jika Anda ingin side bar untuk memperpanjang lebih jauh, terus menambahkan baris kosong sampai Anda puas dengan panjang kolom tersebut.
Pada titik ini, halaman utama Anda sepenuhnya fungsional. Artinya, berisi menu navigasi dengan link bekerja dan kolom kanan yang memiliki informasi yang Anda ingin pengunjung Anda untuk membaca. Saat ini, tentu saja, link tersebut mengarah ke mana-mana, karena Anda belum menciptakan halaman untuk link tersebut belum. (Halaman-halaman akan dibuat dalam bab berikutnya.)
Hal ini juga mungkin untuk menambahkan link ke halaman web yang tidak di situs Anda sendiri. Sebagai contoh, untuk link ke thesitewizard.com, cukup ikuti prosedur di atas, tapi bukannya mengetik link relatif seperti index.html atau sejenisnya, Anda harus memberikan URL lengkap. Masukkan ke dalam kotak "Link" "http://www.thesitewizard.com/" (tanpa tanda kutip), dan ketik "thesitewizard.com" ke dalam kotak "Teks". Bagaimana membuat sebuah gambar menjadi link yang dapat diklik
Pada banyak situs web, logo situs sebenarnya adalah link yang dapat diklik. Misalnya, jika Anda adalah untuk memeriksa logo di bagian atas halaman ini, Anda akan melihat bahwa sebenarnya link ke thesitewizard.com.
Ini sangat mudah untuk membuat logo Anda menjadi link. Cukup pilih logo dengan mengkliknya. Pada panel Properties di bagian bawah jendela, mencari kotak "Link". Masukkan alamat website Anda, misalnya, "http://www.example.com/" (tanpa tanda kutip) ke dalam kotak itu. Atau, Anda dapat memasukkan link relatif, seperti "index.html". Selanjutnya, cari kotak "Perbatasan". Masukkan "0" (nol, tanpa tanda kutip) ke dalam kotak itu. Hal ini mencegah browser tertentu dari menempatkan perbatasan biru di sekitar gambar Anda. Bagaimana Mengubah Tipografi Font, Ukuran, Gaya dan Warna
Dreamweaver memungkinkan Anda untuk mengubah berbagai aspek dari teks yang ditampilkan pada halaman Anda, termasuk ukuran font tipografi, dan warna.
Mengubah Font Typeface
Untuk mengubah font dari bagian tertentu dari teks, pertama-tama pilih teks yang relevan. Dengan teks yang dipilih, melihat panel Properties di bagian bawah jendela. Pada kotak berlabel "Font", Anda harus dapat melihat pilihan default font, "Verdana, Arial, Helvetica, sans-serif". Ini berarti bahwa ketika pengunjung Anda tiba di situs Anda, teks anda akan ditampilkan menggunakan font Verdana jika ia memiliki itu tersedia pada sistem nya. Jika sistem itu tidak memiliki font Verdana, web browser akan mencoba untuk menggunakan font Arial. Dalam non-sistem Windows, font ini tidak mungkin akan tersedia. Dalam kasus seperti itu, browser akan menggunakan font ketiga ditentukan pada daftar, Helvetica. Jika tidak ada font dinamai pada sistem, halaman Anda akan ditampilkan dalam font sans-serif browser dapat menemukan.
Untuk mengubah font, klik panah bawah di drop down box dan pilih salah satu saran yang diberikan. Dreamweaver daftar set font yang umum digunakan oleh webmaster. Setiap set berisi daftar font yang agak mirip satu sama lain, sehingga jika salah satu tidak tersedia, alternatif akan (mudah-mudahan) tidak membuat website Anda terlihat terlalu drastis berbeda.
Catatan penting: meskipun Dreamweaver memungkinkan Anda untuk menambahkan ke dalam daftar dengan mengklik "Edit Daftar Font" item dalam menu drop-down, berpikir cermat sebelum Anda menambahkan beberapa font esoteris dan menggunakannya untuk website Anda. Jika Anda menggunakan font yang hanya Anda dan beberapa orang pada sistem mereka, dan tidak menentukan alternatif umum tersedia, web browser hanya akan menggunakan font default-nya (yang bervariasi dari browser ke browser dan sistem ke sistem) untuk membuat Anda halaman web. Ini akan menghasilkan halaman Anda melihat kurang ideal untuk mayoritas pengunjung Anda.
Mengubah Ukuran Font
Selain drop "Font" down box adalah "Ukuran" kotak. Hal ini memungkinkan Anda untuk mengubah ukuran font dari teks yang sedang dipilih. Secara default, ukuran font diatur ke 100%, yang berarti bahwa font akan ditampilkan dalam ukuran yang normal bergantung pada sistem default. Jika ukuran ini tidak memuaskan Anda, Anda dapat mengubah nilai, baik dengan mengetikkan nomor yang Anda inginkan, atau memilih salah satu ukuran standar dari drop down box.
Ada berbagai cara untuk menentukan ukuran font. Anda dapat menentukan dalam hal persentase dari ukuran asli, piksel, titik, dll saya anjurkan anda untuk tetap menggunakan baik "ems" atau "%" kecuali Anda memiliki persyaratan tertentu dan tahu apa yang Anda lakukan.
Hati-hati tentang membuat ukuran font terlalu kecil. Anda mungkin memiliki penglihatan yang luar biasa, tapi ingat bahwa halaman web Anda dilihat oleh orang-orang dari berbagai usia dan kemampuan visual. Lansia pengunjung serta pengguna dengan penglihatan miskin tidak mungkin dapat membaca halaman Anda jika teks terlalu kecil.
Mengubah Gaya Teks: Bold dan Miring
Untuk membuat suatu bagian tertentu dari teks tebal, pilih teks dan klik "B" tombol di panel Properties. Demikian juga, jika Anda ingin miring teks Anda, pilih dan klik tombol "Saya" tombol sebagai gantinya.
Mengubah Warna Teks
Mengganti warna teks sama mudah. Setelah Anda memilih teks, melihat panel Properties. Anda harus dapat melihat kotak hitam samping kotak lain yang bertuliskan "# 000000". Untuk mengubah warna teks, klik kotak hitam dan pilih warna. Hati-hati untuk memilih warna yang kontras dengan warna latar belakang Anda.
Bagaimana Mengubah Warna Latar Belakang
Mengubah Warna Latar Belakang Halaman Utuh
Jika Anda ingin mengubah warna latar belakang dari seluruh halaman, klik "Page Properties" tombol di bagian bawah jendela Dreamweaver. Klik "Warna latar" persegi, saat ini diatur ke abu-abu, dan mengubahnya ke warna apa saja yang Anda inginkan. Catat bahwa ini hanya mengubah bagian dari jendela yang tidak tercakup oleh header, side bar, bagian konten utama dan footer. Jika Anda tidak tahu apa yang saya maksud, coba saja. Anda dapat membatalkan perubahan yang Anda buat dengan mengklik "Edit | Undo" (atau lebih spesifik, "Edit | Undo Page Properties Set") jika Anda tidak seperti perubahan warna.
Mengubah Warna Latar Belakang Side Bar, Bagian Konten Utama, Header dan Footer
Sejauh yang saya tahu, tidak ada cara mudah dari menu atau tombol untuk mengubah warna latar belakang side bar, bagian isi utama, header dan footer. Bagi mereka yang merasa bahwa warna yang ada tidak memuaskan, ikuti panduan di bawah ini. Jika tidak, merasa bebas untuk melewati bagian ini.
Mengubah Warna Latar Belakang Bar Side
Klik di suatu tempat di side bar. Lihatlah status bar dan klik "<div#container>". Klik "Edit CSS" tombol di panel Properties. Panel CSS di sisi kanan dari Dreamweaver harus memperluas ketika Anda melakukannya. Carilah item yang disebut "latar belakang" di panel itu dan DoubleClick itu. Sebuah kotak dialog akan muncul. Klik kotak di samping "warna Background" untuk mengubah warna.
Peringatan: tidak seperti operasi lain di Dreamweaver, ada sepertinya tidak akan ada cara untuk membatalkan perubahan dengan "Edit | Undo" kecuali untuk mengatur kembali ke warna aslinya secara manual.
Mengubah Warna Latar Belakang Header dan Footer
Untuk mengubah warna dari header, klik di suatu tempat di header. Cari "<div#header>" di status bar dan klik. Sekali lagi, klik "Edit CSS" tombol, kemudian DoubleClick "latar belakang" pada panel CSS di sisi kanan layar. Anda harus mampu mengubah warna latar belakang dari kotak dialog yang muncul.
Ulangi prosedur yang sama untuk footer jika Anda ingin mengubah warna latar belakang juga. Dalam kasus footer, meskipun, Anda akan harus mencari "<div#footer>" bukan "<div#header>".
Peringatan: sekali lagi, tidak ada cara untuk membatalkan perubahan dengan "Edit | Undo".
Mengubah Warna Latar Belakang Bagian Konten Utama
Warna latar belakang dari bagian utama dari halaman web Anda, yang berisi sebagian besar teks Anda, tidak dapat dimodifikasi dalam cara yang sama seperti bagian lain.
Pertama, klik di suatu tempat di bagian utama halaman web Anda dan klik "<div#mainContent>" di status bar.
Pada panel CSS di sisi kanan dari Dreamweaver, cari baris yang mengatakan 'Properties untuk "twoColLiqLtHdr.. MainContent"'. Gerakkan mouse Anda ke garis tepat di atas kata-kata dan tarik ke atas sampai Anda dapat melihat "properti Tambah" link di bawah ini. Klik "Tambah properti". Dalam drop down box, pilih "background-color". Klik kotak warna di samping untuk mengatur warna.
Sekali lagi, perubahan yang Anda lakukan di sini tidak dapat dibatalkan dengan menggunakan "Edit | Undo" biasa metode.
Penerbitan Halaman Web Anda
Sekarang bahwa Anda telah menyelesaikan menambahkan menu navigasi dasar, mengubah font, gaya, ukuran dan warna teks Anda, halaman Anda siap untuk publikasi. Seperti sebelumnya, meng-upload (mempublikasikan) ke server web Anda dengan menggunakan "Situs | Put".
Uji halaman Anda di browser web Anda. Saat ini, meskipun Anda memiliki menu navigasi fungsional, tidak ada titik mengklik salah satu link internal di atasnya karena Anda belum membuat salah satu halaman yang mereka link ke. Di sisi lain, jika Anda telah terhubung ke situs eksternal seperti thesitewizard.com, klik pada link harus bekerja dengan benar.
lanjutke bagian 4
dudu.rojo
0 komentar:
Post a Comment