pengantar web design dengan mac. dreamwaver 01

PPeennggeennaallaann WWeebb DDeessiiggnn DDeennggaann MMaaccrroommeeddiiaa DDrreeaammwwaavveerr


www.ilmu.orgwww.ilmu.org

wwwwww..ggrraattiissaann..ccoomm

www.ilmu.org 1

http://www.ilmu.org/


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.

Gambar 1. Tampilan Dreamwaver MX

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 nantinya. 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.

www.ilmu.org 2


Dalam beberapa literatur , 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

Gambar 2. Pada model linear kita bisa mengatur urutan halaman yang dibuka pengguna.

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

Gambar 3 Desain ini dapat mempermudah audience menemukan informasi yang dicari.

www.ilmu.org 3


3. Model terpusat

Gambar 4 model hirarki

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.

www.ilmu.org 4


Kenalan dengan Dreamweaver Memulai Dreamweaver

Pertama kali Dreamweaver dibuka, setelah anda instal sebelumnya, maka akan

tertampil jendela yang menanyakan kepada kita untuk memilih jenis layout yang diinginkan.

Gambar 5. Jendela dialog ketika pertama kali Dreamweaver di-start

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.

www.ilmu.org 5


menus

Insert bar

Document toolbar

panels

Property inspector

Design & code view

Gambar 6. Bagian-bagian utama tempat kerja Dreamweaver

Gambar 7. Document toolbar.

www.ilmu.org 6


Bisa digunakan untuk mengatur tampilan kerja. Dalam tampilan script saja, tampilan script dan desain, ataukan hanya desain saja.

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.

Membuat Website (Bagian I)

Sebelum masuk lebih detail ke masing-masing elemen, ada baiknya dulu kita mereview ulang tentang struktur HTML situs. Kita sudah tahu bahwa ada dua bagian besar dalam html, yaitu alemen <head> dan elemen <body>.

Elemen <head>

Elemen <head> didalamnya memuat berbagai informasi mengenai situs dan juga bisa dijadikan informasi bagi browser bagaimana sebuah dokumen ditampilkan nantinya, misalkan apakah menggunakan kharakter / huruf cina atau yang lain.

Salah satu tag dalam elemen <head> yang penting adalah <meta> yang berfungsi untuk menampilkan informasi dari sebuah halaman. Tag ini penting sebagai pemberi informasi bagi search engine untuk mengkatalog-kan situs. Dalam Dreamweaver kita tidak perlu mengetik kode ini secara manual. Kita bisa membuatnya dengan object <head>.

Gambar 8. Tool yang digunakan untuk memodifikasi element head dalam file html

Masing-masing obyek dapat dijelaskan sebagai berikut:

www.ilmu.org 7


• Meta.

Berfungsi untuk mengisikan berbagai meta tag yang kita inginkan. Ini merupakan tool untuk membantu kita memasukkan meta tag. Ada banyak informasi melalui <meta> selain yang sudah diediakan Dreamweaver seperti keyword, description, refresh, base, dan link, sehingga untuk mengisikan tag selain yang saya sebutkan di atas kita bisa menggunakan tool meta tersebut.

• Keyword

Berfungsi untuk memberikan informasi kepada search engine mengenai kata kunci apa yang bisa digunakan untuk menampilkan situs kita. Penulisannya harus konsisten dengan isi dari website kita sehingga akan mempermudah pencarian melalui search engine.

Gambar 9. Jendela yang berfungsi mengubah-ubah tag keywords

• Description

Berfungsi untuk memberikan informasi mengenai deskripsi dari situs kita. Sebagai tips, untuk mempercepat dan mempertinggi ranking dalam search engine, hendaknya antara keywords dan description ada beberapa kata yang sama. Walaupun sebenarnya google.com tetap akan melist situs kita walaupun tidak ada tag metanya, namun belum tentu bagi search engine yang lain.

Mendefinisikan situs

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

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

www.ilmu.org 8


Gambar 10. 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. Pilihan pertama adalah “Edit Local Copies on My Computer Then Upload to Server When Ready”, pilihan kedua adalah “Edit Directly on Server Using

www.ilmu.org 9


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 direktory 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 kita

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 situs yang sudah terisi dapat anda lihat pada gambar bagian kanan.

www.ilmu.org 10


Gambar 12. Lihatlah perbedaan antara situs yang sudah diisi dengan dokumen dan situs yang belum diisi dengan dokumen 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 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 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:

www.ilmu.org 11


Gambar 13. Disini kita menentukan jenis halaman apa yang akan kita buat.

Disitu banyak sekali terdapat pilihan halaman yang akan kita buat nantinya. Kita pilih Basic 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”

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

Gambar 14. Kita coba save Halaman Baru tersebut dengan nama index.html

Perhatikan juga bahwa seketika itu juga pada panel file akan terlihat tambahan file baru

www.ilmu.org 12


Gambar 15. Secara otomatis halaman baru akan tertampil dalam panel file.

Sekarang anda juga bisa melihat hasil pekerjaan anda langsung pada browser dengan mengklik icon preview in browser pada document toolbar atau dengan mengklik tombol F12

Gambar 16. Pilihan untuk melihat sementara hasil pekerjaan kita di browser.

Nah, hasil kerjaan anda sekarang tertampil di browser internet explorer. Setelah ini yang kita lakukan adalah menguploadnya ke server web. Akan saya jelaskan pada bab akhir nanti tentang bagaimana mengupload proyek kita yang sudah jadi ke server web

Elemen <body>

Setelah anda menentukan isi dari elemen head ada, sekarang kita belajar pada daerah <body> yang berhubungan dengan masalah tampilan. Yang akan kita pelajari nantinya adalah tentang:

− Text

− Gambar

− List

− Tabel

− Hyperlink

Elemen Text

www.ilmu.org 13


Gambar 17. Berbagai tool yang digunakan untuk mengubah property text

Tentang Image (gambar) Ada tiga format gambar yang dapat digunakan dalam sebuah website, yaitu GIF, JPEG, dan PNG. Masing-masing mempunyai karakter dan kemampuan sendiri-sendiri. Untukk bisa mambuat situs yang efisien, dalam artian mempunyai sedikit waktu download tanpa mengorbankan estetika, kita perlu untuk bisa secara tepat menentukan format apa yang tepat untuk gambar tertentu

Memasukkan gambar ke dalam dokumen

Untuk memasukkan gambar ke dalam dokumen, ad beberapa cara yang dapat kita lakukan, yaitu:

1. dengan meletakkan cursor pada tempat yang ingin kita taruh gambar, kemudian dalam menu bar kita pilih insert > image

2. dengan meletakkan cursor pada tempat yang ingin kita tempati gambar kemudian ctrl + alt + I

3. klik pada seret icon yang terdapat pada insert bar menuju ke tempat yang diinginkan.

4. mencari gambar di site panel kemudian mnyeretnya ke tempat yang ingin ditempati gambar

Tentang list

Ada tiga jenis list yang dapat kita buat menggunakan list, yaitu:

− unordered list

untuk membuatnya, kita bisa mengaktifkan dulu menu tersebut dengan mengklik icon bullet pada property inspector kemudian mulai mengetik. Untuk menambah list kita bisa tekan enter. Sedangkan bila kita ingin merubah beberapa paragraf menjadi berbentuk list, maka kita tinggal mem-blok paragraf-paragraf tersebut kemudian baru kita klik icon bullet pada property inspector.

Peringatan: yang dapat dibentuk menjadi list hanyalah paragraf, yaitu sesuatu yang berada pada tag <p></p>. itulah kenapa untuk membuat list berikutnya kita menekan enter bukan shift + enter.

www.ilmu.org 14


Gambar 18

− ordered list

ordered list berarti list yang berurutan. Setiap list ddari atas sampai ke bawah diurutkan berdasarkan nomor. Hal ini sama dengan numbering, jika kita pernah menggunakan microsoft word. Pembuatan jenis list ini sama dengan unordered list. Kita tinggal meng-klik icon ordered list pada property inspector. Selanjutnya sama dengan unordered list.

Gambar 19 Cara yang digunakan untuk membuat list yang berurutan

Ordered list sendiri mempuyai beberapa style. Anda bisa penomorannya bisa anda ubah menjadi alfabet (a, b, c,...), atau angka romawi (i, ii, iii, ...). caranya adalah dengan menempatkan cursor pada salah satu list kemudian mengklik tombol list item yang ditunjukkan tanda panah biru pada gambar di atas.

Gambar 20

− Nested list

Merupakan kombinasi dari kedua model di atas atau bahkan kombinasi style dari masing-masing jenis list di atas. Perhatikan contoh berikut:

www.ilmu.org 15


Gambar 21

Tentang Tabel Tabel merupakan bagian yang sangat sangat penting dalam pendesainan web. dengan tabel, kita dapat membuat tampilan web lebih bervariasi. Namun tabel bukannya tanpa kekurangan. Penyusunan tabel yang terlalu rumit, bertumpuk, akan menyebabkan pembacaan yang lebih lama oleh browser. Efisiensi dalam penggunaan tabel sangat penting disini. Kita mulai dengan property-property dasar tabel.

Memasukkan tabel

Kita dapat membuat tabel dengan tiga cara, yaitu:

• Menggunakan tombol tabel pada insert bar di tab common atau di tab table

Gambar 22. icon yang digunakan untuk memasukkan table

• Menggunakan menu insert > table

• Menggunakan shortcut ctrl + alt + T

Pertama kali jendela yang muncul ketika anda memasukkan tabel adalah seperti di bawah:

Gambar 23. Jendela yang pertama kali muncul ketika memasukkan table.

www.ilmu.org 16


• Rows : disini kita isikan jumlah baris yang diinginkan

• Colums : disini kita isikan jumlah kolom yang diinginkan

• Width : panjang tabel. Secara default nilainya adalah 75 persen. Hal tersebut berarti lebar tabel yang kita buat adalah 75 persen dari panjang tampilan. Jika kita memilih satuan persen, maka tabel kita bisa berubah-ubah panjangnya menurut browser. Sedangkan jika kita memilih satuan pixel, maka panjang tabel kita tetap menurut yang kita isikan.

• Border adalah bingkai dari tabel kita (tanda panah hitam)

• Cell padding : adalah jarak antara dinding sel dengan sesuatu yang diisikan dalam sel tersebut (tanda warna biru)

• Cell spacing : jarak antar sel (tanda warna merah)

Gambar 24. Penjelasan mengenai bagian-bagian tabel

Menyeleksi elemen dalam tabel

Untuk menjelaskan bab ini silahkan buat tabel 3 x 3 dengan property default. Berikut ini contoh tabel yang sudah saya beri notasi:

Misalkan kita ingin menyeleksi kolom bagian tengah saja kita bisa kita bisa melkukannya dengan:

• menempatkan cursor pada sel nomor 2 kemudian klik dan seret ke bawah sampai nomor 8.

Menekan ctrl kemudian mengklik sel yang diinginkan

Tentang hyperlink

Link merupakan elemen terpenting dalam sebuah situs. Elemen ini merupakan jembatan untuk berpindah dari satu halaman ke halaman yang lain dari topik satu ke topik yang lain dalam satu halaman, atau bahkan ke halaman web yang lain atau ke alamat email.

Di link menuju ke halaman kontak.html pada text tertentu maka htmlya adalah:

<a href=”kontak.html”>text tertentu</a>

Sedangkan untuk memberikan link pada gambar tentu saja didalam tag <a> terdapat tag <img>

<a href=”alamat_link”><img src=”kontak.gif” alt=”kontak”></a>

www.ilmu.org 17


Dijelaskan di atas bahwa kita bisa membuat link yang menuju ke halaman tertentu, situs tertentu, dan bahkan alamat email tertentu. Di bawah ini adalah contoh html untuk beberapa jenis alamat tersebut:

<a href=”http://www.amikom.ac.id”>link menuju ke AMIKOM</a>

Sedangkan untuk membuka alamat link ke jendela browser yang baru kita bisa menggunakan target=”_blank”

<a href=”http://www.google.com” target=”_blank”>link menuju ke google</a>

Untuk membuat link di dreamweaver sangatlah mudah. Kita tinggal menyeleksi text atau gambar mana yang ingin digunakan sebagai hyperlink kemudian tinggal mengisikan alamat yang ingin dituju pada kotak “link” pada property inspector.

Gambar 25. Cara memasukkan link pada text

Latihan 1 Buatlah web pribadi yang berisi profile , gallery dan kontak masing –masing personal

www.ilmu.org 18


Latihan 2

Desain web Company Profile tingkat lanjut dengan Dreamweaver

Elemen gambar, panduan dan template disediakan di lab/intranet dan dapat di download lewat internet

Gambar 26 Contoh Tampilan depan

www.ilmu.org 19

pengantar web design dengan mac. dreamwaver 01

Documents