UNL Templates Dreamweaver Setup

From Web Developer Network Wiki
Jump to: navigation, search

To begin using the UNL Templates, please register for one of the training courses offered by the Instructional Technology Group.

Once you have taken the training course and have the UNLTemplates.zip package, extract the zip file to the local web root for your site.

Setting up Your Template-Based Site

  1. Choose or create a folder in which to store the local copy of your site. Place the ���?sharedcode���?� and ���?Templates���?� folders into the local root folder for your Web site.
  2. In Dreamweaver define your site by choosing Site > Manage Sites. Click on ���?New���?� and choose ���?Site���?�. Define your site name and local root folder (the same folder in which the ���?sharedcode���?� and ���?Templates���?� folders were just placed).
  3. Go to the ���?Remote Info���?� screen. ���?Access: FTP,���?� fill in ���?FTP Host,���?� ���?Host Directory,���?� ���?Login���?� and ���?Password���?� and choose ���?Okay���?� and ���?Done.���?�
  4. Select File > New. Click on â�?��?Templatesâ�?��?� at the top of the dialog box. Navigate to your site and choose which template you wish to use â�?��?? a preview will be displayed to the right. (The â�?��?unlstandardsetâ�?��?� and unlframeworkâ�?��?� templates are not appropriate for use as a foundation for page design, but must remain in the â�?��?Templatesâ�?��?� folder.) Make sure the â�?��?Update Page When Template Changesâ�?� box is checked and click â�?��?Createâ�?��?�.
  5. Dreamweaver now opens a new web page for you. Save the file to your root folder using an appropriate name with the appropriate file extension (.shtml for pages hosted on www.unl.edu, .php or .asp for other servers as appropriate) ���?? this creates a separate file and will not alter the template file.

Now that your CSS site is set up, you can start creating individual pages from a new Dreamweaver template.

Creating Your CSS Template-Based Page

To add content: There are 4 editable areas within each template for your content. There are also 6 editable files you can customize in the ���?sharedcode���?� folder.

The editable content areas which should differ on each page:

  1. Document Title 'UNL | Department | Page'
  2. Title <h1>Department</h1><h2>Subhead</h2>
  3. Breadcrumbs ���?? the ���?You are here���?� statement at the top left of each page.
  4. Main Content Area ���?? This area can be treated like a traditional html page.

The 4 editable sharedcode files which should stay the same throughout your entire site:

  1. navigation.html â�?��?? This file creates the first and second navigation lines at the top of your page. Each item in the first nav-line is a list and the corresponding second nav-line is an unordered list within the first. * Remember to apply the â�?��?firstâ�?� class to the first item in each <li> and <ul> so that special formatting does not appear before the first link item.
  2. relatedLinks.html â�?��?? Left column links are found in this file. The setup is similar to that of navigation.html. Again, remember to apply the â�?��?firstâ�?� class to the first link.
    Customizing the following files is optional:
  3. footer.html â�?��?? Customize the name, address, telephone etc. at the bottom of each page in this file. Keep the â�?��?�?©2007 UNLâ�?��?� and customize or keep the â�?��?comments?â�?��?� link.
  4. leftRandomPromo.js ���?? This javascript file allows you to customize the random promos in the left column. Each image has up to 4 attributes associated with it:
    [0] = URL of image source (.jpg .gif) Please note that the image size of the random promo has changed from the old templates, the image should now be set to 210 x 80 pixels.
    [1] = ALT text description of the image
    [2] = URL to take the client to when the image is clicked
    [3] = javascript onclick events (optional)
    The images will rotate after the number of seconds given to the rotateImg function (���?20���?� is standard).

Now that your site is configured, continue with the content & style resources.

Personal tools