Newsticker: 

Membuat Website Personal Full Color dengan Adobe Photoshop CS dan Macromedia Dreamweaver 8 (part 4)

Pengerjaan dengan Macromedia Dreamweaver 8

Langkah 1 – Membuat Layout dengan Dreamweaver 8

  1. Buka aplikasi Dreamweaver 8 dengan membuat file baru untuk PHP (Create New > PHP)
  2. Masuk ke jendela Code, pilih semua kode (CTRL+A), kemudian tekan Delete untuk menghapus seluruh kode yang ada.
  3. Buka jendela Design, kemudian klik menu Insert > Layout Objects > Div Tag. Untuk tag div pertama, akan digunakan sebagai div container, fungsinya sebagai div utama untuk menampung div yang lainnya. Isikan seperti pengaturan di bawah ini, kemudian klik OK.

  4. Layout akan dibuat berada di tengah-tengah halaman. Dalam keadaan teks Content for class “container” id “container” Goes Here terpilih, klik Align Center pada panel Properties. Setelah Anda melakukan hal ini, akan terbuat tag div baru di dalam tag div container.


  5. Dalam keadaan teks Content for class “container” id “container” Goes Here terpilih, tekan tombol Enter. Hal ini dilakukan untuk menambahkan 2 buah baris baru yang akan digunakan untuk menyisipkan tag div header, div content, dan div footer.
  6. Untuk menambahkan tag div header di dalam tag div container, posisikan kursor di baris pertama, klik menu Insert > Layout Objects > Div Tag. Isikan pengaturan sesuai ilustrasi di bawah ini. Klik OK, Anda akan mendapatkan teks Content for class “header” id “header” Goes Here pada jendela Design


  7. Untuk menambahkan tag div content di dalam tag div container, posisikan kursor di baris kedua (baris di bawah teks Content for class “header” id “header” Goes Here), klik menu Insert > Layout Objects > Div Tag. Isikan pengaturan sesuai ilustrasi di bawah ini. Klik OK, Anda akan mendapatkan teks Content for class “content” id “content” Goes Here pada jendela Design.


  8. Untuk menambahkan tag div footer di dalam tag div container, posisikan kursor di baris ketiga (baris di bawah teks Content for class “content” id “content” Goes Here), klik menu Insert > Layout Objects > Div Tag. Isikan pengaturan sesuai ilustrasi di bawah ini. Klik OK, Anda akan mendapatkan teks Content for class “footer” id “footer” Goes Here pada jendela Design.


  9. Hapus 2 baris sisa yang ada di jendela Design sehingga tampilan yang didapatkan pada jendela Anda seperti ilustrasi di bawah ini.
  10. Simpan file dengan nama index.php satu lokasi dengan file index.html yang telah diperoleh sebelumnya dari Adobe Photoshop.

 

Baca langkah selanjutnya disini

Bagikan...

Cari pada situs ini

Drs. Djaetun H.S (Pendiri Yayasan Atma Luhur)

..."Cerdas berbudi luhur adalah dua hal yang tak terpisahkan. Kecerdasan tanpa diimbangi budi luhur akan digunakan untuk membodohi dan mencelakakan orang lain. Sebaliknya, budi luhur tanpa diimbangi kecerdasan akan menjadi sasaran kejahatan dan penindasan orang lain"...

April  2020
Mon Tue Wed Thu Fri Sat Sun
   
  1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30  

Arsip

April 2020
M T W T F S S
« Mar    
 12345
6789101112
13141516171819
20212223242526
27282930  

Arsip

Kategori