Cara Mudah Membuat Layout Web Dengan Frame

Senin, 18 Mei 2015

Adobe Dreamweaver merupakan aplikasi  yang digunakan untuk mendesain sebuah halaman website. Para pengembang tidak perlu lagi menuliskan baris kode untuk mendesain halaman web, tetapi  dapat melakukan dengan drag dan drop objek yang dibutuhkan di dalam halaman website dengan cepat dan mudah.  Pembuatan layout halaman web bisa mengunakan berbagai macam cara. Salah satu Cara yang mudah membuat layout sebuah halaman web adalah dengan mengunakan Frame.

Di dalam Frame, Untuk mendesain layout terdapat 2 format penyimpanan yaitu frame dan frame set. Frame adalah area tertentu di halaman browser misal frame untuk peletakan header Web. Sedangkan frame set adalah frame yang menampung semua frame frame yang sudah di buat. Sebagai contoh kita akan membuat Layout web seperti ini :

Yuk kita simak tutorialnya!

Langkah 1

Bukalah Adobe Dreamweaver pada komputer anda. Untuk membuat frame, buka terlebih dahulu panel frame pada menu bar atau tekan (shift + F2). Sekarang kita membuat Header website, caranya Melalui menu bar pilih menu Insert – HTML – Frame ( untuk menentukan posisi frame).

Langkah 2

Pilih Top untuk membuat Header web. Akan muncul kotak dialog seperti di bawah ini untuk memberi judultopFrame , isi title dengan nama “header” kemudian klik OK.

Langkah 3

Langkah Selanjutnya, kita membuat menu navigasi di sebelah kiri halaman web. Letakakan kursor di frame kiri, pilih kembali  Insert – HTML – Frame – Left (Pilih Left untuk membuat Menu Navigasi sebelah kiri )

* Perhatikan gambar Layout di awal untuk mengetahui letak susunan web yang kita buat

Dan muncul kotak dialog pilih leftFrame pada panah , isi title dengan “navigasi” kemudian klik OK.

Langkah 4

Langakat selanjutnya adalah membuat footer web, Letakan kursor pada frame kanan bawah. Insert dengan langkah yang sama di atas,

 * Perhatikan gambar Layout di awal untuk mengetahui letak susunan web yang kita buat

Langkah 6

Isi kotak dialog dengan nama footer kemudian klik OK.

Langkah 7

Untuk content , letakan kursor di antara header dan footer untuk membuat halaman Content/Isi. Hasil web dengan Frame.

Cara Menyimpan Frame dan Frame Set

Cara menyimpan desain frame sedikit berbeda dengan cara menyimpan halaman biasa. Ini di karenakan frame terdiri dari beberapa halaman yang terpisah namun di tampilkan pada satu halaman saja. Anda harus menyimpan setiap frame menjadi halaman tersendiri atau menghubungkan dengan halaman yang telah jadi.

Berikut Langkah langkah nya :

Langkah 1

Letakan kursor di Header, pilih menu File – Save Frame.

Langkah 2

Simpan dengan nama header untuk header.

Langkah 3

Ulangi langkah pertama pada Left Frame (navigasi) dan Bottomframe (footer). Untuk menyimpan frameset , seleksi garis pemisah antarframe lalu , simpan melalui menubar , pilih File – Save Frameset.

Simpan dengan nama index.html , untuk melihat tampilan, klik file Preview In Browser.

Ok selamat mencoba! setelah itu silahkan kreasikan situs kamu!

Labels: Design Web

Thanks for reading Cara Mudah Membuat Layout Web Dengan Frame. Please share...!