Web Page Design Mid-Term ReviewCH.1-4

Mr. Ursone

Accessing the Web

• Web Page: where you see text, graphics, sounds, etc.

• Uniform Resource Locator (URL): Web address. Ex. http://www.yahoo.com

• Web Browser: Helps you navigate through the internet. Ex. Internet Explore & Mozilla Firefox.

• Hyperlink: a button, when clicked, that takes you to another place on the web

Accessing the Web

• Website: Group of web pages that are linked together

• Home page or index page: The “main” page of the website. Describes the purpose and content.

Types of Websites pg.6

• Portal Web Site: Provides many services from one site. Ex. Lycos - provides news, weather, email, games, search engine, etc.

• News Web Site: News articles relating to current events. Ex. Cbs.com

• Informational Web Site: Contains facts, such as research and statistics. Ex. Usa.gov

• Business/marketing site: Promotes or sells products or services. Ex. Amazon.com

• Educational Web Sites: Formal and informal teaching and learning. Ex. Temple.edu

Types of Websites

• Entertainment Web Site: interactive and engaging. Contains music, video, sports, games, etc. Ex. Freearcade.com

• Advocacy Web Site: Describes a cause, opinion, idea. Ex. Americanhumane.org

• Weblog or blog: Journal that reflects the ideas of the author and/or site visitors

• Wiki: Allows users to add, create, delete, or modify web content

Types of Websites

• Social Network: Online community. Ex. Myspace.com

• Content Aggregator: A business that gathers Web content and distributes it to subscribers for free or for a fee. Ex. iSyndicate

• Personal Web Site: Set up by an individual or family typically not associated with any organization. Ex. Ursone.com

• http://en.wikipedia.org/wiki/Website#Types_of_websites

Planning a Web Site

• Purpose– To keep visitors interested in the site– Easy to navigate– Organized

Planning a Website

• Purpose and Goal– What type of website will it be?

• News, Entertainment, Marketing, etc.– It may be a combination of types

– Develop a statement describing this to your visitors

• Target Audience– Who is your site geared towards?

• People with similar interests, gender, education, age range, income, profession, and computer proficiency

Planning a Website

• Web Technologies– Broadband service (fast)– Baseband (Slow)

• If audience has slow connection you will not want to fill your page with images, flash, graphics, etc.

• Site Comparison– Look at sites that are the same type as

your site– Incorporate what you like from those sites

to your site

Planning a Website (Content)

• Value-Added Content– What topics do you want to cover– How much information will you present

about each topic– What will attract your target audience

to your site– How will you keep them revisiting– What changes will you have to make to

keep your site updated

Planning a Website (Content)

• Text: Bulk of the content• Images: The next most commonly

included content• Color Palette: What colors will you

choose– Limit the number to a select few

• Multimedia: Adds interactivity and action to your site.– Includes: Animation, audio, and video

Web Site Navigation

• Navigation: Pathway through your site– Web pages cannot be isolated from the

rest of your site

• On every page of your site, you must answer 3 questions– Where am I?– Where do I go from here?– How do I get to the home page?

Design Basics

• Navigation/Site Map: Outlines the structure of the site

• See Figure 1-7 on page 12

• Navigation Elements: With a click they help you make your way through a website

• Examples include: Text, buttons, images, site index, a menu, search feature, frames, and a navigation bar

Developing a Web Site

• Typography: the appearance and arrangement of text

• Use web-safe fonts such as Times, Courier, and Arial

• These are more popular and the ones most visitors will have installed on their computers

• Typography, images, page layout, and color are the key design elements that will make up your website

Developing a Web Site

• Page Layout: Establish a consistent, logical layout that allows you to add text and images easily

• Use templates when you can to maintain consistency

• Include one topic per page• Use concise statements and bulleted

points to get your point across• Be sure to review and test your web site

– Consistency, grammatical errors, functioning links and multimedia, is it going to be displayed properly

Publishing a Web Site

• Publishing: Making your web site available to visitors

• Involves uploading the site to a server

Understanding Web Addresses (URLs)

• What does all that http://abcde.com/fgh/ijkl/ mean anyway???

• HTTP:// - (Hypertext Transfer Protocol) Ok what does that mean?– It establishes a connection between the

web server and your computer and sends you back your web pages

Understanding Web Addresses (URLs)

