• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Project 11. Creating Dynamic Navigation ... > Designing with <div> Tags and Includ...

Designing with <div> Tags and Includes

From a layout perspective, this site is going to be very simple: a <div> for the header, one for navigation, and another for the content. I’ve provided a CSS file for you to attach that will put all the elements in place. After you’ve built the complete page, you’ll then chop it up to build the main navigational include.

Open (or create) a default.asp file at the root of your gallery. This should be a blank ASP/VBScript page.

Choose Window > CSS Styles (Shift+F11) to open the CSS Styles panel, click the Attach Style Sheet button at the bottom of the panel, and browse to assets/styles.css. Choose the link method and click OK to attach the style sheet.

Choose Insert > Layout Objects > DIV Tag, or click the Insert DIV Tag object in the Layout category of the Insert bar. For the first <div>, choose divHeader from the ID dropdown; leave everything else at the default and click OK.

A new <div> tag is now added to the page, with the appropriate id attribute. Because the style for this <div> is already defined in the style sheet, it will be properly placed.

Delete the placeholder content (Content for id "divHeader" Goes Here) from the <div> and insert the gallery_logo.gif file from the assets folder. You should make the link to the image Site Root relative, because you’ll be turning this part of the navigation into an include later on.

Insert the next <div> (divNav) after divHeader using the same Insert Div Tag object. In the Insert Div Tag dialog, choose After Tag and <div id="divNavContent"> for the Insert options and click OK.

Remove the placeholder content from divNav and then add the art_listings.gif file to the <div>. Make sure that the image is added with a Site Root relative path.

Insert divNavContent directly below art_listings.gif. Click the image and press the right arrow key to move your cursor directly after art_listings.gif and insert divNavContent using the Insert Div Tag dialog. Leave the Insert options at their defaults and click OK. There shouldn’t be any breaks or paragraphs between the GIF file and divNavContent.

This <div> will contain the site’s navigation, as well as the content switcher.

Remove the placeholder text from divNavContent, and type Panels, Portraits, and Whites, pressing Shift+Enter after each to add line breaks. Add links to the default.asp pages under the Panels, Portraits, and Whites folders for each of the respective links. Make sure the links are Site Root relative, not Document relative, by choosing Site Root in the Relative To list in the Select File dialog.


Notice that all of the links are Site Root relative. This allows you to put your navigation in a single include and add that to any file in any folder, and the links will always point to the correct files.

Insert the final <div> (divContent) below everything else. Click the Insert Div Tag object once more and in the Insert Div Tag dialog, choose divContent for the ID, and After Tag and <div="divNav"> for the Insert options.

Save your work.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint