CARA MENDESAIN WEB

Pembahasan ini akan mempelajari cara mendesain tampilan sebuah web. Tampilan web akan dikerjakan menggunakan Corel Draw X3 dan selanjutnya diekspor ke dalam Adobe Photoshop CS2.
Proses Corel Draw X3
1.Jalankan Program Corel Draw X3
2.Buat Lembar kerja baru, klik Ctrl+N

3.Atur setting lembar kerja seperti tampak pada gambar

4.Langkah pertama kita akan membuat tampilan logo fadzlicious.
5.Aktifkan Ellipse Tool atau tekan F7
6.Buat beberapa objek lingkaran dan atur posisinya seperti tampak pada gambar. Tekan ctrl pada saat membuat lingkaran.

7.Berikutnya adalah memberikan warna pada masing-masing lingkaran.
8.Pilih objek lingkaran 1.
9.Aktifkan fill tool – Fountain fill dialog atau tekan F11.
10.Kemudian akan tampak kotak dialog Fountain Fill dan atur beberapa parameter seperti tampak pada gambar

11.Ubah pilihan type menjadi Radial . Pilihan ini untuk mengatur tipe gradasi .
12.Atur center offset gradasi
13.Atur kombinasi warna pada group Color Blend. Dalam contoh kita menggunakan Two Color dengan kombinasi warna hitam dan putih.
14.Akhiri dengan OK dan hasil akan tampak seperti gambar

15.Selanjutnya pilih objek lingkaran 2.
16.Berikan warna gradasi pada objek lingkaran 2 dan atur parameter yang diinginkan.
17.Ubah pilihan Type menjadi Linear.
18.Ubah nilai Angels menjadi 38,0 pada group Option.
19.Pilih Custom dalam group Color Blend. Atur kombinasi warna yang diinginkan. Untuk lebih jelas lihat gambar

20.Klik OK dan hasilnya akan seperti gambar

21.Pilih lingkaran 3. Berikan gradasi pada lingkaran 3 dengan warna gradasi pada lingkaran 3 dengan warna yang sama dengan lingkaran 2. Hanya saja pada objek lingkaran 3, nilai angle diubah menjadi -138,0. Lihat gambar .

22.Klik OK dan hasilnya akan tampak seperti pada gambar

23. Pilih objek lingkaran 4 . Berikan warna gradasi kombinasi merah dan hitam dengan tipe gradasi Radial. Lihat gambar

24. Klik OK dan Hasilnya

25. Dari objek yang terbentuk , kita akan menghilangkan garis outline pada masing- masing objek.
26. Pilih objek dan klik kanan pada tombol no color dalam palet color.Hasil Lihat gambar .

27. Pilih semua objek lingkaran dan tekan Ctrl + G untuk mengelompokkan objek terpilih menjadi satu group.
28. Buat Duplikat dari objek logo dengan menekan Ctrl + D
29. Atur ukuran dan Posisi masing-masing objek seperti tampak pada gambar

30. Logo sudah selesai dikerjakan. Untuk sementara, sisihkan dulu objek logo keluar area lembar kerja.
31. Langkah berikutnya membuat tampilan web.
32. Aktifkan beberapa pilihan pada menu view seperti tampak pada gambar

33. Aktifkan pilihan Rulers, Guidelines, Snap to Guidelines, Snap to Objects dan Dynamic Guides.
34. Tambahkan guideline pada masing-masing sisi lembar kerja. Klik pada ruler horizontal atau vertical dan drag ke sisi lembar kerja untuk membuat guideline.
35. Sekarang buatlah objek yang pertama.
36. Gunakan Polyline tool dan gunakan guidline sebagai garis panduan untuk membuat objek. Dengan mengaktifkan pilihan snap to guidelines maka node dari objek yang dibentuk akan secara otomatis menempel pada guideline yang digunakan sebagai garis Bantu. Lihat Gambar

37. Usahakan sisi kiri dan kanan objek menempel pada guideline kiri dan kanan pada lembar kerja.
38. Dalam contoh ketebalan garis dibuat 1 pt agar mempermudah anda mengenali contoh objek yang dibuat.
39. Berikan warna pada objek yang sudah dibuat. Dalam contoh ini digunakan warna abu-abu (10% black) untuk warna dasar menghilangkan warna garis outline. Lihat gambar.

