CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8. University Computing and Information Services. Training Guide

Transcription

1 CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8 University Computing and Information Services Training Guide For additional help, contact the UCIS Help Desk at (910) or helpdesk@uncp.edu, or visit Copyright 2001 UNC Pembroke

2 ABOUT DREAMWEAVER HELP WITH DREAMWEAVER THE DREAMWEAVER WORK AREA... 1 THE DOCUMENT WINDOW... 1 THE INSERT TOOLBAR... 2 THE PROPERTY INSPECTOR TOOLBAR... 2 VIEW THE CODE... 3 CREATING A SITE... 3 CREATE THE HOME PAGE... 4 DESIGN THE HOME PAGE... 5 ADD CONTENT TO THE PAGE... 5 APPLY COLOR AND STYLE... 6 ADD LINKS... 6 THE SITE MAP... 7 BROWSER PREVIEW PREFERENCES... 7 ADD AN LINK... 8 FORMS... 8 OBTAINING A KEY... 8 ACCESSING THE FORMS TOOLBAR... 9 SET UP A FORM... 9 ADD A TEXT BOX... 9 ADD A CHECK BOX ADD A RADIO BUTTON ADD A POPUP MENU ADD A SCROLLING LIST BOX ADD SUBMIT AND RESET BUTTONS ADD THE KEY TO THE FORM IMAGE MAPPING BEST PRACTICES OF WEB DESIGN PERSONAL COMMERCIAL UNIVERSITY COMPUTING AND INFORMATION SERVICES TIPS FOR DREAMWEAVER... 15

3 WEB SITES OF INTEREST ADDITIONAL HELP... 16

4 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 handcoding 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. The Help Topics: Dreamweaver Online Help window opens. 2. The four help tabs are Contents, Index Search and Favorites. 3. Click the Contents tab and double click on the topic that best answers your questions. 4. Click the Index tab. Click the first letter of the word for which you are looking. Scroll down and click on the topic that best suits your needs. 5. Click the Search tab to begin the search for a keyword.. Type the word in the top box and click Display Topics. Click on the topic that best suits your needs. THE DREAMWEAVER WORK AREA From your desktop, open Dreamweaver by clicking on the Dreamweaver icon. When you launch Dreamweaver, three windows open, the current document, the objects panel and the property inspector. The Document Window The Document Window displays the title bar, the command menus, the toolbar, the launcher bar, the tag selector, the size indicators, and the current document. University Computing and Information Services Page 1 Dreamweaver 8

5 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. The Common Objects contain buttons for creating and inserting images, rollover images, tables, tabular data, layers, navigation bars, horizontal rule, link, date, flash buttons and text, etc. The Characters category contains special characters that may be inserted in the page. Other categories are Forms, Head, Invisibles, and Special,. The View buttons are for standard and layout views. When in the Layout view, the Layout buttons insert tables or cells. The Property Inspector Toolbar The Property Inspector lets you examine and edit properties for the currently selected page element (graphics or text.) You can access the Property Inspector by selecting Window, Properties. The properties available depend on the page element selected and generally include formatting information and any links associated with the element. University Computing and Information Services Page 2 Dreamweaver 8

6 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. Return to the design window, by selecting View, Design or by clicking the View Code button launch bar in the lower right hand corner. on the mini You may also split the screen to view the code and design simultaneously by selecting View, Code and Design. If you select a tag at the lower left of the screen, the corresponding element will be highlighted within the code window. CREATING A SITE 1. Start Windows Explorer and create a folder for your web pages. 2. Return to Dreamweaver. 3. Choose Site, New Site. 4. The Site Definition window opens. University Computing and Information Services Page 3 Dreamweaver 8

7 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. The path for the folder on the server for storing files for a departmental site would be /home/username/department acronym EXAMPLE: /home/morgan/ucis For a personal site it would be /home/username/publichtml EXAMPLE: /home/morgan/publichtml 10. Type the same username used when logging into the network. CREATE THE HOME PAGE 1. Make the document window active. 2. Save the blank web page as Index.htm in your web page folder. Note that the title bar now reflects the file name. 3. The file name is different than the title of the page. The title will display on the title bar of the browser when a user accesses it over the internet. To name your page click in the Title box on the toolbar and type an appropriate name. University Computing and Information Services Page 4 Dreamweaver 8

