TOP

Tata Letak

Sebelum Anda Mulai Proyek 2:

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

   2. Download file proyek. (DWCS3_css.zip, 32 KB)

   3. Membuat salinan dari folder 'gambar' dalam folder berjudul "dwcs3_css".
Mendefinisikan situs, membuat template dan eksternal file css:

   1. Tentukan sebuah situs "dwcs3_css" menentukan folder yang baru Anda dibuat sebagai direktori root.
   2. File> New
   3. Pada jendela yang terbuka: Pilih template kosong> Template HTML> Tidak ada
   4. Simpan template itu. Nama itu template_css. Ini akan mendapatkan disimpan sebagai file. Dwt dalam folder baru 'Template'.
   5. Dalam Panel CSS> klik ikon 'New css Aturan'
   6. Pemilih type = tag, Tag = tubuh, menentukan dalam style sheet = nama file baru, file = gaya, klik "save" tombol.
   7. Pada jendela definisi aturan CSS:
         1. Pilih "Kotak", Untuk margin dan padding masukkan "0"
         2. Pilih "Block", Untuk Teks Rata masukkan = pusat
         3. Klik tab styles.css di bagian atas jendela dokumen dan menyimpan file styles.css
   8. Klik 'template_css.dwt' tab di bagian atas jendela dokumen untuk kembali ke file template. Anda harus menyimpan file template stylesheet dan setiap kali Anda membuat perubahan (ketika simbol * muncul)
Header:

   1. Sisipkan> Obyek Tata Letak> Div Tag
   2. Dalam "Insert Div Tag" jendela yang terbuka:
         1. ID = Header
         2. Klik "New style css"
   3. Dalam "Peraturan CSS Baru" jendela yang terbuka Pemilih = # header sudah akan dimasukkan dan menentukan dalam styles.css = sudah akan dipilih. Klik tombol Ok.
   4. Dalam "aturan CSS definisi" jendela yang terbuka
         1. Klik "Kotak". Klik "Kotak". Masukkan Lebar = 780 pixel.
         2. Padding = 0, Margin = Otomatis.
   5. Klik tombol ok. Klik tombol ok.
   6. Anda akan melihat 'Konten untuk id "header" Goes Here' dalam kotak putus-putus muncul di jendela dokumen. Ini adalah div header. Anda dapat memeriksa bagaimana hal itu akan tampak dalam browser dengan mengklik File> Preview in Browser> nama browser yang pilih. Anda harus melakukan ini secara teratur sepanjang proses membangun tata letak sehingga Anda tahu secepat sesuatu yang tidak terlihat ok. Anda juga harus memeriksa di kedua IE dan Firefox untuk memastikan bekerja dengan baik di kedua browser.
   7. Pada panel css Anda akan melihat 2 gaya - tubuh dan # header.
   8. Mari kita tentukan default font pada tag tubuh. Klik kanan "tubuh" di panel css. Pilih "Edit" pilihan. Aturan css definisi jendela akan terbuka.
         1. Pilih "Type".
         2. Tentukan font = 'Arial, Helvetica, sans-serif'.
         3. Ukuran = 12 pixel
         4. Klik "OK".
Logo dan Div Search:

   1. Hapus 'Konten untuk id "header" Goes Here', tetap kursor Anda di dalam div.

         1. Sisipkan> benda Tata Letak> tag div.
         2. ID = logo
         3. Klik "style sheet Baru" tombol, pemilih = # logo, klik ok.
         4. Blok> Teks Rata kiri =
         5. Kotak> Lebar = 50%
         6. Kotak> Lampung = Kiri
         7. Kotak> Padding / Margin = 0
         8. Klik OK. Klik Ok.
   1. "Konten untuk id" logo "Goes Here" akan muncul di jendela dokumen. Dan gaya logo # baru akan muncul di panel css.
   2. Pergi ke tampilan kode (klik "Kode" tombol di bagian atas jendela dokumen atau pilih Lihat Kode>)
   3. Tempatkan kursor Anda setelah div id = "logo" tag penutup yaitu Setelah "Konten id="logo"> <div untuk id" logo "Goes Here </ div>"
   4. Kembali ke tampilan desain (klik "Desain" tombol atau Design View>)
         1. Sisipkan> benda Tata Letak> tag div.
         2. ID = cari
         3. Klik "style sheet Baru" tombol, pemilih = # search, klik ok.
         4. Blok> Teks Align = kanan
         5. Kotak> Lebar = 50%
         6. Kotak> Lampung = kanan
         7. Kotak> Padding / Margin = 0
         8. Klik OK. Klik Ok.
   5. Hapus "Konten untuk id" logo "Goes Here" dan masukkan gambar logo. Sisipkan Gambar>> browse dan pilih logo.gif dari folder gambar.
   6. Hapus "Konten untuk id" pencarian "Goes Here" dan masukkan kode pencarian di sini. Untuk saat ini Anda sederhana dapat memasukkan tag form, kolom teks dan tombol. Harap dicatat bahwa pencarian tidak akan benar-benar bekerja sampai diprogram untuk melakukannya. Anda dapat menggunakan salah satu opsi pencarian gratis.
         1. Insert> Form> Form
         2. Klik di dalam garis putus-putus berwarna merah yang muncul
         3. Insert> Form Text Field
         4. Masukkan Formulir Tombol>
         5. Klik pada tombol yang muncul dan mengubah nama di panel Properties. Nilai = Pencarian.
