Easy Guide to Modifying Web Site Templates

Easy Guide to Modifying Web Site Templates by Lee Penney 2

Contents Contents..................................................................................................................................... 2 About the Author ........................................................................................................................ 3 Introduction ................................................................................................................................ 4

Starting Off ............................................................................................................................. 4 Unzip it ................................................................................................................................... 4

Installing the Fonts ..................................................................................................................... 5 Text (HTML) Modification............................................................................................................ 6

Opening a File ........................................................................................................................ 6 Changing the Page Title.......................................................................................................... 6 Changing the Text................................................................................................................... 6 Modifying and Adding Links to Text and Images ...................................................................... 7 CSS Styles.............................................................................................................................. 8 Changing Images.................................................................................................................... 9 Inserting Images ....................................................................................................................10 Removing Images ..................................................................................................................11

Image Modification ....................................................................................................................12 Opening a File .......................................................................................................................12 Changing Text .......................................................................................................................12 Adding Images .......................................................................................................................13 Changing Image Colours........................................................................................................14 Saving the Changes...............................................................................................................15

Flash Manipulation ....................................................................................................................17 Opening a File .......................................................................................................................17 Changing the Text..................................................................................................................17 Changing Images...................................................................................................................19 Assigning Links to a Button ....................................................................................................19 Adding Static Text ..................................................................................................................21 Removing Text or Images ......................................................................................................21 Publishing your Flash Movie...................................................................................................21

Creating Subpages....................................................................................................................22


About the Author Lee has been a keen web user since the mid-nineties and has always thought it a wonderful and exciting development with nearly unlimited potential. He started building web sites in 1996 and has continued to develop them for both himself and others. Like many designers and developers, Lee has been moving towards standards-based designs using CSS and XHTML and learning about how to make sites more accessible to everyone. Lee believes website templates have great potential for designers, developers and anyone wanting to create professional sites on their own. Through the Eight-Eight Template (www.88template.co.uk) site he is trying to help open people’s eyes by showing them that web templates can serve the web community in a number of roles and are a development for the future. Lee mouths off on his personal site The Digerati Peninsula (www.thedigeratipeninsula.org.uk) and also runs a free web resource called Viewfinder Design (www.viewfinderdesign.co.uk). When he’s not building or developing new sites, maintaining or improving old ones or learning new skills, he likes to watch movies, take photos and travel.


Introduction This guide is designed to let anyone who has a reasonable level of computer literacy produce a fully functioning template-based web site. I’ll be taking you through the necessary steps that will allow you to modify your template to include your details, images and links. Due to the different types of web templates out there, I can’t guarantee how applicable this guide will be to all of them, but the basic principles taught here are universal and many of them can be used across the board. Web site templates offer a powerful alternative to building a web site from scratch, especially for people who wish to do it themselves, but don’t have the time or inclination to learn all of the relevant skills. Templates allow you to produce professional sites with little technical knowledge. Modifying a template presents it’s own complications however, and this guide aims to walk you through the steps in an easy to follow approach designed to let you produce a web site quickly while avoiding potential pitfalls. Starting Off For this tutorial I will be using the sample template freely available from the Eight-Eight-Template (www.88template.co.uk) web site and will walk you through the steps to modifying the text and images of this template using techniques that apply to any template. We will be focusing on using a Windows-based computer, but many of the steps will be identical to using any computer running any operating system. The applications I will be using in this tutorial will be Macromedia Dreamweaver for the HTML files, Adobe Photoshop for the image manipulation, and Macromedia Flash for the Flash file editing. Trial versions of these applications are available for free 30-day use from the Macromedia (www.macromedia.com) web site and the Adobe (www.adobe.com) web site. Other applications can be used for modifying these types of files and you can find further advice and suggestions at the Eight-Eight-Template web site resources page. I would recommend that you first run through this tutorial using your template to get to know it and keep a copy of the zip file you downloaded in a separate directory so that you have an unmolested copy to work with when you want to create your final site. Then you can unzip the files again and work with those to create the final design. Unzip it Your template will be sent to you in a zip archive. Zip files can be opened without additional applications in Windows XP, but if you are experiencing problems, or are using another operating system, you will need to find software that will expand these archives. For Windows machines, try WinZip (www.winzip.com) and for Apple computers try StuffIt (www.stuffit.com). Once you have the software installed, find the file in Windows Explorer and right-click or double-click and follow the onscreen instructions on how to continue (see Figure 1).

