Web Page Design Mid-Term Review CH.1-4 - PowerPoint PPT Presentation


PPT – Web Page Design Mid-Term Review CH.1-4 PowerPoint presentation | free to view - id: 753351-Y2Y1Y


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Web Page Design Mid-Term Review CH.1-4


Title: Web Page Design Mid-Term Review CH.1-4 Author: student Last modified by: student Created Date: 10/24/2008 1:44:12 PM Document presentation format – PowerPoint PPT presentation

Number of Views:98
Avg rating:3.0/5.0
Slides: 78
Provided by: stude2536
Tags: design | mid | page | review | term | web


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Web Page Design Mid-Term Review CH.1-4

Web Page Design Mid-Term Review CH.1-4
  • Mr. Ursone

Accessing the Web
  • Web Page where you see text, graphics, sounds,
  • Uniform Resource Locator (URL) Web address. Ex.
  • Web Browser Helps you navigate through the
    internet. Ex. Internet Explore Mozilla
  • 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
  • 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.
  • 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.
  • 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/WebsiteTypes_of_webs

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
  • Target Audience
  • Who is your site geared towards?
  • People with similar interests, gender, education,
    age range, income, profession, and computer

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,
  • 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
  • What will attract your target audience to your
  • 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
  • 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
  • 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
  • Use web-safe fonts such as Times, Courier, and
  • 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

Developing a Web Site
  • Page Layout Establish a consistent, logical
    layout that allows you to add text and images
  • Use templates when you can to maintain
  • 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

Publishing a Web Site
  • Publishing Making your web site available to
  • 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
  • Document the last change date
  • Even when no revisions have been made

Title Bar
Panel Groups
Insert Bar
Close Document
Files panel tab
Panel Groups bar
Document Window
Expander arrow
Zoom Tool
Set Magnification
Properties Inspector
Property Inspector bar
Answers Dreamweaver Window
  • _______________ 2. ________________
  • 3. _______________ 4. ________________
  • _______________ 6. ________________
  • _______________ 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

Files Panel
Insert Bar
  • Allows quick access to frequently used commands.

Status Bar
  • Provides additional information about the
    document you are creating, i.e. ltbodygt
  • 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 List
  • Example
  • Example
  • 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

  • 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 lth1gt produces the largest text
  • Heading 6 lth6gt produces the smallest text
  • Text Headings are found in the properties

  • 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

  • A remote site are files on a server that make up
    a Web site from the authors 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.

  • 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
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
  • Is similar to a table of contents or an index in
    a book.

  • 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

  • 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

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 recipients address

Site Map
  • Graphical Representation of the structure of a
    Web site

Standard Toolbar
  • Dreamweaver provides 3 ways to use the table
  • Standard mode uses the Insert Table diaglog box
  • Layout mode freeform process where you draw the
    table and individual cells (complex)
  • 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
  • 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
  • Header located at top, may contain logos,
    images or text that identifies site
  • Body informational text about site
  • Footer hyperlinks for contact info
    navigational controls

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
  • Cell padding the amount of space between the
    edge of a cell its contents
  • Cell spacing the amount of space between cells
  • Border when tables 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
Inserting Table Dialog Box in Standard Mode
Property Inspector Table Features
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
  • Default vertical cell alignment is middle

HTML structure within a Table
  • When you view your table in Dreamweaver
  • lttablegt tag indicates whole table clicking this
    tag selects the whole table
  • lttdgt tag indicates table data clicking it
    selects the cell at the insertion point
  • lttrgt 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
  • 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
    arent 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
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
  • 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
Check Box
Jump Menu
File Field
Radio Group
Text Area
List/ Menu
Image Field
Text Field
Radio Button
Buttons on the Insert Bar Forms Tab
Text Field Property Inspector
The Property Inspector changes for each Form
element. Here is what it looks like for a text
field element.
Character Width
Field Type
Text field name
Initial Value
Maximum characters
Text Field Property Inspector
  • A form object in which users enter a response
  • Char Width max number of characters that can be
  • Max Chars max number of characters that can be
  • Type Can be single-line, multiple-line, or
  • 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 lthrgt
  • 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

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
  • The Reset button on a form will clear the form.
About PowerShow.com