Belajar Cara Membuat Website Dengan Photoshop Dan Dreamweaver (Newbie) _ W3function

2/6/2014 Belajar Cara Membuat Website dengan Photoshop dan Dreamweaver (Newbie) | W3function.com - Indonesian Web Design and Development Studio

http://www.w3function.com/blog/index.php?p=det&idn=24 1/19

homeberandaportfoliokarya kamiservicesproduk & jasa

Pembuatan Website & DesainPaket Toko OnlinePaket Tema Wordpress

Kursus Pembuatan Websiteabout tentang kamiblogArtikelcontactkirim email

@w3function

Program Baru W3function

Online Courses

Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan,

publikasi website di internet sampai dengan tekhnik SEO

Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

Mendaftar

Paket Toko Online

W3function Store

Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

Selengkapnya



Desain dan Pengembangan Web

Custom Project

Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan

bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

Selengkapnya



Belajar Cara Membuat Website dengan Photoshop dan Dreamweaver (Newbie)

Dibawah kategori HTML,CSS

344Like

Tweet

Bookmark

Ada banyak alasan mengapa seseorang ingin membuat websitenya sendiri. Antara lain, mereka ingin agar tulisan dan gambar mereka

dapat dilihat oleh banyak orang, bisa juga karena tugas sekolah atau memang ingin fokus menjadi seorang webmaster.

Pada artikel ini, kita akan sama-sama belajar cara membuat website dan akan menciptakan salah satu bentuk website personal. Website

ini akan kita desain dengan nuansa banyak warna sehingga mempunyai kesan yang menarik walaupun bisa dibilang proyek pertama inisangat sederhana sekali karena untuk pemula. Walaupun demikian anda bisa memodifikasinya sendiri sesuai dengan kreatifitas anda.

Sebelum kita memulai silahkan instal aplikasi Photoshop dan Dreamweaver pada operating system anda. Kedua aplikasi ini tidak gratis

tapi merupakan pilihan yang tepat untuk membuat project website, untuk membeli aplikasi ini anda dapat men-download-nya di situs



resmi Adobe. Mari kita memulai tutorial pembuatan website apabila anda sudah memiliki kedua aplikasi tersebut. Berikut merupakanhasil dari proyek Websiteku

Membuat Layout Desain Awal dengan Photoshop

jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel

Height : 875 pixel Resolution : 72 pixel/inch Background Content : Transparent

Pilih rounded retangle tool pada tool panel

dan samakan setingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang vertical seperti pada gambar dibawah



click kanan pada shape 1 (bidang yang anda buat) di bagian panel layer disebelah pojok kanan bawah kemudian pilih blending option ->click gradient dan pilih gradasi warna yang anda sukai... pastikan warna bawah adalah warna dasar putih

Hasil dari gradasi yang anda buat akan menghasilkan gambar seperti berikut :



buatlah bidang untuk panel menu dengan rounded retangle tool pada tool panel seperti sebelumnya beri sentuhan warna yang berbeda

dengan layer pertama tetapi tidak melenceng dari tema anda, kemudian tempatkan pada sebelah kiri atas sehingga anda mendapatkangambar seperti dibawah ini

buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya dengan rounded retangle tool pada tool panel,

tempatkan sejajar dengan bidang yang anda buat sebelumnya putarkan sampai arah kemiringan 250 dengan move tool



kemudian copy layer bidang dengan cara tekan ctrl+alt+shift dan geser kebawah sebanyak 4 kali. Beri sentuhan warna pada bidangyang telah anda buat sehingga akan tampak seperti berikut:

Ketik daftar menu gunakan Type Tool dengan lambang (T) pada tool panel

Isi text pada bidang untuk daftar menu dengan : Halaman Utama, Tentang Saya, Galerry Foto dan Link. Kemudian pada sebelah kananberi Logo dan judul Website yang sesuai dengan keinginan anda . Sampai tahapan ini kita sudah berhasil merancang layout Websiteku

dengan tampilan sebagai berikut



Gunakan Slicetool

kemudian slice Layout website menjadi 6 bagian yaitu : 4 slice untuk daftar menu, 1 slice untuk logo, dan 1 lagi untuk untuk content/ isiweb.

Sekarang anda tinggal menyimpanya saja. Pilih File->Save For Web



dan akan muncul wizard seperti berikut

pada opsi dibawah save, anda bisa menentukan format gambar yang akan di save mulai dari gif, png, jpg.

