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
Top Related