Langkah Editing Layout

Menggunakan Macromedia DreamWeaver

WOKE kita lanjut lagi…contoh lainnya kita akan membuat table dalam bagian konten tadi.

1. Pilih Menu Insert > Table ato [CTRL+ALT+T]

Masukkan jumlah Row, Coloum, Border, Cellpadding dan Cellspacing nya terserah lu…..

Klik OK….

2. Dalam Table lu bisa isiin apa aja sesuai inspirasi lu…Contohnya seperti pada gambar…

Wah ga nyadar lu yak? lu dah bisa bikin web sekarang, wahhhh hebat2…hehehhee OKE sampai sini langkah editing layout selesai, lu tinggal publish deee web lu.

Pake hosting gratisan juga boleee, kayak Geocities, Tripod, dlll. Kalo yang udah cukup mahir bisa nyoba ke http://www.awardspace.com untuk hosting 200 mbyte GRATIIISSSSS !!! pokoknya disinimah kita nyang gratisan aja deee..

WOKE2 udah ngantuk neee gueh nya.. lu cobain yak,,,semua langkah2nya dan kasi tau gue kalo ada yg ga ngerti atau yang udah berhasil bikin webnya …langsung aja ke FORUm dremi.info yak…

Thanks, semoga bermanfaat AMIN…

Hairul Azami

Klik disini untuk lihat hasil jadi Websitenya

Klik disini untuk Download seluruh filenya (PSD, HTML, IMAGES)

Hal. 1 - 2 - 3 - 4 - 5 - 6

Langkah Editing Layout

Menggunakan Macromedia DreamWeaver

Macromedia Dreamaweaver merupakan tool pengolah web yang paling cerdas menurut gue. Karena hingga saat ini penulis merasa sangat terbantu secara optimal dan belum ada yang mampu menyaingi Tool ini kalo dilihat dari fiture keseluruhannya.

Pada kasus ini gue cuma akan membahas penggunaan Dreamweaver dari segi Editing dan Organisasi Webnya saja.

1. Mulailah dari proses Management Site. Pilih Site > Manage Site pada Dreamweaver.

2. Nanti bakal muncul jendela Manage Site. Lalu pilih New untuk membuat Situs baru.

Nah akan muncul lagi Window baru “Site Definition”

Ketik nama Website Lu misalnya “Website Gue”
Pada kolom Website http://……bisa dikosongkan karena kali ini kita tidak akan membahas pembuatan website under Root Server. Pilih NEXT

Pilih “No, I Do not want to use a server technology” - NEXT

Pilih “Edit Local copies on my machine, then ….dstrusnya” , dan klik icon Folder tempat penyimpanan folder situs Anda (dalam hal ini hasil optimize yang lu buat tadi dari Image Ready) - NEXT

Pilih No, do not enable check in and check out - NEXT

Terakhir akan muncul konfirmasi hasil sementara perancangan manajemen situs baru lu, Lu klik deh tombol DONE nya. Selesai dee..

Aduuuh ngantuk gue

3. Selanjutnya pilih File > Open = index.html (file situs) atau bisa juga melalui double klik pada Panel Files yang sebelah kanan.

4. Ubah ke Mode Layout dengan mengklik tombol Layout seperti di bawah ini…

Klik dulu, lalu akan muncul pilihan mode tampilan dokumen web. Pilih Layout.

Secara otomatis Tab tombol utama layout akan muncul tepat disebelah kanan Tombol pilihan Layout tadi.

Pilih Tab Layout

5. Dengan memilih Tab Layout Dokumen diatas, maka akan muncul tampilan garis2 pemisah slice yang kita buat di Image Ready sebelumnya. Garis2 ini merupakan table2 yang telah diciptakan oleh Imageready dalam kode2 HTML nya saat kita mengexport Dokumen gambar design webnya. Cerdas bukan yang bikin Tool Adobe nya ??? hakhakhak….

6. Nah lu sekarang tinggal klik + [DELETE] aja bagian image nomor 1 dan 2, karena nantinya akan kita isi dengan konten website

7. Sebagai contoh di bagian nomor dua lu [CTRL + KLIK] pada kotak slice berwarna birunya baru lu pilih warna backgroundnya pada Properties Panel (dibagian bawah)

