subscribe
free issue

All the instructions are here. | by Your Name

Posted January 1, 2XXX

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.

Features...

A starter web template that you can use by adding your content and renaming pages.
Table-less CSS layout gives cleaner code, which means better search engine optimization. All positioning and layout is accomplished through a cascading style sheet.
Photoshop source files are included!
Tested to work in IE, Netscape 7+, Opera 7+, Mozilla, and Firefox. Validated HTML 4.01 Transitional and CSS. Accessible.

Image Licensing Information

The images used in this template are wholly owned by Corrie Haffly and may only be used with this web site template. If you wish to purchase larger resolution versions of the images for your own use, please contact support@jgtemplates.com and inquire about:

Green Orchid: 4941
Single Cherry Blossom: 1989

Source Files Included

Photoshop 7 files
- bodybg.psd - Used for the body background (for the columns to show up)
- bullet.psd - Used for small square bullet image
- floatpic.psd - Used for the 300 pixel wide floating picture in the 2 column layout.
- floatpicsmall.psd - If desired, can be used for small 120 pixel wide floating picture.
- floatpicv.psd - Used for the 200 pixel wide floating picture for the 2 column layout.
- graphics.psd - Used for the graphics in the left column
- homepic.psd - Used for the large main picture in the 3 column layout.
- logo.psd - Used for logo.
- magcover.psd - Layered file used for sample magazine cover.
Not included: Font used for logo, Trajan.

General Instructions

Make a new web...
1. Unzip your web package.
2. Look for the "ezinegrey_web" folder.
3. Copy this folder to your "My Webs" directory.
4. In FrontPage, go to File > Open Web or Open Site and browse to this folder to begin editing your site.
Preview your new web...
1. Click on any page and go to File/Preview in Browser.
2. Click on Internet Explorer and click Preview.
3. A browser window will open with your new web. Preview the pages of the web and decide what pages will be in your web site. You may keep this window open and return to it and refresh to see your changes.
Modify your new web...
1. Add new pages
  Open a page that has the layout the way you want it, then go to File/Save As. Save the page under a new name - be sure to change the page title as well! Then, go to Navigation View and drag your new page into the navigation structure. Edit the menu if necessary (see specific instructions below).
2. Rename existing pages
  If you would like to use an existing page but want to rename it, you may easily do this in Folders View. Right-click on the file name and/or the page title and choose "Rename" to rename your file.
3. Delete pages from your web
  Right-click on the pages you wish to delete in your Folder List, in Folder View, or in Navigation View, then select "Delete."
4. Add your own logo
  The logo is in the "include_header.htm" file. Open this page to edit the logo (see below in specific instructions). After saving this include page, all your other pages will be automatically updated.
5. Edit the Copyright statement
  The copyright statement is in an include page for your editing convenience. Open "include_footer.htm" and edit the text, then save. All your pages will be automatically updated.
6. Add your own layout if necessary
  This page has been very carefully formatted with divs so that it resizes both vertically and horizontally. Do not drag on any div corners - you may "freeze" the page so that it no longer resizes properly.
7. Add your content!
  Type your text! Add your pictures! It's easy!
Publish your web!
1. Go to File/Publish Web.
2. Type in the URL of your web site. For example, http://www.yoursite.com. If you don't want to overwrite your existing web site but just want to publish it temporarily to preview it, publish it to a subfolder like this: http://www.yoursite.com/test.
3. Type in your user name and password when prompted.
4. If you are publishing to a new folder, FrontPage may prompt you to "create a new web." Go ahead and click OK.
5. Then, click Publish. FrontPage will publish your web. When it's done, you'll be able to click to view your published site!

Note: Because FrontPage's Normal/Design view does not always display CSS properly, the right column may "wrap" beneath the main column in Design View. This is fine -- if you preview the page in a browser, you'll see that the elements display properly.

Also, occasionally FrontPage's Normal/Design view may "lose" the formatting. When this happens, just hit "F5" to refresh the view and the styles will return.

Template Details

Include Pages

The logo/banner area, top menu, and footer are in "include pages." Editing the include pages will update the other pages across your web site. Open them, make your changes, and save.

