1

ITP 101 Project 3 - Dreamweaver

Project Objectives You will also learn how to make a website outlining your company’s products, location, and contact info. Project Details USC provides its students with the opportunity to create their own personal website and make it available to others on the World Wide Web (WWW). This project will introduce you to the basics of web design using a ‘What You See Is What You Get’ (WYSIWYG) HTML editor, specifically Dreamweaver CS5. You need the finished graphics from the Photoshop lab (Project 2) that are in a folder entitled lastname_firstname_photoshop. Those files are: header.png, nav1.png, nav2.png, nav3.png, rollover1.png, rollover2.png, and rollover3.png. You also need two images of your products. These could be the two images you used in the PowerPoint lab (Project 1) or you can download images from the Web. By the conclusion of this project, you will have created four HTML pages and one CSS file. Those files are: index.html, products.html, location.html, contact.html, and styles.css. Before you begin, please be aware that web server is case sensitive. Therefore, for consistency, be sure to name all of your .html files and graphic files in lowercase. Here is an example website:

If at any time you make a mistake during this project, you can use the history palette to go back to a previous step. To undo the previous action, use CTRL+Z on a Windows machine, use COMMAND+Z on a Mac machine, or the toolbar Edit Undo option.

2

Instructions 1. Create a new folder on your flash drive (or on the Desktop of the computer you are

currently using) and name it itp101. 2. In the itp101 folder, create a new folder and name it images. 3. Copy all of the images from your lastname_firstname_photoshop folder and put them

in the images folder. 4. Grab the images of your products that you used in your PowerPoint lab and put them in

the images folder.

File Transfer Program: 5. To set up your account on the web server named aludra, you will use a FTP (File

Transfer Protocol) client. On the computers in the labs, Cyberduck is on the Mac side and FileZilla is on the Windows side. USC offers Fetch (Mac) and FileZilla (Windows) as the free FTP programs. You can download the free university distributed software at http://software.usc.edu.

6. Follow the directions for one of the FTP clients.

Cyberduck (Mac): a. Start Cyberduck by using Finder and selecting Applications Cyberduck. You

can also use the Spotlight tool and enter Cyberduck. b. Click the Open Connection icon. c. Fill in the following information:

• For the first pulldown, select SFTP (SSH File Transfer Protocol) instead of FTP (File Transfer Protocol). The Port should change to 22.

• For the Server, enter aludra.usc.edu. • For the Username, enter your USC username. This is the same one you use to

log into Blackboard. • For the Password, enter your password. • Click the Connect button.

Fetch (Mac): a. Start Fetch by using Finder and selecting Applications Fetch. You can also use

the Spotlight tool and enter Fetch. b. In the New Connection window, fill in the following information:

• For the Hostname, enter aludra.usc.edu. • For the Username, enter your USC username. This is the same one you use to

log into Blackboard. • For the Connect using option, enter SFTP. • For the Password, enter your password. • Click the Connect button.

FileZilla (Windows): a. Start FileZilla by selecting Start Programs Internet Tools FileZilla. b. Click on the Connect image in the upper left corner. Do not use QuickConnect. c. In the My FTP Sites folder listing, click the New Site button and create a site called

aludra. d. Fill in the following information:

• For the Host, enter aludra.usc.edu. • For the Servertype, select SFTP using SSH2. The Port should change to 22. • For the Logintype, select Ask for password. • For the User, enter your USC username. This is the same one you use to log

into Blackboard.

3

• Click the Connect button to log in. You will be prompted to enter your password.

Setting up your web space: 6. Using your FTP client, you need to create a folder named public_html.

• If you are using Cyberduck, then click the Action icon at the top of the window and select the New Folder option.

• If you are using Fetch, then click the New Folder icon at the top of the window. • If you are using FileZilla, then right click on the mouse and select the Create

Directory option. 7. Make sure to enter public_html as the folder name. It needs to be all lowercase with

the underscore. If you mistype this, then your website will not work. 8. Double click on the public_html folder in order to open the public_html folder. 9. Create a folder named itp101 in the public_html folder. Folder names are case-

sensitive. 10. You can now close your FTP client.

Dreamweaver: 11. Start Adobe Dreamweaver CS6 or CS5. 12. Familiarize yourself with the Dreamweaver layout. Use the following image as a

