Bismillahirrahmanirrahim....

Kawan-kawan sang pemimpi....
Tutorial kali ini akan membahas tentang CSS Style.


Apa sih yang di maksud CSS Style???


CSS Style adalah kepanjangan dari Cascading Style Sheet, yaitu suatu fasilitas yang disediakan oleh Macromedia Dreamweaver untuk mengumpulkan suatu blok perintah pemformatan yang sering dilakukan berulang-ulang sehingga dapat mempercepat proses kerja pendesainan web.Dalam artian pemadatan perintah.


Contoh sederhana untuk membuat CSS Style, misalnya kita ingin membuat objek test seperti di bawah ini :


Step 1
Buka dokumen baru dengan mode design view. Setelah itu klik menu Window, lalu pilih CSS Style atau bisa juga dengan menekan tombol Shift + F11, maka akan tampil panel seperti di bawah ini :


Step 2
Untuk membuat CSS Style baru klik tombol New CSS Style iconnya seperti ini


Step 3
Maka akan tampil kotak dialog, lalu lakukan pengaturan :

• Name : untuk mengisi nama CSS Style, misalnya Latihan
• Selector Type : Tipe-tipe selektor, misalnya untuk pilihan Class (Can apply to any tag) gunanya adalah agar CSS Style yang dibuat dapat diterapkan pada tag HTML
• Define In : letak penerapan CSS Style, pilih saja This Document Only agar style tersebut hanya diterapkan pada halaman website yang sedang kita rancang

      Lalu klik OK

Step 4
Setelah itu akan tampil kotak dialog CSS Style Definition, seperti gambar dibawah ini :


Nah dalam kotak dialog tersebut kita bisa melakukan pengaturan sesuai kebutuhan kita, seperti Font/Huruf, Size/Ukuran Huruf, Color/ Warna huruf, dsb. Jika sudah selesai klik OK.


Step 5
So.. untuk menerapkan CSS Style tersebut pada teks yang akan kita buat, caranya adalah ketik dulu teks tersebut misalnya Belajar CSS Style, Asyik !!! setelah itu block tulisan tersebut. lalu beralihlah ke bagian property inspector. Pada Bagian Style klik menu drop downnya, lalu pilih deh CSS Style yang tadi kita buat.




OK, kawan selamat mencoba ya :D

Bismillahirrahmanirrahim....


Hello kawan-kawan sang pemimpi, 
Sudah lama banget rasanya ga buat postingan tentang tutorial.
Masih berkutat di software macromedia dreamweaver kali ini saya akan membahas tentang membuat Flash Button.

Pasti kalian ada yang bertanya apa sih yang dimaksud dengan Flash Button???

Flash Button adalah tombol-tombol animasi yang telah disediakan oleh Macromedia Dreamweaver, kalian tinggal melakukan modifikasi teks sesuai dengan kebutuhan anda.

Properti-properti yang akan diatur pada Flash Button tersebut antara lain :

• Style : Silahkan pilih jenis-jenis tombol yang akan digunakan misalnya : Bevelet Rect-Blue, Blue Warper, dll
• Button Text : Untuk mengetik teks yang akan ditampilkan pada tombol tersebut
• Font : Untuk menentukan jenis huruf yang digunakan pada tombol tersebut
• Link : Isi dengan nama file tujuan ketika Flash Button di klik
• Target : Cara penampilan file, misalnya jika kita pilih target _blank, file akan di tampilkan di jendela yang lain. Jika pilih _self file akan ditampilka di jendela yang sama.
• Bg_Color : Untuk memilih warna latar belakang tombol, saran saya gunakan warna latar yang sama dengan background web kalian agar hasilnya lebih bagus.
• Save As : Nama button tersebut. Saran saya ga usah di ubah, biarkan defaultnya seperti itu

Sekarang kita ke intinya, gimana sih cara membuat flash button :

Step 1
Buat dokumen baru di Macromedia Dreamweaver dengan mode Design View agar hasilnya bisa langsung nampak

Step 2
Sebelum memulai membuat flash button, simpan dahulu dokumen yang masih dalam keadaan kosong tersebut, karena kalau ga di simpan kita tidak akan bisa membuat flash button

Step 3
Selanjutnya klik tombol Media Flash pada bagian common insert bar, lalu pilih Flash Button

Step 4
Lalu tampil kotak dialog Insert Flash Button, lalukanlah pengaturan properti sesuai kebutuhan kalian, seperti yang saya jelaskan di atas seperti Style, Button Text, Link, dll







Step 4
Lalu klik OK, jika sudah selesai melakukan pengaturan.

Contoh-contoh flash button dapat di lihat pada gambar di bawah ini :

Oke, kawan-kawan selamat mencoba ya :D

Bismillahirrahmanirrahim....

Wah lama juga ya... udah 2 minggu ga buat postingan tutorial....
Masih menggunakan software Dreamweaver versi apa saja, kali ini saya akan berbagi ilmu kepada kawan-kawanku tercinta tentang Yuk... Belajar membuat form.


