IT: Membuat Web Site Tanpa Bahasa Pemrograman “Dengan Macromedia Dreamweaver MX

Dalam pelatihan kali ini editor yang digunakan untuk membuat web site adalah Dreamweaver. Kenapa harus dreamweaver? Sangat banyak alasan kenapa kita memilih dreamweaver, salah satunya dreamweaver memiliki banyak tools(fasilitas-fasilitas) yang sangat lengkap dan user friendly (mudah digunakan) selain itu dreamweaver support(mendukung) bahasa pemrograman PHP, ASP, WAP dan lain-lain.

System yang digunakan pengoperasian editor ini just click n drag (klik dan tarik) serta memasukan property(nilai/ ciri) dari object web

1. Membuka Dreamweaver MX

Untuk membukan dreamweaver sebelumnya software ini harus di install terlebih dahulu, setelah proses tersebut selesai maka untuk membuka software (aplikasi perangkat lunak) maka klik start à programs à macromedia à macromedia dreamweaver.

Gambar 1.1 Ilustrasi open application macromedia dreamweaver

2. Halaman Depan Dreamweaver MX

Tampilan depan dari dreamweaver seperti gambar di bawah ini :

Gambar 2.1 Tampilan depan dreamweaver

Terdapat beberapa fasilitas yang ada disini, seperti open a recent item (file yang terakhir kali di buka), kemudian create new(buat baru) yang terdiri dari HTML, ColdFusion, PHP, ASP dan dreamweaver site (mendefinisiakan site)

3. Mendefiniskan Site Baru

Pada percobaan pertama kita akan mendefinisikan web site kita, dengan memilih dreamwevaer site pada halaman depan dreamweaver tepatnya pada kolom create new seperti pada gambar berikut.

tedapat beberapa menu di sini seperti HTML, ColdFusin, PHP, Dreamweaver Site… dan lain sebagainya. Konsentrasi kita pada dua menu yaitu HTML yang digunakan untuk membuat halaman web baru dengan ekstensi *.HTML kemudian Dreamweaver Site… untuk mendefinisikan area kerja kita nanti.

Gambar 3.1. Mendefinisikan site baru

Proses berikutnya adalah klik pada dreamweaver site… setelah itu kita akan dihadapakan oleh beberapa inputan dialog yang proses mudah-mudah saja.

Nama Site

Definisikan nama site kita tanpa spasi (ex : pelatihan_web atau pelatihanweb) setelah itu click next.

Gambar 3.2. Mendefinisikan site baru step1 (langkah pertama)

Teknologi Server (Bahasa Pemrograman Server)

Karena pelatihan kita sebatas membuat sebuah site HTML biasa maka abaikan dulu dialog ini dengan memilih “No, I do not want to use a server technology”, kemudian click tombol next.

Gambar 3.3. Mendefinisikan site baru step1 (langkah kedua)

Area Kerja

Karena kita tidak menggunakan web server maka pilihlah pilihan pertama seperti gambar dibawah dan masukan lokasi web anda misal C:\pelatihan_web\ kemudian tekan tombol next

Gambar 3.4 Mendefinisikan site baru step1 (langkah ketiga)

Koneksi Server

Abaikan lagi dialog ini dengan memilih combobox “NONE” karena kita tidak menggunakan tidak terkoneksi dengan server atau menggunakan web server local, kemudian tekan tombol next

Gambar 3.5. Mendefinisikan site baru step1 (langkah ketiga)

Hasil Akhir (Ringkasan)

Pada dialog ini akan menjelaskan kepada kita tentang site yang telah kita definisikan mulai dari nama dan sebagainya. Kemudian memilih tombol done

Gambar 3.6. Summary site baru (hasil terakhir)

Gambar 3.7. Site telah berhasil didefinisikan

4. Membuat Halaman HTML baru

Untuk membuat halaman html baru ada banyak cara misalnya :

