TOP

halaman Layouts

Langkah 3: Dreamweaver CS3 Tutorial - Layouts Halaman

[Ini adalah Langkah 3 Tutorial Dreamweaver CS3]

Anda dapat menggunakan Dreamweaver untuk membuat tata letak halaman umum (dalam template) baik menggunakan tabel atau css. Keuntungan dan kerugian dari kedua pendekatan ini memberikan di bawah ini:
Tabel Layouts: Keuntungan

    * Mudah desain
    * Bekerja dengan baik pada browser lama

Tabel Layouts: Kekurangan

    * Beban hanya sekali semua elemen dalam tabel telah dimuat - biasanya lebih lambat dari css layout
    * Perubahan pada tabel akan perlu dibuat pada setiap halaman dan semua halaman akan perlu upload ke server lagi

CSS Layouts: Keuntungan

    * Beban cepat - file css hanya perlu dimuat sekali
    * Dapat dengan mudah mengubah tata letak seluruh situs dengan mengutak-atik file css. Sebagai elemen desain dipisahkan dari konten

CSS Layouts: Kekurangan

    * Lebih menantang untuk merancang
    * Mungkin tidak bekerja pada beberapa browser lama

Menciptakan Page Layout menggunakan Tabel

Menggunakan "pendekatan tabel" tata letak Anda akan terstruktur dalam tabel dan sel.

Menganalisis tata letak Anda (dibuat dalam Adobe Fireworks atau Photoshop) untuk mengetahui berapa banyak tabel dengan berapa banyak baris dan kolom yang Anda akan perlu untuk menciptakan itu dalam Dreamweaver.

Sekarang mulai membuat tabel Anda. Anda dapat menggunakan piksel atau persentase untuk menentukan lebar dan tinggi. Jika Anda memiliki lebih dari 1 kolom pastikan lebar semua kolom menambahkan hingga lebar meja. [Sisipkan Tabel>]

Inspektur Properties sangat berguna untuk mengedit properti dari setiap elemen dalam halaman Anda. Untuk menyunting properti dari suatu tabel cukup pilih meja dan membuka Inspektur Properties. [Window> Properties]

Coba dan membuat tabel yang terpisah sebanyak mungkin. Hal ini karena tabel akan memuat hanya sekali semua elemen di dalamnya telah dimuat.

Jelajahi menciptakan tata letak Anda dirancang menggunakan tabel. Anda dapat memberikan warna latar belakang, membuat tabel dalam tabel, menentukan alignment isi sel dalam dll Jadi silakan mencobanya. Anda akan menerapkan konsep ini kemudian di Proyek 1: Tabel berbasis Dreamweaver CS3 layout.
Menciptakan Page Layout menggunakan DIV dan CSS Tag

Menggunakan pendekatan CSS Anda akan membuat halaman web layout menggunakan tag div untuk memisahkan berbagai jenis konten pada halaman dan posisi ini tag div dalam CSS.

Anda akan perlu membuat sebuah style sheet css dan melampirkannya pada template.

Untuk setiap div yang Anda buat dalam template Anda akan perlu untuk membuat gaya yang sesuai di file css. Anda dapat menentukan posisi lokasi div di halaman, warna latar belakang, perbatasan dan properti lainnya di gaya. Anda akan menerapkan konsep ini nanti ketika Anda melakukan Proyek 2: CSS / DIV tata letak Tableless berbasis.

Cara mudah untuk membuat css, div layout berbasis adalah dengan menggunakan salah satu dari pre-built layout Dreamweaver. [New File> Halaman Kosong> HTML> tata letak Pilih yang paling sesuai dengan kebutuhan Anda]

pre-built pilihan tata letak css




LANGKAH KE EMPAT