Cara Membuat Website dengan Adobe Dreamweaver

Cara Membuat Webite dengan  Adobe Dreamweaver

Cara Membuat Website dengan Dreamweaver CS6 - Membuat website dengan Dreamweaver dapat dikatakan cukup mudah. Sobat tidak perlu menghafal script-script HTML yang cukup merepotkan. Nah berikut ane berikan cara membuat website dengan Dreamweaver. Monggo diikuti ya sob..

Pada latihan kali ini kita akan belajar membuat website sederhana menggunakan Adobe Dreamweaver CS6. Langkah awal dalam membuat website adalah menetukan tema website kita. Untuk latihan kali ini kita akan menggunakan tema website pribadi.

Kita tentukan dahulu menu yang akan kita sajikan pada website kita. Sebagai contoh:

Menu utama terdiri dari: HOME, PROFIL, BERITA, GALERI, KONTAK

Layout kita buat sbb:

atau

Atau silahkan gunakan imajinasi anda untuk membuat layout website yang akan anda buat.

Keterangan:

Home adalah halaman awal website

Profil dapat diisi mengenai profil anda

Berita dapat diisi dengan berita pada hari ini

Galeri dapat diisi gambar-gambar atau foto-foto kegiatan

Kontak dapat diisi alamat dan nomor telepon yang dapat dihubungi

Untuk membuat website tsb berikut langkah yang dapat dilakukan:

Buka dahulu program Adobe Dreamweaver

Lembar Kerja Adobe Dreamweaver

Untuk manajemen dalam membuat website, lakukan langkah berikut Klik Site -> New Site

Akan masuk jendela baru sbb:

pada kolom site name silahkan isikan nama situs anda, misal Latihan, untuk local site folder adalah letak menyimpan seluruh dokumen (file-file) website anda.

Klik tombol pada sebelah kanan, maka akan muncul lokasi untuk menyimpan seluruh file anda sbb

Sebagai contoh, lokasi di F:/Websiteku

Lihat pada sidebar kanan Adobe Dreamweaver anda maka akan muncul folder tempat anda menyimpan dokumen website anda

Sampai di sini anda sudah berhasil melakukan seting root dokumen untuk website anda

Next step, adalah membuat dokumen HTML untuk website kita

Klik pada menu File->New, lalu pilih Blank Page->HTML lalu klik Create

Langkah selanjutnya, kita akan membuat halaman utama, simpan file ini dengan nama index.html. Buat Layout utama (layout contoh 1) sebagai berikut:

Buat tabel dengan cara klik Insert->table, gunakan parameter sbb:

klik OK maka akan muncul tampilan sbb:

Untuk menyesuaikan dengan layout 1, maka pada baris paling atas (untuk header) lakukan merge cell, dengan cara:

Maka akan menjadi:

Karena kita akan menggunakan banyak gambar, alangkah baiknya jika kita membuat folder khusus untuk lokasi penyimpanan gambar, dengan cara sbb:

Pilih New Folder, beri nama folder baru dengan nama gambar

Selanjutnya adalah buka direktori di F:/websiteku/gambar, copykan semua gambar ke folder tsb, contoh:

Setelah kita masukkan gambar ke folder gambar, kita cek pada dreamweaver pada area kerja seperti di bawah, lalu klik F5 (refresh) maka gambar yang sudah dikopi akan diload oleh dreamweaver sbb:

Pada contoh hanya ada 1 file gambar yaitu header.jpg karena sebelumnya hanya mengkopi 1 file gambar.

Selanjutnya, kita simpan dahulu file ini dengan nama index.html dengan cara pilih menu File->Save

Selanjutnya kita masukkan gambar sebagai header dengan cara pada baris 1, kita sorot lalu pilih menu Insert->image sbb

Buka folder gambar

pilih file header.jpg, lalu klik OK, maka akan menjadi sbb:

Selanjutnya kita akan membuat menu utama di kolom 1 baris ke 2

Sesuaikan parameter seperti di atas (Horz: default, Vert:Top)

