Paduaan Bikin Web Dengan Photoshop Dan Dreamwever

h o m eberandap o r t f o l i okarya kamis e r v i c e sproduk & jasa

Pembuatan Website & DesainPaket Toko OnlinePaket Tema WordpressKursus Pembuatan Website

a b o u t tentang kamib l o gArtikelc o n t a c tkirim email

@w3function

Belajar Cara Membuat Website dengan Photoshop dan Dreamweaver (Newbie)Dibawah kategori HTML,CSS

435SukaSukaTweet 13

11Bookmark

Ada banyak alasan mengapa seseorang ingin membuat websitenya sendiri. Antara lain, mereka ingin agar tulisan dan gambar mereka dapat dilihatoleh 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 akankita desain dengan nuansa banyak warna sehingga mempunyai kesan yang menarik walaupun bisa dibilang proyek pertama ini sangat sederhanasekali 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 tapimerupakan 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 merupakan hasil dari proyekWebsiteku

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

Belajar Cara Membuat Website dengan Photoshop dan Dreamweaver ... http://www.w3function.com/blog/?p=det&idn=24

1 dari 13 25/03/2015 14:30

Membuat Layout Desain Awal dengan Photoshopjalankan 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 -> clickgradient dan pilih gradasi warna yang anda sukai... pastikan warna bawah adalah warna dasar putih


2 dari 13 25/03/2015 14:30

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 denganlayer pertama tetapi tidak melenceng dari tema anda, kemudian tempatkan pada sebelah kiri atas sehingga anda mendapatkan gambar sepertidibawah ini

buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya dengan rounded retangle tool pada tool panel, tempatkansejajar dengan bidang yang anda buat sebelumnya putarkan sampai arah kemiringan 250 dengan move tool


3 dari 13 25/03/2015 14:30

kemudian copy layer bidang dengan cara tekan ctrl+alt+shift dan geser kebawah sebanyak 4 kali. Beri sentuhan warna pada bidang yang telahanda 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 kanan beri Logodan judul Website yang sesuai dengan keinginan anda . Sampai tahapan ini kita sudah berhasil merancang layout Websiteku dengan tampilansebagai 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/ isi web.


4 dari 13 25/03/2015 14:30

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 satu folder yanganda 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 DreamweaverSetelah desain web di-slice dengan photoshop, sekarang saatnya kita melakukan sedikit modifikasi dengan menggunakan Dreamweaver. Pada saat


5 dari 13 25/03/2015 14:30

saya menulis artikel ini saya menggunakan dreamweaver versi 8, di versi yang lebih tinggi seperti Dreamweaver CS 3/ 4/ 5 pada dasarnya tidakakan jauh berbeda. Silahkan jalankan aplikasi buatan adobe ini dan Anda akan melihat tampilan seperti gambar dibawah ini:

buka file index.htm yang telah kita save pada sesi photoshop dengan cara pilih File->Open setelah file index.html dibuka pada dreamweaverdelete gambar slice yang ke 6 (enam) atau gambar dengan nama index_06.png, yaitu gambar yang digunakan untuk isi content.

Jangan Heran bila tampilan layout website menjadi hancur seperti gambar dibawah, atur tabel HTML sehingga tampilan web menjadi normal lagidengan 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 HTMLseperti berikut :


6 dari 13 25/03/2015 14:30

Nah selanjutnya kita Modif tag HTML dengan menambahkan Cascading Style Sheets (CSS). Bagi yang belum mengenal CSS silahkan menujuartikel berikut Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie), apabila anda sudah paham silahkan tambahkan tag berikut kedalam taghead HTML anda.

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

Dengan demikian maka kerangka website anda sudah jadi. Langkah selanjutnya kembalikan tampilan dreamweaver ke design view "Show DesignView" kemudian isi bagian kolom content yaitu pada tag text dengan hal-hal yang ingin andapublikasikan pada website anda. Setelah selesai save HTML dengan nama index.html, lalu save as dengan nama file yang berbeda about.htmlpada folder yang sama, save as lagi dengan nama file gallery.html dan yang terakhir link.html sehingga kini anda memiliki 4 (empat) file htmlyang 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, tentangkita, galeri dan link. saya contohkan dibawah merupakan isi halaman utama

123456

.content {

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

}

123456789

10111213141516171819202122232425262728293031323334353637383940

Untitled-1

.content {

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

}

?

?


7 dari 13 25/03/2015 14:30

