BABII

BAB II
PERANCANGAN WEB
A. Merancang Desig Web

Utnuk mendesign web sibuhkan kegemaran tersendiri karma disini dibutuhkan merancang tampilan seindah mngkin dan memberi warna, animasi yang menarik, adapaun beberapa program yang digunakan seperti Drem weafer, adobe photoshop, Adobe Image Ready dan macromedia flash.

A.1. Macromedia Flash

Macromedia Falsh adalah sebuah program animasi yang telah banyak digunakan para animator untuk menghasilkan animasi yang profesional. Animasi dari program flash juga sangat bagus digunakan untuk perancangan sebuah web. Berikut adalh contoh pembuatan animasi.

Latihan “Membuat perubahan tulisan dari kecil ke besar”
Langkah membuat animasi:
1. Siapkan lembar kerja
2. Buatlah tulisan “MYWEB” dengan ukuran kecil.dengan menggunakan icon T yang ada di Tools dan ubah ukuran huruf dengan menggunaan Toolbar Propertise.
3. Pada time Line yang anda tentukan jarak untuk animasi
4. Setelah menentukan jarak anda klick kanan klick insert keyframe / create montion tween
5. Lakukan langkah tersebut sampai kebentuk atau animasiyang kita inginkan
6. Setelah selesai kita dapat menjalankan dengan cara enter atau ctrl+Enter dan hasilnya akan tampak.
7. Simpan file dengan nama file Hurufku,fla

A.2. Adhop Photoshop

Adobe photoshop ini sangat penting dan mungkin dengan adobe photoshop kita lebih mengenal lebih dekat dengan kegunaannya yan g sering kali disebut-sebut dengan editing photo / gambar atau untuk memanipulasi image. Kita dapat memanipulasi gambar kita sesuai dengan bentuk atau design yang kita inginkan, tapi juga adobe photoshop tidak hanya untuk image berbentuk photo tapi juga text dan gambar yang lain juga bisa membuat logo untuk suatu intansi/ intitusi/perusahaan. Sehingga tampilan web atau situs kita jadi lebih sempurna.
Disinai hanyla akan dibahas tentang bagaimana membuat design dengan menggunakan adobe photoshop. Rung alingkup adhop photoshop terdiri dari:

Tehnik – tehnik menggunakna tool
Tehnik ini yang akan digunakan untuk kita gunakan Mendesign Web
Perhatikan kasus dibawah ini:
“Designlah sebuah situs dengan menggunakan Adhobe Photoshop”
ada dua langkah yang bisa dilakukan untuk membuat desidn Web dari kasus diatas, yaitu:
A. Langkah yang terutama untuk menyelesaikan kasus diatas dengan membuat object secara terpisah adalah :
1. Membuat tombol-tombol yang diperlukan
a. siapkan lembar kerja dengan ketentuan sebagi berikut :
§ Widh = 100 pixel
§ Hight = 40 pixel
§ Resolution = 72 pixel/inch
§ Mode = RGB Color
§ Content = white
(catatan ukuran dan keentuan ini optional, tergantung dari design yang kita inginkan)

b. ubah warna background sesuai dengan yang diinginkan dengan menggunakan paint bucket / Gradient tool / Palete Collor.
c. Bebtuk dan beri manipulasi )bject atau text (T) yang sesuai dengan tombol yan gakan kita buat dengan effect-efect sebagai berikut :
· Drop shadow
· Inner shadow
· Outher Glow
· Bevel and Emboss
· Satin, dll.
d. Hasilnya kita simpan dengan Tombol1.html (safe for web) dan Tombol1.psd (save as).

2. Membuat Tampilan atas Web.
a. Siapkan lembar kerja dengan ketentuan sebagai berikut :
§ Widh = 800 pixel
§ Hight = 150 pixel
§ Resolution = 72 pixel/inch
§ Mode = RGB Color
§ Content = Transparent
(catatan ukuran dan keentuan ini optional, tergantung dari design yang kita inginkan)

b. langkah selanjutnya sama dengan diatas dengan effect-efect baik tulidan nya atau dengan objectnya.
c. Untuk background bisa kitagunakan bentuk sendiri dengan komponen yang di toolbox atau sisipkan Gamba.
Ini adalah tampilan atas yang menggunakan langkah b:
d. Hasilnya kita simpan dengan Judul.html (safe for web) dan Judul.psd (save as).

3. Hasil dari simpanan design tadi akan kita gunakan dengan menggabungkan dengan program macromedia dream weafer.


B. Langkah yang terutama untuk menyelesaikan kasus diatas dengan membuat object secara seluruh adalah :
a. Siapkan lembar kerja dengan ketentuan sebagai berikut :

§ Widh = 800 pixel
§ Hight = 700 pixel
§ Resolution = 72 pixel/inch
§ Mode = RGB Color
§ Content = White
(catatan ukuran dan keentuan ini optional, tergantung dari design yang kita inginkan)

b. Ubah warna background sesuai dengan yang diinginkan dengan menggunakan Paint Bucket / Gradient Tool/ pallete color.

c. Bentuk dan beri manipulasi Object atau Text yang sesuai dengan tombol yang akan kita buat dengan effect-efect sebagai berikut :
· Drop shadow
· Inner shadow
· Outher Glow
· Bevel and Emboss
· Satin, dll.

d. Hasilnya kita simpan dengan home.html (safe for web) dan Home.psd (save as).


Latihan
Design halaman web dengan menggabungkan beberapa gambar dan logo yang dibuat di adobe photoshop serta beri effect-efect yang memprcantik tampilan. Gambar dan tulisan.