Sentuh warna background pada gambar lainnnya dengan mouse untuk mengambil sample warna.

8. Setelah kedua bagian konten lu kasi warna background lu tinggal isi deee website lu pake apa yang lu mau…Mau Text boleh mau gambar lagi boleh…suka2 lu deee. nama Website nya juga kan “Website Gue” hehekeehehekehehe….Ntar yee gue pipis dulu dah jam 1:00 malem niii

Hal. 1 - 2 - 3 - 4 - 5 - 6

Langkah Perancangan Layout

Slicing Layout di Image Ready

Slicing merupakan teknik memotong objek gambar dengan menggunakan Slice Tool pada Adobe Image Ready. Dalam proses ini kita dapat menentukan ukuran dan size gambar yang di potong.

1. OKE..masih dalam area Adobe Photoshop. Buat garis2 guide untuk membantu dalam slicing nantinya seperti pada gambar. Perhatikan jarak dan posisi guide untuk memperoleh hasil slice yang teratur.

Garis Guide bisa dibuat dengan klik dan drag pada mistar sekeliling dokumen. Kalo mistarnya belum muncul tekan [CTRL+R]

Bagian yang dikasi garis guide adalah bagian2 yang akan dislice, seperti tombol, box konten dan header.

2. Selanjutnya perhatikan tombol Edit in ImageReady dibawah, Tekan untuk berpindah ke Adobe Image Ready, shortcut Keyboard nya [CTRL+SHIFT+M].

Tunggu proses Loading dan File akan ditampilkan secara otomatis di ImageReady.

Sebelum melakukan slicing, pastikan terlebih dahulu, Pilihan Snap to Guide di centang, agar saat men slice arah gerakan mouse akan mengikuti jalur guide yg udah dibuat di Photoshop.

3. Kita mulai dengan bagian petak paling kiri atas pada gambar. Dengan Slice Tool (K) klik dan tarik mouse mulai dari ujung kanan bawah petak guide — > ke kiri atas.

—>

4. Lakukan hal yang sama pada petak2 guide yang lainnya sehingga terbentuk slice pada semua petak guide nya.

Tombol Animasi RollOver di Image Ready

Animasi Rollover merupakan fasilitas yang disediakan oleh Adobe Image Ready untuk membuat tombol yang interaktif.

Tombol Rollover = Jika tersentuh mouse akan berubah tampilannya

1. Klik pada slice tombol Home, pilih layer textnya, dan tekan ikon “Create Rollover State”.

Maka akan muncul sebuah layer Over dibawah layer slice Rollover States pada Panel Slice.

Baru kasi Style pada layer Text Home nya, kali ini kita gunakan perubahan warna text Home menjadi Putih. Caranya sama kaya di Adobe SotoShop (Layer > Layer Style > Overlay).

2. Dengan cara yang sama kasi RollOverStates pada Layer2 Text Tombol yang lain.

Optimize Gambar di Image Ready

Optimize merupakan teknik untuk mengoptimalkan size dan kualitas gambar, jadi untuk di load ke web nantinya kita bisa tentukan size dan kualitas imagenya.

Ada beberapa format Image sebagai hasil dari Teknik Optimize ini:

Format Optimize standar adalah GIF 128 bit No Ditter (No Ditter: akan menghsilkan efek gambar yang lebih lembut karena akan dieksport tidak dalam bentuk titik kasar, melainkan titik - titik halus.)

Untuk mengoptimize caranya klik pada Petak Slice baru mainkan Format Optimizenya……Hasil size gambar bisa dilihat di bagian bawah lingkaran merah seperti pd gambar..

Menandakan Slice gambar memperoleh size 5.104 Kbyte. dengan format GIF

Export File Dokumen ke Format HTML + IMAGES

Terakhir Export file dokumen nya ke format HTML+IMAGES. Pilih File > Save As Optimize. Lalu OK

Maka secara otomatis, file slice (potongan gambar) akan diexport ke format Optimize yang dipilih (GIF) dalam sebuah folder “images”, beserta file HTML nya.

Sampai sini proses perancangan Layout sudah selesai…

Hal. 1 - 2 - 3 - 4 - 5 - 6