Anda ingin memberikan warna baru pada web/blog Anda? Ngapain cari gambar buat tombol navigasi di Internet kalo kita bisa bikin sendiri? Tulisan singkat berikut akan memandu Anda membuat tombol dengan singkat dan cepat. Tidak perlu pemahaman mendalam terhadap program Photoshop yang saya pakai di sini. Cukup Anda ikuti tutorialnya, selanjutnya kreativitas ada di tangan Anda..
- Buat Layer Baru.
- Gunakan Rounded Rectangle Tool, ganti fill pixel di bagian atas dan buat kotak memanjang
- Edit/Free transform, atau tekan Ctrl+T. Dengan menahan tombol Shift, click pada dua titik pojok atas kotak
- Dobel Klik pada layer untuk membuka window Layer Style, tentukan nilai seperti gambar di bawah.
Drop Shadow
Bevel and Emboss
(dalam Bagian Color Overlay tentukan warna menjadi 99ffff)
- Selanjutnya, Saya kopi layer utama ke sebuah layer baru, dan dengan menggunakan efek saya ubah layer tersebut menjadi drop shadow ke arah samping, plus sedikit Gaussian Blur. Voila! Lihat hasil akhirnya..
Anda masih tertarik dengan button yang lain? Baca juga tulisan selanjutnya, yakni Membuat button dengan tekstur plastik menarik.
Semoga memberi inspirasi!
]]>
“Saya punya sebuah web lama dengan bahasa HTML Native dengan 3 Frameset. Dulu tampilan ini bagus ditampilkan pada monitor 14″ dan 15″. Tapi sekarang tampilannya terlihat semrawut jika dilihat dari monitor 17″ ke atas. Saya tahu hal ini muncul karena perbedaan resolusi screen monitor. Web tersebut dioptimalkan untuk monitor dengan lebar 1024px, sehingga jika ditampilkan pada monitor dengan lebar 1280 tampilannya jadi aneh. Saya kepikiran membuat web ini tampil dengan ukuran 1024 dengan alignment=center alias rata tengah, bagaimana cara melakukannya?”
Itu tadi permasalahan yang pernah saya alami saat meng-online-kan konten halaman web HTML karya bareng rekan-rekan ini. Setelah konsultasi dan baca-baca beberapa artikel, saya temukan dua cara sederhana. Jika Anda punya masalah yang sama, silakan ikuti langkahnya berikut:
1. Dengan memanipulasi halaman web.
Salah satu forum menyarankan untuk menambahkan baris perintah berikut:
<frameset rows=”*,400,*” frameborder=”NO” border=”0″ framespacing=”0″>
<frame src=”banner.htm” name=”topFrame” scrolling=”NO” noresize >
<frameset cols=”*,700,*” frameborder=”NO” border=”0″ framespacing=”0″>
<frame src=”menu.htm” name=”leftFrame” scrolling=”NO” noresize>
<frame src=”about: blank” name=”mainFrame”>
<frame src=”beranda.htm” name=”rightFrame” scrolling=”NO” noresize>
</frameset>
<frame src=”footer.htm” name=”bottomFrame” scrolling=”NO” noresize>
</frameset>
Keterangan:
mainFrame adalah frame yang berada di tengah. Di sinilah konten utama web saya.
topFrame dan bottomFrame berada di posisi paling atas dan paling bawah web.
leftFrame dan rightFrame bertugas mengetengahkan posisi mainFrame dari kedua sisi.
Pada contoh di atas, Anda perhatikan bahwa semua file source/rujukan untuk tiap frame berupa blank.htm kecuali frame utama yang berisi konten sebenarnya.
mainFrame sendiri berupa halaman kosong. Anda dapat memanggil file tersendiri atau menempatkan iframe di sana. Jika Anda memilih cara ini berarti anda akan memposisikan iframe dalam frameset yang telah kita manipulasi.
2. Dengan Menggunakan IFrame.
Sebenarnya fungsi MainArea dalam Frameset adalah untuk menampilkan konten IFRAMES. Namun saya ingin keseluruhan Frameset terletak pas di tengah, bukan hanya konten utamanya saja. Frameset saya berisi tiga halaman yakni; Area Banner-Atas, area Navigasi Kiri, dan Area Target Utama. Banner Atas dan Navigasi kiri merupakan konten statis, hanya dipanggil sekali dan selanjutnya hanya konten Target Utama yang berubah sesuai dengan navigasi yang dipilih.
Untuk mengetengahkan seluruh Frameset, buatlah index.htm dan sisipkan baris perintah berikut ini diantara kode <body> dan </body>.
<div style=”text-align:center; display:block”>
<iframe src=”http://www.websiteanda.com” width=”1024px” height=”768px”></iframe>
</div>
Masukkan alamat URL Anda pada www.websiteanda.com. Atau jika Anda lebih suka, Anda dapat mengganti URL Iframe tersebut dengan halaman index frameset Anda. Sehingga kurang lebih tampilan hirarkinya akan tampak seperti berikut:
index.htm –> index2.htm (frameset) –> banner.htm, menu.htm, beranda.htm (file konten frameset)
Saya memilih dan merekomendasikan cara ini karena lebih mudah dan halaman web tampil dengan rata tengah persis seperti yang saya inginkan.
Silakan periksa sendiri hasilnya di sini.
Bagaimana dengan karya Anda?
Tulisan ini dikembangkan dari sini dan tutorial ini.
]]>
Tulisan singkat ini akan menyegarkan ingatan kita terhadap tiga jenis link atau hyperlink yang ada dalam kode HTML. Anda perlu mempelajari kode ini jika ingin ber-eksperimen lebih jauh terhadap halaman Friendster, Blog atau Wordpress Anda.
Tiga jenis link yang saya maksud adalah:
RELATIF:
Kode:
<a href=”../default.asp”>Home</a>ABSOLUT:
Kode:
<a href=”http://www.domainmu.com/default.asp”>Home</a>VIRTUAL:
Kode:
<a href=”/default.asp”>Home</a>
Masing-masing dari ketiga tipe link di atas memiliki kelebihan tersendiri. Link Relatif sangat tergantung pada path/lokasi file dimana dia ditempatkan. Misalnya dalam contoh di atas, Home akan berada di luar folder root website dan dengan mengklik link tersebut, Anda akan diarahkan satu tingkat ke atas menuju halaman depan/Home. Jika Anda menggunakan tipe link ini dan salah menempatkan, Anda akan menemukan kode Error 404 alias halaman tidak ditemukan
Link Absolut tidak terhubung dengan path/lokasi file dimana dia baerada. Link ini akan mengunci lokasi tujuan pada URL tertentu. Oleh karena itu link ini bebas dipakai dan ditempatkan di halaman manapun asal merujuk ke halaman yang valid. Misalnya, dengan mengklik contoh link di atas akan membawa Anda ke halaman Home website www.domainmu.com.
Link Virtual mirip sekali dengan Link Relatif dari segi ketergantungan pada path file. Dengan menambahkan tanda ‘/’ seperti dalam contoh di atas, Anda akan dibawa kembali ke root folder website. Dimanapun link ini ditempatkan dalam website, ia tetap akan dapat mengarahkan Anda ke halaman depan web Anda terlepas dari lokasi link tersebut ditempatkan.
Sekarang Anda sudah bisa tentukan, link jenis apa yang akan Anda pakai untuk web Anda, kan?
Tulisan ini dikembangkan dari sini
]]>
CSS atau Cascading StyleSheet telah dipakai secara luas untuk membuat pola tampilan web sehingga bisa ditata dengan apik dan mudah. Seringkali para coder atau pengembang web lebih suka mengedit sendiri tampilan web-nya dengan menulis secara manual file CSS ini. Namun sebenarnya sudah banak tool serbaguna untuk mempermudah proses coding yang cukup pelik.
Tool berikut ini sudah terbukti berguna jika Anda ingin mengembangkan web berbasis CSS.
Beberapa program berikut ini telah saya coba sendiri dan terbukti telah membantu meringankan pekerjaan saya. Berikut ini uraian lengkapnya..
Program pembuat Form
* PHP Form
* JotForm
* Form Assembly
* FormSmarts
Program pembuat Layout CSS
* Page Maker – The Generator Form v2.90
* CSS Rounded Box Generator
* Free CSS Template Code Generator
* Firdamatic
* CSS Creator
* Website Template Maker
* Scriptomizers
* QrONE CSS Designer
Framework CSS
Framework CSS merupakan rangkaian sistem yang diperuntukkan bagi para pengguna yang ingin mendapatkan kemudahan pengembangan dan kreasi web dengan menggunakan bahasa standar Cascading Style Sheet. Mirip seprti bahasa program dan skrip, Framework CSS yang biasanya mempaketkan file .css kedalam headernya ini telah menyediakan sejumlah pilihan untuk kepentingan desain dan membuat layout web.
* YAML
* Blueprint CSS
* Yahoo! UI Library CSS Foundation
* CleverCSS
* WYMstyle
* Schema Web Design Framework
Program pembuat Menu Navigasi
* CSS Menu Generator
* IzzyMenu
* List-O-Rama!
* List-O-Matic
* CSS Tab Designer
* Colly’s CSS rollover generator
Tool untuk membuat CSS
* Format CSS Online
* CSSTidy
* CSS Compressor
* Tabifier
* Icey CSS Compressor
* Online CSS Optimiser/Optimizer
* Online CSS Optimizer
Tool CSS Lain
* Online CSS Scrollbar Color Changer
* S5Easy: Create S5 Slideshows Easy Online
* Spanky Corners
* HTML and CSS Table Border Style Wizard
* CSSVista
Tulisan ini dikembangkan dari sini. Semoga bermanfaat.
]]>