These are instructions for some of the base files that need to do the exercises in other sessions. This is also a review of using tables; to give everyone a chance to start at the same place! In Dreamweaver 1, we built a page that was relatively sized at 100%. For this class, we will use a page that is sized absolutely sized at 800 pixels. While 800 pixels will fill an older 800x600 monitor, it will show "white space" on new monitors, which have a higher resolution.
- Create a new folder in your web space called Templates.
- Create a page structure to use for your Template.
- Think about a color/delimiter scheme for your template page. You will have 5 areas to think about: the "white space" on the sides, the banner area, the link area, the body area, and the page bottom area. We will be learning about CSS delimiters in a later lesson; so, right now we will just add color with HTML or with background images, as we learned in Dreamweaver 1.
- Create a new file in Dreamweaver.
- Save the file as BasicTemplate.html in your Templates folder. We will use this file as a design, when we create a real Dreamwever template.
- Type Basic Template as your title tag.
- Attach your TextStyles.css file to the Template file. Feel free to adjust your styles as needed.
- Insert a table with 4 rows, 1 column, width 800, 0 border, cellpadding and cellspacing.
- Center the table on the page.
- Add a page background color, if you want, with either an image or a background color.
- Add a table background color, if you want, with either an image or a background color.
- Add a color or background to the top cell in the table.
- Set the top cell in the table to 100px height.
- Add the page title Basic Template to the top cell.
- Set the second cell at 20 px height. This will be your navigation bar.
- The middle table will stretch to the contents. Since this area will hold your main text, you might consider just leaving it white.
- You may, or may not want to add color to the bottom row. This cell will also be sized by its contents.
- Create a small popup page.
- A popup page is a regular web page where the content is contained in the upper left corner of the page.
- Create a new HTML file in your templates folder called Popup.
- Enter Popup Window in the Title Tag.
- Create a three row table, width 450px.
- Even though this window will be a popup, the content can be indexed by the search engines, which means that viewers might actually get to this window without going to your home page. Be sure to plan for logo and contact information on the popup window page.
- Create a small banner in the top row and add contact information to the bottom row.