The BoxedArt Guide to Using Website Templates

Using Microsoft FrontPage or Expression to Edit a Template

As with any WYSIWYG (What You See Is What You Get) program, you do not need to understand HTML coding to use FrontPage or Expression. You may edit your BoxedArt template pages in the Design view as you would in a word processor — typing and formatting text, inserting graphics or other page elements — FrontPage or Expression adds the HTML code in the background.

Below is an example of an .html web page file opened in FrontPage:

If you are familiar with HTML code, you can use the HTML view, which displays the HTML source code of your web page file, or the Split view, which displays both the code and design views simultaneously.

FrontPage or Expression will open any .html file, regardless of what it was originally created with. Launch FrontPage or Expression and go to File > Open, then navigate to the html (filled or blank) folder in your template package and click on the .html file you wish to open.

When you open a BoxedArt template html file and it displays in the Design view, you may make changes/additions to the text just as you would in a word processor.

You can change the font, size, style, color, and set alignment:
Click and drag to select the text you want to format, right-click, and choose Font in the shortcut menu.
Click the Font tab and select the properties you want to apply.

To replace text already in your template page, click and drag to select text and type your own words over the original:

Quick Resize for Text in Design view:
In Page view, at the bottom of the interface, click Design
Click and drag to select the text you want to resize.
On the Formatting toolbar, click Increase Font Size or Decrease Font Size
(If the Formatting toolbar is hidden, go to the View menu, point to Toolbars, and then click Formatting.)

Insert an image

On the Insert menu, click Picture, and choose From File.
Locate the GIF or JPEG image file that you want to insert and click on it.
After you insert the image, click Save to save your page. If the image file is outside the main folder for your site, the Save Embedded Files dialog box will appear. (If it is already inside the folder for your site, this dialog box won't appear.)

The Save Embedded Files box will ensure that your image will be displayed correctly in the web page.

If you don't want to make a copy of the graphic and you don't want to link to it, click the Set Action button.
((1) in the photo above). This is not recommended since it could cause display problems in your web page.
You can click the Change Folder button (2) to specify another folder for the copy of the graphic. It's a good organizational practice to keep your images in a separate folder, typically called "images." Most of BoxedArt's web page templates have this "images" folder included. To specify such a folder, click this button and target that folder.
If you want to change the filename of the graphic, click Rename (3).

Paste text and graphics
Select the text or graphic you want to move or copy, and then do one of the following:
To move the item, click Cut on the Standard toolbar
To copy the item, click Copy on the Standard toolbar.
In Page view, at the bottom of the destination document window, click Design
Click in the page where you want the text or graphic to appear.
On the Standard toolbar, click Paste
To specify the formatting, style, and appearance of the content, click the Paste Options button that appears next to the pasted content, and then select the options you want.

Occasionally an image may appear with a border in your web page . Pictured here is such an image (on the left), and for comparison, an image without a border:

To remove an unwanted border around an image, right-click on the image and choose Picture Properties from the list. Then, in Layout>Border Thickness, type in a zero.

If you need some quick image editing done on a graphic already in your web page, you can use the Pictures toolbar.

Here you can change the contrast and brightness of the image (1 and 2), crop the image (3), or add transparency if the image is a .gif (4).

Creating Links
Select the text or the picture that you want to be a clickable link
On the Standard toolbar, click the Insert Hyperlink icon
Under Link to, click Existing File or Web Page
Select the page or file you want to use as a destination
To test out your links, you must preview your web page in a browser (click the Preview icon )

CSS
CSS (Cascading Style Sheets) can be used to set the styles of your web page's text and overall layout. Most of BoxedArt's website templates come with external .css files already written for you. Each of the web pages in the package contain a link to that .css file, such as:
<link rel="stylesheet" href="main.css" type="text/css" />
This link instructs each web page to take its formatting from the one .css file.  Editing the .css file allows you to make changes in one file, and those changes will be displayed in all of your web pages. For example, if you change the color and size of your text in the .css file, each of your site's web pages will then display text with those changes, without your ever having to open the .html files and make individual edits.

The external .css files for your template are in the "html" folders of your template package. In FrontPage, you may click on Style in the Format menu to view/edit any of the styles that are already in your template's .css file.



Flash Movies
If your BoxedArt template page has Flash content (.swf files) in it, then the code necessary to display the movie in the page is already done for you.  If you make changes to the Flash movie using the Flash program and save your new .swf movie file into your web page's html folder under the same filename as the original, there is no need to make any changes in the corresponding .html file.

However, you can add new Flash content to your web page in Front Page or Expression:
In Page view, click Design
From the Insert menu, choose Picture, and then click Movie in Flash Format.
Locate and click the .swf Flash file you want to place in your web page, and click Insert.
To view the .swf Flash movie in your page, click Preview

What do I do when text in a template cannot be edited because it is part of an image?

see: Using Adobe Photoshop to Edit Graphical Image Text
and Using Alternative Graphic Programs to Edit Graphical Image Text

What happens when text and links on a template cannot be edited because it is embedded in a Flash object?

see: How to Change Text and Links in a Flash Template Using the txt File
and How to Change the Text in a Flash Template Using Adobe Flash

Table of Contents

Copyright © 2007 Big Resources, Inc. All Rights Reserved