Teman-teman yang masih newbie tentang pemprograman pasti bertanya-tanya apa sih tuh Form...
Form adalah salah satu komponen web yang biasa digunakan untuk menginput data-data.
Tugasnya form emang cuma untuk input data saja... ga lebih. Untuk proses menyimpan data, mengedit, menghapus, menampilkan data-data yang telah diinput oleh user diperlukan bantuan dari pemprograman server side contohnya PHP, ColdFussion, JSP, ASP, Java, dll.

2. Text Field
    Yaitu kotak input yang biasa digunakan   untuk menginput data-data yang tidak terlalu panjang. Misalnya Nama, Alamat Email, password dll

3. Hidden Field
    Yaitu bidang tersembunyi tempat mengumpulkan informasi tentang pengunjung lokasi

4. Text area
    Yaitu kotak input data juga yang sifatnya multiline/banyak baris yang biasa digunakan untuk menginput data-data yang cukup panjang misalnya keterangan.

5. Check Box
     Kotak input pilihan yang memungkinkan user memilih lebih dari satu pilihan yang disediakan


6. Radio Button
     Yaitu input pilihan bentuknya bulatan kecil dan hanya mengizinkan user untuk memilih satu pilihan saja dari beberapa pilihan yang disediakan

7. Radio Group 
    Yaitu beberapa radio button dalam satu daftar/kelompok

8. List Menu 
    Yaitu daftar pilihan tunggal dalam bentuk list/daftar
     
9. Jump Menu
    Yaitu daftar pilihan tunggal yang mengandung link pada setiap pilihannya.

10. Image Field
     Digunakan untuk menyisip atau memasukkan gambar

11. File Field
     Yaitu Kotak input data file yang disertai tombol browse

12. Button
     Digunakan untuk menyisipkan tombol-tombol, misalnya tombol submit, reset, save, dsb.
OK... udah kenal elemen-elemen formnya kan... kita  langsung saja ya...
Kali ini saya akan memberikan contoh cara membuat form yang seperti ini :


Klik tombol Form pada insert bar untuk memulai membuat form. Jangan lupa atur juga property inspectornya dan ubah nilainya, ingat, posisi kursor tetap pada area bingkai form ya.

• Name : Digunakan untuk memberi nama form
• Action : Digunakan untuk menunjuk file yang akan memproses data-data dari form
• Method : Menentukan pengiriman data-data dari form ke web server. Ada 2 metode yang sering digunakan yaitu Post dan Get. Metode Post akan mengirim data melalui HTTP header dan terpisah dari URL, sedangkan metode Get akan mengirimkan data bersama-sama dengan URL.
• Target : Digunakan untuk menentukan cara penampilan file pemproses data-data dari form. Ada dua pilihan target yang sering digunakan yakni _blank jika file ingin ditampilkan ke dalam jendela yang lain. dan _self bila ingin menampilkan file dalam jendela yang sama.

Step 3
Agar formnya terlihat rapi, buat table didalam form tersebut dengan properti Rows : 9, Cols : 3, Table Width : 72%, Align : Center, Bg Color : #FFCCFF (Warna background terserah kalian)

Step 4
Baris pertama kolom pertama ketik keterangan/label Nama Lengkap, tekan Tab untuk menuju ke baris pertama kolom kedua ketik tanda ":", tekan Tab untuk menuju baris pertama kolom ketiga klik tombol Text Field dibagian Forms Insert Bar.
 
Step 5 
Untuk Nomor  Kartu Identitas, langkah pembuatannya hampir sama dengan step 4. 

Step 6 
Untuk Tanggal Lahir hampir sama juga caranya dengan step 4 & 5, bedanya ditambahkan elemen List Menu. Jangan lupa atur property inspectornya.

• untuk Tanggal pengaturannnya antara lain Type : Menu,  untuk menginput angka 1 s/d 31 tekan tombol List Values maka akan tampil kotak dialog seperti dibawah ini, klik tanda + saja untuk menambah data setelah itu tekan tombol OK.  
•  Untuk Bulan dan Tahun caranya sama, tinggal input Januari s/d Februari untuk Bulan, dan 1945-2011 untuk Tahun

Step 7
Untuk Jenis Kelamin caranya hampir  sama seperti step-step sebelumnya bedanya ditambahkan Radio Group. Klik tombol Radio Group pada Form Insert Bar maka akan tampil kotak dialog seperti di bawah ini, klik  tanda + saja untuk menambah data setelah itu tekan tombol OK.

Step 8
Untuk Pendidikan Terakhir caranya hampir  sama seperti step-step sebelumnya bedanya ditambahkan List/Menu. Tapi pada pengaturan propertynya pilih Type : List. Untuk menambahkan data klik tombol List Values.

Step 9
Untuk Email caranya sama dengan step 4 & 5

Step 10
Untuk Tentang Anda caranya hampir sama dengan step 4 & 5 bedanya ditambahkan elemen Text Area.
 Jangan lupa atur propertinya Char Width : 30, Num Lines : 4, Type : Multiline

