Belajar Web Programming sebelumnya kita telah menyelesaikan project 1 yaitu membuat website dengan adobe potoshop dan kali ini kita akan mencoba project selaljutnya yaitu Project 2 dengan tema Membuat Website Sederhana Dengan Dreamweaver. Cara yang kita gunakan pada project kali ini sama sekali berbeda dengan project sebelumnya, dengn cara ini hampir semua proses pembuatan web akan menggunakan text editor tools dreamweaver kecuali untuk mendesain logo atau gambar kita tetap menggunakan adobe potoshop. Target akhir dari project ini adalah pembaca akan belajar sedikit tentang penggunaan PHP dalam sebuah website, selain itu disini kita akan lebih banyak bermain koding dari pada project sebelumnya. Dan pada artikel kali ini kita akan membuat kerangka websitenya terlebih dahulu dan hasilnya akan seperti gambar dibawah ini.
Untuk membuat kerangka seperti gambar di atas, caranya cukup mudah dan tidak membutuhkan waktu lama. Pertama, buat dulu sebuah project didalam folder htdocs dengan nama "project2". Jika sudah , langsung saja buka adobe dreamweaver dan disini saya menggunakan adobe dreamweaver cs6. Tunggu hingga loading pada dreamweaver benar-benar telah selesai, setelah itu agar lebih mudah kita buat dulu sebuah site baru, untuk membuat site pada dreamweaver dapat dibaca di sini.
Jika site sudah dibuat , kemudian buat sebuah file baru didalam folder project2 lalu simpan dengan nama index.html. Jika sudah dibuat, secara otomatis index.html akan terbuka dalam lembar kerja dreamweaver. Jika sudah siap , pilih design pada panel bar dreamweaver. Setelah itu, buat tabel dengan cara klik pada menu insert kemudian klik Table atau anda juga dapat melakukannya dengan cara lain yaitu klik CTRL+ALT+T secara bersamaan. Kemudian akan muncul form untuk membuat table, buat sebuah tabel dengan 4rows, 2collums, table width 100 dan gunakan percent, border tickhnes diisi dengan angka 0 . Setelah itu klik OK, maka akan muncul tabel kosong dengan 4 baris dan 2 kolom.
Blok kolom pada baris 1, 2 dan 4 (lakukan satu persatu). Blok baris pertama dahulu (kolom1+kolom2) kemudian pada panel properties pada bagian bawah kita pilih tombol "merge selected cells using spans" dan kolom 1 dan 2 pada baris pertama akan menjadi 1. Lakukan pada baris 2 dan baris 4 secara berurutan.
Setelah usai, tabel yang kita buat tadi akan membentuk pola sebuah website (lihat ganbar paling atas). Kita punya kolom header pada bagian atas tabel dan tepat dibawahnya terdapat kolom menu . Dibawah kolom menu sebelah kanan ada kolom sidebar dan kolom konten pada sisi kirinya. Lanjut ke kolom paling bawah ada kolom footer , mirip sebuah website kan! Nah tabel inilah yang nantinya akan kita kembangkan menjadi sebuah websiteyang lebih komplek. Makanya ikuti terus projeknya karena selanjutnya kita akan masuk ke leson 2 project ini yaitu membuat header , menu, sidebar, konten dan footer .
0 Response to "Membuat Website Sederhana Dengan Dreamweaver - Lesson 1"
Post a Comment