Tutor Belajar Adobe Dreamwaver CS5

Oleh David Powers

Selamat datang di bagian kedua dari seri tutorial membuat website pertama Anda.
Tutorial ini menjelaskan cara membuat layout berbasis CSS halaman dalam Adobe Dreamweaver CS5. Sebuah tata letak halaman menentukan bagaimana halaman Anda akan muncul di browser, menampilkan, misalnya, penempatan menu, gambar, dan jenis lain dari konten.
Meletakkan halaman web dengan CSS (cascading style sheets) telah menjadi standar untuk desain web modern. CSS menawarkan dreamweaveribility unggul dan kontrol atas tata letak Anda, memungkinkan Anda untuk membuat elemen pada halaman dan menyempurnakan posisi mereka dengan presisi pixel. Namun, tata letak CSS bisa sulit untuk memahami dan menciptakan, dan membantu untuk memiliki beberapa latar belakang pengetahuan sebelum membangun tata letak pertama Anda dengan CSS. Anda dapat memulai dengan membaca dasar-dasartata letak halaman CSS , yang merupakan gambaran tentang bagaimana CSS bekerja layout. Untuk melihat lebih mendalam pada CSS, kita lihat di Ekstrak dari buku saya, memulai dengan CSS . Tapi membaca ini tidak diperlukan. Jika Anda menghadapi tantangan, Anda hanya dapat menyelam langsung ke tutorial ini untuk mulai membuat pertama Anda berbasis CSS layout.

Catatan: Dreamweaver CS5 datang dengan 16 indah pra-desain layout CSS yang dapat Anda gunakan sebagai titik awal untuk halaman web Anda. Tapi aku tidak ingin memulai Anda pergi dengan salah satu layout karena saya pikir sangat penting untuk mengalami bagaimana rasanya untuk membangun tata letak halaman benar-benar dari awal. Untuk informasi lebih lanjut tentang layout baru, lihat Apa yang baru di CS5 Dreamweaver layout CSS oleh Stephanie (Sullivan) Rewis.

Evaluasi tugas ke depan

Biasanya, Anda tidak mulai membangun sebuah website dengan membuka Dreamweaver dan meletakkan halaman. Langkah pertama untuk membuat sebuah website dimulai pada selembar kertas atau dalam aplikasi grafis editing seperti Adobe Fireworks atau Adobe Photoshop. Desainer grafis biasanya sketsa sebuah karya seni yang komprehensif (juga dikenal sebagai comp) untuk website yang menunjukkan kepada klien dan memastikan bahwa ide awal untuk situs bertemu dengan persetujuan klien mereka.

Periksa comp

Comp terdiri dari sejumlah elemen halaman bahwa klien telah meminta untuk website. Sebagai contoh, klien mungkin berkata, "Saya ingin memiliki logo di bagian atas halaman, navigasi yang link ke halaman-halaman lain, bagian untuk sebuah toko online, dan tempat di mana saya dapat menyisipkan klip video." Berdasarkan pembahasan itu, desainer dimulai perencanaan tata letak situs dan menciptakan sketsa halaman sampel yang memenuhi persyaratan klien.
Tutorial ini menyediakan Anda dengan comp diselesaikan dan disetujui untuk Majalah Centang, sebuah publikasi fiksi yang membutuhkan sebuah website. Sebagai web desainer, tugas Anda adalah untuk mengubah comp ke dalam halaman web bekerja (kemungkinan besar dengan bantuan desainer grafis lainnya). Gambar 1 menunjukkan comp dari halaman Majalah Centang rumah tata letak.

Gambar 1. Sebuah comp tata letak Centang Majalah halaman rumah

Anda akan melihat bahwa desainer grafis telah menyediakan comp halaman web yang mencakup sejumlah daerah konten, serta beberapa ide grafis. Perhatikan juga bahwa teks Lorem Ipsum teks (teks placeholder palsu Latin) dan bahwa judul dalam kolom bawah belum final (dua dari mereka adalah identik). Meskipun konten halaman masih ragu, Anda masih dapat menggunakan Dreamweaver untuk lay out desain ini.
Anda juga dapat membuka file comp asli jika Anda ingin melihatnya di layar komputer. Anda dapat menemukan comp, check_comp.gif, dalam folder gambar dari folder check_cs5 yang Anda disalin ke hard drive Anda dalam Bagian 1 dari seri tutorial, Menyiapkan situs Anda dan file proyek. Anda bahkan mungkin ingin mencetak comp sehingga Anda dapat memilikinya di depan Anda ketika Anda membuat halaman Anda.

Apa yang harus dilakukan jika ada yang salah

