Website Full Abis

7/31/2019 Website Full Abis

1/28

Merancang Website ( Full Abis ) Webmaster Tingkat Dasar 1

http://www.dremi.info/tutorial.php?cPub=Hits&cID=24

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami [email protected]

Untuk media pembelajaran Offline

TUTORIAL MERANCANG WEBSITE ( FULL ABIS )

Kategori: Webmaster Tingkat Dasar 1

Penulis: Hairul Azami

Dipersilahkan untuk diperbanyak, dibajak :-) , dikopi dan disebarluaskan

Karena Ilmu itu untuk diamalkan jadi Letakkanlah Ilmu itu di Depan JIDAT Kamu,

agar orang lain dapat mempelajari dan MELIHAT ilmu kamu"


2/28





Bagian - 1

Aloha, nah lu yang masih pada bingung dan suka ngontak2 gue via YM tentang carabikin web dari awal perancangan ampe dipublish di internet...niiii buat lusemua...Selamet menikmati deeee....

Tapi inget ni langkahnya mayan panjang, jadi lu mesti ngerjain syarat2nya dulu

1. Ga mandi 2 hari 2 malem

2. Bikin kopi 2 sachet ABC Mocca3. Rokok 1 bungkus kayaknya cukup dee ...4. Matiin HP lu, biar cewe nyebelin lu ga usah ganggu2 lu dulu5. Yang paling penting, Puter Musik kebanggan lu...sekeras2nya ampe tetangga lu padamarah2 hahahahahaha...

--> The Misfits : Dig Up Her Bones--> Danzig : Mother, Am I Demo--> Sex Pistols : BODIES

Hehehekk....syarat diatas terbukti mampu menyembuhkan penyakit malas danbingung....jadi lu cobain deeehh...

Langkah Perancangan Layout

Bikin bagian Bar Amplifier (Header)...

1. Bikin dokumen baru 760 x 500 pixels2. Dengan Rounded Rectangle Tool (U) bikin bidang untuk body layout dasarnya, dan


3/28





satu bidang lagi untuk headernya, radius 4 pixels. Ukurannya lu kira2 aja deeehh samaukuran canvas.

3. Lu kasi sedikit stroke untuk body dan untuk headernya kasi style dibawah ini:

Stroke 1 pixel warna #000000

4. Lanjut ke membuat bidang mirip bar amlifier... bikin bidang dengan RoundedRectangle Tool juga, radius = 4 px, tepat diatas bidang header, dengan warna forgroundputih. Ukurannya lebih kecil dikit dari headernya, ubah nama layernya "bar ampi".


4/28





Kalo style sebelumnya masih di Applay, lu clear dulu deh stylenya..masih inget kancaranya..klik kanan di layernya dan pilih Clear Layer Style. Jadi nanti warna path layoutbar ampi akan kembali menjadi putih (warna foruground)

5. Nah sekarang pilih Path Selection Tool (A), klik 2 kali pada bidang layer "bar ampi"agar muncul titik pathnya.

6. Pilih tool Delete Anchor Point Tool dan klik pada titik - titik path layout yangditandai warna merah berikut. Tool ini berfungsi untuk menghilangkan titik path. Jangankaget dulu kalo tampilan layoutnya berubah menjadi miring.

7. Lanjut pilih Add Anchor Point Tool , klik pada titik tanda merah berikut. Untukmenambahkan titik path layout.


5/28





8. Pada titik nomor 1 tarik titiknya ke arah kanan bawah seperti gambar dibawah. Baru lu

gunakan Convert Point Tool untuk mengedit (mengkonvert) titik path nomor 1 tadi.Ikuti arah panah untuk mengedit titik point nomor 1.

Kalo posisi titik satu yang udah di tarik tadi masih kurang ngepas, lu bisa geser lagi kekiri. Jadi biar lengkungan di atasnya agak lebar.

9. Nah sekarang perhatikan titik 2. Dengan Convert Point Tool, klik pada titik path nomor2 diatas, abis ntu tarik garis horizontal pathnya pada bagian yang ditanda merah kekanan .

