Diktat Dreamweaver
-
Upload
maintanabe -
Category
Documents
-
view
124 -
download
0
Transcript of Diktat Dreamweaver
STMIKSEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTERNURDIN HAMZAH JAMBI
DIKTAT SINGKATMACROMEDIA DREAMWEAVER
( Hanya Untuk Kalangan Sendiri )
SEMESTER GANJILJURUSAN SISTEM INFORMASI
PENDAHULUAN
Dreamweaver adalah sebuah program website editor yang berfungsi untuk
membuat dan mendesain website secara utuh berdasarkan layout, header, dan
template sendiri. Kehandalan dari Dreamweaver sendiri yaitu kemudahan dalam
membuat dan mendesain website tanpa harus menulis tag-tag HTML satu persatu
walalupun program ini tetap bisa digunakan untuk mendesain website menggunakan
kode-kode tersebut karena pada saat membuat program dapat dibagi mejadi
tampilan design, tampilan kode, atau dua-duanya. Disamping itu Dreamweaver
dapat melakukan pengecekan spelling dan check vaidator kode-kode agar sesuai
dengan standar. Salah satu metode yang digunaan saat pembuatan website adalah
dengan klik dan drag yang dapat mempermudah kita dalam membuat website
dengan cepat, mudah, menarik, dan interaktif.
Dreamweaver juga mempunyai kemampuan untuk mendukung pemrograman
Server side dan Client side. Server side digunakan untuk memproses data yang
berhubungan dengan server, misalnya pengolahan database. Client side merupakan
bahasa pemrograman tambahan sekaligus sebagai pelengkap dari bahasa
pemrograman lainnya.
Dalam dunia maya (internet) kita mengenal beberapa istilah tentang web, www,
website, web pages, dan homepage. Bagi orang awam,istilah tersebut bisa saja
diartikan sama. Ada sebagian masyakat kita mencantumkan alamat dengan
imbuhan, misalnya homepage: www.toolkits.com atau website:
www.desain2u.com atau alamat situs: www.entahkenapa.com dan lain-lain.
Memang, sah-sah saja mencantumkan beberapa kalimat tersebut karena memang
intinya sama yaitu mencantumkan alamat situs yang dapat dikunjungi. Untuk
mengetahui arti yang sebenarnya, di bawah ini terdapat sedikit ulasan beberapa
istilah dalam internet yang sering ditemui. www (Word Wide Web) :
merupakan kumpulan web server dari
seluruh dunia yang berfungsi menyediakan data dan informasi untuk
digunakan bersama-sama.
Web adalah fasilitas hypertext yang mampu menampilkan data berupa
teks, gambar, suara, animasi, dan multimedia lainnya, di mana di antara
data-data tersebut saling terkait dan berhubungan satu dengan yang
lainnya. Untuk memudahkan dalam membaca data tersebut diperlukan sebuah web
browser seperti Internet Explorer, Netscape, Opera, maupun Mozilla Firefox
Website ( situs web) : merupakan tempat penyimpanan data dan informasi
berdasarkan topik tertentu. Diibaratkan website ini seperti buku yang berisi topik
tertentu.
Web Pages (halaman web) : merupakan sebuah halaman khusus dari
situs web tertentu. Diibaratkan halaman web ini seperti halaman khusus
dari buku.
Homepage : merupakan sampul halaman yang berisi daftar isi atau
menu dari sebuah situs web. Mendesain web bukan merupakan pekerjaan yang
berat dan bukan merupakan pekerjaan yang ringan. Apa maksudnya? Merancang
web bukanlah pekerjaan yang berat artinya siapapun bisa menguasai dan
membuatnya asalkan memiliki kemauan untuk belajar. Namun merancang web (web
design) bukanlah pekerjaan yang ringan artinya tidak semua orang memiliki
kemampuan yang luas tentang beberapa aspek yang harus diketahui agar tampilan
web menarik sehingga banyak pengunjung yang datang. Sebagai contoh, ketika kita
membuat sebuah homepage (halaman utama web) sangat lama proses aksesnya.
Mengapa hal itu bisa terjadi? Itu semua diakibatkan tidak adanya ketentuan
besarnya file halaman utama tersebut. Agar halaman web kita mudah diakses oleh
para pengunjung tentunya harus memiliki pengetahuan dalam mendesain sebuah
web.
Maka diperlukan teknik pembuatan interface (halaman muka) sebuah website
menggunakan Adobe Photoshop/CorelDraw kemudian diolah menggunakan
Macromedia Dreamweaver. Selanjutnya, dipercantik dengan tambahan animasi
yang dibuat menggunakan Macromedia Flash. Jadi kita menggunakan 3 tools untuk
membuat situs yang inovatif dan kreatif secara profesional.
MERANCANG WEB
Web yang sering dikunjungi orang merupakan nilai plus bagi seorang web designer.
Banyaknya pengunjung yang datang dapat dijadikan tolak ukur keberhasilan
seseorang dalam merancang dan mengembangkan sebuah website profesional.
Ada beberapa unsur yang mempengaruhi keberhasilan tersebut, diantaranya:
mudah digunakan, proses koneksi cepat, tampilan menarik, perpaduan warna
sangat tepat, navigasi mudah dipahami dan digunakan, isi artikel sangat berguna,
dan masih banyak lagi unsur lain. Semua itu bergantung pada respon pengunjung/
pengguna terhadap website yang kita buat.
Saat ini website sudah menjadi salah satu bagian dari identitas sebuah institusi,
sama pentingnya dengan alamat perusahaan. Website dapat dijadikan “guide” bagi
pelanggan untuk mengetahui lebih jauh tentang profil sebuah institusi secara online.
Ada beberapa kelebihan dan Manfaat website sehingga banyak orang
membutuhkan kehadirannya, diantaranya:
Memiliki alamat secara online
Jangkauan tanpa batas sehingga dapat diakses oleh pengguna di seluruh dunia
dalam waktu yang tak terbatas (24 jam sehari tanpa henti).
Dapat berfungsi sebagai identitas pribadi/perusahaan tentang profil diri agar
dapat diketahui oleh para customer dalam menjalankan bisnis sehingga
komunikasi dapat berjalan dengan mulus.
Situs personal dapat berfungsi sebagai juru bicara untuk menuangkan ide,
gagasan, kritik, saran, berbagi ilmu, dan suara hati lainnya yang ingin
dituangkan ke dalam situs melalui tulisan. Pada akhirnya menjadi “image
branding” terhadap orang yang bersangkutan. Hal ini sudah dilakukan oleh
banyak orang, dan ini terbukti banyaknya orang “selebritis IT” hanya karena
tulisan yang ada di situs pribadinya.
Menjadi cermin pribadi maupun citra perusahaan apabila fitur yang disediakan
cukup interaktif dan dinamis.
Semua manfaat itu tidak akan terwujud jika bentuk dan fitur website “amburadul”. Itu
semua sangat bergantung pada sang “web developer” dalam memvisualisasikan
profil perusahaan ke dalam website. Meskipun demikian, sebagai pemilik situs juga
harus ikut terlibat dalam pembentukan dan pengembangan website yang interaktif
dan dinamis agar sesuai dengan sasaran dan tujuan yang ingin dicapai. Hal inilah
yang jarang disadari oleh para pemilik situs. Umumnya para pemilik situs
mempercayakan seluruh pengembangannya kepada sang “web developer”
Berikut ini ada beberapa tips untuk calon pemilik situs dalam memberikan masukan
kepada pengembang web agar pembuatan situs dapat berjalan dengan lancar
sehingga tidak melenceng dari sasaran dan tujuan.
Melakukan survei dengan mesin pencari (search engine) tentang contoh situs
yang sudah ada dan situs pesaing bisnis yang udah muncul. Pelajarilah dengan
seksama terhadap situs tersebut, jika perlu tulislah poin-poin penting yang
menjadi andalan situs tersebut. Hal ini akan sangat membantu dalam
menentukan isi situs yang akan ditampilkan.
Dari hasil survei tersebut, tulislah keinginan Anda tentang isi situs yang akan
dibuat secara detail. Catatan tersebut menjadi acuan untuk memilah-milah
bagian yang penting dan yang tidak penting. Jika memiliki anggaran yang
terbatas, maka poin-poin yang penting dapat didahulukan untuk ditampilkan.
Buatlah sketsa tata letak halaman (coretan di atas kertas menggunakan pensil
untuk membuat kotak-kotak yang dinamai). Bayangkan tentang tata letak
(layout) web yang akan dibuat, Susunlah bagian yang akan ditonjolkan (eye-
catching) pada atas terlebih dulu dan yang tidak penting pada bagian yang lain.
Usahakan membuat pula halaman lain jika masing-masing halaman terdapat
perbedaan bentuk.
Susunlah kata kunci (keyword) yang digunakan sebagai acuan pencarian.
Pikirkanlah secara seksama tentang isi situs Anda untuk menentukan kata kunci
yang tepat agar pengguna dapat menemukan situs Anda secara cepat
berdasarkan kata kunci yang dimasukkan. Jika memiliki beberapa kata kunci,
urutkan kata kunci tersebut berdasarkan prioritas. (misal: datakom, lintas, buana,
penebit, buku, bermutu).
Periksa kembali data-data dalam situs sebelum di-launching. Hal ini untuk
memudahkan dalam perbaikan situs sebelum diletakkan secara on-line.
KATEGORI WEB
Meskipun belum ada situs resmi yang membuat kategori tentang sebuah website,
berikut ini terdapat informasi yang sedikit membantu dalam mengelompokkan
website berdasarkan kategori.
SITUS BISNIS DAN EKONOMI: Asosiasi & Organisasi, E-commerce dan Jasa,
Finansial & Investasi, Bussines Center, dan lain-lain.
SITUS BERITA DAN MEDIA : Buku, Majalah, Media Online, Portal Berita, Radio,
Surat Kabar, Tabloid, Televisi, dan lain-lain.
SITUS HIBURAN : Film, Games (Permainan), Humor, Musik, Ringtones, Selebritis,
dan lain-lain
SITUS PRIBADI : Galeri Foto, Blog / Weblog, Website Pribadi, Mahasiswa, Teman
dan Keluarga, Tentang Remaja, Tips dan Trik, dan lain-lain.
SITUS INFORMASI : Bisnis dan Ekonomi, Informasi Kerja, Informasi Kota, Gaya
Hidup, Jual Beli, Sains dan Teknologi, dan lain-lain.
SITUS KOMPUTER DAN INTERNET : Database, Desain Grafis, Hacking, Internet
dan Web, Jaringan, Multimedia, Pemrograman, Perangkat Keras, Perangkat Lunak,
Tutorial, dan lain-lain.
SITUS ORGANISASI :Bisnis, LSM, Politik, Profesional, Keagamaan, Sains dan
Teknologi, Sosial, dan lain-lain.
SITUS OLAH RAGA : Olah Raga Air, Baseball, Bela Diri, Basket, Bola Voli,
Bowling, Bulu Tangkis, Catur, Golf, Otomotif, Sepak Bola, Skateboard, Tenis, Tinju,
dan lain-lain.
SITUS KESEHATAN: Asosiasi, Fitness dan Spa, Medis, Pengobatan Alternatif,
Rumah Sakit, dan lain-lain.
SITUS PEMERINTAH : Lembaga Pemerintah, Hukum, Kedutaan Asing, Kedutaan
Indonesia, Politik, Kementerian, Militer, Organisasi, Perwakilan Kota, dan lain-lain
SITUS PENDIDIKAN : Anak-anak, Asosiasi Mahasiswa, Dakwah, Edukasi, Bahasa,
Komputer, Kursus dan Pelatihan, Perguruan Tinggi, Sekolah Menengah, dll
SITUS REFERENSI : Ensiklopedi, Kamus, Perpustakaan, Sejarah, Museum, Peta,
dan Lain-lain
SITUS REGIONAL : Aceh, Jambi, Bali, DKI Jakarta, Jawa, Kalimantan, Sulawesi,
Sumatera, dan lain-lain
SITUS REKREASI : Candi, Danau, Gunung, Kolam Renang, Laut, Bioskop, Games,
dan lain-lain
SITUS SAINS DAN TEKNOLOGI : Riset, Penelitian, Teknologi Terpadu, Teknologi
Tepat Guna, dan lain-lain
SITUS SENI DAN KERAJINAN : Barang Antik, Kerajinan, Kultur dan Tradisi,
Museum dan Galeri, Sastra, Seni Peran (Acting), Seni Visual, Seni Desain, dll
SITUS SOSIAL DAN BUDAYA : Agama, Anak-anak, Hobi, Keluarga, Komunitas,
Lingkungan, dan lain-lain
SITUS WISATA : Agen Wisata, Aktivitas, Hotel, Informasi dan Tips, Jasa
Transportasi, Restoran, Petunjuk Wisata, dan lain-lain
DASAR-DASAR PEMILIHAN WARNA
Seperti telah dijelaskan di awal, pemilihan warna yang tepat sangat mempengaruhi
respon pengunjung terhadap situs kita. Pilihlah warna sesuai dengan tema dalam
situs tersebut. Sebagai contoh, jika situs berisi informasi tentang wisata pilihlah
warna yang modern. Misalnya warna merah, biru, orange, dan lain sebagainya.
Intinya pilihlah warna yang “eye cacthing” bagi pengguna agar menimbulkan rasa
ingin tahu tentang informasi penting dalam situs tersebut. Memang, pemilihan warna
sebuah situs bergantung pada warna yang disukai oleh “si pembuat” itu sendiri dan
selera pemilih situs. Para pengembang web harus mengikuti kemauan para
pemesan, yang notabene pemilik situs. Pengembang web perlu meminta referensi
kepada calon pemesan tentang warna yang disukai agar ketika sampai proses
pengembangan tidak terjadi perubahan warna yang sangat drastis. Pengembang
juga tidak boleh memaksakan diri untuk memilih warna sesuai seleranya.
Warna sebuah situs memiliki makna tersendiri, dan hanya pemilik situs saja yang
tahu tentang makna tersebut. Berikut ini terdapat ulasan mengenai makna warna
yang dapat diterapkan ketika membangun sebuah situs yang profesional. Warna-
warna tersebut memiliki makna yang positif dan negatif karena warna tersebut
sangat mempengaruhi emosional pengunjung untuk menentukan langkah
selanjutnya. Warna dapat dikelompokkan menjadi tiga bagian yaitu: warna sejuk,
warna hangat, dan warna netral.
WARNA-WARNA SEJUK : Biru, Hijau, Ungu, Pirus dan Perak.
Warna-warna sejuk cenderung berpengaruh memberikan perasaan tenang bagi
yang melihatnya. Meskipun digunakan sendiri, warna-warna ini bisa mempunyai
rasa dingin atau impersonal, Berikut ini makna dari warna dalam kategori sejuk:
Biru
- Positif: keheningan, mencintai, kesetiaan, rasa aman, percaya, intelligence,
berhubungan dengan ilmu pengetahuan (sciences)
- Negatif: kedinginan, ketakutan
Hijau
- Positif: berhubungan dengan uang, pertumbuhan, kesuburan, kesegaran,
(penyembuhan/pengobatan), healing, keteduhan
- Negatif: iri hati, kecemburuan, kesalahan, kekacauan
Ungu
Ungu adalah kombinasi biru dan merah, oleh sebab itu ditemukan baik kategori-
kategori hangat maupun sejuk
- Positif: raja, kaum ningrat, spirituality, kemewahan, ambition
- Negatif: misteri, kemasgulan
Pirus
- Positif: rohani, sembuh, perlindungan, canggih (sophisticated)
- Negatif: cemburu, kewanitaan
Perak
- Positif: glamor, tinggi, anggun, halus dan rapi (sleek)
- Negatif: pengkhayal, tidak tulus
WARNA-WARNA HANGAT : Merah, merah muda, kuning, orange, ungu, dan
emas. Warna hangat cenderung mempunyai suatu efek kegairahan bagi yang
melihatnya. Oleh karena itu ketika warna ini digunakan sendiri dapat menstimulasi,
membangitkan emosi kekerasan/kehebatan dan kemarahan. Berikut ini makna dari
warna dalam kategori sejuk:
Merah
- Positif: cinta, energi, kuasa, kekuatan, penderitaan, panas
- Negatif: kemarahan, bahaya, peringatan, ketidaksabaran
Merah muda
- Positif: sehat, bahagia, feminin, rasa kasihan, manis, suka melucu
- Negatif: kelemahan, kewanitaan, ketidak dewasaan
Kuning
- Positif: terang/cerdas, energi, matahari, kreativitas, akal, bahagia
- Negatif: penakut, tidak bertanggungjawab, tidak stabil
Orange
- Positif: keberanian, kepercayaan, kehangatan/keramahan, keakraban, sukses
- Negatif: ketidak-tahuan, melempem, keunggulan
Ungu
Warna ungu ditemukan di dalam kedua-duanya warna dingin dan
hangat
- Positif: royalti, kebangsawanan, kerohanian, kemewahan, ambisi
- Negatif: kegaiban, kemurungan
Emas
- positif: kekayaan, kemakmuran, berharga, tradisional
- negatif: ketamakan, pemimpi
WARNA-WARNA NETRAL : Coklat, berwarna coklat, gading, kelabu, putih dan
hitam. Warna netral adalah suatu pemilihan agung untuk bergaul dengan suatu palet
(lukis) hangat atau dingin. warna-warna netral sangat baik untuk latar belakang
dalam suatu situs. Tambahkan warna hitam untuk menciptakan suatu yang lebih
gelap ” dan keteduhan” tentang suatu warna utama. Berikut beberapa makna dari
beberapa warna netral:
Hitam
- Positif: perlindungan, dramatis, serius, bergaya/anggun,formalitas
- Negatif: kerahasiaan, kematian, kejahatan/ malapetaka,kegaiban
Abu-abu
- Positif: keamanan, keandalan, kecerdasan/inteligen, padat,konservatif
- Negatif: muram, sedih, konservatif
Coklat
- Positif: ramah, bumi, keluar rumah, umur panjang, konservatif
- Negatif: dogmatis, konservatif
Tan ( wol halus yang masih putih)
- Positif: ketergantungan, fleksibel, keriting, konservatif
- Negatif: tumpul, membosankan, konservatif
Gading
- Positif: ketenangan, kenyamanan, kebersihan/kesucian, hangat
- Negatif: lemah, tidak stabil
Putih
- Positif: kebaikan, keadaan tak bersalah, kesucian, segar, gampang
- Negatif: musim dingin, dingin, jauh
Selagi tidak ada kemutlakan “pembenaran” untuk mewarnai sebuah website, Anda
perlu mengetahui sasaran audience, dan mempertimbangkan respon mereka
tentang warna yang digunakan. Faktor mendasar yang perlu dipertimbangkan untuk
target pengguna/pengunjung adalah perbedaan umur/zaman, perbedaan
tingkatan/kelas, perbedaan jenis kelamin dan keseluruhan kecenderungan warna.
Perbedaan umur/zaman merupakan faktor pokok yang tidak boleh diabaikan. Jika
yang menjadi target adalah anak remaja (ABG) dan anak-anak, maka mereka
menyukai warna terang, warna dasar, warna primer merah, biru, kuning dan hijau.
Berbeda dengan orang dewasa, yang umurnya lebih tua, mereka akan menyukai
warna yang lebih gelap, sama dengan warna dari kelompok warna-warna netral.
Perbedaan kelas adalah faktor pokok lain yang memiliki pengaruh dalam memilih
warna. Sebuah riset di Amerika Serikat telah menunjukkan bahwa kelas pekerja
menyukai warna seperti biru, merah, hijau, dan lain lain. Sedangkan mereka yang
lebih terdidik cenderung menyukai yang lebih mengaburkan warna seperti taupe,
warna biru langit, celadon, ikan salem, dll.
Perbedaan jenis kelamin merupakan salah satu faktor nyata dalam memilih warna.
Pria cenderung menyukai warna dingin (cool) seperti hijau dan biru, sedangkan
wanita menyukai warna lebih hangat, yaitu merah dan orange. Jika kita memiliki
audience (pendengar/pemerhati) keduanya (laki-laki dan perempuan), yang
sebaiknya mempertimbangkan pencampuran beberapa warna dari warna cool dan
hangat.
Dengan mengetahui target audience dan efek yang berbeda dari warna yang
ditimbulkan, kita memperoleh suatu kemampuan lebih besar untuk menentukan
warna apa yang terbaik untuk menarik pengunjung baik pria maupun wanita. Satu
hal lagi yang perlu diperhatikan, pengunjung web biasanya menggunakan monitor
berbeda, browser berbeda, dan sistem operasi berbeda. Itu hampir mustahil untuk
memastikan bahwa warna yang kita buat akan sama pada tiap-tiap komputer seperti
halnya dicetak. Jangan hanya terkait dengan perbedaan pada komputer yang
berlainan, tetapi bagaimana kita mencoba menjadikan penggunaan warna menjadi
konsisten. Bagaimana kita menciptakan suatu palet warna untuk perusahaan,
identitas merek, atau warna produk, konsistensi adalah kunci. Gunakanlah warna
yang sama pada seluruh usaha pemasaran untuk menciptakan keakraban dengan
produk atau perusahaan. Konsistensi akan membantu menarik pengunjung. Warna
yang ditampilkan di website harus sama dengan warna dalam bentuk publikasi
(booklet, flyer, pamflet, dan lain-lain yang sejenis).
AREA KERJA DREAMWEAVER
Pada saat menjalankan Dreamweaver, akan muncul tampilan Starter Page yang
biasanya terdiri dari :
Open a Recent Item merupakan alternatif untuk membuka file, atau recent file untuk
membuka file yang belum terbuka pilih Open pada Starter Page.
Bagian Tengah yaitu Create New yang digunakan untuk membuat halaman baru
web. Terdapat beberapa macam file untuk format halaman web yang dapat anda
buat, sepertiHTML (Hypertext Markup Language), Coldfusion, PHP, Asv JavaScrip,
Asv VBSript, JSP, ASP.NET, CSS, dll.
Mengenal Area Kerja Macromedia DreamWeaver
Pada Area kerja Macromedia Dreamweaver terdapat berbagai macam fasilitas yang
digunakan untuk melakukan semuah kegiatan editing halaman web. Area kerja yang
ada dalam program Macromedia Dreamweaver antara lain Title Bar, Menu Bar,
Document Toolbar, Documen Window, Panel Group, Workspace Switcher, Tag
Selector, dan Property Inspector, adapun tampilan area kerja Macromedia
Dreamweaver seperti pada gambar berikut :
Menggunakan Menu Bar
Untuk membuka document, menyimpan document, menutup document, Serta
perintah lainnya Anda dapat melalui Menu Bar pada jendela Macromedia Dream
Weaver, caranya pilih File > Lalu tentukan pilihan perintah yang akan anda gunakan.
Document Toolbar Menu Bar Panel GroupWorkspace Switcher
Tag Selector
Property Inspector
Document Window
Title Bar
Document Window
Document Window menampilkan dakumen dari halaman web yang aktif atau
document yang sedang di edit. Pada Document Window terdapat Title Bar yang
menampilkan Judul Halaman, Fasilitas Zoom, Document Toolbar, dan Tag Selector.
Document Toolbar
Document Toolbar berisi tombol-tombol yang digunakan untuk mengatur layar kerja
document pada Dreamweaver dengan cepat, di antaranya: Show Code View, Show
Code and Design Views (Split), dan Show Design.
Tag Selector
Tag Selector berfungsi untuk menampilkan tag HTML dari Objek yang terseleksi.
Anda dapat memilih <body> untuk memilih keseluruhan elemen dokumen. Tag
Selector terdapat pada Document Windows dan terletak di bawah sebelah kiri.
Macam-Macam Tabulasi
Tab Common
Pada Tab ini terdapat tool yang digunakan untuk membuat dan menyisipkan objek
ke dalam halaman web, seperti membuat Hyperlink, Tabel, Gambar, Media, dan lain
sebagainya. Berikut gambar Tab Common.
Tab Layout
Pada Tab ini berisikan tool-tool yang berfungsi untuk membuat layout halaman web,
seperti membuat tabel, frame dan lain sebagainya. Berikut gambar Tab Layout.
Tab Form
Tab ini digunakan untuk membuat tampilan website menjadi lebih interaktif karena
pengguna dapat memberikan input pada sistem atau website dengan menggunakan
tool yang ada dalam tab form.
Hyperlink Named Achor
Images Date Template
Email Link Tabel Media Comment Tag Chooser
TabelLayoutTabel
Insert Row
Above
Insert Colom
Left Frames
Inset Div tag Draw Layout
Celk
Insetr Row
Belowk
Insert Colom Right
Tabular data
Draw Layer
Form merupakan sebuah komponen yang digunakan untuk berinteraksi dengan
pengguna web. Dengan adanya penggunaan komponen form, pengguna dapat
melakukan pengiputan, pemrosesan dan penyimpanan data. Pengelolaan data
tersebut tentunya membutuhkan adanya bahasa pemograman tambahan yang
disebut Server Side. Adapun beberapa jenisnya seperti ASP, PHP, dan lain-lain.
Properties Elemen-elemen pada FORM :
Form Kotak (tabel) dengan garis terputus-putus, berwarna merah
berfungsi untuk menampung elemen-elemen form.
Text Field Kotak Input yang digunakan untuk memasukkan karakter berupa
angka, hurup dan nilai input lainnya.
Text Area Sama dengan Text Field hanya pemasukkan karakter bisa lebih
banyak.
CheckBox Merupakan Objek Pilihan berupa chek list yang digunakan untuk
memilih beberapa pilihan diantara semua pilihan
Radio Button Merupakan Objek Pilihan yang digunakan untuk memilih satu
pilihan diantara semua pilihan
List/Menu Daftar Pilihan yang digunakan untuk memilih satu pilihan
diantara semua pilihan tersebut
Jump Menu Sama seperti List, hanya setiap pilihan terdapat Link
Form
Text Field
Hidden Field
Text Area
Check Box
Radio Button
Radio Group
List Menu
Jump Menu
Image Field
File Field
Button
Button Objek yang digunakan untuk menjalankan Procedur / Event
Submit digunakan sebagai pemrosesan data
Reset digunakan untuk menghapus data inputan
Tab Text
Tab Text berfungsi untuk mengatur format pengaturan teks, paragrap, maupun
karakter teks lainnya.
Tab Property
Tab Property Inspector berfungsi untuk mengatur atau mengedit property/objek-
objek yang ada pada halaman Web. Property Inspector menampilkan semua
properti objek ( misalnya objek teks, gambar, tabel ) yang terseleksi pada jendela
kerja, dalam property Inspector, anda dapat dengan mudah mengatur atau mengedit
properti objek, yaitu dengan memasukkan nilai-nilai parameter yang disediakan.
Secara umum Property Inspector terdiri dari Page Property, Image Property, Table
Property dan Form Property. Dan biasanya terdapat di lembar document bawah.
Gambar Tab Property Image
TABEL
Menbuat halaman Web merupakan hal yang sangat penting karena akan
menentukan hasil dari website. Sebuah Website dengan tampilan yang menarik
dapat mendorong pengunjung untuk sering mengakses website tersebut. Halaman
web yang baru tentu belum memiliki banyak objek yang dimasukkan ke dalamnya,
padahal dengan adanya beberapa objek akan dapat menghasilkan sebuah halaman
web yang menarik. Dalam web menyediakanfasilitas untu membuat suatu layout
halaman web dengan Tabel, anda dapat menempatkan komponen-komponen
seperti teks maupun gambar dengan teratur, di samping memberikan warna pada
tiap-tiap tabel tersebut, sehingga dapat menghasilkan tampilan web yang serasi.
Membuat Tabel
1. Siapkan Layout (tampilan tabel yang akan anda buat) terlebih dahulu, sehingga
memudahkan kita untuk membuat tampilan Interface Website yang akan kita
buat.
2. Bagian-bagian Tabel merupakan salah satu bagian terpenting dalam pembuatan
sebuah web yang terdiri dari:
Rows : Baris pada tabel
Columns : Kolom pada tabel
Tabel Width : Lebar tabel
Border Thicknes : Ketebalan garis pada sisi tabel
Cell Spacing : Jarak antar Sel
Cell Padding : Lapisan Sel
Catatan : Pertemuan Antara Rows (baris) dengan Columns disebut dengan Cell
MEMBUAT LINK DAN NAVIGASI
Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika
mencari informasi yang dibutuhkan. Sebaiknya menggunakan tombol menu yang
umum, seperti: Home, Product, Service, dan Contact Us. Dalam Macromedia
Dreamweaver, kita bisa membuat Pop-up Menu, dan Jumping Menu secara mudah.
Anda tidak bersusah payah menuliskan script yang panjang dalam bahasa
Javascript karena telah disediakan tool yang sangat mudah dan fleksibel.
Membuat Pop-up Menu
Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain
yang sejenis adalah adanya tool untuk membuat menu pop-up yang dibuat dengan
bahasa Java. Bagi mereka yang masih awan dengan bahasa Java, tidak perlu
bingung karena disediakan panel Behavior untuk mempermudah dalam pembuatan
menu pop-up. Sebelum membuat pop-up menu terlebih dulu harus menyiapkan
nama file sebagai link. Sebagai contoh: ketika user memilih menu PC maka yang
akan muncul adalah pilihan nama computer seperti Acer, HP, BenQ, dan lain
sebagainya. Dan ketika user memilih salah satu opsi (missal: Acer) maka akan
terhubung ke file tersebut. Dengan demikian, Anda harus membuat beberapa file
dengan bentuk interface yang sama seperti halaman utama, yaitu menyimpan
dengan nama lain (contoh: Save As > acer.html). Diasumsikan, Anda telah memiliki
beberapa file sebagai link yang dimaksud.
1. Pertama kali, klik menu PC yang sudah anda buat pada aplikasi corel atau
photosoph. aktifkan salah satu objek gambar tersebut.
2. Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara
memilih menu Window > Behaviors.
3. Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus)
untuk membuka menu
4. Selanjutnya pilih Show Pop up Menu
5. Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-
up Menu yang masih kosong.
6. Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).
7. Kemudian masukkan alamat URL pada kolom Link.
8. Selanjutnya pada kolom Target, pilih _parent
9. Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian
lakukan hal sama seperti pada tahap 6.
10.Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar
belakang pop up menu. Tentukan jenis dan ukuran font yang digunakan. Lalu
tentukan pula warna teks dan warna cell ketika mouse berada di atas teks.
11.Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak
pop up menu.
12.Klik Tab Position untuk menentukan posisi pop up menu.
13.Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.
14.Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain.
Membuat Rollover Image
Macromedia Dreamweaver selain menyediakan tool untuk membuat Behaviors/Pop
up Menu juga menyediakan tool untuk membuat Rollover Image sebagai tombol.
Yang harus Anda lakukan pertama kali adalah menyediakan dua buah gambar yang
ukurannya sama tapi warnanya berbeda.
Langkah-langkahnya :
1. Buatlah duplikasi gambar tombol sama pada Corel Draw atau PhotoShop yang
telah ada. Misalkan:
Gambar 1 :
Gambar 2 :
2. Selanjutnya pilih menu Insert > Image Objects > Rollover Image.
3. Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada
kolom Image name kemudian tentukan gambar asli pada kolom Original Image.
Untuk mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk
gambar rollover pada kolom Rollover Image.
4. Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika
tombol tersebut di klik.
5. Untuk melihat hasilnya, tekan tombol F12.
Penggunaan Layer
Layer merupakan elemen Tag Div yang telah dimodifikasi menjadi sebuah elemen
berbentuk objek transparan yang digunakan untuk meletakkan sebuah objek
gambar, teks dan lainnya. Dengan Layer anda dapat menempatkan sebuah objek
secara menumpuk tanpa harus bergeser karena ada objek lain.
Langkahnya :
1. Klik Menu Insert > pilih Layout Objects > Klik Layer
2. Selanjutnya akan muncul kotak/bingkai seperti dibawah, untuk menambahkan
objects lakukan seperti menyisipkan sebuah objects gambar/teks.
Example Layer:
3. Lakukanlah pengeditan sesuai dengan kebutuhan yang anda inginkan.
Media Flash
Langkah-langkah :
Cara 1 :
Clik Menu Insert > Pilih Media > Clik Pilihan yang anda inginkan (Flash, Flash Button, Flash Text, dll)
Cara 2 :
Clik Tab Common > Click Icon Flash Button > Tentukan Pilihan Button
Membuat Frame dan Framset
Pada Dreamweaver terdapat istilah Frame dan Frameset. Frame adalah area dalam
jendela browser yang dapat menampilkan dokumen HTML secara terpisah dari area
(frame) yang lain. pada umumnya frame dalam halaman web berfungsi untuk
membagi halaman web menjadi beberapa area, antara lain untuk menampilkan
menu, isi dari dokumen, atau informasi dari website tersebut.
Membuat Frames :
1. Buka Lembar Baru HTML
2. Aktifkan Panel Frames > Klik Window > Klik Frames atau Tombol Shift + F12
3. Setelah Aktif Jendela Window Frames di layar Anda
4. Klik Menu Inset > Pilih HTML > Pilih Frames > Klik Left Nested Top atau Pilihan yang lainnya.
5. Lalu Atur Tampilan Propersties sesuai dengan kebutuhan
6. Simpan 1 Persatu nama Frames dengan Pilih Menu File > Klik Save Frame
7. Setelah Frame sudah diberi nama File semua Pilih Menu File > Klik Save All