Modul 4 Desain dengan Dreamweaver I 1.1 Tujuan a. Mahasiswa dapat membuat template web dengan dreamweaver b. Mahasiswa dapat mengenal komponen dreamweaver 1.2 Materi a. Web dan Dreamweaver b. Desain Web dengan Dreamweaver c. Membuat Dokumen, menyimpan dan menampilkan pada browser d. Menyimpan Dokumen e. Menampilkan Dokumen/page 1.3 Alat dan Bahan a. Adope Photoshop CS 3 b. Picture 1.4 Prosedur Praktikum a. Peserta membaca dan mempelajari materi praktikum sebelumny a b. Instruktur menerangkan dan menjelaskan teori dan cara kerja c. Peserta mempraktikan materi percobaan d. Peserta membuat penyelesaian terhadap soal latihan 1.5 Teori Web dan Dreamweaver Halaman web dapat diakses melalui internet apabila halaman tersebut sudah ditaruh pada server web yang terhubung internet. Server yang terhubung dengan internet tersebut dinamakan sebagai “web hosting” . Ada banyak penyedia jasa hosting di internet. Untuk dapat membuka halaman yang telah kita taruh pada web hosting tertentu, mak a kita memerlukan alamat khusus. Alamat ini kita sebut dengan nama domain. Sebagai contoh mis alnya, ketika kita mengetik http://www.google.co m maka secara otomatis kita bisa melihat halaman google pada browser kita. www.google.co m inilah yang kita sebut dengan alamat domain. Web statik Adalah jenis website yang mana pengguna tidak bisa mengubah content dari web tersebut secara langsung menggunakan browser. Interaksi yang terjadi antara pengguna dan server hanyalah seputar pemrosesan link saja. Jenis web ini menggunakan client side script, yaitu script -script yang dapat dimengerti oleh komputer klien saja (dalam hal ini browser) seperti html, javascript, dhtml, css, dan lain-lain. Web Dinamis Dalam web dinamis, int eraksi yang terjadi antara pengguna dan server sangat kompleks. Seseorang bisa mengubah content dari halaman tertent u dengan menggunakan browser. Request yang dikirimkan oleh pengguna dapat diproser oleh server untuk kemudian ditampilkan dalam isi yang berbeda-beda menurut alur programnya. Jenis web ini menggunakan server side script, yaitu bahasa pemrograman yang dapat diproses oleh server unt uk kemudian ditampilkan di browser pengguna dengan client side script. Contoh dari web dinamis misalnya adalah forum-forum y ang ada di internet. Disitu kita bisa mengisi content dari web tersebut, mengubah data diri, dan mengirimkan pesan. Berkenalan dengan Dreamweaver Dreamweaver merupakan salah s atu software pembuat website yang mempunyai banyak sekali kemudahan dalam pengoperasianny a namun juga sangat powerf ul dalam pembuatan website. Salah satu keunggulannya adalah kemudahannya dalam berinteraksi dengan macromedia flash, sebuah tool animasi yang sangat populer di internet. Memulai dreamweaver
Pertama kali dreamweaver dibuka, setelah anda instal sebelumnya, maka akan tertampil jendela yang menany akan kepada kita unt uk memilih jenis layout yang diinginkan.
Gambar 4.1 Jendela dialog ketika pertama kali dreamweaver di-start Ada dua pilihan model layout kerja, yaitu model dreamweaver mx, atau model dreamweaver 4. Pada model dreamweaver 4, setiap jendela kerja berdiri sendiri-sendiri. Dalam tutorial ini kita menggunakan layout kerja standart dreamweaver mx karena model layout kerja ini dirasa paling optimal. Checkbox homesite/codebuilder merupakan pilihan unt uk mengoptimalkan kerja kita apabila kita lebih banya k bekerja di script. Sangat cocok untuk tingkat lanjut. Klik OK. Jendela tersebut hanya muncul pada saat pertama kali program dreamweaver dijalankan. Apabila kita menginginkan layout kerja yang berbeda set elah beberapa kali menjalankan dreamweaver, maka kita bisa memunculkan lagi jendela tersebut dengan mengklik: edit > preferences atau menggunakan shortcut ctrl+U jendela preferenc es akan tertampil:
Gambar 4. 2 Tombol untuk menampilkan kembali jendela model lay out kerja dreamweaver Kemudian klik tombol Change Workspace Fungsi dari preferences ini adalah untuk mengatur semua hal mengenai dreamweaver. Mungkin kita akan memerlukannya nanti ketika dihadapkan pada sebuah masalah pendesainan situs tertentu, namun untuk kali ini kita biarkan pada kondisi default saja. Hal tersebut sudah menc ukupi untuk pengerjaan website secara umum.
Pengenalan interface dreamweaver Gambar di bawah merupakan gambaran layout kerja dreamweaver mx. Jendela -jendela pembantu yang t erdapat pada menu window dikelompokkan pada panel bagian kanan. Seluruh panel bisa disembunyikan dengan mengklik tombol yang ditunjukkan oleh tanda panah.
Document toolbar Insert bar menus
panels Property inspector Design & code view Gambar 4.5 Bagian-bagian utama tempat kerja dreamweaver Design view bekerja layaknya kanvas bagi pelukis. Bagian ini merupakan tempat kita bekerja dalam membentuk sebuah halaman situs. Disini, dengan menggunak an doc ument toolbar kita bisa menampilkan code saja, desain saja atau kedua-duanya.
Gambar 4.6 Document toolbar. Insert bar membantu kita untuk memas ukkan berbagai berbagai elemen-elemen pembentuk halaman web, seperti gambar, script php, simbol-simbol, shockwave, dan lain-lain. Elemen-elemen ters ebut direpresentasikan dalam bentuk icon. Document toolbar memberikan kita kemudahan untuk melakukan perintah-perintah yang memberikan efek pada seluruh dokumen, seperti halnya judul dokumen. Property inspector menampilkan berbagai property yang dipunyai elemen tertentu. Kita bisa langsung mengubah properti dari elemen tersebut dengan tool ini, misalnya merubah warna text, memberikan background pada elemen tabel, menggabungkan kolom, dan lain -lain. Anda bisa membuk a atau membuat lebih dari satu dokumen. Dokumen-dokumen yang sudah anda buka akan diurutkan pada bagian bawah design view. A nda tinggal mengklik tombol tersebut untuk berpindah antar halaman. Ditunjukkan oleh tanda panah warna biru pada gambar 4.5. Setiap dok umen yang anda buka masing-masing dapat anda minimize, maximize atau anda tutup. Dapat anda lihat pada keterangan di gambar 4.5.
Gambar 4.7 Masing-masing halaman baru dreamweaver dipisah ke dalam tab-tab tertent u. Memulai mendesain web dengan dreamweaver
Pengantar web design Diperlukan sebuah perencanaan yang matang dalam pembuatan sebuah situs web karena sebuah website tidak hanya terdiri dari satu file teks saja. Disitu ter dapat beberapa halaman yang saling berhubungan (hyperlink ), file-file gambar, file css, javascript, belum lagi file multimedia seperti flash dan video yang kesemuanya harus diupload ke server hosting dengan tempat yang jelas. Dengan semakin kompleksnya kom ponen penyusun web, maka struktur pemilahan file -file pun juga harus jelas. Misalnya, untuk semua gambar-gambar yang tertampil di website saya buatkan folder sendiri dengan nama “images”, unt uk file jenis pdf saya t aruh di folder “pdf”, atau mungkin halaman-halaman tentang profil perusahaan saya sendirikan dalam folder “profil”. Hal ters ebut akan membantu kita ketika memaintenance sebuah situs. Dalam merencanakan sebuah situs, ada beberapa hal yang patut menjadi perhatian, yaitu: − Tentukan apa yang ingin kita sampaikan dalam website yang kita buat. Hal ini akan berk aitan nantinya bagaimana kita membuat jenis informasi tersebut gampang dicerna oleh audience. − Untuk siapa website ini nantinya? Ketika saya ingin membuat website untuk sebuah situs anak-anak, maka saya akan membuat tampilan situs saya dengan warna2 cerah dan sedikit cartoon karena memang begitulah dunia anak-anak pada umumnya, sebalikny a, apabila saya ingin membuat situs instansi misalnya, maka yang ada dalam bayangan saya adalah desain yang resmi, dan navigasi yang mudah dipahami, karena memang target audiencenya adalah bagi orang umum. − Resource yang meliputi ketersediaan data, waktu, tenaga, dan dana perlu juga dijadikan pertimbangan dalam menentukan desain sepoerti apa yang bakal kita buat nantiny a. Saya rasa tidak perlu ada penjelasan untuk ini. − Dan NAVIGASI. Navigasi tentu saja sangat penting karena merupakan kemudi untk bisa menjelajah sebuah situs. Buatlah navigasi sejelas -jelasnya dan semudah-mudahnya bagi target audience anda. Untuk mempermudah, gambarkan secara diagram peta situs anda. Dalam beberapa literatur yang saya dapat, ada beberapa pilihan navigasi yang umum. Mungkin hal ini bisa memberikan anda gambaran seperti apa model navigasi yang akan anda buat nantinya. 1. model linear
2.
Medel ini biasanya dipakai untuk situs-situs training online atau buku multimedia. Dengan model seperti ini kita dapat mengontrol langkah-langkah yang harus dilalui audience model Hirarki
3.
model terpusat
Dengan model s eperti ini maka akan mempercepat navigasi menuju ke t opik yang diinginkan dengan 2 klik, namun kekurangannya adalah untk berpindah harus menuju ke halaman depan dahulu 4.
Model FULL-WEB-DESIGN Merupakan gabungan dari ketiga model di atas. Dengan penggabunagn tersebut maka diharapkan ak an meningkatkan efisiensi dari navigasi web. Setiap halaman mempunyai navigasi ke halaman lainnya yang dirasa paling perlu untuk dikoneksikan. Sebagai contoh website http://oke.or.id , http://macro media.co m dan lain-lain.
Macromedia dreamweaver mempermudah berbagai tahap di atas. Agar kita tidak dipusingkan dengan kemungkinan terpencarnya file-file yang sudah kita buat sebagaimana yang dijelaskan pada paragraf pertama subbab s ebelumnya, maka kita perlu mendefinisikan situs yang ak an kita buat. Pendefinisian ini berguna untuk menempatkan website kita yang mungkin kompleks ke tempat khusus tertentu sehingga nantinya akan mempermudah dalam peng-upload-an ke server hosting. Mendefinisikan si tus OK, sekarang anda telah mempunyai peta situs dengan segala persiapannya. Hal selanjutnya adalah menentukan ditampung dimana pekerjaan pembuatan website ini, dan mau dikirim ke server mana pekerjaan itu nanti sekaligus menentukan parameter dasar lainnya. Hal ters ebut yang dimaksud dengan “mendefinisikan situs”. Hal ini sangat penting ketika kita memulai sebuah proyek. Sebelumnya kita harus tahu dulu jenis situs yang akan kita buat nantinya itu seperti apa. Situs statiskah? Atau situs dinamis?. Masing -masing jenis tersebut mempunyai jalan yang berbeda dalam pendefinisiannya. Karena tutorial ini khusus membahas tentang website statis sampai tingkat lanjut, maka disini kita akan mempelajari pendefinisian situs statis saja. Silahkan ikuti langkah-langkah berikut: 1. Klik menu site > New Site. Kemudian akan muncul jendela dialog site definition
Gambar 4. 10. Langkah awal pendefinisian sebuah situs
2.
Pastikan tab basic terpilih (perhatikan panah merah). Kemudian isi textbox tersebut dengan nama situs yang anda inginkan. Nama situs anda boleh menggunakan spasi. Buat sesimpel mungkin namun sejelas mungkin. Kemudian klik tombol next Kemudian anda ak an dihadapkan pada jendela dialog yang menanyakan apakah anda ingin menggunakan server technology atau tidak. Kita ak an mmbangun situs statis, sehingga pastikan option button “No, i dont want to use server technology ” terpilih sebagaimana gambar di bawah. Klik tombol next
Gambar 11. Pilihlah opsi pertama jika anda tidak menggunakan teknologi server 3.
Pada jendela berikutnya anda akan ditanya mengaenai bagaimana nantinya anda bekerja dengan file-file anda ketika sedang membuat website.
4.
5.
Pilihan pertama adalah “Edit Local Copies on My Computer Then Upload to Server When Ready”, pilihan kedua adalah “Edit Directly on S erver Using Local Net work ”, dan pilihan yang terakhir adalah “E dit Directly on Server Using FTP or RDS ”. − Jika anda memilih pilihan pertama, berarti situs anda nantinya akan dibuat pada tempat tertentu pada harddisk anda, kemudian jika dirasa sudah memenuhi syarat baru kita bisa menguploadnya ke server web. tentukan tempat pada harddisk anda dengan mengisi textbox yang disediakan − Pilihan kedua berarti anda nantinya akan langsung menempatkan pek erjaan anda pada server yang terhubung dalam sebuah jaringan, Isikan di rektory pada server anda pada textbox yang disediakan. − Pilihan terakhir berarti anda ak an langsung bekerja pada server melalui koneksi FTP, tentukan folder pada harddisk anda sebagai tempat untuk salinan situs anda. Checkbox dibawahny a merupakan pilihan apakah nantinya ketika kita save akan langsung dikirim ke server atau tidak. Disini kita memilih pilihan pertama karena model ini yang paling direkomendasikan. Klik next Jendela berikutnya yang muncul adalah dialog sharing file. Disiini anda menent ukan bagaimana anda t erkoneksi dengan server anda. Anda bisa melihat masing-masing penjelasan di bagian help dreamweaver. Silahan mengisi textbox-textbox yang muncul berdasarkan pilihan anda. Apabila anda tidak yakin pilih none saja sebagaimana dalam tutorial ini. Jangan khawatir karena kita bisa mengisinya lagi nanti. NB : jendela dialog ini tidak akan muncul apabila sebelumnya anda memilih “edit directly on server using local net work” Klik next Jendela yang muncul berikutnya adalah ringk asan dari settingan yang kit a buat s ebelumnya. Check satu-satu. Apabila perlu perbaik an anda bis a kembali dengan tombol back. Silahkan klik done jika sudah selesai
Sekarang pendefinisian situs, untuk sementara selesai. Perhatikan pada panel file di bagian site panel bagian kanan. Sekarang anda sudah dibuatkan tempat unt uk menampung semua situs anda menurut settingan yang anda isi pada kotak dialok pendefinisian situs. Perhatikan tanda panah merah di bawah. Nantinya semua file yang anda buat akan terlihat di panel tersebut. Contoh s itus yang sudah terisi dapat anda lihat pada gambar bagian kanan.
Mungkin dalam situs yang kita buat nantiny a kita perlu mengelompokan file-file ke dalam folder-folder tertentu maka ada baiknya kita membuat folder itu terlebih dahulu dengan mengklik file > New folder (lihat lingkaran biru pada gambar kanan) kemudian isikan nama folder. Selanjutnya setelah kita
mendefinisikan proyek situs web kita, kita akan belajar bagaimana memulai kerja dengan dreamweaver, termasuk di dalamnya adalah membuat file baru, dan melihatnya melalui brows er. Membuat dokumen, menyimpan, dan menampilkannya pada browser Pada umumnya untuk memulai dokumen baru di sistem operasi windows sama saja. kita tinggal mencari kata new. Benar,.. tekan file > new maka sebuah jendela dialog akan muncul:
Gambar 4. 13. Disini kita menentukan jenis halaman apa yang akan kita buat. Disitu banyak sekali terdapat pilihan halaman yang ak an kita buat nantiny a. Kita pilih Ba sic page | HTML kemudian klik tombol create. Nah sekarang anda bebas mau mendes ain apa. Isikan sembarang kata pada design view, kemudian isi title pada Document toolbar dengan sembarang judul disini saya isi dengan “tutorial dreamweaver”
Gambar 4.14. kita coba membuat halaman baru sembarang Kemudian simpan pekerjaan anda file > save atau ctrl + S. Kemudian akan muncul kotak dialog save as. Perhatikan bahwa secara ot omatos dreamweaver akan memilih direktori yang kita definisikan sebelumnya. Klik save
Gambar 4. 15. Kita coba save Halaman Baru tersebut dengan nama index.html Perhatikan juga bahwa seketika itu juga pada panel file akan terlihat tambahan file baru
Gambar 4. 16. Secara otomatis halaman baru akan tertampil dalam panel file. Sekarang anda juga bisa melihat hasil pekerjaan anda langsung pada browser dengan mengk lik icon preview in browser pada doc ument toolbar atau dengan mengklik tombol F12
Gambar 4. 17. Pilihan utnuk melihat sementara hasil pekerjaan kita di browser. Nah, hasil kerjaan anda sekarang tert ampil di browser internet ex plorer. Set elah ini yang k ita lak ukan adalah menguploadnya ke server web. Akan saya jelaskan pada bab akhir nanti tentang bagaimana mengupload proy ek kita yang sudah jadi ke server web. 1.6 Latihan 1. Coba lakukan percobaan dengan contoh contoh diatas (yang terdapat pada teori). 2. Buatlah semua web dengan metode link tertentu, minimal 5 page.