Figure 1

It is always a good idea to keep a copy of this zip file somewhere so that you have an original copy of all the files that came with your template should you run into problems.


Installing the Fonts Once you have unzipped or expanded your archive, you will be left with a complete file structure within the folder you chose, with subfolders containing the various file types (see Figure 2). The number of folders will differ depending on what comes with your template and what type of template it is. The first thing to do is install any provided fonts to allow you to select them later on. To do this: Open the new folder called fonts in Windows Explorer and select all of the files (Edit, Select All from the main menu). Select Edit, then Copy from the main menu to copy all of the files. Still in Windows Explorer, navigate to C:\WINDOWS\Fonts (for Win XP, ME, 98 or 95) or C:\WINNT\Fonts (for Win 2000 or NT) depending on your version of Windows. Select Edit, then Paste from the menu to paste the font files into this directory. Please note that only the files with a TFF extension will paste into this directory, the others will cause errors, ignore these on a Windows machine, these are for other operating systems. The fonts are automatically installed on your system.

Figure 2


Text (HTML) Modification Perhaps the easiest thing to modify on your site will be the text, links and images contained in the HTML files of your template. The HTML files contain no only the text, but all of the layout and linking instructions in the non-static (i.e. non-Flash) parts of your site. To edit these files you could use a text editor such as Notepad, but this means trawling through lots of code to reach the text of links you want to change. The easiest way is to use a What You See Is What You Get (WYSIWYG) editor such as Microsoft’s FrontPage or Macromedia’s Dreamweaver. For this tutorial we will be using Macromedia Dreamweaver. A free 30-day trial of this application is available from the Macromedia web site (www.macromedia.com). Please note that this tutorial will only touch on Dreamweaver’s vast functionality. Opening a File After starting Dreamweaver, you need to open the file you wish to edit. To do this, select File, then Open from the menu at the top. Use the dropdown at the top of the Open box that appears to navigate to the folder that you unzipped your template files too. In this folder there should be a subfolder called HTML, open that and select the index.html file. Now hit Open. The file should open in Dreamweaver. Switch to the Design view by clicking the icon on the menu directly above the editing window, or select View, then Design from the main menu to see an editable preview of the finished page. Any areas highlighted grey with a symbol indicate a flash animation which you will not be able to edit in Dreamweaver, see Flash Manipulation below. Changing the Page Title The page title is the text that appears in the titlebar of a web page browser when they view the page (see Figure 3).

Figure 3

To alter this, simply type your new title into the Title box on the menu directly above the editing window (see Figure 3.1). If you can’t see the Title box, select View, then Toolbars, then Document from the main menu. Don’t forget to change the title for each of the pages you create or modify.

Figure 3.1

Changing the Text Editing text in the design view is just like using a word processor. To see what text you can alter (some text may be contained in images which you can only edit in a graphics program, see Image Modification below), simply put your cursor over the text and if it turns into a you can edit the text. Click anywhere in the text and a flashing text cursor will appear, add and remove text as you would in any word processor. One difference is that when you hit ENTER, you will create a complete paragraph break, if you wish to create a line break (i.e. simple drop to the beginning of the next line) you need to use SHIFT and ENTER together. You can also copy and paste text straight into this window from any text source (web page, text editor, etc). To make change to the text, simply highlight the text you want to change, then:

?? Click the to make it bold


?? Click the to make it italic

?? Use the dropdown to change the size

?? Use the dropdown to change the style/font of the text

?? Use the dropdown to change the colour of the text, you can click the on the first window to allow you to choose from a wider range of colours

