Lesson 3

This blogsite is specially prepared for students of NAFA taking module FS3004 E-commerce for Fashion Business.

Introduction of Dreamweaver

• Dreamweaver offers a customisable and easy-to-use WYSIWYG HTML editor that doesn’t compromise when it comes to power and flexibility.

• DW is the industry leading HTML editor.

• Beside HTML, DW can interpret PHP, ASP, CSS JavaScript, ColdFusion

• Saving 1^st page as index.html (internet can recognise)

Website infrastructure:

 

How does the Internet work?
How can I have my own website be seen by others?
How does a browser fetch a web page?
How does a browser display a web page?
What is a Web server?
What is an internet service provider?
  http://www.w3schools.com/hosting/host_intro.asp

Defining a new site in Dreamweaver:

Set up a local folder, where Dreamweaver stores the files that you’re currently working.

(To ensure the links you set up on your computer will work when you upload the site to a web server, it is essential that you store all the sites resources in one main folder on your hard drive, and then identify it within Dreamweaver. This is because the link will only work properly if all the site’s elements remain in the same relative location on the web server as with your hard drive.)

http://tv.adobe.com/watch/learn-dreamweaver-cs4/getting-started-02-defining-sites/

DW interface:

Web Design Tool - Image editing

Insert image

Insert image placeholder – Use this when you want to start building web pages before you have all the final content available and you want to visualise the page layout

Exporting Images from Adobe Photoshop

• It’s best to make adjustment to your images using a professional graphics-editing program like Photoshop.
• DW offers a number of editing options – Adjusting brightness & contrast; resizing images.
• Save image in gif, jpg or png format (in photoshop, File > save for web & devices

Resizing images – Although DW allows you to quickly optimize images, however, it is still recommend to crop or trim in PS before importing to DW.

Using table to organize images

Refer to the following tutorial

http://www.siteground.com/tutorials/dreamweaver/dreamweaver_tables.htm

http://www.guidesandtutorials.com/dreamweaver_tables.html

Using AP Div in web layout

Insert layout objects AP Div
The following illustration is base on 3 columns layout

-          Container (page width usually between 940px-960px)

-          Header

-          Left menu

-          Body

-          Left content

-          Right content

-          footer

Size & layout of a web page
http://www.iteracy.com/resources/size-and-layout-of-a-web-page/

How to center a AP Div tag in DW container
http://www.youtube.com/watch?v=GV36n5uYpSM&gl=SG&hl=en-GB

Protecting your copyright images

• Don't have to register every piece you have created.
• Always put on a copyright notice on your work.
• " © your name here @2013".
• Make image harder to "borrow" by reducing the image size from screen viewing.