w

Translate

Tutor Belajar Adobe Dreamwaver CS5 - Bagian 3



Tutor Belajar Adobe Dreamwaver CS5 - Bagian 3

Oleh David Powers 

Membuat website pertama Anda - Bagian 3: Menambahkan konten ke halaman.

 

 Selamat datang di bagian ketiga dari seri tutorial membuat website pertama Anda. Tutorial ini menunjukkan cara untuk menambahkan konten ke halaman web dalam Adobe Dreamweaver CS5/CS5.5. Anda dapat menambahkan berbagai macam konten untuk halaman web, termasuk grafik, teks, link, dan widget-untuk sigap menyebutkan hanya beberapa. Setelah Anda menambahkan konten ke halaman Anda, Anda dapat melihat pratinjau pekerjaan Anda dalam Dreamweaver sehingga Anda dapat melihat apa yang akan tampak seperti di web.

Catatan: Anda tidak akan menambahkan sebuah widget sigap untuk halaman sampai Bagian 5 dari seri tutorial, Menambah menu sigap.

Cari file Anda dan meninjau tugas Anda


Dalam tutorial ini, Anda akan mulai dengan tata letak CSS (index.html) yang Anda buat dalam Bagian 2 , Membuat tata letak halaman. Jika Anda tidak menyelesaikan tutorial itu, Anda harus menyelesaikannya sebelum melanjutkan, atau download first_website_pt2_completed.zip (475 KB) dan mulai dengan mereka. Semua aset yang diperlukan untuk tutorial ini berada dalam folder situs lokal yang Anda check_cs5 didirikan di Bagian 1 . Jika Anda menggunakan file selesai di Bagian 2, ikuti petunjuk di Bagian 1 untuk menyiapkan situs Majalah Centang pada komputer lokal Anda.
Tugas Anda adalah untuk menambahkan aset ke halaman rumah untuk Majalah Centang, sebuah publikasi fiktif. Anda akan belajar bagaimana menambahkan gambar, teks, dan link. Anda juga akan belajar bagaimana untuk memformat teks menggunakan CSS. Gambar 1 menunjukkan apa yang halaman selesai akan terlihat seperti pada akhir Bagian 3.

The page after you have entered content into it.
Gambar 1. Halaman setelah Anda memasukkan konten ke dalamnya.

Masukkan gambar


Setelah Anda membuat tata letak halaman Anda, Anda siap untuk menambahkan aset ke halaman, dimulai dengan gambar. Anda dapat menggunakan beberapa metode untuk menambahkan gambar ke halaman web dalam Dreamweaver. Pada bagian ini, Anda akan menambahkan tiga gambar ke halaman Majalah Centang menggunakan berbagai metode.

Masukkan gambar dengan menggunakan menu Insert

Dalam Bagian 2, Anda menggunakan panel Insert untuk menyisipkan gambar. Kali ini, Anda akan menggunakan menu Insert.
  1. Dalam Dreamweaver, buka file index.html yang Anda buat pada Bagian 2, Membuat tata letak halaman.
  2. Menghapus teks placeholder dalam div left_column. Pastikan titik Penyisipan tetap di dalam div tersebut (lihat Gambar 2). (Dengan kata lain, pastikan Anda tidak mengklik di mana saja di luar div setelah Anda menghapus teks placeholder.)

The left_column div with the placeholder text deleted.
Gambar 2. Para left_column div dengan teks placeholder dihapus.

  1. Tekan Enter (Windows) atau Return (Mac OS X) sekali untuk menciptakan lebih banyak ruang di div.
  2. Tekan panah atas pada keyboard untuk memindahkan titik Penyisipan kembali ke puncak div, dan klik tombol Split untuk melihat apa yang terjadi dalam kode yang mendasarinya. Dreamweaver telah dimasukkan dua paragraf ( tag), masing-masing   mereka (lihat Gambar 3).

Dreamweaver has inserted two empty paragraphs in the div.
Gambar 3. Dreamweaver telah dimasukkan dua paragraf kosong di div.

Catatan:   entitas HTML (kode yang merupakan karakter khusus) untuk ruang nonbreaking. Itu ada di sana untuk membuat paragraf lebih mudah untuk memilih dalam tampilan Design. Dreamweaver biasanya menghapus secara otomatis segera setelah Anda mulai mengetik atau memasukkan sesuatu ke dalam paragraf.
  1. Pilih Sisipkan>.
  2. Pada kotak dialog Pilih Sumber Gambar, arahkan ke folder gambar situs, pilih file car.jpg, dan klik OK (Windows) atau Pilih (Mac OS X).
  3. Dreamweaver menampilkan Tag Gambar Aksesibilitas Atribut kotak dialog (kecuali Anda telah mengubah preferensi default). Jenis Mobil di kotak teks Teks Pengganti dan klik OK.
    Gambar ini muncul dalam tampilan Design, Dreamweaver dan menyisipkan HTML diperlukan dalam kode yang mendasari, menghilangkan ruang nonbreaking dalam proses (lihat Gambar 4).

The inserted car image and the underlying code.
Gambar 4. Gambar mobil dimasukkan dan kode yang mendasari.

  1. Biarkan gambar yang dipilih (dengan kata lain, jangan klik di tempat lain pada halaman), dan melihat inspektur Properti di bagian bawah jendela aplikasi Dreamweaver. (Jika inspektur Properti tersembunyi, Anda dapat menampilkannya dengan memilih Window> Properties).