All of which are located in the Properties box directly below the editing window. If you can’t see the Properties window, simply select Window, then Properties from the main menu, or press CTRL and F3 together. Modifying and Adding Links to Text and Images Start by either highlighting or selecting (with a single-click) the text or image you want to link. Existing text links on your site are usually a different colour, which helps them stand out, and make people aware it’s a link, the text may also be underlined. Making your links a different colour to alert visitors is considered good practice and you should try and maintain it where possible. It will help the usability of the site and make it much easier to navigate. You may find this is done automatically when you create a link, see CSS Styles below. If the text or image is already linked, you will see an entry in the Link box (see Figure 3.2) of the properties window below the editing window.

Figure 3.2

To add a local link (i.e. to one of your other pages) you can either type the file name (e.g. sample.html) into the Link box, or you can click the (folder) icon to browse to it. If you click the

(folder) icon a Select File box will appear. This will default to the directory of the file you are editing is in (see Figure 3.3).

Figure 3.3


I recommend you keep all of your HTML files in the same directory unless you have a large site, as it is much easier to maintain the links. Make sure the Relative To dropdown box (see Figure 3.3) reads Document. To finish the link, select the file and click OK. The file name will now be visible in the Link dialogue. If you wish to make this link open in a new window (i.e. keep the current page the same and start a second instance of your browser) select _blank from the Target dropdown (see Figure 3.4). If you wish the linked page to replace the current page (which I would recommend) simply leave the Target dropdown empty. If you wish to remove an entry from the Target dropdown (if you selected it by mistake say, or have changed your mind), highlight the text in the box and press DELETE.

Figure 3.4

To add a link to another site, highlight the text or image as above, then type the URL (web address) for the site you wish to link to in the Link box. You must add http:// to the front of the link if there is not already one present (see Figure 3.4) or the link will not work. If you want to make the link launch a visitors mail client with your email address in the To field (so they can email you for example), select the text or image as above and then type mailto: into the Link box, followed by the email address you want it sent to (e.g. mailto:[email protected]). To remove a link, select the text or image and simply remove the entry in the Link box. CSS Styles Styles are the new standard in specifying text and link colours (amongst other things). It’s likely that you template will use them for their font colours. If you wish to change the colour of all of your links, for example, you could go to each one and change the manually. If your site uses styles, you can change one colour and it will affect them all. To access the styles for your template (if it uses them), click the Design tab at the top-right of the Dreamweaver window (see Figure 3.5). You should now see a tab called CSS Styles (see Figure 3.6). If you select the Edit Styles radio button you will see a list of the current styles on your page. Note that it is possible to have CSS styles stored in an external file. If your site has this, you will have a file with a CSS (.css) extension after it, open this file in Dreamweaver to edit these styles.

Figure 3.5

Figure 3.6

To edit a style, simply double-click it. A CSS Style definition box will appear. Although there are a number of options you can select down the left-hand side, you are only going to be interested in the first screen (see Figure 3.7).


Figure 3.7

Here you can select the font style/type, the size, the weight (used for selecting bold text), the style (for selecting italic text), the colour (using the dropdown) and the decoration (used if you want to add or remove an underline). Change whichever option you wish to alter and select OK. This will now affect all of the text associated with that style. Typically a:link applies to the standard link text (although sometime it might just be a), a:visited affects the properties of text that has been used/visited, a:hover is used to affect the state of link text when you have your mouse over it and a:active affects the text right after you click the link. The rest can be different depending on how your template is set up, the only way to see what is what is to try it and see, remembering to use Edit, then Undo whatever to go back after affecting something. Changing Images Images can be quite tricky things, and if you want to replace one in your template without affecting the layout, you must make sure that the replacement image is identical in size to the original. To do this, open the image in a graphics application such as Adobe’s Photoshop and check the image information/size. In Photoshop, open the image and then select Image, and then Image Size… from the main menu. You can use this screen to adjust the size if you need to, but beware of changing the proportions (the relation between the height and width) as this can distort the final image. Check the relevant applications help files for advice on changing image size and also maintaining the original proportions. To change an image, select it in Dreamweaver while in Design view (select View, then Design from the main menu to change to Design view if you are not in it). In the Properties box below the editing window (press CTRL and F3 if you can’t see it) you will see a box marked Src (see Figure 3.8). This shows not only the file name, but also the location of the image.