40. Masih dengan Polyline tool, buat objek berikutnya. Lihat gambar

41. Berikan warna pada objek kedua. Dalam contoh digunakan warna Deep yellow dan menghilangkan garis outline. Lihat gambar

42. Buat objek ketiga seperti gambar .

43. Beri warna pada objek ketiga dan hilangkan garis outline. Di sini digunakan warna Brick Red . Lihat gambar.

44. Pastikan objek ketiga masih dalam kondisi terpilih. Tekan Shift + PageDown untuk meletakkan objek terpilih di posisi paling belakang. Lihat Gambar.

45. Selanjutnya buat objek kotak dengan Rectangle Tool. Lihat gambar.

46. Beri warna dan hilangkan outline. Di sini digunakan warna abu-abu (30% Black). Lihat gambar

47. Tekan Shift + PageDown untuk meletakkan objek kotak ke posisi paling bawah. Lihat gambar.

48. Buat objek selanjutnya menggunakan Polyline Tool. Lihat gambar.

49. Beri warna putih pada objek Polyline dan hilangkan garis Outline. Lihat gambar.

50. Pastikan objek Polyline masih terpilih.
51. Tekan Ctrl + C kemudian paste untuk copy objek
52. Geser Polyline sedikit ke atas, Beri warna Orange pada Polyline hasil duplikat. Lihat Gambar.

53. Selesai sudah tampilan web bagian header
54.Gunakan Rectangular Tool untuk membuat tampilan web bagian footer.
55. Buat beberapa objek kotak di sisi bawah lembar kerja. Lihat gambar.

56. Pilih semua kotak dibagian footer.
57. Klik tombol Weld untuk menggabung menjadi satu.
59. Beri warna abu-abu (10% Black) pada objek footer dan hilangkan garis outline. Lihat gambar.

60. Kemudian masukkan objek logo yang telah anda buat tadi ke bagian header dan tambahkan dengan tulisan fadzlicious.com disebelah kanan logo. Beri kombinasi warna hitam dan putih. Di sini digunakan font Arial Siza 10 pt. Gunakan Text Tool untuk membuat teks. Lihat Gambar.

61. Berikutnya tambahkan beberapa teks untuk menu. Jenis Font = Arial, Sizae = 4 pt, warna = putih. Lihat gambar.

62. Berikan pembatas antarteks menu. Gunakan Polyline Tool untuk membentuk garis batas teks antarmenu. Berikan warna putih untuk objek garis dengan ketebalan garis = Hairline. Lihat gambar.

63. Untuk variasi, tambahkan beberapa pernik seperti object polygon. Gunakan Polygon Tool dengan bentuk 5 sisi. Lihat gambar.

64. Transparansi Polygon juga dapat diatur secara bervariasi.
65. Klik Menu Effects – Pilih Lens.
66. Pilih Beberapa objek Polygon, di dalam panel Lens pilih Transparency dengan nilai Rate = 40%, Color = Putih.
67. Terakhir tambahkan warna latar belakang.
68. Untuk warna latar belakang, kita menggunakan objek kotak. Ukuran objek kotak dibuat sebesar ukuran lembar kerja yaitu 760 x 600 pixel.
69. Beri warna pada objek kotak dengan warna yang diinginkan dan hilangkan garis outline. Dalam contoh digunakan warna putih untuk latar belakang.
70. Kemudian tekan Shift + PageDown sehingga objek kotak diletakkan di posisi paling belakang.
71. Desain tampilan web sudah selesai. Anda dapat menambahkan beberapa variasi lainnya dalam bentuk teks atau objek. Secara keseluruhan hasilnya tampak pada gambar.

72. Setelah selesai membuat tampilan web, langkah selanjutnya adalah mengekspor hasilnya ke dalam Adobe Photoshop CS2.
73. Simpan terlebih Dahulu hasil kerja anda dengan nama DESAIN WEB.cdr.

MEMBUAT HALAMAN WEB

PRAKTEK MEMBUAT HALAMAN WEB

Untuk mempermantap keterampilan anda dalam membuat link sekaligus mengulang semua pelajaran yang telah lalu, kita akan mencoba membuat halaman web. Anggaplah ini adalah proyek pembuatan web anda yang pertama.  