Property inspector menampilkan semua sifat-sifat apa pun aset yang telah dipilih dalam jendela dokumen. Karena kita memiliki image baru kami dipilih, Property inspector adalah menampilkan properti untuk gambar car.jpg. Anda dapat melihat bahwa Property inspector menampilkan lebar dan tinggi gambar, path file untuk gambar, dan teks alternatif yang Anda tentukan sebelum menyisipkan gambar (lihat Gambar 5).

The Property inspector displaying image properties.
Gambar 5. Property inspector menampilkan properti foto.

Property inspector adalah salah satu alat paling kuat di Dreamweaver. Anda dapat menggunakannya untuk mengubah properti untuk aset yang dipilih pada halaman Anda setiap saat.
Perhatikan juga bahwa tag dipilih dalam Tag selector (di bagian bawah jendela Dokumen)-cara lain bahwa Dreamweaver mengkomunikasikan pilihan yang tepat dari aset halaman.
Sekarang mari kita menambahkan gambar yang tersisa.

Menyisipkan gambar dengan menyeret

Untuk menyisipkan gambar dengan menyeret:
  1. Menghapus teks placeholder dalam div center_column. Pastikan titik Penyisipan tetap di dalam div.
  2. Tekan Enter (Windows) atau Return (Mac OS X) sekali untuk menciptakan lebih banyak ruang di div.
  3. Tekan panah atas pada keyboard untuk memindahkan titik Penyisipan kembali ke bagian atas div.
  4. Pada panel Files (Window> Files), cari file data_addict.jpg (itu di dalam folder gambar) dan tarik ke titik penyisipan di div center_column (lihat Gambar 6).
    Penting: Pastikan Anda tarik data_addict.jpg ke titik Penyisipan di bagian atas div center_column. Sangat mudah untuk keliru menjatuhkan gambar di bagian bawah div ketika menyeret.

Drag the data_addict.jpg file to the insertion point in the center_column div.
Gambar 6. Drag file data_addict.jpg ke titik penyisipan di div center_column.

  1. Dalam Aksesibilitas Tag Gambar Atribut kotak dialog, ketik Data dalam kotak teks Teks Pengganti dan klik OK. Gambar akan ditampilkan pada halaman Anda. Anda dapat melihat semua properti di Property inspector.
  2. Simpan halaman. Sangat penting untuk menyimpan sering!

Menyisipkan gambar dari panel Aset

Untuk menyisipkan gambar dari panel Aktiva:
  1. Menghapus teks placeholder dalam div right_column. Pastikan titik Penyisipan tetap di dalam div.
  2. Tekan Enter (Windows) atau Return (Mac OS X) sekali untuk menciptakan lebih banyak ruang pada tag div.
  3. Tekan panah atas pada keyboard untuk memindahkan titik Penyisipan kembali ke bagian atas div.
  4. Klik tab Aset dalam kelompok panel Files, atau pilih Aset Window> untuk membuat aset situs Anda muncul. Kategori gambar dalam panel Aset dipilih secara default. Jika tidak dipilih, klik tombol Gambar untuk melihat aset gambar Anda (lihat Gambar 7).

The Images category of the Assets panel.
Gambar 7. Kategori Gambar panel Aset.

Panel Aset menampilkan aset untuk situs yang terkait dengan dokumen yang aktif di jendela Document. Di screen shot, Anda dapat melihat bahwa panel Aset menampilkan aset gambar yang dipilih di area preview.
  1. Pada panel Aset, pilih file helmet.jpg.
  2. Lakukan salah satu berikut ini untuk menyisipkan file helmet.jpg di halaman:
    • Drag file helmet.jpg ke titik penyisipan di div right_column.
    • Sisipkan klik di bagian bawah panel Aset.
  3. Dalam Aksesibilitas Tag Gambar Atribut kotak dialog, Helm ketik di kotak teks Teks Pengganti dan klik OK.
  4. Simpan halaman, yang sekarang harus terlihat seperti yang ditunjukkan pada Gambar 8.

The page after inserting images in the columns.
Gambar 8. Halaman setelah memasukkan gambar dalam kolom.

Untuk informasi lebih lanjut tentang bekerja dengan panel Aset, lihat Bekerja dengan Aset di Bantuan Dreamweaver.

Masukkan teks


Sekarang Anda akan menambahkan teks ke halaman. Anda dapat mengetik teks langsung di jendela Dokumen atau Anda dapat menyalin dan menempelkan teks dari sumber lain (seperti Microsoft Word atau file teks biasa). Kemudian, Anda akan menggunakan CSS untuk memformat teks.
  1. Kembali ke panel Files dengan mengklik tab-nya.
  2. Pada panel Files, cari file text.txt (dalam folder root check_cs5) dan double-klik icon tersebut untuk membukanya di Dreamweaver. Anda akan melihat bahwa jendela ini dalam tampilan Code (lihat Gambar 9) dan tidak dapat beralih ke Design view karena itu bukan file HTML.

The text file opens in Code view only.
Gambar 9. File teks terbuka di tampilan Kode saja.

  1. Pada jendela dokumen text.txt, pilih blok pertama dari teks (dimulai dengan "Di dalam Tesla Motors ®" sampai dengan "read more ...").
  2. Menyalin teks dengan menekan Ctrl + C / Cmd + C, atau dengan memilih Edit> Salin. Atau, Anda dapat klik kanan dan pilih Salin dari menu konteks yang muncul.
  3. Meninggalkan file text.txt terbuka, klik tab dokumen index.html.
  4. Klik di dalam div left_column bawah gambar mobil, menempatkan titik penyisipan di tempat yang sama di mana Anda menciptakan ruang sebelumnya (lihat Gambar 10).