Figure 3.8


In Figure 3.8 above, the image is called search.gif and is stored in the images folder (the / denotes a folder). It is best to store all of your images in the same directory (usually called images and made a subdirectory of the main directory). Store the image you are planning to replace it with in this directory. If you a sure that the image is in the correct directory and that it is the right size, click the (folder) button next to the Src box. This will bring up a Select Image Source window (see Figure 3.9). If you have stored the new image in the same directory as the old one, you should be able to locate it in amongst the other images. Note that web pages only really use two types of images: GIF images are used for images without a large number of colours, and JPG images are used where there is a need for a large number of colours (e.g. photographs). Make sure the replacement image is one or other of these types (see the help documentation of your graphics application for how to save you image as one of these types). Select it from the list and you should see a preview to the right of the window. Make sure the Relative To box reads Document, then click OK.

Figure 3.9

You will return to the editing window and should now see the new image where the old one was. Inserting Images Inserting a new image into a template is very similar to changing an image, as described above. You can insert an image just about anywhere in an HTML document. First off, make sure your new image is exactly the size you want it to appear on the page, you can scale images by setting dimensions in the HTML properties, but this usually causes poor quality, distorted images, or means that images are not properly optimised so they take longer to download than they should. Make sure you’re using the correct image format: GIF for images with limited colours, especially logos, and JPG for high colour images such as photographs. It is best to store all of your images in the same directory (I recommend a subdirectory called images under the main directory). Copy the image you are planning to use into this directory.


Open the page you want to insert the image into and click in the area you wish to insert it. Select Insert, then Image from the main menu. A Select Image Source box will appear (see Figure 3.9 above). Navigate to the where your image is stored. Select it (a preview should appear to the right of the box), make sure the Relative To box shows Document and click OK. Your image should appear in the editing window with a black selection border around it. You may need to play about with it to get it just where you want it. You can select the image by left-clicking, and can then drag it to another point in the page if you wish. To align the image to the right of the page, select the image, then click the button in the Properties box below the editing window (press CTRL and F3 if you can’t see the Properties box). To centre the image, click the button, also in the Properties box. Removing Images To delete an image from an HTML page, open the page in Dreamweaver, left-click the image to select it and either press DELETE or select Edit, then Clear from the main menu.


Image Modification The images of you web template will be supplied in PSD file formats to allow maximum quality and easy editing. PSD files are specifically Adobe Photoshop files, but can be opened by various other applications (see the resources sections of Eight-Eight Template (www.88template.co.uk) for suggestions). For this tutorial we will be using Adobe Photoshop CS, a free 30-day trial of this application is available from the Adobe web site (www.adobe.com). Please note that this tutorial will not explore the full range of functionality available in Photoshop (not anywhere near in fact), so you may wish to get hold of a good Photoshop tutorial book if you wish to explore it further. Opening a File To open a PSD file, start Photoshop and then select File, then Open from the top menu. Use the dropdown menu to browse to the location of the PSD files for you template (either images or PSD). Select the image you wish to open and select Open. If you receive a warning saying: Some layers contain fonts that are missing you need to install the fonts that came with the template. Close Photoshop and see Installing the Fonts above. Then try opening the image again. Once the image is open, you may wish to change the zoom level so that you can see it better, or just a specific section clearer, to do this, use the Zoom Tool ( ). Use left-click to zoom in on the image, and SHIFT and left-click to zoom out. Changing Text First off, open your TEMPLATE.PSD image (usually stored in the PSD folder). To modify the text contained in an image, you must first locate the layer that contains it. To do this, find the Layers window (see Figure 4). If the Layers window isn’t visible, select Window, then Layers from the main menu or press F7. Text layers are indicated by a in the preview window to the left of the layer name (see Figure 4). The layer name for text layers is usually the text that that layer contains, this can help quickly locate the correct layer. To select a layer, simply click once on the layer name. To make sure you have the correct layer, you can double-check by clicking the (eye) to make the layer disappear, to make it reappear, simply click the empty square where the (eye) was.

