Tutorial Membuat Template Website

Trik Mudah Membuat Template Website

Dalam membuat template website, setidaknya ada beberapa faktor utama yang harus dan mutlak dimiliki oleh setiap orang. Beberapa faktor itu antara lain memiliki pengetahuan terdahap program CSS, memiliki basic (x)html (dan lebih baik lagi jika Valid w3) dan faham Slicing di beberapa program editor seperti photoshop, fireworks, maupun image ready.
Cukup banyak memang yang harus kita kuasai. Tetapi bagaimana bila kita sama sekali tidak mempunyai backgound pengetahuan seperti yang sudah di sebutkan di atas ?
Untuk itu kali ini FastNcheap mau berbagi sedikit trik membuat template dengan software Artisteer 3. Program ini juga bukan program Freeware alias gratis. Untuk mendapatkan versi full versionnya ada bisa mencarinya sendiri informasinya di internet.
Jika anda sudah selesai meng-installnya, klik menu File > New, maka akan tampil beberapa pilihan  template yang digunakan untuk CMS berjenis apa saja (lihat gambar di bawah).

• Bila anda pengguna CMS Joomla pilihlah Joomla.
• Bila anda pengguna CMS WordPress pilihlah WordPress.
• Pengguna Drupal bisa memilih Drupal untuk Templatenya.
• Blogger juga bisa memilih type Blogger.
• Dan untuk template non CMS alias HTML anda bisa memilih Website or Blog.

Beberapa kemudahan yang dimiliki Artisteer:

• Ada banyak type template yang bisa digunakan.
• Pengaturan layout template bisa di atur sesuai kebutuhan.
• Banyak pilihan menu-menu untuk menambah disain template.
• Template bisa di atur sesuai kemauan penggunanya.
• Bisa mengatur Favorite Icon sendiri.

Kekurangan yang dimiliki Artisteer:

• Program komersial, untuk mendapatkan lisensinya harus membayar.
• Disain Layout hanya bergantung dengan apa yang sudah ada didalam Artisteer.
• Tidak bisa memasukkan file html untuk di audit menjadi template.

Untuk anda yang suka mengoprek-oprek CMS, software ini sangat cocok untuk di miliki. Untuk mencoba versi demo alias trialnya anda bisa langsung mendownloadnya di website resminya yang beralamat di http://www.artisteer.com, atau jika memang diperlukan anda juga bisa membeli versi professional dari software ini.
Selamat mencoba dan perkaya wawasan anda tentang teknologi dengan mengunjungi dan terus mengikuti update artikel di FastNCheap Blog.

CARA MEMBUAT VALIDASI FORM DENGAN DREAMWEAVER

 CARA MEMBUAT VALIDASI FORM DENGAN DREAMWEAVER

 

Form, atau yang dalam bahasa Indonesia dikenal dengan sebutan "formulir" adalah media penampung data yang akan dimasukkan ke dalam database. Form memudahkan user untuk mengisi data yang diperlukan (dalam kasus ini user mengisi data dalam sebuah website). Contoh form misalnya: form pendaftaran universitas, form kuis, form buku tamu, dan masih banyak contoh aplikasi penggunaan form lainnya.

Sebuah table dalam database biasanya membutuhkan satu atau lebih field dengan status "required", dimana user tidak bisa membiarkan kosong satu atau lebih kotak isian dalam sebuah form. Oleh karena itu validasi form mutlak diperlukan. Saat user tidak mengisi satu atau lebih text isian yang dibutuhkan, maka akan muncul pesan error dan data untuk sementara tidak diproses sampai user mengisi/membenarkan isiannya.

Pada dasarnya validasi form tersebut bisa dibuat dengan menggunakan java script. Jangan khawatir jika kamu tidak menguasai java script, dreamweaver menyediakan cara mudah membuatnya. Ikuti langkah-langkah berikut:

1.	Buka dreamweaver dan buat/sediakan form isian lengkap dengan tombol submit dan reset, seperti pada gambar berikut: atau masukkan script berikut untuk membuat form: <form id="form1" name="form1" method="post" action="proses.php"> <label>Nama <input type="text" name="nama" id="nama" /> </label> <p> <label>Alamat <input type="text" name="alamat" id="alamat" /> </label> </p> <p> <label>Email <input type="text" name="email" id="email" /> </label> </p> <p> <input name="submit" type="submit" id="submit" value="Submit" /> <input type="reset" name="reset" id="reset" value="Reset" /> </p> </form>
2.	Klik tombol "submit" > klik window > klik behavior > akan tampil kotak behavior di sebelah kanan layar kerja.
3.	Klik tanda "+" (tambah) di kotak behavior > klik "validate form" > akan muncul kotak dialog seperti berikut: - Bagian "Fields" untuk memilih field mana yang akan divalidasi - Bagian "Value" untuk menentukan apakah field tersebut harus diisi apa tidak - Bagian "Accept" untuk menentukan syarat isi field (anything: untuk memperbolehkan isian apapun; email address: untuk hanya memperbolehkan user mengisi alamat email; number: untuk hanya memperbolehkan user mengisi angka
4.	Dalam tutorial kali ini saya akan memvalidasi nama dan email, dimana nama harus diisi dan email harus diisi dengan alamat email yang valid. Untuk nama: pilih field "nama" > checklist "required" Untuk email: pilih field "email" > checklist "required" > pilih email address
5.	Bila sudah selesai, save dan cobalah tampilkan di browser (IE, firefox, opera, chrome, dsb). Coba biarkan kosong "nama" dan "alamat", dan isikan email dengan kata-kata (bukan alamat email), lalu tekan tombol submit > maka akan muncul dialog box yang mengatakan bahwa nama harus diisi dan email harus valid.
6.	Bila kamu cinta indonesia dan ingin mengubah pesan eror tersebut jadi berbahasa indonesia, caranya sangat mudah. di dreamweaver masuk ke bagian "code" dan cari script berikut di bagian head Ubahlah script di atas menjadi seperti berikut: dengan perubahan tersebut maka pesan eror yang muncul akan menjadi:

Bagaimana?.. Mudah kan..silahkan/monggo/mangga dicoba biar bisa. Ingat! "Practice makes perfect".

1 komentar:

MEMBUAT KALENDER WEBSITE SEDERHANA

 CARA MEMBUAT KALENDER WEBSITE SEDERHANA

Kali ini kita akan membuat sebuah kalender web sederhana, menggunakan html dan javascript. Tutorial ini terdiri dari 2 langkah singkat yang insyaAllah mudah untuk diikuti.

Tahap pertama:
Letakkan script berikut ini di bagian "<head>" halaman web kamu.
<style type="text/css">
.main {
width:200px;
border:1px solid black;
}
.month {
background-color:black;
font:bold 12px verdana;
color:white;
}
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
.days #today{
font-weight: bold;
color: red;
}
</style>
<script type="text/javascript" src="http://subhishine.freehostia.com/shine/files/basiccalendar.js">
</script>


Tahap 2:
Letakkan script berikut di bagian "<body>" file web kamu.


<script type="text/javascript">

var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year

document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script>

PENGENALAN DREAMWEAVER DAN LAYOUT

Karena banyaknya request dari sana sini dan situ aduh pokoknya dari mana - mana tentang web desain dengan Dreamweaver maka saya akhirnya melaunching tutorial Dreamweaver di ilmugrafis rubrik web desain...

Seperti kata Pak Patah eh salah itu nama tetangga saya :) maksudnya Kata PEPATAH "Tak kenal maka tak sayang" oleh karena itu alangkah baiknya bila kita menilik apa itu Dreamweaver?
DREAMWEAVER (dulu milik dari macromedia namun sekarang menjadi milik dari Adobe) adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG — What You See Is What You Get — dalam bahasa sansekerta artinya ( Apa yang kamu lihat akan menjadi seperti apa yang kamu inginkan) masih bingung ya intinya Kita tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs karena sudah disiapkan secara instant seperti membuat Table, Membuat Hyperlink, Memasukkan Gambar, termasuk memasukkan Flash Animasi, dll. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain. Mantab Bukan!!!


