WEB DESIGN

Mengenal Software Web Design.

Software Web Design

Software web design merupakan perangkat lunak yang berguna untuk membangun / membuat / mendesain halaman-halaman web, baik yang bersifat statis maupun dinamis. Saat ini terdapat berbagai macam software web design yang dikeluarkan oleh vendor yang berbeda-beda. Setiap software web design itu menawarkan berbagai macam fitur unggulannya masing-masing. Software web design terpopuler yang ada saat ini antara lain: Adobe Dreamweaver, Adobe Fireworks, Microsoft Frontpage dan lain sebagainya.

Mengenal Adobe Dreamweaver CS6

Adobe Dreamweaver merupakan program penyunting halaman web keluaran Adobe Systems yang dulu dikenal sebagai Adobe Dreamweaver keluaran Adobe. Program ini banyak digunakan oleh pengembang web karena fitur-fiturnya yang menarik dan kemudahan penggunaannya. Versi terakhir Adobe Dreamweaver sebelum Adobe dibeli oleh Adobe Systems yaitu versi 8. Versi terakhir Dreamweaver keluaran Adobe Systems adalah versi 12 yang ada dalam Adobe Creative Cloud (sering disingkat Adobe CC >> http://www.adobe.com/products/dreamweaver.html).

Adobe Dreamweaver yang merupakan salah satu software web design terpopuler dipilih sebagai software web design yang akan digunakan dalam proses pembelajaran. Adobe Dreamweaver dipilih karena kompatibilitas dan dukungannya terhadap berbagai bahasa pemrograman web, antara lain : PHP, ColdFusion, JavaScript, CSS dan XML disamping keunggulan-keunggulan lainnya dibandingkan dengan software web design yang lain.

Dreamweaver menjadi software utama yang digunakan oleh web designer dan web programmer guna mengembangkan situs web. Ruang kerja, fasilitas dan kemampuan Dreamweaver mampu meningkatkan produktivitas dan efektivitas dalam desain maupun pembangunan situs web. Dreamweaver juga dilengkapi dengan fasilitas untuk manajemen situs yang cukup lengkap. Untuk dapat mengoperasikan Adobe Dreamweaver, terlebih dahulu harus dipastikan sudah terinstal di komputer praktikum.

Apabila belum ada Adobe Dreamweaver yang terinstal, maka perlu dilakukan proses instalasi. Terlebih dahulu harus dipersiapkan file instalasinya dan diikuti dengan proses instalasi sesuai dengan installation manual yang ada. Setelah Adobe Dreamweaver terinstal, jalankan dengan klik 2 kali pada ikon yang terdapat di desktop atau dapat juga dilakukan melalui Start Menu.

Workspace Adobe Dreamweaver CS6

Pertama kali dijalankan setelah proses instalasi selesai, user akan diberikan pilihan Workspace Setup. Workspace Setup berfungsi untuk menentukan workspace yang akan kita pakai selanjutnya.

Gambar 1.

Workspace Dreamweaver CS6 tersebut memiliki tampilan window seperti pada gambar 2.

Window Dreamweaver CS6 ini dibagi menjadi 7 bagian, yaitu : Insert Bar, Document Toolbar, Document Window, Panel Groups, Tag Selector, Property Inspector dan Files Panel.

Gambar 2.

Keterangan Gambar:

1) Insert bar, memuat tombol-tombol yang berfungsi untuk memasukkan/menyisipkan berbagai jenis obyek seperti gambar, tabel dan layer ke dalam suatu dokumen. Setiap obyek yang dimasukkan dengan meng-klik tombol insert pada insert bar ini adalah seperti halnya memasukkan potongan tag HTML ke dalam halaman yang sedang dibuat.

2) Document window, berfungsi untuk menampilkan dokumen di mana anda sekarang bekerja.

3) Document toolbar, berisi tombol dan menu pop-up yang menyediakan tampilan yang berbeda-beda dari Document Window.

4) Panel groups, merupakan kumpulan panel yang saling berkaitan satu sama lain, yang dikelompokkan di bawah satu judul.

5) Tag selector, berfungsi untuk menampilkan hierarki tag di sekitar pilihan yang aktif pada Design View.

6) Property inspector, digunakan untuk melihat dan mengubah berbagai property obyek atau teks.

7) Files panel, memungkinkan pengaturan file-file atau direktori kerja.

Workspace Dreamweaver CS6 ini memberikan kesatuan tampilan antara menu utama, panel, property inspector serta toolbar.

Rangkuman 1

Adobe Dreamweaver merupakan software web design yang telah memiliki banyak dukungan terhadap banyak bahasa pemrograman web. Panel-panel pada window Dreamweaver CS6 memiliki peran masing-masing dalam membangun sebuah halaman web yang cantik, sesuai dengan jiwa seni si pemakai.

Tugas 1

1) Pelajarilah setiap fungsi dari panel-panel dalam window Dreamweaver CS6!

2) Cari dan pelajari sumber bacaan atau buku refensi yang menjelaskan secara detail tentang pengenalan tool-tool dalam Adobe Dreamweaver CS6 .

Tes Formatif 1

1) Apakah yang anda ketahui tentang software web design?

2) Apa yang anda ketahui tentang pemrograman web?

3) Sebutkan beberapa software web design yang anda ketahui!

Kunci Jawaban Formatif 1

1) Software web design ; perangkat lunak yang berguna untuk membangun/membuat/mendisain halaman-halaman web, baik yang bersifat statis maupun dinamis.

2) Pemrograman web, adalah pembuatan halaman web yang didalamnya mengandung unsur bahasa pemrograman disamping tetap menggunakan tag-tag HTML. Biasanya pemrograman web bertujuan untuk membangun web-web dinamis.

3) Software web design : Microsoft Frontpage, Adobe Fireworks, Adobe Dreamweaver, Adobe ImageReady, Namo Web editor dan lain – lain.

Alat dan Bahan

Personal Computer (PC).

Kesehatan dan Keselamatan Kerja

1) Berdo’alah sebelum memulai kegiatan belajar.

2) Bacalah dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar.

3) Pastikan komputer dalam keadaan baik, semua kabel penghubung terhubung dengan benar.

4) Setelah selesai, matikan komputer sesuai prosedur!

Langkah Kerja

1) Siapkanlah semua peralatan yang dibutuhkan!

2) Periksa semua kabel penghubung pada komputer.

3) Nyalakan komputer dan pastikan komputer tersebut telah terkoneksi internet dengan baik.

4) Pastikan PC yang anda pakai sudah memiliki software web design, jika belum lakukanlah instalasi software yang dibutuhkan, yaitu : Adobe Dreamweaver CS6 .

5) Jalankan Adobe Dreamweaver CS6, amati dan catat bagian-bagian pada window Dreamweaver CS6. Jika mengalami kesulitan, tanyakan pada instruktur.

6) Setelah selesai, laporkan hasil kerja Anda kepada instruktur.

7) Setelah diteliti matikan komputer dan rapikan seperti semula.

selamat mencoba yah sobb, jangan lupa kalo kunjungi web saya, jangan lupa komment hehehehe :D :) terimakasih telah membaca postingan ini (y)