Modul 4 Desain dengan Dreamweaver I

Transkripsi

1 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 CS3 b. Picture 1.4 Prosedur Praktikum a. Peserta membaca dan mempelajari materi praktikum sebelumnya 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, maka kita memerlukan alamat khusus. Alamat ini kita sebut dengan nama domain. Sebagai contoh misalnya, ketika kita mengetik maka secara otomatis kita bisa melihat halaman google pada browser kita. 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, interaksi yang terjadi antara pengguna dan server sangat kompleks. Seseorang bisa mengubah content dari halaman tertentu 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 untuk kemudian ditampilkan di browser pengguna dengan client side script. Contoh dari web dinamis misalnya adalah forum-forum yang ada di internet. Disitu kita bisa mengisi content dari web tersebut, mengubah data diri, dan mengirimkan pesan. Berkenalan dengan Dreamweaver Dreamweaver merupakan salah satu software pembuat website yang mempunyai banyak sekali kemudahan dalam pengoperasiannya namun juga sangat powerful dalam pembuatan website. Salah satu keunggulannya adalah kemudahannya dalam berinteraksi dengan macromedia flash, sebuah tool animasi yang sangat populer di internet. Memulai dreamweaver

2 Pertama kali dreamweaver dibuka, setelah anda instal sebelumnya, maka akan tertampil jendela yang menanyakan kepada kita untuk 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 untuk mengoptimalkan kerja kita apabila kita lebih banyak 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 setelah beberapa kali menjalankan dreamweaver, maka kita bisa memunculkan lagi jendela tersebut dengan mengklik: edit > preferences atau menggunakan shortcut ctrl+u jendela preferences akan tertampil: Gambar 4. 2 Tombol untuk menampilkan kembali jendela model layout 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 mencukupi untuk pengerjaan website secara umum.

3 Pengenalan interface dreamweaver Gambar di bawah merupakan gambaran layout kerja dreamweaver mx. Jendela -jendela pembantu yang terdapat 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 menggunakan document toolbar kita bisa menampilkan code saja, desain saja atau kedua-duanya.

4 Gambar 4.6 Document toolbar. Insert bar membantu kita untuk memasukkan berbagai berbagai elemen-elemen pembentuk halaman web, seperti gambar, script php, simbol-simbol, shockwave, dan lain-lain. Elemen-elemen tersebut 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 membuka atau membuat lebih dari satu dokumen. Dokumen-dokumen yang sudah anda buka akan diurutkan pada bagian bawah design view. Anda tinggal mengklik tombol tersebut untuk berpindah antar halaman. Ditunjukkan oleh tanda panah warna biru pada gambar 4.5. Setiap dokumen 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 tertentu. Memulai mendesain web dengan dreamweaver

5 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 komponen 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, untuk file jenis pdf saya taruh di folder pdf, atau mungkin halaman-halaman tentang profil perusahaan saya sendirikan dalam folder profil. Hal tersebut 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 berkaitan 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, sebaliknya, 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 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 2. model Hirarki 3. model terpusat

6 Dengan model seperti ini maka akan mempercepat navigasi menuju ke topik 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 akan meningkatkan efisiensi dari navigasi web. Setiap halaman mempunyai navigasi ke halaman lainnya yang dirasa paling perlu untuk dikoneksikan. Sebagai contoh website 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 sebelumnya, maka kita perlu mendefinisikan situs yang akan 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 situs 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 tersebut 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

7 Gambar Langkah awal pendefinisian sebuah situs 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 2. Kemudian anda akan dihadapkan pada jendela dialog yang menanyakan apakah anda ingin menggunakan server technology atau tidak. Kita akan 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.

8 Pilihan pertama adalah Edit Local Copies on My Computer Then Upload to Server When Ready, pilihan kedua adalah Edit Directly on Server Using Local Network, dan pilihan yang terakhir adalah Edit 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 pekerjaan anda pada server yang terhubung dalam sebuah jaringan, Isikan di rektory pada server anda pada textbox yang disediakan. Pilihan terakhir berarti anda akan langsung bekerja pada server melalui koneksi FTP, tentukan folder pada harddisk anda sebagai tempat untuk salinan situs anda. Checkbox dibawahnya 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 4. Jendela berikutnya yang muncul adalah dialog sharing file. Disiini anda menentukan bagaimana anda terkoneksi 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 network Klik next 5. Jendela yang muncul berikutnya adalah ringkasan dari settingan yang kit a buat sebelumnya. Check satu-satu. Apabila perlu perbaikan anda bisa 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 untuk 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 nantinya 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

9 mendefinisikan proyek situs web kita, kita akan belajar bagaimana memulai kerja dengan dreamweaver, termasuk di dalamnya adalah membuat file baru, dan melihatnya melalui browser. 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 Disini kita menentukan jenis halaman apa yang akan kita buat. Disitu banyak sekali terdapat pilihan halaman yang akan kita buat nantinya. Kita pilih Ba sic page HTML kemudian klik tombol create. Nah sekarang anda bebas mau mendesain apa. Isikan sembarang kata pada design view, kemudian isi title pada Document toolbar dengan sembarang judul disini saya isi dengan tutorial dreamweaver Gambar 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 otomatos dreamweaver akan memilih direktori yang kita definisikan sebelumnya. Klik save

10 Gambar 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 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 document toolbar atau dengan mengklik tombol F12 Gambar Pilihan utnuk melihat sementara hasil pekerjaan kita di browser. Nah, hasil kerjaan anda sekarang tertampil di browser internet explorer. Setelah ini yang k ita lakukan adalah menguploadnya ke server web. Akan saya jelaskan pada bab akhir nanti tentang bagaimana mengupload proyek 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.