guideline. Make sure that the CSS Styles and Files windows are visible on the right side and the Properties Window is visible on the bottom. If they are not visible, select Window on the main menu and the select the appropriate option.

index.html (Home Page) Create a HTML file: 13. From Welcome Screen window under the Create New column, select the More… option. 14. In the New Document window:

a. Make sure the Blank Page tab is selected.

Properties

CSS Styles

Files

4

b. For the Page Type, select the HTML option. c. For the Layout, select the 1 column fixed, centered, header and footer option. d. For the Layout CSS pulldown (lower right side), select the Create New File option. e. Click the Create button.

15. In the Save Style Sheet File As window: a. Save As: textfield, enter styles.css for the filename. b. Browse to the itp101 folder that you just created in step 1 in order to save this CSS

file in that folder. c. Click the Save button.

Save your document: 16. In the main menu, select the File Save As… option. 17. In the Save As window, enter index.html for the name. Browse to the itp101 folder.

Click the Save button. 18. While you continue to make changes to your image, make sure to save your document

often. You may select the File Save option. If you are on a Mac machine, you can press the COMMAND and S keys at the same time. If you are on a Windows machine, you can press the CTRL and S keys at the same time.

Manage your site: 19. In the main menu, select the Site New Site… option. (You can edit your site

definition by clicking on the Site Manage Sites… option.) 20. In the Site Setup window, make sure Site is selected in the top left corner:

• In the Site Name textfield, enter your USC username. • For the Local Site Folder, click the folder icon to select your itp101 folder on your

local machine. It will be on your flash drive, on your Desktop, or in your Documents folder. This is the folder you created in step 1.

21. In the Site Setup window, select Servers in the top left corner: • Click the + (plus) button in the bottom left corner of the table. • Make sure the Basic button is selected at the top. • In the Server Name textfield, enter aludra. • For the Connect using pulldown, select SFTP. • In the SFTP Address textfield, enter aludra.usc.edu. • In the Username textfield, enter your USC username. • For the Password textfield, leave it blank. Dreamweaver

will ask you for your password when you try to connect. • In the Root Directory textfield, enter public_html/itp101. • In the Web URL textfield, enter

http://scf.usc.edu/~username/itp101 where username is your USC username.

• Click the Save button. 22. In the Site Setup window, click the Save button. 23. Find the Files window in the lower right corner. If you cannot

find it, then from the main menu select Window and find the Files option. If there is a checkmark in front of Files, then the panel is visible. If not, then select it and the window will be visible. Now your can put files to the web server (aludra) and get files from the server.

24. Click the up arrow to put your files on your local computer to the web server. (You can click the down arrow to get your files from the server and put them on your local computer.)

5

Working in Dreamweaver: • The three ways to edit your document are Code, Split and Design. Design mode is the

WYSIWYG (what you see is what you get) editor. Code mode lets you see your HTML code so you edit it like you are using a text editor. Split mode lets you see both. On a laptop, this can be hard to use. For this class, you should be using Design.

• Following is a button labeled Live View that will toggle on and off. Make sure it is toggled off. When you are in Live View, you will not be able to edit certain components.

• Under the edit mode buttons, you will see Source Code and styles.css. These act like radio buttons. Click on the Source Code to view and edit the HTML page. Click on styles.css to view and edit the stylesheet. You should select Source Code. Most people will never need to edit the external css file since when you edit properties when you are working on your HTML page, the external css file will be updated automatically.

• Make sure to save your pages. If you see an asterisk (star) by Source Code or by any of the HTML or CSS files in your project, then they have been updated but not saved. To save everything at one time, select the File Save All… option on the main menu.

Design - WYSIWYG Code view

Title Source Code – HTML page

styles.css – external CSS file

6

Set the title: 25. In the Title textfield (which is denoted in the image above), enter a meaningful tile for

HTML page. For your index.html page, set it to the name of your website/company. By default, Dreamweaver puts in the text Untitled Document and that is what will be displayed at the top of the web browser when someone is viewing your page if you do not change it.

Add the header image: 26. Double click in the page where it says Insert_logo (180 x 90). 27. In the Select Image Source window, select the images folder and then the header.png

image file. Click the Choose button.

Make the header image a link: 28. Click on the header image. 29. In the Properties window, change the Link textfield to index.html. Get ready to insert the navigation bar images: 30. From the main menu, select the Edit Select Parent Tag option. You have now

