Upload
melvin-kibbe
View
222
Download
0
Tags:
Embed Size (px)
Citation preview
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.