Lab 5: Dreamweaver CS5, Uploading your Web site

Transcription

1 Lab 5: Dreamweaver CS5, Uploading your Web site Setting up Local and Remote Information: 1. Launch Dreamweaver 2. Choose site->new site 3. By Site Name give your site a name. Make sure the name has no spaces in it and make sure the very first character is a letter. 4. Under Local Site Folder, navigate (using the folder to the right of the text box to browse) to where you want to create your new site (perhaps to your flash drive) and create a new folder called DreamweaverLab3. This is where the files for this exercise will be located while you re working on them. They are local, which means they are on your computer, and not on a web server. Now we will set up the information by the server. While it is on your computer, or your flash drive, or even a computer in the lab, it is locally located, and thus the rest of the world (e.g., your grandma in Guam) can t see it because it is not available on the World Wide Web. The file must be uploaded to a Web server. Web servers are computers or networks of computers that are specifically designed to hold Web files and make them available to the Web. While a Web server may have many folders, it makes the files and folders inside folders named public_html available. Thus all files that we want to be on the Web must be uploaded to a Web server, and, once uploaded, must be placed inside a folder named public_html. Since there are many, many Web servers, in Dreamweaver we must specify the particular Web server we will be uploading to (we must have access to that particular server (e.g., an account on that server) or we can t upload files to that server). 5. In Site Setup, click on Servers 6. We ll need to add a server. Click on the + under the text box on the right. 7. Under Server Name, add something identifiable, like UDEL Server 8. You will be using FTP (File Transfer Protocol) to transfer files to the server, so next to Connect Using: choose FTP 9. Under FTP Address enter, udel.edu 10. Add your Username and password (the username and password you used to upload your Web page in class). 11. Click on Test. 12. If successful, continue, 13. If not, make sure you ve got your user name and password correct. 14. Next to Web URL put the address of the Web Site you ve been uploading to the University s server, and end the address with DreamweaverLab5. In other words, I would put, Hit save

2 16. Click on Advanced (next to Basic at the top) Under Advanced, you should see an option for Enable file check-out This option is for when you are not the only person editing your web site. Think about it. What if you and 3 other coworkers (or people in your group) were all working on the same web page at the same time. You and another worker both edit the same page at the same time. So you both download the same page from the Web server (so now you each have your own copy of the web page). You add a paragraph. She adds a picture. You upload your copy (with the new paragraph) to the server. A few minutes later she uploads her copy (with the image) to the server, overwriting the copy that s currently on the server. What happens to the paragraph you wrote? To prevent this from happening, Dreamweaver allows you to check in and check out files. So you can check out a file, and while you have it checked out, no one else can check it out and edit it. Once you are finished making the changes you want, you upload the file to the Web server and check it back in. Now your coworker can check out the copy you just uploaded (with the paragraph), add her picture, and upload the file with both the paragraph and the picture to the server. All that being said, for this lab, you are the only one who will be editing your web site. So you don t need to worry about checking out and checking in files. So don t click next to that box. But when working in a group, this is a VERY useful feature, so be aware that the ability to control who is working on a given file at any given time is available. 17. Hit save 18. You should now see the UDEL Server added to your list of servers. 19. Hit Save again. 20. The Site Definition pop-up box should close. 21. Now close Dreamweaver. 22. Open Dreamweaver again. 23. Under Site, choose Manage Sites 24. In the Manage Sites pop-up box, you should see the name of the site you just created. Click on it to select it. 25. To the left, click on edit 26. Check the Site information 27. Click on Servers 28. Check on the server information 29. Make sure everything looks good. Note that you can always change site specifications here. 30. For convenience, Click on Advanced Settings->LocalInfo a. Click on case-sensitive link checking. This means that all links will be checked for correct capital and small letters. 31. Hit Save 32. In the Manage Site pop-up box, hit Done.

3 Create Web Site 33. Using your knowledge from the last lab, create a Web page. For Doctype, choose XHTML Strict Add a few paragraphs and a few headers (and anything else you want) to this web page. 35. Using your knowledge from the last lab, attach an external CSS style sheet. 36. Add style to the paragraphs, headers, and wanything else you ve added to your web page. 37. Save your web page. 38. Create a new web page (a second one). 39. Add paragraphs and headers to this page. 40. Attach the same style sheet to this page (under CSS on the right side, there s a small button that looks like a sideways chain. Click on that. Then choose the CSS style sheet you defined for the first web page and link it as a link. 41. In the second page, type text that will act as a link to the first page. 42. Make this text a link to the first page a. highlight the text b. With HTML selected in the properties window below, click on the pickwhip (the crossed circle to the right of the link textbox) c. Without releasing the mouse (you press the select button, but you don t release it), drag the mouse over the file you want to link to. d. Now release it. The link should be created to the first file in the link box. 43. Save the second page. 44. Return to the first page (it should be a tab at the top of your DW edit window). 45. Create a link in the first page to the second page using the pickwhip. 46. Create another link on this page to a Wikipedia page of your choice. 47. Save this page.

4 48. Using your knowledge from the last lab, add 2 images to your web page. 49. Save this page. Uploading your Web site 50. For both files, Under Site-> Check Links Sitewide (They should all be okay) 51. For both files, under Commands-> Check Spelling (Note that if there s a word DW detects as misspelled, but isn t (e.g., your last name), you can Add to Personal, meaning you add the word to your personal dictionary, and DW will not flag it in the future). 52. Now, click the Expand to show local and remote sites icon in the Files Panel 53. Note that the files on your local computer (the one you re working on) are on the RIGHT side, and the files on the server are on the LEFT side. 54. In the expanded files panel click the 'connects to remote host' icon. (looks like two plugs coming together, see image below) 55. Once you connect you should see the remote folder and files on the left window. a. If you have a folder called public_html on your remote server, click on it to go into that folder. b. If you do not have a folder called public_html, make sure the root folder (the one on top of the left side) is selected, and then under File->New Folder create public_html 56. Inside of public_html, create a file called DreamweaverLab3 57. Click on the newly created DreamweaverLab3 to go into it. 58. To upload your files click on the two html files on your local machine (on the right) to select them. Click on the 'Put Files' Arrow icon in the site manager. 59. If it says, This file has been modified and asked to save changes before uploading, say yes. 60. If asked whether to Put dependent files, say yes. 61. After uploading all the files test the site online using your site url e.g You should see your newly created web page in the browser 63. Test your links

5 64. Now, back in Dreamweaver, on the right side, slowly double-click on either of your html files so that it is selected in such a way that you can change the file s name. 65. Change the file s name to something new (leave the.html part in tact) 66. After you ve changed it, hit return 67. The Update Files pop-up box will pop up. It should have something to the effect of, Update links in the following files? and one html file below. 68. Select the html file, then select Update. 69. Reupload your files. What just happened? Dreamweaver noticed that you changed the name of a file, and that you have other files linked to that file. With the new name, those links will be broken unless we go into the other html files and change the link to reflect the new name of the linked file. By selecting Update, Dreamweaver automatically changes your code so that your links remain intact. Cool, huh. 70. Test your new links on the browser. Note: If you hare having trouble viewing your Web page on the Web server, you may have to modify the file permissions on the files on the server. To do this, right-click on the files you ve uploaded (on the left side), click on Set Permissions, and then either type in 755, or make your file readable and executable for owner, group, and everyone, and making it writable for owner only. You can change permissions on more than one file simultaneously by selecting more than one file simultaneously and right-clicking. Also, make sure you change the permission on the folder that holds the files (e.g., on DreamweaverLab3). To send in: 71. The url of your uploaded lab files 72. The names of both your files.