Selanjutnya kita buat tabel pada cell tsb dengan cara pilih menu insert->table dengan parameter

Lanjutkan dengan membuat menu utama seperti berikut:

Selanjutnya kita akan membuat kode menggunakan tag <iframe></iframe>. Tag ini untuk menentukan lokasi halaman yang muncul

Kita kembali ke split view, tuliskan tag berikut pada posisi lokasi iframe

<iframe name="isiwebsite" src="welcome.html" width="585" height="400" frameborder="0" scrolling="auto"></iframe>

Sampai di sini halaman utama sudah kita buat. Langkah selanjutnya adalah membuat konten sesuai dengan menu yang sudah kita tentukan.

Nah, sebelumnya kita telah membuat sebuah tag iframe dengan atribut src=”welcome.html”, artinya ketika halaman index.html pertama kali diload/dibuka, maka iframe seharusnya berisi file welcome.html, jika kita lihat melalui browser (tekan F12) sbb:

muncul keterangan File not found, mengapa? karena kita belum membuat file dengan nama welcome.html. Lalu apa yang harus kita lakukan? yap, benar sekali kita harus membuat sebuah file baru lagi dengan nama welcome.html. Caranya, silahkan buat kembali dokumen HTML baru lalu simpan dengan nama welcome.html

setelah kita buat file welcome.html, kita buka kembali file index.html melalui browser:

Sekarang kita buat file selanjutnya, profil.html dimana file ini merupakan file yang akan dituju ketika tombol Profil pada Menu Utama diklik

Sekarang kita kembali ke halaman index.html, kita akan menautkan (link) tombol Profil ke file profil.html sbb:

Pada kolom Link, isikan: profil.html (artinya ketika tombol Profil diklik, maka halaman profil.html akan dibuka)

Pada kolom Target, isikan: isiwebsite, mengapa? coba kita lihat kembali ke atas pada tag: <iframe name="isiwebsite" src="welcome.html" width="585" height="400" frameborder="0" scrolling="auto"></iframe>

lihat pada tag <iframe name="isiwebsite"……></iframe> artinya file profil.html akan ditampilkan padaiframe isiwebsite, sehingga jika kita buka file index.html pada browser dan kita klik pada tombol Profil, maka:

nah sudah terlihat bukan halaman website kita? eit ada yang kelupaan, kita belum menautkan tombol Home…hmmm kira-kira ke mana ya menautkan tombol Home ini?? ya benar, tombol Home ini kita tautkan ke file index.html

Sekarang coba klik tombol Home atau Profil, maka halaman website kita akan berubah bukan?

Tugas anda sekarang adalah membuat halaman yang lain, yaitu halaman Berita, Galeri dan Kontak. Lakukan langkah sama seperti di atas. Untuk konten silahkan gunakan imajinasi anda. Selamat belajar.

Nah mudah bukan cara membuat website dengan Dreamweaver CS6 

Read more ...

Cara Mudah Partisi Hardisk Windows 7 Lengkap Disertai Gambar

Cara Mudah Partisi Hardisk Windows 7 Lengkap Disertai Gambar - Hardisk merupakan sebuah hardware komputer / laptop yang sangat vital oleh karena itu diperlukan cara khusus agar awet dan tahan lama Wokeh pada kesempatan kali ini saya ingin membahas bagaimana cara partisi hardisk windows 7 dengan baik dan benar dan tentunya aman di gunakan.

Cara Mudah Partisi Hardisk Windows 7 Lengkap Disertai Gambar

Namun sebelumnya kita perlu tahu dulu jenis - jenis partisi hardisk:

1. Primary Partition >> Merupakan Master Partisi yang berfungsi sebagai tempat penyimpanan file sistem operasi windows 7, windows xp, vista dll untuk keperluan booting. biasanya disimpan di drive C.

2. Extended Partition >> Yang berfungsi sebagai pembatas antara primary dan logical partisi, juga sebagai back up bila terjadi fatal error pada primary partisi.

3. Logical Partitions >> Yang berfungsi untuk penyimpanan file, aplikasi, foto, mp3, video dsb. biasa di sebut drive D, drive E dsb. cukup 2 saja.