Gambar 1 . Tampilan LogoDreamweaver



Gambar 2 . Tampilan / Layout Dreamweaver


Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada gambar.
- LEMBAR KERJA DREAMWEAVER adalah tempat di mana Anda dapat membuat halaman web secara visual, kode, atau keduanya.
- INSERT TOOLBAR adalah tempat Anda dapat memasukan image, Flash movie, table, atau elemen lain. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2.
- PENGATURAN HALAMAN berguna untuk melakukan pengeditan pada suatu elemen di Document Window.
- PANEL GROUP merupakan kumpulan dari panel-panel Dreamweaver.

Tunggu Edisi Selanjutnya...

Semoga Bermanfaat

MEMASUKKAN VIDEO YOUTUBE KE WEBSITE

Hai jumpa kembali di Tutorial Dreamweaver kali ini kita akan menambahkan atau memasukkan video dari youtube ke website buatan kita. Siapa yang tidak mengenal Youtube, situs penyedia video streaming dan “online video sharing” yang banyak dikenal dan dikunjungi orang di dunia. Pada tutorial belajar Dreamweaver kali ini penulis akan menjelaskan bagaimana cara memasukkan video streaming dari youtube ke dalam website dengan dreamweaver...

Langkah - langkahnya:

1. Buka Dreamweaver dan pilih File - New
Atau tekan CTRL + N = Untuk membuat project baru sebagai latihan

2. Buka Youtube.com dan cari video yang akan dimasukkan, disini saya memilih video penyanyi favorit saya yaitu "hitomi no junin", hehehe...
bagi yang bingung bisa cari di search youtube


3. Pada masukkan / copy script yang ada di embed youtube dan paste pada sela antara TAG <body></body>


Ok selesai, tinggal upload file tersebut ke server dan video akan otomatis jalan saat dibuka oleh browser

Contoh hasilnya seperi video di bawah ini:

Video Tegami by Angela Aki

Semoga Bermanfaat

BELAJAR MEMBUAT WEBSITE- basic html

Bagaimana cara membuat website? Ada beberapa tahapan dan langkah yang harus kita lalui untuk membuat sebuah Website yang baik. Lain halnya dengan instan CMS maupun instan blog yang kita tinggal mendaftar saja di penyedia layanan blog seperti Blogspot, Wordpress, dll. Maupun CMS seperti Joomla, Mambo, dll yang tinggal instal saja seperti. Disini kita belajar manual web (membuat website secara manual) walaupun masih sederhana dan statis. Untuk membuat website pertama-tama kita harus belajar bahasa HTML yaitu sebuah "bahasa program" yang memungkinkan kita membuat halaman web yang bisa ditampilkan dalam browser (Chrome, Firefox, Internet Explorer, Netscape, Opera, dll).

Nah, kini kita mulai dari langkah awal yaitu belajar bahasa HTML.

BELAJAR WEBSITE

Dewasa ini, hampir semua dokumen web dibuat dengan bahasa HTML (Hypertext Mark-up Language). Meskipun anda bisa saja membuat web page (halaman web) tanpa mengerti sedikitpun HTML, Sangat disarankan bahkan nyaris diharuskan, agar anda mengerti bahasa HTML. Untuk itu langkah pertama bagi Anda yang bercita-cita memiliki website sendiri adalah belajar HTML.

HTML (Hypertext Markup Language) adalah bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan dalam Web. Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm atau *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan semua program teks editor biasa, mulai dari Notepad hingga Dreamweaver. Untuk mudahnya, kita gunakan program Dreamweaver.

Apa yang dimkasud dengan file HTML?

-    HTML merupakan kependekan dari Hyper Text markup Language

-    Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup

-    Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman

-    File HTML harus memiliki ekstensi htm atau html

-    File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai.

PENGENALAN KODE HTML
>>New >> Basic Page >> HTML , setelah itu atur ke mode Code

disini anda akan menemui tag - tag semacam ini:

<HTML> </HTML>

Penjelasan:
Masing-masing baris di atas disebut tag. Tag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing. 
Ada tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML> yang ditandai dengan tanda slash (garis miring) di depan awal tulisannya.
Tag di atas memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah isi dari dokumen HTML. Perlu anda ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun huruf kecil. Artinya, penulisan <HTML> atau <html> atau <Html> sama saja hasilnya. Namun perlu selalu diingat bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa ditampilkan dalam browser.

Sekarang kita akan beralih pada tag selanjutnya.

<HTML> <BODY> </BODY> </HTML>

Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag <BODY>. Coba tuliskan:

<HTML> <BODY> Tulisan ini akan tampak dalam browser by ilmugrafis. </BODY> </HTML>

Sekarang simpanlah file ini dengan meng-klik menu File lalu Save. Nah, lihatlah hasil karya anda yang pertama dengan menekan F12 disitu akan muncul tulisan "Tulisan ini akan tampak dalam browser by ilmugrafis." tanpa tag HTML. Sekarang anda mungkin mulai mengerti cara kerja HTML dan markup tag, begitulah cara kerjanya, jadi yg muncul di broser hanya tulisan saja sedangkan tagnya hanya merupakan suatu perintah bagi browser untuk menampilkan perintah kita.

Apakah tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web? Tidak, dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan berpengaruh terhadap format atau tampilan halaman web secara keseluruhan. Pada kesempatan ini kita mengambil contoh bagaimana mengubah warna latar belakang dan warna tulisan dari halaman web dengan penambahan atribut ke dalam tag BODY.

<HTML> <BODY BGCOLOR="yellow" TEXT="red"> Tulisan ini akan tampak dalam browser by ilmugrafis. </BODY> </HTML>

Simpanlah kembali file ini (klik File lalu Save). Untuk melihat bagaimana hasilnya tekan F12 atau klik tombol Refresh pada browser atau bisa juga dengan menekan tombol F5 pada keyboard. Dengan demikian, browser akan memanggil ulang file yang kini sudah mengalami perubahan. Maka akan tampaklah hasilnya:

Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa contohnya seperti #rrggbb.

Ok setelah menguasai tag di atas maka kita lanjutkan ke inspeksi tag HEAD dan TITLE. Di sini terlihat bahwa kita mempunyai tag <HEAD> dan tag <TITLE>. Tag HEAD berfungsi untuk mengapit berbagai macam fungsi dan informasi yang berkenan dengan halaman web yang bersangkutan. Pada latihan kali ini, kita memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi untuk mengapit kalimat yang menjadi judul dari halaman web tersebut. Sekarang mari kita tuliskan judul halaman web ini:

<HTML> <HEAD> <TITLE>WEBSITE BUATANKU</TITLE> </HEAD> <BODY BGCOLOR="yellow" TEXT="red"> Tulisan ini akan tampak dalam browser. </BODY> </HTML>

Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang kita akan melihat bagaimana perubahannya dalam browser. Lakukan lagi Refresh seperti di atas. Maka anda akan melihat di baris teratas (yang dinamakan Title Bar) dari program browser akan menampilkan judul atau titel dari halaman web anda yaitu: WEBSITE BUATANKU
previewnya kurang lebih seperti ini, disini saya menggunakan browser Firefox:

Alhamdulillah, selesailah latihan pertama Belajar Membuat Website - HTML.
Selamat belajar HTML di Dreamweaver
Sampai ketemu lagi di Tutorial berikutnya
Semoga Bermanfaat ^_^/

MENU ANIMASI MENARIK DI DREAMWEAVER

Seorang Web desainer pasti akan melakukan segala cara untuk membuat tampilan websitenya menarik, salah satunya mungkin dengan cara membuat menu animasi. Cara itu antara lain dengan belajar Photoshop, Flash, dan juga Firework. Namun Pada tutorial Dreamweaver kali ini kita lupakan dulu hal itu karena kita akan belajar membuat menu yang menarik tanpa harus belajar animasi flash karena pada dreamweaver terdapat template - template animasi siap pakai yang sayang jika dilewatkan :)

Ok, berikut langkah - langkahnya:

1. Buka Program Dremaweaver anda, disini saya menggunakan Dremweaver 8 , namun cara ini bisa diterapkan untuk semua versi Dremweaver mulai dari MX , 8 hingga yang terbaru yaitu Adobe Dremweaver CS5
Start >> All Program >> Dreamweaver

2. kalau anda tidak / belum punya website untuk project anda bisa mengklik Create new: pilih HTML

3. Sebelum kita mulai membuat menunya maka kita diharuskan save (menyimpan) dulu project kita dengan menekan CTRL + S , pilih direktori / tempat penyimpanan lalu berikan nama file yang anda inginkan. klik Save

4. Setelah itu pilih menu Insert >> Media >> Flash Button


5. Pilih template tombol menu animasi yang anda inginkan

Disini ada berbagai macam tombol yang WOW, menarik bukan... sebagai contoh maka saya pilih saja salah satunya yaitu Glass-Silver
Button Text berfungsi untuk menambahkan judul / kata apa yang terdapat di dalam button nantinya
Font : jenis font yang dipakai
Size : ukuran font yang diinginakan
Link : tautan untuk menu nantinya

Tekan OK, untuk title isi saja

OK

klo 1 menu kurang maka buat lagi sebanyak yang anda perlukan untuk menu di website anda dengan mengulangi langkah di atas
Contoh hasilnya:

untuk mengetesnya tekan F12 untuk melihat hasilnya :)
Sampai ketemu lagi di Tutorial Dremweaver berikutnya
Semoga Bermanfaat ^_^/

MEMBUAT ROLLOVER IMAGE

Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop up Menu juga menyediakan tool untuk membuat Rollover Image sebagai tombol. Yang harus Anda lakukan pertama kali adalah menyediakan dua buah gambar yang ukurannya sama tapi warnanya berbeda.

1. Buatlah duplikasi gambar tombol yang telah ada.
   
2. Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu Image > Adjustment > Hue/Saturation.
   
3. Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan dokumen tersebut dengan cara menekan Ctrl+S.
   
4. Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.
   
5. Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu Insert > Image Objects > Rollover Image.
   
6. Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom Image name kemudian tentukan gambar asli pada kolom Original Image. Untuk mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk gambar rollover pada kolom Rollover Image.
   
7. Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika tombol tersebut di klik.
   
8. Untuk melihat hasilnya, tekan tombol F12.

MEMBUAT LINK DAN NAVIGASI

Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika mencari informasi yang dibutuhkan. Sebaiknya menggunakan tombol menu yang umum, seperti: Home, Product, Service, dan Contact Us
Dalam Macromedia Dreamweaver, kita membuat Pop-up Menu, dan Jumping Menu secara mudah. Anda tidak bersusah payah menuliskan script yang panjang dalam bahasa Javascript karena telah disediakan tool yang sangat mudah dan fleksibel.
1. Membuat Pop-up Menu
Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain yang sejenis adalah adanya tool untuk membuat menu pop-up yang dibuat dengan bahasa Java. Bagi mereka yang masih awan dengan bahasa Java, tidak perlu bingung karena disediakan panel Behavior untuk mempermudah dalam pembuatan menu pop-up.
Sebelum membuat pop-up menu terlebih dulu harus menyiapkan nama file sebagai link. Sebagai contoh: ketika user memilih menu PC maka yang akan muncul adalah pilihan nama computer seperti Acer, HP, BenQ, dan lain sebagainya. Dan ketika user memilih salah satu opsi (missal: Acer) maka akan terhubung ke file tersebut.
Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang sama seperti halaman utama, yaitu menyimpan dengan nama lain (contoh: Save As > acer.html). Diasumsikan, Anda telah memiliki beberapa file sebagai link yang dimaksud.