Titik 2

10. Pada bagian ujung kanan layout bar ampi ini, lu bisa rapiin posisinya, dengan teknikyang sama dengan langkah nomor 9 diatas.


6/28





11. Oke langkah untuk mengedit Path Layout Bar Ampi sudah selesai, tinggal lu polesaja deee...

Lu kasi style deeh.


7/28





Hasilnya...


8/28





Bagian - 2


Bikin atribut bar (Header)...

Untuk bagian bar headernya kita tambahkan beberapa atribut untuk panel display,equalizer, dan tombol2nya.

1. . Buat bidang rounded rectangle tool dengan radius = 4 pixel, taro' di bagian kiri, dankasi style dibawah ini.


9/28





Stroke 1 pixels , color = #000000

2. Abis tu lu kasi text untuk keterangan play Song (DOT.COM), waktu play, dan statusplay. Untuk status play bisa pake Custom Shape Tool --> Triangle. Download Font

Visitor TT2 BRK .

3. Jangan lupa kasi style glossy (inget? pake gradasi transparent), gue pake penghapusuntuk memperhalus bagian yang di tanda merah .

4. Sekarang bikin slider equalizernya. Dengan menggunakan Rounded Rectangle tool

bikin kotak persegi panjang di sebelah panel Display.

Kasi Stylenya.


10/28





Stroke 1 px dengan color = #000000

5. Untuk strip indikatornya bisa lu bikin pake pencil tool (1 px) dengan warna = #000000

6. Terakhir bikin buletan biru lengkap dengan glossy. Kasi style yang sama denganpanel display

Hasil Equalizer

7. Layer layer untuk equalizer lu group aja, dan duplikat menjadi 8. Untuk buletanbirunya lu geser2 sesuai ilustrasi equalizer sebenarnya, tapi jangan lupa lu geserberbarengan dengan layer glossynya.

8. Tambahkan 3 buah tombol bulet biru dan text (On, Auto, Pre) di sisi kanan equalizer.


11/28





