TUTORIAL 7 JAM BISA DESAIN WEBSITE PLUS IMAGE DAN BANNER

Pembahasan Pembuatan Desain Website Secara Cepat dan Mudah.

1

KATA PENGANTAR Puji syukur kepada yang Maha Pencipta Allah SWT, prophet Muhammad SAW and my family dan semua yang mendukung terbuatnya ebook tutorial singkat ini. Dalam ebook tutorial ini menerangkan pembuatan desain website dengan cepat dan mudah untuk siapa saja yang mau mencoba membuat desain website. Ebook ini sangatlah mudah dipahami karena penerangannya dilampiri dengan visual gambar dan software yang mendukung. Mudah-mudahan ebook ini dapat membantu bagi siapa saja yang ingin mencoba desain website dan akhirnya hanya kritikan dan saran apabila banyak kekekurangan didalam tutorial ini. Wassalam,

Team Desain.

PEMBAHASAN DASAR WEB PAGE MAKER Metode : Ikuti langkah-langkahnya + Praktek. 1. Instal program Web Page Maker V2.0 yang sudah anda download, dengan mengklik icon setupnya, setelah terinstal masukkan kode registry nya di menu help, registry code, Close program dan open lagi. Mengapa kita menggunakan Web Page Maker ? Web Page Maker adalah salah satu program untuk desain website yang paling mudah sekali diantara program desain lainnya, tidak perlu mengetik kode-kode HTML cukup hanya menyusun posisi gambar dan tulisan biasa, setelah selesai semua, maka kode-kode HTML tersebut akan tersusun secara otomatis ! Tampilan program WMP : ( gambar 1)

Gambar 1

1.1. Pengenalan Menu. Menu terdiri dari : file, edit, page, insert, format, arrange dan help. 1. INSERT. Kita mulai dari menu insert ( sambil buka program ), klik insert ! akan tampil gambar sbb: ( gambar 2 )

Kita mulai saja dari bagian yang langsung untuk mendesain website, INSERT berikut fitur-fiturnya: Klik Text, yang nantinya berfungsi untuk isi tulisan halaman website, menu dll. Langsung klik saja Text, maka tampilannya sbb: ( gambar 3 )

Gambar 2

Double klik pada kotak tersebut maka akan tampil kotak form untuk tulisan dan menu pengaturan tulisan , seperti tampilan di word office, anda bisa isi tulisan apa saja sesuai dengan website yang anda akan buat ! ( lihat Gambar 4 ) Gambar 3

Gambar 4

Tampilannya atur sesuai kebutuhan website anda ! Bisa seperti ini, tinggal seret dan tarik.( drag and drop )

Atau seperti ini !

Untuk membuat link dalam suatu tulisan, seperti read moreatau klik disini ! atau link lainnya hanya menyorot saja bagian tulisan yang akan di jadikan link dan klik lambang link yang dilingkari warna merah. ( lihat gambar. 4 ) Berdasarkan Lokasi tujuan LINK dapat dibedakan atas: 1. Link yang menuju ke homepage (halaman pertama) dari sebuah situs. 2. Link yang menuju halaman lain dari situs yang sama. 3. Link yang menuju halaman lain dalam situs yang lain. 4. Link yang menuju kebagian tertentu (bookmark) dalam halaman yang sama. 5. Link yang menuju kebagian tertentu (bookmark) dalam halaman yang berbeda. 6. Link yang mengarah ke suatu file yang bisa ditampilkan dalam browser, seperti file gambar, anuimasi gif, jpg, bmp dll. 7. Link yang mengarah ke suatu file yang tidak ditampilkan dalam browser, seperti file EXE, file kompresi ZIP atau RAR, file audio ( MP3, RM dll ), file video dan lain-lain atau yang disebut DOWNLOAD. Contoh LINK DOWNLOAD : http://namawebanda.com/folderfile/namafile (exe, rar, mp3 dll) Pengaturan Link di Program WEB PAGE MAKER sbb:

Gambar 5 1. A Page in My Site ( halaman dalam situs yang sama ), pilih halaman URLnya., (isi dengan pilihan file HTML-nya) target .atur sesuai keingingan anda! a. Tanpa isi target, langsung menuju ke halaman HTML pada jendela yang sama. b. _blank, langsung menuju ke halaman HTML pada jendela yang lain (baru) c. _parent, langsung menuju ke halaman HTML induk. d. _self, ke jendela yang sama dan posisi tempat yang sama. e. _top, ke jendela yang sama dengan posisi diatas. 2. Another Website ( halaman kesitus yang lain ), pilih URL, target _blank. 3. An Email Address, menuju ke email address, mailto: ( isi dengan email ). 4. Link menuju Ftp tertentu. Praktekkan sendiri..untuk melihat hasil sesuai dengan kebutuhan anda ! Begitu juga untuk pembuatan link dengan gambar, sama pengaturannya dengan pembuatan link dengan tulisan.

2-IMAGE.

Gambar 6 Gambar.6 adalah tampilan di menu Insert, untuk image (gambar yang disorot) bisa diambil dari file image harddisk yang berupa image/gambar yang telah kita buat sendiri bisa untuk tampilan header ( image atas ) atau tampilan image/gambar yang dibutuhkan, dan juga dari file library program WMP yang telah disediakan, berupa bar dan dll yang bisa kita gunakan sesuai kebutuhan website. ( sambil buka programnya ya! ) Nb. Untuk penggeseran yang lebih akurat pada image maupun posisi text, gunakan tombol Ctrl + pilh anak panah. Untuk memperlebar, perpanjang atau memendekkan image gunakan tombol Shift + anak panah. 3. Shape. Berupa kotak-kotak digunakan sesuai keperluan desain anda. Bisa digabungkan dengan text maupun image. 4. Navigation Bar. Untuk keperluan menu-menu yang dibutuhkan.

5. Horisontal Line. Garis horisontal, jika diperlukan tinggal diatur posisinya saja. 6. Table. Atur row dam kolom nya sesuai kebutuhan jika diperlukan. 6. Form. Kolom data untuk pengisian, berhubungan dengan proram php, tutorial lebih lanjut.. atau anda bisa search di Google. 7. Object. Untuk menyisipkan file video atau musik. 8. Flash movie. File-file swf, biasanya untuk banner atau yang lainnya. 9. Marquee. Text berjalan, atur sesuai kebutuhan. 10. Rollover Image. Untuk tombol dengan menggunakan gambar, siapkan 2 gambar yang sama dengan warna yang berbeda. 11. Ready to use java script. Script-script yang sudah ada di WPM, gunakan sesuai kebutuhan website anda. 12. Html code or script code. Untuk menyisipkan kode HTML atau script lainnya dari website penyedia jasa gratisan , diantaranya seperti untuk room chatting (www.shoutmix.com), buku tamu (www. bravenet.com), social bookmark (www.addthis.com), hit counter (www.histats.com) atau yang lain seperti kalender, jam dll yang banyak disediakan secara cuma-cuma.kreatif search di Google okeh ! Catatan : Walaupun HTML merupakan dasar web statis, dengan adanya jasa gratisan seperti room chatting atau buku tamu atau yang lainnya, tetap bisa berintraksi dengan pengunjung website melalui jasa gratisan tersebut. 12. iFrame. Frame gambar, atur sesuai kebutuhan jika digunakan. 13. Bookmark. Mengaitkan suatu halaman dengan halaman lainnya. Dari menu INSERT ini sebuah halaman page website dapat kita buat, untuk fitur yang lainnya seperti judul website, pengarang, penempatan keywords dan deskripsi juga posisi

halaman dll, silahkan anda coba kutak-katik dan terus praktekkan ! Semuanya tersedia dalam Menu Web Page Maker yang lengkap dan sangat gampang.