8 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. Using the Properties Inspector toolbar. 2. Set your font style and size. Size options in HTML are integers from 1 to 7. The actual size will vary depending on the operating system and the browser in which the page is viewed. Image 1. Any images that will be included in your web page must be in the web page folder. Copy the images you need into that folder. However, when you insert an image into Dreamweaver that is not in the root folder, you will be prompted to copy the image into the folder. Dreamweaver will put the image in the root folder. If you wish to have your images in a subdirectory called images, you should copy those images into the folder before placing them in your web page. 2. Click the desired location of where you would like your image to appear. 3. From the Insert menu select Image or other desired insert item. 4. Resize the image as appropriate. The cell and table will adjust accordingly. 5. Cell padding will move the image from the edge of the cell by the specified number of pixels. University Computing and Information Services Page 5 Dreamweaver 8

9 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. This is the image that displays when the cursor is on the picture. 6. Click OK. You will not be able to view the effect in the Dreamweaver, but may press F12 to open a browser and view the results. 7. Resize the image as appropriate. The cell and table will adjust accordingly. Apply Color and Style 1. From the Property Inspector you can apply color and style. 2. Click on the Text Color button in the Property Inspector. Select the color for the text. You will be able to pick a color from palette or from any color displayed on the screen. As you move the eyedropper over a color, it is displayed in the palette. 3. While the text is highlighted you may apply style choices to it from the Property Inspector, such as bold, italics, and alignment options. Add Links 1. Select the text or image that you wish to be a link. 2. If the properties inspector toolbar is not visible, show the toolbar by selecting Window, Properties or by pressing CTRLF3. 3. Click on the folder next to the Link box in the Property Inspector and browse to the desired file. This may be an image, a document, or another web page. If you are linking to another webpage, be sure you include the entire URL to the website. University Computing and Information Services Page 6 Dreamweaver 8

10 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. Select the browser you wish to remove in the Browsers box and click the Remove button. To add a Browser choice to the window, Click the Add button and browse to the application you would like to add. To test you page in a browser F12 will open in your default browser. To test in more than one browser Select the Preview/Debug in Browser button on the toolbar. University Computing and Information Services Page 7 Dreamweaver 8

11 ADD AN LINK 1. Position your cursor where you would like the link to appear. 2. From the Common Objects Panel, select the Insert Link button. 3. In the Text Box, type the text to appear in the document as an link. 4. In the field type the address that the mail should be addressed to. 5. Click OK. FORMS Forms allow someone to visit your web page, enter data into fields you have predefined, then submit the data to you as an message and/or as a file stored on your web site. To see an example of a form, visit OBTAINING A KEY Dreamweaver allows you to create your form; however, before you can actually use your form you must obtain a key for each form you have created. A key is not required for this tutorial but you will need one when you actually create a form to be used on your web site. Keys may be obtained using the Submit Key Setup Tool at Note: When you receive data from the server for a submittal of your form, it will be in alphabetical order by the name you give each form item in its properties. Therefore, it is very important that you name the fields of your form so that the data is returned to you in the order you prefer. For example, if you have named your fields Name, Street, and City under the field properties, the server will return the data in City, Name, Street order. Note: If using numerical values in your fields, be sure to name them considering the maximum numerical value that will be used. For example, if you have Field1, Field2, and Field11, the server will return them in Field1, Field11, Field2 order. However, if you have Field01, Field02, Field11, the server will return them in Field01, Field02, Field11 order. University Computing and Information Services Page 8 Dreamweaver 8

