Blue Steel Template

Editable Region

There is now another editable region on this template that lets you put content underneath the menu.

About Blue Steel

"Blue Steel" is the name for the new Macromedia Dreamweaver Template for webmasters with accounts on WWW or WWW2. The template has undergone several changes from conception to delivery, but it is ready for you to install and use. I would like to encourage you to read this entire document before installing Blue Steel as there are several differences between this template and previous templates. The name Blue Steel was chosen to reflect the blue and metallic greys present in the design..

The most major of these differences is the use of PHP includes to insert the headers, footers and menu items on the page. The reason for this is to create a centralized area for the includes that can be maintained externally. Previously if some element in the header or footer changed (for example, the URL to the search page changes) webmasters would have to be notified and make the changes themselves. In addition, the UC Denver web team would have to do quality control and make sure that everyone complied with the request, and that nothing else was broken during the process. Using PHP includes allows us to separate all of that information and store it in a remote location so we can update it in one place and have the changes propagate immediately.

All in all we are quite satisfied with Blue Steel and hope that you like it as well!

One Style, Two Templates

You will notice that when you go to apply the template to a new page you are given two options. The first option, "bluesteel_menu" is the template that is being used on the page you are currently reading and includes the side menu. The second template, "bluesteel_wide" omits the menu in order to provide more horizontal space for content. The wide template should only be used for very content-heavy pages such as lengthy articles, detailed instructions, etc. If you choose to make a page using a wide template, be sure to include a link back to your homepage somewhere on it so users can get back to your menu (I recommend linking the name of your site, indicated as [[Site Name]] on the template).

Click here to see this page in the wide version

Important: Because of the way this template is implemented, Dreamweaver will not be able to display the includes while you are editing your pages. The pages will look correct when viewed on the website, so do not be concerned by this.

Installing Blue Steel

To install Blue Steel you will need web space on WWW or WWW2, ZIP software and FTP software.

If you do not already have ZIP or FTP software, we recommend WinRAR for ZIP files and we recommend using the built-in FTP/SFTP client that comes with Dreamweaver MX 2004.

Download the Blue Steel Template ZIP file

Setting Up Your Local Environment

Extract the contents into a working directory on your local computer such as C:\webpages\mysite\. Extracting the ZIP file will create several subdirectories for you:

C:\webpages\mysite\images (stores all images used by the template)
C:\webpages\mysite\includes (stores PHP include files, including the menu include discussed in detail below)
C:\webpages\mysite\templates (stores templates, no need to alter these)

Launch Dreamweaver MX 2004 to get started. Once it is loaded, from the top menu select “Site > Manage Sites…”. When the site manager comes up click on the “New” button and select “Site” from the drop-down menu. This will launch the Site Definition dialogue to assist you. Follow the screenshots below to configure your site:

Create a name for your site and click the Next Button:

Choose not to use a server technology and click the Next Button:

Choose to edit the copies on your machine and point to the directory on your local computer where you extracted the ZIP file and click the Next button:

Select FTP as your connection method and configure your settings, then click the Next button:

Notes:
Your FTP username and password are not necessarily the same as your Stargate username and password
We will be upgrading from FTP so SFTP in the near future. These settings will need to change at that time.

Choose not to enable ‘check in and check out’ and click the Next Button:

Click on the Done button to complete the site setup.

Setting Up The Server Environment

Once you have completed the local setup, simply use the synchronization tool to upload the site to the server.

NOTE: If you are upgrading an existing site I recommend that you create a development directory on the server and install the template there. Once you are satisfied with the way your site works with the new template, you can move the files from the servers development directory down to the live directory.

PHP Includes

I am including a separate section for PHP includes to give users unfamiliar with PHP a brief introduction to how it works. PHP stands for Hypertext Pre-Processor. For detailed information you can visit the PHP website, but I will give a very brief overview here. First of all, in order for this to work, all files on your site must have the .php extension (index.php instead of index.htm or index.html). When the web server gets a request to show a PHP page, it runs it though the PHP processor and executes all of the PHP code before displaying it to the user. Unlike JavaScript, the site visitor can never see the PHP code, it is all executed before they even get the page.

