by Kevin E. Presley Training Coordinator
February, 2005
Dreamweaver .................................................................................................................................. 1 Configuring a Site ........................................................................................................................... 1 Check In/Check Out.................................................................................................................... 2 Downloading a Site......................................................................................................................... 3 Editing Existing Pages .................................................................................................................... 4 Uploading Pages or Folders ............................................................................................................ 4 Creating Pages With a Site Template ............................................................................................. 4 Creating Pages Without a Site Template ........................................................................................ 6 Editing Text ................................................................................................................................ 6 Font Style, Type, Size, Color, and CSS Styles ....................................................................... 7 Bold, Italic, and Alignment..................................................................................................... 7 Hyperlinking Text................................................................................................................... 8 Bullets and Lists...................................................................................................................... 8 Inserting Pictures ........................................................................................................................ 9 Inserting Tables......................................................................................................................... 10 Tables for Displaying Data ................................................................................................... 11 Tables for Aligning Images .................................................................................................. 12 Tables for Aligning Text....................................................................................................... 12 Creating Forms.............................................................................................................................. 13 Inserting the Form..................................................................................................................... 13 Inserting Text Fields ................................................................................................................. 13 Inserting Text Areas.................................................................................................................. 14 Inserting Check Boxes .............................................................................................................. 14 Inserting Radio Buttons ............................................................................................................ 15 Inserting List/Menus ................................................................................................................. 15 Inserting Buttons....................................................................................................................... 16 Hiding E-Mail Addresses.............................................................................................................. 16
Dreamweaver
Dreamweaver is a web site editing program made by the Macromedia corporation. It provides 2 different modes to edit a site. The Code mode allows html experts to manual code files. The Design mode allows you to create web pages using a Word-like environment that is simple and easy to learn. That is the environment that this manual will discuss. This manual is not intended to teach you how to code in HTML. To switch between these modes simply Left Click View and then Left Click Code or Design Mode.
Configuring a Site
In order to begin working on a site you must first configure it. To access a web page in the university system you must first have a login name that has access rights to the site in question. If you need assistance with this process contact the Help Desk and they can guide you through the process.
The initial screen that appears when Dreamweaver loads has a content area (the largest white area in the picture), a properties window (the bottom half of the page below the content area), a styles area (to the right on the top), and a Site area (to the right on the bottom). To configure a site, Left Click Site, New Site.
1
On the Local Info screen name your website in the Site Name field. In the Local Root Folder field either write in, or use the folder icon to browse to the folder in which you wish to store your website. The Default Images Folder is where you wish to store all the images on your website. The HTTP Address is the actual physical http address of your webpage such as: http://extension.oregonstate.edu/esoc/ectu/ Which is the address for Help Extension. From there Left Click Remote Info. Change the Access option to FTP. The FTP Host is access.cws.oregonstate.edu . The Host Directory for Extension sites will be: /nfs/disk/data/www/virtual/extension/sitename/ Login will be the login you receive from CWS after contacting the Help Desk. For OSU Employees it will be your Onid account. For County Employees it will be a special cw_ account. Next type in your Password. It will automatically select Save for you. Finally Left Click OK to finish configuring the site.
Check In/Check Out
At the bottom of the Remote Info page is a choice to Enable File Check In and Check Out. If you are going to be working in an environment where several people may be working on the website at any one time, it is suggested that you turn this feature on. What this does is block anyone from opening a file that you have already checked out. This way your changes do not get overwritten by someone else. Later when we discuss how to put files to a site you will also notice an option to Check In a file.
2
Downloading a Site
The first step after configuring your site is to down load it. In the Site area in the lower right of the screen, the first icon resembles two plugs with a gap between them. Left Click this icon to connect to the Remote Server. If it fails to connect you need to verify that your site information, login, and password are correct. Once connected you will see the /nfs/disk/ list from your site configuration. Right Click that level and then Left Click Get. It will ask you to verify that you wish to get the entire site. Left Click OK.
Depending on the size of your site and the speed of your internet connection this may take several minutes. Once it has finished, change the Remote View window to Local View to see that you have indeed downloaded your entire website. This structure is on your hard rive at the location you typed in during the site configuration step. It is important to remember that to delete a file permanently from your website it is necessary to make sure that you delete it off the remote and local views. Otherwise you may inadvertently repost a deleted file when putting the entire site. If more than one person is working on the website it is important that the first step you perform before editing any files is to re-get the entire site so that any changes made by the other people will be made to your local copy.
3
Editing Existing Pages
Editing existing pages is quite simple. First find the page in the folder structure in the Site window. It is best to edit in Local View. Once you find the file Double Left Click to open the file in edit mode. The file will then load in a Word-like environment for you to complete your edits.
Uploading Pages or Folders
When you have finished editing or creating a single page, or a group of pages under a particular folder, simply save the file by closing it and then agreeing to save it, Right Click the file or folder, and then Left Click Put. The software will then ask if you wish to include Dependent files. Always agree to include these files. What this means is if you modify any of your template files it will automatically reload those template items into all the other subordinate files. If you neglect to do this, the changes you meant to make may not take proper effect.
Creating Pages With a Site Template
Extension and Experiment sites have the opportunity to take advantage of using the Extension PHP templates. The templates limit the areas you would normally need to edit by standardizing
4
the Header, Left Rail, and Footer areas. These areas are kept separately and added at the point when someone views a page.
If you have a site template, Left Click File, New. Then Left Click Templates. Any templates that you have built into the site will now appear. Generally each site will only have one template, but if you have made modifications for a print friendly version of the template, or have a front page that is a three panel instead of the standard two panel, more than one template may appear. Left Click the desired template and then Left Click Create. A new file created from the template will appear. The templates allow you to edit the page Title at the very top of the page. It also has two Content Areas. The first content area is for the main title that you will see on the actual page. The page Title is what people see at the very top of their browser window when they access a webpage. The second area is for your actual content.
5
Creating Pages Without a Site Template
To create a site without a template simply Left Click File, New. Make sure you are on the General tab. Left Click Basic Page and then Left Click HTML. Left Click Create to begin editing the page. Unlike the PHP template, you will not be restricted as to where you can or cannot edit the page in this mode. However, it will be up to you to create any header or rail links.
Editing Text
Typing in text works the same as just using Word or any other editor. You can also copy and paste text from one of those editors directly into the Dreamweaver window. Just as it says in the picture though, any formatting the text had in the other editor will be dropped. You cannot copy text in column format into Dreamweaver. HTML does not have columns. To put text into columns you must use a table. We will cover that in the tables section.
6
Font Style, Type, Size, Color, and CSS Styles
In the Properties area below the main content window you can change the properties of text. First highlight the desired section of text. Left Clicking the black arrow next to the Paragraph box will allow you to change the style of the text. These are the only standard styles available in HTML. These Heading styles work basically the same as they do in Word. Next is the Font box. You may wonder why the list of available fonts is so limited. The reason why so few fonts are available is standard HTML formatting limits the number of fonts to maximize the compatibility with the various kinds of browsers and screen readers in use. Next is the Size selection. This may be a little confusing. HTML fonts do not come in point sizes. If you do not choose a size, the font will be the default size. The default can be guided by the template if there is one or the browser if there is not. This is generally around 10pt size. If you select a larger number between 4 and 7 the font will be proportionally larger than this conversely if you chose a smaller number it will be smaller. For readability it would be best not to use the negative font sizes. Next is the small grey square which allows you to chose a font color. The color wheel allows you several modes to choose from for selecting colors. Once a color is select you will see it in the little window beside the square in hexadecimal numbers and it will change the color of the font. It is important to remember not to use either the bright blue color of an unused hyperlink or the red brown color of a followed web link. This will only confuse your users. If you are using a template, in the upper right hand side of the screen you will see the CSS Styles window. These styles are preformatted Style, Font, Color, Size, and even background color schemes. To use one of these if available, simply highlight your text and then Left Click the desired style.
Bold, Italic, and Alignment
Bold and Italic are just the simple B and I. Alignment is the same as Word as well. They are Left, Center, Right, and Justified. Justified is like newspaper print. The left and right margins are filled with spaces between the words to better fill the screen.
7
Hyperlinking Text
Hyperlinking Text is done using the Link window at the bottom of the Properties area. You can do this in two manners. One you can Left Click the folder icon and browse through you folder structure to find an existing page within your own website. This creates a relative link that will be evaluated when you Put the file. The other method is to type the actual http link as shown in the picture for the site to which you wish the link to go.
Bullets and Lists
To create a bulleted or numbered list simple select which type you want either bulleted or numbered from the bottom right icons on the Properties area and then type your first bullet. When you hit enter it will automatically add the next bullet and place it directly beneath the previous one.
8
To create a sub-bullet click on the bullet you wish to indent and Left Click the icon with the arrow pointing to the right. The icon with the arrow pointing to the left will bring the bullet back out one level. You will notice that the standard 1>a>i format is not used in default HTML. To change the bullet selected by Dreamweaver Left Click the desired level and then Left Click List Item in the Properties area. You will then see the List Properties window. Default is the style used either by the template or standard HTML. The Extension templates use A,B,C instead of 1,2,3 by default.
You can override the selected style by first choosing a List Type and then choosing a Style. It is important that you set the same style in both the upper and lower List Item areas.
Inserting Pictures
To insert a picture into a webpage Left Click Insert, Image. To insert an image it must either be in the folders of the site, or on a specific webpage that you will reference using the URL link. It is not suggested that you do this unless you have explicit permission from the website owner. To select one from our own folders browse to your images folder, Left Click on the desired image, and then Left Click OK.
9
Once the image is in our page we can change the Width and Height using the W and H icons or by Left Clicking, Holding, and Dragging on one of the black squares on the image. It is important to be careful not to radically distort the proportions of an image. If you are dealing with close-up pictures of people it is not suggested that you resize using this method. You can Left Click Edit to engage your default picture editing software. In that software you can then resize the image with more control. Keep in mind when you change the proportions and save the image that you are permanently changing the image in the file structure. Once changed remember to Left Click Reset Size to change the image inside Dreamweaver to the new size. You can set a hyperlink for the image by typing it into Link just as we did for text. The Alt field is for putting what is called Alternate Text tags for the image. When you hover over an image with your cursor the Alt field text will appear. This is not its primary purpose though. This field enables the blind with screen readers to determine a general feel for what the image shows. It is not necessary to try and describe the image. A short explanation such as that shown above is desired.
Inserting Tables
Tables can serve three main purposes: One they are a means of displaying tabular data where the table borders itself are a visible part of the presentation. Two they can be used to align images on the page relative to either the edge of page or other text. Three they can be used to align text to resemble columns in a normal document.
10
Tables for Displaying Data
To insert a table Left Click Insert, Table. Dreamweaver will then ask you have many Rows and Columns you wish the table to contain. The Width is done by percentage of the screen area. By saying 100 percent the table will reshape itself so that its width is no wider than 100 percent of the screen area. This may cause your table to be longer on lower screen resolution systems, but will always insure that all of the table is visible. The Border setting sets the thickness of the border. Cell Padding is how far from the border text begins. Cell Spacing is space between the cells themselves. Once the table is inserted you can choose to address the table as a whole or a single cell. In the picture we have the whole table. The top set of controls let you change the same settings you just chose when building the table as well as setting a general Alignment value for the table as a whole. The lower tool bar lets you choose a table wide Bg Color(Background) and a Brdr Color(Border). You may also choose to have an image as the background but for visibility this is not suggested.
When you choose a particular cell The text options appear for placing text in the cell on the top row. The bottom row modifies the table options slightly to deal with a single or group of cells. You now have vertical as well as horizontal alignments. Here you can make a particular cell a certain size out of the percentage of the whole. You can choose a background and border color independent of the table. You can also specify that this is a Header row. A header row identifies that this is an important row to a screen reader. For example if we had a cell at the top of the table that said Name and we called it a Header, when the blind person reaches a certain
11
line of the table it would remind them with something similar to the following: Line 99 Column Name, Bob. Without setting this it would merely say column 1. For a small table this is not really necessary, but it is suggested for tables larger than 3 X 3. Underneath the Insert, Table options you also have the ability to Merge Cells that are highlighted, Insert Rows or Columns, or Delete Rows or Columns. These tables do not do mathematics. If you want formulaic type data it is suggested you copy the data from Excel files.
Tables for Aligning Images
A table for aligning images is general a 2 column by however many rows you need table that has a border of 0. A zero border means that it will not show up as a table on the screen. You then insert the image into the second cell then resize the first cell to gain the alignment that you wish. Also you could put the picture in the first cell and then put text in the second cell so that it appears next to the image.
Tables for Aligning Text
Columns do not exist in HTML to gain the effect of columns it is necessary to insert a table that has a 0 border just like when dealing with images. The first column of text goes in the first cell and the second in the second. The space between the columns can either be controlled by change the size of the second cell, or by insert a black third cell between them.
12
Creating Forms
Creating forms is fairly easy to do using Dreamweaver. First you must insert a Form then u select the Form Objects you wish to have on it. Remember that the Form Objects are just the fields that will be submitted. You will also need to add text to explain what the fields are asking for the reader.
Inserting the Form
The first step is to add the actual form item. To do this Left Click Insert, Form. This will put in the red rectangle you see above. All of the fields you add will be put inside this red rectangle. The Form Name is an optional field that you can change. Method POST is the default method for submitting a form to a forms processor. This should not be changed. The Action field is where you type in the name of the forms processing file. Usually the forms processor will be stored in the same folder as the form so that only the actual file name will need to be listed. However it is possible to use a forms processor on a totally different site by using the actual http address of the processor. The Webhelp team can help guide you to a forms processor or help you build one.
Inserting Text Fields
The first field type is a text field. To put a text field into the form Left Click Insert, Form Object, Text Field. Under the TextField heading is the name of the field all of the form objects we insert will have these name fields. Next you may select a specific Char Width to set the
13
visible width of the field on the screen. The you may input a Max Chars option to limit the number of characters a person may type. Generally you will not change the Type field to Multi line since we have Text Area fields for that purpose. You can also specify a default Init Val for the field if you wish. If you set the type to Password anyone looking over the shoulder of the person filling in the field will see only asterisks, but the actual value will be submitted.
Inserting Text Areas
A Text Area is a multi line text field. To put one in the form Left Click Insert, Form Object, Text Area. Name the field as we did for the Text Field. The Char Width field serves the same purpose here as it did before. The Num Lines field in combination with the Char Width field sets the maximum number of characters that may be inserted into the field. Once again you can set Init Val.
Inserting Check Boxes
A Check Box appears as a simple square that when clicked puts in a check mark. To insert one Left Click Insert, Form Object, Check Box. Once again set the Name field. The Checked Value field is the value the form will export in relation to the Name. Then you may choose to have it checked or unchecked for Initial State. Multiple Check Boxes named the same name with different Checked Values will alternate being checked. In other words if I have two check boxes named the same name only one can be checked at a time. If you wish to allow for multiple boxes to be checked for one question then these fields will need different names.
14
Inserting Radio Buttons
A Radio Button appears as a simple open circle that when clicked puts in a black filled in circle. To insert one Left Click Insert, Form Object, Radio Button. Once again set the Name field. The Checked Value field is the value the form will export in relation to the Name. Then you may choose to have it checked or unchecked for Initial State. Multiple Radio Buttons named the same name with different Checked Values will alternate being checked. In other words if I have two radio buttons named the same name only one can be checked at a time. If you wish to allow for multiple radio buttons to be checked for one question then these fields will need different names.
Inserting List/Menus
A list menu is also sometimes called a combo box. To insert one Left Click Insert, Form Object, List/Menu. Name it like the other field types. Select List under Type. For this type you can offer to allow multiple selections, but this will only work if it does not matter if the process form ahs multiple values. For most database purposes this will not work. To put in the values, Left Click List Values. Type in the value under Item Label then Left Click the + symbol. You can use the arrows to raise a value up or lower it down in the list. Left Click OK to finish adding values. Left Click one of the values in the Initially Selected window to set a default value.
15
Inserting Buttons
You will need two buttons by default on any form one a Submit button to send the form, and one a Reset button to remove the data so that it can be filled in fresh. To insert the buttons, Left Click Insert, Form Object, Button. Then simply select the type of button you need in the Action field. Generally the Submit button is on the left and the Reset on the right.
Hiding E-Mail Addresses
E-mail addresses inserted by using the Insert, Email Link option are vulnerable to being “stolen” by automated screen readers. The purpose of these automated screen readers is to find e-mail addresses for the purposes of selling them to spammers. The mailto: link type e-mail address links are what they target. They search for the @ symbol and take everything to the left and right of the @. To protect against having your e-mail address stolen in this manner use the following javascript in place of using a mailto type link. Substitute your first and last name for the first.last and use your organization’s server name instead of oregonstate.edu. On the Design window type in something like: E-mail: Then change to the Code window and find that text. It should look like:
E-mail:
or something similar. Paste in the complete javascript below with your name specific changes before the . The