Mendesain Halaman WEB

(Dreamweaver CS3 – bag. 2 )

Pada bagian yang lalu kita sudah membahas tentang Mengatur Properti Halaman Web sampai dengan tahap Mengisi bagian Latar Belakang dengan gambar. Selanjutnya kita akan membahas tahap yang masih terkait dengan mengatur Properti Halaman web.

1. Mengisi bagian background dengan warna.

Pilihan Background pada kotak dialog Page Properties digunakan untuk mengisi latar belakang halaman web dengan warna. Pemberian warna latar belakang ini dapat kita berikan jika kita tidak ingin memberikan latar belakang halaman web dalam bentuk gambar.

Dreamweaver akan memberikan pilihan warna dengan mengklik tombol dropdown pada bagian background , kemudian akan tampil pilihan warna. Pilihlah salah satu warna dengan menggunakan pointer mouse. Jika kita ingin memilih warna lebih banyak lagi, kita bisa memilih tombol System Color Picker. Sedangkan untuk membatalkan proses pemilihan warna, kita dapat mengklik tombol Default Color sehingga warna akan kembali menjadi warna default, yaitu warna Putih.

2. Menggunakan Warna Default untuk teks pada halaman web.

Text Color pada kotak dialog Page Properties digunakan untuk menentukan warna default halaman web. Dalam penentuan warna ini, kita dapat mengaturnya dengan cara yang sama seperti saat kita mengatur warna latar belakang. Warna default untuk teks yang biasa digunakan adalah warna hitam.

3. Menentukan warna untuk teks Link.

Selain warna default untuk teks pada halaman web, kita juga dapat mengatur warna untuk jenis teks lainnya, seperti :

a. Links, warna yang akan digunakan pada semua teks dan email link yang mengandung hyperlink.

b. Visited Links, warna yang akan digunakan pada link yang sudah pernah dikunjungi.

c. Active Links, warna yang akan digunakan pada link yang sedang ditunjuk atau pada saat pointer mouse masih dalam keadaan ditekan pada teks link.

d. Rollover Links, warna yang akan digunakan pada link saat pointer mouse melewati teks tersebut.

4. Menentukan Ukuran Margin.

Ukuran Margin pada lembar kerja Dreamweaver CS3 sangatlah berbeda dengan ukuran margin pada program lainnya, karena pada ukuran Margin di Dreamweaver CS3 hanya ditentukan pada margin Left, Top, Right dan Bottom.

Untuk menentukan batas margin pada lembar kerja Dreamweaver CS3, kita dapat mengisikan nilai pada kotak teks margin pada kotak dialog Page Properties pada bagian category Appearance.

a. Left Margin untuk menentukan margin kiri halaman web.

b. Top Margin untuk menentukan margin atas halaman web.

c. Right Margin untuk menentukan margin kanan halaman web.

d. Bottom Margin untuk menentukan margin bawah halaman web.

(Bersambung...)

Mendesain Halaman WEB (Dreamweaver CS3 – bag. 1 )

A.   Mengatur Properti Halaman Web

Sebelum kita mulai mendesain halaman web, terlebih dahulu kita harus mengatur properti halaman pada lembar kerja kita. Karena properti halaman ini ikut berperan dalam menentukan bagus tidaknya suatu desain yang kita buat nantinya.

Kita dapat mengatur judul halaman, latar belakang berupa warna dan gambar halaman, warna teks dan link serta margin halaman Web. Semua atribut tersebut merupakan atribut dasar yang perlu diperhatikan dari setiap halaman Web.

Untuk menampilkan kotak dialog properti halaman, langkah-langkahnya adalah sebagai berikut : Pilih perintah menu MODIFY > PAGE PROPERTIES, atau tekan Ctrl + J sehingga akan tampil kotak dialog Page Properties.

Tampilan kotak dialog Page Properties pada Dreamweaver CS3 terbagi dalam 5 kategori, antara lain :