• http://abcde.com/fgh/ijkl/

Domain Name

• The main component of a Web sites URL– Kind of like the web sites last name– Usually the Web sites Home page name

Understanding Web Addresses (URLs)

• http://abcde.com/fgh/ijkl/

• Tells the visitor which route they took to get to this page on the website

Path (Subfolder)

Maintaining a Web Site

• Changing and updating content– By adding new text, images, etc. or by

deleting obsolete material– Check for broken links and adding new

links if necessary– Document the last change date

• Even when no revisions have been made

Insert Bar

Title Bar

Files panel tab

Set Magnification

Zoom Tool

Properties Inspector

Tag

Document Window

Panel Groups bar

Expander arrow

Property Inspector bar

Panel Groups

Close Document

Answers Dreamweaver Window1. _______________ 2. ________________

3. _______________ 4. ________________

5. _______________ 6. ________________

7. _______________ 8. ________________

9. _______________ 10.________________

11. _______________ 12.________________

13. _______________ 14.________________

Title Bar

• Displays the application name, Adobe Dreamweaver CS3; in brackets, the Web page title; and, in parentheses, the file path and file name of the displayed Web page.

Panel Groups

• Sets of related panels docked together below one heading.

Files Panel

Insert Bar

• Allows quick access to frequently used commands.

Status Bar

• Provides additional information about the document you are creating, i.e. <body>

• Located at the bottom of the document window

Status Bar

Standard Toolbar

• Contains buttons for common operations from the file and edit menus

Undo vs. Redo

• Undo: undoes the last action taken on a page

• Redo: Reverses the last undo action

Format Box

• Allows you to apply a paragraph, heading, or preformatted style to text.

Font Box• Applies the selected font combination to the text and

determines how a browser displays text on your web page.

HTML Font Size

• The default HTML font size is 3, which equates to 12 points in a word-processing document

Inserting a Line Break• Shift + Enter

Changing Text Color

• Eyedropper and Color Picker– Dreamweaver has an eyedropper

feature that lets you select colors and make perfect color matches

– Color Picker lets you select the colors for page elements and text.

Unordered & Ordered Lists

• Unordered List = Bulleted List Example

Example

• Ordered List = Numbered List1. Example

2. Example

3. Example

Dreamweaver Views

• Code View:– Environment for writing and editing code

• Design View:– Environment where you assemble your

Web page elements and design your page

• Split View:– Allows you to see both Code view and

Design view for the same document in a single window

Folders

• Local root folder/master folder: The main folder for the web site. It contains the subfolders within it.

• Subfolder: a folder inside another folder

• Path: The succession of folders that must be navigated to get from one folder to another

Property Inspector

• Lets you see the current properties of the selected object/text and allows you to alter or edit them

• CTRL + F3 collapses the Property Inspector

Text Headings

• Heading 1 <h1> produces the largest text

• Heading 6 <h6> produces the smallest text

• Text Headings are found in the properties inspector

Miscellaneous

• The Dreamweaver Workspace is an integrated area in which the Document window and panels are integrated into one larger application window

• The Menu Bar displays the Dreamweaver menu names

• A Web Site is a set of pages on a server that are viewed through a Web browser by a visitor to the site

Miscellaneous

• A remote site are files on a server that make up a Web site from the author’s point of view

• A local site is a set of files on your local disk that correspond to files on a remote site

• You can modify the default properties of a Web page by using the Page Properties dialog box.

Miscellaneous

• Paragraph Formatting is the process of changing the appearance of text.

• Character Entities, another name for character codes, allow a browser to show special characters.

Web Structure

• Types– Grid– Random – Hierarchical– Linear

Document Toolbar

Show Code View

Show Code and Design View

Show Design View

Document TitleFile Management

Preview/Debug in Browser

Refresh Design View

View Options

Visual Aids

Home Page

• Most Web servers recognize index.htm as the default home page and automatically display this page without requiring that a user type the full URL

• Is similar to a table of contents or an index in a book.

Images

• Bitmap images are a common type of image file that maps out or plots an image on a pixel-by-pixel basis.

• The W and H boxes in the Property inspector indicate the width and height of an image, measured in pixels.

• You can specify the size of an image in a variety of units. In source code Dreamweaver converts the values to pixels

• The Reset Size tool, on the properties inspector, is used to reset the W and H values to the original size of an image after they have been altered

