Bab 10 - Template Dreamweaver

Presentasi berjudul: "Bab 10 - Template Dreamweaver"— Transcript presentasi:

1 Bab 10 - Template Dreamweaver
Web Design Team Dosen Politeknik Elektronika Negeri Surabaya (PENS)

2 Politeknik Elektronika Negeri Surabaya (PENS)
Pendahuluan Pada bab ini, kita membuat Contoh sebuah web site UMPN dengan design layout web menggunakan macromedia dreamweaver. Politeknik Elektronika Negeri Surabaya (PENS)

3 Politeknik Elektronika Negeri Surabaya (PENS)
Manage Site Manage site digunakan untuk menentukan server tempat menyimpan file – file dokumen HTML. Politeknik Elektronika Negeri Surabaya (PENS)

4 Langkah – Langkah menentukan manage site :
Buka aplikasi dreamweaver klik menu Site – Manage Sites klik New – Site, seperti pada gambar disamping Masukkan nama site dan klik Next Menentukan teknologi server, apakah menggunakan teknologi server atau tidak seperti terlihat pada gambar disamping Sebagai contoh kita tidak menggunakan teknologi server. Klik Next Politeknik Elektronika Negeri Surabaya (PENS)

5 Politeknik Elektronika Negeri Surabaya (PENS)
Site Definition Politeknik Elektronika Negeri Surabaya (PENS)

6 Pemilihan teknologi server
Politeknik Elektronika Negeri Surabaya (PENS)

7 Politeknik Elektronika Negeri Surabaya (PENS)
Menentukan letak direktori penyimpanan dokumen HTML. Klik Next Politeknik Elektronika Negeri Surabaya (PENS)

8 Politeknik Elektronika Negeri Surabaya (PENS)
Menentukan metode menghubungkan ke server. Pilih None jika server kita menggunakan komputer lokal. Pilih FTP jika server menggunakan komputer server lain. Politeknik Elektronika Negeri Surabaya (PENS)

9 Hasil definisi manage site. Klik Done
Politeknik Elektronika Negeri Surabaya (PENS)

10 Politeknik Elektronika Negeri Surabaya (PENS)
Membuat Template Web Buat halaman web baru. Dan simpan dengan nama TemplateWeb.html Buat sebuah tabel dengan atribut sebagai berikut : Rows : 3 Column : 1 Table width : 90% Border : 1 Align : center Politeknik Elektronika Negeri Surabaya (PENS)

11 Politeknik Elektronika Negeri Surabaya (PENS)
Sehingga menghasilkan design sebagai berikut : Keterangan : Baris pertama dari tabel akan digunakan sebagai tempat header image. Baris kedua akan digunakan sebagai tempat menu dan isi berita, sehingga harus dibagi menjadi 2 kolom lagi. Dan baris ketiga digunakan sebagai tempat footer. Politeknik Elektronika Negeri Surabaya (PENS)

12 Politeknik Elektronika Negeri Surabaya (PENS)
Selanjutnya lihat di file DOC atau PDF Politeknik Elektronika Negeri Surabaya (PENS)

13 Politeknik Elektronika Negeri Surabaya (PENS)
FINISH Politeknik Elektronika Negeri Surabaya (PENS)