A.3. Adobe Image Ready

tahu Adobe Image Ready adalah program yang biasanya satu paket dengan adobe photoshop. Image ready sering kita gunakan untuk mengkonversi design web yang kita buat dari program adobe photoshop secara keseluruhan dan kita akan mengubah atau memisahkan/ memotong design web sesuai dengan bentuk yang lebih kecil dengan perluasan HTML. Dan kita hanya bisa mengatur design tetapi kita juga bisa memberikan Rolovers Palete yaitu perntian tampilan tombol atau text yang berbeda warna saat di access di stitus (dala bentuk HTML) sehingga tampilan situs kita lebih menarik.

Tampilan atau komponen-komponen pada tahu Adobe Image Ready tidak jauh beda dengan Adobe photoshop karena memang keduanya adalah satu paket. Dalam kesempatan ini kita akan melakukan pemisahan dan membuat design kita dalam bentuk HTML.


Ikuti langkah-langkah dibawah ini:
a. Buka atau siapkan design keseluruhan kita yang akan kita alihkan ke program Adobe Image Ready. Kita juga bila melakukan dengan mentransfer langsung dari adobe photoshop dengan Tool yang terdapat di photoshop.
b. Kita mulai memisahkan atau memotong-motong design sesuai dengan keinginan dan bgian-bagian yang telah ditentukan, seperti tombol-tombol dan yang lainya. Dengan menggunakan tool yaitu Slice Tool. Lalu simpan degan Save Optimazed As dengan nama file Webku.
c. Membuat Rollover dengan memilih object/bagian yang akan dibuat rollover.
Klik pada pallete rollover klick kanan add rollover state.
d. Sehingga dihasilkan ini dapa t terlihat dalam bentuk html, lalu simpan kembali dengan Save Optomazed As.


Tugas.
Buatlah design bertema “pendidikan” dari adobe photoshop dan image ready serta dengan rollover image pada tombol navigator.


A.4. Macromedia Drem Weaver

Maccromedia Dream Weaver adlah program aplikasi web editor terpopuler saat ini. Selain tampilan yang lebih menarik, kemampuan dan fitur-fitur baru akan memudahkan para emakai untuk menciptakan halaman-halaman web dengan cepat dan mudah tanpa harus berlama-lama menuliskan baris-baris kode HTML. Salah satu kelebihan dream weaver adalah memiliki kemampuan uang mendukung pemrograman script server side seoerti Active Server Page (ASP), Java Server Page (JSP) Coldfusion dll.

A.4.1. Workspace Dream Weaver.

Keterrangan :
1. Menu Bar
Berisiakan tentang kumpulan menu-menu yan gakan kita gunakan.
2. Docement Toolbar
Berisikan tentang kumppulan tool/icon yang digunakan halaman website.
3. Insert Bar
Berisikan tombol / icon yang digunakan untuk memasukkan object dalam Web.
4. Panel Groups
Berisikan panel-panel dari berbagai fungsi dream weaver seperti design, code design, application Tag inspector dll.
5. Property Inspector
Berisikan tentang pengaturan – pengaturan untuk diterapkan dalam suatu object sehingga isi dari property inspector ini akan berubah sesuai dengan object yang sedang aktif.
6. Document Windows
Ruang kerja dream weaver untuk mendesign website.
A.4.2. Bekerja Dengan Table

1. Klick panel/menu insert plih Table kemusian tntukan jumnlah kolom (coloum) dan baris (row) lalu ok.

Catatan :
v Insert Table : membuta table
v Merge Cells : menggabungkan table (baris/kolom)
v Split Cells : menambahkan / menyisipkan table (baris/kolom)
v Delete Row/kolom : menghapus kolom atau baris.

2. Atur table baik kolom maupun baris sesuai dengna kebutuhan/design.
3. Anda bisa menyisipkan gambar dari design yang kita buat dari adobe photosop atau langsung dari dreamweaver.
a. Langsung dari Dreamweaver.
Untuk menambah animasi dari bahasa nya klick panel Design ang code. Lalu ketik rumus :
******* Web Online *********
lalu simpan file tersebut dengan bentuk file HTML.
Untuk melihat web hasil design kita bisa menggunakan tombol F12 atau Preview.

b. Mengambil Object atau gambar dari adobe photoshop
· Siapkan lembar kerja dengan table dan atur.
· Ambil gambar dari insert image ambil gambar OK atur sehingga tampil menarik. Gambar yang kita masukkan ini yang pernah kita potong di Image Ready. Lalu simpan file dedalam bentuk file HTML.
Untuk melihat web hasil design kita bisa menggunakan tombol F12 atau Preview.
c. Membuat tombol degan flash button.
Untuk membuat tombolTombol juga bisa kita gunakan yang tersedia di dreamweaver, caranya dari insert pilih interactive pilih image pilih flash button.
Lalu pilih bentuk tombol nya dan beri nama tombol lalu ok.

A.4.3. Bekerja dengan Layer

Design dengan layer tidask jauh beda, yang membedakan hanya tidak menggunakan table tetapi designdengan layer. Langkah yang dilakukan adalah dari menu insert pilih layer.

Disamping adalah bentuk dari layer yang akan digunakan untuk designweb. Biasanya digunakan untukmenyisipkan gambar atau text agar mudah mengatur.


Jadi design dengan tabel maupun dengan layer sama saja bahkan kita bisa menggunakan keduanya agar design kita mudah dan menarik.