Figure 4

To edit the text, select the Type Tool ( ) from the toolbox on the left (if this is not visible, select Window, then Tools from the main menu). Move the cursor over the text and click once. A flashing cursor will appear where you clicked the text.


Now simply use DELETE and BACKSPACE to remove the text and type in the new text. If you have two or more different colours, delete and replace each piece of text separately so as to maintain these colours. If you’re inserting multiple lines of text, you will find that straight forward ENTER will just save the text you have typed, to avoid this press SHIFT and ENTER together. To change the style, size or colour of the text, select all of the text and use the options on the menu bar at the top that appear when you select the Type Tool ( ) (see Figure 4.1).

Figure 4.1

To exit the text without making the changes, hit ESC. When you’ve finished editing the text either press ENTER or select another tool from the toolbox. If you need to move the text (because it’s longer and doesn’t line up for example) select the Move

Tool ( ) from the toolbox and left-click on the text, now drag it to the relevant location. You can do this as often as you need to. You may notice that other images or text move when you move your text, this is because the layers are linked. If you don’t want to move these layers with the one you are trying to move, you must unlink them. If you have your layer selected in the Layers box, scroll up and down and

look at the other layers. Any layer that has a link image ( ) beside it is linked. To unlink a layer,

just left-click the link ( ) icon. Now you can move the layer on it’s own. You may wish to make a note of which layers were linked and re-link them after you have finished moving your layer. To do this, just click the empty box to the right of the visibility icon ( ). Adding Images You may wish to add in your own images, the best example of this is probably your logo. Start by opening the main TEMPLATE.PSD file. To remove any existing image, right-click it and you should see a menu of layer names appear (see Figure 4.2). The image should be the top one, so select it (if it has text it will show the text as the layer name). This will select the layer in the Layers box.

Figure 4.2

Click the (eye) icon next to the layer name to make in disappear. If the wrong item disappears, click the empty space where the (eye) icon was to make it reappear. Right-click the image to be removed again and select the next layer, then make it disappear by clicking the

(eye) icon and keep trying until you find the correct layer. You may need to do this for several layers to remove all of the parts you don’t want.


Now open the image you wish to insert. Make sure the image is the correct size. If you need to adjust it, select Image, then Image Size from the main menu. Increase or decrease the numbers in the Height and Width boxes, make sure the Constrain proportions tick box is checked to avoid distorting the image. Be aware that you may need to eliminate the background of the image if it’s a solid colour and/or isn’t the same colour as the area of the main image where you’re adding it.

For a JPG or GIF image, select the Magic Wand ( ) tool, click the colour you want to exclude, if you have more than one area, hold the SHIFT key and click all of the areas. Now choose Select, then Inverse from the main menu. Select Edit, then Copy from the main menu. Now select the image you are pasting into (TEMPLATE.PSD) by clicking the topbar of the image and select Edit, then Paste from the main menu. This will drop the image into the middle of main

image. Using the Move Tool ( ) drag the pasted image to where you want it. For a PSD file, find the background layer in the Layers box, usually the last one (scroll down to the bottom and it should be there). Click the (eye) icon make it disappear. Do this for each layer you need to remove until you’re left with just what you want to appear in the final image. Now chose Select, then All from the main menu. Select Edit, then Copy from the main menu. Next, select the image you are pasting into (TEMPLATE.PSD) by clicking the topbar of the image and select Edit, then Paste from the main menu. This will drop the image into the middle of main

image. Using the Move Tool ( ) drag the pasted image to where you want it. Changing Image Colours Changing colours within an image can be done in two different ways. If you have a block of colour, the easiest way is to do this is using the Paint Bucket Tool ( ).

First, use the Move Tool ( ) and right-click the area with the colour you wish to replace, select the layer from the pop-up menu that appears (double-check by clicking the (eye) icon next to the layer, once to make it invisible, once to bring it back). Now press and hold the Gradient Tool ( ) and select the Paint Bucket Tool ( ) or press SHIFT and G. Click the Foreground color box (see Figure 4.3) and pick a colour (use the slider in the middle to select a colour, and the box to pick a gradation, see Figure 4.4) then click OK. Now click the area of colour you want to replace in the main image.