Ketika belajar teknik baru atau bekerja dengan perangkat lunak asing, mudah untuk membuat kesalahan. Instruksi seluruh seri tutorial ini mencoba untuk mengantisipasi kesalahan umum, dan setiap bagian berisi file ZIP menunjukkan bagaimana kode harus melihat ketika Anda selesai. Jika halaman Anda tidak terlihat seperti yang Anda harapkan, gunakan Dreamweaver Berkas Bandingkan fitur untuk membandingkan file Anda dengan versi download. Untuk menggunakan Bandingkan file, Anda membutuhkan pihak ketiga utilitas file perbandingan, seperti WinMerge untuk Windows. Pada Mac, Anda dapat menggunakan file alat perbandingan dalam TextWrangler . Keduanya bebas.
Penyebab paling umum kesalahan yang sengaja melewatkan langkah dalam petunjuk, atau salah ketik ID atau properti CSS. Menelusuri kembali langkah Anda untuk melihat di mana Anda mungkin telah pergi salah. Terkadang, ide terbaik adalah untuk mulai lagi dari awal. Ini dapat membuat frustrasi, tetapi Anda dapat belajar banyak dari kesalahan Anda.
Tentu saja, jika Anda terjebak, meminta bantuan. Tempat terbaik adalah di Forum Diskusi Umum Dreamweaver , di mana Anda akan menemukan ahli dan pemula sama saling membantu.
Di atas segalanya, menikmati sendiri. Desain web kadang-kadang dapat menantang, tapi juga sangat menyenangkan.

Membuat dan menyimpan halaman baru

Setelah Anda telah mengatur situs dan memeriksa comps Anda (jika ada), Anda siap untuk mulai membangun halaman web. Anda akan mulai dengan membuat halaman baru, dan menyimpannya dalam folder root check_cs5 lokal dari situs Anda. Halaman yang akhirnya menjadi halaman rumah untuk Majalah Check.

Catatan: Jika Anda belum membuat folder situs check_cs5 lokal, Anda harus melakukannya sebelum melanjutkan. Untuk petunjuk, lihat Bagian 1 dari seri tutorial Menyiapkan situs Anda dan file proyek.

Dalam Dreamweaver, pastikan situs Majalah Check dapat dipilih pada panel Files (lihat Gambar 2).

Gambar 2. Sebelum mulai bekerja pada sebuah situs, pilih pada panel Files.

Pilih File> New.
Dalam kategori Halaman Kosong dari kotak dialog New Document, pilih HTML dari daftar Jenis Halaman, pilih dari daftar Layout (dua opsi sudah harus dipilih secara default), dan klik Buat.

Catatan: Dalam daftar Jenis Halaman di bawah pilihan Anda akan melihat semua layout CSS yang datang dengan Dreamweaver. Kemudian Anda dapat kembali ke kotak dialog ini untuk mengeksplorasi berbagai jenis layout CSS tersedia.

Pilih File> Save, atau tekan Ctrl + S (Windows) atau cmd + S (Mac OS X).
Dalam kotak dialog Save As, pastikan Anda berada di folder yang Anda check_cs5 didefinisikan sebagai folder root lokal situs. Dreamweaver seharusnya dipilih secara otomatis, namun jika folder lain dipilih, klik tombol Akar Situs di bagian bawah kotak dialog (itu di sebelah kanan di Windows, dan di sebelah kiri pada versi Mac).
Masukkan index.html pada kotak File Name teks dan klik Simpan. Nama file sekarang muncul di tab dokumen baru.
Pada kotak Judul Dokumen teks di bagian atas dokumen baru, ketik Periksa Majalah (lihat Gambar 3).

Gambar 3. Tambahkan judul halaman.

Ini adalah judul halaman Anda (yang berbeda dari nama file). Pengunjung situs Anda akan melihat judul ini di bar judul browser ketika mereka melihat halaman dalam browser web.

Klik halaman sekali untuk memindahkan titik penyisipan di luar kotak Judul Dokumen teks. Anda akan melihat bahwa tanda bintang (*) muncul di sebelah nama file di tab dokumen. Tanda bintang ini menunjukkan bahwa file telah berubah dan bahwa Anda perlu untuk menyimpan file jika Anda ingin menyimpan perubahan.
Pilih File> Save untuk menyimpan halaman Anda.

Menyisipkan tag DIV

Jika Anda melakukan salah satu bacaan latar belakang dianjurkan pada awal tutorial ini (misalnya, dasar-dasar tata letak halaman CSS ), maka Anda sudah tahu bahwa div tag-tag HTML bahwa dalam kebanyakan kasus bertindak sebagai wadah untuk teks, gambar, dan halaman lain elemen-adalah blok bangunan dasar dari tata letak CSS. Anda menempatkan tag div di halaman, menambahkan konten kepada mereka, dan menggunakan CSS untuk posisi mereka. Tidak seperti sel tabel, yang dibatasi untuk yang ada dalam baris dan kolom dari sebuah tabel, tag div jauh lebih dreamweaverible.
Jika Anda melihat comp desain lagi (lihat Gambar 1 ), Anda akan melihat bahwa halaman dibagi menjadi beberapa bagian yang berbeda: sebuah logo banner di bagian atas halaman, area grafis sentral di tengah halaman, dan kemudian bagian ketiga bawah yang berisi tiga kolom terpisah di dalamnya. Bagian-bagian ini semua sesuai untuk memisahkan tag div yang berfungsi sebagai wadah untuk isi dalam diri mereka. Sebenarnya, itu adalah sedikit lebih rumit dari itu, tapi jangan khawatir tentang itu sekarang.
Mulai dengan membuat tag, div yang paling dasar yang paling penting, dan paling umum untuk CSS layout-wadah. Div kontainer berisi semua tag lain dalam tata letak. Jika Anda tata letak CSS adalah seperti bak pasir, dan Anda akan menempatkan bola pantai, ember, beberapa kerang, dan payung di kotak pasir, maka tag kontainer adalah tepi luar sandbox. Hal ini mendefinisikan bentuk, dimensi, dan keterbatasan dari sandbox, dan memegang segala sesuatu bersama-sama.

