Anda di halaman 1dari 11

TUTORIAL 7 JAM BISA DESAIN WEBSITE PLUS IMAGE DAN BANNER

║║ ║║ ║║ ║║ ║║ ║║ ║║ ║║ ║║ ║║ ║║ ║║ ║║ ║║

Pembahasan Pembuatan Desain Website Secara Cepat dan Mudah.
1

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. prophet Muhammad SAW and my family dan semua yang mendukung terbuatnya ebook tutorial singkat ini.KATA PENGANTAR Puji syukur kepada yang Maha Pencipta Allah SWT. Wassalam. Ebook ini sangatlah mudah dipahami karena penerangannya dilampiri dengan visual gambar dan software yang mendukung. 2 . Dalam ebook tutorial ini menerangkan pembuatan desain website dengan cepat dan mudah untuk siapa saja yang mau mencoba membuat desain website. Team Desain.

setelah terinstal masukkan kode registry nya di menu help. registry code. Instal program Web Page Maker V2. Kita mulai dari menu insert ( sambil buka program ). insert. 1. arrange dan help. Close program dan open lagi. maka kode-kode HTML tersebut akan tersusun secara otomatis ! Tampilan program WMP : ( gambar 1) Gambar 1 1. Mengapa kita menggunakan Web Page Maker ? Web Page Maker adalah salah satu program untuk desain website yang paling mudah sekali diantara program desain lainnya. Menu terdiri dari : file. edit. tidak perlu mengetik kode-kode HTML cukup hanya menyusun posisi gambar dan tulisan biasa.0 yang sudah anda download. 1. klik insert ! akan tampil gambar sbb: ( gambar 2 ) 3 . dengan mengklik icon setupnya. Pengenalan Menu. format. setelah selesai semua.PEMBAHASAN DASAR WEB PAGE MAKER Metode : Ikuti langkah-langkahnya + Praktek.1. page. INSERT.

menu dll. seperti tampilan di word office. maka tampilannya sbb: ( gambar 3 ) Gambar 2 Double klik pada kotak tersebut maka akan tampil kotak form untuk tulisan dan menu pengaturan tulisan . Langsung klik saja Text. yang nantinya berfungsi untuk isi tulisan halaman website.Kita mulai saja dari bagian yang langsung untuk mendesain website. INSERT berikut fitur-fiturnya: Klik Text. anda bisa isi tulisan apa saja sesuai dengan website yang anda akan buat ! ( lihat Gambar 4 ) Gambar 3 4 .