Bukalah program Notepad anda. Klik menu File lalu Save. Pada kotak dialog yang muncul masuklah ke folder My Documents lalu folder My Webs. Cara masuknya, klik ganda (klik dua kali dengan cepat) folder yang bersangkutan. Setelah anda berada dalam folder My Webs, buatlah folder baru dengan cara mengklik ikon create new folder yang berada pada ikon ketiga. Maka akan muncul folder New Folder, silakan anda ganti namanya misalnya web1. Setelah itu pada kotak Save As Type, ganti isinya dengan All File. Lalu isi kotak File Name dengan nama yang anda sukai misalnya home.htm. Klik Save.

Pada file dengan nama home.htm ini, buatlah halaman web dengan judul (title) Halaman Pertama. Kemudian isilah halaman tersebut sedemikian rupa sehingga dalam browser tampak seperti ini:

HAL. 1 | HAL. 2 | HAL. 3 Selamat Datang di Proyek Pertama ! Judul di atas merupakan header level kedua yang diletakkan di tengah. Dalam proyek pertama ini saya akan berlatih membuat halaman web yang sangat-sangat sederhana. Halaman web ini akan saya isi dengan beberapa format penulisan halaman web yang telah saya pelajari. Dengan demikian saya bisa memperlancar dan mempermantap keterampilan saya membuat halaman web. Amin...! Ini Header Level Ketiga Masih ingat, kan cara membuat paragraf? Suatu paragraf bisa tidak diberi tag penutup. Yang penting anda ingat, bila akan membuat lagi paragraf baru, tulis tag pembuka paragraf. Sedangkan untuk membuat baris, ada tag tersendiri.  Dalam paragraf ini anda akan mengulangi pelajaran membuat baris, seperti di bawah ini: Klik di sini untuk melihat Daftar Definisi. Untuk melihat Kesan dan Pesan, klik di sini.  Ini paragraf baru. Perlu anda ketahui bahwa halaman web yang tampak dalam browser merupakan beberapa baris kalimat, bila dibuat dalam kode HTML, bisa saja ditulis dalam satu baris saja. Yang penting untuk setiap baris baru harus diawali dengan tag <BR>. Ngerti maksudnya? Kembali Keatas | Selanjutnya

Sekarang kita akan membuat halaman web selanjutnya dengan judul Halaman Kedua dengan tampilan dalam browser sebagai berikut:

HAL. 1 | HAL. 2 | HAL. 3 Mengutak-atik Font Dalam halaman ini, kita menggunakan warna background kuning dengan font Comic Sans ukuran 2 warna biru sebagai font default. Masih ingat, kan cara pengaturannya?   Daftar Definisi Internet Singkatan dari interconnection network atau hubungan antar jaringan. Internet ialah jaringan komputer global dan merupakan jaringan komputer yang terbesar di dunia karena mampu menghubungkan seluruh komputer yang ada di dunia. HTTP Singkatan dari Hypertext Transfer Protocol adalah salah satu protokol bahasa yang digunakan untuk berkomunikasi antar server komputer dalam internet. Protokol bahasa yang lain dalam internet misalnya: Telnet, News, Gropher, FTP. URL Singkatan dari Uniform Resource Locator adalah standar pegalamatan sebuah file di Internet yang dirancang khusus untuk digunakan dengan browser WWW seperti Netscape, Internet Explorer, Opera, dan lain-lain. Bila anda ingin mencari terjemahan kata-kata Inggris ke Indonesia atau Indonesia ke Inggris, pergilah ke situs KamusWeb.  Kembali Keatas | Selanjutnya

Simpanlah halaman di atas dengan nama misalnya: kuning.htm. Kemudian buatlah satu halaman web lagi dengan titel Halaman Ketiga seperti berikut:

HAL. 1 | HAL. 2 | HAL. 3 Inilah Biodataku .... 1. Nama 2. Tempat/tanggal lahir  3. Nama orang tua a. Ayah b.                        Ibu 4. Pendidikan                                                                i.      Sekolah dasar                                                              ii.      Sekolah menengah pertama                                                             iii.      Sekolah menengah atas                                                            iv.      Perguruan tinggi       Pekerjaan       Alamat               §  Rumah               §  Kantor        Hobi Pesan dan Kesan Membuat website sebenarnya gampang-gampang susah. Gampang karena kita tinggal mengganti kalimat-kalimat yang diletakkan diantara tag-tag. Kalau mau lebih mudah lagi, ambil saja halaman web yang sudah jadi (pilih yang paling sederhana). Buka source code-nya, kemudian edit lah isinya sesuai keinginan anda. Susahnya bila ingin membuat halaman web yang rumit dan dinamis. Untuk itu kita perlu belajar lebih banyak dan lebih giat lagi ....! Kembali Keatas

Simpanlah halaman ketiga di atas dengan nama misalnya: biodata.htm. Sekarang kita telah mempunyai tiga buah file HTML yaitu home.htm, kuning.htm dan biodata.htm. Tugas kita selanjutnya adalah memasukkan link-link ke dalam setiap halaman web tersebut. 

Dalam setiap halaman, di bagian atasnya terdapat link-link berikut: HAL. 1, HAL. 2 dan HAL. 3. Masing-masing link menuju ke file home.htm, kuning.htm dan biodata.htm.

<P ALIGN="RIGHT"><A HREF="home.htm">HAL. 1</A> | <A HREF="kuning.htm">HAL. 2</A> | <A HREF="biodata.htm">HAL. 3</A>

Juga dalam setiap halaman, terdapat link Kembali Keatas dan Selanjutnya. Teks Kembali Keatas merupakan link yang membawa kita ke bagian paling atas dari setiap halaman. Untuk itu sebelumnya kita harus memberi nama pada baris tulisan HAL. 1 | HAL. 2 | HAL. 3 yang merupakan baris teratas dari setiap halaman. 

<HTML><HEAD><TITLE>Halaman Pertama</TITLE></HEAD> <A NAME="atas"></A><P ALIGN="RIGHT"><A HREF="home.htm">HAL. 1</A> | <A HREF="kuning.htm">HAL. 2</A> | <A HREF="biodata.htm">HAL. 3</A>

Setelah itu barulah kita membuat link Kembali Keatas dengan kode sebagai berikut:

<A HREF="#atas">Kembali Keatas</A>

Sedang teks Selanjutnya dijadikan link yang menuju ke file sesudahnya. Yakni dari file home.htm menuju ke kuning.htm dan dari file kuning.htm menuju ke biodata.htm. Contoh dalam file home.htm:

<A HREF="#atas">Kembali Keatas</A> | <A HREF="kuning.htm">Selanjutnya</A>

Dalam halaman pertama terdapat dua link lagi di bagian tengah yaitu link yang menuju ke Daftar Definisi yang ada di halaman kedua dan link yang menuju ke Kesan dan Pesan yang ada di halaman ketiga. Karena itu kita harus mencantumkan nama terlebih dahulu pada baris Daftar Definisi di halaman kedua (file kuning.htm) dan pada baris Kesan dan Pesan di halaman ketiga (file biodata.htm) seperti contoh berikut: 

<A NAME="defin"></A><H3>Daftar Definisi</H3>

Untuk halaman ketiga:

<A NAME="kesan"></A><H3>Kesan dan Pesan</H3>

Setelah itu barulah kita bisa memberi link pada kalimat berikut di halaman pertama:

<BR><A HREF="#defin">Klik di sini</A>untuk melihat <B>Daftar Definisi</B>. <BR>Untuk melihat<B>Kesan dan Pesan</B>, <A HREF="#kesan">klik di sini</A>.

Di halaman kedua (file kuning.htm) terdapat contoh link yang menuju ke situs yang lain. Buatlah link tersebut bila di-klik akan membuka jendela browser baru untuk menampilkannya. Begini jadinya:

<A HREF="http://www.kamus.web.id" TARGET="_blank">Kamus Web</A>

Bila anda telah selesai memasukkan seluruh link-link tersebut, bukalah browser anda, kemudian cobalah meng-klik semua link-link yang terdapat dalam ketiga halaman web itu.

Sampai pelajaran ini, anda sebetulnya sudah dapat membuat website sendiri. Kami sangat menyarankan anda mencoba membuat website sederhana dengan bekal pengetahuan yang telah anda pelajari. 

CHRYSTA AGUNG