Pastikan tombol Design dipilih di kiri atas jendela dokumen, dan klik sekali pada halaman untuk memastikan bahwa titik penyisipan adalah di sudut kiri atas halaman (lihat Gambar 4).

Gambar 4. Tempatkan titik penyisipan di sudut kiri atas halaman.

Jika tidak sudah diperluas, memperluas panel Insert dengan mengklik tab-nya atau dengan memilih Window> Sisipkan. (Dalam ruang kerja Designer [default Dreamweaver ruang kerja], panel Insert di sisi kanan dari interface Dreamweaver, di atas panel Files.)
Tampilan default untuk panel Insert adalah kategori Umum. Pastikan kategori umum dipilih, dan klik Insert Tag DIV (lihat Gambar 5).

Gambar 5. Klik Insert Div Tag dalam kategori umum dari panel Insert.

Pada kotak Insert Div Tag dialog, biarkan Pada Titik Penyisipan dipilih dalam menu pop-up Insert, meninggalkan teks Kelas kosong kotak, wadah ketik di kotak teks ID, dan klik OK.

Div baru muncul pada halaman Anda, dikelilingi oleh garis putus-putus dalam tampilan Design, dan dengan beberapa teks placeholder (lihat Gambar 6).

Gambar 6. Teks placeholder mengidentifikasi div oleh ID.

Catatan: Jika Anda tidak dapat melihat garis putus-putus sekitarnya div, pilih View> Visual Aids, dan pastikan ada tanda centang di samping Tata Letak CSS Uraian. Mengklik salah satu pilihan dalam submenu Aids Visual matikan mereka dan mematikan.

Pilih teks placeholder dan menghapusnya, pastikan Anda menghapus hanya teks. Jika garis div menghilang, ulangi langkah 4. Teks placeholder harus secara otomatis dipilih saat div dimasukkan, sehingga semua yang perlu Anda lakukan adalah dengan menekan Hapus.
Pada panel Insert, klik Insert Div Tag lagi.
Pada kotak Insert Div Tag dialog, pilih "Setelah awal tag" dari menu pop-up Sisipkan. Ini mengaktifkan pop-menu baru bersama, yang berisi daftar tempat di mana Dreamweaver dapat menyisipkan div baru. Saat ini, para kandidat hanya merupakan tag dan
.

Anda ingin sarang div baru di dalam div kontainer, jadi pilih

(lihat Gambar 7).

Gambar 7. Nesting div baru di dalam div kontainer.

Biarkan teks Kelas kosong kotak, banner ketik di kotak teks ID, dan klik OK.

Div baru muncul pada halaman Anda, dan di dalamnya Anda dapat melihat isi tempat untuk div banner. Tapi dari mana div wadah pergi? Nah, itu ada, Anda tidak bisa melihatnya dalam tampilan Design. Cara terbaik untuk melihatnya adalah dengan melihat kode.

Klik tombol pandangan Split (lihat Gambar 8).

Gambar 8. Klik tombol pandangan Split.

Tampilan split menampilkan kode yang mendasari di sebelah kiri jendela dokumen. Anda dapat melihat tag div kontainer, dan di dalamnya adalah tag div spanduk baru, seperti yang direncanakan
(lihat Gambar 9).

Gambar 9. Wadah dan tag div di spanduk pandangan Split.

Catatan: Bekerja dalam pandangan Split (Kode resmi dipanggil dan tampilan Design) adalah cara yang bagus untuk belajar bagaimana menghasilkan kode Dreamweaver. Ketika Anda memasukkan sesuatu dalam tampilan Design, Anda melihat kode bahwa Dreamweaver menulis dalam tampilan Kode. Ini sangat berguna jika Anda memiliki monitor besar, karena Anda dapat melihat halaman web dalam tampilan Desain dan kode yang mendasari keduanya pada saat yang sama.

Karena Anda melihat kode baku, mari kita terus bekerja di sana. Jika Anda sempit untuk ruang dalam pandangan Split, klik tombol Kode di bagian atas jendela dokumen.

Tempatkan titik Penyisipan setelah tag penutup div-spanduk itu

-dan tekan Enter (Windows) atau Return (Mac OS X) untuk membuat baris baru (lihat Gambar 10).

Gambar 10. Tekan Enter / Kembali setelah tag penutup div spanduk itu.

Catatan: Perhatikan-hati ke tempat Anda membuat baris baru. Anda masih harus berada di dalam div

kontainer. Tag penutup div kontainer adalah pada baris 12 Gambar 10.

Dengan titik Penyisipan masih pada baris baru, klik Masukkan Tag Div pada panel Insert.
Pada kotak Insert Div Tag dialog, biarkan Pada Titik Penyisipan dipilih dalam menu pop-up Insert, meninggalkan teks Kelas kosong kotak, main_image ketik di kotak teks ID, dan klik OK.

Tag div baru muncul pada halaman Anda, dan di dalamnya Anda dapat melihat teks placeholder. Ini tag div baru di dalam div kontainer, pada tingkat yang sama dengan div banner.