1. Menekan kombinasi CTRL+N kemudian pada tab general pilihlah kategori basic page dan pada kolom basic page pilihlah HTML

Gambar 4.1. Membuat halaman HTML baru (Cara ke-1)

2. Langsung memilih HTML pada halaman depan kolom create new

Gambar 4.2. Membuat halaman HTML baru (Cara ke-2)

3. Memilih menu fileà new, setelah itu dialog yang akan tampil sama seperti dialog pada gambar 4.1. Di atas

Gambar 4.3. Membuat halaman HTML baru (Cara ke-3)

5. Memahami Sedikit Tentang Dreamweaver

Dalam dreamweaver terdiri dari menu utama, object web, halaman area dan properties dari object itu sendiri. Yang terpenting di sini adalalah memahami sebagaian object dalam dreamweaver dan properties dari masing-masing object itu sendiri. Misal object tabel memiliki properties/ ciri-ciri sebagai berikut :

1. jumlah kolom = 3

2. jumlah baris = 4

3. warna pada baris pertama biru

4. pengaturan huruf pada tiap baris

5. dan lain sebagainya

dari pembahasan ini diharapakan dapat dipahami dengan mudah perbedaan antara object dan properties object itu sendiri.

Berikut ini merupakan gambaran tentang area kerja dalam software dreamweaver MX2004

Gambar 5.1. Area kerja dreamweaver

Membuka atau menyimpan file web yang telah kita buat dapat dilakukan dengan memilih menu utama file à open (untuk membukan) atau double click pada file atau folder dalam web tentunya dengan memilih web site yang telah di definisikan sebelumnya dan untuk melakukan proses penyimpanan dengan memilh menu file à save (untuk menyimpan).

Untuk memudahkan kita dalam membuat sebuah site silahkan aktifkan pilihan split pada pengaturan tampilan. Pengaturan split akan membagi area kerja menjadi dua yaitu “show code” dan “design preview”

Gambar 5.1. Pengaturan split area

6. Page Properties

Sebuah halaman secara keseluruhan juga memiliki properites/ ciri-ciri misal lebar, tinggi warna dasar dan background. Untuk mengartur properties dari halman html silahkan klik page properties

Pada contoh kali ini kita akan membuat halaman site HTML baru dengan warna ciri-ciri sebagai berikut :

Font : Verdana, Arial, Helvetica, sans-serif;

Ukuran font : 11;

bacground biru muda

Gambar 6.1. Pengaturan properties page

Setelah itu tekan tombol apply, maka area kita akan berubah seperti apa yang telah kita tentukan. Kemudian tuliskan pada area design preview “Ini Contoh Pertama” dan simpan hasil kerja anda dengan nama contoh1.html

catatan :

Modifikasi teks pada dreamweaver sama pada microsoft office misalnya untuk pengaturan rata-kiri, tengah atau kanan kemudian bold serta warna

Setelah file berhasil tersimpan maka tekan F12 pada keyboard untuk melihat hasilnya pada browser

7. Membuat Tabel

Tabel merupakan object dalam dreamweaver yang cukup penting dalam membuat sebuah site, tabel biasanya digunakan untuk mengatur bentuk dasar sebuah web atau dapa juga digunakna untuk mengatur tata letak sebuah object. umumnya tabel terdiri atas kolom dan baris, untuk membuat tabel dalam dreamweaver sangat mudah yaitu cukup click table pada tab common

Gambar 7.1. Membuat tabel

Setelah itu definisikan lagi jumlah baris dan kolom serta lebar tabel tersebut. Lebar sebuah tabel memiliki dua satuan yaitu pixel dan persen, pada contoh kali ini pilih pixel dan masukan nilai seperti gambar di bawah ini

Gambar 7.2. Mengisi properties sebuah tabel

Kemudian isikan nilai-nilai di bawah ini pada tabel tersebut.

Gambar 7.3. Mengisi nilai dalam tabel