The include pages will look like they have no formatting applied. This is okay! Simply make your changes, then preview the other website pages in a browser.

Your Ezine top area

The "your ezine" area is a graphic in the include_header.htm page. We've included the source Photoshop 7 file for your convenience.

Your logo should be no wider than 250 pixels to give enough room for the advertising banner.

The right side can be used for an advertising banner. We've used a standard width placeholder image.

Top Menu

The top menu is hard-coded in the include_header.htm page. By modifying the include page, all other pages will be updated automatically.

Left Column

The left column can be used for graphics, ads, text, or navigation that you want to add yourself.

The "subscribe" and "free trial" graphics were created with Photoshop. We have included the source files with this package.

Page Title

The page title is a FrontPage-generated page banner. To change the page title, you may go to Navigation View and rename the page.

Summary Paragraph

The summary paragraph has the class "summary" applied to it. (In the HTML code, you can see: <P class="summary">.) With this style applied, the formatting should apply correctly and you can type your summary and add the by-line. You can access styles through the left "style" dropdown menu in the toolbar. (Note: If the page isn't showing the styles, hit F5 to refresh FrontPage and reload the stylesheet.)

Main Picture and Caption

The main picture which fills the whole center column in a three-column layout and the caption are formatted using special styles that we've set up in the stylesheet. To create a main picture area, make sure that you're working in the center column (<div id="body1">[center column stuff]</div>) and add code that looks like this:

<div class="mainpic">
<img alt="main picture" border="0" src="images/homepic.jpg" width="390" height="293">
</div>
<div class="caption">
<p class="photo">Photo: Photographer Name Here</p>
<p>Caption here</p>
</div>

You can replace the image with your own. It should be 390 pixels wide to fit the area properly.

The <p class="photo">...</p> allows you to insert the photographer's name. If you don't need this paragraph, you can delete it.

Replace the "Caption here" text with your own content.

You can insert main pictures and captions anywhere in the center column, not just at the top. You may need an extra line break or paragraph if it comes up to close against whatever is above it.

Floating Photos

We've included some special styles for floating photos. There are three styles:

.floatphoto: 300-pixel wide image, used in 2 column layout. Floats to the right with room for a caption.
.floatphotov: 200-pixel wide image (good for vertical images), used in 2 column layout. Floats to the right with room for a caption.
.floatphotosmall: 120-pixel wide image, used in either 3 or 2-column layout. Floats to the right with room for a caption.

The code for a floating photo looks like this:

<div class="floatphotosmall">
<img src="images/picture.jpg">
<p class="floatphotocaption">Image caption here.</p>
</div>

The bolded code above can be replaced with "floatphoto" or "floatphotov."

You can insert this code anywhere in the content columns. You'll notice that the top of the floating area will show up where you insert it into the code, so that can help you figure out where to place the code. Then, modify the class, picture, and caption with your own content.

If you want to have a different width for the pictures, you can open the stylesheet and find the code for the floating photo areas, which will look something like this:

.floatphotosmall {
    width: 130px;
    padding: 5px;
    float: right;
    ...
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 120px;
}
html>body .floatphotosmall {
    width: 120px;
}

To modify the code, replace the two smaller values with the width of the photo you wish to use, and then change the first value (the larger one) to be your new value + 10. So, if you want your small photos to be 200 pixels wide, your code would look like this:

.floatphotosmall {
    width: 210px;
    padding: 5px;
    float: right;
    ...
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 200px;
}
html>body .floatphotosmall {
    width: 200px;
}

Right Column

The right column can hold a table of contents of your current issue, a picture of your current issue, advertisements, or more text.

The special "advertisement" class allows you to format the advertisement label above any ads that you have.

Other Styles

Here are some of the other available styles in this template:

Heading 1 (used for titles)

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

normal bullet
normal bullet

special bullet
special bullet

To achieve the square bullets, look in the HTML code for the <ul> tag right above your list items and add this code: <ul class="bullet">.

Footer

The footer can be edited in the include_footer.htm page. Modify the footer with your own company information and links.

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.