1. Pertama kali, klik menu PC.
   
2. Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih menu Window > Behaviors.
   
3. Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk membuka menu.
   
4. Selanjutnya pilih Show Pop up Menu.
   
5. Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-up Menu yang masih kosong.
   
6. Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).
   
7. Kemudian masukkan alamat URL pada kolom Link.
   
8. Selanjutnya pada kolom Target, pilih _parent.
   
9. Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian lakukan hal sama seperti pada tahap 6.
   
10. Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar belakang pop up menu. Tentukan jenis dan ukuran font yang digunakan. Lalu tentukan pula warna teks dan warna cell ketika mouse berada di atas teks.
    
11. Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up menu.
    
12. Klik Tab Position untuk menentukan posisi pop up menu.
    
13. Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.
    
14. Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain.

MENGEDIT WEB DENGAN DREAMWEAVER

Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah dan lebih praktis dibandingkan harus membuat kode html.
Ketika dokumen Adobe Photoshop (download: situs_bisnis.zip) tersimpan dalam bentuk web maka secara otomatis akan membuat tag html sendiri sehingga tidak perlu bersusah payah mengetik kode html. Anda dapat membuktikan sendiri seperti nampak pada gambar berikut.


1. Mengubah Objek menjadi Background
Tidak semua gambar (image) yang pada web yang telah kita buat diganti. Jika image tersebut berfungsi sebagai tombol, maka Anda dapat menambahkan menu pull down agar tampilan website lebih menarik. Anda juga dapat membuat tombol dalam bentuk mouse over, dan lain sebagainya.
Pada bagian ini, kita akan mencoba membahas tentang teknik penggantian objek gambar menjadi latar belakang (backgrdound) agar kita dapat memasukkan beberapa komponen di dalamnya (teks maupun grafik).

1. Pertama kali, bukalah file index.html menggunakan Macromedia Dreamweaver.
   
2. Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan di jadikan latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik image di bagian bawah teks New Product.
   
3. Pada bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak dapat memasukan teks di atas gambar tersebut karena objek tersebut adalah image, bukan merupakan background. Tekan Del untuk menghapusnya.
   
   
4. Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar belakang (background). Oleh karena nama file yang baru saja dihapus adalah index_26.gif maka gunakan file tersebut sebagai latar belakang.
   
5. Ketikkan images/index_26.gif pada kolom Bg.
   
6. Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar belakang agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.

---

2. Memasukkan Objek Objek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam Macromedia Dreamweaver proses memasukkan objek sangat mudah karena sudah disediakan tool yang sangat lengkap. Anda tinggal memilih objek apa yang akan dimasukkan. Berikut ini akan membahas masalah teknik memasukkan objek berupa teks.

1. Letakkan kursor pada tempat yang akan ditambahkan teks.
   
2. Pada penel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.
   
3. Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut seperti nampak pada gambar berikut.
   
4. Anda bisa memasukkan image di antara teks tersebut. Untuk melakukan hal itu, pertama kali letakkan kursor di awal paragraf kemudian pilih menu Insert > Image.
   
5. Pilih file gambar yang akan dimasukkan dalam dokumen tersebut.
   
6. Apabila berhasil memasukkan gambar, maka akan terlihat objek tersebut berada di depan paragraf. Namun posisinya masih kurang sempurna karena susunan teks terdorong oleh gambar tersebut.
   
7. Agar tampilan lebih rapi, Anda dapat mengatur posisi gambar sehingga seluruh teks akan berada di sebelah kanan gambar. Untuk melakukan hal tersebut, pada panel Properties pilih Left untuk Align.