DREAM WEAVER LANJUTAN

Sebelum Anda mulai Proyek 1:

1. Jika Anda seorang pemula pastikan Anda melalui langkah-langkah 1 - 10 dari Dreamweaver CS3 Tutorial sebelum mencoba proyek ini.

2. Download File Tutorial (file DWCS3_htm.zip, 44 KB)

3. Setelah men-download file membuat salinan folder 'gambar' di folder lain berjudul 'proyek'.

4. Tentukan sebuah situs Dreamweaver baru untuk folder 'proyek'. Anda juga dapat menentukan lain untuk folder download asli. Anda dapat menggunakan ini untuk membandingkan dan menganalisis jika sesuatu berjalan salah atau Anda bingung tentang bagaimana melakukan sesuatu.

Mulailah Tutorial:

Dreamweaver Template

1. Buat Template HTML Baru. Simpan sebagai template.dwt. Ini akan mendapatkan disimpan dalam folder baru "Template".

2. Memodifikasi Page Properties> (Set Kiri / Kanan / Atas / Bawah = margin 0)

Tabel # 1

1. Sisipkan Tabel> (dengan 2 kolom> 1 baris> 780 piksel> bantalan sel = 0> jarak sel = 0)
2. Pilih Table (klik kanan dalam tabel>> Table Pilih Table). Pada Properties set Align Panel Pusat =.
3. Klik di sel 1> Gambar Sisipkan> browse ke folder foto> selct logo.gif> ketik tag alt = logo.
4. Anda dapat menyesuaikan lebar dari 2 sel. Klik di dalam sel 2. Pada panel properti set Align = benar. Anda dapat menambahkan kode untuk pencarian situs di sini jika Anda suka. Untuk saat ini Anda dapat menambahkan tag form, bentuk bidang dan tombol Insert [> Form. Kemudian klik di dalam garis bentuk yang akan menampilkan dan Insert> / bidang teks / tombol].

Tabel # 2

1. Klik di luar tabel. Menyisipkan tabel (1 baris / 1 kolom / 780 piksel / padding sel = 5 / spasi = 0 / border = 0)
2. Untuk mengatur warna latar belakang meja, di panel properti, klik pada kotak dengan segitiga kecil di samping "Bg" dan menggunakan eyedropper untuk memilih warna kuning dari bunga itu.
3. Klik di dalam tabel. Masukkan teks Menu [Beranda | Layanan | Tentang | Kontak]

Tabel # 3

1. Buat meja lain. Pilih meja dan menyelaraskan pusat. menyisipkan gambar spacer transparan (1x1 pixel). Tabel ini akan runtuh ke 1 tinggi pixel. Karena kita ingin menjadi putih kita tidak akan menempatkan warna latar belakang. Ini akan menjadi garis putih.

Tabel # 4

1. Buat meja lain. Pilih meja dan menyelaraskan pusat. Gunakan pipet th untuk memilih warna latar belakang hijau dari daun di gambar logo. Masukkan gambar spacer. Tabel ini akan runtuh ke 1 tinggi pixel. Ini akan menjadi garis hijau.

Tabel # 5

1. Sisipkan tabel lain (padding sel = 5). Pilih meja dan menyelaraskan pusat di panel properti =.

Diedit Daerah

1. Sisipkan> Template Objects> Kawasan Editable> nama 'konten' itu

Tabel # 6

1. Sisipkan tabel lain. Berikan latar belakang hijau dan menyisipkan gambar spacer.
2. Sisipkan tabel lain (ruang sel = 5 px)
3. Klik di dalam tabel. Rata tengah = di panel properti.
4. Ketik teks footer (coyright 2007 nama situs) dan format (ukuran dan warna)

CSS Styles

1. CSS Aturan> Tag = H1> Pilih hijau dari daun dan ukuran = 20, dan font = Arial, Helvetica, Sans-Serif dan berat badan = berani
2. CSS Aturan> Tag = body> Ukuran = 12 dan font = Arial, Helvetica, Sans-Serif
Simpan template

Page # 1

1. Buat halaman baru html [File> New> Halaman dari Template> Proyek> Template> Membuat] dan beri nama "index.html".
2. Masukkan gambar ke-2 dan memberikan 'ibu dan anak' tag alt.
3. Ketik konten tekstual. Pilih teks judul dan pilih 'Heading 1' dari 'Format' dropdown di Properties Panel. Gaya akan judul sesuai gaya css H1 buat sebelumnya.
4. Klik gambar. Set align = tepat di panel properti.
5. Ketik 'Home page' dalam judul dokumen (di bagian atas jendela dokumen).
6. Ketik kata kunci untuk halaman [Insert> HTML> Kepala Tags> Kata kunci]
7. Ketik deskripsi untuk halaman [Insert> HTML> Kepala Tag> Description]

Halaman # 2, 3 dan 4

1. Membuat salinan dari file index.html (dari dalam panel 'File' - jika tidak terlihat di kiri pergi ke Window> File) dan mengubah nama mereka untuk service.html, about.html dan contact.html.
2. Masukkan judul yang tepat, konten teks, tag judul, kata kunci dan deskripsi, dan gambar ke dalam 3 halaman baru.

Link Menu

1. Sekarang kita harus pergi ke template.dwt dan link halaman dari menu.
2. Pilih teks "Home"
3. Klik pada ikon folder di sebelah kolom Link di panel properti.
4. Browse ke index.html dan pilih.
5. Anda akan melihat garis bawah muncul di bawah "Home" dan berubah menjadi warna biru.
6. Klik dimana saja dalam "Home" dan klik tag yang terlihat di bagian bawah jendela dokumen.
7. Berikan sifat warna dan font, perhatikan nama gaya yang dibuat karena Anda akan perlu untuk menerapkan gaya yang sama dengan 3 item menu lain.
8. Link dan menerapkan gaya yang sama untuk item menu lainnya.
9. Simpan template dan halaman akan diperbarui secara otomatis.
10. Klik kanan pada index.htm> Klik pratinjau di Browser> Pilih Internet Explorer atau Firefox> Lihat situs Anda di browser> memeriksa untuk melihat apakah semua link bekerja ok

Sekarang Anda siap untuk pergi hidup! Selamat!

Untuk membuat situs web Anda hidup Anda akan perlu untuk mendaftar dengan server hosting. Saya sarankan Hostgator yang saya gunakan untuk host situs ini.

Pergi ke Proyek 2