Working with Navigation - Week 5
Lecture/Demo:
- Presentation on Smart Navigation
- Create Links on your Web Page and Horizontal and Vertical Navigation Bars:
- Apply an text link (internal) link to a page within the same site
- Create an external link to another website (When to use Target = Blank
- Named Anchors on a Page
- Create an e-mail link
- Image Links
- Create a Horizontal and Vertical Navigation Bar using Dreamweaver's Spy Menu
- Create Tabbed Panels
- Formatting and Customizing Links
- Setting up your portfolio. View article on How to Create a successful portfolio at Smashing Magazine. View some samples of simple portfolios at http://www.bigblackbag.com
- Getty Images - How to login and search for images for your portfolio.
- Free Backgrounds - Choose a background for your portfolio
Lab:
- Chapter 5 - Working with Navigation
- Chapter 5 Review Questions
- Continue working on your Portfolio index.html page. You will create a navigation bar in Dreamweaver. Add two additional pages to your website that you will be linking to. You may use either a horizontal or vertical navigation bar or both if necessary.
Homework:
- Finish Chapter 5 Hands on Exercises if not finished.
- Complete at least 3 pages of your Portfolio which will be due at Week 6 (Midterm Project.). By now you should have defined a site called Portfolio. Determined your theme, ,color scheme, the overall layout and collected any assets (images, elements and icons) you would like to use. Save them in a folder called Images in your Portflio site.
- You should have index.html completed for your Portfolio website, a Contact page and one additional page of your choice. Your site should have a header, main content, div and placeholder for navigation and a footer. Your site must use XHTML semantic markup and you must use an external style sheet for styling.
- Your bio should be input into Dreamweaver in your MainContent area.
- Your digital picture and banner should be prepared and optimized for the web in Photoshop and inserted into your index.html page.
- Your site should contain either a horizontal or vertical navigation bar with at least 3 links (i.e. Home Page, Contact Page and About Us page.)
- Index.html should have an e-mail link and one link to an external website.
- You may login to Getty Images and download any images you need. The password is on the hand-out you received in class.
- Come prepared to show your portfolio website to the class. Prepare a 3 slide PowerPoint presentation addressing your design strategy - accomplishments, challenges and planned future enhancements.
Sample Portfolios
- Portfolio 1 - A very nice portfolio created with web standards
- Portfolio 2 - Student Portfolio - Ryan Catlett
- Portfolio 3 - Student Portfolio - Amy Victorson
- Portfolio 4 - Student Portfolio - Patricia Thomas
Resources