Langkah terakhir setelah mengisi semua file adalah menghubungkan/melink-an file yang satu dengan yang lain. caranya mudah saja. click setiapmenu 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 menggunakan tablesebetulnya ada cara lain yaitu dengan menggunakan div atau campuran keduanya div + table. kedua cara memiliki plus minus masing-masing dan


8 dari 13 25/03/2015 14:30

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 anda temukan diw3function 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 backgroundTips 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 :

Tutorial Membuat Desain Website Responsif Bagian 1 - Navigasi MenuDaftar Referensi tag HTML dan HTML5 Beserta KegunaannyaBelajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 3Tips dalam Menuliskan CSS yang BaikTahapan Membuat Template Design Website Semantic dengan Menggunakan HTML 5

Komentar435SukaSuka

Tweet 1311

Bookmark

rangga (01 Mar 2015 06:52:52)bagi ilmunya banga


9 dari 13 25/03/2015 14:30

Obat Tradisional Keputihan (06 Feb 2015 09:04:06)terimakasih informasinya sangat membantu kk ..

hudacell (02 Feb 2015 07:53:58)boss saya sangat ingin belajar,,,tapi dari bahasa nya saja udh bingun [ gk ngerti sperti apakah itu TAG-DIV-HTML dll] kira 2kalo selalubertanya si boss sanggup jawab?

salotong (30 Dec 2014 08:40:17)makasih gan sangat bermanfaat bagi pemula yang sedang belajar dan membutuhkan tutorial yg lumayan lengkap

DOMINOBET (23 Dec 2014 11:07:22)THANKS YOU FOR INFO AND GOOD LUCK

Muat Komentar Sebelumnya (191 komentar)

Nick Name

Your Email

Website

Write your comment Here

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

Member Login / RegisterUsername / email

Password [ Lupa password? ]


10 dari 13 25/03/2015 14:30

W3function ProjectGeneral StuffjQueryAJAXPHPHTML,CSSPhotoshopInspirationDownloadsIllustratorWorksWebsite TipsWordpress

Most Viewed ArticlesKumpulan 59 Font tulisan tangan (handwriting / huruf sambung) yang bisa di Download secara GratisBelajar Cara Membuat Website dengan Photoshop dan Dreamweaver (Newbie)Pengertian CSS dan Cara Penerapan CSS pada HTML25 Design Website Artistik TerbaikBelajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 1Pengertian Ajax dan Contoh Penggunaan Ajax pada WebsiteTutorial dan Penjelasan menggunakan Styling CSS ( Cascading Style Sheet) untuk Text, Fonts, Links, List dan TablePengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)Kumpulan 100 Lebih Font Terbaik Gratis (Art Deco, Geometric, Urban, Futuristic, Abstrak)Control Flow dalam PHP (if - else, if - elseif - else, switch - case, for, while, break, continue, return, exit)Variable dan Tipe Data pada PHP3 Langkah Membuat Desain Web Responsif (Responsive Design)

Social and Recent Articlesw3function.com

2.877 orang menyukai w3function.com.

Plugin sosial Facebook

SukaSuka

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 404Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 7 - Membuat Template IndexTahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 6 - Membuat Template Header


11 dari 13 25/03/2015 14:30

Kumpulan 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

Rajsa 04 Mar 2015 01:05:20ok gan paham..

rangga 01 Mar 2015 06:52:52bagi ilmunya banga..

adi resmawan 28 Feb 2015 10:34:39terima kasih ya, website saya jadi sedikit lebih responsive sekarang..

Al Hamid 28 Feb 2015 11:25:38Wensite ini saya akui Professional dan awesome Penjelsannya juga Lebih detail dan sangat jelas saya sangat beruntung menemukan w..

frans 28 Feb 2015 11:01:34Good, hatur nuwun,......

iyus 27 Feb 2015 04:05:02thanks gan infonya,,,izin serap ilmunya....

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

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


12 dari 13 25/03/2015 14:30

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

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

Kontributorhttp://w3function.comhttp://dcytbstudio.com

Social Stuffw3function.com

2.877SukaSuka

PerusahaanHalaman Utama

Portfolio

Tentang Kami

Blog

Hubungi Kami

ServicesPembuatan Website & Desain

Paket Toko Online

Paket Tema Wordpress

Kursus Pembuatan Website

CopyRight W3function.com All Right Reserved


13 dari 13 25/03/2015 14:30

Documents

Paduaan Bikin Web Dengan Photoshop Dan Dreamwever