CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8 University Computing and Information Services Training Guide For additional help, contact the UCIS Help Desk at (910) 521-6260 or helpdesk@uncp.edu, or visit www.uncp.
ABOUT DREAMWEAVER 8 ............................................................................................................................. 1 HELP WITH DREAMWEAVER 8 .................................................................................................................... 1 THE DREAMWEAVER WORK AREA............................................................................................................ 1 THE DOCUMENT WINDOW .................................................................
WEB SITES OF INTEREST ............................................................................................................................. 16 ADDITIONAL HELP.........................................................................................................................................
ABOUT DREAMWEAVER 8 Macromedia Dreamweaver is a professional HTML editor for visually designing and managing Web pages and sites. Whether you enjoy the control of hand-coding HTML or prefer to work in a visual editing environment, Dreamweaver makes it easy to get started and provides you with helpful tools to enhance your web design experience. HELP WITH DREAMWEAVER 8 When you need help with Dreamweaver, from the menu, select Help, Using Dreamweaver. 1. 2. 3. 4.
The Insert Toolbar You can turn ON or Off the Insert Toolbar by selecting Window, Insert. The insert toolbar contains icons you click to insert objects in your document and to change the way you work in a document. The objects panel contains seven categories by default. The category is selected by using the drop down menu below the blue bar.
VIEW THE CODE As you build your web page it is interesting and instructive to follow the progress in HTML by flipping back and forth to the source code as you add elements to your page. This will help you make adjustments in the source code as needed. You can select a tag on the bottom of the workspace before switching to the source code to highlight an entire area of the code. View the code by selecting View, Code or by clicking the View Code button on the minilaunch bar in the lower right hand corner.
5. Name the Site in the Site Name box and Click Next. 6. We are not using server technology Click No and then Click Next. 7. Select the recommended option in this window which is edit local copies on my machine then browse to the folder that you created for storage of your web page files and click Next. 8. The connection type is FTP- click the down arrow and select FTP 9. The hostname of the FTP server Is webpages.
Design the Home Page 1. Decide how you want your web page to look and create tables to hold the graphics and text that you wish to include. 2. To insert a table click the Table icon on the Insert Toolboar 3. In the table properties box you can set properties for the table you are about to insert. 4. You can move the cell boxes by clicking on the frame of the box and dragging the box. 5. You can move a table by clicking and dragging the table tab. 6. Save your work. Add Content to the Page Text 1.
Rollover Image 1. A rollover image is actually two images in the same place. One image is displayed when the cursor is not on it and the other displays when the cursor is moved over the image. 2. Click on the Insert Menu and select Rollover Image to insert a rollover image. 3. Name the Image. 4. Click on Browse button to select the original image. This is the image that displays when the cursor is not on the picture. 5. Click on Browse button to select the rollover image.
THE SITE MAP You may view the site map and how your files are linked through the site map. This is accessed by clicking the Window Menu and selecting Files. From this menu you can view remote or local files. To expand the window and see both Remote and Local files click the expand button on the toolbar. BROWSER PREVIEW PREFERENCES To change the choices available in the Launcher Panel and on the mini launcher, select Edit, Preferences, Preniew in Browser.
ADD AN E-MAIL LINK 1. 2. 3. 4. Position your cursor where you would like the link to appear. From the Common Objects Panel, select the Insert Email Link button . In the Text Box, type the text to appear in the document as an email link. In the E-Mail field type the email address that the mail should be addressed to. 5. Click OK.
ACCESSING THE FORMS TOOLBAR On the Common toolbar click the word Common and Select Forms from the list. SET UP A FORM 1. To begin a form, position your cursor on the page where you want the form to begin. Insert a form object from the Forms Objects Panel by selecting the Insert Form button . All the elements of the form will be inserted within this object to ensure that they will be treated as forms objects by all browsers. A red dotted line box will appear.
to the next line. Virtual sets word wrap in the text area. Physical sets woed wrap in the text area and to the data when it submitted for processing. e. If you want to set default text for a text field, type the text in the Init Value field. This text will be displayed on the form when it initially loads in a user’s browser. ADD A CHECK BOX Check boxes allow users to select more than one option from a set of options. To add a check box to your form: 1.
1. Add any descriptive name for the radio button to your page (Ex. Hunting). 2. Move the cursor to the point where you would like the radio button to appear then click on the Radio Button icon in the Forms Objects Panel. 3. Right click inside the check box and select Properties from the menu, if the Property Inspector is not already open. The Radio Button Properties box opens. a. Enter a name for the radio button.
d. e. f. g. With the insertion point in the Item Label field, type the text you want to appear in the list. In the Value field, type the text or data you want sent to the server when a user selects the item. button and repeat steps d and e. To add another item click the Add You may change the order the items will be listed by selecting an item and clicking the Up or h. i. Down Arrow . Click OK when all items have been added. Select the Item that you wish to have initially displayed.
f. g. h. i. With the insertion point in the Item Label field, type the text you want to appear in the list. In the Value field, type the text or data you want sent to the server when a user selects the item. To add another item click the Add button and repeat steps f and g. You may change the order the items will be listed by selecting an item and clicking the Up or Down Arrow . j. Click OK when all items have been added. k. Select the Item that you wish to have initially displayed.
3. Enter 'recipient' as the name for the hidden text box. 4. Enter your key value for this form in the Value box. It should now display on your Dreamweaver screen as a hidden field marker . But the hidden field will be invisible once the page is loaded in the browser. IMAGE MAPPING Image maps take a graphic image, divide it up into sections, and create a hypertext link in each of the sections. For an example of image mapping, visit http://www.uncp.edu/sa/map.htm 1. Open Dreamweaver and select File, New.
resolution compared to a 800x600 desktop resolution. A lowest denominator computer would consist of a 15” monitor, 256 color display and 28.8K modem 9. If you see a great graphic or background on another page, make sure you ask before using it. It may be easy to download, but many images are copyrighted and can not be used on a page without permission. 10. Use clip art to make your page more attractive! However, excessive clip art will slow the load time for the page. 11. Design page for audience, not self.
2. Leave the site open when you close Dreamweaver. If you do, the site will open automatically when you open Dreamweaver. WEB SITES OF INTEREST Faculty and Staff Computing Services www.uncp.edu/ucis/facultyandstaff Online Guides www.uncp.edu/ucis/guide Creating Web Pages@UNC Pembroke www.uncp.edu/ucis/guide/webpages UNC Pembroke Web Site Policies and Procedures www.uncp.edu/uncp/policy.htm Paint Shop Pro v.6 www.uncp.
