Langkah-langkah perancangan Website
Untuk membangun sebuah website, diperlukan suatu langkah-langkah persiapan yang secara umum dibagi dalam lima tahap, yakni (Rickyanto, Isac.2001):
1. Merumuskan tujuan membuat website
Berdasarkan isi maupun tujuan, suatu website biasanya dapat digolongkan menjadi seperti berikut ini:
a. Website marketing, berfungsi sebagai media presentasi dan pemasaran.
b. Website customer service, berfungsi sebagai media untuk melayani konsumen.
c. Website e-Commerce, berfungsi sebagai media transaksi on-line.
d. Website informasi/berita, berfungsi sebagai media informasi berita
2. Menentukan isi website
Faktor yang paling penting dalam suatu website adalah isi dari website itu sendiri. Hal tersebut berkaitan dengan manfaat yang akan diperoleh pengunjung dari sebuah website.
3. Menentukan target pengunjung
Meskipun suatu website mempunyai sifat terbuka dalam arti sebuah website bebas dikunjungi oleh semua orang, namun alangkah baiknya apabila dalam pembuatan website perlu dilakukan gambaran target yang akan dituju oleh sebuah website. Alasan ini lebih didasarkan pada penggunaan hardware dan aplikasi browser yang berbeda dengan setiap pengunjung.
4. Menentukan struktur website
Struktur website diperlukan untuk memberikan kemudahan dalam mengelola suatu website. Tentunya struktur tersebut harus disesuaikan dengan isi dari website. Dengan memiliki struktur yang terorganisasi dengan baik, suatu website akan memberikan kemudahan dalam navigasi, editing dan pemeliharaan website tersebut.
5. Desain website
Faktor keindahan desain tampilan dari suatu website merupakan salah satu faktor yang paling penting dalam menetukan keberhasilan suatu website, selain faktor kecepatan loading. Suatu situs yang baik memiliki suatu kesatuan desain bisa dikatakan memiliki kesamaan tema dalam halaman-halaman webnya. Hal ini penting dalam segi estetika maupun segi navigasi. Kesamaan desain yang biasanya dipertahankan antara lain kesamaan jenis font yang digunakan, warna, tombol navigasi (menu), letak menu dan sebagainya. Karena itu sangatlah penting bagi seorang web designer untuk mengetahui aturan-aturan yang berlaku dalam mendesain suatu website. Hal ini diperlukan agar desain dari website yang akan dibangun tidak terkesan sekedarnya.
Adapun hal-hal yang penting untuk diketahui seorang web designer adalah sebagai berikut:
a. Prinsip-prinsip dasar desain
Untuk membangun suatu website yang baik, seorang web designer sebaiknya memperhatikan prinsip-prinsip yang ada, terlepas ia mempunyai bakat seni atau tidak. Adapun prinsip-prinsip yang harus diperhatikan antara lain (komputek, 2001):
1. Unik
Yang dimaksud dengan unik dalam mendesain suatu website adalah kesadaran seorang designer untuk tidak meniru atau menggunakan karya orang lain.
2. Komposisi
Untuk memperindah tampilan halaman web, seorang web designer harus betul-betul memahami komposisi, baik bentuk maupun warna yang akan digunakan dalam website yang dibuatnya.
3. Simple
Banyak dari seorang web designer yang memegang prinsip-prinsip “ Keep it Simple”. Hal ini ditujukan agar tampilan website terlihat rapi, bersih dan informatif.
4. Semiotik
Arti semiotik adalah ilmu yang mempelajari tentang tanda-tanda. Dalam hal ini diharapkan pengunjung dapat dengan dengan mudah dan cepat mengerti ketika melihat tanda dan gambar yang ada dalam suatu website.
5. Ergonomis
Ergonomis dalam mendesain website adalah kepunyaan yang akan didapatkan pengunjung dalam membaca dan kecepatan yang akan diperoleh pengunjung dalam mencari informasi. Hal-hal yang perlu diperhatiakan oleh seorang webdesigner untuk mencapai prinsip ini adalah :
a) Pemilihan ukuran fonts yang tepat sehingga mudah dibaca.
b) Menempatkan link sedemikian rupa sehingga mudah dan cepat untuk diakses dan yang lebih penting lagi adalah suatu website terlihat lebih informatif.
6. Fokus
Fokus adalah hierarki prioritas dari pesan yang akan disampaikan. Dengan adanya fokus tersebut, diharapkan pengunjung dapat memahami dan menentukan pesan mana yang lebih dahulu harus dibaca atau dilihat.
7. Konsistensi
Konsistensi adalah pemilihan bentuk atau style yang digunakan pada elemen-elemen perancangan web dan digunakan pada semua halaman website Website yang konsiten akan memberikan identitas tersendiri dan mampu memperlihatkan visi serta misi dari website tersebut
b. Elemen-elemen desain
Desain grafis khususnya dalam halaman-halaman web terdiri dari beberapa elemen sebagai berikut (Ariesto Hadi Sutopo,2002):
1. Teks adalah bagian yang paling utama untuk menampilkan informasi
2. Grafik atau Image merupakan elemen yang dapat membantu menjelaskan informasi. Dengan penggunaan grafik maupun image orang lebih mudah memahami suatu pesan.
3. Animasi merupakan sarana untuk menampilkan informasi dengan baik, disamping animasi merupakan daya tarik yang mudah diingat pengunjung.
4. Video dapat merupakan hasil suatu rekaman dengan kamera video maupun hasil pengolahan dengan komputer.
5. Suara melengkapi desain web, memberikan efek khusus pada suatu tampilan animasi serta memberikan kenyaman bagi pengunjung yang mendengarkannya
6. Interaktive link dapat menggunakan button yang berupa teks, simbol, grafik, maupun image, yang berfungsi untuk memudahkan pengunjung dalam menyelusuri suatu website.
c. Konsep desain
Pada intinya konsep mendesain tampilan website sangat berkaitan dengan desain gra-fis , dan pada dasarnya mengikut prinsip desain grafis secara umum. Oleh karena itu alangkah baiknya jika dalam mendesain halaman tampilan website juga memperhatikan prinsip desain. Prinsip-prinsip desain tersebut adalah:
1. Komunikatif
Prinsip komunikatif berhubungan dengan corporate identity, isi pesan serta audiens.
2. Estetis
Fungsi dari estetis ini adalah memberikan suatu keindahan, sehingga lebih menarik minat pengunjung untuk lebih menggali informasi yang ditawarkan dari suatu website.
3. Ekonomis
Desain web harus memperhatiakan faktor ekonomis dalam arti ukuran file yang digunakan. Hal tersebut berkaitan erat dengan kecepatan akses yang ditawarkan suatu website.
Untuk mendapatkan desain yang komunikatif, estetis dan ekonomis hendaknya seorang web designer perlu memperhatikan pedoman-pedoman yang ada untuk membuat tata letak suatu tampilan, yaitu dalam mengatur elemen-elemen layout. Pedoman yang dimaksud adalah:
1. Kesatuan
Elemen-elemen layout dari halaman harus ditempatkan sedemikian rupa sehingga merupakan kesatuan informasi pada satu halaman atau beberapa halaman.
2. Balance
Elemen-elemen layout dari halaman harus ditempatkan sedemikian rupa sehingga terdapat keseimbangan secara keseluruhan
3. Kontras
Diperlukan untuk menonjolkan bagian yang dianggap lebih penting dari bagian lainnya. Kontras dapat dinyatakan dengan membedakan ukuran serta warna dari elemen-elemen layout.
4. Kontinyuitas
Informasi lebih dimengerti oleh pengguna bila mempunyai aliran-aliran yang baik, sedikit gangguan yang menghambatnya. Suatu aliran informasi dapat dikatakan kontinyu dan harmonis bila tampilannya mencerminkan kesinambungan dari satu bagian ke bagian lain. Kontinuitas dapat dibuat dengan membuat halaman-halaman mempunyai gaya, bentuk atau warna yang memberikan pengguna merasakan kesinambunagn dengan halaman lainnya.
3. Pembuatan Layout
Bermacam-macam langkah yang digunakan untuk membuat layout dari suatu website. Berikut ini merupakan proses yang secara umum banyak dilakukan dalam pembuatan layout.
a. Membuat sketsa desain
Seorang desainer bisa saja menuangkan ide dalam pembuatan interface dengan terlebih dahulu membuat sketsa di atas kertas. Namun untuk kebanyakan orang, langkah ini biasanya dilewatkan dan langsung pada langkah pembuatan layout desain dengan menggunakan software.
b. Membuat layout desain
Banyak software yang dapat digunakan membuat layout. Salah satu diantaranya adalah Macromedia, proses ini dikerjakan setelah pembuatan sketsa desain. Namun terkadang pembuatan layout merupakan proses yang pertama kali dikerjakan.
c. Membagi gambar menjadi potongan-potongan kecil
Proses ini diperlukan untuk meng-optimize waktu download.
d. Membuat animasi
Animasi diperlukan untuk menghidupkan atau menjadikan website lebih interaktif
e. Membuat HTML
Setelah merapikan layout desain lengkap dengan tombol, image, teks, script HTML, hal yang perlu dilakukan kemudian adalah membuat layout ke dalam format HTML.
LayOut Menggunakan tabel
Table tidak hanya dapat berfungsi sebagai penampil data-data saja, namun dapat juga dipakai untuk mengatur tampilan situs yang lebih rumit.
Dalam sebuah situs web, kita sering mendengar kata “homepage”. Ini artinya adalah halaman muka, atau halaman yang pertama kali dilihat oleh user. Halaman muka biasanya berbeda dengan halaman-halaman yang lain. Halaman muka tersebut dirancang untuk mewakili isi keseluruhan dari situs. Perhatikan situs http://cnn.com Halaman utama situs cnn:
Halaman isi situs cnn
Perhatikan layoutnya mirip dengan yang kita bicarakan tadi bukan?.
Sekarang kita mulai saja membuat situs umum yang mirip dengan desain di atas. Yang tertulis disini merupakan pengalaman penulis yang dirasa cukup efisien dalam pembuatannya. Tutorial ini menggabungkan dua software, yaitu photoshop dan dreamweaver. Gambar tersebut sebelumnya kita buat di photoshop, kemudian kita potong-potong kemudian digabung lagi dalam dreamweaver dengan menggunakan table. Jadi disini intinya adalah, jika kita mendesain situs dengan tampilan yang kompleks, sebelumnya kita buat tampilannya dalam photoshop. Aturlah komponen-komponen web seperti link, gambar, dan lain-lain sampai membentuk tampilan yang kita inginkan. Aplikasikan dasar-dasar dalam mendesain situs disini. Buatlah tampilan semenarik mungkin dengan tanpa membingungkan user ketika melihat situs kita. Setelah selesai, kita potong gambar-gambar yang diperlukan untuk membuat tampilan seperti itu. Sekarang kita pelajari teknisnya.
Kita akan membuat tampilan yang kompleks seperti halaman di atas dengan menggunakan bantuan table.
Ketika desain dalam photoshop anda sudah selesai, sekarang anda menentukan bagian mana yang harus dimasukkan dalam bentuk gambar dan bagian mana yang bisa dibuat background.
Implementasi Web Design
Pertama kali kita bagi desain kita menjadi tiga bagian, yaitu bagian header, body, dan footer. Hal ini dilakukan untuk mempermudah kita dalam meng-edit situs nantinya.
Setelah kita menentukan bagian-bagian tersebut, kemudian kita tentukan bagian mana yang harus dijadikan gambar dalam sebuah website. Saya ambil contoh bagian body.
Perhatikan bagian yang dilingkupi warna merah. Kita tidak perlu memasukkan gambar sebesar (15px x 539px) dalam halaman web kita. Kita hanya perlu menggunakan gambar sebesar (15px x 1px) kemudian menempatkannya sebagai background pada baris table sepanjang 539px.
Kita kerjakan bagian header dulu:
Bagian header saya bagi menjadi seperti gambar di bawah:
Bagian 1 dan 3, karena mempunyai warna yang banyak saya simpan dalam bentuk jpeg. Sedangkan bagian tengah tidak mempunyai banyak warna sehingga format gif merupakan pilihan yang baik untuk mengurangi ukuran file.
Bagian 4 tidak perlu saya save dalam bentuk gambar karena dapat diwakili dengan membuat baris table dengan background warna seperti tersebut. Bagian yang perlu untuk disimpan dalam file gambar adalah icon rumah disamping tulisan “home”.
Sedangkan nomor 5 dan 6 kita hanya perlu membuat gambar dengan ukuran panjang 23x1 pixel kemudian menjadikannya background dari table.
Berikut ini rancangan table yang akan digunakan:
Disini kita membuat table dengan tiga kolom (lihat warna merah) kemudian kolom tengah kita isi table baru dengan pembagian antar cellnya seperti gambar hijau. Hal ini dilakukan untuk menghindari pecahnya tampilan jika kita menggunakan satu table dengan banyak cell yang tidak simetris. Dengan membaginya dengan table baru di dalam table, maka jika salah satu sel bertambah ukurannya, maka tidak akan mengganggu table yang lain.
Sebelum memulai bekerja, ada baiknya kita review ulang mengenai bagaimana mengubah property table menggunakan property inspector. Anda bisa membaca pada bagian pertama (berkenalan dengan dreamweaver)
kita definisikan situs dalam folder tersebut sebagaimana cara yang sudah kita pelajari pada bab sebelumnya.
1. Buatlah table dengan tiga kolom dengan ukuran 770px tepat seperti panjang desain yang kita buat di photoshop. Tabel yang kita buat harus mempunyai border=0, cellpadding=0, cellspacing=0 sehingga tidak akan kelihatan jika dilihat dalam browser.
2. Klik pada kolom pertama kemudian ubah panjang kolom tersebut menjadi sama seperti gambar “header left” yaitu 23 pixel. Kemudian isi backgroundnya dengan gambar “header_left”.
3. Sekarang ulangi langkah nomor 2 untuk kolom paling kiri. Gunakan gambar “header_left” untuk backgroundnya.
4. Sekarang kita masukkan table baru pada kolom yang ditengah. Klik pada kolom di tengah kemudian masukkan table dengan width 724px. Table tersebut mempunyai properties seperti di bawah ini: Row = 3, Column = 3, Border=0, Left padding = 0, Right padding=0
5. sekarang kita akan mengisi masing-masing kolom pada baris satu dengan gambar-gambar yang sudah disediakan. Isi kolom kiri dengan “header1.jpg” kemudian kolom tengah dengan “header2.gif”, dan kolom kanan dengan “header3.jpg”. Nah, kini tampilan header sudah selesai. Kita tinggal meletakkan table tampilan tersebut tepat di tengah tampilan. Caranya dengan mengubah align dari table paling luar menjadi “center”. Untuk menyeleksi table bagian luar kita bisa menggunakan bantuan tag selector sebagaimana gambar dibawah hanya kita tinggal klik sembarang di kolom. Kemudian kita pilih tombol
paling kiri.
6. Sekarang kita akan menggabungkan tiga kolom pada baris ke dua table tersebut. Caranya seleksi ketiga kolom tersebut. Tekan control terus klik pada cell yang diinginkan. Kemdian tekan icon yang ditunjukkan oleh tanda panah.
7. Ubah warna background baris tersebut menjadi #A3ADA2 anda bisa mengisikan langsung angka tersebut dalam kolom warna seperti yang ditunjukkan gambar di bawah. Kemudian ubah horizontal alignment-nya menjadi right.
8. Secara umum tampilan header kita telah selesai, kita tinggal mengisi bagian text. Silahkan isi text seperti tampilan yang diinginkan pada baris kedua bagian table yang dalam. Seperti ditunjukkan oleh gambar. Jangan lupa memasukkan juga icon home yang sudah disediakan.
OK untuk sementara bagian header selesai. Masalah warna dan jenis font kita setting nanti. Sekarang kita beranjak ke bagian body. Bagian ini akan sedikit rumit.
Pertama kita bagi bagian body tersebut menjadi seperti bagian di bawah:
Gambar di atas memperlihatkan pembagian dari gambar. Masing-masing warna garis di atas dapat dianggap sebagai calon table yang akan kita buat. Berarti nanti kita akan buat tiga table. Dari situ kira mendapat gambaran tentang gambar mana yang bisa dijedikan background dan bagian mana yang harus disimpan dalam bentuk gambar utuh.
Sekarang kita mulai membuat tabelnya.
1. Di bawah table yang kita buat sebelumnya, kita buat table yang mempunyai 5 kolom (perhatikan warna merah gambar di atas). Untuk bisa membuat table di bawah. Masukkan property table berikut: width=770px, cellpadding=0, cellspacing=0, boder=0.
2. Klik pada kolom 1, kemudian masukkan properties berikut ini: width=23px, background=”header_left.gif”.
3. klik kolom ke-dua kemudian ubah propertynya sebagai berikut: width=151, bgcolor=”#D2DCD1”, vertical alignment = top.
4. klik kolom ketiga, ubah propertynya jadi sebagai berikut: width=33px, background=”body3.gif”, vertical alignment = top. Kemudian isi kolom tersebut dengan gambar “body3img.gif”.
5. klik pada kolom 4 kemudian masukkan property sbb: width=540px, bgcolor=” F6F8F4”, vertical alignment = top.
6. klik pada kolom ke lima kemudian masukkan property sbb: width=23, background=”header_right.gif”.
Sekarang kita kerjakan bagian menu. Bagian menu tersebut terletak pada kolom ke dua pada table yang telah kita buat sebelumnya, sehingga kita klik terlebih dahulu kolom kedua tersebut sehingga nantinya kolom yang kita buat terletak di situ.
Untuk lebih jelasnya kita langsung aplikasikan cara di atas. Klik pada kolom kedua kemudian shift + enter terlebih dahulu.
1. Buat table dengan property: width = 151, bgcolor=”#C8D3C7”, column=2, rows=15, cellpadding = 0, cellspacing = 0.’
2. seleksi kolom ke dua, kemudian merger semua baris pada kolom tersebut, kemudian ubah bgcolor= DEE5DD. Masukkan image 1px.gif kemudian ubah widthnya menjadi 1px.
3. Klik pada kolom pertama baris paling atas kemudian isi dengan gambar headmenu.gif
4. Klik pada kolom pertama baris ketiga. Kemudian isi dengan property berikut: width=”150px”, bgcolor= DEE5DD. Kemudian isi baris tersebut dengan gambar 1px.gif. dengan begitu maka lebarnya akan berubah menjadi 1 px, mengkuti ukuran dari gambar yang kita masukkan.
5. Ulangi langkah nomer 4 untuk baris yang ganjil (5,7,9,dst).
6. klik pada baris ke dua, kemudian ubah horizontal alignmentnya menjadi right. Isi baris ini sesuai dengan menu yang disediakan.
7. Ulangi langkah nomor 6 untuk baris-baris genap.
Sekarang kita membuat table bagian kanan.
Klik pada kolom ke empat table yang berukuran 770 kemudian masukkan table dengan panjang 100% dengan 1 kolom dan 1 baris. Pada baris pertama isi dengan gambar “atasisi.gif” kemudian isi backgroundnya dengan gambar itu juga.
Tekan tab kemudian masukkan tulisan seperti yang ada di tampilan anda. Terserah anda ingin memasukkan tulisan apapun di situ. Masukkan juga gambar “isi.gif”
Sekarang anda mempunyai tampilan yang mirip dengan desain kita sebelumnya, hanya font dan peletakan isinya yang tidak sama. Anda tidak perlu merisaukan hal ini. Nantinya hal tersebut akan kita ubah tampilannya menggunakan beberapa cara.
Kita lanjutkan saja dengan membuat bagian footernya.
Di bagian footer kita hanya perlu membuat table dengan empat kolom dengan background=”footer.gif”. Kolom yang pertama berukuran 23 pixel dan mempunyai background “header_left.gif”.
Klik pada kolom kedua dan ubah panjangnya menjadi 10px
Klik pada kolom ke tiga kemudian ubah panjangnya menjadi 714px, dengan horizontal alignment = center.
Klik pada kolom ke empat kemudian ubah panjangnya menjadi 23px dan dengan background=header_right.gif.
Untuk bagian menunya, kita bisa masukkan sembarang link. Gunakan saja tanda “#” untuk mewakili link.
Sekarang pekerjaan anda akan tertampil seperti di bawah:
Hal terakhir yang kita lakukan adalah mengubah jenis font dan mengatur penempatanya. Ada dua cara yang bisa kita lakukan untuk mengubah gambar tersebut. Cara yang pertama adalah dengan menggunakan property inspector untuk mengubah property dari text. Caranya kita hanya tinggal memblok teks yang akan kita ubah kemudian kita ubah propertynya menggunakan property inspector. Pada desain di atas kita menggunakan jenis font Tahoma 11 px dengan ukuran 11 px. Di property inspector property tersebut tidak tertampil, maka kita harus menulis “Tahoma” pada jenis font dan mengubah ukurannya menjadi 2pt.
Jika diperlukan font bold, kita hanya perlu meng-klik tombol B saja.
Sedangkan cara yang berikutnya adalah dengan menggunakan CSS (Cascading Style Sheet). Dengan CSS kita bisa mengellompokkan settingan-settingan dari property font di atas pada tempat tersendiri bahkan pada file lain. Karena fleksibilitas dan kemudahannya, kita akan menggunakan cara ini untuk mengatur teks dan properties yang lain.
Bagian yang perlu dirubah untuk bisa memenuhi tampilan desain sebelumnya adalah sbb:
Sekarang kita akan men-setting teks yang telah kita buat menggunakan CSS. Hal pertama yang dilakukan adalah mebuat CSS terlebih dahulu. Caranya adalah dengan menggunakan panel css. Ditunjukkan pada gambar di bawah:
Untuk membuat css klik pada icon yang ditunjukkan oleh tanda panah
setelah anda klik maka akan muncul jendela dialog seperti di bawah:
Gambar Kotak dialog pembuatan css
Kotak nama digunakan untuk menentukan nama dari elemen css yang nantinya kita load dalam desain kita.
Pada bagian type terdapat 3 pilihan, yaitu
Make custom style sheet
Digunakan apabila kita ingin membuat konfigurasi style baru.
Redefine HTML Tag digunakan apabila kita langsung ingin mengatur konfigurasi tampilan darji tag-tag html kita. Sehingga setelah kita buat css untuk tag
, maka dalam html nantinya setiap tag
akan diaplikasikan konfigurasi tampilan yang kita definisikan dalam css tadi
Use CSS Selector digunakan apabila kita ingin memasukkan atau memodifikasi tampilan link.
Bagian Define in digunakan untuk menentukan apakah css kita nantinya dibuat dalam html itu sendiri (dalam elemen head) ataukan dipisah ke file lain.
Sekarang kita akan memperbaiki tampilan situs kita sebelumnya menggunakan css. Beberapa property yang kita atur adalah:
1. Bagian tag body mempunyai property : semua margin = 0, dan tidak mempunyai padding, sehingga tampilan kita akan berhimpit ke batas atas kanvas browser.
2. Bagian link menu mempunyai jenis font Tahoma bold, jika mouse dilewatkan, warna font akan berubah menjadi merah.
3. Bagian isi (yaitu tiap paragrafnya) sedikit menjorok ke kanan sekitar 10 pixel.
4. Bagian link pembantu (kanan atas) mempunyai property warnanya putih, jenis font verdana 10px, dan jika mouse dilewatkan akan berubah menjadi hitam.
Sekarang kita mulai membuat CSS untuk memenuhi criteria yang saya sebutkan di atas. Ikutilah langkah-langkah berikut:
Sekarang kita buat css untuk mengatur elemen body.
1. Klik pada “New CSS Style” pada bagian kanan bawah panel design kemudian jendela dialog akan muncul. Pilih pada “redefine html tag” kemudian klik pada dropdown dan pilih . Maka jendela baru akan muncul.
Kotak dialog untuk memasukkan style.
Perhatikan juga pada bagian “Define In” saya memilih This Document Only. Hal tersebut berarti Style kita dikelompokkan pada elemen head dokumen kita. Setelah kita klik OK, kotak dialog di bawah akan muncul:
Dalam Kotak Dialog ini kita memilih property apa saja yang ingin kita masukkan
2. Pilih pada Background kemudian masukkan #374948 pada kotak Background Colornya.
3. Pilih pada box kemudian masukkan angka 0 pada margin dan padding. Pastikan checkbox same for all tercentang. Klik apply, perhatikan perbedaannya. Gini tampilan table yang kita buat berhimpit pada bagian atas. Hal tersebut karena kita mengatur property dari body yang secara default mempunyai margin dan padding sekarng tidak (margin=0 padding=0).
Sekarang masuk ke bagian link menu (bagian kiri). Pada bagian menu tersebut berarti kita akan mengatur tampilan dari link. Untuk membuatnya silahkan ulangi langkah ke-satu di atas, namun dengan property seperti yang ditunjukkan gambar berikut:
1. Klik pada “New CSS Style”
Pilih Use CSS Selector Untuk mengatur tampilan link
Jika anda memilih Use CSS Selector maka anda akan menjumpai tiga jenis css yang bisa diaplikasikan ke link, yaitu:
A:link Digunakan untuk mengubah tampilan link
A:visited Digunakan untuk mengubah tampilan link yang telah dikunjungi
A:hover Digunakan untuk mengubah property link ketika cursor melewatinya
A:active Digunakan untuk mengubah property link ketika kita mengkliknya.
Dari sini masukkan property masing-masing jenis style link di atas.
Berikut ini property-property yang saya masukkan ke dalam masing-masing jenis di atas:
Untuk a:link :
Untuk a:visited:
Untuk a:hover
Untuk a:active
Nah sekarang tampilan setiap link akan memenuhi CSS yang kita buat. F12 untuk melihat aksinya
Perhatikan bahwa Style yang kita buat sebelumnya tersebut mempunyai efek pada semua tag link yang ada dalam dokumen, padahal jika kita melihat desain yang kita buat sebelumnya, pada bagian link pembantu kanan atas linknya berwarna putih. bagaimana membuat link yang berbeda tersebut adalah dengan membuat custom style sheet untuk link di atas. Kita tidak perlu repot-repot mengulangi langkah-langkah seperti sebelumnya. Kita hanya perlu memodifikasi scriptnya secara langsung. Hal ini dirasa jauh lebih efisien jika dibandingkan dengan membuat css baru satu per satu.
Sekarang masuklah ke tampilan code kemudian perhatikan dalam elemen terdapat script sebagai berikut:
Nah script di atas adalah script CSS yang sudah kita buat sebelumnya. Sekarang kita akan membuat css sendiri untuk bagian link kanan atas.
Siahkan copy paste script link yang ada di atas kemudian ubah scriptnya seperti di bawah:
Sekarang anda sudah membuat style khusus untuk link kanan atas. Yang kita lakukan sesudahnya adalah memanggil code CSS yang kita buat tersebut ke dalam link pembantu. Caranya adalah:
Klik pada salah satu link pembantu kemudian dengan code selector klik pada tag
kemudian aplikasikan style tersebut dengan memilih css yang sudah kita buat sebelumnya dalam property inspector perhatikan gambar di bawah:
Sedangkan kalau kita lihat pada bagian isi, tulisannya masih dalam bentuk standart. Kita ingin mengubahnya menjadi Tahoma 11 px. Perhatikan juga dalam isi tersebut mempunyai beberapa paragraph. Untuk mempersingkat pekerjaan kita bisa mengaplikasikan style baru pada tag paragraph .
Silahkan buat style baru untuk P:
Pilih redefine HTML tag dan pilih p
Masukkan property font
Masukkan property box
Klik apply dan kemudian OK. Maka sekarang tampilan anda akan terlihat seperti berikut ini:
Hal terakhir yang kita lakukan adalah mengubah align dari semua table dasar menjadi center.
Sedangkan bagian link kiri anda lihat masih berhimpit pada table. Anda bisa menggunakan karakter spasI ( ) untuk membuatnya lebih menjorok ke kiri.
|