Nah setelah kita mengetahu jenis - jenis partisi hardisk selanjutnya kita mulai Cara Mudah Partisi Hardisk Windows 7 Lengkap Disertai Gambar. Saya sarankan ikuti step by step cara partisi hardisk di bawah ini dengan baik dan benar agar tidak terjadi kesalahan.

1 . Klik kanan pada "Computer" lalu Klik "Manage" Klik Gambar Untuk Memperbesar

2. Maka akan muncul jendela baru seperti dibawah ini, kita Klik "Storage" lalu Pilih "disk management"

3. Kemudian Klik kanan pada Harddisk yang akan dipartisi. lalu pilih  "shrink volume"

Maka akan muncul "querying sharink space" tunggu sebentar
4. Setelah muncul jendela shrink. Disini kita diminta menentukan volume/ kapasitas partisi yang akan kita buat. Bila sudah di tentukan, klik "shrink"

5. Setelah kita proses diatas berjalan dengan baik, kemudian muncul partisi baru yang masih belum terformat. Biasanya partisi baru tersebut akan ditandai dengan warna hijau. Sampai disni partisi yang kita buat masih belum bisa digunakan.

6. Untuk memformatnya agar partisi baru dapat kita gunakan. Klik kanan pada partisi baru "yang berwarna hijau di atas" kemudian kita pilih "new simple volume" klik next

7. Maka akan muncul "Specific volume size" klik next muncul "assign drive latter or path" kita klik next lagi

8. Kemudian Muncul menu "Format Patition". Pada file sistem kita pilih "NTFS" pada volume label isikan nama label drive partisi kita, lalu klik "next"

9. Pada jendela "completing the new simple volume wizard" lihat informasinya dulu sebelum kita klik finish kalau dirasa cocok lanjutkan dengan meng-klik "Finish"

10. Horeee....Sampai disini proses partisi kita telah selesai dan sudah dapat digunakan. Cek dengan membuka Windows Explorer, maka partisi yang kita buat akan muncul dengan nama lebel yang kita buat tadi.

Nah bagaimana mudahkan cara mempartisi hardisk windows 7 diatas? Selamat mencoba yah

Read more ...

Belajar animasi dasar di Adobe Flash CS5

Dasar dasar Adobe Flash cs5

Sebelum kita melangkah lebih jauh tentang adobe flash sebaiknya kita mengenal dulu apa itu flash dan untuk apa. mungkin bagi teman teman sudah tidak asing lagi ya yang namanya flas dan gunanya? tentunya kita harus mengenal dulu dan pertama kita buka dulu softwere adobe flash dan jika teman teman belum punya bisa download disini stelah itu kita buka softwere tersebut maka adobe flash akan tampil seperti ini

Jangan khawatir jika Anda merasa sedikit terintimidasi oleh semua jendela dan panel yang muncul. Kami akan fokus pada fungsi yang dibutuhkan untuk membuat sebuah banner logo perusahaan. Bila Anda ingin mempelajari lebih lanjut tentang Flash, mencoba Memulai dengan pilihan flash ditemukan di bawah "Help" pada menu bar atas atau mempertimbangkan untuk mengambil kursus multimedia Flash. Bila Anda siap, lanjutkan dengan tutorial.

Untuk membuat Flash baru, pilih File> New. Kotak dialog New Document akan ditampilkan. Pilih "File Flash (ActionScript 3.0)" dan klik OK.

Sekarang anda siap untuk membuat dokumen baru. Tampilan Anda harus serupa dengan yang di bawah.

The "Untitled-1 *" dalam Title Bar adalah nama dari file pada saat ini. (Jangan khawatir jika file Anda memiliki nomor yang berbeda setelah "Untitled-" dari 1.)
Perhatikan bahwa ada sejumlah panel dan menu. Anda akan bekerja dengan beberapa dari mereka dalam tutorial ini.
Lihat daerah pusat bawah jendela Flash dan perhatikan "Timeline". Ini digunakan untuk mengkonfigurasi bingkai demi bingkai animasi serta mengkonfigurasi lapisan dan menambahkan efek animasi.
Para rectange putih disebut Layar. Ini adalah wilayah yang sangat penting. Tahap adalah animasi Flash. Dimensi Stage adalah dimensi animasi Flash.


