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.

2
 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 )

3
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

4
 Gambar 4

Tampilannya atur sesuai kebutuhan website anda !

Bisa seperti ini, tinggal seret dan tarik….( drag and drop )

Atau seperti ini !

5
Untuk membuat link dalam suatu tulisan, seperti read more…atau 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:

6
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.

7
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.

8
 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

9
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