Tip: Saat Anda membuat ID baru hati-hati untuk ruang ekstra baik sebelum atau setelah ID. Sebagai contoh, memastikan bahwa ketika Anda mengetik ID main_image, tidak ada spasi tambahan setelah "e" dalam gambar. Jika ada, dapat menyebabkan masalah CSS kemudian.

Tempatkan titik Penyisipan setelah penutupan div main_image baru

tag dan tekan Enter (Windows) atau Return (Mac OS X).

Pada panel Insert, klik Sisipkan Tag Div.

Pada kotak Insert Div Tag dialog, biarkan Pada Titik Penyisipan dipilih dalam menu pop-up Insert, meninggalkan teks Kelas kosong, ketik left_column dalam kotak teks ID, dan klik OK.

Tempatkan titik Penyisipan setelah penutupan div left_column baru

tag dan tekan Enter (Windows) atau Return (Mac OS X).

Pada panel Insert, klik Sisipkan tag DIV.

Pada kotak Insert Div tag dialog, biarkan Pada Titik Penyisipan dipilih dalam menu pop-up Insert, meninggalkan teks Kelas kosong, ketik center_column dalam kotak teks ID, dan klik OK.

Sekali lagi-dengan perasaan-tempat titik Penyisipan setelah penutupan div center_column baru tag dan tekan Enter (Windows) atau Return (Mac OS X).

Pada panel Insert, klik Sisipkan tag Div.

Pada kotak Insert Div tag dialog, biarkan Pada Titik Penyisipan dipilih dalam menu pop-up Insert, meninggalkan teks Kelas kosong, ketik right_column dalam kotak teks ID, dan klik OK.

Kode Anda sekarang harus terlihat seperti yang ditunjukkan pada Gambar 11.

The HTML code after adding all six divs.

Gambar 11. Kode HTML setelah menambahkan semua enam divs.

Jika Anda dalam tampilan Split, tekan F5 atau klik pada semester Design view dari jendela Document untuk memperbarui tampilan Design. Atau, klik tombol Design untuk kembali ke tampilan Design.

Semua divs Anda ditumpuk satu di atas yang lain dan meregangkan lebar penuh halaman. Ini adalah perilaku standar sampai Anda membuat aturan CSS untuk mereka.

Simpan halaman (File> Save).

Buat style sheet baru

Sekarang bahwa Anda memiliki tag div Anda di tempat, langkah berikutnya adalah memformat dan posisi mereka dengan CSS. CSS singkatan dari Cascading lembar-gaya koleksi aturan pemformatan yang mengontrol tampilan dari konten pada halaman web. Menggunakan CSS untuk memformat halaman memisahkan konten dari presentasi. Isi dari halaman Anda-kode HTML-berada dalam file HTML, dan aturan CSS mendefinisikan penyajian kode berada di file lain, style sheet eksternal.

Catatan: Anda juga dapat meletakkan aturan-aturan CSS di bagian kepala dari dokumen, atau inline dengan kode itu sendiri. Namun, file eksternal adalah cara yang paling efisien menggunakan CSS, karena perubahan yang dibuat untuk aturan dalam style sheet eksternal secara otomatis diterapkan ke setiap halaman yang melekat padanya.

Pilih File> New.
Pada kotak dialog New Document, pastikan bahwa kategori Halaman Kosong dipilih, pilih CSS dari kolom Jenis Page (lihat Gambar 12), dan klik Buat.

Gambar 12. Kotak dialog New Document.

Sebuah style sheet kosong muncul dalam jendela dokumen. Pandangan Desain dan tombol split tampilan dinonaktifkan. File CSS adalah file teks saja-mereka isinya tidak dimaksudkan untuk dilihat di browser.
Pilih File> Save.

Dalam kotak dialog Save As, membuat folder baru yang disebut gaya di root situs, pilih folder baru, dan menyimpan file dalam folder gaya sebagai check_cs5.css.

Lima divs di index.html yang bersarang di dalam div kontainer. Untuk pusat konten pada halaman, Anda perlu membuat aturan style untuk div wadah dengan memberikan lebar tetap dan pengaturan margin kiri dan kanan ke auto .

Untuk membuat aturan style untuk div (atau tag lainnya) yang memiliki ID, Anda awalan ID dengan tanda hash (#). Jadi pemilih CSS untuk div kontainer adalah #container .

Catatan: CSS adalah case-sensitive. Ejaan ID harus sama seperti dulu ketika memasukkan tag div. Jadi, jika Anda menggunakan huruf kapital awal, pemilih CSS akan #Container . Juga, pastikan tidak ada spasi antara tanda hash dan ID.

Ketik kode berikut pada style sheet:

#container { width: 968px; background:
#FFF; margin: 0 auto; padding-left: 10px; padding-right: 10px; overflow:
hidden; }

Saat Anda mengetik, Dreamweaver menggunakan petunjuk kode untuk menyarankan pilihan untuk menyelesaikan entri Anda. Tekan Enter (Windows) atau Return (Mac OS X) ketika Anda melihat kode yang Anda inginkan, dan membiarkan Dreamweaver menyelesaikan mengetik untuk Anda.
Ketika mengetik nilai-nilai pixel, tidak meninggalkan ruang antara jumlah dan px . Misalnya, harus 968px , bukan 968 px .
Jangan lupa untuk menyertakan tanda titik koma di akhir setiap baris, setelah nilai properti.
Setelah selesai, kode akan terlihat seperti yang ditunjukkan pada Gambar 13.

