**LSC Webpage**

# Template and File Structure Instructions

### TEMPLATE DESIGN

The template design is used to create a consistent look among all
webpages on the Leetown Science Center site. There are four different
templates available for use: a text-only template, a text with links
template, a text with links and graphic template, and a template
designed for replacing web pages that have an existing template. Each of
the templates contains the same basic components, a header, a body, and
a footer. Only the body portion of the template (with the exception of
the browser title in the header and the date in the footer) is to be
edited. All other information in the template [must]{.underline} remain
the same. All templates can be used to create either .asp pages or .html
pages.

Templates will be distributed in a zip file. The zip file contains all
relevant files necessary to create a webpage. All files within this zip
file must be placed within a project folder that is to contain the web
pages. (See the section on file structure below). Please do not edit,
modify, or delete any of the files located in this zip file in any way.
Doing so will either alter the appearance of the webpage, or will cause
portions of the page to work incorrectly. If developing a page using one
of the templates, remember to "Save As", in order to not overwrite the
template file.

There are two folders located within the zip file. The first one is
named "files". This folder contains all of the template files in .HTML
form, as well as the necessary files needed for using those templates.
(See the list under the File Structure section.) When developing new
webpages, use the .HTML templates from this folder. The other folder is
named "templates". This folder contains each of the templates formatted
specifically for use when using Dreamweaver to apply a template style to
an existing document. When doing this, the templates have to be saved as
a .DWT (Dreamweaver Template) file. These templates have already been
converted into a .DWT format and are located in the "templates" folder.

Note: All proposed web pages must be reviewed for content before being
posted on the web site. For information on how to submit a page for
review, see the section on FTP structure below.

Note: Project web pages created from templates should be saved as
"index.html" and kept in a folder along with template files. Additional
web pages may be created from templates and linked from the "index.html"
page, but at least one page should be the home, or index page.

General Guidelines for all templates:

-   The Title is to be centered at the top of the page. The font for the
    title must be a bolded, dark green. It must have a "Verdana, Arial,
    Helvetica, san-serif" font face, and be a font size 5.

-   All subheadings should be a size 4, bold, dark green with a
    "Verdana, Arial, Helvetica, san-serif" font face.

-   All regular text must be a non-bolded "Verdana, Arial, Helvetica,
    san-serif" font face, and be a size 2. All text should be left
    justified.

-   No text shall extend past the right margin of the header and footer.
    All text should be placed within the table that is included in the
    code. Do not extend the width of the table past the right edge of
    the header or footer.

-   Only areas defined between the \<!\--#BeginEditable
    "Name_of_Editable_Area"\--\> and

> \<!\--#EndEditable \--\> tags are to be edited. All other areas of the
> code **MUST** remain the same. Editing or deleting any portion of the
> template outside of these areas will affect the appearance of the
> template, or possibly cause some portions of the webpage to function
> incorrectly.

-   When creating new webpages, it is recommended that the .HTML
    template files located in the "files" folder be used. When opening
    the template files in Dreamweaver, remember to save the document
    with another name. The un-editable areas within these sections (such
    as the header and footer information) will be grayed out and cannot
    be changed. For instruction on using Dreamweaver to create webpages,
    see the instructions below on the Design process.

-   When applying a template to an existing page, use the .DWT template
    files located in the "templates" folder. For instructions on how to
    apply a template to an existing document, see the instructions below
    on the Design process.

### 

### Template #1 (template1.html) -- Text Only Template

> ![](media/image1.png){width="4.872916666666667in"
> height="3.4277777777777776in"}
>
> This template should be used on pages that will consist primarily of
> text. This page contains four editable areas: "doctitle", "title",
> "text", and "date". All other areas of the code must remain the same.

-   To change the title of the page (as viewable on the browser title
    bar), edit the code between the \<!\--#BeginEditable
    "**doctitle**"\--\> and \<!\--#EndEditable \--\> tags. Replace the
    current text with the title of your page.

-   To change the title of the page (as viewable on the webpage itself),
    edit the code between the \<!\--#BeginEditable "**Title**"\--\> and
    \<!\--#EndEditable \--\> tags. Replace the current title with the
    title of your page.

