Todays Agenda 2304

1
Todays Agenda (2/3/04)

• Review
• Revising ePort template
• Composing the links page
• Composing the standards pages
• Composing the resume page.

2
Review Design Considerations

• Aesthetic issues
• Simplicity
• Consistency
• Color Scheme

• Technical issues
• Audience
• Structure
• Format
• Navigation

3
Review ePortfolio Site Map
Home Page(index page)
Link to Link to and from
E-mail
Resume page
Transcript page
Standards page
Philosophy page
Favorite sites page
Site 3
Site 1
Site 2
Teaching
Language Arts
Technology
Technology
Education
4
Review Creating a Template
These pages will have a consistent design.
Resume
Transcript
Philosophy
Copy1
Copy2
It will also save you some time.
Standards
copy3
Copy4
Links
Copy5
Template
5
Review Working with tables

• Why tables
• Organize information/objects
• Create screen layout
• Tables are very important in web design
• Examples
• http//www.uiuc.edu/
• http//www.mbayaq.org/

6
Revising Your ePort Template
7
The Navigation Panel

• Applying some styles to the navigation panel
• no underline for links
• swap the image when the mouse is on
• change the link color when the mouse is on
• etc.

8
The Navigation Panel (2)

• Three common practices
• Cascading style sheets (CSS). Example.
• Image Links (with/without some Javascript codes).
  Example.
• Javascript. Example.

9
The Navigation Panel (3)

• CSS example
• P margin 0px font-size 10pt font-family
  Arial, Helvetica, sans-serif
• A text-decoration none
• TD font-size 9pt font-family Arial,
  Helvetica, sans-serif
• TD Bfont-weight 700 font-size 9pt
• B font-weight 700 font-size 10pt

Back to Practice Menu
10
Creating a Hover Button

• In Page view, in the Normal pane, position the
  insertion point where you want to create a hover
  button.
• On the Insert menu, click Web Component.
• In the left pane, click Dynamic Effects.
• In the right pane, double-click Hover Button.

11
Creating a Hover Button (cont)

• In the Button text box, type the text label for
  the hover button. If you want to use a custom
  picture that already contains a text label, clear
  the default value.
• In the Link to box, type the URL of the page or
  file you want to display when the hover button is
  clicked. Or, click Browse to locate the page or
  file.

12
Composing Your links Page

• Demonstration
• Working with images (see next few slides)

13
Using Images

• To enhance web pages
• To catch a reader's attention
• To convey ideas
• As menu
• Image links

14
Acquiring Images

• Downloading images from the Web.
• Try Google images.
• Scanning pictures.
• Using digital cameras.
• Capturing still images from video/digital
  camcorder.
• Drawing (e.g. in Paint, Photoshop).
• Capturing images from computer screen.

15
Editing Images

• Raw images are rarely ready to be used for web
  pages.
• They usually need to be resized, cropped,
  compressed, etc.
• Introduction to Adobe Photoshop (Element).
• Capturing the computer screen and editing it in
  Adobe Photoshop

16
Working with Images in FrontPage

• Inserting images and setting image properties.
• Deleting an image.
• Image links.
• Images on a web page arent really there. The
  page contains only the reference to the images.
• So, make sure you copy the images to the server
  as well.

17
The Standards Pages

• An index page and three pages for the three sets
  of standards.
• Demo.

18
The Resume Page

• Making a link to an existing resume in Word or
  PDF format.
• Creating a resume page from your ePort template.

19
Next Week

• Well be composing the transcript and philosophy
  pages.
• Bring a list of the courses you have taken and
  are taking. Youll need
• Course number
• Course title
• Number of credit hours
• (Optional) Instructors name