Dalam bab sebelumnya Dreamweaver tutorial ini, Anda menambahkan bar tombol sebagai menu navigasi untuk situs Anda, sehingga menyelesaikan pengembangan halaman rumah Anda.
Dalam bab ini, Anda akan menggunakan belajar bagaimana Anda dapat menggunakan alat manajemen Template Dreamweaver untuk membuat beberapa halaman di situs Anda. Alat Template melampaui memungkinkan Anda untuk menggunakan desain standar untuk semua halaman di situs Anda: keindahan terletak pada kenyataan bahwa ketika Anda memutuskan untuk mengubah desain situs Anda, Anda hanya harus mengubah template dan Dreamweaver akan secara otomatis mengupdate semua halaman yang tergantung pada template yang. Ini menyederhanakan pengelolaan sebuah website dengan banyak halaman, memungkinkan Anda untuk mengubah unsur-unsur umum dalam satu tempat.
Pada akhir bab ini, Anda akan menyelesaikan hampir semua situs web Anda, dan upload "Tentang Kami" halaman dan "Peta Situs" di samping ke halaman "Home" yang Anda upload di bab sebelumnya.
Bagi anda yang telah tiba di halaman ini tanpa membaca salah satu bab-bab sebelumnya, Anda dapat menemukan bab yang 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. Cara Membuat Template untuk Website Anda di Dreamweaver
Untuk memudahkan bagi saya untuk merujuk ke elemen yang berbeda pada halaman web Anda untuk tutorial ini, saya akan menggunakan halaman contoh ditunjukkan pada gambar di bawah ini sebagai titik acuan. Halaman Anda tentu saja akan terlihat berbeda. Namun, karena keduanya sampel dan halaman Anda diciptakan menggunakan prosedur yang sama yang diberikan dalam tutorial Dreamweaver saya, tata letak dasar dari halaman harus cukup mirip.
Start up Dreamweaver, jika Anda belum melakukannya. Buka file index.html dengan klik dua kali itu.
Klik "File | Save as Template" dari menu. Itu adalah, klik menu "File", dan ketika menu muncul, pilih "Simpan sebagai template" item. Pada kotak dialog yang muncul, klik "Simpan" tombol.
Lain kotak dialog akan muncul menanyakan apakah Anda ingin mengupdate link. Klik "Ya". Dreamweaver akan membuat folder baru di folder website komputer Anda disebut "Templates". Jika Anda melihat nama file yang ditampilkan di bagian atas jendela, Anda akan melihat bahwa Dreamweaver telah menggantikan file saat ini dengan file template. Ini adalah apa yang kita inginkan, karena kita perlu mengkonfigurasi template.
Secara default, Dreamweaver membuat template yang tidak memiliki daerah yang bisa diedit. Artinya, ketika Anda membuat halaman yang berbasis pada template Anda hanya disimpan, Anda tidak akan dapat mengubah apapun pada halaman tersebut. Untuk memperbaiki itu, kita perlu menentukan area template yang dapat dimodifikasi.
Pilih teks tebal besar "Selamat Datang" di bagian isi utama dari dokumen Anda dengan mendrag mouse Anda di atasnya. Halaman Anda mungkin tidak memiliki kata "Selamat Datang" tentu saja, tapi jika Anda melihat gambar di atas, Anda harus dapat menemukan yang setara di situs Anda. Kami akan menandai teks ini, "Selamat Datang", sebagai diedit sehingga dapat diganti dengan judul apa pun halaman yang Anda buat.
Klik "Insert | Object Template | Editable Region" pada menu. Sebuah kotak dialog akan muncul. Ketik "Halaman Judul" ke dalam kotak dan klik OK. Dreamweaver menandai bagian yang dengan isyarat visual untuk menunjukkan bahwa itu dapat diedit.
Pilih paragraf di bawah judul halaman dan yang menandainya diedit juga. Ketika diminta untuk nama untuk memberikan bagian itu diedit, pasokan itu "deskripsi Halaman".
Sejak subjudul "Produk" dan bagian yang berikut mungkin tidak hadir di halaman lain dari website, kita akan menandai seluruh bagian ini sebagai "Daerah Opsional". Untuk melakukan ini, pilih seluruh blok yang terdiri dari "Produk" subjudul, gambar di bawah dan blok teks di samping gambar dengan mouse anda. Klik "Insert | Object Template | Daerah Opsional". Sebuah kotak dialog akan muncul. Anda dapat memberikan bagian ini nama apapun yang Anda inginkan, karena isi dari blok Anda akan berbeda dari halaman sampel saya. Jika ragu, hanya menerima nama default yang diberikan.
Simpan template itu dengan mengklik "File | Save" pada menu. Anda akan diminta dengan pesan bahwa menempatkan sebuah daerah dapat diedit di blok mencegah pengguna dari menciptakan blok baru di wilayah itu. Klik OK.
Home Page
Saat ini, halaman rumah Anda, index.html, tidak dianggap oleh Dreamweaver sebagai yang berbasis pada template yang Anda buat. Karena kita ingin Dreamweaver untuk menangani semua pekerjaan duniawi dan membosankan memperbarui semua halaman kita setiap kali kita mengubah desain situs kami, kita perlu mengasosiasikan halaman dengan template.
Cara yang paling sulit untuk melakukan ini adalah untuk menimpa file index.html lama Anda dengan file yang baru dibuat berdasarkan template. Anda dapat melakukan ini tanpa kehilangan data karena template Anda diciptakan dari file index.html dengan tidak ada perubahan selain untuk menentukan daerah yang bisa diedit dan sejenisnya.
Tutup semua file terbuka. Untuk melakukan ini, klik "File | Tutup Semua".
Klik "File | New". Sebuah kotak dialog akan muncul. Anda melihat kotak dialog ini dalam bab 1. Kali ini, lihat kolom kiri dan klik "Halaman dari Template". Kolom tengah akan menampilkan informasi tentang template yang Anda buat sebelumnya, dan kolom paling kanan akan menampilkan gambar thumbnail dari template Anda. Pastikan bahwa kotak centang untuk "halaman Update ketika perubahan template" dicentang. Klik "Buat".
Klik "File | Save As". Sebuah kotak dialog akan terbuka memungkinkan Anda untuk menentukan nama file. Masukkan "index.html" (tanpa tanda kutip) atau hanya pilih "index.html" file yang muncul di jendela. Klik "Simpan". Sebuah kotak pesan muncul menanyakan apakah Anda ingin menimpa file yang ada. Klik "Ya".
Itu saja. Anda telah menggantikan index.html lama Anda dengan salinan identik, kecuali bahwa kali ini, Dreamweaver memiliki mencatat index.html sebagai tergantung pada template, sehingga waktu berikutnya Anda memodifikasi desain dari template Anda, halaman ini akan secara otomatis diperbarui. "Tentang Kami" Halaman
Banyak situs, terutama perusahaan yang menjual beberapa barang dan jasa di Internet, memiliki halaman yang dikenal sebagai halaman "Tentang Kami". Halaman ini pada dasarnya menceritakan lebih banyak pelanggan tentang perusahaan dan bisnis. Pada beberapa situs pribadi, "Tentang Kami" halaman berisi informasi tentang penulis situs. Bahkan mungkin berisi resume singkat atau curriculum vitae (CV).
Klik "File | New" lagi dan pilih "Halaman dari Template" jika belum dipilih. Sekali lagi, klik "Buat".
Atas dokumen Anda, di baris dengan "Kode", "Split", "Desain" dan "Judul", mengganti teks yang ada di kolom "Judul" dengan "Tentang Example.com" di mana "Example.com" adalah nama perusahaan Anda. Jika Anda adalah situs pribadi, Anda dapat menyebutnya "About Me" atau "Tentang-Your Name" (ganti-Your Name dengan nama Anda tentu saja).
Di daerah yang saat ini memegang diedit "Selamat Datang" (atau setara pada halaman Anda), ganti dengan "Tentang Kami".
Di wilayah diedit berlabel "Deskripsi Halaman", masukkan informasi apapun yang Anda inginkan ditampilkan tentang perusahaan Anda atau diri Anda sendiri. Perhatikan bahwa Anda tidak dibatasi untuk satu paragraf. Tekan saja tombol ENTER (atau tombol RETURN di Mac OS X) untuk membuat paragraf baru kapanpun Anda butuhkan.
Untuk keperluan tutorial ini, saya telah menggunakan teks berikut. Namun, saya sangat menyarankan Anda membuat konten Anda sendiri. Tidak ada gunanya menunggu sampai akhir tutorial sebelum memulai. Dengan bab ini, Anda akan menyelesaikan sebagian dari situs Anda kecuali untuk "Hubungi Kami" halaman (formulir umpan balik).
Example Company was created in some century in some country for the purpose of something. At the moment, what that purpose is eludes us. We do know however that we exist. Or do we?
In any case, if you are reading this and are wondering what manner of company or website this is, know this: you are not alone.
In any case, if you are reading this and are wondering what manner of company or website this is, know this: you are not alone.
(Seriously, this is just an example site created with the help of the Dreamweaver CS3 tutorial on thesitewizard.com.)
Jika Anda telah menetapkan wilayah opsional seperti saya dengan daftar "Produk" (lihat gambar di dekat awal artikel ini), dan Anda ingin menonaktifkannya, pilih "Modify | Properti Template". Sebuah kotak dialog muncul menampilkan Anda wilayah opsional yang telah Anda tetapkan. Pilih (jika belum dipilih) dengan mengklik namanya. Kemudian hapus centang kotak di samping kata "Tampilkan OptionalRegion1" (atau apa pun nama yang Anda berikan bahwa daerah). Klik OK. Wilayah Anda yang harus menghilang.
Pilih "File | Save As" dan ketik "aboutus.html" (tanpa tanda kutip) ke dalam kotak dialog yang muncul. Ini adalah nama file yang sama yang kita masuk ke dalam menu bar navigasi, sehingga sekarang bukan waktu untuk menjadi kreatif dan mulai mengubah nama atau menu tidak akan bekerja dengan benar.
Peta Situs
Sebuah Peta Situs adalah daftar lengkap dari semua dokumen di website Anda. Ini adalah alat yang berguna bagi pengunjung yang mencari halaman tertentu di situs Web Anda tetapi tidak dapat menemukan link langsung ke dari apa pun halaman mereka berada di. Ini juga baik untuk memiliki karena memungkinkan mesin pencari cara untuk menemukan semua halaman website Anda. Saya menyadari bahwa pada titik waktu ini, Anda tidak benar-benar memiliki halaman untuk daftar dalam peta situs Anda selain yang sudah di menu bar. Namun, sebagai masalah praktek yang baik, Anda masih harus membuat Peta Situs. Dalam waktu, ketika Anda menambahkan lebih banyak halaman, Peta Situs akan menjadi sangat berharga.
Sekarang Anda seharusnya tidak memiliki kesulitan membuat halaman baru dari template Anda. Melakukannya. Ganti "Judul" lapangan dengan "Peta Situs Example.com" (gunakan nama situs Anda tentu saja) dan "Selamat Datang" dengan "Peta Situs". Dalam kolom "Halaman Keterangan", membuat daftar link ke semua halaman lain dari situs Anda, satu link per baris. Jika Anda telah lupa bagaimana melakukannya, Anda dapat menemukan petunjuk dalam bab 3. Jika Anda memiliki wilayah opsional Anda tidak ingin, ingat untuk menghapusnya. Akhirnya, menyimpan halaman sebagai "sitemap.html" (tanpa tanda kutip).Penerbitan Website Hampir Lengkap
Sekarang bahwa Anda memiliki beberapa halaman untuk meng-upload, mungkin tidak efisien untuk menggunakan "Situs | Put" untuk meng-upload file, karena yang lebih berguna untuk meng-upload halaman individu. Daripada itu, klik "Situs | Sinkronisasi seluruh situs". Sebuah kotak dialog akan muncul. Pastikan bahwa di kotak "Sinkronisasi", "Seluruh Situs 'Contoh Perusahaan" (di mana "Contoh Perusahaan" akan digantikan dengan nama situs yang Anda berikan dalam bab 1) opsi yang dipilih. Dalam "Arah", periksa bahwa "Taruh file-file baru ke remote" dipilih.
Klik "Pratinjau". Ketika kotak dialog muncul dengan daftar file yang akan diupload, klik tombol kanan mouse (Control-Klik di Mac OS X) pada file template (file dalam folder "Template"). Pilih "Abaikan Seleksi" sehingga Dreamweaver tidak meng-upload file template Anda. Klik OK. Dreamweaver kemudian akan meng-upload file yang Anda tentukan.
Anda sekarang harus menguji situs Anda di browser atau browser. Situs Anda sekarang hampir selesai. Semua itu tidak memiliki adalah bentuk umpan balik, yang akan kita buat dalam bab berikutnya.Cara Memodifikasi / Revisi Template di Dreamweaver
Dengan sistem template Dreamweaver, memodifikasi desain situs Anda adalah sepele. Sebagai contoh, katakanlah bahwa Anda telah memutuskan Anda ingin untuk menunjukkan apresiasi Anda untuk thesitewizard.com untuk membantu Anda diterima, dengan menambahkan link tombol untuk thesitewizard.com, seperti berikut, ke bar sisi Anda.thesitewizard.com - Tutorial untuk webmaster
Salin tombol di atas ke folder website Anda. Cukup klik tombol mouse sebelah kanan pada gambar, pilih "Save" (atau setara) dari menu, dan simpan ke dalam folder website Anda.
Buka template Anda untuk situs. Klik dalam ruang hanya setelah menu navigasi Anda di side bar. Klik "Insert | Image" dari menu dan pilih gambar yang telah Anda hanya disimpan. Dalam bidang "Alternate text", ketik "thesitewizard.com - Tutorial untuk Webmaster". Klik tombol "OK". Pada panel "Properties" di bagian bawah halaman, masukkan "http://www.thesitewizard.com/" ke dalam kolom "Link". Dalam bidang "Perbatasan", masukkan "0" (nol, tanpa tanda kutip). Hanya samping kotak di mana Anda masukkan "0" untuk perbatasan tiga tombol kecil. Klik tombol tengah (yang "Align Center" tombol). Tombol Anda sekarang harus berpusat di side bar.
Pilih "File | Save". Klik "OK" untuk kotak pesan yang muncul. Kotak dialog lain muncul, menanyakan apakah Anda ingin mengupdate semua file berdasarkan template. Klik "Update". Kotak dialog lain muncul. Klik tombol "Start". Terakhir, klik "Close" tombol.
Ketika semuanya selesai, Anda dapat membuka semua halaman di situs Anda untuk melihat bahwa Dreamweaver telah diperbarui setiap halaman di situs Web Anda dengan perubahan Anda.
lanjut bag 6
dudu.rojo
0 komentar:
Post a Comment