Nightlights Template
If you are using Firefox and click the Download button, you will see a bunch of gibberish. Instead, right click the Download button and save the file to your computer.
The Nightlights template uses one of the Site Templates offered on our sister site Migrating from FrontPage to Expression Web - the Two Equal Height Column Left Fixed Width to 1024px - as a starting point.
The template package uses an XHTML transitional doctype statement. Both the template and the style sheet validate.
The #contentWrapper uses a background image. This allows for two equal height columns with the border stretching from top to bottom no matter which column has the most content. The image is 220px by 100px repeated vertically. The image is white with a blue right border of 2px. If you change the width of the left side navigation you will have to create a new background image to accommodate the changed width of the column. The psp file for the background image has been included in the image folder so that you can change the border color if you so desire.
Masthead
The background image for the masthead is called from the external style sheet and the site name and tagline is transparent gif image inserted into the DWT. The logo was created using the Logo Creator. I will be happy to change the site name and tagline for you or you can create your own transparent gif which is 542px by 125px.
Left Navigation
The vertical menu on the Nightlights template is one I use quite often. If you want the menu to change from section to section, then you will need to make it an editable region.
Also included is the styling for a side box you can use as part of your left sidebar. Again if you wish to use different content in the side box for each page, you will need to make this section an editable region.
The Google Custom search box will need to be adjusted with the code for YOUR custom search. The Search page uses the Bing search box. You can, of course, use any search engine you choose. The styling for the search areas is part of the external style sheet.
Images
Classes have been included to float images both right and left as well as centered on the page. The image within the content of this page has a drop shadow added using an graphics editor. All images you insert should be resized to the size you want displayed NOT resized by changing the width and height within the html code.
License Information:
This contribution is licensed to you under Creative Commons by the owner, Pat Geary. You must attribute the template design to Expression Web Tutorials & Templates by the link in the footer or the copyright statement meta tag.