Kamis, 23 Februari 2012

PENGENALAN AREA KERJA CORELDRAW X4

Sebagai salah satu program grafis pengolah vector, CorelDRAW banyak digunakan oleh para desainer grafis profesional untuk menuangkan berbagai ide kreatif. Versi terbarunya, CorelDRAW X4, telah dirilis pada tahun 2008 dengan penambahan sejumlah fitur baru di dalamnya.

Pengoperasian yang mudah dan fasilitas tools yang semakin lengkap menjadikan CorelDRAW X4 sebagai salah satu program grafis andalan dan patut diperhitungkan. Wajar bila program ini banyak digunakan untuk keperluan pembuatan desain seperti: kartu nama, brosur, poster, iklan, pembuatan layout majalah dan masih banyak lagi.
Hal terpenting bagi mereka yang ingin menguasai CorelDRAW X4 adalah mengenali terlebih dulu area kerjanya. Lewat pengenalan elemen-elemen dasarnya, diharapkan akan muncul pemahaman tentang cara kerja program ini. Secara default (Standar), tampilan area kerja CorelDRAW X4 tampak seperti pada gambar di bawah ini.



Keterangan:
1.Toolbox, 2. Title Bar, 3. Menu Bar, 4. Toolbar, 5. Drawing Window, 6. Property Bar, 7. Docker, 8. Rulers, 9. Document Navigator, 10. Drawing Page, 11. Status Bar, 12. Navigator, 13. Color Palette.


1.Toolbox
Toolbox adalah sebuah kotak (box) penyimpanan berbagai alat (Tool) untuk keperluan menggambar, memberi warna, memodifikasi objek dan menulis teks. Tidak semua alat ditampilkan dalam Toolbox. Untuk membuka alat yang tersembunyi, klik tanda segitiga kecil yang ada di pojok kanan bawah sebuah alat.

2.Title Bar
Title Bar adalah batang jendela yang berisi informasi nama program (CorelDRAW X4) dan nama dokumen yang sedang aktif. Selain berisi informasi nama program dan nama dokumen, Title Bar juga dapat dipindahkan dengan cara klik ganda kemudian geser ke posisi yang Anda inginkan.

3.Menu Bar
Menu Bar adalah sederetan tombol perintah yang memiliki fungsi berbeda-beda. Ada dua belas pilihan yang terdapat dalam Menu Bar yaitu File, Edit, View, Layout, Arrange, Effects, Bitmaps, Text, Table, Tools, Window dan Help.

4.Toolbar
Toolbar adalah sederetan tombol shortcut untuk menjalankan suatu perintah dengan cepat. Secara default (standar), Toolbar terlihat seperti pada.

5.Drawing Window
Drawing Window adalah area putih di luar Drawing Page (Kanvas Kerja) yang dibatasi oleh Scroll Bars di sisi kanan dan bawah.Di area ini, Anda dapat menempatkan objek apa saja yang diperlukan untuk bahan desain. Objek-objek yang berada di area Drawing Window tidak akan tercetak, kecuali Anda memasukannya terlebih dulu ke dalam Drawing Page.

6.Property Bar
Property Bar adalah sederetan tombol yang menyesuaikan diri dengan alat yang Anda pilih dalam Toolbox. Tombol - tombol di dalam Property Bar secara otomatis akan berubah mengikuti alat (tool) yang dipilih di dalam Toolbox. Sebagai contoh, saat Anda menekan Text Tool di dalam Toolbox, Property Bar akan terlihat seperti pada Gambar di bawah ini.

7.Docker
Docker adalah kotak dialog berisi tombol-tombol perintah untuk mengatur sebuah objek. Secara default, posisi Docker terletak di sisi kanan area kerja. Namun, Anda bisa memindahkan posisinya dengan cara menggesernya (drag). Saat pertama kali menginstal CorelDRAW X4, hanya ada dua Docker yang ditampilkan yaitu: Hints dan Object Manager. Selain Hints dan Object Manager, masih ada beberapa Docker lainnya yang dapat Anda tampilkan. Sebagai contoh, untuk memunculkan Transformation Docker, langkah-langkah yang harus Anda lakukan adalah: klik Window pada Menu Bar → Dockers → Transformations → Position.

8.Rulers
Rulers adalah sebuah alat pengukur atau bisa dianalogikan sebagai penggaris untuk menunjukkan posisi dan ukuran objek yang Anda pilih. Selain itu, Rulers berfungsi untuk membuat Guideline (Garis Bantu). Caranya dengan menempatkan kursor di tengah-tengah Rulers, kemudian klik dan geser ke area Kanvas Kerja (Drawing Page).

9.Document Navigator
Document Navigator adalah sederetan tombol perintah yang berada di sudut kiri bawah jendela Drawing Window. Fungsinya selain untuk menambah halaman, juga untuk berpindah antar halaman.

10.Drawing Page
Drawing Page adalah sebuah bingkai kotak di dalam Drawing Window dan merupakan area kerja utama.

