Creating Web Pages With Dreamweaver MX 2004 1
Introduction Learning Goal: By the end of the session, participants will have an understanding of: What Dreamweaver is, and How it can be used to create basic web pages for publishing course content online. What is Dreamweaver? Dream weaver is an application available from Macromedia to provide users with a graphical interface for the creation of web pages. Dreamweaver allows you to create a web page as easily as you could write a paper using a word processor. You can create pages and preview how they will appear on the web, without having to know HTML, the language used to create web pages. This type of program is commonly referred to as an "HTML editor" because its job is to generate HTML files based on the commands executed in the page layout interface available to the user. What will be covered in this session? In this session, you will create: A sample instructor homepage with bio and image. A sample course syllabus page. Add text, images, hyperlinks, email links, tables, and anchor links. Create a link from the instructor s page to the course syllabus. 2
Section I: Getting Started Step 1: Launch Dreamweaver. Double click the Dreamweaver icon on the Desktop of the computer. Step 2: Create New Page Click on HTML under Create New.. 3
Step 3: Document Window Insert Toolbar Formatted: Font: Bold Panel Groups Formatted: Font: Bold Properties Inspector Formatted: Font: Bold In the new document, you will see a main window, called the Document Window, several panel groups in the upper right corner, and the Properties Inspector at the bottom. The panel groups and the Property Inspector can be moved around on the screen, or closed, and their functions can be accessed through the menu at the top. For creating a basic webpage, you will be primarily using the Insert Toolbar (top) and the Properties Inspector (bottom). 4
Step 4: Design View Dreamweaver gives you the option to view the document in three different views: Code, Split, and Design. The Code view is used by advanced users who prefer to build their site using HTML code. The Split mode shows both code and the design. The Design view shows just the Design. As beginners, we will use the Design view. Make sure that you are viewing the document in Design view. Step 5: Add Title To add a title to the page that will show in the top left corner when viewed in a browser, change Untitled Document in the Title box to Professor Smith s Homepage. 5
Step 6: Save Web Page From the File menu, select Save. Choose the Dreamweaver Training folder on your desktop as the location. Name your file index.html. Saving your document lets Dreamweaver correctly set the paths to linked files, such as images. Therefore you should save early in the creation of your web page. 6
Section II: Creating a Sample Homepage (index.html) In this section, you will create a sample professor s homepage (See Appendix A). For the purpose of this training session, we have already provided you with the content you will need to create the webpage. Open the file named Sample Bio Page. (This will open in MS Word.) Step 7: Add Text To add text in Dreamweaver, you can simply begin typing in the document or copy and paste from a Word file. Copy the text from the Sample Bio Page and paste it into the Dreamweaver document. Step 8: Format Text To format the text, you will use the Properties Inspector at the bottom of the screen. Highlight the Name, Title, and College and change the Format to Heading 3 in the Properties Inspector. Select Address, Phone, Fax, Email, Education, Teaching Interests in the Bio text, and choose Bold and Red color (or any other color) from the colors panel. Highlight all the text and change the Font to Arial. *Be sure to save changes periodically. 7
Step 9: Add Bulleted Lists The Unordered List button is used to create a bulleted list. Highlight the three entries under Education and click on the Unordered List button. Step 10: Insert Image Function Place the cursor where you would like the image and click on the Insert Images button in the top Insert Toolbar. A dialog box will appear in which you can find and select the image you want. In the text, place the cursor before the name John and click on the Insert Images button. Select the image called Smiley.jpg and click OK. 8
Step 11: Align Image To align the images to the left of the professor s name, click to select the image and change Align to Left in the Property Inspector. Step 12: Insert Alt Text. You can also insert Alt text. Alt text, or Alternative text, is the text that will come up in place of the image, if, for some reason the image cannot be seen. Click on the image to select it. In the Alt text box under the Properties Inspector, type in Professor Picture. Step 13: Add Links One of the most useful things about web pages is that you can link text and images to other pages. At the end of the page, type University of Houston and select it. In the Link box in the Property Inspector, type http://www.uh.edu. (You can also copy and paste it from your browser.) Hit enter and you will see the link on the page. 9
If you would like for this to open in a new window when clicked, change Target to _blank. Step 14: Add Email Links The Email Link box is used when adding a link to an email address. Place your cursor where you would like to insert an email address and click on Email Link in the Insert Toolbar on the top. Type in the text and the email address. Hit enter and you will see the link on the page. *Save your file. 10
Section III: Creating a Sample Syllabus Page (syllabus.html) In this section, you will create a sample Syllabus webpage (See Appendix B). Step 15: Open the file called Sample Syllabus (this will open in Word). Back in Dreamweaver; go to File New to open a new page. Title the page Syllabus and Save it as Syllabus.html in the same folder. Step 16: Add and Format Text Copy the text from the Sample Syllabus file and paste it into the new Dreamweaver document. Use the Property Inspector to format the text as desired: bold and center the first three lines, bold title of each section, change colors, etc. 11
Step 17: Insert a Table In order to display data in an organized manner, or to have more than one column of text, you can add tables to your web page. The following steps show how to create a simple table. Place the cursor at the end of your document and Click on the Insert Table button on the Insert Toolbar. The Insert Table dialog box will appear. Step 18: Add Tabular Data 12
You will enter the following data in the table: Rows: 5 Columns: 2 Table Width: 400 pixels Border: 1 *You can also specify spacing and padding. Spacing is the amount of space between cells. Padding is the amount of spacing between the data and the edges of the cell. Click OK after you have entered the data. Step 19: Add Text After inserting the table, add text as shown below: Select the table by clicking on any of the lines. (To select an entire column, move the cursor to the top of the column until it becomes a down-pointing bold arrow, and click the mouse. To select an entire row, move the cursor to the left of the row until it becomes a right-pointing bold arrow, and click the mouse.) Apply desired formatting to the table by using the Property Inspector. Step 20: Add Internal Links (Anchors) Anchors are links to other places on the same page. Let s link the Instructor s name at the top of the page to the Instructor s Teaching Interests in the middle of the page. Place your cursor before the word Instructor s in the fourth paragraph of syllabus text. Click the Anchor button on the Insert Toolbar. 13
A dialog box will appear asking you to give the anchor a name. Type in instructor. A little icon of an anchor will appear next to the insertion point. Step 21: Link the Anchor As if you were creating a link to a separate page, highlight the instructor s name at the top of the page and enter the name of the named anchor in the Link box, preceded by a # sign. For this example, enter #instructor in the Link box. *Save your file. 14
Section IV: Linking from Homepage to Syllabus Step 22: Go back to the index.html file. Type Syllabus at the end of the page (or any other place you would like to place it). Step 23: Link Syllabus file Highlight the word Syllabus and type Syllabus.html in the Link box in the Properties Inspector. *Save your file. Step 24: Preview Web Page To preview your page in a browser at anytime, you can select Preview in Browser under File or click the Preview icon. Your page will open in Internet Explorer. 15
Appendix A: index.html 16
Appendix B: Syllabus.html 17