Figure 4.3

Figure 4.4


If you have small area or fiddly colour changes to make (to text for example), then the Color Replacement Tool ( ) is probably better suited. Select the correct layer using the Move Tool

( ) as described above. Now press and hold the Healing Brush Tool (image) and select the Color Replacement Tool ( ) from the pop-up menu, or press SHIFT and J until it appears in the toolbox (usually twice). Select the colour you wish to use as the replacement by clicking the foreground colour box (see Figure 4.3 above) and pick a colour from the pop-up window. Now click on the colour you wish to replace and drag the cursor over any areas of the colour you want to change. Note that you can change the size of your brush to make this easier by right-clicking and increasing or decreasing the diameter using the slider in the pop-up box. Saving the Changes One thing you may need to do, after making all of your changes, is to remove any text you don’t need or want. To do this, hold down CTRL and click on the text you wish to remove (make sure to click on the text itself). Now, in the Layers pallet (see Figure 4 above), click the (eye) icon to hide it. If something disappears that you didn’t want to, click the empty square where the (eye) was to make it visible again. Do this for all of the text or images you wish to remove. Once you’ve done this, select File, then Save for Web from the main menu. A new window will appear. Select Save from the top right-hand corner. In the Save Optimized As window that appears (see Figure 4.5), select Images Only from the Save as type dropdown and All Slices from the Slices dropdown. Now select Other from the Settings dropdown. An Output Settings window will appear (see Figure 4.6).

Figure 4.5

Uncheck the Put Images in Folder tick box. Select OK. Make sure you’re in the directory where you have placed all of your images, then select Save from the Save Optimized As window.


Figure 4.6

You should get a Replace Files window asking you if you want to replace the images already in target directory, select Replace. One of the problems with templates is that most only provide you with a PSD image for the whole front page (and other pages if you’ve purchased and entire site design), this makes altering individual images slightly more tricky. The easiest way is to alter and save only the bits you want, rather than overwriting everything each time. To do this, make your changes, then select File, then Save for Web from the main menu as above. The image should be divided into boxes with borders and numbers (see Figure 4.7), if it isn’t, press the Toggle Slices Visibility ( ) icon. Select the Slice Select Tool ( ) and click in the box surrounding the area you changed. If your changes fall into two or more boxes, select the first box, then select any other boxes by holding the SHIFT key and clicking the boxes. The border colour of selected boxes will differ from unselected ones (see Figure 4.8).

Figure 4.7

Figure 4.8 Now hit Save and follow the remaining steps listed above from the Save Optimized As window.


Flash Manipulation To modify the Flash elements of your web site (note that I’m only talking about flash headers, this tutorial does not cover complete flash-based sites) you will need to edit the corresponding FLA (.fla) file. This is the source file for the finished SWF (.swf) Flash animations. The preferred application for editing Flash files is Macromedia Flash MX, but there are other alternatives out there, check the Eight-Eight Template (www.88template.co.uk) resources page for other suggestions. For this tutorial, we will be using Macromedia Flash MX 2004. Please note that all of the features and functions of Flash MX are well beyond this tutorial, I suggest you try and familiarise yourself with the application a little first. Just remember that if you have made a change and can’t undo it, simply close the file without saving it. Opening a File To start editing your file, you need to open it. To do this, select File, then Open from the menu. Now browse to the directory where you extracted your template files to and look in either the HTML or Flash subdirectories (the animations can be stored in either location). Remember, you’re looking for files with an FLA extension, they usually have this file icon. When you find it, either select it and hit Open or double-click it to open the file. If you see a “Missing Font Warning” alert message it means that you haven’t installed (all of) the fonts included in the package. See the Installing the Fonts section above. Changing the Text The easiest and most reliable way to modify text is to locate the element containing the text you want to change in the Library and alter it there. To open the Library, either select Window, then Library from the main menu, or simply press CTRL and L together. You should be able to see a window like Figure 5 though it may well be ‘docked’ with other headers on the right of your screen as in Figure 5.1.