The main reason for using PHP is their improved handling of includes. SSI (Server-side Includes) can only reference files on the same server as the webpage. The main difference between these includes is that they allow you to reference files anywhere that the server is able to see. This allows the web team to create a repository for our includes where we can make changes easily. This also means that if you know PHP, you can insert it into your webpage and it will work!

Creating New Blue Steel Pages

Before you get started making new pages, take time to edit "index.php" that came with the ZIP file. Once you have finished you can follow these instructions to create additional pages if needed. Take the following steps to create a new page and apply a template:

1. From the top menu select “File > New”
2. For Category select “Dynamic page” and for Basic page select “PHP”
3. Click the “Create” button
4. From the top menu select “File > Save”
5. Choose a filename for your new page such as “morganspage.htm” and click the Save button
6. To apply the template to your new blank document, from the top menu choose “Modify > Templates > Apply Template to Page”
7. If you need to add a link to your menu to point to the new page, do so now.

bluesteel_menu	bluesteel_wide

Customizing Blue Steel

The best part about Blue Steel is that there are some fun ways to customize it with very little work. Read on to find out what built-in tools Blue Steel has to offer.

Banner Image

Probably the most interesting of the customizable elements, you can insert your own banner image. The banner image is the short, wide image above the content of your page and below the header information:

I have created a variety of themed banner images for you to choose from that integrate into the design nicely. If none of the provided banner images suit your needs, let me know and we might be able to do something custom for you, depending upon the complexity of your request. All banners created will be available to anyone who downloads the template.

If you do not want a banner image to appear on your page, be sure to delete the placeholder that is provided to you with the template so you don't see the alt-text of the image ("Banner Image").

Click here to see all of the available banner images

Main Image

The main image is the graphic that floats at the top right corner of your content area. This image is optimized to be 150x150 pixels, so be sure to use whatever graphics editing program you have handy (Photoshop, GIMP, etc) to make sure its done that way. Notice that you can also include a caption for your image. If you don't want the caption, or the image for that matter, just be sure to delete the placeholder content that is generated when you apply the template and it will not interfere.

Menu Items

We have harnessed the power of PHP includes to make administration of your site even easier. The menu that you see on the left hand side of your page cannot be edited from within individual pages (It is not a Dreamweaver editable region). Instead, it is pulled in from an external file in your /includes directory and displayed dynamically (/includes/bluesteel_menu.php). What does this mean? If you have a change to your navigation menu, instead of making the changes on all the pages in your site, or doing complicated search and replace commands, all you have to do is edit the include file. Take a look at the code inside of bluesteel_menu.php to see how it is done. The menu is implemented as a simple unordered list rather than using text and tables, so just follow the format provided in the sample and it will be easy.

Page Headings

The last item to discuss in this section is integrated page headings. We have used CSS to override the behavior of several HTML tags in the content section so that you can have clean, consistent headings and subheadings in your text. See the table below for examples:

Header Name	Code Sample	Results	Explanation
Heading 1	<h1>Big Heading </h1>	Big Heading	Heading 1 is the strongest heading (besides the page title). It is blue in color and has no indent so it stands out. It is the largest of the headings.
Heading 2	<h2>Sub-Heading</h2>	Sub-Heading	Heading 2 is lighter in color than Heading 1 and it is indented slightly to make it easily identifiable as a subsection of a Heading 1 element above it. It is smaller than Heading 1.
Heading 3	<h3>Minor Heading</h3>	Minor Heading	Heading 3 is lighter in color than Heading 2 and has equivalent indenting. It is the smallest of the headings.
Paragraph	<p>"Regular Text "</p>	"Regular Text"	Paragraphs have been indented to line them up with their parent headings.

Conclusions

We have done our best to make this template visually appealing and easy for you to use. If you have any feedback for us, good or bad, it is welcome. Please contact the web team (E-mail: webteam@uchsc.edu) with any questions, comments or concerns regarding the Blue Steel Template.

Additional Help

You can contact the web team (E-mail: webteam@uchsc.edu) for assistance with the Blue Steel Template. Please be sure to have read through these instructions completely before contacting us for help. If demand is considerable, short instructional courses for Blue Steel may be arranged.

Good luck!