Bar menu Div:

   1. Pergi ke tampilan kode. Klik setelah tag penutup kepala div. Untuk melakukannya Anda dapat mengklik di mana saja dalam tag div header (misalnya pilih gambar logo pada tampilan desain sebelum masuk ke tampilan kode) dan kemudian klik <div#header> yang muncul di bagian bawah jendela melihat kode. Kode Header seluruh div akan disorot. Kemudian Anda dapat dengan mudah mengklik setelah penutupan </ div> tag.
   2. Sekarang mari kita menambahkan menu bar kuning.
         1. Sisipkan> benda tata letak> tag div. Nama ID div = menu.
         2. Buat menu # gaya css dengan sifat sebagai berikut:
         3. Kotak> Lebar = 780 pixel, Hapus = baik Padding, = 5 pixel, Margin = Top = 0, Kiri = auto, Kanan = auto, Bawah = 1
         4. Latar> Warna latar belakang> Klik segitiga pada kotak abu-abu untuk mendapatkan palet warna dan penetes tinta. Pindahkan kursor ke bunga di logo dan memilih warna kuning.
         5. Blok> Teks menyelaraskan kiri =
         6. Klik Ok
         7. Hapus teks default yang muncul dalam menu dan ketik dalam menu teks "Home | Layanan | Tentang Kami | Hubungi Kami"
Isi Div:

   1. Demikian pula membuat lain dan gaya css div yang berjudul "konten" di bawah div ini

         1. Sisipkan> benda tata letak> tag div. Nama ID div = menu.
         2. Buat gaya css # isi dengan sifat sebagai berikut:
         3. Kotak> Lebar = 780 pixel, Height = 300 pixel, Hapus = baik Padding, = 5 pixel, Margin> Top = 0, Kiri = auto, Kanan = auto, Bawah = 0
         4. Blok> Teks menyelaraskan kiri =
         5. Perbatasan> atas / bawah> padat> 1 pixel> memilih warna hijau dari daun di logo.
Footer Div:

   1. Demikian pula membuat "footer" tag div dan gaya css dengan:
         1. Jenis> Ukuran = 10 piksel
         2. Klik OK
         3. Ganti teks default yang muncul dengan "Copyright 2007 situs name.com"
H1 dan Gaya menu Link:

   1. Klik "New css aturan" ikon di panel css. Mendefinisikan tag H1. 'Tag' pilih, Jenis Tag = H1, memberikan ukuran font 20 piksel dan = memilih warna hijau dari daun untuk warna font.
   2. Demikian pula mari kita membuat style untuk link menu. Menciptakan gaya css baru yang disebut "# menu".
      Jenis>
         1. Warna font = hitam (memilih dari color picker)
         2. Dekorasi = none
         3. Berat = tebal
Diedit Daerah:

   1. Hapus 'Konten untuk id "konten" Goes Here' dan Insert> Template Kawasan objek> diedit. Nama wilayah "isi" diedit
   2. Template Anda hampir siap. Kami akan menggunakannya untuk membuat halaman dan kemudian kembali ke link item menu.
Buat halaman web:

   1. File> New> Halaman dari Template> DWCS3_css> template_css> klik create> Simpan sebagai "index.html"
   2. Mengubah judul halaman untuk "Selamat Datang".
   3. Masukkan citra ibu dan anak. Ketik teks judul dan isi yang tersisa. Kanan align gambar. Terapkan tag 1 Pos (format dropdown di panel Properties) untuk pos.
   4. Membuat 3 salinan dari file index.html dalam Panel 'File'. Mengubah judul halaman, judul dan konten untuk mencerminkan 'jasa', 'tentang kami' dan 'hubungi kami'. Simpan dengan nama yang mirip.
Link menu:

   1. Pergilah ke file template dan link menu ke halaman yang sesuai.
   2. Periksa halaman Anda dalam browser untuk memastikan segalanya terlihat ok dan bahwa link yang bekerja dengan baik.
Anda siap untuk meng-upload situs Anda dan membuatnya 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.
Anda juga dapat menyesuaikan berbagai template website profesional yang dirancang CSS untuk tampak hebat.

Pergi ke Proyek 3>>