12 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. This is your form and all form objects must be placed within it. 2. Right click on the form and select Properties from the menu. The Form Properties Window will open. 3. Type a name for your form in the Form Name box. 4. In the Action box type /cgibin/submit. 5. Select POST in the Method box. 6. Your form can now be used with the Submit Setup Tool for Web Page Forms on the UNCP system. ADD A TEXT BOX To add a text box to your form: 1. Place your cursor within the form (the dotted red lines) on your page. 2. Add a descriptive name for the text box to your page. (Ex. Name:) 3. Move the cursor to the point you want the text box to begin then click on the Insert Text Field icon on the Forms Toolbar (or from the menu, select Insert, Form Object, Text Field). 4. Right click inside the text box and select Properties from the menu. a. Enter a name for the text box. b. In Char Width box, enter the number of characters you would like the text box to display. c. In Max Chars box, enter the number of characters you would like the text box to contain. If this field is blank there is no limit placed on the text that may be entered. If the user s input exceeds the Char Width, the text will scroll. If the user exceeds the characters allowed, an alert sound is produced. d. Select the type of text box you want. If you select the multiple line option you may select the number of lines you wish to display. You may choose to wrap the text. Default or off prevents text from wrapping University Computing and Information Services Page 9 Dreamweaver 8

13 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. Add any descriptive name for the check box to your page (Ex. Fishing:). 2. Move the cursor to the point where you would like the check box to appear then click on the Insert Checkbox 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. a. Enter a name for the check box. Each check box must have a unique name assigned to it. b. Enter a value for the check box. You may wish to have each check box value as 1 so that you may add the responses later to get a total of responders who checked that box. c. For Initial State, decide if you want the box to be checked or unchecked when the form appears in the user s browser. ADD A RADIO BUTTON To add a radio button to your form: University Computing and Information Services Page 10 Dreamweaver 8

14 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. When grouped together, all radio buttons must have the same name assigned to each one in the group. b. Enter a value for the radio button. Within a group, the value of each radio button should be different. The value may be the same text as the label next to the box. (ex. Hunting) c. For Initial State, decide if you want the box to be checked or unchecked when the form appears in the user s browser. Note: To add additional radio buttons to the group, select the original radio button and Controldrag to copy to another location. Change the checked value field for each new button. ADD A POPUP MENU To add a popup menu to your form: 1. Add any descriptive name for the popup menu to your page (Ex. State:). 2. Move the cursor to the point where you would like the popup menu to appear then click on Insert List/Menu icon in the Forms Property Inspector. 3. Right click on the popup menu and select Properties from the menu, if the Property Inspector window is not already opened. a. Enter a unique name for the dropdown list. b. Under Type, select Menu. c. Click the List Values button. The List Values window will appear. University Computing and Information Services Page 11 Dreamweaver 8

15 d. With the insertion point in the Item Label field, type the text you want to appear in the list. e. In the Value field, type the text or data you want sent to the server when a user selects the item. f. To add another item click the Add button and repeat steps d and e. g. You may change the order the items will be listed by selecting an item and clicking the Up or Down Arrow. h. Click OK when all items have been added. i. Select the Item that you wish to have initially displayed. ADD A SCROLLING LIST BOX To add a scrolling list box to your form: 1. Add any descriptive name for the scrolling list box to your page (Ex. County:). 2. Move the cursor to the point where you would like the scrolling list to appear then click on Insert List/Menu icon in the Forms Property Inspector. 3. Right click on the scrolling list box and select Properties from the menu, if the Property Inspector window is not already opened. a. Enter a unique name for the scrolling list. b. Under Type, select List. c. In the Heights box, type the number of lines that will be visible at one time in the box. d. If you want users to be able to select more than one ite, select Allow Multiple. e. Click the List Values button. The List Values window will appear. University Computing and Information Services Page 12 Dreamweaver 8

