Pada contoh ini kita menggunakan prog dreamweaver untuk pembuatan web sederhana ini
1. Buka prog Dreamwever
2. Pilih menu create new HTML
3. Untuk membuat halaman berada tepat ditengah layar pili Align Center pada toolbar yang ada di bawah
4. Klik Icon Table pada Toolbox untuk pembuatan table
5. Isikan angka 3 untuk Row text area dan 3 pada columns text area
6. isiskan nilai 750 pada table Width atau lebar table
7. jika sudah klik Ok
8. Untuk memberi Warna pada Backgraound belakang klik tombol Page Properties pada Bar Properties
9. Lalu beri warna dengan kode #999999 kemudian klik ok
10. pilih kolom pertama baris pertama lalu pilih icon image pada tool box untuk memasukan gambar
11. pilih lokasi gambar jika gambar sudah ditemukan klik ok untuk memuat gambar.
12. Atur besar gambar dengan cara mendrag gambar.
13. setelah itu letakan pointer pada kolom 1 baris 2 lalu drag sampai kolo 1 baris 3 kemudian klik kanan dan pilih Marge Cell
14. setelah itu klik icon Flash yang ada pada toolbox, kemudian untuk memuat banner dengan animasi yang kita buat dengan format Swf caranya sama seperti kita memasukan image yaitu cari lokasi file tempat dimana kita menyimpan animasi tersebut kemudian jika sudah klik ok.
15. setela itu untuk melihat tampilannya tekan tombol f12 beri nama file halaman depan kemudian klik Yes.
16. Kemudian letakan Pointer pada kolom 2 baris pertama lalu drag sampai kolom 2 baris ketiga lalu klik kanan pilih Marge Cell (Alt+Shift+M)
17. lalu ketikan text sbb: Home|Gallery|Fasilitas|Halaman Guru|Halaman|Siswa|Profil
18. Lalu pilih kolom 3 baris pertama kemudian isikan kata pengantar.
19. kemudian untuk membuat form komentar pilih menu-Insert-Form-Text Area.
20. kemudian untuk mengatur form tersebut klik Form tersebut isikan nilai 30 untuk : Char Width dan 6 untuk Num Lines.
21. untuk menyambungkan (Link) halaman depan dengan halaman selanjutnya blok kata profi lalu pilih tombol link pada bar properties lalu pilih lokasi penyimpanan file jika sudah pilih file lalu klik ok.
Contoh lain :
Langkah membuat web design :
1. Buka Program Photoshop untuk membuat bennernya
2. Save pada satu folder
3. Lalu buat templatenya dulu dengan cara-cara berikut
4. Setelah benner selesai dibuat buka program dreamweaver
5. Buat tabel Row : 1 Cells : 1
6. W : 950 H : 248
7. Masukan benner yang telah dibuat tersebut dengan cara Common -> image -> pilih benner -> ok
8. Buat tabel Row : 2 Cells : 3 lalu hilangkan garis rownya
9. Kolom 1 berjarak 215 Kolom 2 berjarak 571 Kolom 3 berjarak 150
10. Lalu buat Tabel di kolom paling kiri dengan ketentuan Row : 3 Cells : 1
11. Dari masing-masing tabel itu tulis Home, Profil, Link terkait lalu save terlebih dahulu dengan nama templete
12. Profil di blok lalu di bagian properties->link isi dengan Profil.html lalu pilih Windows->behaviors->tekan tanda + ->Show Pop-Up menu->Continue->textnya tulis sejarah lalu tekan tanda + lagi lalu tulis bidang keahlian->ok
13. Setelah itu masukan gambar jam dengan cara insert -> media -> flash (ctrl+alt+f)
14. Lalu buat buku tamu dengan cara buat tabel Row : 4 Cells : 2
15. Pada Row 1 tulis Nama Cells 1 isi dengan text Field dengan cara Forms->text field
16. Pada Row 2 tulis Email Cells 2 isi dengan text Field dengan cara Forms->text field
17. Pada Row 3 tulis Komentar Cells isi dengan text Field dengan cara Forms->text field
18. Pada Row 4 tidak usah ditulis Cells isi dengan text Forms -> Button -> ok
19. Lalu klik button tersebut Valuenya diganti dengan nama Kirim
20. Kolom yang ditengah biarkan kosong terlebih dahulu
21. Lalu untuk kolom yang di paling kanan kita beri jajak pendapat untuk memilih pilihan yang ada dengan cara pilih Forms->Radio button
22. Setelah itu masukan kalender flash dengan cara inset->media->flash (ctrl+alt+f)
23. Lalu Save dengan nama template
24. Setelah itu baru membuat home
25. Isi di kolom tengah yang dikosongkan tadi
26. Masukan gambar foto sekolah lalu ukuranya di perkecil
27. Setelah itu ketik sambutan dari kepala sekolah
28. Lalu tittlenya diganti dengan Home-SMK Negeri 7 Jakarta
29. Lalu pilih File->Save As->File namenya di beri nama home
30. Setelah selesai membuat home buat isi profil dengan cara hapus semua isi home ganti dengan isi profil lalu tittlenya dig anti menjadi profil-SMK Negeri 7 Jakarta
31. Lalu Save As dengan nama profil
32. Setelah itu buat isi profil Sejarah lalu ganti tittlenya dengan nama Sejarah-SMK Negeri 7 Jakarta
33. Lalu Save As dengan nama Sejarah
34. Setelah itu Hapus kolom tengahnya untuk membuat isi Bidang keahlian lalu ganti tittlenya dengan nama bidang keahlian SMK Negeri 7 Jakarta
35. Lalu Save As dengan nama Bidang keahlian
36. Lalu hapus lagi kolom tengahnya untuk membuat link terkait lalu ganti tittlenya dengan nama link terkait-SMK Negeri 7 Jakarta
37. Lalu Save As dengan nama Link terkait
38. Setelah semuanya sudah di save baru mengelink dari halaman pertama ke halaman berikutnya dengan cara
39. Buka home yang tadi sudah di save lalu blok profil lalu link ke profil.html, setelah itu di show pop-up menu klik kanan -> edit behaviors lalu di sejarah klik icon folder lalu pilih sejarah lalu ok setelah itu di bidang keahlian klik icon folder bidang keahlian lalu ok dan ok lagi lalu blok link terkait lalu link ke link terkait.html lalu di save
40. Buka profil yang tadi sudah di save lalu blok home lalu link ke home.html, setelah itu di show pop-up menu klik kanan -> edit behaviors lalu di sejarah klik icon folder lalu pilih sejarah lalu ok setelah itu di bidang keahlian klik icon folder bidang keahlian lalu ok dan ok lagi lalu blok link terkait lalu link ke link terkait.html lalu di save
41. Buka Sejarah yang tadi sudah di save lalu blok home lalu link ke home.html, lalu blok profil lalu di link ke profil.html setelah itu di show pop-up menu klik kanan -> edit behaviors lalu di bidang keahlian klik icon folder bidang keahlian lalu ok dan ok lagi lalu blok link terkait lalu link ke link terkait.html lalu di save
42. Buka bidang keahlian yang tadi sudah di save lalu blok home lalu link ke home.html, lalu blok profil lalu di link ke profil.html setelah itu di show pop-up menu klik kanan -> edit behaviors lalu di sejarah klik icon folder sejarah lalu ok dan ok lagi lalu blok link terkait lalu link ke link terkait.html lalu di save
43. Buka link terkait yang tadi sudah di save lalu blok home lalu link ke home.html, setelah itu blok profil link ke profil.html setelah itu di show pop-up menu klik kanan -> edit behaviors lalu di sejarah klik icon folder lalu pilih sejarah lalu ok setelah itu di bidang keahlian klik icon folder bidang keahlian lalu ok dan ok lagi lalu di save.
LANGKAH – LANGKAH MEMBUAT WEB YANG LAIN
DARI PROGRAM DREAMWEAVER
1. buka program dreamweaver ( START – ALL PROGRAM – MACROMEDIA – DREAMWEAVER ) pilih HTML .
( HOME PAGE )
2. klik icon TABLE pada panel ROWS masukan 1, COUMN 1 , WIDTH 600.
3. perbesar table kebawah, lalu masukan gambar homepage dengan cara INSERT – IMAGE – pilih gambar yang akan di masukan – OK , DRAG AND DROP gambar yang akan dimasukan.
4. lalu untuk isi website buat table dengan baris 5 kolom 1.
5. pada baris pertama masukan kata HOME untuk link ke home page website.
6. pada baris ke 2 masukan GALLERY untuk melihat gambar – gambar yang disimpan di website tersebut.
7. pada baris ke 3 masukan ABOUT ME untuk tempat halaman tentang anda sendiri.
8. pada baris ke 4 masukan COMMENT untuk memasukan comment dari orang lain kepada anda .
9. pada baris ke 5 buat lah search engine dengan cara di sudut atas toolbar ada pilihan COMMON ganti pilihan tersebut dengan FORMS lalu pilih TEXT FIELD – ok.
10. untuk tombol search pilih BUTTON, klik tombol tersebut lalu pilih properties pada panel button name dan value ganti menjadi search.
11. klik pada kolom tersebut pada panel properties ganti panel method dengan GET dan pada panel action masukan http://www.google.com/.
12. buat table baru 1 baris 1 kolom.
13. perbesar dan masukan apa yang anda inginkan untuk halaman utama contoh gambar , tentang anda , jam, dll.
14. setelah itu buat table kembali untuk menempatkan link ke url besar contoh yahoo, google, youtube, dll. Dengan cara masukan gambar icon perusahaan ternama tersebut deangan cara insert – image – (pilih gambar) – ok , klik pada gambar tersebut lalu buka panel properties – pada panel link masukan url website tersebut.
15. setelah semuanya telah diatur sesuai keinginan simpan halaman tersebut dengan cara klik FILE – SAVE – homepage.html – ok .
Tidak ada komentar:
Posting Komentar