Step 11
Untuk tombol  Simpan dan Batal  klik elemen Button, untuk tombol Simpan atur propertinya sebagai berikut : Value : Simpan, Action : Submit Form, untuk tombol Batal atur propertinya sebagai berikut : Value : Batal, Action : Reset Form


OK kawan....
Sekian dulu tutorial saya kali ini.
Selamat mencoba ya....

Bismillahirrahmanirrahim....
Hello... kawan....

Wah lama juga ya rasanya ga buat postingan  tutorial. Kali ini saya akan membahas tutorial mengenai membuat tata letak website dengan menggunakan tabel.  Tanpa banyak berbasa-basi langsung ke TKP yuk...


Step 1 :
Buka dokumen HTML baru

Step 2 :
Klik menu Insert lalu klik Table.

Step 3 :
Setelah itu tampil kotak dialog Table, atur propertinya Rows : 4, Coloumn : 3, Table Width : 100 percent, Border Thickness :1 pixels, Cell spacing :  5, kemudian klik OK

Step 4 :
Block kolom 1, 2, dan 3 baris pertama, klik menu Modify, pilih Table, Pilih Merge Cells. untuk menyatukan ketiga kolom yang terblok.


Step 5 :
Ulangi Step 4 untuk baris ke-2


Step 6 :
Letakkan kursor pada baris pertama, lalu tekan enter 3 kali, untuk memperluas area baris tersebut


Step 7 :
Letakkan kursor di baris ke-3 kolom ke-3, kemudian lihat di property inspector ubah nilai W menjadi 30%

Step 8 :
Pada baris ke-3, blok kolom pertama dan kedua, lalu klik menu Modify, pilih Table, Pilih Merge Cells.
Setelah itu tekan enter sebanyak 10 kali.


Step 9 :
Pada baris ke-4, tekan enter 1 kali


and.... taa.... daa.... hasil rancangan tabelnya jadi seperti ini :


Nah, selanjutnya tinggal kreativitas kita sendiri mau membuat rancangan website seperti apa, ga ada yang baku kok, yang penting udah tahu dasarnya. Rancangan tersebut bisa kalian tambahkan warna background, text, warna text, gambar, dll semuanya itu bisa diatur di property inspector.


Selamat mencoba dan gunakan kreativitas kalian :D

Bismillahirrahmanirrahim....


Hello kawan...

Lama juga ya... ga nulis postingan baru lagi, sorry rada sibuk beberapa minggu ini.
Klu udah capek...
otak juga udah hang... so inspirasi buat nulis belum merasuki diriku ini...

hhhmmm.... bikin postingan tentang tutorial saja dulu ya... 
untuk kategori-kategori yang lain (religi, tips, and motivasi) di pending dulu belum ada ide  yang mengilhami daku nih... 

OK.. kawan.... 
Kali ini saya akan bahas tentang gimana caranya membuat hotspot link pada gambar. 
Btw, apa sih  hotspot link??? 
Hotspot link adalah sebuah teknik untuk membagi suatu gambar sehingga memiliki beberapa link.

Penasaran !!!! ayo  praktekkan saja langkah-langkah berikut ini :


Step 1 
Di dreamweaver buka dokumen HTML baru dengan mode design view. Lalu sisipkan gambar melalui menu Insert lalu pilih Image.

Step 2
Klik gambar yang baru saja kamu tampilkan sehingga muncul border disekitar halaman gambar tersebut.


Step 3
dibagian Property Inspector, klik tombol Rectangular Hotspot Tool 

Step 4
Arahkan penunjuk mouse yang berbentuk + ke area gambar yang ingin di buat link. Kemudian klik dan drag sehingga membentuk bidang segiempat hotspot. Contohnya seperti gambar dibawah ini :


Step 5
Dengan bidang hotspot yang sudah terseleksi. Pada bagian Image Property Inspector, klik gambar folder disebelah kanan kotak isian link untuk menentukan file yang ingin di link.

Nah, untuk membuat bidang hotspot yang lain di gambar tersebut, ulangi step 3,4, dan 5.

Yuhuuu.... selamat mencoba kawan !!!! 

Bismillahirrahmanirrahim.....

• Untuk membuat background. sama halnya seperti artikel lalu lakukan pengeditan pada Page Propertiesnya.
• Untuk menambahkan garis bawah pada text, seperti pada tulisan www.nunu.com. Blok tulisan, klik kanan pada tulisan tersebut pilih Style lalu pilih Underline
• Untuk memberi garis horizontal sebagai pemisah antar bagian, caranya adalah pada bagian Insert bar di tab common pilih tool Horizontal Rule
• Untuk mengubah warna tulisan dan jenis huruf, dan ukuran huruf, lakukan pengeditan pada Property Inspector (dibagian bawah lembar kerja)     
• Untuk menyisipkan gambar pada menu Common Insert Bar klik tombol Images
• Kedua dokumen/design web tersebut disimpan kedalam file yang berbeda. Misalnya untuk design pertama disimpan dengan nama file home.htm dan design kedua dengan nama file tutorial.htm