Web Site Development

Test 2

Working in DreamWeaver

Test 2 – Working in DreamWeaver 2

What Is a Web Site Design Program?

Web site design programs simplify the creation of Web pages.

They can eliminate the time-consuming and tedious process of coding all of the HTML tags for a page.

They allow you to build a page by placing text and objects in a drawing area, where the program then generates the HTML code for you.

Macromedia Dreamweaver and Microsoft FrontPage are two examples of Web site design programs.

Test 2 – Working in FrontPage 3

Explore a Web Site Design Program

Most Web design programs have similar features in the user interface, including A document window or drawing area where

you enter and place the page elements. Title and menu bars. Toolbars and sometimes a Toolbox. Some type of file or folder list window that

shows all files in the current site.

Test 2 – Working in FrontPage 4

Add Content to a Web Site

Text, graphics, and drawn objects are added to the document window and then formatted as needed.

Other ways to add content include Adding new pages to the site. Formatting the pages. Creating new pages by using existing pages.

Test 2 – Working in FrontPage 5

Add a New Page to the Site

New pages can usually be added in at least two ways: Using the New command on the File menu Using the New button on the toolbar

Some programs will ask you to select the type of page you are adding from a list of page types.

A new page does not become part of the current site until you save it. Use the Save As command on the File menu.

Add the page content in the Document window.

Test 2 – Working in FrontPage 6

Format Font

Highlight text and change properties Text elements have properties that can be

modified, including The text color. The font type, style, and size. Alignment

DreamWeaver creates styles

Test 2 – Working in FrontPage 7

Format Backgrounds

The background color is located in the Page Properties

To change the color of a background Choose Page Properties Select from Color Palette

An image can be used as a background Many images are not made to be used as

backgrounds

Test 2 – Working in FrontPage 8

Create New Pages Based on Existing Pages

You can use an existing page to create a new page by Pasting the copied page into the current project. Rename and save the copied page to add it to the

site. Use the Save As command on the File menu or

the Rename command on the shortcut menu.

Creating new pages from existing pages helps maintain a consistent look and feel for the site. Keep any design elements that appear on all pages.

Delete existing text and enter the text that applies to the new page.

Test 2 – Working in FrontPage 9

Create Text or Graphic Links

To create a hyperlink in DreamWeaver: Select the text or graphic to be used as the

hyperlink. To insert a hyperlink:

Insert Menu Insert Hyperlink on Toolbar You can also link to pages outside the site by

entering a path or URL in the link box. Links within the site are called relative links. Links to

pages outside of the site require a full path to the file and are called absolute links.

Test 2 – Working in FrontPage 10

Images

Images are a large part of web page design.  They are used to attract the user's attention to the information on the page.  The images can also serve the following purposes on a web page:

They can be Hyperlinks They can be Backgrounds They can also have informational purposes (maps,

photos, etc.)

Test 2 – Working in FrontPage 11

GIF Images

GIF (.gif) - best used for graphics with large sections of solid colors (like most clipart)

256 colors per image are available Supports animation Supports transparency Easily compressed (make the file size

smaller)

Test 2 – Working in FrontPage 12

JPEG Images

JPEG (.jpg or .jpeg) - best used for photographs

16.7 million colors per image No animation No transparency Becomes blurry when compressed

Test 2 – Working in FrontPage 13

Other Types

Bitmap (.bmp) - created by a Paint program

TIFF (.tif or .tiff) - newer image type that only works on newer browsers

PNG (.png) - newer image type that only works on newer browsers Fireworks file

Test 2 – Working in DreamWeaver 14

Horizontal Rules

Image designed to separate sections of a web page

Can be saved from the Internet

Test 2 – Working in FrontPage 15

File Name Rules for Web Pages

Never use spaces within, before, or after the name

Never use unusual characters within a file name. Avoid punctuation marks, accents, or other special

characters.  (The period, hyphen, and underscore are the only characters allowed)

Keep filenames short but meaningful Stay consistent with file extensions Capital Letters should only be used for Folder

Names.  HTML files should only use lowercase letters.

File Name Rules for Web PagesRule Correct Incorrect

Never use spaces within, before, or after the name

myhomepage.htm my homepage.htm

Never use unusual characters within a file name.  Avoid punctuation marks, accents, or other special characters.  (The period, hyphen, and underscore are the only characters allowed)

oceanlife.htmocean-pacific.htmpacific_ocean.htm

ocean/life.htmocean(pacific).htmpacific+ocean.htm

Keep filenames short but meaningful

bball_roster.htmvar_schedule.htm

varsitybaseballschedule.htmpage1.htm

Stay consistent with file extensions

.htm or .html.jpg or .jpeg

using multiple forms of file extensions

Capital Letters should only be used for Folder Names.  HTML files should only use lowercase letters.

homepage.htmlZoo/index.html

Homepage.htmlzoo/Index.html

Test 2 – Working in FrontPage 17

Bookmarks

Bookmarks are hyperlinks that direct the user to other sections of the same page.

They should be used for long pages that require scrolling.

Test 2 – Working in FrontPage 18

Using Tables

Tables can be used for many different tasks on a web page:

Organizing information in a Table Positioning Images on a page Organizing all the material on a web

page

Test 2 – Working in FrontPage 19

Inserting a Table in DreamWeaver

Insert Menu

Insert Table button on the toolbar

Set number of columns and rows

Test 2 – Working in FrontPage 20

Formatting a Table

Size of Table Merging Cells Cell Padding

space between cell border and text Cell Spacing

space between cells Borders

size "0" is for invisible tables Shading Table Position

Test 2 – Working in FrontPage 21

Publish a Site

When your preparation work is done, you are ready to upload your site.

Once published to the Web server, your site can be viewed by anyone.

Design programs usually have a view that shows the local files (on your computer) and the remote (server) files.

You usually click a button to start transferring files from the local side to the remote side.