11.Status Bar
Status Bar adalah batang jendela yang terletak di bagian paling bawah area program CorelDRAW X4. Status Bar berisi informasi mengenai objek (teks) seperti ukuran, bentuk, warna, outline, format gambar, jenis huruf dan ukurannya. Sebagai contoh, saat Anda menekan Text Tool di dalam Toolbox, Status Bar secara otomatis menginformasikan mengenai jenis huruf, ukuran dan warna yang dipakai.

12.Navigator
Navigator adalah sebuah tombol kecil berbentuk kaca pembesar yang terletak si sudut kanan bawah jendela Drawing Window. Saat tombol Navigator ditekan, akan muncul jendela kecil yang akan memperlihatkan keseluruhan objek (baik yang ada di Drawing Page maupun di area Drawing Window). Tekan dan geser kursor secara vertikal dan horizontal, kemudian lepaskan di tempat objek yang ingin Anda tuju.

13.Color Palette
Color Palette adalah kumpulan warna di dalam sebuah bar dan terletak di tepi sebelah kanan. Secara default, mode warna yang ditampilkan dalam Color Palette adalah CMYK (Cyan, Magenta, Yellow and Black ). Namun, Anda bisa merubah atau menambah mode warna tersebut dengan mode warna lainnya. Sebagai contoh, Anda ingin menambahkan mode warna RGB (Red, Green and Blue) menjadi Color Palette. Langkah-langkah yang harus dilakukan adalah: klik menu Window → Color Palettes → Default RGB Palette. Selain itu, Anda juga bisa memindahkan posisi Color Palette ke posisi yang Anda inginkan.

Minggu, 12 Februari 2012

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

logo dreamweaver
Gambar 1 . Tampilan LogoDreamweaver


layout dreamweaver
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
tutorial dreamweaver

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

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
tutorial dreamweaver
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:
tutorial dreamweaver
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:
tutorial dreamweaver
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
tutorial dreamweaver

5. Pilih template tombol menu animasi yang anda inginkan
tutorial dreamweaver
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
tutorial dreamweaver
OK

klo 1 menu kurang maka buat lagi sebanyak yang anda perlukan untuk menu di website anda dengan mengulangi langkah di atas
Contoh hasilnya:
tutorial dreamweaver
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.
    dreamweaver_41.gif
  2. Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu Image > Adjustment > Hue/Saturation.
    dreamweaver_42.gif
  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.
    dreamweaver_43.gif
  4. Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.
    dreamweaver_44.gif
  5. Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu Insert > Image Objects > Rollover Image.
    dreamweaver_45.gif
  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.
    dreamweaver_46.gif
  7. Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika tombol tersebut di klik.
    dreamweaver_47.gif
  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.
    dreamweaver_21.gif
  2. Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih menu Window > Behaviors.
    dreamweaver_22.gif
  3. Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk membuka menu.
    dreamweaver_23.gif
  4. Selanjutnya pilih Show Pop up Menu.
    dreamweaver_24.gif
  5. Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-up Menu yang masih kosong.
    dreamweaver_25.gif
  6. Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).
    dreamweaver_26.gif
  7. Kemudian masukkan alamat URL pada kolom Link.
    dreamweaver_27.gif
  8. Selanjutnya pada kolom Target, pilih _parent.
    dreamweaver_28.gif
  9. Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian lakukan hal sama seperti pada tahap 6.
    dreamweaver_29.gif
  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.
    dreamweaver_30.gif
  11. Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up menu.
    dreamweaver_31.gif
  12. Klik Tab Position untuk menentukan posisi pop up menu.
    dreamweaver_32.gif
  13. Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.
    dreamweaver_33.gif
  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.

dreamweaver_01.gif
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.
    Gambar 1
  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.
    Gambar 2
  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.
    Gambar 3
  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.
    Gambar 4
  5. Ketikkan images/index_26.gif pada kolom Bg.
    Gambar 5
  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.
    Gambar 11
  2. Pada penel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.
    Gambar 12
  3. Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut seperti nampak pada gambar berikut.
    Gambar 13
  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.
    Gambar 14
  5. Pilih file gambar yang akan dimasukkan dalam dokumen tersebut.
    Gambar 15
  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.
    Gambar 16
  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.
    Gambar 17

PENGENALAN DREAMWEAVER 8

downloadDream weaver banyak digunakan orang untuk membuat halaman website yang berbasis HTM, HTML, PHP dll. Bagi seseorang yang ingin membuat sebuah halaman website harus mengetahui program htm, php dll.

Dengan Dreamweaver, secara visual dengan menginsert gambar atau menulis anda dapat membuat sebuah halaman website tanpa harus menguasai script html, tapi bila anda ingin mempelajari bahasa pemrogram, dengan Dreamweaver anda dapat mempelajari script penulisan kode html, karena apapun yang anda tulis dan gambar apapun yang akan anda masuki ke program dreamweaver akan diterjemahkan secara otomatis ke script html.
Pada tutorial ini tidak dibahas tentang script html, tetapi memleajari penggunaan program Dreamweaver antara lain
  • Membuat menu
  • Memasukkan musik ke halaman
  • Memasukkan gambar animasi
  • membuat link ke website lain
  • Membuat tombol flash
  • Membuat tulisan berjalan di dll.
 bila anda berminat silahkan download softwarenya, di sini.
download