1. Pada bagian APPEARANCE, kita dapat mengatur jenis font, menentukan style pada font, ukuran font, warna untuk font, warna latar belakang halaman atau menampilkan gambar untuk latar belakang. Selain itu kita juga dapat menentukan ukuran margin halaman.

2. Pada bagian LINKS, anda dapat menentukan jenis font untuk teks link, ukuran font, mengubah warna untuk teks link, mengubah warna untuk teks yang telah dikunjungi, mengubah warna untuk teks rollover, mengubah warna untuk teks link yang sedang aktif serta untuk menentukan pemberian garis bawah pada teks link.

3. Pada bagian HEADINGS, kita dapat menentukan sendiri style yang digunakan untuk teks naskah kita.

4. Pada bagian Title/ Encoding. kita dapat mengisikan judul halaman pada bagian title.

5. Pada bagian TRACING IMAGE, kita dapat mengatur tampilan gambar sementara pada latar belakang.

A.1. Menambah Judul Halaman Web

Title digunakan untuk memberikan atau memasukkan judul halaman web. Selain memasukkan judul halaman web melalui kotak dialog Page Properties, kita juga dapat memberikan judul halaman web dengan menggunakan salah satu perintah berikut :

1. Pada bagian Document Bar, ketik judul halaman web pada kotak teks title.

2. Pilih perintah menu View > Head Content, sehingga akan ditambahkan sebuah toolbar baru, klik icon yang berada dibagian sudut kiri atas, kemudian isikan judul halaman web dalam kotak teks title pada panel Properties.

A.2. Mengisi bagian Latar Belakang dengan gambar.

Background Image digunakan untuk mengisi bagian latar belakang pada halaman web dengan gambar agar tampilan halaman web kita nampak indah.

Tipe gambar yang dapat digunakan adalah file gambar berekstensi Gif, Jpeg dan PNG.

Langkah untuk mengambil gambar dan menggunakannya sebagai gambar background adalah sebagai berikut :

1. Klik kanan jendela dokumen, pilih Page Properties.

2. Pada kotak dialog Page Properties, klik tombol Browse pada bagian Background Image. Atau jika kita sudah tahu dimana letak gambar yang akan kita jadikan background maka ketikkan path yang berisi file gambar pada kotak teks Background Image.

(bersambung......)

Membuat Situs Web di Adobe Dreamweaver CS3 (Bag – II )

Pada posting yang lalu kita telah uraikan bagaimana cara membuat situs lokal pada Adobe Dreamweaver CS3.    Pada postingan kali ini kita akan membahas bagaimana cara membuat dokumen baru, mengedit situs, menghapus situs, membuat duplikasi situs, mengekspor situs dan menimpor situs.

A.    MEMBUAT DOKUMEN BARU

Setelah kita membuat site, kita bisa mulai mendesain halaman web dengan membuat dokumen baru.   Dokumen yang kita buat akan tersimpan dalam site yang kita buat.   Untuk membuat dokumen HTML baru, gunakan perintah menu FILE > NEW atau gunakan shortcut Ctrl + N.   

Selanjutnya akan tampil kotak dialog NEW DOCUMENT, pilih BLANK PAGE pada bagian TAPE TYPE pilih HTML kemudian pilih bentuk halaman ang kita inginkan pada bagian LAYOUT.   Bentuk halaman yang terpilih akan ditampilkan pada kotak PREVIEW, pilihan NONE akan menampilkan halaman kosong.

B.    MENGEDIT SITUS

Setelah kita membuat definisi situs web yang kita buat, kita juga dapat mengedit kembali definisi situs dengan langkah sebagai berikut :

1.    Pastikan kita aktif pada jendela program Dreamweaver.
2.    Pilih perintah menu SITE > MANAGE SITES.
3.    Selanjutnya akan tampil kotak dialog MANAGE SITES, untuk menentukan situs yang akan kita edit.
4.    Pilih situs yang akan kita edit, kemudian tekan tombol EDIT.