tinggal seret dan tarik….( drag and drop ) Atau seperti ini ! 5 .Gambar 4 Tampilannya atur sesuai kebutuhan website anda ! Bisa seperti ini.

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. anuimasi gif. RM dll ). mp3 dll) Pengaturan Link di Program WEB PAGE MAKER sbb: 6 . 2. Link yang menuju halaman lain dalam situs yang lain. 4. jpg. Link yang menuju kebagian tertentu (bookmark) dalam halaman yang berbeda.Untuk membuat link dalam suatu tulisan. Link yang menuju ke homepage (halaman pertama) dari sebuah situs. 5. 3. 6. ( lihat gambar. seperti file gambar. Link yang mengarah ke suatu file yang bisa ditampilkan dalam browser. rar. bmp dll.com/folderfile/namafile (exe. Contoh LINK DOWNLOAD : http://namawebanda. Link yang menuju halaman lain dari situs yang sama. 7. 4 ) Berdasarkan Lokasi tujuan LINK dapat dibedakan atas: 1. seperti file EXE. file audio ( MP3. Link yang mengarah ke suatu file yang tidak ditampilkan dalam browser. Link yang menuju kebagian tertentu (bookmark) dalam halaman yang sama. file kompresi ZIP atau RAR. file video dan lain-lain atau yang disebut DOWNLOAD.

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

8 . Berupa kotak-kotak digunakan sesuai keperluan desain anda. Untuk memperlebar.2-IMAGE. gunakan tombol Ctrl + pilh anak panah. Shape. 3.6 adalah tampilan di menu Insert. ( sambil buka programnya ya…! ) Nb. Untuk keperluan menu-menu yang dibutuhkan. 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. berupa bar dan dll yang bisa kita gunakan sesuai kebutuhan website. Bisa digabungkan dengan text maupun image. perpanjang atau memendekkan image gunakan tombol Shift + anak panah. dan juga dari file library program WMP yang telah disediakan. Untuk penggeseran yang lebih akurat pada image maupun posisi text. 4. Gambar 6 Gambar. Navigation Bar.

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

. untuk gambar dibawah/pembatas dibawah (footer) ambil dari image from library bawaan WPM ! Insert juga Navigation Bar untuk membuat menu.Ctrl +A untuk mengcopy seluruh data yang dapat disalin kehalaman lain. 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. kecuali untuk kode atau script yang di inset melalui HTML Code or Script Code seperti room chatting. ulangi lagi dan preview lagi. .sampai sesuai dengan yang diinginkan. ada sedikit pengeditan manual untuk link gambar. audio dan sejenis disesuaikan dengan nama website kita yang sudah register. Buat halaman baru ! File → New Site. Bagaimana hasilnya? Kalau belum sesuai. file-file animasi.Setelah tersave di harddisk file-file HTMLnya.Setelah selesai membuat satu halaman dan ingin dilanjutkan/diedit lagi.. preview untuk melihat hasilnya! Bebaskan imajinasi anda ! kalau belum sesuai. Atur posisinya sampai mendapat hasil yang pas. . yang free maupun yang berbayar.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.halaman dll. 2. Pilih gambar dari harddisk anda untuk gambar header (gambar atas).. gunakan shape untuk pembatas kiri dan kanan. kemudian Publish (F4) pilih saja local direktori untuk di save di harddisk.save as ! Apabila telah selesai seluruh halaman yang kita buat… save as. diedit lagi dan preview. . untuk melihat reviewnya harus online walaupun file yang sedang kita buat belum terupload.Untuk penulisan nama-nama file dalam WPM gunakan huruf kecil semua dan kalau terdiri dari beberapa kata. pilih jenis tombol navigasinya atur posisinya sebagus mungkin! Insert juga text ! Isikan dengan tulisan apa saja dengan 3 bagian. 10 . tampilan jam dll. . sambung dengan _ (underscore) . PRAKTEK 1.WPM dapat dikerjakan secara offline dan langsung dapat di review hasilnya. Buka file baru dengan menggunakan template bawaan WPM ! File → New Site From Template. atur posisinya sesuai gambar yang hapus tadi ! Kemudian klik PREVIEW (F5). buku tamu.terus sampai berhasil Catatan: . silahkan anda coba kutak-katik dan terus praktekkan ! Semuanya tersedia dalam Menu Web Page Maker yang lengkap dan sangat gampang.

Favicon adalah gambar/animasi yang berada disebelah kiri dari suatu alamat website.com/animated_favicon1. sbb : <img src="http://namawebanda.com/favicon. siapkan sebuah gambar dengan ukuran yang sama panjang lebarnya kunjungi salah satu website favicon generator. upload file dan klik generate favicon ! download filenya ! Anda juga bisa edit untuk variasi atau menggunakan gambar-gambar yang ada di gallery website tersebut. Untuk membuatnya.! Silahkan coba dan praktekkan ! TIPS MEMBUAT FAVICON.webs.gif"/> </head> Untuk kode favicon ini copy-paste secara manual ke file HTML yang dibuat dengan WPM.html-kit. terdapat 2 file gambar yaitu favicon.</title> Contoh: <head> <title>Membuat Favicon</title> <link rel="icon" type="image/gif" href="http://namaweb.. Setelah file terdownload lalu extract. Good Luck ! 7jambisadesainwebsite.gif" border=0 width=22 height=22>. pilih salah satu. diantaranya : www.com Sahru99 11 . Dan peletakan kodenya di file HTML sbb: Berada di antara tag <head>……</head> dan dibawah <title>….gif.ico dan animated favicon.gif" border=0 width=22 height=22> Tambahkan nama website anda pada link tersebut.Contoh : File di harddisk sbb: <img src="images/logo.com/images/logo. File-file siap di upload.