selected the <a> tag. (You can click on the Code option to verify.) 31. From the main menu, select the Insert HTML Special Characters Line Break

option.

Set up navigation bar images: 32. From the main menu, select the Insert Image Objects Rollover Image option. 33. In the Insert Rollover Image window:

• In the Image name textfield, enter Products. • For the Original image, click on the Browse… button. Find and select the nav1.png

file. Click the Choose button. • For the Rollover image, click on the Browse… button. Find and select the

rollover1.png file. Click the Choose button. • In the Alternate text textfield, enter Products. • In the When clicked, Go to URL textfield, enter products.html. • Click the OK button.

34. Repeat this process for the other two navigation items – Location and Contact. For Location, use nav2.png and rollover2.png. For Contact, use nav3.png and rollover3.png.

35. Delete the extra line between the header image and the navigation images by clicking right in front of the nav1 image and clicking the Delete key.

7

Set up the CSS properties: 36. In the CSS Styles window, select All toggle button. Click the arrow (Mac) icon or +

(Windows) next to styles.css such that it is shows all of the rules. 37. Click on the .header rule. Right click on the background property and select the Delete

option. (Or you may change it to a color that you want for the header.)

Change the text in the main content section: 38. Select the word Instructions in the main content div. Center align it by selecting

Format Align Center from the main menu. You may also change the color by selecting the Format Color… option. In the New CSS Rule window, click the OK button.

39. Select and change the text in the main content div. 40. Delete text that you do not want. 41. Add images, hyperlinks and other items using the Insert menu.

Change the styles for entire page: 42. In the CSS Styles window, select All toggle button. Click the arrow next to styles.css

such that it is pointing down and showing all of the rules. 43. Double click on the body rule to open the CSS Rule Definition window. 44. In the CSS Rule Definition window under the Type Category, change the Font-family.

Under the Background Category, change the Background-color. You may change other properties as well. Once done, click on the OK button.

45. Double click on the .container rule. Under the Background Category, change the Background-color and anything else you want to change.

46. Double click on the a:link and a:visited rules to change the color for all hyperlinks.

Change the text in the footer section: 47. Select and change the text in the footer div. 48. Add your name, ITP 101 and Spring 2013.

Change the styles for the footer section: 49. In the CSS Styles window, double click on the .footer rule. 50. In the CSS Rule Definition window under the Background Category, change the

Background-color. If your background color is dark, then you need to change your font color to a light color such as white by using the Type Category. Under the Block Category, change the Text-align to center or right. You may change other properties as well. Once done, click on the OK button.

Add metadata: 51. To add a description for your web page, from the main menu select the Insert HTML

Head Tags Description option. 52. In the Description window, enter a description for your company website such as “At

company name, we provide a wonderful selection of product name.” 53. To add keywords, select the Insert HTML Head Tags Keywords option. 54. In the Keywords window, enter keywords separated by commas. Add your company

name, your product, USC, and itp101.

Test the page: 55. To see how your pages will look in a web browser, then click on the image of the globe

which is near the Title textfield. This will let you test the pages you are working on in Dreamweaver.

8

Products Page Example Products Page:

Create a new page by copying the index page: 56. From the main menu, select the File Save As… option. 57. In the Save As window, change the filename to products.html. Click the Save button. 58. Change the Title to your company name – Products. 59. Change the top text in main content section to Products (or something like that). 60. In the main content section, insert a table to display your products and their info (such as

price). • From the main menu, select the Insert Table option. • In the Table window, enter a number for the Rows and a number for the Columns.

There should be a minimum of 2 columns and 2 rows. • For one of the rows, add images of your products. Just click in each cell. From the

main menu, select the Insert Image option. In the Select Image Source window, browse to your images folder and select one of your product images. Repeat this for each cell of the row.

o You will likely need to resize the image if it is too big. To resize, select the image and then drag the black resize square in the corner of the image. You can hold Shift while resizing an image to maintain its aspect ratio (proportions).

• In another row (above or below the row of images), enter in information about the product such as name and price. To do this, just click in each cell and type information.

9

• Center align the text in each cell. From the main menu, select the Format Align Center option. You may also change the font, color and other properties of the text by using the Format option.

61. Update the image for the element of your navigation bar to be the rollover image. • Click on the Products image. • In the Properties window, change the Src of the image from navbar1.png to