8. Dengan teknik yang pernah dijelaskan dalam tutorial Squirrel Mail Interface (WireCable), buatlah untaian kabel sesuai selera lu. Kasi juga panel player di bagian kanannya (tombol next previous gue bikin pake Custom Shape Tool Triangle dan Pencil Tool,ato lu bisa liat cara membuat tombol playernya pada tutorial Extreme GUI Web Layout.

Bagian yang dilingkari merah, hapus dengan Eraser Tool, jadi kabel kecilnya tampakmelilit di belakang kabel gede.


12/28





Bagian 3


Bikin Layout Box Content

Ulangi langkah no. 3 pada halaman 1 untuk membuat box contentnya.

Box content nya bikin tiga: box kiri (left menu), kanan (main body), dan bawah (footer).

Bikin Menu

1. Pada bagian box main body Bikin kotak dengan rounded rectangle tool radiusterserah lu yang penting matching aja. kasi gradasi abu2 dan sedikit sentuhan Outerglow multiply gelap dan stroke 1 px (color #000000).

Tambahkan text2 menu diatasnya dengan dipisahkan oleh garis2 pencil berwarna hitam.

Tambahkan juga hiasan rectangle gradasi biru (k aya bikin tombol biru tadi) di bagiankanan nya.


13/28





Bagian 4


Slicing Layout di Image Ready

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

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

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

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

2. Selanjutnya perhatik an tombol Edit in ImageReady dibawah, Tekan untuk berpindahke Adobe Image Ready, shortcut Keyboard nya [CTRL+SHIFT+M].


14/28





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 diPhotoshop.

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.


15/28





--->

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

Tombol Animasi RollOver di Image Ready

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

Tombol Rollover = Jika tersentuh mouse akan berubah tampilannya


16/28





1. Klik pada slice tombol Home, pilih layer textnya, dan tekan ikon "Create RolloverState".

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

Baru kasi Style pada layer Text Home nya, kali ini kita gunakan perubahan warna textHome 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 untukdi load ke web nantinya kita bisa tentukan size dan kualitas imagenya.

Ada beberapa format Image sebagai hasil dari Teknik Optimize ini:


17/28





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

Untuk mengoptimize caranya klik pada Petak Slice baru mainkan FormatOptimizenya......Hasil size gambar bisa dilihat di bagian bawah lingkaran merah sepertipd gambar..

Menandakan Slice gambar memperole h size 5.104 Kbyte. dengan format GIFExport File Dokumen ke Format HTML + IMAGES

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

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


18/28





Sampai sini proses perancangan Layout sudah selesai...


19/28





Bagian 5

Langkah Editing Layout

Menggunakan Macromedia DreamWeaver

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

Pada kasus ini gue cuma akan membahas penggunaan Dreamweaver dari segi Editingdan 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 akanmembahas pembuatan website under Root Server. Pilih NEXT


20/28





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

Pilih "Edit Local copie s on my machine, then ....dstrusnya" , dan klik icon Folder tempatpenyimpanan folder situs Anda (dalam hal ini hasil optimize yang lu buat tadi dari ImageReady) - NEXT


21/28





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

Tera khir akan muncul konfirmasi hasil sementara perancangan manajemen situs barulu, Lu klik deh tombol DONE nya. Selesai dee..

Aduuuh ngantuk gue


22/28





3. Selanjutnya pilih File > Open = index.html (file situs) atau bisa juga melalui double klikpada 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.


23/28





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

Pilih Tab Layout

5. Dengan memilih Tab Layout Dokumen diatas, maka akan muncul tampilan garis2pemisah slice yang kita buat di Image Ready sebelumnya. Garis2 ini merupakan table2yang telah diciptakan oleh Imageready dalam kode2 HTML nya saat kita mengexportDokumen 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, karenanantinya akan kita isi dengan konten website


24/28





7. Sebagai contoh di bagian nomor dua lu [CTRL + KLIK] pada kotak slice berwarnabirunya 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 lupake apa yang lu mau...Mau Text boleh mau gambar lagi boleh...suka2 lu deee. namaWebsite nya juga kan "Website Gue" hehekeehehekehehe....Ntar yee gue pipis dulu dah

jam 1:00 malem niii


25/28





Bagian 6

Langkah Editing Layout

Menggunakan Macromedia DreamWeaver

WOKE kita lanjut lagi...contoh lainnya kita akan membuat table dalam bagian kontentadi.

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 in spirasi lu...Contohnya seperti padagambar...


26/28





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

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

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

Thanks, semoga bermanfaat AMIN...

Hairul Azami


27/28





Kenalan Nyoook..!

Nama Lengkap : Muh. Khairul Azami

Panggilan : Emi

Kelahiran : Selong Lombok Timur, 29 September 1983

Alamat Rumah : Jl. Pariwisata Gg. 05/VI Ling. Pengempel Kodya MataramNusa Tenggara Barat 83121.

Design Studio : Jl. Tubagus Ismail Dalam 18 Rt 01/06 Gg. Kubang Sari IIBandung Jawa Barat 40132.

Hobi : Web and Graphic Design , Musik, Membaca, Merenung :-)

Profesi : Sebagai Webmaster pada sebuah perusahaan swasta, dan

sebagai web programmer pada beberapa yayasan pendidikandan agama, aktif mengerjakan projek web design, serta berbagiilmu di website pribadi, karya sendiri gue untuk anak bangsa.

Musik : Punk (Ingat bukan Punk Rock / Melow Punk,tapi The Original Punk Skin, era 80 an)

Lagu Gue : The Ramones (Somebody Put Something in My Drink),Danzig (Mother), The Misfits (Dig Up Her Bones),Sex Pistols (Save the Queen & Bodies)


28/28



Website Kebanggaan Gue..!

Website : http://www.dremi.info Website gue pernah dimuat dalam PC-Mild ( Powered by PC-Media ) Edisi 22 Januari 2007 Sebagai Website TutorialPhotoshop Berbahasa Indonesia

E-mail : [email protected]

Yahoo! Massanger ID : hairulazami

Contact Person : 0813 9513 4144

Documents

Website Full Abis