Website Changes using Dreamweaver 4

Please read entire document

By James Foreman

Dreamweaver is one of the top web editing software tools on the market. It is complex as far as how much it can do but simple for basic updates of text, images etc. It does not edit images, and does not assume anything. So it is up to you to make a choice about how you want it to look, with general web design principles in mind. I will state a few of those here, and please use this document as a guide. For further information, or if you get stuck use the help files with the software. It will benefit you to spend a little time learning the program, since you may forget most of what is taught to you over time.

The main thing is to use the text styles that are already on the page you want to work on, or on the pages that are currently on your site. So if there is a font you want to use and a color to give the text, it is a very good idea to keep it consistent with the rest of the site. For the purposes of this document I will describe how to edit text and plug in an image that has been sized and in a format for use on the web (all image files need to be .jpg or .gif).

Setting-up Site Files on Your Computer

The first thing that you need to do is drag all the contents of the Website Folder, located on your CD, into a place on your hard drive where you would like all the files to reside.

Open Dreamweaver and at the top of the page click on Site > New Site. When the window opens you will need to name the site, then select the Local Root Folder that you created on your hard drive by clicking the yellow folder icon next to the text box. On the left side of the window you will notice a box that has all the categories. Currently you are in Local Info, so click on Remote Info. A drop down box will appear and you want to choose FTP.

From there you will be putting in the following information:

1. FTP Host - ftp.monitor.net

2. Host Directory – can leave blank

3. Login – put client username here

4. Password – *********

Click on the box next to the password that says, “remember password”. Once you do this click okay and now you are ready to make changes to your site files or upload and download files.

You will now be viewing the site window where on the right side will be the local folder or folders and the left will be blank, but eventually be filled with your remote folders (once you connect to the server).

Connecting to Server

You will notice a button at the top of the window that is right next to the name of your site. It has what looks like two plugs coming together with a black circle next to it. If you put your mouse over it it says, “connects to remote server”. Click on the button and it should take you to your server. The files will show up in the left window.

To download the files from the server you can click and drag a file from your remote window (on the left) to your local files window (on the right). To download more than one file hold down your control key and click on the each file that you want to download. Once you have selected the desired html files drag them to your local folder in the right window or click on the green arrow button at the top of the window that says, “get files” when you put your mouse over it. A dialogue box will appear and ask you if you want to download all supporting files, only answer yes if you do not already have all the images and associated files on your local computer. This will begin the process of downloading. Do not do anything else on your computer until the loading is finished.

Editing Text and Importing Images

You will notice a file within the Website folder called ccatstyles.css. This file defines the text color, font and some of the headers used on the site automatically.

Open up an existing page that you would like to make changes to. You will notice that there are boxes around each area of the page. Those are the tables. You will also notice if you are in design view, code view or the split design/code view window. For these purposes you will want to be in design view only, which can be clicked into by using the button at the top of the window that is next to your title, or go to View > Design View. What you do from here depends on if you will be typing in the text or cutting and pasting from an existing document (like MSWord). If typing then go to the area you want to work on and type in the information. You will not want to play with the style of the text till done typing. This will help you to not make mistakes in the html while editing, or overlapping discrepant styles on the page.

If you are going to cut and paste from a word document or another program, that can be done, but keep in mind that there may be line breaks in the text that may need to be taken out after insertion of the text. You will see the yellow <br> image next to a piece of text if there is a break. The <br> tags need to be taken out unless you want to have a one space return at a specific spot, otherwise the text may not align correctly.

Example – Quote - It gave me the opportunity to experience being connected, seen and valued by faculty and peers. It was this that convinced me of the value of pursuing further training in Core Energetics." This is where the break will be so there is a return of text to the next line.

- Barbara Haas, Core Energetic Student

After the text is placed on the page or typed, then you are ready to stylize. You should see a box that popped up when you opened the document, which is the properties box. It has a box for format, font, size etc. and is much like what you see in any text editor such as MSWord. There are additional styles and options for text at the top of the window under the text drop down menu. You will want to play with all the options in order to get a feel for how to use them, just hit Control + z to undo. Remember that changes to the font will not take effect because the site uses Cascading Style Sheets .

For these purposes I will give directions for a few of the main text changes that you will make.

Line Breaks or Returns – To create a line break that will only go to the next line hold down Shift + Enter(return). To start a new paragraph or create space just hit Enter/Return. You will always be doing block paragraphing.
Headers – To give a title a header just use the format box in the far left to give it a header of 1, 2, 3, and up. Us this sparingly and I suggest not using anything but a #3 or #4, header since #1 or #2 look very large on most computers.
Creating Lists – To use a numbered list or bullets use the boxes provided under the B and I part of the box. You will need to separate the list from other text before using a list, since the format will be picked up by other adjoining text. To separate text hit return.
Creating Links – To create a link to another page or site you will need to highlight the text that you want to use as the link. In the box provided within the properties panel you can type in the link, if to another site, or click on the yellow folder to select the file that you want to link it to on your own site. For outside links type in the full address (i.e. http://www.thesitetogoto.com). The pages within your own site do not need an absolute path (i.e. it may just be contact.html).
To Add an Image – you will notice that another panel that opened is the Objects Panel. This is tall and usually on the left side of the window. To add an image to your site click somewhere on the page that you want to insert it and click on the upper left hand square within the Objects Panel (it has pict of a tree). This will open a dialogue box, locate the jpeg or gif within your images folder and select OK.
Aligning Images – Click on an image to select it (shows a black border around it) you will see that the properties box has changed to different options. On the right side use the Align drop down list to choose center, right, left etc. It will respond relative to where it is located (i.e. near text, within a table, other images etc.).
Image as Link – To make the image a link either use the yellow folder icon to choose a file within the current site or type in the full link (http://www.thesitetogoto.com) within the link box provided.

I do not suggest making changes to the navigation bar, images that are already on the page or links until you get a good feel for the program. The page may look great on your machine after taking the risk of making a change, but it is the computer of your visitors that mean the most.

Uploading the changed Pages

You will want to make sure that you are connected to the server. If not use the button next to the site title within the site window to connect.
Highlight the page or pages using Control + Click and drag them to your remote site window, left side.
To upload new images, find the folder they reside in within your local site folder. Open the folder on the remote server by double clicking on the folders to open them, and drag the image to the correct place that matches your local files.
Always view the site online, after uploading, and check what you have changed. Something may not have loaded. I suggest checking it in both Internet Explorer and Netscape Navigator, but that is truly up to you. You can download a copy of each browser to your computer in order to do that.

Questions or comments about this document can be sent to James at mailto:create@subtlefx.com. Or call 707-526-1386.