PRAKTEK 1. Buka file baru dengan menggunakan template bawaan WPM ! File New Site From Template, pilih template apa saja ! Rubah isi textnya dengan cara double click pada area textnya dan ketikan apa saja dan atur posisinya sesuai selera anda ! Hapus salah satu file gambarnya dengan cara diklik gambarnya dan tekan tombol delete pada keyboard untuk menghapusnya kemudian ganti dengan gambar yang ada di harddisk anda melalui menu INSERT, atur posisinya sesuai gambar yang hapus tadi ! Kemudian klik PREVIEW (F5). Bagaimana hasilnya? Kalau belum sesuai, diedit lagi dan preview..sampai sesuai dengan yang diinginkan. 2. Buat halaman baru ! File New Site. Pilih gambar dari harddisk anda untuk gambar header (gambar atas), gunakan shape untuk pembatas kiri dan kanan, untuk gambar dibawah/pembatas dibawah (footer) ambil dari image from library bawaan WPM ! Insert juga Navigation Bar untuk membuat menu, pilih jenis tombol navigasinya atur posisinya sebagus mungkin! Insert juga text ! Isikan dengan tulisan apa saja dengan 3 bagian, preview untuk melihat hasilnya! Bebaskan imajinasi anda ! kalau belum sesuai, ulangi lagi dan preview lagi..terus sampai berhasil Catatan: - Untuk memilih beberapa data (gambar atau text ) untuk di copy kehalaman lain bisa kita gunakan Hold Shift + klik pada data-data tersebut atau untuk menggeser beberapa gambar sekaligus. - Ctrl +A untuk mengcopy seluruh data yang dapat disalin kehalaman lain. - Untuk penulisan nama-nama file dalam WPM gunakan huruf kecil semua dan kalau terdiri dari beberapa kata, sambung dengan _ (underscore) - WPM dapat dikerjakan secara offline dan langsung dapat di review hasilnya, kecuali untuk kode atau script yang di inset melalui HTML Code or Script Code seperti room chatting, buku tamu, tampilan jam dll, untuk melihat reviewnya harus online walaupun file yang sedang kita buat belum terupload. Atur posisinya sampai mendapat hasil yang pas. - Setelah selesai membuat satu halaman dan ingin dilanjutkan/diedit lagi..save as ! Apabila telah selesai seluruh halaman yang kita buat save as, kemudian Publish (F4) pilih saja local direktori untuk di save di harddisk. - Setelah tersave di harddisk file-file HTMLnya, ada sedikit pengeditan manual untuk link gambar, file-file animasi, audio dan sejenis disesuaikan dengan nama website kita yang sudah register, yang free maupun yang berbayar.

10

Contoh : File di harddisk sbb: <img src="images/logo.gif" border=0 width=22 height=22> Tambahkan nama website anda pada link tersebut, sbb : <img src="http://namawebanda.com/images/logo.gif" border=0 width=22 height=22>. File-file siap di upload..! Silahkan coba dan praktekkan !

TIPS MEMBUAT FAVICON. Favicon adalah gambar/animasi yang berada disebelah kiri dari suatu alamat website. Untuk membuatnya, siapkan sebuah gambar dengan ukuran yang sama panjang lebarnya kunjungi salah satu website favicon generator, diantaranya : www.html-kit.com/favicon, upload file dan klik generate favicon ! download filenya ! Anda juga bisa edit untuk variasi atau menggunakan gambar-gambar yang ada di gallery website tersebut. Setelah file terdownload lalu extract, terdapat 2 file gambar yaitu favicon.ico dan animated favicon.gif, pilih salah satu. Dan peletakan kodenya di file HTML sbb: Berada di antara tag <head></head> dan dibawah <title>.</title> Contoh: <head> <title>Membuat Favicon</title> <link rel="icon" type="image/gif" href="http://namaweb.com/animated_favicon1.gif"/> </head> Untuk kode favicon ini copy-paste secara manual ke file HTML yang dibuat dengan WPM. Good Luck !

7jambisadesainwebsite.webs.com Sahru99

11