Use this left column info box for a submenu or more information.
This package comes with the starter web site in .zip format. Unzip the package and start editing the pages. You may wish to keep a backup copy of the .zip in case you need to start over.
We have included a basic site structure with common pages that you may use to start with. You may rename the pages, add more pages, and add your content.
- A starter web template that you can use by adding your content and renaming pages.
- Flash menu and picture area can be modified without needing Flash! You just need to change the text variables in the code. Flash picture area gives you more room for description text. Different movies provided with different numbers of buttons to fit your needs.
- New: SWFObject embed code used for automatic Flash detection and Flash embedding.
- Table-less CSS layout gives cleaner code, which means better search engine optimization. All positioning and layout is accomplished through a cascading style sheet.
- Flash and Photoshop source files are included!
- Gorgeous image used legally. Licensing arrangements have been made so that the images may be used in this template.
- Tested to work in IE, Opera 7+, Netscape 6+, Mozilla, and Firefox.
Image Licensing Information
The royalty free images used in this template are wholly owned by Corrie Haffly. They may not be used apart from this template. If you are interested in licensing a version of this image for other marketing use, please contact email@example.com.
Source Files Included
- Photoshop 7 files
- accent.psd - Used for the square accent graphics.
- mainpic.psd - Used for the photo.
- yourlogohere.psd - Used for the logo file
- Flash MX 2004 file (not necessary if just editing text and links!)
- mainpic.fla - Seven button movie
- mainpic-6.fla - Six button movie
- mainpic-5.fla - Five button movie
Not included: Font file. Logo and menu font is Myriad, available through many online font distributors. You may use your font of choice!
Flash Detection Script
This template uses the SWFObject (v1.4) Flash detection and
embed script provided by Geoff
http://blog.deconcept.com/swfobject/. This script detects
whether or not the user has the Flash player, and if it does, it
loads in the Flash movie for them to view. If they don't have the
Flash player, it displays your alternate content. The alternate
content is what you see in your web editor (a static image or text).
The SWFObject script also resolves the IE update issue where
embedded Flash movies require an extra click for interaction; using
the script will allow viewers to interact with the Flash movie
directly. The SWFObject script also allows your web site to have
fully validated HTML.
Please be aware that the script may be updated occasionally, and
it is your responsibility to visit theSWFObject site to check for
updates and implement them.
General Information Regarding this DWT Package
The Dynamic Web Templates in this package are Dynamic Web Template Interchange Guidelines (DWTIG) Compliant. The Sky Window DWT package consists of:
- page layouts, located in the Templates/ folder:
- skywindow7.dwt - Used throughout sample site; has seven button areas in the Flash movie.
- skywindow6.dwt - Same as above but with 6 button areas in the Flash movie.
- skywindow5.dwt - Same as above but with 5 button areas in the Flash movie.
- the Sky Window DWT starter web site, which allows users to create a new web site from scratch that uses the DWTs. Predesigned pages are included with the site, which you may modify or delete.
|Definition of Editable Regions for DWTs
||The Title of the Page - this is what appears in the uppermost left status bar of the published page. To edit this and the following two regions, right click over the body of the page and select Page Properties. Fill in your own information for the Title, Page Description, and Keywords fields. You will want to do this on each page.
||Keywords for your Page/Site; important for search engine spidering purposes. To edit, see instructions above for "doctitle."
||Description of your Page/Site; important for search engine spidering purposes. To edit, see instructions above for "doctitle."
||Location for any coding (asp, java script, etc.) which requires placement within the <HEAD> </HEAD> tags of the web page.
||Name of the Page Being Viewed - you may either use the "text" banner provided with FrontPage or type in the title manually.
||Secondary Navigation - uses FrontPage navigation structure link bar; depending on the location of the page in the FrontPage navigation structure, this will be set to either "Child" or "Same" level. Default is "Child" level (see "Navigation Changes" below).
||Main Content - in a 2 or 3 column layout, this content will appear in the widest content column. In a 1 column layout, this will appear first.
||Secondary Content - in a 3 column layout, this content will appear in the left column. In a 2 column layout, this content will appear in the smaller of the two columns. In a 1 column layout, this content will appear directly beneath the body1 editable region's content.
||Third Level Content - in a 3 column layout, this content will appear in the right column. In a 2 column layout, this content will appear directly beneath the body1 editable region's content. In a 1 column layout, this content will appear directly beneath the body2 editable region's content.
||Place for an applet or anything else
||Place for an applet or anything else
How to use Dynamic Web Templates (General Instructions)
You may use this package in two ways: 1) to create a brand new site or 2) to convert an existing web site.
Creating a New Site using this Package:
- Copy or move the skywindow_web folder to the location on your hard drive where you keep your Dreamweaver web sites. You may rename “skywindow_web” to another name if you'd like, such as “My-Web-Site” or “Project_Site.”
- Open Dreamweaver. Define a new site and point to that folder as your local site.
- The Template file(s) should show up within the Assets Panel when you click on the “templates” icon. As you create new pages, click the template you want to use and drag and drop it on top of the new page to apply the design.
Using this Package with an Existing Web Site Built with DWTs:
- Open Windows Explorer (or similar browsing utility). Open the skywindow_dwt folder and copy all the files and folders inside the skywindow_dwt folder.
- Browse to the local copy of your web site.
- Paste all the files and folders into your local web site folder. Note that this may replace some of the existing graphics and/or files in your web site, so you may want to back up the local copy of your web site first.
- After opening Dreamweaver, you may open your pages and go to Modify > Templates > Apply Template. The new Templates should automatically show up in the list of templates and you may apply them.
- It is possible that the Templates don't automatically show up in the Assets > Templates panel when you first add the new files. If this is the case, just open all the .dwt files in Dreamweaver (within the Templates folder), then close and restart Dreamweaver. This “forces” Dreamweaver to recognize the templates so that they show up in the Assets panel.
- If you want to use some of the sample starter pages within the "starter" folder, drag them out into the root folder (using the Dreamweaver file manager so that links are renamed) and edit them.
About Dynamic Web Templates and the Dynamic Web Template Interchange Guidelines (DWTIG)
- Dynamic Web Templates are identified by the extension " .dwt. "
- The Dynamic Web Templates for this package are located in the " skywindow_dwt/Templates " folder. These will eventually end up in the “Templates” folder of your Dreamweaver web site.
- Dynamic Web Templates act as the " base " for all of your web site (.htm) pages. If you change the underlying .dwt, all the web pages based on that .dwt will change. This makes for easy site-wide changes to the underlying design.
- Dynamic Web Templates have "editable" and "non-editable" regions .
- Editable Regions can change from page to page -- your page content, for example. You can open the web site pages (.htm) and make changes in the Editable Regions.
- Non-editable Regions are areas defined by the base .dwt, and cannot be changed on the individual .htm pages.
- To change non-editable regions , you will have to open the base .dwt file. Changing this .dwt file will change every page associated with it across your web site.
- Open the “Templates” folder.
- Open the DWT you want to change.
- Make your changes and save. The changes will propagate across all the pages that are associated with that DWT.
- Template packages may require you to change the .dwt files in order to add your logo and change copyright information. Please see the Template-Specific Instructions below.
- The Dynamic Web Template Interchange Guidelines are a set of guidelines used by many developers to provide dynamic web templates that interchange seamlessly.
- This template follows the DWTIG . This means that you can apply any other DWTIG-compliant template to your web site and have it convert painlessly and easily. Or, you can apply this DWT package to any DWTIG-compliant site in a few steps.
Your Logo Here top area
The "your logo here" area is a graphic in a non-editable area. We've included the source Photoshop 7 file for your convenience. You may delete the placeholder graphic and insert your own logo (you may use the included Photoshop file to create your own). See above for instructions on editing non-editable regions.
The Flash-based menu system does NOT require the Flash program to edit the text or image! The movie uses variables, defined within an external text file, to define the text on the button and the linked page.
To simply change the text and link, open variables.txt and change the text and URL corresponding to the menu button you wish to edit.
&d2=All about you.
Use capital letters for the menu text, otherwise it may not display properly.
Flash alternative content
There is alternative content for search engines and people who don't have Flash.
We've simply put a line of text in the Flash area, which you should be able to see in
the web editor. Change this text or replace it with your own content. People who do
have Flash will be able to see the Flash animation and will not see that content in
The image may also be easily switched by creating your own picture (706x182 pixels) and saving it as mainpic.jpg, then replacing the existing file in the web.
Note: If the image is saved as a .jpg and still does not load, check your image-saving settings to make sure that you did NOT save it as a "progressive" image.
We've created additional movies with six and five buttons (instead of the seven shown here) for your convenience! To use a different movie instead of the seven-button movie, open include_mainpic.htm to edit the HTML. Run a Find/Replace command to replace "mainpic.swf" with "mainpic-6.swf" or "mainpic-5.swf." Then save and close. All your other pages will be updated automatically.
Then, open variables.txt and delete the last set(s) of variables as needed and modify the first variables as necessary.
Editing the Flash Source Files
You will need to edit the Flash movie IF:
- You wish to change the animation
- You wish to change the font
- You wish to change the font field to accept lowercase letters or other language characters
- You wish to change the colors/design
We have included the Flash source files with this package but we do not provide support for actually modifying the movies
You may create more info boxes in the left column as needed. We used divs with the "infobox" style applied.
Modify the footer with your own company information and links. If you use the Flash menu buttons, we suggest duplicating the links of your site in the footer so that search engines can more easily read them.
See above for modifying non-editable regions.
Cascading Style Sheets
This template is a table-less layout. Positioning and layout is defined through CSS. You will need to be comfortable with advanced CSS positioning and formatting techniques if you want to make changes to the layout of this site. If you just want to add your content, you will need some basic CSS skills and HTML skills.
CSS Resource Lists
Copyright and Licensing Information:
- Copyright: The copyright for this DWT and accompanying design remains with the designer, John Galt's Templates. You may not claim ownership of the design, nor may you use it for any purpose other than that explicitly set forth below in the Licensing section.
- Licensing: The license fee for this design is a site license, not a user or computer license. This DWT design is, therefore, licensed for use on ONE SITE ONLY. If you wish to use this design on subsequent sites, you must purchase a license for each additional site.
Help and Problem Resolution:
- General instructions and DWT tutorials: visit our site at www.jgtemplates.com .
- Problems related to the design/use of this DWT Design: Please e-mail firstname.lastname@example.org for help or to report problems with this specific design.