Diktat DPW1 - Pendahuluan dan Pengenalan Dreamweaver

download Diktat DPW1 -  Pendahuluan dan Pengenalan Dreamweaver

If you can't read please download the document

description

Diktat DPW1 - Pendahuluan dan Pengenalan Dreamweaver berisi mengenai: Konsep dasar Web design, teknologi dan perangkat pendukung dalam membangun web, pengenalan menu-menu dan fasilitas Dreamweaver 8, konsep merancang situs web yang baik serta praktek mendefinisikan situs di dreamweaver

Transcript of Diktat DPW1 - Pendahuluan dan Pengenalan Dreamweaver

Design dan Pemrograman Web 1 (PG110)

Bagian 1

Pendahuluan

Achmad Solichin ([email protected])

Halaman 1

Design dan Pemrograman Web 1 (PG110)

Bab 1

Teknologi dan Perangkat PendukungEditor Program (Code Editor) Web Browser Editor Gambar (Image Editor) Editor Multimedia (Multimedia Editor) Editor Warna (Color Editor) Sebuah situs web (website) merupakan kumpulan dari berbagai jenis file. Sebagian besar diantaranya merupakan file HTML. Jenis lainnya dapat berupa file image, multimedia dan animasi seperti video dan flash. Kesemuanya harus dapat disatukan menjadi satu kesatuan. Sebuah situs web yang baik harus dapat menyajikan setiap komponen dengan serasi, konsisten dan indah. Saat ini boleh dikatakan tidak ada (atau belum ada) satu software atau perangkat lunak yang dapat digunakan untuk membangun sebuah situs secara keseluruhan, mulai dari merancang, membuat halaman HTML, mengedit image, multimedia dan animasi, sampai menampilkannya sekaligus. Namun, dalam merancang situs web, kita harus menggunakan beberapa perangkat lunak (aplikasi) sekaligus. Perangkat lunak yang diperlukan dalam membangun situs web, setidaknya dapat dibagi menjadi: 1. Editor program (code editor) 2. Web browser 3. Editor gambar (image editor) 4. Editor multimedia (multimedia editor) 5. Editor warna (Color editor)

Editor Program (Code Editor)Editor program (code editor) merupakan suatu aplikasi yang dapat digunakan untuk membantu dalam membuat program tertentu. Saat ini tersedia banyak sekali editor program, baik yang khusus untuk bahasa program tertentu maupun yang dapat digunakan untuk berbagai jenis bahasa program. Fitur yang ditawarkan oleh masing-masing editor juga beragam, mulai dari yang sederhana seperti Notepad sampai yang kompleks seperti Netbeans untuk Java dan Dreamweaver untuk design situs web. Secara khusus dalam konteks design situs web sendiri cukup banyak editor yang tersedia, tentunya dengan kelebihan dan kekurangannya masing-masing. Salah satu editor web yang banyak digunakan yaitu Macromedia Dreamweaver. Dreamweaver sendiri merupakan sebuah perangkat lunak yang secara khusus dibuat untuk membantu membangun situs web secara mudah dan cepat. Dreamweaver menyediakan berbagai fasilitas yang membantu penggunanya untuk membuat halaman-halaman web dengan mudah. Dan bagi pengguna yang tidak atau kurang mengerti program seperti HTML, Dreamweaver merupakan salah satu pilihan tepat untuk membangun situs web. Dreamweaver pertama kali diluncurkan (versi 1) pada tahun 1997. Hingga saat ini, Dreamweaver sudah mencapai versi 8 (tahun 2004). Dreamweaver dikembangkan oleh perusahaan bernama Macromedia Inc. Untuk mengetahui perkembangan dan versi terakhir, kita dapat berkunjung ke situs resminya di http://www.macromedia.com.

Achmad Solichin ([email protected])

Halaman 2

Design dan Pemrograman Web 1 (PG110)

Beberapa keunggulan Macromedia Dreamweaver yang menjadikannya banyak digunakan dalam membangun situs web, antara lain: 1. Tampilan (interface) Dreamweaver mudah dimengerti oleh pengguna dari semua tingkat keahlian, bahkan bagi orang awam sekalipun. 2. Dreamweaver cukup tangguh untuk membangun berbagai tipe situs web. 3. Dreamweaver selalu menjadi perangkat lunak pertama yang selalu mendukung teknologi web terkini. 4. Dreamweaver merupakan editor berbasis WYSIWYG (What You Say Is What You Get), artinya apa yang tampak di editor, sama seperti apa yang akan ditampilkan di web browser. 5. Dreamweaver terintegrasi dengan produk Macromedia lainnya, seperti Macromedia FreeHand, Fireworks, dan Flash. Dalam membangun situs web, kita akan menggunakan Macromedia Dreamweaver untuk membuat dan mengedit 3 (tiga) jenis script, yaitu HTML, CSS dan Javascript.

HTML merupakan singkatan dari Hypertext Markup Language. HTML merupakan bahasa mark-up yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah web browser. Apa yang ditampilkan di browser (internet) adalah rangkaian perintah (script) HTML. HTML saat ini merupakan standar internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). Pada dasarnya dokumen HTML mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG. Tag HTML umumnya terdiri dari tag pembuka dan tag penutup. Sebagai contoh jika kita ingin menampilkan suatu teks menjadi huruf tebal (bold), maka kita perlu menambahkan tag didepan teks dan diakhiri dengan tag . Sedangkan XHTML atau eXtensible HyperText Markup Language merupakan bahasa markup penerus dan pengembangan dari HTML yang memiliki kemampuan yang kurang lebih mirip HTML, tapi dengan aturan sintaks yang lebih ketat. HTML merupakan aplikasi dari SGML (Standard Generalized Markup Language) yang sangat fleksibel, sedangkan XHTML adalah aplikasi dari XML, turunan SGML yang lebih terbatas. Karena XHTML harus memiliki keteraturan-bentuk (mengikuti sintaks yang tepat), dokumen XHTML dapat diproses otomatis dengan menggunakan standar pemroses XML - tidak seperti HTML yang membutuhkan pemroses yang cukup sulit dan kompleks. XHTML dapat dianggap sebagai perpaduan antara HTML dan XML karena merupakan formulasi ulang HTML dalam bentuk XML. XHTML 1.0

