The BoxedArt Guide to Using Website Templates

Using Adobe GoLive 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 Adobe GoLive. You can view your page in the Layout window very much as it will appear in a browser. As you make changes, GoLive will write the html code for you.

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

GoLive will open any .html file, regardless of what it was originally created with (File>Open in GoLive's top menu).
When you open a BoxedArt template html file you may make changes/additions to the text just as you would in a word processor.

Select the Standard Editing tool and click on the text box in the page.
Type text into the text box or paste a section of text from a document.
To move the text box, grasp it by the edge (when the pointer is positioned at the edge of the text box, the Standard Editing tool turns into the Hand tool) and drag it to another location.

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

The Inspector palette allows you to edit and customize selected objects.

This palette is context sensitive, and it changes depending on what type of item you select in the Layout window.
For example, if you select text, you’ll see options for changing its attributes. If you select an image, the palette displays information about that image and options for changing it.
Note: GoLive does not create images - that must be done in an imaging program - but you may delete one image and insert a new one in its place and GoLive will write the necessary html code for you.

Inserting an image:
Open the Site window (if it isn't already open) from the top menu.

The Files list on the left contains the main folder holding your site's files, along with any subfolders.
To insert a new image into your webpage, locate the jpg or gif image file in the folders in the list).
Click and drag the image file from the Site window into the Layout window.
You can then drag and position the image anywhere you like in the display.

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, click the image to select it and in the Inspector type a zero in the Border field:
:

Links
To create a link, first select the text or image in the display that you want to be "hot", or clickable.
Right-click on your selection and choose "New Link" from the list, and then enter the the destination URL (the location and filename of the web page you want to link to) in the Inspector's "Target" field.
You may also click on the small "browse" folder icon in the Inspector and browse for the html web page file you want to link to. GoLive will write the link code for you: <a href="pagename.html">

You may also create links using GoLive's "pick whip":

Click on the spiral icon in the Inspector and drag to the html file you want to link to in the Site window. The pick whip gives you a "rubber band" line as you drag to the files in the Site window, as pictured. Release the "rubber band" by clicking on the file you want in the Site window, and GoLive writes the link code for you.

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 are in the "html" folders of your template package. You may click on the CSS tab in the Inspector to view/edit any of the styles that are already in your template's .css file, or add new styles.

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 GoLive - either use the SWF tool in the tool palette, or right-click in the page's window where you want the movie to appear and choose "SWF" from the "Insert Object" submenu.

A small SWF box will appear in your page. With it selected, go to the Inspector pallette, click the small folder icon and choose the Flash (.swf) file you wish to display. After choosing the Flash file, the SWF box in the document should automatically resize itself to the actual size of the .swf file you have chosen and will display the name of the source Flash file. (.swf movies do not play in the GoLive screen - you must Preview your page to see the movie.)

Previewing Your Pages

GoLive offers a number of ways for you to preview your pages as they will appear in a web browser online.

One of these methods is the Live Rendering browser.
To access the Live Rendering browser, choose File>Preview in>Live Rendering. The Live Rendering browser updates as you work in your layout, so you can check the work you’ve done, including links and .swf movies.

Or, choosing Default Browser from the "Preview In" list will open your page in whatever browser you usually use when surfing the Web.

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
         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
         How to Change the Text in a Flash Template Using Adobe Flash

Table of Contents

Copyright © 2007 Big Resources, Inc. All Rights Reserved