- Rollovers and Buttons: Rollovers are images that change when the mouse pointer rolls over them. The change can be anything you want. Basically, a rollover consists of two images, one that is displayed when the page is loaded, and another one that is automatically displayed when the mouse rolls over the first image. Buttons are simply images that are set up as links when the user clicks on them. This link takes you to a page that illustrates a rollover and two buttons incorporated into the page.
The following screen illustrates how to use the "Insert Rollover Image" tool.
Instructions for Creating a "rollover" can be found at these links:
- Layout Tables: One of the really neat capabilities of Dreamweaver is the ability to create layout tables and cells that permit positioning of anything anywhere on the web page. There are two tools to accomplish this: Draw Layout Cell and Draw Layout Table. The image below illustrates the Dreamweaver screen and the buttons you need to use. You first click and drag a layout table, then click and drag any number of layout cells within the layout table. You then imbed anything (images, text, links, fill colors, etc.) into the layout cells. You will be amazed at how easy this is once you practice a bit.
This link will take you to the web page developed with Dreamweaver using the table layout and cell layout functions in the screen illustrated above.
- This link will take you to a brief explanation of how to use layout tables and layout cells in Dreamweaver. Click on the down arrow for the search topics, select "Using Layout View for Dynamic Tables" to go to the tutorial. It's brief, but it's better than buying a $40 book!
- Navigation Bar: As I have said in class, one important aspect of a web site development is the ability for users to easily navigate from page to page within the site. Putting in specific links is fine, but you will want to have a central location to assist user navigation as your site grows and becomes more complex. A great example of a navigation bar can be found at the Amazon.com web site. Note the navigation tabs across the top of the initial page.
Creating a navigation bar is easy once you get the hang of it. Below is an illustration of the Dreamweaver screen for the development of a navigation bar.
This link will take you to the Navigation Bar Example Page so you can see how it works.
- This link will take you to some general information about how to create a navigation bar. Click on the down arrow for the search topics, select "Navigation Bar" to go to the tutorial. Again, brief but better than nothing.
- This link will also take you to a brief illustration of how to create a navigation bar.