Tutorial Mendesain Tampilan Web Berbasis Macromedia Dreamweaver Mx 2004

Tutorial Mendesain Tampilan Web Berbasis Macromedia Dreamweaver Mx 2004

1. Langkah Pertama Aktifkan Xampp Pada Komputer Anda Dengan Cara :

Ø  Start->All Programs->Xampp Control Panel. Lalu Aktifkan Apache Dan Mysql,Klik Tombol Start Maka Apache Dan Mysql Akan Running Seperti Pada Gambar Dibawah Ini:

 

2.Bukalah Program Macromedia Dreamweaver Mx2004 Dengan Cara Sebagai Berikut:

Ø  StartàAll Programsà Macromedia Dreamweaver Mx2004. Lalu Klik Php Seperti Pada Gambar Dibawah Ini:

3.Lalu Akan Muncul Tampilan Lembar Kerja Pada Macromedia Dibawah Ini.

4.Langkah Selanjutnya Pada Menu  Bar  Pilih

Ø  SiteàManage SiteàNewàSiteà Pada Kotak Itu Tulis Dengan Nama (Web)àNext

 

Ø  Pilih YesàPilih Php MysqlàNext

Ø  Lalu BrushàLetakkan Ke Local Disk CàXamppà>HtdocsàNew Folder Beri Nama (Desain)àOpenàSelectà

Ø  NextàOkàBrush LagiàSelectàLalu Ceklis Pada Kotak RefreshàTest UrlàOkà NextàNextàDoneàOkàDone.

   

 

5. Lalu Pada Menu Bar Pilih Insert à Table Atau Bisa Juga Tekan (Ctrl+Alt+T)

Ø  Pada Table Size àRows  (4) àColumns (3)

Ø  Header àTopàOk.

 6.Lalu Pada Baris 1,2,4 Dimarge Cellkan Petunjuknya Lihat Pada Gambar Dibawah Ini:

7.Selanjutnya Pada Baris Ke-3 Tambahkan Colums 9 Dengan Cara  :

Ø  Klik Kanan Lalu Pilih TableàPilih Insert Rows Dan Columns.

Ø  Setelah Itu Pada InsertàPilih ColumnsàNumber Of Colums 9àOk. 

8.Setelah Itu Langkah Selanjutnya Adalah Tulis Pada Baris Ke-2 (Welcome)àBlock Pada Tulis WelcomeàArahkan Kursor Pada Code Tersebut Lalu Tulis Coding àLalu Kembali Ke DesainàDengan Cara Sebagai Berikut :

9.Selanjutnya Beri Tulis (Home,Profil,Galeri,Creat,Read,Sampai Cari) Pada Kolom Yg Telah Dibuat TadiàSetelah Diberi Tulis Langkah Selanjutnya Block Pada Baris Ke-3 àLalu Letakkan Tulisan Tersebut Ke Tengah Lalu Beri Warna Background Tersebut. Lihat Pada Gambar Dibawah Ini.

10.Buka Program Photoshop Pada Komputer/Laptop Sista Dan Agan Sekalian.

Ø  File àNewàLalu

Ø  Atur Ukurannya Lihat Langkah-Langkahnya Pada Gambar Dbawah Ini :

• ·         Lalu Buatlah Desain Seperti Dibawah Ini :
• ·         Setelah Desain Dibuat Save Gambar Dengan Format JpegàLalu Ok.

Ø  File àNewà

Ø  Lalu Atur Ukurannya Utuk Membuat Biodata Lihat Langkah-Langkahnya Pada Gambar Dbawah Ini :

• ·         Lalu Buatlah Desain Seperti Dibawah Ini :
• ·         Setelah Desain Dibuat Save Gambar Dengan Format JpegàLalu Ok

11.Setelah Membuat Desain Diphotoshop Arahkan Kursor Pada Program Macromedia Yang Telah Kita Buat Lalu Letakkan Header Pada Baris Ke-1 Dan Pada Biodata Baris Ke-2 Kolom Ke-2 Dengan Cara Lihat Pada Gambar Dbawah Ini.

• ·         Pada Menu Bar Pilih InsertàImageàLalu Pilih Gambar Yang Telah Dibuat Tadi Letakkan Ke Local Disk CàXamppàHtdocsàDesainàLalu Ok.
• ·         Dan Untuk Biodataà Block Tulisan Profil Pada Baris Ke-2 Kolom Ke-2 Lalu  Pada Menu Propertià Link Lalu Brushà Pilih Desain Yang Telah Kalian Buat Diphotoshop Tadi Dengan Nama (Biodata)àOk.

12. Lalu Jalankan Dengan Menekan F12/Bisa Juga Klik Bola Dunia IniàLalu Klik Preview In Iexplore

Akan Tampil Gambar Seperti Dibawah Ini

Sekian Dulu Iya Tutorial  Mendesain Tampilan Web Dengan Berbasis Macromedia,Selanjutnya Saya Akan Membuat Tutorial Mengkoneksikan Database Diphp Mysql Ke Macromedia Dreamweaver Mx2004 :)