The Insertion point placed below the car image in the left_column div.
Gambar 10. Titik Penyisipan ditempatkan di bawah gambar mobil di div left_column.

  1. Paste teks dengan menekan Ctrl + V / Cmd + V, atau dengan memilih Edit> Paste. Atau, klik kanan dan pilih Paste dari menu konteks yang muncul.
Teks yang ditampilkan dalam div (lihat Gambar 11).

The Inside Tesla Motors® text pasted in the div.
Gambar 11. The Inside Tesla Motors ® teks disisipkan dalam div.

Jangan khawatir tentang tampilan teks. Anda akan memformat dengan CSS sehingga lebih mirip teks dalam comp desain kami.
  1. Kembali ke file text.txt dengan mengklik tab-nya.
  2. Pada jendela dokumen text.txt, pilih blok kedua dari teks (yang dimulai dengan "Fakta dan Angka" sampai dengan "read more ...").
  3. Salin teks.
  4. Meninggalkan file text.txt terbuka, klik tab index.html.
  5. Klik di dalam div center_column bawah gambar data, menempatkan titik penyisipan di tempat yang sama di mana Anda menciptakan ruang sebelumnya.
  6. Paste teks.
  7. Dan terakhir kalinya, kembali ke file text.txt dengan mengklik tab-nya.
  8. Pada jendela dokumen text.txt, pilih blok ketiga dari teks (yang dimulai dengan "Self Improvement hari ini" sampai dengan "read more ...").
  9. Salin teks.
  10. Tutup file text.txt dengan mengklik X di sudut kanan atas tab-nya. (Anda tidak perlu teks yang tersisa sampai kemudian.)
  11. Pada halaman index.html, klik di dalam div right_column bawah gambar helm, menempatkan titik penyisipan di tempat yang sama di mana Anda menciptakan ruang sebelumnya.
  12. Paste teks. Kolom tiga Anda sekarang diisi dengan teks (lihat Gambar 12).

The text in all three columns.
Gambar 12. Teks dalam semua tiga kolom.

  1. Menyimpan halaman index.html.
Sekarang semua yang perlu Anda lakukan adalah memformat teks sehingga tampak lebih seperti apa yang desainer dimaksudkan.

Format teks dengan CSS


Dalam Bagian 2, Menciptakan tata letak halaman, Anda belajar bagaimana untuk memasukkan tag div dan kemudian posisi tag tersebut pada halaman untuk membuat tata letak. Anda dipisahkan konten (tag div HTML) dari presentasi (CSS yang mengontrol tata letak) dengan menciptakan aturan baru CSS, menempatkan mereka dalam style sheet eksternal, dan kemudian menerapkannya ke tag div pada halaman Anda. Singkatnya, Anda belajar bahwa Anda dapat memasukkan elemen pada halaman dan membuat aturan style CSS di halaman yang terhubung, dan bahwa ketika Anda menerapkan aturan-aturan gaya untuk elemen tertentu pada halaman, elemen-elemen yang langsung dipengaruhi oleh aturan.
Nah, hal yang sama berlaku untuk teks pada halaman. CSS digunakan untuk memformat teks sebanyak itu adalah untuk posisi tag div. Anda ketik atau sisipkan teks Anda pada halaman, membuat aturan CSS, dan kemudian menerapkan aturan tersebut ke teks, seperti yang Anda akan menerapkannya ke div. Bahkan, semua teks yang terkandung dalam beberapa jenis tag-mungkin div, tapi bisa juga sebuah tag ayat (
), sebuah tag heading (

,

, dll) atau lainnya jenis tag. Biasanya apa yang Anda lakukan ketika Anda memformat teks dengan CSS adalah menerapkan aturan CSS untuk tag tertentu yang ingin Anda format.
Sebelum terjadi, saya menyarankan Anda membaca Memahami Cascading Style Sheets , gambaran dasar tentang bagaimana CSS bekerja untuk memformat teks. Memiliki latar belakang informasi sedikit tentang seluk beluk CSS akan membuat sisa dari tutorial ini jauh lebih mudah untuk dipahami.
Sekarang mari kita memformat teks.
  1. Buka CSS Styles panel (Window> CSS) dengan mengklik tab-nya.
  2. (Opsional) Jika tidak sudah ditutup, klik dua kali panel Insert untuk menutupnya dan menciptakan lebih banyak ruang.
  3. Pada panel CSS Styles, klik tombol All untuk memastikan Anda melihat program Semua. Sebelumnya, ketika Anda pertama kali digunakan panel CSS Styles untuk membuat aturan baru, panel ditampilkan ada aturan karena Anda tidak menciptakan apa pun. Sekarang bahwa Anda memiliki banyak aturan yang diterapkan pada elemen pada halaman, panel CSS menampilkan semua aturan yang bersangkutan (lihat Gambar 13).


Layout rules in the CSS panel.
Gambar 13. Tata letak aturan di panel CSS.