Untuk melakukan proses perubahan properties pada sebuah tabel, misalnya perubahan warna pada sebuah baris atau kolom, atau penambahan gambar sebagai background dan banyak lagi maka langkahnya mudah cukup klik pada object tabel kemudian ganti nilai propertiesnya.

Gambar 7.4. perubahan nilai properties object tabel

Gambar 7.5. hasil akhir modifikasi sebuah tabel

Merge Cells juga dapat dilakukan pada tabel-tabel dalam dreamweaver, merge digunakan untuk menggabungkan kolom atau baris, perhatiakan contoh merge di bawah ini :

Gambar 7.6. Bentuk awal (sebelum merge)

Untuk melakukan proses merge maka telebih dahulu blok cells kemudian klik kanan dan pilih menu table à merge cells atau kombinasi ctrl+alt+m tapi sebelumnya blok cells yang akan di merge.

Gambar 7.7. Merge salah satu baris

Sehingga diperoleh hasil akhir bentuk tabel seperti berikut :

Gambar 7.8. Hasil Akhir (setelah merge)

8. Memasukan Gambar

Biasanya sebelum memasukan gambar dalam site diperlukan folder khusus yang nantinya akan menyimpan kumpulan gambar-gambar dalam web tersebut. Misalnya kita akan membuat folder gambar pada C:\pelatiahan_web\gambar\

Membuat folder caranya cukup mudah tinggal klik kanan pada tab files kemudian memilih new folder kemudian tuliskan gambar.

Gambar 8.1. Membuat folder baru dalam site definition

Jika folder gambar berhasil dibuat kemudian langkah berikutnya mendefinisikan pada site kita lokasi standar penyimpanan sebuah gambar. Caranya dengan memilih menu manage site pada combobox/ dropDown tab file.

Gambar 8.2. Merubah definisi site

Setelah itu dialog manage sites akan terbuka, kemudian pilihlah site mana yang akan anda ganti definisinya. Misal kita memilih pelatihan_web kemudian pilih tombol edit. Langkah terakhir memasukan lokasi file gambar pada tab advance seperti gambar di bawah ini

Gambar 8.3. Mendefinisikan lokasi standar gambar pada sebuah site

Jika serangkain langkah di atas telah dilakukan maka untuk memasukan gambar tinggal klik image pada tab common seperti gambar berikut

Gambar 8.4. Proses memasukan gambar

Gambar 8.5. Hasil akhir input gambar pada tabel

dengan ukuran gambar 100x100

9. Link

Sebuah link biasanya digunakan untuk membukan halaman lain, sebagai ilustrasi dapat dilihat pada gambar di bawah ini :

Gambar 9.1. Hasil akhir input gambar pada tabel

Sebagai contoh kita akan membuat dua atau tiga halaman baru yang terdiri dari :

index.html
tentang_kami.html
sejarah_kami.html

disetiap halaman tersebut di dalamnya terdiri dari judul halaman dan tiga buah link yaitu home (halaman index), tentang kami dan sejarah kami.perhatikan contoh berikut :

Gambar 9.2. Link pada halaman Home atau index.html

Untuk memberi link pada object web (text, gambar dan lain-lain) cukup mudah :

Cara pertama memilih object (jika text maka blok area yang akan diberi link) kemudian pada properties link isi kan halaman yang akan di link, misal “index.html”

Gambar 9.3. Memberi Link (cara ke-1)

Cara kedua, hampir sama dimana mula-mula kita memilih object (jika text maka blok area yang akan diberi link) kemudian pada properties link pilih browse dengan icon yang berbentuk folder, kemudian pilih file yang akan di-link. Misal pilih “index.html” kemudian tekan OK.

Gambar 9.4. Memberi Link (cara ke-2)

Cara kegita, dengan men-drag (klik kemudian tahan) ke kolom link file yang ada pada tab file, misal mendrag file “index.html” ke kolom link. Tapi sebelumnya object web harus dipilih terlebih dahulu object (jika text maka blok area yang akan diberi link).