Figure 5

Figure 5.1

Browse the symbols library until you find the symbol containing the text you want (the text or image of the symbol you have selected will appear in the preview box at the top of the symbol library). If you click on a symbol and there is no text in the preview box, right-click in the preview pane and try switching from Movie’s Background to White Background or vice versa. You may also have a little play arrow ( ) in the window, if you still see nothing after changing the background, click the arrow and the image will play, you should be able to see something then. If you still can’t see anything, double-click the image and it will appear in the main workspace.


Now select Modify, then Document from the main menu and change the Background colour (see Figure 5.2) to something completely different (i.e. if it’s white, change it to black). Now follow the steps below.

Figure 5.2

When you have found the symbol containing the text you want to change, double-click the symbol’s icon (to the left of the name) to show it in main workspace window. Click the Text Tool ( ) from the menu and then click the text to edit it. A solid box will appear around the text with a blinking cursor somewhere inside. Simply delete the text and replace it with the text you require. Note that if the text you’re changing is part of a button, you may have to edit the text in all four states. What this means is that there are four options for a button: Up (normal), Over (when you put your mouse over it), Down (when you click on it) and Hit (also when you click on it). To access these different states, you need to select them from the timeline after you have double-clicked the symbol in the library (see Figure 5.3).

Figure 5.3

If you want to change the style of the text in any way, you’ll find a Properties box at the bottom of the main window (see Figure 5.4). If the box isn’t visible, simple press CTRL and F3 together. You need to select all of the text you wish to modify by selecting it with the Text Tool ( ) then dragging the cursor from one end of the text to the other.

Figure 5.4

From the Properties window you can adjust the font size (the dropdown next to the A), style (bold or italic) and colour (the square dropdown) easily using the various dropdowns. When you’ve finished modifying the text, simple press escape (ESC). Repeat this process for all of the text that you wish to modify.


Changing Images First find the image you want to replace in the symbol Library (press F11 if the library isn’t visible). Images can be identified by a Kind listing of Bitmap and a ( ) symbol. When you have found the image to be replaced, double-click the icon to the left of the name. A Bitmap Properties box will appear (see Figure 5.5).

Figure 5.5

About halfway down you will see the image’s size details (e.g. 22 x 22 pixels at 32 bits per pixel). If you want to replace this image, the replacement needs to be the same size (or at least very close) if it is to fit and work in the animation. You can resize your images to fit in a graphics application such as Adobe Photoshop. To replace the image, select Import. A browse window will appear, use the dropdown to find the image you wish to use, then hit OK. Select OK in the Bitmap Properties box. Assigning Links to a Button To change or assign a link to a button or text, first find the button or text in the timeline window. If it is not visible at the start of the flash animation, click and drag the red box at the top of the timeline (see Figure 5.6) to the right or left until the text/button appears in the main window below the timeline.

Figure 5.6

If you still can’t find it, then scroll up and down the list of layers using the scrollbar on the right and make sure that none of the layers have a (cross) below the (eye) image, if they do, simply click the (cross) and it turn into a (dot). Now you should be able to find the image using the timeline. If more than one layer has a cross on it, try them one at a time, replacing the (cross) by clicking the (dot) after each attempt. Using the Selection Tool ( ) single-click the text/button. A blue box should appear around the text/button (see Figure 5.7). Note that if the image fades in or moves, it needs to have stopped this cycle before you can select it.

Figure 5.7


Now locate the Behaviors box on the right side of the screen (see Figure 5.8). If this box is not visible, select Window, then Development Panels, then Behaviors or press SHIFT and F3 together. You may need to select the ( ) arrow to expand the window so you can see it all.

Figure 5.8

With the Behaviors window expanded, select the (plus) icon. And menu will appear (see Figure 5.9). Select Web, then Go to Web Page. A little window titled Go to URL will appear (see Figure 5.10).

Figure 5.9

Figure 5.10

