Download presentation
Presentation is loading. Please wait.
1
ETT 429 Spring 2007 Web Design I
2
Tools for Web Design Microsoft Word Microsoft Publisher
Microsoft Frontpage Netscape Composer Macromedia Dreamweaver Mozilla Composer
3
Mozilla Composer Where to find it Definition of WYSIWYG New Document
Saving Files Opening files in a Browser
4
Netscape Composer Where to find it New Document Definition of WYSIWYG
Saving Files Opening files in a Browser
5
Web Design Basics HTML tags Standard tag layout
<html> Beginning of html document <head> Place information about the webpage here <Title>My Web Page</Title> </head> End of header information <body> All text and images viewable to the user </body> End of body </html> End of html document
6
Composer Layout Standard Toolbar Formatting Toolbar View options
Work area
7
Text changes Style (bold, italics, highlighted, underlined)
Headings – use sparingly Changes in spacing Bullets/numbers (don’t center) Indenting Alignment (under Format)
8
Page Properties (colors)
Under Format dropdown Changing Page colors Custom Colors Background colors Background image
9
Page Properties (meta tags)
Under Format dropdown (Page title and properties) Title Author Description
10
Opening files in a Browser
Used to preview the web page after design Two methods for previewing document If in Composer, under File Preview In in web browser: Under File open Use browse to find file Select file and open
11
File Management Review
Web design is not like Office when it comes to file management Files inserted or linked to web page are not automatically there Remember, a web pages is just the directions (e.g., make this text blue, download this image, put the image there)
12
Images Inserting an image Location Alternate text
ADA compliance Dimensions (how to change) Appearance Spacing Text alignment Linking an image
13
Tables Inserting tables Right click tables to change their properties
Rows Columns Width Border Right click tables to change their properties Tab at end adds another row Same functions as Office
14
Links Three major link types Creating a link Absolute Relative
Within document (anchored) Creating a link Can be any of three types Either type in absolute link or choose file
15
Link Types Three major link types
Absolute – A link inside of an HTML document that refers to another document by it's FULL name e.g., Relative - A link inside of an HTML document that refers to a document in relation to the current document. For example, ../images/seal.gif is a relative link. (contrast with absolute link). Anchored (within document) – A link inside of an HTML document that links one part of the document to another part within the same document (often used in long pages or pages with many sections).
16
Inserting Links Creating a link Steps to creating link
Can be any of three types Steps to creating link Highlight text to make a link Click on link button Either type in absolute link or choose file
17
Email Links Email links Made the same way as other link types
Use mailto: command e.g.,
18
Anchored Links Two parts: anchor and link
Anchor – location in document where you place named anchor tag Found under Insert Named Anchor… Link – within document hyperlink that sends browser to anchor
Similar presentations