HTML dan XHTML

Achmad Solichin ([email protected])

Halaman 3

Design dan Pemrograman Web 1 (PG110)

telah menjadi rekomendasi World Wide Web Consortium (W3C) pada tanggal 26 Januari 2000.

CSS

CSS atau Cascading Style Sheets merupakan suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C). CSS digunakan antara lain untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi. CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.

Javascript

Javascript merupakan bahasa pemrograman kecil yang berjalan di sisi client (browser). Javascript dijalankan di sisi client, sehingga tidak memerlukan compiler atau interpreter tertentu. Hanya saja untuk menjalankannya, browser harus mendukung javascript. Saat ini hampir semua browser yang ada sudah mendukung javascript. JavaScript adalah merek dagang terdaftar dari Sun Microsystems, Inc. Bahasa ini digunakan di bawah lisensi untuk teknologi yang diciptakan dan diimplementasikan oleh Netscape Communications dan entitas barunya seperti Mozilla Foundation.

Web BrowserWeb browser merupakan sebuah perangkat lunak (aplikasi) yang digunakan untuk menampilkan halaman-halaman web. Halaman web yang dimaksud adalah file HTML dan beberapa file lainnya seperti CSS dan Javascript. Halaman web tersebut dapat tersimpan di lokal, atau di sebuah server intranet/internet. Jadi, web browser tidak selalu terhubung ke internet. Dengan Dreamweaver, kita sebenarnya dapat melihat tampilan situs secara langsung seperti halnya di browser (fitur what-you-see-is-what-you-get), namun hal tersebut tidak dapat dijadikan patokan bahwa tampilan situs akan sama di semua browser. Setiap browser terkadang memiliki aturan tersendiri dalam menampilkan situs web. Jadi, dalam membuat suatu situs web, alangkah baiknya jika dicoba di beberapa browser sekaligus. 1. 2. 3. 4. 5. Berikut ini beberapa web browser yang paling banyak digunakan: Microsoft Internet Explorer (http://www.microsoft.com) Mozilla Firefox (http://www.mozilla.org) Netscape Browser (http://www.netscape.com) Opera (http://www.opera.com) Safari (http://www.apple.com/safari)

Achmad Solichin ([email protected])

Halaman 4

Design dan Pemrograman Web 1 (PG110)

Saat ini sebagian besar pemakai internet menggunakan browser Internet Explorer (IE) dan Mozilla Firefox. Hal tersebut terlihat dari statistik yang diambil oleh website W3Counter.Com, seperti terlihat pada gambar. Internet Explorer merupakan browser yang secara default sudah ada di sistem operasi Windows XP. Namun pada dasarnya semua browser di atas dapat kita gunakan untuk mencoba situs web kita.

Achmad Solichin ([email protected])

Halaman 5

Design dan Pemrograman Web 1 (PG110)

Editor Gambar (Image Editor)Gambar atau image merupakan unsur yang cukup penting dalam design web. Editor gambar (image editor) merupakan perangkat lunak atau aplikasi yang dapat digunakan untuk membuat dan mengedit gambar. Dreamveaver, walaupun dapat digunakan untuk menempatkan gambar di halaman web dan manipulasi gambar sederhana, belum bisa dikategorikan sebagai image editor. Editor gambar (image editor) dapat dibagi menjadi dua jenis, paint-program dan draw-program. Paint program menghasilkan gambar dalam format bitmap atau raster. Paint program diukur berdasarkan satuan pixel. Contoh dari paint program adalah Adobe Photoshop dan Macromedia Fireworks.

Sedangkan draw program merupakan jenis editor gambar yang menghasilkan file gambar dalam format vektor. Contoh dari editor ini adalah Macromedia FreeHand dan Adobe Ilustrator. Untuk situs web, sebaiknya kita menggunakan format gambar dalam bentuk bitmap (raster) karena format ini lebih ringan dan ukuran filenya lebih kecil. Jadi, kita dapat menggunakan Adobe Photoshop atau Fireworks untuk membuat dan mengedit gambar.

Editor Multimedia (Multimedia Editor)

Achmad Solichin ([email protected])

Halaman 6

Design dan Pemrograman Web 1 (PG110)

Seperti halnya gambar, kita juga terkadang ingin menampilkan beberapa file multimedia dan animasi di situs web. Dreamweaver memiliki fasilitas untuk menempatkan dan mengatur tampilan file multimedia, namun Dreamweaver tidak dapat digunakan sebagai multimedia editor. Untuk itu, kita memerlukan software atau aplikasi khusus untuk menangani file multimedia.

Jenis-jenis file multimedia diantaranya file audio, animasi dan video. Berikut ini beberapa jenis format file multimedia beserta plugin untuk membukanya. Format Multimedia Macromedia Flash Macromedia Shockwave Apple QuickTime Microsoft Windows Media RealMedia Adobe Acrobat Scalable Vector Graphics (SVG) Tipe Animasi Animasi Streaming audio dan video Streaming audio dan video Streaming audio dan video Rich text documents Vector graphics Plug-in Flash Player atau Shockwave Player http://www.macromedia.com/ Shockwave Player http://www.macromedia.com/ QuickTime Plug-in http://www.apple.com/ Windows Media Player http://www.microsoft.com/ RealPlayer http://www.real.com/ Acrobat Reader http://www.adobe.com/ Adobe SVG Viewer http://www.adobe.com/

Editor Warna (Color Editor)Warna merupakan komponen yang cukup berpengaruh dalam design web. Untuk itu, untuk mengoptimalkan hasil dalam mendesign situs web, kita memerlukan suatu software atau aplikasi yang dapat membantu pendesign situs dalam memilih warna yang tepat. Beberapa software atau aplikasi yang digunakan dalam design web, sebenarnya banyak yang juga menyertakan fasilitas untuk memilih warna dengan mudah. Berikut ini beberapa contoh: 1. Macromedia Dreamweaver 2. Adobe Photoshop 3. Color Schemer (http://www.colorschemer.com)

Achmad Solichin ([email protected])

Halaman 7

Design dan Pemrograman Web 1 (PG110)

Achmad Solichin ([email protected])

Halaman 8

Design dan Pemrograman Web 1 (PG110)

Bab 2

Mengenal Dreamweaver 8Memulai Dreamweaver Tampilan Dreamweaver 8 Dreamweaver merupakan perangkat lunak yang ditujukan untuk membuat suatu situs web. Versi pertama dirilis pada tahun 1997, dan sejak itu Dreamweaver menjadi web editor yang banyak digunakan oleh para web developer. Hal itu antara lain karena kemudahan dalam penggunaannya, kelengkapan fiturnya dan juga dukungannya terhadap teknologi terkini. Dreamweaver merupakan salah satu perangkat lunak yang dikembangkan oleh Macromedia Inc.

Memulai DreamweaverSetelah Dreamweaver terinstall di komputer, kita dapat mengaksesnya di menu Program Files. Untuk membukanya kita dapat membuka dengan memilih menu Start > All Programs > Macromedia > Macromedia Dreamweaver 8. Maka akan terbuka window start-up Dreamweaver, seperti terlihat pada gambar.

Dari window start-up Dreamweaver, terlihat 3 (tiga) kolom, yaitu Open a Recent Item, Create New dan Create From Samples. Pada kolom Open a Recent Item ditampilkan file-file yang terakhir dibuka (recent files). Kita dapat membuka file tersebut dengan mengklik salah satu nama file. Dan pada kolom ini juga terdapat menu Open... yang dapat dipilih jika ingin membuka file atau dokumen yang belum ada di recent item.

Achmad Solichin ([email protected])

Halaman 9

Design dan Pemrograman Web 1 (PG110)

Selanjutnya pada kolom Create New terdapat pilihan untuk membuat file baru. Pilihan file baru yang dapat dibuat dengan Dreamweaver antara lain file HTML, ColdFusion, PHP, ASP VBScript, Javascript, XML, CSS dan Dreamweaver Site. Pada kolom ketiga terdapat kategori Create From Samples dimana dapat kita pilih jika ingin membuat halaman web berdasarkan tampilan (template) yang sudah tersedia. Jadi pilihan ini dapat digunakan jika menginginkan membuat halaman web dengan cepat dan mudah. Jika jenis file yang akan dibuat tidak terdapat di dalam list, kita dapat memilih menu More... untuk melihat daftar jenis file yang dapat dibuka dengan Dreamweaver. Tampilannya terlihat seperti pada gambar berikut ini.

Pada kolom Category terdapat beberapa kategori file baru yang dapat dibuat, mulai dari Basic page hingga Page Designs. Berikut ini penjelasan singkat mengenai kategori tersebut: Basic page Basic page digunakan untuk membuat file-file dasar situs web. File yang termasuk dalam kategori ini antara lain file HTML, CSS, Javascript dan XML. Dynamic page Dynamic page digunakan untuk membuat file-file dinamis. Yang dimaksud dengan file dinamis adalah file atau script berbasis server (server-sidescripting). Masuk dalam kategori ini antara lain PHP, ASP, ColdFusion dan JSP. Tempate page Kategori ini menampilkan pilihan untuk membuat file baru yang berupa template. Template tersebut dapat berupa template untuk HTML, PHP atau yang lainnya. Other Kategori Other menampilkan jenis file yang tidak ada di tiga kategori sebelumnya, antara lain file Text, Java, dan seterusnya. CSS Style Sheets

Achmad Solichin ([email protected])

Halaman 10

Design dan Pemrograman Web 1 (PG110)

Pilihan kategori ini berisi beberapa contoh halaman CSS siap pakai. Framesets Jika kita ingin membuat situs dengan menggunakan frame, maka pilihlah kategori ini dan kita dapat memilih tampilan frame yang sesuai. Page Designs (CSS) Kategori ini menampilkan beberapa contoh layout halaman situs yang didesain dengan CSS. Starter Page Pada kategori Starter Page ditampilkan pilihan beberapa layout halaman depan situs. Kita dapat memilih sesuai keinginan kita. Page Designs Page Designs menampilkan berbagai format atau template dasar halaman web. Sebagai langkah awal, kita akan membuat halaman web dasar. Pilihlah jenis file dasar HTML dan selanjutnya akan ditampilkan halaman utama Macromedia Dreamweaver.

Tampilan Dreamweaver 8Tampilan Dreamweaver 8 pada dasarnya cukup mudah dimengerti, bahkan untuk orang awam sekalipun. Berikut ini merupakan tampilan Dreamweaver 8 secara default.

Tampilan Dreamweaver dapat kita bagi menjadi beberapa bagian yaitu: 1. Menu Utama Menu utama ditampilkan di bagian atas layar Dreamweaver, dan dari menu ini kita dapat mengakses semua fasilitas yang disediakan oleh Dreamweaver. 2. Insert Bar Insert Bar secara default berada tepat dibawah menu utama. Bagian ini digunakan untuk menambahkan berbagai komponen dalam design halaman situs. 3. Layar Dokumen Utama Layar dokumen utama terletak di bagian tengah. Tampilannya dapat berupa tampilan design (design-view), tampilan source program (code-view) atau keduanya.

Achmad Solichin ([email protected])

Halaman 11

Design dan Pemrograman Web 1 (PG110)

4. Properties Panel Properties panel merupakan window yang tampilannya bergantung kepada objek yang sedang aktif. Dari panel ini, kita dapat mengatur properties dari objek yang sedang aktif. 5. Panel Pendukung. Panel pendukung berada di sebelah kanan layar dokumen utama. Panel-panel ini berfungsi sebagai alat bantu dalam proses pembuatan situs web antara lain untuk memanage file, informasi penyimpanan, CSS dan sebagainya.

Menu Utama

Menu utama pada Dreamweaver terletak di bagian atas, seperti terlihat pada gambar berikut ini.

Berikut ini penjelasan singkat dari masing-masing menu dalam Dreamweaver: File. Seperti pada program (aplikasi) lainnya, menu file merupakan menu yang digunakan untuk operasi dasar aplikasi seperti membuka file, menyimpan file, mencetak, import dan export. Menu File juga memiliki sub menu Preview in Browser yang berguna untuk menampilkan halaman situs di web browser. Edit. Menu ini terdiri dari submenu yang berhubungan dengan proses editing file, seperti Copy, Cut, Paste, Undo, Redo, Find and Replace. View. Menu ini digunakan untuk mengatur tampilan layar Dreamweaver, seperti pengaturan tampilan (design view, code view atau keduanya), pengaturan zoom-in dan zoom-out dan sebagainya. Insert. Jika kita ingin menambahkan suatu objek atau komponen, seperti form, frame dan image ke dalam halaman web, kita dapat mencarinya didalam menu Insert. Menu insert sebenarnya dapat diakses dari insert bar. Modify. Menu ini digunakan untuk mengubah properties dari objek yang sedang aktif. Dan juga digunakan untuk melakukan convert table ke layer dan sebaliknya. Text. Menu ini digunakan untuk mengatur tampilan (style) text. Commands. Menu ini terdiri dari beberapa perintah berhubungan dengan source-formating dan HTML-cleaning. Menu ini juga memiliki sub menu untuk membuat web photo album. Site. Menu ini berhubungan dengan manajemen file dan situs. Window. Menu window digunakan untuk pengaturan tampilan (show-and-hide) window properties. Help. Menu ini merupakan menu bantuan mengenai penggunaan Dreamweaver.

Insert Bar

Insert bar merupakan bagian yang ditampilkan di bawah menu utama. Insert bar berisi sejumlah objek atau komponen web yang dapat disertakan di halaman web. Insert bar dapat dimunculkan dan disembunyikan melalui menu Window > Insert.

Insert bar terdiri dari beberapa kategori, yaitu: Common. Kategori ini berisi komponen-komponen HTML yang sering digunakan, seperti table, div, image, komentar, hyperlink dan sebagainya.

Achmad Solichin ([email protected])

Halaman 12

Design dan Pemrograman Web 1 (PG110)

Layout. Menu layout berisi pengaturan pilihan tampilan standar, expanded atau layout. Standar digunakan jika kita akan men-design layout dengan tabel, layout dipilih jika ingin menggunakan layer/div dalam men-design.

Forms. Kategori ini digunakan untuk menambahkan elemen form ke dalam halaman.

Text. Kategori text berisi pengaturan-pengaturan (formating) text.

HTML. HTML digunakan untuk menambahkan elemen-elemen HTML, seperti HR, table, frame dan script.

Application. Kategori ini digunakan untuk menambahkan elemen-elemen dalam website dinamis, seperti database, procedure, field dsb.

Flash elements. Kategori ini digunakan untuk menambahkan elemen flash ke dalam situs.

Favorites. Pada bagian kategori ini kita dapat menambahkan elemen-elemen atau objek-objek sesuai keinginan kita. Untuk menambahkannya, klik kanan pada bar dan pilih submenu Customize Favorite Objects...

Layar Dokumen Utama

Layar dokumen utama merupakan tempat untuk mendesign tampilan situs. Kita dapat menambahkan elemen HTML dan juga elemen yang lainnya ke layar dokumen utama ini. Tampilan layar dokumen utama dapat diatur menjadi 3 mode tampilan, yaitu design-view, code-view, dan split-view. Untuk mengaturnya, dapat menggunakan tombol yang disediakan diatas layar dokumen utama, seperti terlihat pada gambar di bawah ini.

Perbandingan tampilan layar dokumen utama dapat terlihat pada gambar-gambar berikut ini:

Achmad Solichin ([email protected])

Halaman 13

Design dan Pemrograman Web 1 (PG110)

Achmad Solichin ([email protected])

Halaman 14

Design dan Pemrograman Web 1 (PG110)

Panel Properties

Panel Properties merupakan bagian yang sangat penting untuk setiap elemen halaman. Panel properties berada di bawah layar dokumen utama. Panel ini dapat dimunculkan atau disembunyikan dengan mengakses menu Window > Properties.

Gambar di atas merupakan tampilan panel properties yang akan ditampilkan saat cursor berada di layar dokumen utama dan tidak ada objek tertentu yang aktif. Pada properties diatas kita dapat mengatur properti dari halaman dengan mudah, seperti mengatur perataan teks, warna, font dan ukuran teks dan seterusnya. Di panel properties tersebut juga tersedia tombol Page Properties... yang dapat digunakan untuk mengatur properti halaman secara umum, seperti judul halaman dan background halaman. Panel Properties merupakan panel yang dinamis dan tampilannya menyesuaikan elemen yang sedang aktif atau dipilih. Gambar dibawah ini merupakan tampilan panel properties jika suatu objek image dipilih. Pada panel terlihat beberapa pengaturan berhubungan dengan image, seperti pengaturan src (source image), alt (teks alternatif untuk image), pengaturan ukuran, image-map dan sebagainya.

Panel Pendukung

Panel pendukung berada di sebelah kanan layar dokumen utama. Panelpanel ini berfungsi sebagai alat bantu dalam proses pembuatan situs web antara lain untuk memanage file, informasi penyimpanan, CSS dan sebagainya.

Achmad Solichin ([email protected])

Halaman 15

Design dan Pemrograman Web 1 (PG110)

Panel pendukung antara lain terdiri dari panel: Panel CSS

Panel CSS digunakan untuk pengaturan CSS Style halaman web. Panel ini akan menampilkan semua pengaturan CSS yang berlaku umum di halaman web maupun pada elemen tertentu. Dari panel ini kita juga dapat mengedit pendefinisian CSS. Panel ini memiliki dua tab, yaitu tab CSS Styles dan Layers. Tab Layers digunakan jika kita ingin mengatur div atau layer yang ada di satu halaman. Panel Application

Panel application merupakan panel pengaturan untuk teknologi server yang digunakan. Dari sini kita dapat mengatur dan mendefinisikan serverside-scripting yang digunakan. Dari sini kita juga dapat mengatur koneksi dengan database tertentu. Panel Tag

Panel tag menampilkan daftar atribut yang berlaku di suatu tag HTML yang sedang aktif (dipilih). Misalnya jika tag yang sedang aktif adalah tag maka panel tag akan menampilkan berbagai atribut yang berlaku di tag seperti src, hspace, alt dsb. Dari panel ini kita juga dapat mengatur dan menambahkan beberapa event dan fungsi javascript (behaviors) pada tag (elemen) yang sedang aktif. Di tab ini, kita dapat menambahkan pemanggilan terhadap fungsi Javascript. Panel Files

Panel files ini digunakan untuk mengatur file (file-management) baik file yang berada di komputer lokal maupun komputer remote (server). Dari panel ini, kita juga dapat melakukan koneksi ke server via FTP.

Praktek: Membuat Halaman WebMembuat dan Menyimpan Halaman Web1. Buat file HTML baru dengan Dreamweaver, melalui menu File > New. 2. Pada layar utama ketikkan teks sebagai berikut :

Achmad Solichin ([email protected])

Halaman 16

Design dan Pemrograman Web 1 (PG110)

3. Sekarang kita akan menyimpan file tersebut. Pilih menu File > Save As... atau File > Save dan tentukan nama file dan lokasi penyimpanan file. Akhiran (extension) file untuk halaman HTML dapat berupa .html atau .htm. Untuk menyimpan, kita juga dapat menggunakan short-cut Ctrl+Shift+S untuk Save As... dan Ctrl+S untuk Save.

4. Setelah dokumen HTML tersimpan, kita akan melihat hasilnya di sebuah web browser. Untuk melihat hasilnya di web browser, pilih menu File > Preview in Browser dan pilih jenis browser yang diinginkan. Menu ini juga dapat diakses melalui short-cut F12 untuk web browser utama dan Ctrl+F12 untuk web browser kedua.

5. Halaman web yang dibuat akan ditampilkan di web browser.

Achmad Solichin ([email protected])

Halaman 17

Design dan Pemrograman Web 1 (PG110)

Mengatur Property Teks6. Untuk mengatur property teks, seperti ukuran, warna, jenis dan sebagainya, kita dapat melakukannya dengan cara memilih (block) terhadap teks yang akan diatur dan atur property yang diinginkan di layar properties di bawah layar dokumen utama. Sebagai contoh jika kita akan membuat teks pada baris pertama di atas menjadi huruf verdana, ukuran 12 pixel dan warna biru, maka property yang harus diatur sebagai berikut:

7. Selanjutnya buatlah agar teks di baris kedua menjadi jenis arial, berwarna merah, ukuran 16px! Teks di baris ketiga menjadi Georgia, berwarna hijau dan ukuran 14px! Tampilannya menjadi seperti pada gambar berikut ini:

8. Aturlah teks pada baris pertama agar menjadi miring (italic) dengan menggunakan tombol I dan aturlah teks kedua menjadi tebal (bold) dengan menggunakan tombol B yang ada di layar properties.

Achmad Solichin ([email protected])

Halaman 18

Design dan Pemrograman Web 1 (PG110)

9. Perataan teks dapat diatur secara rata kiri (left), tengah (center), kanan untuk (right) atau kiri dan kanan (justify). Gunakan tombol mengatur perataan teks. Aturlah semua teks di atas menjadi rata tengah! Tampilan halaman menjadi sebagai berikut:

Mengatur Property HalamanProperty halaman meliputi pengaturan yang berhubungan dengan halaman web, seperti judul halaman, background halaman, pengaturan teks dan link, margin dan sebagainya. Untuk membuka window pengaturan halaman, klik tombol Page Properties... 10. Dari window page-properties, atur jenis huruf menjadi Verdana, ukuran 11 pixel dan warna putih (#ffffff), atur juga background halaman menjadi warna biru (#0000ff)! Lihat gambar di bawah ini!

11. Background halaman juga dapat berupa gambar (image). Untuk menambahkan gambar (image) sebagai background halaman, dari window page-properties pilih Background image dan klik tombol Browse... untuk memilih gambar yang akan dijadikan background.

Achmad Solichin ([email protected])

Halaman 19

Design dan Pemrograman Web 1 (PG110)

12. Selanjutnya kita akan mengatur judul halaman menjadi Belajar Design Web dengan Dreamweaver. Pada window page-properties, pilih kategori Title/Encoding dan ubah teks pada isian Title menjadi Belajar Design Web dengan Dreamweaver.

13. Hasil akhirnya kurang lebih sebagai berikut:

Achmad Solichin ([email protected])

Halaman 20

Design dan Pemrograman Web 1 (PG110)

Bab 3

Merancang Situs WebPada dasarnya tujuan utama dari pembuatan situs web adalah untuk menyampaikan pesan dari si pembuat situs kepada pengunjung secara efektif dan efisien. Untuk itu, dalam merancang situs web, tidak bisa sembarangan dan sekehendak kita. Kita harus mempersiapkannya dengan matang. Kita juga harus memperhatikan komponen-komponen dasar dari sebuah situs Berikut ini komponen-komponen dasar yang perlu diperhatikan dalam pembuatan situs web: Isi (Content) Situs Navigasi dan Arsitektur Situs Konsistensi Tampilan Waktu download Penampilan Interaktifitas Kontrol Mutu Skalabilitas (kapasitas server) Keamanan (security) Sebelum mulai membuat situs web, kita harus terlebih dahulu mendefinisikan mengenai situs web kita. Berikut ini beberapa pertanyaan yang dapat membantu dalam mendefinisikan situs web: Apa tujuan dari situs? Siapa yang akan berkunjung ke situs? Apa isi dari situs? Darimana isi situs berasal? Bagaimana struktur situs? Bagaimana tampilan situs?

Mempersiapkan Isi (Content) Situs WebDalam terminologi situs web terkini, terdapat satu prinsip yang menyatakan bahwa content is king, artinya isi adalah hal yang paling utama. Untuk itu, kita tidak bisa meremehkan mengenai isi atau content suatu situs web. Kita harus benar-benar jeli dalam mempersiapkan isi dari situs yang akan dibuat. Isi atau content dari suatu situs dapat berupa teks, gambar, audio dan video. Masing-masing jenis isi tersebut harus diorganisasikan dengan baik sehingga mendukung tujuan awal pembuatan situs. Berikut ini langkah-langkah sederhana dalam mempersiapkan content dari situs kita: 1. Mengumpulkan bahan-bahan yang telah tersedia (scanning, dsb). Bahanbahan tersebut dapat berupa informasi mengenai perusahaan, produk dan jasa yang dijual, atau mengenai berita terkait dengan perusahaan dan sebagainya. Kita juga dapat memanfaatkan materi yang disumbangkan oleh pengunjung, misalnya melalui review, komentar, testimonial, dsb. 2. Mengevaluasi nilai dan kelayakan materi-materi yang akan dimuat: apakah pengunjung memang benar-benar membutuhkannya? 3. Menganalisa bagaimana setiap bagian dari content dapat mendukung tujuan dari pembuatan situs web. 4. Mengelompokkan bahan-bahan tersebut ke dalam kategori-kategori agar lebih mudah dalam pencarian dan mempermudah juga dalam mengatur struktur

Achmad Solichin ([email protected])

Halaman 21

Design dan Pemrograman Web 1 (PG110)

situs web. Jika diperlukan, kelompokkan juga bahan-bahan menurut skala prioritas, mana yang lebih penting dan mana yang kurang penting. Selanjutnya, dalam menampilkan isi situs, kita juga harus memperhatikan faktor penting lainnya, seperti gaya bahasa yang digunakan, jenis huruf, ukuran huruf, pewarnaan dan sebagainya. Dan tentunya faktor-faktor tersebut harus disesuaikan dengan tema dan tujuan dari situs. Misalnya, untuk situs dengan sasaran pengunjung adalah anak-anak, gunakanlah bahasa yang mudah dimengerti dan dengan warna yang menarik perhatian. Berikut ini beberapa tips agar penampilan content di situs lebih efektif: 1. Teks harus mudah dibaca secara sepintas (scanning). 2. Penggal bagian yang panjang menjadi segmen-segmen kecil masing-masing dengan sub-judul (heading). 3. Usahakan untuk menarik perhatian pembaca pada bagian awal tulisan (atau segmen). 4. Tulis teks dengan nada dan bahasa yang sesuai dengan tujuan penyampaian informasi. 5. Konsistensi content situs dapat diciptakan dengan menerapkan suatu format baku (template). 6. Sediakan versi .pdf dari material jika perlu (untuk memudahkan download dan printing). 7. Buat link yang informatif bagi pembaca untuk meng-klik. 8. Link-link ke situs lain dapat memberikan tambahan content yang berguna bagi pengunjung. 9. Buang materi yang tidak dianggap bermanfaat oleh pengunjung.

Navigasi dan Arsitektur SitusDalam membuat navigasi situs, hal utama yang harus diperhatikan adalah navigasi harus mudah ditemukan dan digunakan. Pengunjung umumnya akan merasa nyaman jika harus melihat navigasi situs di sebelah atas, kiri atau kanan. Selain itu, navigasi situs juga harus konsisten di semua halaman. Pembuatan navigasi situs hendaknya mengikuti beberapa aturan dasar, seperti: Batasi jumlah item dalam list dan menu. Jangan menggantungkan sepenuhnya pada image grafis untuk navigasi. Homepage harus mudah ditemukan. Integrasikan fasilitas navigasi dengan content. Hindari frame jika mungkin (gunakan tabel atau CSS). Berikut ini jenis-jenis navigasi situs yang ada di situs web: List of contents. Jenis navigasi ini merupakan jenis navigasi dasar menggunakan list-item. Jenis navigasi ini biasanya digunakan sebagai daftar isi, atau navigasi dalam content situs.

Achmad Solichin ([email protected])

Halaman 22

Design dan Pemrograman Web 1 (PG110)

Breadcrumb trail Breadcrumb merupakan jenis navigasi yang umumnya digunakan untuk memberikan informasi ke pengunjung dimana dia berada dan juga berguna untuk mempermudah pengunjung jika akan kembali ke halaman awal. Breadcrumb digunakan jika situs memiliki content (isi) yang cukup panjang.

Horizontal top bar

Tabs

2-level top (bar or tabs)

Top and side bars

Achmad Solichin ([email protected])

Halaman 23

Design dan Pemrograman Web 1 (PG110)

Buttons bar with revealed drop-down

Multiple-level tree nav

Paging

Achmad Solichin ([email protected])

Halaman 24

Design dan Pemrograman Web 1 (PG110)

Sedangkan arsitektur situs menentukan bagaimana situs dan halamanhalaman didalamnya diorganisasikan, dinamai, dan saling dihubungkan (linked) untuk mempermudah proses browsing dan pencarian informasi oleh pengunjung. Arsitektur situs yang baik mengutamakan sisi pengunjung agar mudah mendapatkan informasi. Pengunjung juga dapat dengan mudah mengetahui keberadaan atau posisinya sehingga mudah pula untuk kembali ke halaman utama. Dalam membuat arsitektur atau struktur situs web, hendaknya kita mengikuti beberapa prinsip dan aturan, diantaranya: Semua halaman di situs harus memiliki link ke halaman utama (homepage). Tunduk pada aturan tiga-klik dimana pengunjung harus sudah menemukan informasi dalam 3 kali klik atau kurang. Tempatkan content paling penting di awal halaman. Batasi panjang halaman (no scrolling). Sederhanakan tata-letak halaman. Usahakan agar content utama mudah dicari. Tampilkan produk dari berbagai perspektif/kategori. Ikuti prinsip-prinsip umum penulisan yang baik. Berikut ini beberapa model arsitektur situs web: All-in-one Pada arsitektur situs ini, semua content situs disajikan dalam sebuah halaman tunggal (halaman utama atau homepage). Arsitektur ini merupakan arsitektur yang paling sederhana. Keuntungan dari model ini adalah mudah dalam perawatan file (maintenance) karena hanya terdiri dari satu halaman (file).

Flat Model arsitektur flat merupakan model struktur web yang menyusun halaman-halaman secara linier. Setiap halaman dapat diakses dari halaman yang lainnya secara berurutan. Struktur ini merupakan struktur yang sederhana dan sering diterapkan dalam situs-situs dengan jumlah halaman yang tidak terlalu banyak. Contohnya, situs yang tersusun dalam menu Home, Contact Us, Products, About Us dll

Index Struktur index mirip seperti struktur flat, hanya saja pada struktur index menu atau halaman sudah tersusun berdasarkan index tertentu. Halaman sudah tersusun berdasarkan kategori index tertentu. Arsitektur ini memudahkan pengunjung untuk mengakses suatu halaman.

Achmad Solichin ([email protected])

Halaman 25

Design dan Pemrograman Web 1 (PG110)

Hub-and-spoke / Daisy Model ini cocok untuk situs yang memiliki beberapa alur, misalnya pada aplikasi situs email. Pengunjung dapat mengakses halaman inbox (kotak surat) melalui beberapa cara, seperti setelah membaca isi surat, setelah mengirim surat atau saat sudah berhasil menyimpan contact.

Strict hierarchy Pada jenis arsitektur ini, halaman-halaman web disusun dalam susunan parent-and-child (per kategori). Arsitektur ini memungkinkan untuk mengakses suatu halaman melalui parent atau kategorinya. Keuntungan dari model ini adalah pengunjung mudah dan cepat dalam mencari informasi atau halaman yang diinginkannya karena informasi disusun berdasarkan kategori tertentu.

Multi-dimensional hierarchy Arsitektur ini pada dasarnya sama dengan arsitektur strict-hierarchy, hanya saja pada model ini, informasi memungkinkan diakses dari beberapa kategori sekaligus. Dengan kata lain, beberapa kategori dapat mengakses satu informasi (halaman) yang sama.

Achmad Solichin ([email protected])

Halaman 26

Design dan Pemrograman Web 1 (PG110)

Search Jika kita akan menambahkan form pencarian pada situs kita, maka jenis arsitektur web ini yang diterapkan. Informasi atau halaman dapat diakses oleh pengunjung setelah pengunjung tersebut melakukan pencarian melalui form (halaman) yang sudah disediakan. Tentu saja, informasi atau halaman yang ditampilkan sesuai dengan kata kunci (keyword) yang dimasukkan oleh penggunjung.

Kecepatan Akses SitusKecepatan akses situs merupakan faktor utama yang paling penting dalam membangun suatu situs web, karena pada umumnya kecepatan akses internet di Indonesia masih terbatas. Bandwidth internet juga masih relatif mahal. Jadi percuma saja jika kita membuat situs web yang sangat menarik, tetapi untuk membukanya pengunjung membutuhkan waktu yang relatif lama. Pengunjung pasti akan bosan menunggu sampai situs selesai ditampilkan, bahkan mungkin saja pengunjung akan segera menutup situs kita jika terlalu lama ditampilkan. Dalam mendesign sebuah situs, terdapat 2 (dua) aturan utama yaitu: 1. Aturan 12 detik (12-seconds-rule). Aturan ini menyatakan bahwa suatu halaman harus sudah tampil dalam waktu 12 detik atau kurang. Jadi, kecepatan akses terhadap satu halaman harus diperhatikan agar situs secara keseluruhan dapat tampil dengan cepat. 2. Aturan 4 detik (4-seconds-rule). Aturan 4 detik menyatakan bahwa setiap komponen yang ada di halaman harus sudah tampil dalam waktu 4 detik atau kurang. Komponen disini dapat berupa teks, gambar, animasi, tabel dan sebagainya. Kecepatan akses situs sangat dipengaruhi oleh seberapa banyak kita menggunakan fitur-fitur yang haus bandwidth seperti gambar, animasi, atau grafik. Jika memang harus menggunakan gambar atau animasi, gunakanlah secara selektif, hanya yang benar-benar mendukung isi dan tujuan situs. Saran lainnya adalah dengan tidak memperkecil ukuran gambar yang terlalu besar secara langsung di browser (melalui atribut width dan height dalam tag img). Jika ingin menampilkan gambar yang besar menjadi kecil, maka kita lebih baik mengecilkan ukuran gambar tersebut dengan image-editor seperti Adobe Photoshop, Macromedia Fireworks atau yang lainnya.

Achmad Solichin ([email protected])

Halaman 27

Design dan Pemrograman Web 1 (PG110)

Praktek: Mendefinisikan Situs di Dreamweaver 8Mendefinisikan Situs BaruSebelum membuat halaman situs web secara keseluruhan, sebaiknya kita mendefinisikan dahulu situs yang akan kita buat. Manfaat dari pendefinisian situs ini adalah agar situs kita tersimpan dan ter-manage dengan struktur yang baik. Dan disini kita juga dapat mendefinisikan bagaimana konektivitas dengan server, jenis server-side-scripting apa yang dipakai dan sebagainya. Berikut ini langkah-langkah mendefinisikan situs baru di Dreamweaver 8. 1. Pertama, pilih menu Site > Site New... atau jika kita berada di halaman awal (start-page) Dreamweaver, pilih menu Dreamweaver Site... pada kolom Create New. 2. Selanjutnya window Site Definision akan terbuka. Ketikkan nama situs pada kotak isian pertama (What would you like to name your site?) dan alamat situs pada kotak isian kedua (What is the HTTP Address (URL) of your site?). Klik tombol Next untuk melanjutkan.

3. Pada window berikutnya akan diminta untuk memilih teknologi server yang digunakan. Pilihan teknologi server yang disediakan antara lain ColdFusion, ASP.NET, ASP, JSP dan PHP MySQL. Saat ini kita belum menggunakan teknologi server, jadi pilih pilihan No, I do not use a server technology. Klik tombol Next untuk melanjutkan proses pendefinisian situs.

Achmad Solichin ([email protected])

Halaman 28

Design dan Pemrograman Web 1 (PG110)

4. Selanjutnya akan ditanyakan bagaimana kita akan menyimpan file web, apakah di komputer lokal atau di komputer server. Pilih pilihan Edit local copies on my machine, then upload to server when ready (Recommended). Lalu pilih letak penyimpanan file web. Pilih tombol Next untuk melanjutkan.

Achmad Solichin ([email protected])

Halaman 29

Design dan Pemrograman Web 1 (PG110)

5. Pada window selanjutnya kita diminta menentukan bagaimana cara koneksi dengan server. Koneksi dengan server dapat dilakukan melalui FTP, Local/Network, WebDAV, dsb. Jika kita hanya mengedit file di komputer lokal (tidak menggunakan server) maka pilihlah koneksi None. Klik tombol Next untuk melanjutkan.

6. Akan ditampilkan window berisi informasi pendefinisian situs yang telah kita lakukan. Klik tombol Done untuk menyimpan pendefinisian situs.

Achmad Solichin ([email protected])

Halaman 30

Design dan Pemrograman Web 1 (PG110)

7. Hasil pendefinisian situs tampak pada window Files yang terletak di sebelah kanan layar dokumen utama Dreamweaver.

Mengatur Struktur Folder SitusPada dasarnya pengaturan file dan folder pada saat pembuatan suatu aplikasi situs web tidak ada aturan tertentu, artinya kita bebas menyimpan dan mengatur file web kita. Namun demikian, pengaturan file dan folder yang baik akan memudahkan kita dalam mengatur situs kita. Sebagai contoh, kita akan mendefinisikan struktur file dan folder situs menjadi sebagai berikut: Folder utama (Root Folder) Berisi file-file utama halaman web, seperti index, about us dsb. Folder ini sudah dibuat saat mendefinisikan situs. Folder images Berisi file-file image yang digunakan dalam situs, seperti header, background, menu dsb. Folder includes Berisi file-file yang selalu disertakan dalam halaman-halaman situs, seperti file CSS, javascript dll. Folder galleries Berisi file-file galeri foto (jika kita akan menampilkan foto). Folder downloads Berisi file-file yang bisa didownload (jika kita akan menyediakan file yang dapat didownload).

Untuk membuat folder baru dalam situs, klik kanan pada nama situs dan pilih sub menu New Folder dan ketikkan nama foldernya. Ulangi langkah tersebut untuk setiap nama folder di atas.

Achmad Solichin ([email protected])

Halaman 31

Design dan Pemrograman Web 1 (PG110)

Tampilan struktur situs setelah semua folder dibuat menjadi sebagai berikut:

Achmad Solichin ([email protected])

Halaman 32