Lesson 3

Outline:

• Introduction of Dreamweaver (DW)
• Website infrastructure
• Define a new site
• DW interface
• Review basic structure of HTML documents
• Copyright laws & free stock pictures
• Web design tool - image editing
• Exporting image & inserting image
• Using table to organise images

Introduction of DW

• DW offers a customizable 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 & etc
• Save 1st page as index.html (internet can recognize)

Website infrastructure:-

World Wide Web
The Web is a network of computers all over the world
All the computers in the Web can communicate with each other
All the computers use a communication protocol called HTTP

How does the WWW work?
Web information is stored in documents called web pages
Web pages are files stored on computers called web servers
Computers reading the pages are called web clients
Web clients view pages with a program called a web browser
 Popular browsers are IE, Firefox, Safari & etc

How does a browser fetch a web page?
A browser fetches a page from a web server by a request
A request is a standard HTTP request containing a page address
An address may look like this: http://www.nafa.edu.sg

How does a browser display a web page?
All web pages contain instructions for display
The browser displays the page by reading these instructions (HTML tags)
HTML tags look like this <p>This is a paragraph.</p>

What is a Web server?
The collection of all your web pages is called your web site
To let others view your web pages, you must publish your web site
To publish your work, you must copy your site to a web server
Your own PC can act as a web server if it is connected to a network
Most common is to use an Internet Service Provider (ISP)

What is an Internet Service Provider?
Besides allow user to surf internet
A common internet service is web hosting
Web hosting means storing your web site on a public server
Web hosting normally includes email services
Web hosting often includes domain name registration

Defining a new site
Define local root folder

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.)

DW interface

Design view focuses the Dreamweaver workspace on it WYSIWYG editor, which provides a close, but not perfect, depiction of the web pages as it would appear in a browser.

Code view focuses the Dreamweaver workspace exclusively on the HTML code & a variety of code-editing productivity tools.

Split view provides a composite workspace that gives you access to both the design and code simultaneously.t not perfect, depiction of the web pages as it would appear in a browser.

Code view focuses the Dreamweaver workspace exclusively on the HTML code & a variety of code-editing productivity tools.

Split view provides a composite workspace that gives you access to both the design and code simultaneously.

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.

Insert > Images > locate the directory where image was saved

Editing Images

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.

Resizing images – DW allows you to quickly optimize images, the quality slider, & cropping slider.

Slicing image in Photoshop

Tables

Use table to arrange data, arrange images & etc. 

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