The BoxedArt Guide to Using Website Templates

Using Adobe Dreamweaver to Edit a Template

Dreamweaver allows you to view any .html file very much as it will appear as a web page while it writes all the source code for you as you adjust your template's design visually.

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

Dreamweaver will open any .html file, regardless what that file was originally created with. When you launch Dreamweaver, choose File > Open from the top menu and navigate to the file you wish to open in the html folders that came with your template.

Dreamweaver's default view is the Design view (shown above), but you have the Code and Split options as well. Tabs to switch views are located near the upper left of the interface.

The Design view shows your file as a browser will display it - colors, layout, graphics, text, etc. The Code view will display all the actual html (and any other) programming languages your file is using.  The Split view gives you a chance to view both Code and Display simultaneously in a split screen - good for pinpointing areas you wish to focus on in both the visual display and the code that created it.

The Properties panel should always remain visible when you're working in Dreamweaver. If for some reason the Properties panel is not visible (usually across the bottom of the interface), you may open it from Window > Properties in the top menu. The Properties panel is always changing, as it reflects information about whatever you have selected in the main display. For example, if you have clicked on an image in the display, the Properties panel will give you all pertinent information about that image. Select some text in the display, the Properties panel switches to display info about the text; click inside a table cell that has lots of text in it, and the panel will switch to something like this:

A large portion of editing your template webpage can be done right in the Properties panel, except for the actual image files. Dreamweaver does not create image files, it simply writes the code to display them in your web page.
Your images must be created and saved within image software; Dreamweaver will then write the code to insert the new image into your page for you - just click once in the display where you want your image to appear, and go to Insert > Image in the top menu.

To replace an image in the template web page with one of your own, you must first have created and saved your new image using an image editing program. Then, click once on the image you want to replace to select it in the Design view and hit the Delete key on your keyboard. Then go to Insert > Image in the top menu and choose your new image file.

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 Properties panel type a zero in the Border field:

Editing text in your template is very similar to using any word processor. Click and drag to select text in the display and type your own words over the original:

The Delete or Backspace keys on your keyboard function the same as in a word processor; hitting the Enter key creates a new paragraph (double-space down), Shift-Enter creates a break (single-space down).
Use the Properties panel to change fonts, alignment, size, color, and style (B=bold, I=italic) for any selected text.

Links
You may also create links in the Properties panel - note the small yellow folder icon next to the Link field on the right side of the Properties panel. Select text or an image in the Design view, and click on that yellow folder icon. A "Select File" window will open, where you may locate and click on the file you wish to link to. Dreamweaver writes the entire "a href=" tag for you, including any pathways/folder names if necessary, so your links will always go to the correct file. Note: links do not function from the Dreamweaver screen - you must use Preview in Browser to test your links. (File > Preview in Browser, or click the icon in the toolbar).

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. Dreamweaver will open .css files (File > Open from the top menu) and display all the code for you to edit. Or, you may click on the CSS tab in the Properties panel at any time 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 Dreamweaver:
Click in the display where you want your .swf Flash movie to go
From Dreamweaver's top menu, choose Insert > Media > Flash 
Note: .swf movies do not display in the Dreamweaver screen - you will see a gray box in the area of your page where your .swf movie has been placed.  To view the .swf movie, Preview in Browser, or select the gray box and click Play in the Properties panel.

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