Buat WEB Sederhana Dreamweaver

Cara pembuatan Website sederhana
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 .
( GALLERY )
1. buat 1 halaman html gallery .
2. copy halaman homepage ke gallery, lalu hilangkan halaman utama tentang anda yang anda masukan dan ganti dengan gambar – gambar yang anda inginkan.
3. lalu save dengan nama gallery .
( ABOUT ME )
1. buat 1 halaman html .
2. copy halaman home page dan paste, hilangkan halaman utama tentang anda yang anda masukan dan ganti dengan informasi atau biodata anda
3. buat table baru dengan baris 7 kolom 2 .
4. pada baris ke 1 masukan kata nama, ke 2 alamat , ke 3 tanggal lahir , ke 4 pekerjaan , ke 5 hobi , ke 6 no telp, ke 7 e-mail. Dan isi table tersebut dengan identitas anda.
5. bila anda ingin meyimpan foto anda, buat table baru 1 baris 1 kolom . lalau masukan foto anda di table tersebut dan taruh di sebelah kanan biodata anda.
6. simpan file tersebut dengan nama about me.html.
Nama …………..
Alamat ……………
Ttl …………..
Pekerjaan …………..
Hobi …………..
No tlp ………….
e-mail. ……………
7. contoh table :
( COMMENT )
1. buat halaman baru html .
2. copy halaman home page dan paste, hilangkan halaman utama tentang anda yang anda masukan dan ganti dengan informasi atau biodata anda
3. buat 1 tabel dengan 1 baris 1 kolom .
4. buat text area di dalamnya deangan cara di sudut atas toolbar ada pilihan COMMON ganti pilihan tersebut dengan FORMS lalu pilih TEXT AREA . dan tempatkan di dalam table.
5. lalu buat button dengan cara pilih BUTTON. Dan tempat kan di dalam table.
6. simpan file tersebut dngan nama comment .html.
( LINK SEMUA HALAMAN )
1. buka semua file yang anda buat .
2. pada file comment , blok kata comment pada panel link clik icon folder lalu pilih file homepage.
3. buka file gallery , blok kata gallery pada panel link clik icon folder lalu pilih file homepage.
4. buka file comment , blok kata comment pada panel link clik icon folder lalu pilih file homepage.
5. lalu save as semua file dengan nama yang sama dengan nama sebelumnya.
6. setelah itu buka kembali semua halaman yang anda buat, buka halaman home page anda .
7. blok kata home anda pada panel link clik icon folder lalu pilih file homepage.
8. blok kata gallery anda pada panel link clik icon folder lalu pilih file gallery
9. blok kata about me anda pada panel link clik icon folder lalu pilih file about me
10. blok kata comment anda pada panel link clik icon folder lalu pilih file comment.
11. setelah itu save as kembali semua file anda .
12. sekarang buat sebuah folder dengan nama website ku
13. masukan semua file anda dan gambar atau animasi dan lagu yang anda masukan dalam website anda tersebut agar saat ditampilkan website anda bias menampilkan gambar dan animasi atau lagu anda tersebut .
14. sekarang website anda siap di jalankan .
CONTOH : Langkah – langkah membuat website sekolah
” buat background semua halaman dengan warna gray 25% (menu properties ->page properties lalu buat background dengan gray 25% -> Ok)”
1. Bukalah program dream waver –> lalu pilih HTML pada tampilan awal / pembuka ( bila terdapat tampilan pilihan
2. Lalu pilih table pada menu common ( pada menu table masukan 1 pada row 1 pada Columns lalu pada table widths masukan 600 lalu pilih OK )
3. Setelah itu klik isi table -> pada menu properties –> pilih bg (Back Ground) klik tampilan foder pada colom bg – setelah itu masukan gambar yang di inginkan sebagai banner (masukan Gambar haseo tampilannya hanya kepalanya saja taruh di sebelah kiri)
4. Masukan kata WELCOME TO MY WORLD pada table banner letaknya di center dan middle
5. Lalu tekan enter –> lalu ketik kata Home –> Gallery –> Info –> Faq (tuliskan berikut enter) “ untuk pilihan menu ”
Contoh:
- Home
- Gallery
- Info
- Faq
6. Lalu pada kolom samping kanan buat draw layer pada menu layout lalu atur dengan cara pilih pada menu properties ubah W menjadi 660px dan H 170px -> lalu masukan animasi (tampilanya kata SMK Negeri 7 Jakarta Timur Dikelilingi oleh gambar Tutwuri Handayani) Dengan ukuran 660 , 170( dengan cara pilih media pada menu common -> plugins masukan animasi yang telah di buat)
7. lalu di bawah tampilan web buat table dengan 2 Columns dan 1 Row dengan ukuran H 200 dan W disamakan dengan ukuran tampilan di atas
8. Lalu pada kolom sebelah kiri buat tulisan dengan kata –> kata
Assalamu ‘alaikum ……………………………( salam dari kepala sekolah SMK Negeri 7)
9. kolom sebelah kiri taruh foto kepala sekolah SMKN 7
10. tampilan untuk penutup web atau paling bawah taruh sponsor –> sponsor ( logo-logo) yang kamu punya contoh tutwuri handayani (wajib), vista , e-dukasi.net dll dengan cara sama seperti cara menaruh gambar ( Pilih image pada menu common lalu pilih tempat gambar yang kamu taruh).
11. dibawah tampilan sponsor tulis dengan kata created by …….. (namamu) lalu Save dengan nama Home jangan lupa untuk merubah title dengan nama Home.) (sebelumnya buat folder khusus untuk menaruh website ini)
12. Lalu buat hal baru di menu file –> new -> lalu di hal Home copy banner lalu di paste pada hal lalu untuk pilihan menu -> buat table dengan row 1 dan columns 4 -> Ok, buat ukuran H seminim mungkin dan W sejajar dengan banner.
13. lalu tulis kata Home dll dengan cara
Contih : Home || Gallery || Info || Faq
14. buat Tabel dengan rows 4 dan 2 columns ->Ok -> pada masing – masing kolom masukan gambar dengan ukuran W 300 H 120 lalu buat lah linknya dengan cara klik gambar lalu pada menu properties di pilihan link klik foldernya lalu pilih tempat gambar sempurnanya dan seterusnya.
15. lalu pada tampilan bawahnya copy paste tampilan semua sponsor dan created di hal Home lalu ubah title dengan nama Gallery dan Save dengan nama Gallery di folder Website
Home
Gallery
Info
Faq
16. buatlah hal baru lalu copy paste banner sebelumnya dan buat lah draw layer pada menu layout di bawah dengan ukuran seminim mungkin dengan tulisan Home (enter) Gallery (enter) Info (enter) Faq Contoh:
17. lalu klik draw layer lalu pada menu properties ubah overflow menjadi scroll lalu tampilan di samping kanan buat draw layer sejajarkan dengan tampilan banner lalu isi dengan animasi yang ada di hal Home setelah itu buat table dengan row 2 dan columns 2 dan ukuran H 400 dan W sama dengan ukuran di atas.
18. lalu isi dengan tulisan di bawah ini
Folder Pribadi
Cara membuat Folder Pribadi
Klik
Membantai autorun
Hancurkan Virus Autorun
Klik
Tune Computer
Proses2 Membuat Cepatkan Komputer
Klik
Hardware
Informasi Tentang Hardware
Klik
19. lalu copy paste sponsor dan created pada halaman2 sebelumnya – ubah title menjadi Info lalu save dengan nama Info di foder website
20. buat hal baru lalu copy paste banner sebelumnya lalu copy paste juga pilihan menu pada hal Gallery
21. lalu buatlah table dengan row dan columns 1 dan ukuranya sama seperti banner dengan H 200
22. buat tulisan yaitu Contoh
1. Google.com
2. Yahoo.com
3. e-dukasi.net
4. download.com
5. adobe.com
6. free-av.com
7. grisoft.com
8. baba.com
9. mail.google.com
10. mail.yahoo.com
23. link dengan nama sama seperti di atas ( pilih Form link lalu tuliskan nama link sesuai dengan yang tertulis)
24. ubah title menjadi Faq lalu save dengan nama Faq lalu modif masing – masing pilihan menu pada masing – masing halaman link dengan sesuai namaya Contoh:
Home ( Home.html )
Gallery ( Gallery.html)
Info ( Info.html )
Faq ( Faq.html )