Selain membuat dan melampirkan aturan baru, CSS Styles panel memungkinkan Anda melacak aturan CSS dan sifat yang mempengaruhi elemen pada halaman. Program Semua memungkinkan Anda melihat semua aturan halaman sekaligus, sementara modus ini memungkinkan Anda melihat aturan yang berlaku untuk pilihan saat ini pada halaman. CSS Styles panel juga memungkinkan Anda memodifikasi properti CSS tanpa membuka sebuah style sheet eksternal.
Ada beberapa cara kita bisa pergi dengan pemformatan teks Anda. Pemula sering membuat peraturan-peraturan kelas dan menerapkannya pada setiap paragraf, tapi itu pendekatan yang sangat tidak efisien. Lebih baik menggunakan CSS untuk menerapkan gaya keseluruhan pertama, dan menggunakan kelas dan lainnya CSS penyeleksi hanya untuk unsur-unsur yang ingin Anda gaya berbeda.
Untuk saat ini, yang Anda butuhkan adalah format font yang bagus dan ukuran, dan karena Anda ingin format Anda menjadi seragam di semua tiga kolom, Anda dapat menentukan format font di sebuah aturan untuk tag tubuh ( ). Tubuh tag adalah tag paling atas dari halaman HTML, yang berarti bahwa semua tag lain pada halaman (termasuk semua tag div kita) mewarisi sifat-sifat yang ditetapkan untuk tag body. Dengan mendefinisikan properti teks Anda pada tag tubuh, Anda secara efektif akan mendefinisikan properti teks untuk semua teks yang muncul pada halaman.
  1. Di sudut kanan bawah dari panel CSS Styles, klik tombol CSS New Rule.
  2. Pada kotak dialog CSS Aturan Baru, lakukan hal berikut:
    • Pilih Tag dari Jenis Pemilih pop-up menu.
    • Ketik atau pilih tubuh dalam kotak teks Nama Pemilih.
    Perhatikan deskripsi dalam kotak teks di bawah nama pemilih. Dreamweaver kepada Anda bahwa Anda sedang menciptakan aturan akan berlaku untuk semua elemen. Itulah yang Anda inginkan.
  3. Pastikan check_cs5.css dipilih dari menu Peraturan Definisi pop-up.
  4. Klik OK. Aturan CSS definisi kotak dialog muncul, menunjukkan bahwa Anda mendefinisikan properti untuk aturan tag badan baru.
  5. Pilih kategori Ketik kolom Kategori. (Perlu dipilih secara default.)
  6. Dalam kategori Type, lakukan hal berikut:
    • Dari menu Font-keluarga pop-up, pilih Trebuchet MS, Arial, Helvetica, sans-serif
    • Klik kotak warna dan menggunakan alat pipet untuk memilih hitam (# 000).
    • Klik Apply.
    Segera setelah Anda mengklik Apply, semua teks dalam tampilan Design harus diformat dengan gaya baru (lihat Gambar 14).

You can check the effect of your styles by clicking the Apply button.
Gambar 14. Anda dapat memeriksa efek dari gaya Anda dengan mengklik tombol Apply.

Tip: Jika Anda ingin bereksperimen dengan gaya yang berbeda, Anda dapat mengubah nilai dalam kotak dialog Rule Definisi CSS, dan klik Apply untuk melihat efek segera tercermin dalam tampilan Design.
  1. Sementara Anda punya Peraturan CSS Definisi dialog terbuka, Anda harus mengatur warna latar belakang untuk tag. Meskipun browser saat ini mengatur warna latar belakang putih, itu biasanya dianjurkan untuk mengatur warna secara eksplisit dalam gaya Anda sendiri aturan-dan, tentu saja, Anda dapat memilih warna yang Anda suka. Pilih Latar Belakang dari daftar Kategori di sebelah kiri.
  2. Klik kotak warna-warna Background, dan pilih putih (# FFF).
  3. Klik OK untuk menutup kotak CSS Rule Definition dialog. Anda akan melihat dua hal. Salah satunya adalah bahwa Dreamweaver telah menambahkan tag aturan badan baru ke CSS Styles panel (lihat Gambar 15).

The new body rule in the CSS Styles panel.
Gambar 15. Aturan baru tubuh pada panel CSS Styles.

Hal lain yang mungkin Anda perhatikan adalah tanda bintang (*) yang muncul di sebelah nama file check_cs5.css di sudut kiri atas dokumen (lihat Gambar 16).

The asterisk in the Related Files toolbar reminds you to save the changes to the style sheet.
Gambar 16. Tanda bintang di toolbar Related Files mengingatkan Anda untuk menyimpan perubahan pada style sheet.

Apa Dreamweaver menunjukkan Anda di sini adalah bahwa Anda memiliki file terkait yang belum disimpan.
  1. Pilih File> Save All Related Files untuk menyimpan perubahan yang Anda buat dengan style sheet.

Format judul dan membuat link


Sekarang Anda hanya perlu melakukan beberapa hal lebih untuk menyelesaikan format teks dalam kolom.

Format judul

Untuk memformat judul:
  1. Dalam div left_column, tempatkan titik Penyisipan setelah simbol ® pada akhir baris pertama, dan tekan Enter (Windows) atau Return (Mac OS X). Perhatikan bahwa titik Insersi sekarang pada baris di atas teks berikut. Membuka tampilan split untuk memahami apa yang terjadi. Ada satu baris (
    ) tag segera setelah pembukaan
    tag (lihat Gambar 17).

The text you pasted into the columns contains <br /> tags.
Gambar 17. Teks yang disisipkan ke dalam kolom berisi
tag.

Ketika Anda menyisipkan teks dari text.txt, karakter baris baru diubah menjadi
tag. Hal ini memberikan kesan paragraf, tapi menyebabkan masalah untuk memformat teks dengan benar. Menekan Enter / Kembali menciptakan penutupan sebuah
tag pada akhir dari baris pertama, dan pembuka tag pada awal baris berikutnya, tetapi
tag tidak dihapus, meninggalkan terlalu besar ruang antara paragraf.
  1. Pastikan titik Insersi masih di tempat yang sama, dan tekan panah bawah sekali untuk memindahkan titik Penyisipan sebelum Kata.
  2. Tekan Backspace untuk menghapus garis istirahat yang tidak perlu (lihat Gambar 18).

The line break has gone, leaving two paragraphs.
Gambar 18. Garis istirahat telah pergi, meninggalkan dua paragraf.

Ini adalah langkah yang sangat penting. Teks ayat utama harus benar-benar dipisahkan dari pos sebelum kita menerapkan format untuk pos tersebut.
  1. Klik di manapun dalam teks pos. Sebagai contoh, klik di Tesla kata. Anda tidak perlu untuk memilih teks-Anda hanya perlu memastikan bahwa titik Insersi adalah suatu tempat dalam teks pos.
  2. Dalam inspektur Properti (Window> Properties), pastikan tombol HTML di sebelah kiri dipilih.
  3. Pilih Heading 2 dari menu pop-up Format (lihat Gambar 19).

Select Heading 2 from the Format pop-up menu in the HTML Property inspector.
Gambar 19. Pilih Heading 2 dari menu pop-up Format di Properti inspektur HTML.

The Inside Tesla Motors ® menuju perubahan ke 2 Pos. Ukuran dan berat dari teks yang Anda lihat di sini adalah ukuran default dan berat badan untuk 2 Pos. Dengan kata lain, Anda tidak benar-benar perlu untuk menerapkan CSS apapun untuk mencapai efek ini (meskipun Anda bisa!)
Sekarang Anda akan melakukan hal yang sama dengan judul yang tersisa.
  1. Dalam div center_column, tempatkan titik Penyisipan setelah kata Angka di akhir baris pertama dari teks dan tekan Enter (Windows) atau Return (Mac).
  2. Tekan panah ke bawah sekali, untuk memindahkan titik Penyisipan sebelum kata Bagaimana pada awal baris berikutnya, tekan dan tombol Backspace untuk menghapus garis istirahat.
  3. Klik di manapun dalam teks pos. Sebagai contoh, klik di Angka kata.
  4. Dalam inspektur Properti, pilih Heading 2 dari menu pop-up Format. Fakta dan Angka menuju perubahan ke 2 Pos.
  5. Terakhir, di div right_column, tempatkan titik Penyisipan setelah Perbaikan kata di akhir baris pertama dari teks dan tekan Enter (Windows) atau Return (Mac OS X).
  6. Tekan panah ke bawah sekali untuk bergerak Penyisipan sebelum kata Apakah pada awal baris berikutnya, tekan dan tombol Backspace untuk menghapus garis istirahat.
  7. Klik di manapun dalam teks pos. Sebagai contoh, klik pada Perbaikan kata.
  8. Dalam inspektur Properti, pilih Heading 2 dari menu pop-up Format. Perbaikan Diri Hari ini menuju perubahan ke 2 Pos.
  9. Simpan halaman.

Buat link

Sebuah link adalah referensi, dimasukkan dalam suatu halaman web, yang menunjuk ke dokumen lain. Anda dapat mengubah hampir semua jenis aset menjadi link, tapi jenis yang paling umum dari link adalah link teks. Pada bagian ini, Anda akan mengubah "read more ..." teks dalam setiap dari tiga kolom menjadi link.
Para check_cs5 situs root folder berisi halaman HTML jadi yang Anda dapat link ke (halaman berita untuk majalah). Anda akan menggunakan halaman ini untuk semua link dalam kolom, meskipun Anda akan memiliki halaman yang berbeda untuk masing-masing link jika Anda sedang membangun sebuah situs nyata.
Catatan: Halaman news.html adalah halaman boneka terdiri dari gambar, dan tidak dimaksudkan untuk penggunaan praktis. Sebuah tutorial lanjutan nanti akan menunjukkan cara untuk membuat versi fungsi halaman dengan menggunakan database dan PHP di sisi server teknologi.
  1. Dalam div left_column, pilih "read more ..." teks di akhir paragraf, termasuk periode (lihat Gambar 20).
    Tip: Karena tidak ada kesenjangan antara teks dan sisi kiri dari div, Anda mungkin merasa sulit untuk memilih teks dari kiri ke kanan. Klik dan tarik dari kanan itu jauh lebih mudah.

Selecting text in the left_column div.
Gambar 20. Memilih teks dalam div left_column.

  1. Dalam inspektur Properti HTML, klik ikon folder di sebelah kotak teks link (lihat Gambar 21).

Clicking the Folder icon in the Property inspector.
Gambar 21. Mengklik ikon Folder di Properti inspektur.

  1. Pada kotak dialog Pilih File, pilih file news.html (yang ada di folder yang sama dengan index.html) dan klik OK (Windows) atau Pilih (Mac OS X).
  2. Klik di sebelah "read more ..." teks untuk hapus link. Anda akan melihat bahwa teks tersebut telah berubah menjadi link, digarisbawahi dan biru.
  3. Ulangi langkah sebelumnya dan link "read more ..." teks dalam dua kolom yang tersisa ke halaman news.html. Setelah selesai, halaman Anda akan terlihat seperti pada Gambar 22.

The three columns with linked text.
Gambar 22. Tiga kolom dengan teks terkait.

  1. Simpan halaman.
Yang baru saja dibuat tiga link ke halaman itu internal untuk situs kami. Tapi Anda juga dapat menggunakan kotak teks link di Properti inspektur untuk membuat link ke situs web eksternal. Untuk melakukannya, cukup pilih teks atau elemen yang ingin Anda link, dan kemudian ketik URL lengkap website tersebut dalam kotak teks Link dari Property inspector. Misalnya, jika Anda ingin menghubungkan ketiga "read more ..." teks dalam contoh kita untuk Adobe.com, Anda akan memilih teks, ketik di kotak teks link, dan tekan Enter / Kembali.
Catatan: Bila menghubungkan ke situs luar, Anda harus menyertakan http:// di awal URL. Jika Anda menghilangkan itu, browser memperlakukan sebagai link internal.

Preview halaman


Design view memberi Anda ide yang cukup baik dari apa halaman Anda akan terlihat seperti di web, tetapi Anda harus melihat dulu halaman di Dreamweaver atau di browser untuk melihat hasil akhir yang pasti. Dengan Dreamweaver CS5, Anda dapat melihat pratinjau halaman Anda langsung di jendela Dokumen menggunakan Live View. Anda juga dapat membandingkan bagaimana situs Anda terlihat di browser terkemuka dengan meluncurkan BrowserLab.

Preview halaman Anda di Live View

Untuk melihat halaman, memastikan bahwa halaman index.html terbuka dalam jendela dokumen, dan klik tombol Live View (lihat Gambar 23).

Click Live View to preview the page inside Dreamweaver.
Gambar 23. Klik Live Lihat untuk melihat halaman dalam Dreamweaver.

Dreamweaver menampilkan preview dari halaman Anda, hanya karena akan muncul pada browser. Halaman tersebut tidak tampak semua yang berbeda, seperti Dreamweaver melakukan pekerjaan yang cukup baik menampilkan halaman dalam tampilan Design karena mereka akan terlihat pada browser, tetapi Anda akan melihat bahwa perubahan kecil terjadi ketika Anda memasukkan Hidup melihat-garis besar untuk semua tag div hilang, misalnya.
Dreamweaver Live View menggunakan WebKit sebagai render engine-mesin yang sama bahwa kekuatan browser Apple Safari, dan sejumlah aplikasi lain seperti Google Chrome dan Adobe AIR.

Periksa link di Live View

Dalam Dreamweaver CS5, Live View bekerja seperti browser nyata, memungkinkan Anda untuk mengikuti link. Tahan tombol Ctrl (Windows) atau cmd kunci (Mac OS X) ketika Anda mengklik link, dan Dreamweaver membawa Anda ke halaman target dalam Dokumen jendela-bahkan jika poin link ke halaman eksternal di situs yang berbeda (dengan asumsi Anda terhubung ke internet pada saat itu).
  1. Klik tombol Live View untuk melihat index.html seperti yang terlihat dalam browser yang sesuai standar.
  2. Tahan Ctrl / cmd dan klik salah satu "read more" link. Halaman news.html muncul dalam jendela dokumen (lihat Gambar 24).

You can follow links to other pages in Live View in Dreamweaver CS5.
Gambar 24. Anda dapat mengikuti link ke halaman lain di Live View dalam Dreamweaver CS5.

Perhatikan bahwa ada Navigasi Browser bar di bagian atas jendela dokumen. Ia bekerja dengan cara yang sama seperti yang Anda harapkan di browser dengan Backward dan Forward tombol. Tombol Home akan membawa Anda kembali ke halaman Anda mulai dari. Anda bahkan dapat mengetikkan sebuah URL yang sama sekali berbeda dalam kotak teks Alamat, dan Dreamweaver beban itu ke dalam Live View (selama situs dapat diakses).
Jika Anda tidak ingin menekan Ctrl / Cmd setiap kali Anda mengklik link, pilih Ikuti Link Terus dari menu Options Live View (lihat Gambar 25).

Select the option to follow links continuously.
Gambar 25. Pilih opsi untuk mengikuti link terus menerus.

Namun, ini hanya bekerja selama sesi View saat ini Live. Jika Anda mematikan Live View, Anda perlu memilih opsi ini lagi pada saat Anda memulai Live View.
  1. Klik icon Home di bar Navigasi Browser untuk kembali ke index.html, dan Live klik Lihat untuk mematikannya.

Preview halaman Anda dalam BrowserLab

BrowserLab adalah layanan Adobe online yang terintegrasi langsung ke Dreamweaver CS5 yang memungkinkan Anda melihat apa halaman Anda terlihat seperti di berbagai browser populer pada kedua Windows dan Mac OS X, menghemat kebutuhan untuk menginstal beberapa browser dan sistem operasi lokal.
Untuk menggunakan BrowserLab, Anda memerlukan ID Adobe. Jika Anda terdaftar ID Adobe selama instalasi Dreamweaver CS5 (atau Creative Suite CS5), Anda siap untuk pergi. Jika tidak, pilih Help> Registrasi, lalu ikuti petunjuk pada layar untuk mendaftar untuk Layanan CS Live.
  1. Dengan index.html terbuka di jendela dokumen, buka panel BrowserLab dengan mengklik tab-nya, atau dengan memilih Window> BrowserLab. Pastikan Anda terhubung ke internet, dan bahwa pilihan menu di samping tombol Preview di panel BrowserLab diatur ke Lokal, dan klik Preview. Atau, tekan Ctrl + Shift + F12 (Windows) atau Shift + Cmd + F12 (Mac OS X).
  2. Dreamweaver membuka BrowserLab di browser default Anda, dan meminta Anda untuk sign in dengan ID Adobe Anda. Kemudian upload halaman Anda dan semua file terkait dan aset ke server BrowserLab. Setelah beberapa saat (waktu tergantung pada kecepatan koneksi internet Anda), BrowserLab menampilkan halaman Anda seperti yang terlihat dalam berbagai browser yang berbeda dan sistem operasi. Anda dapat membuat subset Anda sendiri browser dan sistem operasi untuk menguji dalam, melihat sisi yang berbeda yang berdampingan, atau superimpose mereka dalam mode "kulit bawang".
    Gambar 26 menunjukkan index.html karena saat ini terlihat di Safari 4.0 di Mac OS X dan Internet Explorer 6 di Windows XP.

Comparing the Check Magazine page in different browsers in BrowserLab.
Gambar 26. Membandingkan halaman Majalah Centang di browser yang berbeda di BrowserLab.

Jika Anda melihat dekat pada gambar di sebelah kanan Gambar 26, Anda dapat melihat bahwa Internet Explorer 6 tidak meninggalkan kesenjangan antara gambar utama dan gambar pada kolom (Internet Explorer 7 tidak sama).
Catatan: Ketika memeriksa halaman dalam BrowserLab, Anda akan melihat bahwa gambar utama tidak diberikan di Firefox 2.0 pada Windows atau Mac, karena ini adalah gambar latar belakang. Pangsa pasar Firefox 2.0 diperkirakan sekitar 0,6 persen dan jatuh, sehingga dapat diabaikan, terutama sejak gambar adalah murni dekoratif.
  1. Beralih kembali ke Dreamweaver, dan menambahkan aturan gaya berikut di bagian bawah dari style sheet check_cs5.css:

p { margin-top: 1em; }

Ini menambahkan margin satu em ke bagian atas setiap paragraf. Sebuah em adalah pengukuran dipinjam dari tipografi. Dalam CSS, satu em setara dengan tinggi font saat ini. Ketika mengetik aturan, pastikan tidak ada kesenjangan antara jumlah dan unit. Jenis 1em, bukan 1 em.
  1. Simpan check_cs5.css, dan klik tombol Preview di panel BrowserLab untuk menyegarkan versi di BrowserLab.
  2. Pilih Internet Explorer 6 di BrowserLab. Gambar di bagian atas kolom sekarang benar diposisikan (lihat Gambar 27).

BrowserLab confirms that the paragraph style has fixed the problem.
Gambar 27. BrowserLab menegaskan bahwa gaya paragraf telah tetap masalah.

  1. Pilih Internet Explorer 7. Foto-foto tersebut benar diposisikan.
  2. Periksa browser lainnya. Gambar sekarang dalam posisi yang sama dalam semua mereka. Secara default, kebanyakan browser menambahkan margin atas sama dengan tinggi satu baris di bagian atas setiap ayat. Hanya saja Internet Explorer 6 dan 7 yang tidak bermain bola. Aturan gaya membawa mereka kembali ke baris tanpa mempengaruhi tampilan di lain, lebih standar-compliant browser.
  3. Tutup jendela browser atau tab untuk keluar BrowserLab.

Preview halaman Anda dalam browser

Menggunakan BrowserLab untuk membandingkan bagaimana halaman Anda melihat di browser yang berbeda pada sistem operasi yang berbeda adalah penting sebelum Anda mempublikasikannya di Internet. Tapi terkadang, Anda hanya ingin mengambil cepat dalam browser atau dua pada komputer lokal Anda. Di situlah Pratinjau dalam Browser datang di berguna.
Untuk melihat halaman ini dalam browser default Anda, cukup tekan tombol F12 (Windows) atau Option + F12 (Mac OS X). Anda juga dapat mengedit Preferensi Dreamweaver untuk mendaftar browser lainnya.
  1. Pilih Edit> Preferences (Windows) atau Dreamweaver> Preferensi (Mac OS X) untuk membuka panel Preferences.
  2. Pilih Preview dalam Browser dari daftar Kategori di sebelah kiri.
  3. Dreamweaver mungkin sudah terdeteksi browser lain di komputer Anda. Untuk menambahkan browser lain, klik tombol plus di samping Browser untuk membuka kotak dialog Add Browser.
  4. Ketik nama dari browser dalam kotak teks Name, dan klik tombol Browse untuk menavigasi ke file aplikasi browser.
    • Pada Windows, ini biasanya file exe di subfolder browser C:. \ Program Files atau C: \ Program Files (x86).
    • Pada Mac OS X, pilih nama browser dalam folder Aplikasi.
    Tip: Pada Windows, Google Chrome akan diinstal dalam folder yang terkait dengan account pengguna Anda. Untuk cari, Anda perlu mengaktifkan tampilan file dan folder tersembunyi. Klik kanan nama aplikasi di menu Start Windows dan pilih Properties untuk menemukan lokasi yang tepat.
  5. Pilih salah satu browser yang terdaftar di area teks Browser, dan pilih kotak cek browser yang sekunder. Untuk meluncurkan halaman ini dalam jendela dokumen di browser sekunder Anda, tekan Ctrl + F12 (Windows) atau Shift + Opt + F12 (Mac OS X).
  6. Untuk meluncurkan halaman Anda dalam browser tertentu, pilih File> Preview in Browser, dan pilih browser dari daftar. Atau, klik Preview / Debug di tombol Browser pada toolbar Document, lalu pilih browser dari daftar (lihat Gambar 28).

Select a browser from the list to preview your page locally.
Gambar 28. Pilih browser dari daftar untuk melihat halaman Anda secara lokal.

Catatan: Untuk informasi lebih lanjut tentang bekerja dengan Live View, lihat Meninjau halaman dalam Dreamweaver di Bantuan Dreamweaver. Untuk informasi lebih lanjut tentang preview di browser, lihat Meninjau halaman dalam browser di Bantuan Dreamweaver.
Halaman Anda hampir selesai dan siap untuk publikasi. Pada Bagian 4, Menambah teks gambar utama , Anda akan menambahkan div lain untuk bidang gambar utama dan posisi menggunakan CSS.



--------------------------------------------------------------------------------------------------------
Anda butuh pemborong jasa pengaspalan, pasang paving atau conblok, pekerjaan pengecoran jalan atau gedung, kontraktor renovasi atau bangun rumah dengan berbagai model dan design.
Hubungi kami di : http://seastech.web.id
--------------------------------------------------------------------------------------------------------

Tutor Belajar Adobe Dreamwaver CS5 - Bagian 2

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.
  1. 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. 
 
  1. Pilih File> New.
  2. 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.
  1. Pilih File> Save, atau tekan Ctrl + S (Windows) atau cmd + S (Mac OS X).
  2. 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).
  3. Masukkan index.html pada kotak File Name teks dan klik Simpan. Nama file sekarang muncul di tab dokumen baru.
  4. 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.
  1. 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.
  2. 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.
  1. 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.

  1. 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.)
  2. 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. 
  1. 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.
  1. 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.
  2. Pada panel Insert, klik Insert Div Tag lagi.
  3. 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.
  1. 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.
  1. 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.
  1. 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.
  1. Dengan titik Penyisipan masih pada baris baru, klik Masukkan Tag Div pada panel Insert.
  2. 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.
  1. 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.
    1. 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.
    1. 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.
    1. Pilih File> New.
    2. 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.
    1. 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.
    2. 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.
    1. 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.

     The style rule for the container div.
    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.
    1. 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:
    1. 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.
    The index.html page in Design view before attaching the style sheet.
    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.
    1. 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.
    1. (Opsional) Klik dua kali panel Insert untuk menutupnya dan menciptakan lebih banyak ruang.
    2. Di sudut kanan bawah dari panel CSS Styles, klik tombol Lampirkan Style Sheet (lihat Gambar 15).
    Click the Attach Style Sheet button.
    Gambar 15. Klik tombol Lampirkan Style Sheet.
    1. 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).
    2. 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.
    1. Simpan halaman.
    2. 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.
    The container div selected in Design view.
    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.
    1. Klik tombol Periksa di bagian atas jendela dokumen (lihat Gambar 17).
    Click the Inspect button.
    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.
    1. Pindahkan kursor anda ke atas divs di tengah halaman. Ketika Anda bergerak ke atas atau bawah, div setiap disorot dengan warna biru terang.
    2. Pindahkan kursor Anda ke kiri dari teks tempat dudukan (lihat Gambar 18).
    CSS Inspect mode highlights the divs, padding, and margins.


    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.
    1. 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.
    1. Klik di dalam div spanduk grafis dan menghapus semua teks placeholder sehingga div banner adalah kosong.
    2. 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.


    Selecting Image in the Images submenu.
    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.
    1. 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.
    2. 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.
    Adding the alternate text for the image.

    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.  
     The banner image is in the top div.
    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.
    1. 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.
    2. Di sudut kanan bawah dari panel CSS Styles, klik tombol CSS New Rule (lihat Gambar 22). 
    Click the New CSS Rule button.
    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).
    The New CSS Rule dialog box suggests the selector type and name.
    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.
    1. 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.
    2. 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.
    3. Pilih kategori Latar Belakang di kolom Kategori.
    4. Dalam kategori Background, klik tombol Browse di sebelah kotak teks Latar Belakang-gambar.
    5. Pada kotak dialog Pilih Sumber Gambar, arahkan ke folder gambar di dalam situs Majalah Check.
    6. Pilih grafis main.jpg dan klik OK (Windows) atau Pilih (Mac OS X).
    7. 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).
    Setting the background image for the main_image div. 
     Gambar 24. Mengatur gambar latar belakang untuk div main_image.

    1. 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.
    2. Pilih File> Save All Related Files untuk menyimpan halaman dan style sheet. 
      Gambar 25 menunjukkan apa halaman Anda akan terlihat seperti pada saat ini.


    The index.html page after setting properties for the main_image div.
    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.
    1. 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.
    2. 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).
    Using related files, you can work in the style sheet and see your page at the same time.
    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.
    1. 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.
    1. 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.
    The column divs are still stacked on top of each other.
    Gambar 27. Divs kolom masih ditumpuk di atas satu sama lain.
    1. 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.
    2. Segarkan Desain tampilan dengan mengklik di dalamnya atau menekan F5. Kolom sekarang harus bersama satu sama lain di bagian bawah halaman.
    3. 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.
    1. 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.
    The columns are now in place.
    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 .
    Back to top