apabila sudah memilih sebelum di save beri nama file anda dengan index, pilih opsi HTML and Images, simpan layout anda pada satufolder yang anda beri nama Websiteku

Sampai sini design untuk layout dengan menggunakan photoshop sudah selesai dan selanjutnya anda tinggal melakukan mark-up atas fileindex.html yang telah kita save tadi dengan macromedia Dreamweaver.

Mark-Up Tag HTML dengan Dreamweaver

Setelah desain web di-slice dengan photoshop, sekarang saatnya kita melakukan sedikit modifikasi dengan menggunakan Dreamweaver.Pada saat saya menulis artikel ini saya menggunakan dreamweaver versi 8, di versi yang lebih tinggi seperti Dreamweaver CS 3/ 4/ 5

pada dasarnya tidak akan jauh berbeda. Silahkan jalankan aplikasi buatan adobe ini dan Anda akan melihat tampilan seperti gambardibawah ini:



buka file index.htm yang telah kita save pada sesi photoshop dengan cara pilih File->Open setelah file index.html dibuka pada

dreamweaver delete gambar slice yang ke 6 (enam) atau gambar dengan nama index_06.png, yaitu gambar yang digunakan untuk isicontent.

Jangan Heran bila tampilan layout website menjadi hancur seperti gambar dibawah, atur tabel HTML sehingga tampilan web menjadi

normal lagi dengan cara menggeserkan mouse pada garis titik-titik (kolom table) di tampilan design dreamweaver

Setelah anda mengatur tata letak gambar pada tabel pindahkan opsi view ke show code view sehingga anda dapat melihat Tag-tag

Mark-up HTML seperti berikut :



Nah selanjutnya kita Modif tag HTML dengan menambahkan Cascading Style Sheets (CSS). Bagi yang belum mengenal CSS silahkan

menuju artikel berikut Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie), apabila anda sudah paham silahkan tambahkan tagberikut kedalam tag head HTML anda.

.content { background:url(images/index_06.png) bottom; padding:20px 20px 40px 20px;}

Dengan penambahan tag tersebut struktur HTML anda akan menjadi seperti code dibawah ini:

Untitled-1

.content { background:url(images/index_06.png) bottom; padding:20px 20px 40px 20px;}



Dengan demikian maka kerangka website anda sudah jadi. Langkah selanjutnya kembalikan tampilan dreamweaver ke design view

"Show Design View" kemudian isi bagian kolom content yaitu pada tag text dengan hal-hal yang ingin anda publikasikan pada website anda. Setelah selesai save HTML dengan nama index.html, lalu save asdengan nama file yang berbeda about.html pada folder yang sama, save as lagi dengan nama file gallery.html dan yang terakhirlink.html sehingga kini anda memiliki 4 (empat) file html yang berbeda (semuanya harus dalam folder yang sama).

Isi kolom content pada masing-masing file yang sudah anda buat sesuai dengan tema masing-masing file, yakni isi halaman utama website,tentang kita, galeri dan link. saya contohkan dibawah merupakan isi halaman utama

Langkah terakhir setelah mengisi semua file adalah menghubungkan/melink-an file yang satu dengan yang lain. caranya mudah saja. clicksetiap menu link pada website kita lalu pada properties pilih link dan click icon folder seperti dapat dilihat pada gambar dibawah :



pilih file yang ingin di hubungkan

Lakukan hal yang sama dan hubungkan semua file, selesailah project anda, kini anda mempunyai website yang anda rancang sendiri...

Catatan Penting : Pembuatan website diatas merupakan salah satu cara perancangan web yang berbasis Table. selain menggunakantable sebetulnya ada cara lain yaitu dengan menggunakan div atau campuran keduanya div + table. kedua cara memiliki plus minusmasing-masing dan anda akan mengerti dengan sendirinya seiring dengan pengetahuan dan pengalaman anda dalam membuat website.

Anda bisa mendownload dan melihat demo dari tutorial diatas dengan ukuran lebar gambar lebih besar yaitu 980px untuk mempermudahpembelajaran anda



Untuk Anda yang memang berniat belajar membuat website secara serius berikut ini tahapan belajar desain web yang dapat andatemukan di w3function sesuai dengan urutannya

Daftar Referensi tag HTML dan HTML5 Beserta KegunaannyaPengertian dan penjelasan Dasar CSSCara Penerapan CSS pada HTMLPenggunaan CSS pada Text, Fonts, Links, List dan TablePenggunaan CSS pada Box Model : Border, Padding, Margin, OutlineCSS 3 untuk border dan background