16 f. With the insertion point in the Item Label field, type the text you want to appear in the list. g. In the Value field, type the text or data you want sent to the server when a user selects the item. h. To add another item click the Add button and repeat steps f and g. i. 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. ADD SUBMIT AND RESET BUTTONS To add the Submit Button, click on the Insert Button icon in the Forms Objects Panel (or from the menu, select Insert, Form Objects, Button). Right click on the to open the Property Inspector, if it is not already open. Name the button and be sure the label is whatever you want to appear on the button. Select Submit under Action. To add the Reset Button, click on the Insert Button icon in the Forms Objects Panel (or from the menu, select Insert, Form Objects, Button). Right click on the to open the Property Inspector, if it is not already open. Name the button and be sure the label is whatever you want to appear on the button. Select Reset under Action. You may change the text displayed on either button by clicking on the button and editing the label. (Ex. You could change the Submit Button to display as ) ADD THE KEY TO THE FORM The key to the form (obtained using the Submit Setup Tool For Web Page Forms at www/ucis/guide/webpageforms) must be placed within a hidden text box beside the Submit Button. 1. Click on the Insert Hidden Field icon in the Forms Objects Panel (or select Insert, Form Objects, Hidden Field from the menu). 2. Right click inside the text box and select Properties from the menu, if the Property Inspector is not already opened. University Computing and Information Services Page 13 Dreamweaver 8

17 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 1. Open Dreamweaver and select File, New. 2. Click on the Insert Image icon in the Common Objects Panel. 3. Type a unique name for the image map. 4. Select one of the image mapping tools. 5. Left Click and drag to highlight the area. 6. In the Link window type the link or target of the desired destination. 7. Use the F12 key to view the page in a browser. Note how the cursor changes as you move across the image. Click on that area. But other parts of the image are not links. 8. Return to Dreamweaver. BEST PRACTICES OF WEB DESIGN 1. Questions to consider: What is your reason for creating the web site? Personal Share personal information Share knowledge Entertain readers Promote interests Commercial Provide information Shopping Job listings Contact information 2. Have a site plan, for organizational purposes. 3. All pages within a web site should have a standard or very similar look. 4. Include navigation buttons in your web site to make browsing your site easier 5. Use the 256 color palette. 6. Each page should have a title displayed in the title bar of the window. 7. Each page should include the date when the page was last updated and address of person responsible for page. 8. Design your page to the lowest denominator. There are a variety of web browsers in use and not all support the latest features. It s a good idea to be sure your pages are presentable when viewed with a basic browser even if you use advanced features. Also, test how your page would look with a 640x480 desktop University Computing and Information Services Page 14 Dreamweaver 8

18 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. 12. Update page information give users a reason to return to site. 13. Standard table width 615 pixels 14. Avoid using frames not all browsers support frames. Frames also do not meet requirements of Americans with Disabilities Act. Available software can read content of web page to blind individual. However, since frames have no content, software has nothing to read. 15. Avoid using video as main teaching tool. 16. Avoid light colored text on a light background. Use contrasting colors. 17. Avoid a busy background, which distracts from the page content. 18. Avoid blinking text, which can cause epileptic seizures. 19. Keep page scrolling to a minimum. 20. TEST. TEST, TEST 21. Visit UNCP Gold and Images for the UNCP logo, gold and images of campus at Pictures of buildings on campus can be found on the Internet at For information on how to download or copy and paste text or graphics into your page, visit For additional resources for creating web pages at UNCP, visit www/ucis/guide/webpages/resources.html. 25. At the bottom of each page, include: The date when the page was last updated (Mandated by UNCP Web Policies) address of person responsible for page (Mandated by UNCP Web Policies) Department name with link to web page Copyright with year Link to UNCP homepage An example: Last Update: 05/14/2000 Comments to: ucis@uncp.edu University Computing and Information Services Copyright 2001 UNC Pembroke 26. Since you are responsible for any files which you upload to the web server, it s a good idea to protect your password. 27. Anyone on the web can easily download files that you place on a web server. So be sure you don't make confidential information available. 28. All pages on the UNCP web site are subject all federal and state laws, including copyright and trademark laws, as well as to university policy. 29. All use of university equipment must be for universityrelated business and can not be for personal gain. TIPS FOR DREAMWEAVER 1. Remember to upload the page and all images associated with that page. University Computing and Information Services Page 15 Dreamweaver 8

19 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 Online Guides Creating Web Pembroke UNC Pembroke Web Site Policies and Procedures Paint Shop Pro v.6 ADDITIONAL HELP For additional help, please contact the UCIS Help Desk: Phone: (910) Internet: University Computing and Information Services Page 16 Dreamweaver 8