Gambar 13. Aturan gaya untuk div kontainer.

Setiap properti dalam aturan baru Anda berarti sesuatu yang spesifik untuk div kontainer. Yang pertama- width -adalah yang paling jelas. Ini menentukan lebar div wadah untuk 968 piksel. Anda sedang mengatur warna latar belakang putih (# FFF), dan menyatakan 0 piksel untuk margin atas dan bawah dari wadah, dan auto untuk margin kiri dan kanan wadah. (Ini secara efektif pusat wadah di tengah halaman ketika pengguna pandangan dalam browser.) Untuk padding, Anda telah ditentukan 10 pixel di kanan dan kiri, dan Anda telah ditentukan overflow tersembunyi, yang memaksa aset besar seperti gambar untuk tetap dalam batas-batas tag kontainer mereka.

Tip: Untuk informasi lebih lanjut tentang properti CSS, periksa buku O'Reilly referensi disertakan dengan Dreamweaver. Untuk menampilkan panduan, pilih Bantuan Referensi> dan pilih O'Reilly Referensi CSS dari menu pop-up pada panel Referensi. Ini berisi rincian CSS2, ditambah beberapa non-standar CSS properti.

Simpan style sheet.

Selanjutnya Anda akan melampirkan lembar gaya baru ke halaman index.html.

Pasang style sheet baru

Untuk memasang style sheet, ikuti langkah berikut:

Klik tab untuk halaman index.html dan pastikan Anda melihat halaman dalam tampilan Design. (Jika Anda masih dalam tampilan Code, klik tombol Design view.) Halaman Anda akan terlihat persis seperti Gambar 14.

Gambar 14. Halaman index.html dalam tampilan Design sebelum memasang style sheet.

Meskipun Anda membuat aturan CSS kompleks untuk div kontainer, halaman masih terlihat sama seperti sebelumnya. Hal ini karena style sheet CSS belum terpasang ke halaman. Bila Anda memasang style sheet untuk halaman, #container aturan yang Anda buat dalam style sheet akan memformat div dengan "wadah" id pada halaman web Anda.

Buka panel CSS Styles dengan mengklik tab-nya. (Dalam ruang kerja Designer [default Dreamweaver ruang kerja], CSS Styles kelompok panel terletak di bawah panel Insert. Jika tidak, Anda selalu dapat memilih Window> CSS Styles untuk menampilkannya.)

Anda akan melihat bahwa CSS Styles panel habis (kecuali pesan, "(tidak ada gaya ditentukan)") karena tidak ada aturan CSS diterapkan ke halaman ini.

(Opsional) Klik dua kali panel Insert untuk menutupnya dan menciptakan lebih banyak ruang.
Di sudut kanan bawah dari panel CSS Styles, klik tombol Lampirkan Style Sheet (lihat Gambar 15).

Gambar 15. Klik tombol Lampirkan Style Sheet.

Pada kotak dialog Lampirkan Lembar Eksternal Style, klik tombol Browse. Ini akan meluncurkan Style Sheet kotak dialog Pilih. Arahkan ke style sheet check_cs5.css yang Anda buat dalam folder gaya, pilih, dan klik OK (Windows) atau Pilih (Mac OS X).
Klik OK untuk menutup Lampirkan Style Sheet kotak dialog Eksternal.

Perhatikan apa yang terjadi pada halaman. Anda dapat langsung melihat bahwa div kontainer ditambahkan padding dari 10 pixel di kiri dan kanan. Tergantung pada ukuran jendela dokumen Anda, Anda juga mungkin akan melihat bahwa div kontainer tampak berpusat pada halaman. Itu karena jika Anda memiliki ruang ekstra (selain lebar 968-pixel yang Anda tentukan), wadah ini juga akan memiliki "auto" margin pada sisi kiri dan kanan. Ini secara efektif berarti bahwa browser akan membuat persis jumlah yang sama ruang pixel ke kiri dan kanan div kontainer, sehingga menciptakan efek yang terpusat.

Simpan halaman.
Jalankan kursor anda ke atas perbatasan div kontainer sampai Anda melihat garis merah, dan kemudian klik untuk memilih div kontainer. Gambar 16 menunjukkan apa yang harus Anda lihat saat div wadah dipilih.

Catatan: Jika Anda mengalami kesulitan memilih perbatasan div kontainer, klik di dalam salah satu divs

telah Anda buat, dan pilih dalam Tag selector di bagian bawah jendela dokumen.

Berikut Dreamweaver, kepadamu rendering visual yang bagus tentang bagaimana aturan CSS berlaku untuk elemen kontainer. Naungan abu-abu terang pada sisi kiri dan kanan div kontainer menunjukkan padding 10-pixel, dan ketika Anda membawa kursor di atas daerah tersebut, Dreamweaver menampilkan tooltip yang memberitahu Anda bahwa. Demikian pula, daerah biru terang di bagian sisi kiri dan kanan paling luar dari wadah menunjukkan margin mobil. Sekali lagi, besarnya margin otomatis yang menampilkan dalam Dreamweaver tergantung pada ukuran jendela dokumen Anda. Jika Anda bekerja di default Dreamweaver Designer ruang kerja, dan Anda membuat jendela dokumen Anda lebih kecil dengan menyeret daerah panel merapat di sebelah kanan, Anda akan melihat margin otomatis hilang sebagai ruang kurang tersedia pada halaman.

Catatan: Jika rendering visual dari padding dan margin gagal untuk menampilkan, pilih View> Visual Aids, dan pastikan pilihan berikut memiliki tanda cek di samping mereka: Tata Letak CSS Box Model dan Layout CSS Uraian.

Klik tombol Periksa di bagian atas jendela dokumen (lihat Gambar 17).

Gambar 17. Klik tombol Periksa.

Ini adalah fitur baru dalam Dreamweaver CS5. Ternyata di Live View dalam CSS Periksa mode. Garis putus-putus dari divs hilang, dan Anda melihat halaman seperti itu akan terlihat pada browser. Bahkan, Anda melihat halaman dalam browser View Live menggunakan mesin browser WebKit yang kekuatan Safari dan Google Chrome browser.

Pindahkan kursor anda ke atas divs di tengah halaman. Ketika Anda bergerak ke atas atau bawah, div setiap disorot dengan warna biru terang.
Pindahkan kursor Anda ke kiri dari teks tempat dudukan (lihat Gambar 18).

Ini menyoroti div kontainer. Div itu sendiri disorot dengan warna biru. Padding 10-piksel di kedua sisinya disorot dalam warna ungu, dan margin mobil yang disorot dengan warna kuning. Mampu melihat efek dari aturan style anda seperti ini membuatnya menjadi jauh lebih mudah untuk memahami efek yang mereka miliki di tata letak Anda.

Klik Live View untuk kembali ke Design view dan matikan CSS Periksa mode.

Tambahkan gambar utama

Sekarang bahwa Anda memiliki semua divs Anda di tempat dan style sheet yang melekat pada halaman, Anda siap untuk membuat aturan CSS sisa tata letak, dan menerapkannya pada elemen yang sesuai pada halaman. Tapi pertama, Anda harus berpikir tentang dua gambar utama: banner di bagian atas, dan gambar besar seorang pria berdiri di samping refleksi dari pohon sawit di dinding kaca.

Dengan CSS, Anda dapat menambahkan gambar latar belakang untuk setiap elemen HTML, seperti div. Namun, gambar latar belakang harus digunakan hanya untuk tujuan dekoratif. Secara default, browser mematikan gambar latar belakang saat halaman dicetak. Gambar yang penting harus dimasukkan langsung dalam HTML, dengan menggunakan (img) tag. Gambar-gambar di halaman ini memainkan peranan yang berbeda, sehingga mereka perlu ditangani secara berbeda.

Masukkan gambar banner dengan tag (img)

Gambar banner di atas muncul pada semua halaman dan mengidentifikasi situs Majalah Centang, sehingga tidak sesuai untuk gambar latar belakang.

Klik di dalam div spanduk grafis dan menghapus semua teks placeholder sehingga div banner adalah kosong.

Pada panel Insert, klik Gambar. Jika pertama kali Anda telah menggunakan Gambar, submenu akan terbuka, menampilkan berbagai pilihan. Pilih yang pertama (Gambar), seperti yang ditunjukkan pada Gambar 19. Ini membuka Image Source kotak dialog Pilih.

Gambar 19. Memilih Foto di submenu Images.

Catatan: Setelah pertama kalinya, Dreamweaver mengingat pilihan Anda yang paling terakhir, dan

membuatnya default. Untuk memilih opsi yang berbeda, klik panah bawah kecil di sebelah

kanan ikon pada panel Insert.

Pada kotak dialog Pilih Sumber Gambar, arahkan ke folder foto dalam situs Majalah Centang, dan pilih banner.jpg. Klik OK (Windows) atau Pilih (Mac). Ini membuka Aksesibilitas Tag Gambar Atribut kotak dialog.
Ketika Anda menyisipkan gambar dalam halaman HTML, Anda perlu menambahkan teks alternatif yang memberikan keterangan singkat dari gambar untuk kepentingan para penyandang cacat visual. Ketika mereka mengunjungi situs Anda menggunakan pembaca layar-bantu teknologi yang membaca isi dari halaman web keras-teks alternatif memberi mereka indikasi verbal dari apa yang ada di layar. Teks alternatif juga ditampilkan di tempat gambar jika pengunjung memiliki gambar dimatikan dalam browser, atau jika gambar Anda hilang. Ketik Periksa Majalah di "Alternate teks" kotak teks (lihat Gambar 20), dan klik OK.

Gambar 20. Menambahkan teks alternatif untuk gambar.

Catatan: gambar Murni dekoratif biasanya harus ditambahkan sebagai gambar latar belakang dengan

CSS, tetapi jika Anda menempatkan mereka secara langsung dalam HTML, pilih dari

"Alternatif teks" menu pop-up. Ini memasukkan kosong alt="" atribut dalam tag.

"Deskripsi panjang" pilihan ini dimaksudkan untuk gambar yang kompleks, seperti grafik atau

diagram, dan harus berisi URL dari deskripsi teks konten. Link ke deskripsi teks terlihat hanya

oleh pembaca layar.

5. Halaman Anda sekarang harus terlihat seperti Gambar 21, dengan gambar banner duduk di atas

penampung div tersisa.

Gambar 21. Gambar banner di div atas.

Masukkan gambar utama sebagai latar belakang

Ketika tata letak selesai, teks akan ditambahkan di depan gambar utama, yang terutama dekoratif pula. Jadi, kali ini, Anda akan menggunakan CSS untuk memasukkannya sebagai gambar latar belakang untuk div main_image.

Tempatkan titik penyisipan di div main_image, dan menghapus semua teks placeholder. Setelah Anda menghapus karakter terakhir, maka akan terlihat seperti div telah benar-benar menghilang. Jangan khawatir, itu masih ada. Jangan klik mana saja di window Dokumen sebelum melanjutkan ke langkah berikutnya.
Di sudut kanan bawah dari panel CSS Styles, klik tombol CSS New Rule (lihat Gambar 22).

Gambar 22. Klik tombol CSS New Rule.

Selama titik Insersi Anda berada di div main_image ketika Anda mengklik tombol, CSS New Rule kotak dialog secara otomatis harus menunjukkan pengaturan yang sesuai untuk pemilih CSS (lihat Gambar 23).

Gambar 23. CSS New Rule kotak dialog menunjukkan jenis dan nama pemilih.

Dreamweaver mendeteksi bahwa titik Penyisipan dalam div main_image, yang bersarang di dalam div kontainer, dan ini menunjukkan menggunakan senyawa pemilih #container #main_image . Area teks di bawah kotak teks Nama Pemilih menjelaskan arti pemilih ini.
Meskipun itu benar, segala sesuatu di halaman tersebut bersarang di dalam div kontainer, sehingga Anda tidak perlu terlalu spesifik.

Klik tombol Kurang Tertentu. Hal ini akan mengubah nilai dalam kotak teks Nama Selector untuk #main_image , yang adalah apa yang Anda inginkan. Secara teknis, Jenis menu pop-up Pemilih sekarang harus di set ke ID. Namun, jangan melakukannya. Jika Anda melakukannya, Dreamweaver membersihkan nilai yang ada dari kotak teks Nama Pemilih.
Biarkan Jenis menu pop-up diatur ke Pemilih Senyawa, dan pastikan check_cs5.css dipilih dari menu Peraturan Definisi pop-up. Kemudian klik OK. Aturan CSS definisi kotak dialog muncul, menunjukkan bahwa Anda mendefinisikan properti untuk baru #main_image aturan.
Pilih kategori Latar Belakang di kolom Kategori.
Dalam kategori Background, klik tombol Browse di sebelah kotak teks Latar Belakang-gambar.
Pada kotak dialog Pilih Sumber Gambar, arahkan ke folder gambar di dalam situs Majalah Check.
Pilih grafis main.jpg dan klik OK (Windows) atau Pilih (Mac OS X).
Pilih no-repeat dari menu Latar Belakang mengulang-pop-up. Grafik main.jpg sekarang didefinisikan sebagai gambar latar belakang untuk div main_image (lihat Gambar 24).

Gambar 24. Mengatur gambar latar belakang untuk div main_image.

Pilih kategori Positioning di kolom Kategori. Dalam kategori Positioning, lakukan hal berikut:
- Pilih relative dari menu pop-up Posisi.
- Ketik 968 di kotak teks dan pilih px Lebar dari menu pop-up ke kanan.
- Tipe 376 di kotak teks Tinggi dan pilih px dari menu pop-up ke kanan.
- Klik OK.
Grafik main.jpg muncul di div main_image, dan dimensi dari div ditetapkan.
Biasanya, itu bukan ide yang baik untuk memberikan div ketinggian tetap, karena div mengembang atau tertular secara otomatis, tergantung pada jumlah teks atau konten lain di dalamnya. Namun, dalam hal ini tetap tinggi diperlukan, karena Anda perlu div menjadi sama tingginya dengan gambar latar belakang. Tanpa ketinggian dinyatakan dalam CSS, div akan runtuh apa-apa, dan gambar latar belakang tidak akan ditampilkan.
Saya akan menjelaskan alasan untuk menetapkan Posisi untuk relative dalam Bagian 4 dari seri tutorial, ketika Anda akan menambahkan beberapa teks ke div main_image.
Pilih File> Save All Related Files untuk menyimpan halaman dan style sheet.

Gambar 25 menunjukkan apa halaman Anda akan terlihat seperti pada saat ini.

Gambar 25. Halaman index.html setelah pengaturan properti untuk div main_image.

Posisi kolom

Tugas besar terakhir untuk layout dasar index.html adalah untuk menyusun ke dalam urutan kolom di bagian bawah halaman. CSS mengkategorikan elemen yang paling HTML sebagai blok-tingkat atau inline. Unsur blok-tingkat dimulai pada baris baru sendiri, dan memaksa elemen berikut ke baris berikutnya, sedangkan elemen inline meringkuk bersama satu sama lain. Khas blok-tingkat elemen termasuk judul, paragraf, dan divs. Teks di dalam paragraf dan gambar merupakan elemen inline.
Sebelum pindah kolom ke posisi, Anda perlu melakukan sedikit perhitungan. Gambar utama adalah 968 piksel lebar. Itu tidak membagi secara merata dengan 3, tapi Anda perlu sedikit bernapas lega antara setiap kolom, misalnya 10 piksel. Jadi, jika Anda membagi 948 dengan 3, Anda mendapatkan 316. Begitulah lebar setiap kolom perlu. Hal ini juga terjadi menjadi lebar dari gambar di bagian atas setiap kolom.

Jika monitor Anda cukup luas, cara terbaik untuk bekerja adalah dalam pandangan Split, menggunakan fitur terkait Dreamweaver file. Check_cs5.css dekat dengan mengklik X di tab-nya, sehingga hanya index.html terbuka.
Klik check_cs5.css di toolbar Related Files tepat di bawah tab untuk index.html. Ini membuka style sheet dalam pandangan Split, sementara meninggalkan index.html terlihat dalam tampilan Design (lihat Gambar 26).

Gambar 26. Menggunakan file yang terkait, Anda dapat bekerja pada style sheet dan melihat halaman Anda pada waktu yang sama.

Sekarang Anda dapat mengedit style sheet, dan melihat perubahan dalam tampilan Design.

Tip: Jika Anda sempit untuk ruang, drag bar pusat untuk mengubah ukuran jendela. Anda juga dapat membuat ruang tambahan dengan menekan F4 untuk menyembunyikan semua panel. Tekan F4 lagi untuk memulihkan mereka.

Semua kolom harus 316 pixel, Anda dapat menerapkan lebar yang sama untuk semua itu dengan menciptakan pemilih dikombinasikan untuk tiga divs. Tambahkan aturan gaya berikut di bagian bawah dari style sheet:

#left_column, #center_column, #right_column { width: 316px; }

Tips: Kode mengisyaratkan dalam Dreamweaver CS5 adalah super-pintar. Ia mengakui kombinasi karakter unik dalam properti CSS. Daripada mengetik widt sebelum Dreamweaver memilih width , hanya dt tipe untuk melompat ke sana, lalu tekan Enter (Windows) atau Return (Mac OS X) untuk memasukkan width: dalam style sheet Anda. Trik ini bekerja dengan semua petunjuk kode, bukan hanya CSS.

Memisahkan penyeleksi ID untuk tiga divs dengan koma menerapkan aturan yang sama untuk masing-masing.

Klik di Design view (atau tekan F5) untuk me-refresh halaman. Kolom sekarang jauh lebih sempit, tapi mereka masih ditumpuk di atas satu sama lain (lihat Gambar 27). Itu karena mereka blok-tingkat elemen.

Gambar 27. Divs kolom masih ditumpuk di atas satu sama lain.

Untuk mendapatkan mereka untuk duduk bersama satu sama lain, Anda harus menggunakan float properti. Posisi titik Penyisipan setelah koma di akhir baris dalam aturan gaya baru Anda buat, dan tekan Enter (Windows) atau Return (Mac OS X). Dreamweaver menampilkan petunjuk kode untuk properti yang tersedia. Type f dan tekan Enter / Return to menyisipkan float: . Kemudian ketik l (huruf kecil L) dan tekan Enter / Return to menyisipkan left . Jangan lupa untuk menambahkan tanda titik koma di akhir baris.
Segarkan Desain tampilan dengan mengklik di dalamnya atau menekan F5. Kolom sekarang harus bersama satu sama lain di bagian bawah halaman.
Akhirnya, Anda harus menambahkan margin antara kolom. Anda melakukan ini dengan menambahkan margin 10-piksel kiri ke pusat dan kolom kanan. Tambahkan aturan gaya berikut di bagian bawah dari style sheet:

#center_column, #right_column { margin-left: 10px; }

Seperti aturan gaya sebelumnya, properti yang sama ditugaskan untuk beberapa elemen dengan daftar pemilih mereka dipisahkan dengan koma.

Pilih File> Save All Related Files.
Catatan: tergantung di mana fokusnya adalah dalam jendela dokumen, Simpan Semua Related Files mungkin berwarna abu-abu. Jika ya, pilih Save All. Perbedaannya adalah bahwa Simpan Semua menyimpan semua file yang sedang terbuka. Simpan Semua Related Files menyimpan hanya file yang berhubungan dengan dokumen ini.
Gambar 28 menunjukkan apa halaman Anda sekarang harus terlihat seperti dalam tampilan Design.

Gambar 28. Kolom sekarang di tempat.

Anda tata letak halaman CSS sekarang lengkap. Jika karena alasan tertentu tata letak Anda tidak melihat dengan cara yang seharusnya, cek ejaan (termasuk kapitalisasi, jika sesuai) dari semua aturan CSS. Penyebab paling umum untuk kesalahan tata letak CSS yang ketik, sehingga Anda harus memastikan bahwa ID dalam file eksternal CSS anda sesuai persis dengan ID dalam file index.html. Juga, jangan lupa untuk waspada lagi terhadap ruang ekstra yang dapat menyelinap masuk sebelum dan sesudah saat membuat ID baru CSS aturan
Sekarang Anda telah selesai tata letak, Anda siap untuk menambahkan beberapa konten. Anda akan menambahkan beberapa gambar dan teks dalam Bagian 3: Menambahkan konten ke halaman .

Search This Blog

Aneka Dunia Indonesia