Images

• The Bit Resolution of an image is described by the number of bits used to represent each pixel.

• GIP: Graphics Interchange Format• JPEG: Joint Photographics Experts Group• Invisible Element Marker: shows the location of

the inserted image with the HTML code• Alt: Specifies the Alternative Text that appears in

place of the image for text-only browsers or for browsers that have been set to download images manually

Alignment Options (Table 2-3 pg. 146)

V and H Space

• Allow you to adjust the vertical and horizontal space between the image and text

• Found in the Property inspector

Low Src

• Found in the Property Inspector– Specifies the image that should be

loaded before the main image

Editing Images

• Found in the Property Inspector• Optimize: The process of compressing and setting

display options for Web graphics• Cropping: lets you edit an image by reducing the

area of the image and allows you to eliminate unwanted or distracting portions of the image

• Resampling: adds or subtracts pixels from a resized JPEG or GIF image

• Brightness and Contrast: Modifies brightness or contrast of the pixels in an image

• Sharpening: adjusts the focus of an image by increasing the contrast of edges found within an image

Different Types of Links

• Absolute/External Link: Used to link to documents on other servers. – Links you to web pages outside of your own.

• Relative/Internal Link: Links you to pages within your site

• Named Anchor: used to link to a specific location within that web page

• Email link: creates a blank e-mail message containing the recipient’s address

Site Map

• Graphical Representation of the structure of a Web site

Standard Toolbar

NewOpen

Browse in Bridge

Save Save All

CopyCut

PasteRedo

Undo

Tables

• Dreamweaver provides 3 ways to use the table feature:

1. Standard mode: uses the Insert Table diaglog box

2. Layout mode: freeform process where you draw the table and individual cells (complex)

3. Expanded mode: allows you to edit table elements. Adds cell padding & spacing to tables, temporarily increasing borders – this way you have easy access to items that are difficult to select for precise editing.

Page layout

• Process of arranging text, images & elements on page

• Rules: site should be easy to navigate, easy to read, and quick to download

• Tables download fast & can be used anywhere

• Tables allow you to position elements on a Web page with great accuracy / many design options

Typical Web Page

• Composed of 3 sections

1. Header – located at top, may contain logos, images or text that identifies site

2. Body – informational text about site

3. Footer – hyperlinks for contact info & navigational controls

Header

Body

Footer

Understanding Tables

• Table is presented as a grid of rows & columns• Row – horizontal collection of cells• Column – vertical collection of cells• Cell – the container created when row & column intersect• Cell padding – the amount of space between the edge of a cell & its

contents• Cell spacing – the amount of space between cells• Border – when table’s border is set to 0 and the table is viewed in a

browser the outline does not appear / when displayed in Dreamweaver an outline will appear

• Percent – when table width is specified as percent it expands the width of the window and the monitor size where its being viewed

• Pixels – a table with the width specified in pixels will remain the same size regardless of the window & monitor size

• Not necessary to declare table width – when no value is specified the table is displayed as small as possible & expands as content is added

Layout Category

• The layout category enables you to work with tables & other features.

• In standard mode a table is displayed as a grid and expands as you add text & images

• You define the structure of the table using the Insert Table Dialog box

Insert bar layout category

Standard mode

Expanded tables

Table Insert row above

Insert row below

Insert Column to

the Left

Insert Column to

the Right

Draw Layout Table

Draw Layout Cell

Inserting Table Dialog Box in Standard Mode

Property Inspector Table Features

Table ID box

Clear column widths &

clear row heights butto

ns

Convert table width to pixels

Convert table width to percent

Table background color

Table border color

Border width

Align box

CellPad &

CellSpace boxes

Table Formatting

• The order of precedence for table formatting is cells, rows, and table.– When a property, like background color or

alignment, is set to one value for the whole table and another value for individual cells, cell formatting takes precedence over row formatting, which in turn takes precedence over table formatting

• When a table is inserted it defaults to the left– Using the property inspector you can center the

table by selecting it and applying the Center command

• Default vertical cell alignment is middle

HTML structure within a Table• When you view your table in

Dreamweaver:• <table> tag indicates whole table –

clicking this tag selects the whole table• <td> tag indicates table data – clicking it

selects the cell at the insertion point• <tr> tag indicates table row – clicking it