Lakukan beberapa penyuntingan yang kita inginkan, bagian per bagian pada kotak dialog SITE DEFINITION yang ditampilkan.   Jika sudah selesai, tekan tombol DONE.

C.    MENGHAPUS SITUS.

Untuk melakukan penghapusan situs yang pernah kita buat dan tentunya sudah tidak kita kehendaki lagi, maka tampilkan kotak dialog MANAGE SITES seperti saat kita melakukan proses pengeditan.   Pilih salah satu situs yang akan kita hapus dan tekan tombol REMOVE.   Setelah menekan tombol Remove, maka akan ditampilkan kotak konfirmasi yang berisi pertanyaan ”You cannot undo this action, Delete the selected sites?”.   Jika kita ingin menghapus situs tersebut, maka kita klik tombol YES, maka kita tidak bisa mengembalikan situs yang sudah terhapus.    Jika kita jadi menghapus situs yang terpilih, kita tekan tombol NO.

D.    MEMBUAT DUPLIKASI SITUS

Menduplikasi situs atau bisa juga diartikan dengan menggandakan situs yang mana hasil duplikasi tersebut mempunyai struktur dan isi yang sama seperti aslinya, hanya saja nama situs hasil duplikasi akan diberi akhiran teks ”copy”.

Langkah-langkah untuk menduplikasi situ adalah sebagai berikut :

1.    Pilih perintah menu SITE > MANAGE SITES.
2.    Pada tampilan kotak dialog Manage Sites, pilih situs yang akan diduplikasi, setelah itu tekan tombol DUPLICATE.

E.    MENGEKSPOR SITUS.

Kita dapat mengekspor situs sebagai file XML, namun sebelum kita mengekspornya sebaiknya kita backup situs tersebut.

Langka-langkah yang kita kerjakan dalam mengekspor situs.

1.    Pilih perintah menu SITE > MANAGE SITES.
2.    Pada tampilan kotak dialog Manage Sites, pilih situs yang akan kita ekspor, kemudian tekan tombol EXPORT.
3.    Pada tampilan jendela EXPORT SITE, tentukan tempat dari situs yang kita ekspor lalu tekan tombol SAVE.

D.    MENGIMPOR SITUS.

Selain mengekspor situs, kita juga dapat mengimpor situs dari tempat lain.  File yang dapat kita impor adalah file yang berekstensi .ste .

Langka-langkah yang kita kerjakan dalam mengekspor situs.

1.    Pilih perintah menu SITE > MANAGE SITES.
2.    Pada tampilan kotak dialog Manage Sites, tekan tombol IMPORT.
3.    Pada tampilan jendela IMPORT SITE, pilih nama site yang akan kita import, kemudian tekan tombol  OPEN.

(bersambung ...............)

Membuat Situs Web di Adobe Dreamweaver CS3 (Bagian – I )

Situs Web adalah suatu kesatuan dari dokumen-dokumen yang terhubung dengan atribut yang sama, jadi sebuah situs web memiliki banyak dokumen yang biasanya disebut halaman web serta dilengkapi dengan komponen-komponen lain seperti : Image, media dan objek yang saling berhubungan.

Membuat Situs Lokal.

Situs lokal memiliki pengertian keseluruhan file yang digunakan untuk membangun situs web yang berada dalam computer yang berdiri sendiri. Untuk membuat situs web, kita perlu mendefinisikan situs dalam kotak dialog SITE DEFINITION. Pada kotak dialog ini, kita diminta menentukan situs yang akan dibuat. Dalam proses pendefinisian, ada dua cara yang dapat dikerjakan, yaitu dengan menggunakan pilihan BASIC atau ADVANCE.

Pilihan BASIC akan memberikan kemudahan bagi kita dalam menyiapkan situs. Namun kita juga bisa menggunakan pilihan ADVANCE bila kita sudah paham betul tentang konsep yang ada pada Dreamweaver CS3.

