Вы находитесь на странице: 1из 3

How to build a web design.

=========================
Langkah :
1. mendesain dari photoshop/software gambar lain
2. Slice gambar + penamaan (photoshop)
3. Save for web
- Type : html+images
- Setting : custom (other),
- setting : slice > generate css
4. Membuka file html dg dreamweaver
5. mengedit content
- Static Content (*.html)
- Dinamic Content (MySQL dan PHP) | Auto wizard Dreamweaver
> Building database (news & user)
> read (news.php) | include link to below text
> create (isi-berita.php)
> update (update.php)
> delete (delete.php)
> search (search.php)
> user authentication
6. Publishing
==================
Web Dinamis = hal web yg dpt berubah
> Proses dilakukan di server
> Dpt melakukan perubahan melalui browser
> Menggunakan bahasa pemrograman (php,java,asp,jsp,dll)
> Menggunakan Database (MySQL) structured Query Language
Web Statis = hal web yg tdk dpt berubah
> Proses dilakukan di client
> Perubahan melalui Editor

joomla.org
id-joomla.com
CMS (Content Management System)

========================
2. Slice
- daerah yg perlu di-slice antara lain :
> tombol
> layout content
> Header
> layout side content
-kemudian dilanjutkan penamaan dg "slice select tools"
dg cara klik 2x di bagian2 slice
3. Save for Web :
- menu : File > save for web or device
- Pilih file format : jpeg > save
- pilih / buat folder tempat menyimpan
> rubah nama dengan home.html
> Save as Type : html and images
> slices : all slices
> setting : other

- pilihan HTML dirubah menjadi slices


- pilih Generate CSS
- klik OK
- Save

object - properties - action


Rollover image
==============
Photoshop
1. Buatlah tombol dari photoshop ukuran 150x70px
2. Save as dengan nama tombol-normal.jpg
3. Edit kembali dan rubah warnanya
4. save as dengan nama tombol-over.jpg
Dreamweaver
1. Buatlah file html
2. insert > image object > rollover image
3. isi Original image dg tombol-normal.jpg
4. isi Rollover image dg tombol-over.jpg
5. OK
6. Save dan taruh di folder yg sama dg gambar.
Rollover = kondisi ketika cursor diatas sebuah objek

Pemakaian ukuran Pixel dan Persen dalam


layout desain web
Pixel : ukuran desain absolut
Persen : Ukuran Relative terhadap resolusi

PROJECT
=============================
Buat desain dari Photoshop
ukuran = 800x600 pixel
Simpan dg nama "no-absen", bertipe jpg.
contoh : 12-15-23.jpg
======================
Tema : Masa depan.
Web Title : FutureShop
dimensi 1024 x 768 pixel
Resolusi : 72 pixel/inch
Terdapat tombol link sbb:
Home
Category
New Product

Best Product
Contact Us
Technology

Buatlah Desain Layout Toko/Sekolah/produk daerah


ukuran 1024x768 res : 72 px/inch
Analisa juga kebutuhan menunya dan desainnya
Hasil di Print out
1 kelompok 3 siswa.
dikumpulkan/dievaluasi tgl 24 Mei 2010
Thank You..!!!
===================================================

Вам также может понравиться