rollover1.png. You can change the filename in the Src textfield or click on the Browse for File icon (looks like an image of a folder).

62. Save this page.

Location Page Example Location Page:

Create a new page by copying the index page: 63. Click on the index.html tab. 64. From the main menu, select the File Save As… option.

10

65. In the Save As window, change the filename to location.html. Click the Save button. 66. Change the Title to your company name – Location. 67. Change the top text in main content section to Location (or something like that). 68. In the main content section, insert text about your location. 69. Add a Google map to your web page (http://maps.google.com/help/maps/getmaps/).

Open a web browser such as Firefox, IE, Chrome or Safari: • Enter http://maps.google.com into the web address text field. • In the Google maps text field, enter the address for your company. (You can use

any address such as your own address or the address of USC.) • Specify the map type you want such as Map, Satellite or Terrain. If you want to use

Street View to see a street-level image of the address, drag the Pegman icon to the location you want to see.

• Click on the Link icon. • In the window that comes down below the Link,

click on the Customize and preview embedded map link. • In the Google Maps window, adjust the map size until the Preview displays it like the

way you want. • Select all of the text in the Copy and paste this HTML to embed in your website text

area using clicking in the text area. Select the text with your mouse or by using the main menu and selecting the Edit Select All option (COMMAND+A for Macs or CTRL+A for Windows).

• Copy the text by selecting the Edit Copy option (COMMAND+C for Macs or CTRL+C for Windows).

• Close the Google Maps window. 70. Back in Dreamweaver, click in the Location page where

you want to put the map. From the main menu, select the Code view… option. It will show the HTML code. Paste the code by selecting the Edit Paste option off of the main menu.

71. Select the Design view. A grey box will appear. When you preview the page, you will see the map.

72. Update the image for the element of your navigation bar to be the rollover image.

73. Save this page.

11

Contact Page Example Location Page:

Create a new page by copying the index page: 74. Click on the index.html tab. 75. From the main menu, select the File Save As… option. 76. In the Save As window, change the filename to contact.html. Click the Save button. 77. Change the Title to your company name – Contact. 78. Change the top text in main content section to Contact (or something like that). 79. In the main content section, insert a form:

a. From the main menu, select Insert Form Form. You will see a pink box. Click inside the form.

b. From the main menu, select Insert Form Text Field to add a text field. c. In the Input Tag Accessibility Attributes window, enter name for the ID and Name for

the Label. Click the OK button. d. Insert your mouse cursor after the text field and hit the Return key. e. Repeat the process to add text fields/labels for Phone and Email. Insert new lines

using the Return key after each text field. f. Select Insert Form Textarea in order to add a text area for comments. g. In the Input Tag Accessibility Attributes window, enter comments for the ID and

Comments for the Label. Click the OK button. h. Insert a new line using the Return key after the text area. i. Select Insert Form Button to add a button for submitting the form. j. In the Input Tag Accessibility Attributes window, enter Submit for the ID and leave

the Label textfield blank. Click the OK button.

12

k. Select the Submit button that you just created and look at the Properties window. Make sure that in the Action radio button group the Submit form radio button is selected.

l. Select the whole form by clicking on the pink box. Look at the Properties window. Change the Form ID to contact. In the Action textfield, enter http://www.usc.edu/cgi-bin/mail_form/username@usc.edu where username is replaced with your USC username.

80. Update the image for the element of your navigation bar to be the rollover image. 81. Save this page.

Submitting the project 82. In the Files window (lower right):

• Click on the Site - username folder. • Click on the up arrow. • When it asks you if you are sure you wish to put the entire site, click the OK button.

83. Test your site by opening a web browser such as Firefox or Safari. Enter your URL which is http://scf.usc.edu/~username/itp101 where username is your USC username that you use to log into Blackboard. Click on your navigation bar items and your header image. Make sure your form on your contact page works.

84. Go to Blackboard (http://blackboard.usc.edu): • Click on the Assignments option. • Click on the Lab3 link. • In the Submission box, enter your full URL which should be

http://scf.usc.edu/~username/itp101 where username is your USC username. • Highlight your URL and click on the globe icon. In the Insert Link window, enter the

web address in the URL textfield, make sure that there is a checkmark in the Open link in new window checkbox, and click on the Submit button.

• Since your files are all on aludra, you do not need to upload them.