Tutorial 1 : Layout Design (Front Page)

1. Design Layout website dalam Adobe Photoshop (Any version)

2. Ready to slice the layout.

LAYOUT SLICING
1. Select Slice Tool di Tool Bar atau slice shortcut (K)

2. Start slice the layout.
*Slice Tips: Slice area yang akan digunakan untuk buat links, thumbnail atau kawasan gambar yang akan diubah frequently.

3.  File > Save as Web > Save > File Name: index > File type as: HTML and Images (.html) >Click  Done

4. Click Open saved file name : index.html ( you can see the browser open the jpeg file with no linked pages.)

5. Now we gonna do links to this page.=)

6. Open Macromedia Dreamweaver > File > New Document > Click Define a Site (memudahkan web management nanti)

7. Import file name : index.html> Ctl A and make it center by click at the Align Center at Menu Propertise

8. Right Click in the work space and choose Page Propertise > Choose Black in the backgroun color.

DONE!

at the end of this tutorial, you should know:

1.how to design, slice and save the design layout into .html

2. how to import and define a site in macromedia dreamweaver. =)

Thanks for now class!

Advertisement