2.0 Site Building Process

2.1 Working with Templates

2.1.1 Overview

The Site Building Process begins after the content mapping matrix has been completed by your Design Team. The matrix will aid the web developer in placing the content into the proper template location. The web developer will then download a zipped file containing the Site Development Kit: a collection of files and resources required for building the site — html pages for templates; source files for graphics; style sheets; include statements for banners; an initial file structure; and a "Readme" file. The pages are meant to be used as examples and can be edited through a development tool and "saved as" a particular page during site creation. Only files for Tiers 3, 4 and 5 have been included in the Site Development Kit as Web Developers will not be working with Tier 1 - the ACF Home Page, or Tier 2, the temporary directory listing pages.

Important Note: The "templates" referred to in this Guide do not have locked "editable regions." It is therefore very important to modify the html in CODE VIEW ONLY as some web development tools, such as Dreamweaver or Frontpage, will add extraneous html code that will "break" the page design.

2.1.2 How to Build Your Site

1. Create a "working directory", i.e. "new_site"
2. Download and unpack the Site Development Kit, "site.zip" into the working directory
3. Move "styles" folder to root directory so their attributes are viewable while working on them in Dreamweaver.
4. Depending upon your access to the test ftp server you may or may not be able to see the top banner within Dreamweaver:
• For programmers with full access to the ACF root directory on the test ftp server, download the "images2" folder from the test server to your local ftp directory. This will enable you to view the top banner include within Dreamweaver.
• For programmers with limited access to the ACF root directory on the test ftp server (the uppermost level is your own ACF site), you will not be able to see the top banner include within Dreamweaver. But it will be viewable in a browser window once your pages are moved to the test ftp site.
• For programmers working outside ACF, you will not be able to see the top banner include within Dreamweaver. Once the pages are moved internally to the test ftp site, the top banner will be viewable in a browser window.
5. Rename "tier4" directory with your main section heading names, ex: "about" or "programs"
6. Create new "tier4" directories as needed to match the new architecture.
7. Draft the tier 3 index page or "homepage"; rename "index.html"
8. Draft tier 4 pages; rename them "SITE_topic.html", i.e. "acf_programs.html"
9. Each Tier 4 directory should have a "seed" Tier 5 page; Use this "seed" to create the content pages. Create breadcrumbs after tier 4 pages are defined and each "seed" tier 5 is ready.
10. Create new graphics for the site brand, title, slogan (if required), and optional site image; replace the generic images acting as placeholders.

Note: Code is highlighted in bordered call-outs; specific "class" and "style" highlighted in "redcode".

We recommend that you use Macromedia Dreamweaver to create your new site. A set of instructions has been created to assist you with this and they are available for download on the References page.

2.1.3 Site Development Kit

The Site Development Kit contained within the "site.zip" file includes the following:

Directories

• "docs": for non-html downloads including MS Word, Excel, PPT, and PDF files.
• "images": for all images including the site brand, site banner, optional site image, and content page assets.
• "resources": suggested for links lists, publications, interactive forms, etc.
• "src_art": for site design and maintenance not for the web server. Repository for original PNG or PSD files from which site graphics are generated - eases maintenance.
• "styles": contains the style sheets, especially if the site is not hosted on ACF servers.
• "tier4": each Main Topic page (tier4 page) will have its own directory; copy the "tier4" directory and change the name i.e., "programs", "grants", etc.
• "includes": global include files are for reference only; items that can reused throughout your website (i.e. footers) can have an include file (format xxxxx.inc) placed in the includes directory.

Templates

There are 3 "template" html pages you will use in developing your site.

• Tier 3 -- Site Index page: tier3_index.html, used only for the site's home page; change filename to "index.html".
• Tier 4 -- Main Topic pages: tier4_index.html.
• Tier 5 -- Content pages: tier5_content.html, the bulk of the site.

If your site is hosted on, or if you are developing the site on a 3rd party server, there are optional template files you can use in development that contain hard coded banners and footers. The hard code can be replaced with the include statements when the site is published live on ACF's server. Please contact the ACF Web Team to request these files.

Include Files

The global include files are included for your reference only. You will only see the content of the include files if your site is developed on an ACF server.

• acf_banner_main.inc: ACF Global Banner used on ACF servers, for reference only.
• acf_footer_main.inc: ACF Global Footer used on ACF servers, for reference only.

If you have information (i.e. a footer) that can be reused site-wide, we recommend that you use the include method to store and call for this information. The file name should be relevant to the content and end in .inc (i.e. local_site_footer.inc).

Source Art Files

These are PhotoShop files. They are sized and have separate layers that include text and images. They are meant to be adapted for your site brands.

• Site Title: sitebanner_title.psd - to create the title image for the sitebanner element.
• Site Slogan: sitebanner_slogan.psd - to create the (optional) slogan image for the sitebanner element.
• Optional Site Image: optional_site_image.psd - to create the optional site image for the right column of tier 3 pages.
• Site Brand: site_brand.psd - to create the site brand image for the left column on tier 3 and tier 4 pages.