Mengatur Ukuran Layar

IAB menerbitkan pedoman sukarela untuk banner dan ukuran iklan. Dalam tutorial ini Anda akan membuat sebuah spanduk dengan 468x60 dimensi. Untuk mengatur Tahap ke dimensi tersebut, pilih Modify Document> untuk menampilkan kotak dialog Document Properties di bawah ini.

Mengkonfigurasi kotak Dimensi teks seperti yang ditunjukkan di atas. Perhatikan bahwa warna latar belakang disetel ke putih tapi bisa diubah dalam kotak dialog ini. Mengatur Frame rate sampai 12. Klik OK.

Jendela Flash harus menampilkan seperti gambar dibawah Anda mungkin perlu menggunakan scroll bar di sekitar area Tahap persegi panjang untuk menampilkan banner Anda.

Simpan File

Ini adalah ide yang baik untuk menyimpan file Anda sering ketika menggunakan Flash. Pilih File> Save. Save As kotak dialog akan terbuka. Buat folder baru bernama FlashBanner dan simpan file dengan nama "banner.fla". Ekstensi file, ". Fla" (biasanya diucapkan "FLAH") digunakan untuk sumber file film Flash. Judul bar di jendela Flash sekarang harus menampilkan "banner.fla".

Alat Panel Flash

Perhatikan Panel Tools di aplikasi Flash Anda. Alat yang dipilih adalah "Selection Tool" - pointer kursor standar. Tempatkan mouse anda ke atas ikon alat lain untuk deskripsi singkat masing-masing.

Anda akan menggunakan "Text Tool" ikon pada Panel Alat selama tutorial ini. Luangkan waktu sejenak dan menemukannya. (Petunjuk: Cari huruf T "di daerah Vector pada Panel Tools.)

Hal ini berguna untuk mengetahui bagaimana untuk membatalkan tindakan bila menggunakan Fireworks hanya jika anda membuat kesalahan. Anda dapat dengan cepat membatalkan tindakan Anda yang paling baru - pengguna Windows tekan tombol Ctrl dan Z pada saat yang sama; pengguna Mac tekan Command ⌘ dan Z kunci pada waktu yang sama. Ada juga pilihan Undo terletak di bawah Opsi Edit pada Tool Bar Utama.

flash Timeline

Lihatlah Timeline yang terletak di bawah Stage.




Seperti yang Anda lihat, ada banyak fitur pada Timeline. Beberapa fitur yang paling umum digunakan akan dibahas di bawah.

Sisi kiri Timeline (lihat Layer 1) adalah di mana Anda menempatkan lapisan Anda. Biasanya setiap lapisan memegang satu objek dalam film Flash. Anda akan menciptakan beberapa lapisan untuk membuat banner animasi. Ini adalah praktik yang baik untuk menetapkan setiap lapisan nama bermakna.

"Mata" ikon dapat digunakan untuk membuat lapisan terlihat atau invisble sementara Anda bekerja. Kadang-kadang hal ini bermanfaat karena Anda bekerja pada animasi.

"Kunci" ikon digunakan untuk sementara membekukan atau mengunci lapisan Anda tidak ingin sengaja mengubah sementara Anda bekerja.

Daerah di sebelah kiri Timeline menunjukkan frame dalam animasi. Daerah ini digunakan untuk mengkonfigurasi keyframes yang menunjukkan di mana perubahan animasi. Timeline juga dapat digunakan untuk secara otomatis membuat remaja (lebih lanjut tentang ini nanti). Persegi panjang merah transparan menunjukkan bingkai yang sedang ditampilkan pada Stage.

Ikon New Layer di pojok kiri bawah digunakan untuk menambahkan lapisan baru ke Timeline.

Read more ...