Tutorial Dreamweaver Membuat Situs Web
description
Transcript of Tutorial Dreamweaver Membuat Situs Web
-
Rudi Hartanto
Tutorial Membuat Situs Web
http://ilmubiner.blogspot.com
-
Rudi Hartanto
Membuat folder situs &
opsinya
Membuat folder situs &
opsinya
Membuat templateMembuat template
Membuat halaman web dari template
Membuat halaman web dari template
Yang Dipelajari di Tutorial Ini
-
Rudi Hartanto
Tampilan Situs yang Akan Dibuat
-
Rudi Hartanto
1: Buka Dreamweaver
1. Klik
2. Klik
-
Rudi Hartanto
2: Buat Site Baru
1. Klik
-
Rudi Hartanto
3: Isi Nama Site
1. Isi : Tutorial ABC
2. klik
-
Rudi Hartanto
4: Pilih Teknologi
1. Klik
2. Klik
-
Rudi Hartanto
5: Pilih Tempat Mengedit
1. Klik
2. Klik jika ingin
mengubah folder situs
3. Klik
-
Rudi Hartanto
6: Pilih Koneksi ke Server
1. Klik
2. Klik
3. Klik
-
Rudi Hartanto
7: Summary
1. Klik
-
Rudi Hartanto
8: Buat File Template Baru
1. Klik 2. Klik
-
Rudi Hartanto
9: Pilih Blank Template
1. Klik
2. Klik
3. Klik
4. Klik
-
Rudi Hartanto
10: Simpan
1. Klik
2. Klik3. Klik
4. Isi
5. Klik
-
Rudi Hartanto
11: Hasil Penyimpanan Template
-
Rudi Hartanto
12: Tambahkan CSS Rule Baru
1. Klik
-
Rudi Hartanto
13: Memilih Tag
1. Klik
2. Klik
3. Pilih
4. Klik
5. Klik
-
Rudi Hartanto
14: Beri Nama dan Simpan File CSS
1. Isi
2. Klik
-
Rudi Hartanto
15: Box Style
1. Klik
2. Isi 0
3. Isi 0
-
Rudi Hartanto
16: Block Style
1. Klik
2. Klik
3. Pilih
4. Klik
-
Rudi Hartanto
17: Simpan File CSS
1. Klik
2. Klik
3. Klik
-
Rudi Hartanto
18: Membuat Header
1. Klik
2. Klik
3. Klik
4. Klik
-
Rudi Hartanto
19: Membuat Header (lanj.)
1. Isi2. Klik
3. Klik
-
Rudi Hartanto
20: Membuat Header (lanj.)
1. Klik
2. Isi 780 pixel
3. Isi 0
4. Pilih Auto
5. Klik
6. Klik
-
Rudi Hartanto
21: Membuat Header (lanj.)
1. Tampilannya
2. Dobel klik
-
Rudi Hartanto
22: Membuat Header (lanj.)
1. Klik
2. Pilih
3. Isi 12 pixel
4. Klik
-
Rudi Hartanto
23: Membuat Div Logo & Search
1. Teks diblok
2. Tekan
Pastikan kursor tetap
di dalam kotak
-
Rudi Hartanto
24: Membuat Div Logo & Search (lanj.)
1. Klik
2. Klik
3. Klik
4. Klik
-
Rudi Hartanto
25: Membuat Div Logo & Search (lanj.)
1. Isi
2. Klik
3. Klik
-
Rudi Hartanto
26: Membuat Div Logo & Search (lanj.)
1. Klik
2. Pilih
-
Rudi Hartanto
27: Membuat Div Logo & Search (lanj.)
1. Klik
2. Isi 3. Pilih 4. Pilih
5. Isi
6. Isi
7. Klik
8. Klik
-
Rudi Hartanto
28: Membuat Div Logo & Search (lanj.)
1. Klik
-
Rudi Hartanto
29: Membuat Div Logo & Search (lanj.)
1. Tempatkan
kursor di sini,
lalu tekan
tombol ENTER
-
Rudi Hartanto
30: Membuat Div Logo & Search (lanj.)
1. Klik
2. Klik
3. Klik
4. Klik
-
Rudi Hartanto
31: Membuat Div Logo & Search (lanj.)
1. Isi 2. Klik
3. Klik
-
Rudi Hartanto
32: Membuat Div Logo & Search (lanj.)
1. Klik
2. Pilih
-
Rudi Hartanto
8. Klik
33: Membuat Div Logo & Search (lanj.)
1. Klik
2. Isi 3. Pilih 4. Pilih
5. Isi
6. Isi
7. Klik
-
Rudi Hartanto
34: Membuat Div Logo & Search (lanj.)
2. Tekan
1. Teks diblok
3. Klik 4. Klik
-
Rudi Hartanto
35: Membuat Div Logo & Search (lanj.)
1. Pilih file
2. Klik
3. Isi
4. Klik
-
Rudi Hartanto
36: Membuat Div Logo & Search (lanj.)
2. Tekan
1. Teks diblok
3. Klik
4. Klik 5. Klik
-
Rudi Hartanto
37: Membuat Div Logo & Search (lanj.)
1. Klik di sini
2. Klik
3. Klik
4. Klik
5. Isi 6. Klik
-
Rudi Hartanto
38: Membuat Div Logo & Search (lanj.)
1. Klik
2. Klik
3. Klik
4. Isi 5. Klik
-
Rudi Hartanto
39: Membuat Div Logo & Search (lanj.)
1. Klik
2. Ganti
-
Rudi Hartanto
40: Membuat Div Menu Bar
1. Klik
2. Klik
-
Rudi Hartanto
41: Membuat Div Menu Bar (lanj.)
1. Klik di sini
2. Klik
-
Rudi Hartanto
42: Membuat Div Menu Bar (lanj.)
1. Klik
2. Klik
3. Klik
-
Rudi Hartanto
43: Membuat Div Menu Bar (lanj.)
1. Isi
2. Klik
3. Klik
-
Rudi Hartanto
44: Membuat Div Menu Bar (lanj.)
1. Klik
2. Isi 3. Pilih
4. Isi
5. Klik
6. Isi semua
margin
-
Rudi Hartanto
45: Membuat Div Menu Bar (lanj.)
1. Klik
2. Ambil warna
bunga dengan
eye dropper di
sini
-
Rudi Hartanto
46: Membuat Div Menu Bar (lanj.)
1. Pilih
2. Klik3. Klik
-
Rudi Hartanto
47: Membuat Div Menu Bar (lanj.)
1. Tambahkan teks sehingga
hasilnya seperti gambar di
bawah
-
Rudi Hartanto
48: Membuat Div Content
Dengan cara yang sama membuat div Menu Bar (langkah no. 40 47), buatlah div Content dengan definisi style sbb. :
ID = content
Box >> Width = 780 pixel, Height = 300 pixel, Clear =
both, Padding = 5 pixel, Margin >> Top = 0, Left = auto,
Right = auto, Bottom 0
Block >> Text align = left
Border >> semua sisi = none, kecuali Bottom >> Style =
solid, Width = 1 pixel, Color = mengambil warna daun
dengan eye dropper
-
Rudi Hartanto
49: Membuat Div Footer
Dengan cara yang sama membuat div Menu Bar (langkah no. 40 47), buatlah div Footer dengan definisi style sbb. :
ID = footer
Type >> Size = 10 pixel
Box >> Width = 780 pixel, Clear = both, Padding = 5
pixel, Margin >> Top = 0, Left = auto, Right = auto,
Bottom 0
Block >> Text align = center
Tambahkan teks : Copyright 2014 ilmuBiner.com
-
Rudi Hartanto
50: Mengubah Style H1
1. Klik
-
Rudi Hartanto
51: Mengubah Style H1 (lanj.)
1. Klik
2. Pilih
3. Klik
4. Klik
-
Rudi Hartanto
52: Mengubah Style H1 (lanj.)
1. Isi
2. Ambil warna dari
warna daun
3. Klik
-
Rudi Hartanto
53. Membuat Style untuk ID #menu
1. Klik
-
Rudi Hartanto
54. Membuat Style untuk ID #menu (lanj.)
1. Klik
2. Isi
3. Klik
4. Klik
-
Rudi Hartanto
55. Membuat Style untuk ID #menu (lanj.)
1. Pilih
2. Pilih
3. Klik
4. Klik
-
Rudi Hartanto
56: Menambah Editable Region1. Blok teks lalu
hapus
2. Klik
3. Klik 4. Klik
-
Rudi Hartanto
57: Menambah Editable Region (lanj.)
1. Isi 2. Klik
Sampai langkah ini,
pembuatan halaman
template selesai, selanjutnya
adalah pembuatan halaman
web dari template
-
Rudi Hartanto
58: Menambahkan Halaman Baru untuk Site
1. Klik 2. Klik
3. Klik
4. Klik5. Klik
6. Klik
7. Simpan
file dengan
nama :
index.html
-
Rudi Hartanto
59: Buat Halaman-halaman Lain
Tambahkan halaman lain menggunakan langkah 58.
Halamannya antara lain :
Services
About Us
Contact Us
-
Rudi Hartanto
60: Membuat Link ke Halaman-Halaman
Setelah semua halaman jadi, baru membuat link
Kembali ke file template
Blok salah satu teks pada menu bar
Pada panel Properties, klik icon gambar folder warna kuning
Pilih file yang dimaksud, pada window yang terbuka lalu
klik OK
Ulangi langkah yang sama untuk link lainnya
-
Rudi Hartanto
Tips
Untuk mengubah tampilan, ubahlah file template-
nya. Saat menyimpan, pilihlah pilihan update jika
diminta, agar semua halaman web secara otomatis
berubah sesuai dengan template-nya
Sering-seringlah melakukan Save pada template,
halaman web, dan CSS
-
Rudi Hartanto
Sekian & Terima KasihCopyright ilmuBiner
All rights reserved