```{=html}
<!-- -->
```
-   Begin typing the text in the area that is defined by the
    \<!\--#BeginEditable "**Text**"\--\> and \<!\--#EndEditable \--\>
    tags. Any subheadings should be a bold, size 4, dark green font. The
    subheading should also be underlined. The paragraph text should be
    surrounded by the paragraph tags (\<P\> \</P\>) and should be a
    non-bolded, size 2 font. Follow the provided format for creating
    additional subheadings and paragraphs.

-   Remember to change the date information in the footer at the bottom
    of the code. It is located between the \<!\--#BeginEditable
    "**Date**"\--\> and \<!\--#EndEditable \--\>. Type the date in which
    the page was last modified followed by the initials of the person
    who last modified it.

**[Template #2 (template2.html) -- Template With Links]{.underline}**

![](media/image2.wmf)

This template should be used on pages that contain links to relevant
project pages, and/or to links that provide addition information. This
page contains six editable areas: "doctitle", "title", "text", "links",
"other", and "date". All other areas of the code must remain the same.

-   To edit the "doctitle", "title", "text," and "date" sections, follow
    the instructions that are listed under "Designing pages using
    template #1".

-   To begin creating your own links, edit the code between the
    \<!\--#BeginEditable "**Links**"\--\> and \<!\--#EndEditable \--\>
    tags. If necessary replace the title of the links section with your
    own title. Each link should be surrounded by the paragraph tags
    (\<P\> \</P\>). Replace the existing links with a link to other
    relevant project pages. To create additional links, continue with
    this process, creating as many links as needed. These links are
    primarily for related pages that are created to go along with the
    topic of your page.

-   Follow the same process as above for changing the "Other Links"
    Section located between the \<!\--#BeginEditable "**Other**"\--\>
    and \<!\--#EndEditable \--\> tags. This section is primarily for
    "outside" links to other resources that provide more information
    regarding the topic of your page.

### Template #3 (template3.html) --Template With Links, Graphic

![](media/image3.png){width="4.801388888888889in"
height="4.865277777777778in"}

Template #3 follows a similar design as each of the branch index pages
in that it contains a graphic at the top of the page. Template3.html
contains a graphic at the top, as well as links. This page contains
seven editable areas: "doctitle", "title", "pic", "text", "links",
"other", and "date". All other areas of the code must remain the same.

-   To edit the "doctitle", "title", "text," and "date" sections, follow
    the instructions that are listed under "Designing pages using
    template #1".

-   To edit the "links" and "other" sections, follow the instructions
    that are listed under "Designing pages using template #2

-   To add a graphic onto the top of the page, edit the area between the

> \<!\--#BeginEditable "**Pic**"\--\> and \<!\--#EndEditable \--\> tags.
> In order for the image to be viewable, it must be located within the
> images folder under the appropriate branch directory. If the image is
> not currently in that folder, please send a copy of the image to the
> webmaster. The image is not to have a width larger than 300 pixels or
> a height larger than 225 pixels.

### Template #4 (template4.html) -- Empty Template for replacing an existing template

![](media/image4.png)

Template #4 allows for pages that have an existing template design to be
replaced with the new design. This template can also be used to create
pages from scratch, not following any of the above designs. If taking
this approach, remember to follow all of the general guidelines closely.

Unlike the other three templates, this template has an empty body "text"
section. There are only three editable regions within this file: the
title (named "doctitle" in the header information at the very top of the
code), the text area (named "text" in the body area; all contents of
exiting web page go here), and the date (named "date" within the footer
information). All other information **[cannot]{.underline}** be changed.

-   To edit the "doctitle", "text," and "date" sections, follow the
    instructions that are listed under "Designing pages using template
    #1".

```{=html}
<!-- -->
```
-   If you are using Dreamweaver software, this HTML template can be
    saved as a Dreamweaver template file by selecting "Save as Template"
    from the file menu. (These Dreamweaver template files have already
    been created and are located in the "templates" folder.) Once this
    is done, you can apply this design to all files within a site, or
    create new files from the template where all the header and footer
    areas are locked from editing. To apply a template to an existing
    webpage, go to **File** \> **Templates** \> **Apply Template to
    Page**. Choose a template from the list. If content exists that
    cannot be automatically assigned to a template region, select the
    "text" region for the destination of the content. Fore more
    information regarding using Dreamweaver, see the Dreamweaver section
    below, or go to the help menu within Dreamweaver.

-   If using this template to design a new page, please remember to
    follow all of the general guidelines listed on the first page of
    this document.

#### File Structure

Under the main LSC web directory, there will be a folder for each branch
to create web pages. Once a webpage has been approved, it will be placed
under the appropriate branch subdirectory. Each branch subdirectory will
be further broken down into additional subdirectories, named after the
Study Plan Number for which the webpage refers. All files for the
webpage (e.g. template plus content) will be placed under that
directory.

![](media/image5.png)

In the example above, the main web directory "lsc" contains a folder
named "AEB". The AEB folder contains additional folders, titled after
the Study Plan Number the folder represents. Folder "2068" refers to
Study Plan Number 02068, a project that studies the abundance of
freshwater mussels. All web pages dealing with this project are placed
in this folder.

In order for the webpage to work correctly, the contents of the template
(contained in the zip file) also must be located within each project
specific web folder. The following files are essential for the pages to
viewed correctly:

-   images (folder)

-   lscweb.css (Cascading Style Sheet)

-   lscheader.htm (HTML document)

-   lscfooter.htm (HTML Document)

-   fw_menu.js (Jscript Script File)

After project-specific web pages have been reviewed and approved, the
web page will be available for viewing as an "additional information"
link from the project description page, and can be directly accessed
from a URL that includes the LSC homepage, branch folder, and study
folder. For example, to access the freshwater mussel study web page
listed above, the complete URL would be
"http://www.lsc.usgs.gov/aeb/2068/index.asp".

#### FTP Structure

Upon completion of a webpage, all material should be submitted for
review of content and conformity to the template design before being
published to the website. An FTP site has been created to easily submit
a webpage for review. To move files to the FTP site using Dreamweaver,
see the Dreamweaver section below.

The FTP file structure is set up similar to that of the file structure
listed above. The main directory (FTProot) is located within the LSC
folder. Each branch has their own folder under the FTProot directory.
When posting pages for review, you are asked to create a project folder
with the SPN that your project represents under your appropriate branch
directory. All files and web pages that are to be reviewed should be
placed within your project folder. Once the pages have been approved for
content and design, they will be moved by the webmaster from the FTProot
directory and placed under the appropriate branch folder under the LSC
directory. Only then will the web pages be viewable to the public from
the Leetown Science Center webpage.

#### Using Macromedia Dreamweaver to Develop a Website

Macromedia Dreamweaver is the recommended software for creating webpages
using the above template designs. To order Dreamweaver software, visit
their website at <http://www.macromedia.com/software/dreamweaver/>.

Dreamweaver allows for the creation of a website on a local machine and
for it to be published to a remote server. The process of creating and
publishing a site involves three areas: pre-design, design, and
post-design.

***NOTE***: Before creating a website for a project plan number, please
contact John Young or Doug Nichols with the project number you are
creating the site for. A folder named with the project number will then
be set up under the appropriate branch directory on the remoter server
so you can post the pages for review. **If the directory with the
project number has not been set up on the server, you will not be able
to post any data.**

##### **Pre-design** -- Setting up folder, defining a site, and defining the FTP process

The first step of the pre-design process is to obtain a copy of the
distributed Template zip files described above. After doing so, extract
the contents of the zip file to a folder on the C:/ drive, or any other
desired location and name it "LSCTemplate". Create a folder on that same
drive and name it with the Study Plan Number that the webpages to be
created will represent. **Copy** (not move) the **contents** of the
"LSCTemplate" folder into the project folder that you just created. The
contents of the "LSCTemplate" folder are needed to create each project
webpage. This project folder will be the folder where all files needed
in creating the webpage will be stored.

Next, open up the Dreamweaver software. After Dreamweaver has opened,
follow the steps below to define your site:

1.  Choose **Site** \> **New Site** from the menu bar.

2.  If you are using Dreamweaver MX, you have an option of defining a
    site using Advanced or Basic options. Use the Advanced tab. Click on
    the local info item in the left side of the window. Name your site
    with the number of the Study Plan Number that the webpages will
    represent. (The same number that you used when creating the project
    folder earlier). Local root folder is the folder where your web page
    is stored on your computer.

3.  Click on the Remote Info item in the left side of the window. This
    is where you specify the center's FTP server for upload.

4.  For the hostname of the server type
    "[www.lsc.usgs.gov](http://www.lsc.usgs.gov/)". The folder to store
    the files in refers to the folder on the remote sever and not the
    local computer. As mentioned earlier, there is a folder located
    under the "LSC" Directory called "FTProot". This folder contains a
    folder for each branch. Type the following into the box:
    **webdata/lsc/FTProot/**. Following that address type the
    abbreviation for the appropriate branch (AEB, CAFL, FHB, NARL, SAFB,
    RTB). Then type the number of the project folder. (This will have to
    be set up by the administrator before you can post any data. Please
    contact John Young or Doug Nichols.) Remember to add the last
    backslash ("/") after the project folder. For example, if AEB is
    creating a webpage project titled 9999, for the imaginary project
    with the Study Plan Number of 9999, the complete address would be:
    **webdata/lsc/FTProot/aeb/9999/**

5.  Next, enter your FTP login and password. This information will be
    assigned to you by the server administrator.

***[Design]{.underline}** -- Creating a webpage using the templates*

After completing the pre-design instruction, you are ready to begin
creating your website. The site you have set up should be listed in the
sites panel. (If the panel is not viewable, go to **View** \> **Show
Panels**.) If the site panel is still not viewable, click the arrow next
to the "Files" on the panel groups menu. The top line in the site panel
contains the name of the site you are working on. Double click on the
name to expand the folder. The "files" and "templates" folders should be
located in the site directory. Expand the "files" folder by double
clicking it, or by clicking the "+" to the left of the name. The
contents of the folder will be shown. Select the template HTML file that
you wish to create a webpage from by double-clicking it. The code for
this template will open in the document window. Immediately rename this
file so that you do not lose the template. To save, go to **File** \>
**Save As**.... [DO NOT SAVE THIS FILE IN THE TEMPLATE
FOLDER!]{.underline} Click the "Up One Level" button to the right of the
listing of the current folder. You should now be under the project
number folder. Save the file as an .ASP or .HTML file with the name or
your choice. To design your webpages, view the instructions listed
earlier on editing the template that you selected.

When wanting to update an existing webpage with one of the new
templates, the .DWT files located in the "templates" folder are used.
After opening the document that the template will be applied to, go to
**Modify** \> **Templates** \> **Apply Template to Page**. The list of
the four templates should be displayed. Select the template that you
wish to use. You may receive a message that some regions of the document
have no corresponding regions on the template. Select the editable
region (the document body) from the list box. Under the section "Move
Content to new Region" select "Text" from the drop-down box and press
OK. The template will be applied to that document. Remember to save the
updated document.

***[Post-Design]{.underline}** -- Using FTP to put the webpages onto the
remote server*

After creating and saving all of the necessary pages, you are ready to
use the FTP feature in Dreamweaver to transfer all of you files to the
remote server. The connection to the server has already been completed
during the pre-design phase, so the only step left is to move the files.
In the Site Panel, select the very top line---the line that contains the
name of the site (the number of the project plan you are creating
webpages for). You want to transfer all of the files to the FTP site.
Above this, there is a blue arrow located on the site panel menu bar
that points upward. This button transfers the files from the local
computer to the FTP site on the remote server. Press this arrow to begin
the transfer to the FTP site. You will receive a message asking whether
or not you wish to transfer the entire site. Click OK. The files will
then be transferred. After transferring the files, please send an email
to Kent Schreiber (<kent_Schreiber@usgs.gov>) stating that you have sent
content to be reviewed. Only after they are reviewed, will they be
copied to the actual project folder in the branch directory and be
viewable to the public.

If, at a later date, you wish to edit the information you sent, click
the green downward pointing arrow to retrieve the information on the
remote server. You will be asked if you wish to retrieve the entire
site. You can either retrieve the entire site or select only the file
you wish to edit for download. You can download and upload the
information as many times as needed, however please remember to contact
Kent regarding any changes that are made.

#### REVIEW

#### 

Dreamweaver allows you to easily create a website using the given
templates and to later publish them to a remote server. This guide
provides instructions on how to use the given templates to create
project webpages, and how to publish that information using Dreamweaver.
For in-depth support on how to use the Dreamweaver software, or how to
troubleshoot errors in Dreamweaver, visit their website at:
<http://www.macromedia.com/support/dreamweaver/technotes.html>.