In the URL box, type the URL (the web address) of the page you want to link to. If you want to link to a page on your site, simply type in the full file name (for example sample.html) if all of your files are in the same directory (recommended). If your site is spread over different directories, try putting ./directory name/filename.extension (e.g. ./products/product1.html). The ./ means the link will start from the site root, you can also use ../ which means the link starts from the directory above. This can get very complicated and difficult to figure out, unless you expect to have a lot of pages, just leave all of your web page files (HTML) in the same directory. The Open in option on the Go to URL box tells the page where it should open. The default, _self means that the page opens in the current window (i.e. replaces the current page), this is the preferred method. Both _parent and _top are only necessary if your site uses framesets, which your template will not. Lastly, _blank will open the link in a separate browser window, this leaves the current window exactly as it was. This is useful if you want people to view things on another site without closing yours, but it can get confusing, this technique is not generally recommended. When you have filled in the fields, click OK. An Event should appear in the Behavoirs window (see Figure 5.11). This button is now linked.

Figure 5.11


Adding Static Text If you wish to add static text (please note that this tutorial does not cover flash animation) the easiest way is to find some text similar to that which you want to create (i.e. a similar style) in the Library (press CTRL and L if you can’t see it). Once you find the text, right-click the name of the symbol and select Duplicate (see Figure 5.12).

Figure 5.12

A Duplicate Symbol box will appear, give the symbol a name and hit OK. You’re new symbol will appear in the Library, double-click it’s icon to edit the text. This will cause it to open in the main window. Select the Text Tool ( ) and click the text. Edit the text as suggested in Changing the Text above, not forgetting to change all of the states if it’s a button. Press escape (ESC) to exit edit mode. At the top of the window, you should see a icon with a name next to it (see Figure 5.11). Click the name and you should return to the main animation.

Figure 5.11

Find the correct time in the animation timeline that you want the text to appear by dragging the read box at the top of the timeline window left or right to go back and forth (see Figure 5.6 above). To place your text, highlight it in the Library and drag it on the main animation to the spot you want it. Removing Text or Images To remove some text or an image, simply find it in the main window (note that you may need to use the timeline to find it if it isn’t visible, see Assigning Links to a Button above for instructions). If you think you will want/need to use the image/text again, select it with the Selection Tool ( ), this will automatically select the layer it’s on, simply click the (dot) below the (eye) on the left of the timeline and is should change into a (cross). This makes the layer invisible and easy to retrieve and/or modify later should you wish to. If you’re sure you will not use the text/image, select it with the Selection Tool ( ), a blue border should appear around it, and hit the DELETE key. This does not remove the text or image from the symbol library so you can always get it back, but if it has an animation (i.e. it appears with some sort of motion or fade) it will be difficult to recreate the animation, which is beyond this tutorial. Publishing your Flash Movie Once you’ve made all of the changes to your Flash animated header, you need to publish it. To do this, select File, then Publish from the main menu. Open one of your web pages in a browser to make sure everything is working properly.


Creating Subpages If you did not purchase a complete site package you will only have one page in your template when you download it. If you bought a complete site package, you may have several, or just templates for a main page and content pages. Either way, you will probably need to create one of more additional pages for your site. You’re completely free to create more, and it’s necessary if you wish to have a fully working site. We recommend that you modify your page before you duplicate it, to save you some of the modifications further down the line. You can duplicate a page in two ways:

1. Open it in Dreamweaver and select File, then Save As. This will open a Save As window (see figure whatever). Simply give the file a new name in the File name box (try and keep the extension the same, i.e. if your original file says .html on the end, add .html to the new file name) and click Save.

2. Open the directory where you files are stored in Windows Explorer. Select the file you

want to copy, then select Edit, then Copy from the main menu. Now select Edit, then Paste from the main menu. You should now see a file with the same name as the original, but with the words Copy of in front (see Figure 6). Right-click the file and select rename. Delete everything before the last . (but keep the .) and type in the new name. Press ENTER.

Figure 6

Easy Guide to Modifying Web Site Templates

Documents

Transcript of Easy Guide to Modifying Web Site Templates