Tips dalam Menuliskan CSS yang BaikBelajar membuat layout desain website dengan tag table (Newbie)Belajar membuat layout desain website dengan tag tableless (Medium)Belajar membuat layout template desain website HTML5 semantic (Advance)Belajar membuat desain website responsif (Skilled)

Semoga bermanfaat :)

Anda juga mungkin suka dengan artikel ini :

Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 2Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline

Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 3Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 1Daftar Referensi tag HTML dan HTML5 Beserta Kegunaannya

Komentar

344Like

Tweet

Bookmark

roni (19 Jan 2014 12:28:23)

bermanfaat

Jasa Download Shutterstock (14 Dec 2013 09:38:31)



Sipp.. Penjelasan yang rinci, cocok buat pemula.. thanks gan :)

adi (12 Dec 2013 12:25:31)

terimakasih sharenya

pras (06 Dec 2013 09:24:57)

mantap...gan....sangat bermanfaat...mohon pencerahan gan ,...maklum newbie....tanks

ray (06 Dec 2013 08:45:38)

Sanagt menarik dan bermanfaat bagi pemula

Muat Komentar Sebelumnya (166 komentar)

Nick Name

Your Email

Website http://

Write your comment Here

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.



Simpan Komentar

Member Login / Register

Username / email

Password [ Lupa password? ]

Login

W3function ProjectGeneral Stuff

jQueryAJAXPHPHTML,CSSPhotoshopInspirationDownloads

IllustratorWorksWebsite TipsWordpress

Most Viewed Articles

Belajar Cara Membuat Website dengan Photoshop dan Dreamweaver (Newbie)Kumpulan 59 Font tulisan tangan (handwriting / huruf sambung) yang bisa di Download secara GratisPengertian CSS dan Cara Penerapan CSS pada HTML

Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 1Pengertian Ajax dan Contoh Penggunaan Ajax pada WebsitePengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)25 Design Website Artistik TerbaikTutorial dan Penjelasan menggunakan Styling CSS ( Cascading Style Sheet) untuk Text, Fonts, Links, List dan TableControl Flow dalam PHP (if - else, if - elseif - else, switch - case, for, while, break, continue, return, exit)Variable dan Tipe Data pada PHPPengantar dan Penggunaan jQuery pada Website

Operator pada PHP

Social and Recent Articles

w3function.com

1,735 people like w 3function.com.

Facebook social plugin

Like

Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 9 - Membuat Template Komentar (comment.php)Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 8 - Membuat Template Single Post, Post



Attachment dan 404

Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 7 - Membuat Template Index

Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 6 - Membuat Template HeaderKumpulan Layanan Website Dan Program Yang Dapat Menganalisa Kecepatan Loading WebsiteTahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 5 - Sanitasi dan Validasi untuk Keamanan ThemeTahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 4 - Menyiapkan Fungsi-fungsi (Functions) ThemeMembuat Desain Web Bernuansa Cat Air dengan Photoshop Bagian 2Pengumuman 2 Pemenang Gratis Biaya Pendaftaran Kursus W3function

Recent Comments

AYANG 21 Jan 2014 07:52:04

GOOD..

tajul 19 Jan 2014 01:11:40

di coba dulu yh,,, :)..

roni 19 Jan 2014 12:28:23

bermanfaat..

Kaos Oblong 17 Jan 2014 09:47:33

Lagi nyari font yang bergaya kapur tulis nih, kebetulan dont diatas ada satu yang mirip2 langsung tak download..

andy 10 Jan 2014 03:21:05

mantap makasih... culik 1 aja fontnya ehehhe..



Niko 09 Jan 2014 01:45:47

makasih mater, gue udah bisa yg tahap 1 ini :) sekarang lanjut ke tahap 2..

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com initerbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi.Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di

cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributorartikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecualiada statement khusus yang di cantumkan.

Kontributor

http://w3function.com

http://dcytbstudio.com

Social Stuff

w3function.com

1,735Like

Perusahaan

Halaman Utama

Portfolio

Tentang Kami

Blog

Hubungi Kami

Services

Pembuatan Website & Desain

Paket Toko Online

Belajar Cara Membuat Website Dengan Photoshop Dan Dreamweaver (Newbie) _ W3function

Documents

Transcript of Belajar Cara Membuat Website Dengan Photoshop Dan Dreamweaver (Newbie) _ W3function