and Writing HTML

1
and Writing HTML
Designing Accounting Web Pages

• Chang-Yang Lin
• Six Annual Meeting of the Minds Conference
• Eastern Kentucky University
• August 25, 2000

2
Constructing Web Pages With Dreamweaver

• Introduction to Dreamweaver
• Overview
• Dreamweaver Workarea
• Web Creation and Development
• Create Hyperlinks
• Tables
• Special Effects
• A Tutorial Project
• Preview the Compass Web Site
• Building the Compass Web Site

3
Tool bar
Document window
Object panel
Property inspector
Lunch bar
4
(No Transcript)
5
Overview Dreamweaver

• HTML Dreamweaver allows you to design web pages
  without knowing HyperText Markup Language (HTML).
  
• HTML is a scripting language that governs the
  appearance and behavior of web pages.
• Dreamweaver enters the HTML codes while you
  interact with an intuitive, straightforward
  environment.
• Java Scripts and Java Applets
• Scripts and Java applets embedded in web pages
  provide more powerful interactive features.
  Developing them require knowledge of programming
  languages such as Java.
• Dreamweaver generates some applets and scripts
  automatically.
• Import, Conversion, and Testing
• Dreamweaver imports and automatically converts
  existing text files to HTML format.
• Dreamweaver allows you publish and test a web
  right on your PC.

6
Tables

• Nearly every site on the WWW includes tables.
  They are an indispensable element that allows you
  to arrange your text on each page with a logical
  flow. Tables also helps you design web pages
  that are easy to navigate and understand.
• Tables
• Define a Table
• Format Properties for a Table and for Cells
• Resize a Table
• Embed a Table

7
Special Effects

• Dreamweaver allows you to create a variety of
  special effects. These include scrolling
  marquees, text animations, fancy page
  transitions, hover buttons, banner ads, and using
  audio and video files.
• Some of these effects, such as hover buttons and
  banners, use Java applets. Others, such as text
  animations and page transitions, are powered by
  Dynamic HTML.
• Not all browsers will be able to display all
  effects.
• GIF Animation

8
Preview the Compass Web Site

• Launch Dreamweaver
• Choose File gt Open. In the file browsing dialog
  box, navigate to Drive A then navigate to
  Compass_Site
• In the Compass_Site folder, select
  CompassHome.html, and then click Open to open the
  Compass home page in the Document window
• Choose File gt Preview in Browser or press F12

9
Building the Compass Web Site

• Defining a local site
• Creating a page in Layout view
• Inserting an image and a rollover image
• Working with tables in Standard view
• Creating a link to another document
• Inserting assets from the Assets panel
• Inserting Flash Text and Flash Button objects

10
Defining a local site

• Choose Site gt New Site
• In the Site Definition dialog box
• Type ACC_2001 in the Site Name field
• In the Local Root Folder field, navigate to A/
  Compass_Site folder
• Select Enable Cache to create a cache file for
  the site
• Click OK to close the dialog box Click OK to the
  cache message

11
Creating the site home page

• Define the document page title
• In the Title field, type Compass Home Page
• Save the document
• Choose File gt Save
• Save the document as my_CompassHome.html

12
Design a Page in Layout View a Sample layout

• Make the my_CompassHome document active
• Click the Layout View icon

• Click the Draw Layout Cell icon
• Draw the logo cell
• Draw three navigation cells
• Use Draw Layout Table to group 3 navigation cells
  into a table
• Use the tab on the Layout table to move it and
  resize it
• Use the Draw Layout Cell icon to add another
  layout cell

13
Design a page in layout view (continued)

• Use the Draw Layout Table icon to draw a table
  layout in the bottom
• Use the Draw Layout Cell icon to
• Draw a cell approximately one-third the space in
  the table

• In the Property inspector's Fixed field, type 170
  to set the cells width
• Repeat the above step to draw two identical cells

14
(No Transcript)
15
Inserting images and rollover images

• Insert images
• Insert the compass_logo.gif the
  learnMoreAbout.gif
• Create a rollover image
• Planner
• Destinations
• Travellog
• Resize the three layout cells to fit the image

• Insert text
• open DW4_HomeText.txt
• Use cut and paste to copy content into a layout
  cell
• Format text
• Use Property inspector to format text

16
Working with tables in Standard viewclick the
Standard View icon

• Set cell properties
• delete the value from the H field (height)
• use the eyedropper to select black for the bg
• Selecting a table
• Set table properties
• Add cell padding