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.

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.)

Gambar 2. Para left_column div dengan teks placeholder dihapus.

3. Tekan Enter (Windows) atau Return (Mac OS X) sekali untuk menciptakan lebih banyak ruang di div.
4. 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).

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.

5. Pilih Sisipkan>.
6. Pada kotak dialog Pilih Sumber Gambar, arahkan ke folder gambar situs, pilih file car.jpg, dan klik OK (Windows) atau Pilih (Mac OS X).
7. 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).

Gambar 4. Gambar mobil dimasukkan dan kode yang mendasari.

8. 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).

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.

Gambar 6. Drag file data_addict.jpg ke titik penyisipan di div center_column.

5. 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.
6. 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).

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.

5. Pada panel Aset, pilih file helmet.jpg.
6. 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.
7. Dalam Aksesibilitas Tag Gambar Atribut kotak dialog, Helm ketik di kotak teks Teks Pengganti dan klik OK.
8. Simpan halaman, yang sekarang harus terlihat seperti yang ditunjukkan pada Gambar 8.

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.

Gambar 9. File teks terbuka di tampilan Kode saja.

3. Pada jendela dokumen text.txt, pilih blok pertama dari teks (dimulai dengan "Di dalam Tesla Motors ®" sampai dengan "read more ...").
4. 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.
5. Meninggalkan file text.txt terbuka, klik tab dokumen index.html.
6. 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).

Gambar 10. Titik Penyisipan ditempatkan di bawah gambar mobil di div left_column.

7. 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).

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.

8. Kembali ke file text.txt dengan mengklik tab-nya.
9. Pada jendela dokumen text.txt, pilih blok kedua dari teks (yang dimulai dengan "Fakta dan Angka" sampai dengan "read more ...").
10. Salin teks.
11. Meninggalkan file text.txt terbuka, klik tab index.html.
12. Klik di dalam div center_column bawah gambar data, menempatkan titik penyisipan di tempat yang sama di mana Anda menciptakan ruang sebelumnya.
13. Paste teks.
14. Dan terakhir kalinya, kembali ke file text.txt dengan mengklik tab-nya.
15. Pada jendela dokumen text.txt, pilih blok ketiga dari teks (yang dimulai dengan "Self Improvement hari ini" sampai dengan "read more ...").
16. Salin teks.
17. Tutup file text.txt dengan mengklik X di sudut kanan atas tab-nya. (Anda tidak perlu teks yang tersisa sampai kemudian.)
18. 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.
19. Paste teks. Kolom tiga Anda sekarang diisi dengan teks (lihat Gambar 12).

Gambar 12. Teks dalam semua tiga kolom.

20. 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).

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.

4. Di sudut kanan bawah dari panel CSS Styles, klik tombol CSS New Rule.
5. 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.
6. Pastikan check_cs5.css dipilih dari menu Peraturan Definisi pop-up.
7. Klik OK. Aturan CSS definisi kotak dialog muncul, menunjukkan bahwa Anda mendefinisikan properti untuk aturan tag badan baru.
8. Pilih kategori Ketik kolom Kategori. (Perlu dipilih secara default.)
9. 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).

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.

10. 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.
11. Klik kotak warna-warna Background, dan pilih putih (# FFF).
12. 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).

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).

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.

13. 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).

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.

2. Pastikan titik Insersi masih di tempat yang sama, dan tekan panah bawah sekali untuk memindahkan titik Penyisipan sebelum Kata.
3. Tekan Backspace untuk menghapus garis istirahat yang tidak perlu (lihat Gambar 18).

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.

4. 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.
5. Dalam inspektur Properti (Window> Properties), pastikan tombol HTML di sebelah kiri dipilih.
6. Pilih Heading 2 dari menu pop-up Format (lihat Gambar 19).

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.

7. Dalam div center_column, tempatkan titik Penyisipan setelah kata Angka di akhir baris pertama dari teks dan tekan Enter (Windows) atau Return (Mac).
8. Tekan panah ke bawah sekali, untuk memindahkan titik Penyisipan sebelum kata Bagaimana pada awal baris berikutnya, tekan dan tombol Backspace untuk menghapus garis istirahat.
9. Klik di manapun dalam teks pos. Sebagai contoh, klik di Angka kata.
10. Dalam inspektur Properti, pilih Heading 2 dari menu pop-up Format. Fakta dan Angka menuju perubahan ke 2 Pos.
11. 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).
12. Tekan panah ke bawah sekali untuk bergerak Penyisipan sebelum kata Apakah pada awal baris berikutnya, tekan dan tombol Backspace untuk menghapus garis istirahat.
13. Klik di manapun dalam teks pos. Sebagai contoh, klik pada Perbaikan kata.
14. Dalam inspektur Properti, pilih Heading 2 dari menu pop-up Format. Perbaikan Diri Hari ini menuju perubahan ke 2 Pos.
15. 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.

Gambar 20. Memilih teks dalam div left_column.

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

Gambar 21. Mengklik ikon Folder di Properti inspektur.

3. 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).
4. Klik di sebelah "read more ..." teks untuk hapus link. Anda akan melihat bahwa teks tersebut telah berubah menjadi link, digarisbawahi dan biru.
5. 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.

Gambar 22. Tiga kolom dengan teks terkait.

6. 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).

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).

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).

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.

3. 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.

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.

3. 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.

4. Simpan check_cs5.css, dan klik tombol Preview di panel BrowserLab untuk menyegarkan versi di BrowserLab.
5. Pilih Internet Explorer 6 di BrowserLab. Gambar di bagian atas kolom sekarang benar diposisikan (lihat Gambar 27).

Gambar 27. BrowserLab menegaskan bahwa gaya paragraf telah tetap masalah.

6. Pilih Internet Explorer 7. Foto-foto tersebut benar diposisikan.
7. 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.
8. 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).

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.