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

Web Site Development
Test 2
Working in DreamWeaver
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 DreamWeaver
2
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
3
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
4
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
5
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
6
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
7
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
8
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
9
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
10
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
11
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
12
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 FrontPage
13
Horizontal Rules
 Image designed to separate sections of a
web page
 Can be saved from the Internet
Test 2 – Working in DreamWeaver
14
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.
Test 2 – Working in FrontPage
15
File Name Rules for Web Pages
Rule
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.htm
ocean-pacific.htm
pacific_ocean.htm
ocean/life.htm
ocean(pacific).htm
pacific+ocean.htm
Keep filenames short but
meaningful
bball_roster.htm
var_schedule.htm
varsitybaseballschedule.htm
page1.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.html
Zoo/index.html
Homepage.html
zoo/Index.html
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
17
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
18
Inserting a Table in DreamWeaver
 Insert Menu
 Insert Table button on the toolbar
 Set number of columns and rows
Test 2 – Working in FrontPage
19
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
20
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.
Test 2 – Working in FrontPage
21