selects the row containing the insertion point

Good to Know …

• Default horizontal cell alignment is left – when you enter text or image to a cell it defaults to left margin

• Its recommended that you add a table ID. It provides a name for a table within the HTML code / similar to alternative text for an image

• Named anchor: a link to a specific place within a document

• When you “merge” cells or rows you make them become one

Layout Mode

• You can draw & place boxes anywhere on the page• Layout mode provides more flexibility than Standard

mode• As you draw the table and/or cells in Layout mode,

Dreamweaver creates the code• When you draw your table Dreamweaver outlines the

table in green and cells in blue• If Draw Layout Table & Draw Layout Cell buttons aren’t

accessible, press ALT + F6

Layout Mode

• Rulers provide a visual cue for positioning and resizing layers or tables – use them to help approximate cell width and height and cell location within a table

• When you draw cells of different sizes in Layout Mode, Dreamweaver creates extra cells in the HTML table to fill in the spaces

Creating a Table in Layout Mode

Draw Layout Table button Draw Layout

Cell button

Layout mode

Layout category

Table width & Height

Layout Cell Handles indicate cell is selected

Understanding Forms

• Form: Interactive elements that provide a way for the Web site visitor to interact with the site

• Web Master: person who runs the website

How do you (Web Master) receive this information???

• 3 Ways– Get Method: sends data with URL. Not

widely used – format and amount of info issues

– Post Method: sends data to the application with no limits. Data is invisible to the visitor

– E-mail Method: Data is sent to an email account. This is what we will use.

Property Inspector Form Properties

• Form Name: Name

• Action: Contains the mailto address

• Target: Specifies the window or frame in which to display the data after processing.

– Blank: opens the link in a new browser window

– Self: opens the destination document (link) in the same window

– Parent & Top are other options

– Can also be used for internal and external links

• Method: Method by which the form data is transferred to the server

• ENCTYPE: We will use text/plain. It enables the data to be transmitted in a readable format instead of as one long string.

Forms and Web Pages

• A typical form is composed of form objects– Text field– Check box– Radio button– List– Menu– Other Buttons

• Submit• Reset• Command

• Forms are a highly versatile tool and are used for tasks such as surveys, guest books, order forms, tests, automated response, user questions, reservations, and so on.

Insert Bar Forms Tab

Form

Text

Field

Text

Area

Check

Box

Radio Button

Radio Group

List/ Menu

Jump Menu

Image Field

File Field

Button

Buttons on the Insert Bar Forms Tab

Text Field Property Inspector

Text field name

Field Type

Character Width

Initial Value

Maximum characters

Class

The Property Inspector changes for each Form element. Here is what it looks like for a text field element.

Text Field Property Inspector• A form object in which users enter a response• Char Width: max number of characters that can be

displayed• Max Chars: max number of characters that can be

entered.• Type: Can be single-line, multiple-line, or password

– Single-line: single word or short phrase response– Multiple-line: Provides a larger text area to enter a

response. You can change settings to meet your needs

– Password: single line. When a user types in a password field, asterisks or bullets replace the text as a security precaution.

• Init Val: Assigns the value that is displayed in the field when the form first loads

• Class: Establishes an attribute used with CSS

Horizontal Rule

• Horizontal rule (or line) is useful for organizing information and visually separating text and objects.

• The HTML tag for a horizontal rule is <hr>• To insert a horizontal rule• Go to the Insert Menu – HTML –

Horizontal rule• You can change attributes for the rule in

the Property inspector.

Good To Know• An underscore is an acceptable special

character in a form naming convention.• Forms can contain various objects that

enable user interaction and are the mechanisms that allow users to input data.

• If the Max Chars field is left blank, a user can enter any amount of text in a text field.

• The Char Width field default for text boxes is 20 characters.

Good To Know

• You can use a jump menu to create links to documents in your Web site, graphics, documents on other Web sites, email links, or any file that can be opened in a browser.

• Pop-up menu (Drop-down menu): Offers visitors a range of choices.

• The Action text box of the Property Inspector contains the mailto address or specifies the URL to the dynamic page or script that will process the form.

Good To Know

• When you are adding multiple radio buttons to a form, the Radio Group form object is the fastest and easiest method to use.

• The Submit button on a form will process a script.

• The Reset button on a form will clear the form.