Adapun langkah-langkah untuk membuat site baru adalah :

a. Pilih perintah menu SITE > New Sites. Selanjutnya tampil kotak dialog SITE DEFINITION, kita diminta mengisikan nama untuk situs kita. Pemberian nama situs dapat diisi dengan cara mengklik kotak teks yang ada dibawah tulisan ”What Would you like to name your site?” kemudian diberi nama. Kemudian pada kotak dibawah tulisan “What is the HTTP Addres (URL) of your site?” isi dengan alamat URL yang kita kehendaki, misal http://www.cobabuatsite.com dengan tujuan alamat tersebut untuk membuka web lewat browser.

b. Klik NEXT untuk masuk pada kotak dialog selanjutnya. Pada kotak dialog kedua, kita diminta untuk memilih tipe dokumen tempat kita bekerja nantinya. Jika kita pilih NO, maka kita dapat memilih situs statis tanpa memiliki halaman dinamis, atau pilih YES untuk memilih dokumen dinamis.

Contoh dari dokumen bertipe dinamis antara lain : Microsoft Active Server Pages (ASP), Microsoft ASP.NET, Sun Java Server Pages (JSP) atau Hypertext Preprocessor (PHP). Untuk kali ini pilih tombol NO.

c. Klik Next untuk melanjutkan ke langkah selanjutnya. Pada jendela berikutnya terdapat pertanyaan ”How do you want to work with your files during development?” Kita pilih “Edit local copies on my machine, then upload to server when ready ( recommended)”. Setelah itu tentukan tempat penyimpanan file pada hard disk dengan cara mengetikkan folder penyimpanan pada bagian kotak teks yang disediakan, atau mengklik Icon folder di kanan kotak teks, sehingga tampil kotak dialog CHOOSE LOCAL ROOT FOLDER. Tentukan drive dan folder yang kita inginkan, kemudian klik tombol SELECT.

d. Selanjutnya, tekan tombol NEXT untuk menuju ke kotak dialog berikutnya. Pada bagian ini kita diminta untuk menentukan web server, dan apabila kita menggunakan situs lokal dan belum terkoneksi dengan web server, maka pilihan LOCAL/NETWORK yang kita pilih pada kotak dibawah ”How do you connect to your remote server?”. Kemudian tentukan folder untuk menyimpan seluruh file pada kotak ”What folder on your server do you want to store you files in?”

e. Kemudian klik NEXT, akan muncul kotak dialog berikutnya dengan pertanyaan :

“ Do you want to enable checking in and checking out file, to ensure that you and your co-workers cannot edit the same file at the same time ? ”

Jika kita memilih “Yes, enable check in and check out”, maka site yang sedang kita edit juga bisa diedit user lain dalam waktu yang bersamaan. Jika kita memilih “No, do not enable check in and check out”, user lain tidak bisa mengedit site yang sedang kita edit dalam waktu yang sama. Untuk itu pilih pilihan yang kedua.

f. Klik NEXT untuk menuju langkah selanjutnya. Pada tampilan kotak dialog berikutnya akan menampilkan ringkasan dari setting yang telah kita buat. Bila kita sudah yakin dan tidak ingin merubah, maka klik tombol DONE untuk mengakhiri proses.

Sekarang coba perhatikan panel site, di panel site tersebut ditampilkan folder lokal untuk situs ”Cobabuatsite” dan icon folder yang dapat kita uraikan untuk melihat semua isi dari disk lokal dalam tampilan struktur pohon. Untuk sementara situs kita tidak memiliki file atau folder karena baru pertama kali dibuat. Ketika ada file dalam situs, maka file list pada panel site berfungsi sebagai file manager, memberi fasilitas untuk menyalin, menghapus, memindah dan membuka file. Jika kita mempunyai file-file HTML yang mungkin kita gunakan untuk membuat situs web, kita dapat menggunakan file pada panel site untuk menyalin file ke dalam folder situs yang kita buat.

( bersambung..........)