Gambar 9.5. Memberi Link (cara ke-3)

Jika sudah mengetahui dan paham cara memberi dan membuat sebuah link maka langkah berikutnya ialah memberi link pada point dua dan tiga. Ingat sebelumnya kita telah menyimpan halman index.html, tentang_kami.html dan sejarah.html

Hasil akhir dapat kita temukan seperti gambar dibawah ini yang telah dijalankan pada browser Iexplorer.

Gambar 9.5. Hasil akhir contoh membuat link

10. Web Personal Sederhana

Dari serangkaian contoh di atas, saatnya kita membuat sebuah web personal sederhana tentang kita sendiri (jangan lupa mendefiniskan site terlebih dahulu). Susunan file dan direktori dari web personal tersebut ialah sebagai berikut :

Gambar 10.1. struktur file dan direktori

Rancangan Tampilan

Web kita akan bentuknya akan dirancang menggunakan tabel, tapi sebelum membuat rancangan agak lebih baik jika kita melihat contoh-contoh web yang ada seperti gambar di bawah ini :

Gambar 10.2. contoh rancangan web

Mudah mudahan dari kedua contoh di atas dapat membantu kawan-kawan dalam berinspirasi tentang bentuk web kita nantinya, saat ini bentuk web yang akan kita rancangan adalah sebagai berikut :

Gambar 10.3. Rancangan web personal

Membuat Rancangan Dasar Dengan Tabel

Dari rancangan di atas dapat diketahui bahwa tabel yang akan di buat nantinya terdiri atas empat buah baris dan dua buah, hasil rancangan dapat di lihat seperti contoh di bawah ini :

Gambar 10.4. Rancangan Awal

Langkah berikutnya adalah merge (blok cells kemudian klik kanan menu table à merge ) tehadap beberpa cells, sehingga didapat hasil akhir sebagai berikut :

Gambar 10.5. Rancangan setelah modifikasi merge cells

Menambahkan tabel menu left dan tabel content

Sesuai dengan rancangan kita dapat diketahui bahwa tabel menu left tediri atas lima buah baris dan dua buah kolom, dengan lebar 90% dari 250px.

Untuk content web hanya terdiri atas satu buah baris dan kolom dengan lebar 97%dari 500px, hasil modifikasi tabel menu left and tabel content seperti gambar di bawah ini :

Gambar 10.6. Tabel menu left dan content web sudah ditambahkan

Langkah berikutnya menambahkan banner (biasanya gambar yang ditempatkan di atas) pada web ini dengan ukuran 750x150 px

Gambar 10.7. Menambahkan banner

setelah banner berhasil dimasukkan, maka langkah selanjutnya memberi warna pada menu top dan banner. Caranya blok atau pilih area yang akan di beri warna kemudian pilih properties dan tentukan warnanya

Jika sudah merasa cukup dengan bentuk dasar yang seperti ini, maka langkah selanjutnya ialah memberi link seperti :

1. Hamalam Utama link ke index.html

2. Tentang_saya link ke tentang_saya.html

3. Gallery_foto link ke gallery_foto.html

4. Hubungi Saya link ke hubungi_saya.html

Sehingga diperoleh bentuk seperti yang ditunjukkan pada gambar berikut :

Gambar 10.8. Pembuatan file bagan telah selesai

Simpan file ini dengan nama bagan.html. Kemudian buka index.htlm, tentang_saya.html, hubungi_saya.html dan gallery_foto.html. selanjutnya pilih rancangan web pada file bagan.html dan copy kan rancangannya (pilih menu edit à copy) atau kombinasi ctrl+c dan paste disetiap halaman (pilih menu edit à paste) atau ctrl+v.

Langkah terakhir mengisikan content ke empat halaman tersebut. Hasil akhir dari pembuatan web personal sederhana ini sebagai berikut :