Rudi Hartanto

Tutorial Membuat Situs Web

ilmubiner@gmail.com

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