1. Creating a Project Portfolio Web page The basics

2. Objectives Accessing the computer Make test Web page (test accounts) Review server basics – common issues URLs User folder PUB Create project portfolio web page

3. User Name and Password To connect to our servers from within either of our two labs (205 or 345): Ctrl-Alt-Delete Username: YourLastName PW: Given in class

4. User Name and Password 8 characters or more 1 UPPERCASE character 1 number 1 Special character ($, &) – no spaces Cannot contain your first or last name (e.g., Duquesne$07)

5. How to access the server Our Server

6. Your private folder It’s a subfolder of users folder www.jma.duq.edu/users/YourLoginName Save files (drag and drop files) while in either lab (CH205, CH345) You can also FTP to there from home… www.jma.duq.edu

7. How do I access the server? Access from either CH345 and CH205 Start >> Computer (Z: Drive) OR \\jma1\users\username

8. How do I access the server? From dorm or home ftp://www.jma.duq.edu/users/YourLastName Example: ftp://www.jma.duq.edu/users/gibbs/ftp://www.jma.duq.edu/users/gibbs/ You will be prompted for your user name and password Use the same name and password you used to login to Windows

9. How do I access the server? You will be prompted for your user name and password – jma/username

10. How do I access the server? Folders and files display Transfer (put) files from your computer, Download (get) files to your computer.

11. And The PUB folder The User Folder

12. USERS Server: www.jma.duq.edu Doe Jones Gibbs Pub JMA260 index.htm http://www.jma.duq.edu/users/gibbs/pub/jma260/index.htm

13. File PUB Folder Gibbs www.jma.duq.edu Users My user folder

14. File PUB Folder Gibbs www.jma.duq.edu Users My user folder All files for Web must be in PUB

15. User and Pub folders Your User folder on server has child folder named PUB Inside PUB create a folder named JMA260 and sub-folder: Client, Classwork, Assignments

16. Create Folders inside JMA260 Client – for files related to your client project – media campaign. Classwork – for files we work on in class. Assignments – for homework assignments.

17. The PUB folder You might create subfolders, for each course. Double-click on pub Right-click on any unused white area

18. Make JMA260 folder and test page

19. Make Test Page Make JMA260 folder Go to class site to test page http://www.jma.duq.edu/classes/gibbs/jma260-03 Test page and give me your name if you get prompted for user name and password.

20. The Uniform Resource Locator (URL)

21. http://www.jma.duq.edu/users/gibbs/pub/jma260/index.htm Uniform Resource Locator

22. Computer/Server name Uniform Resource Locator

23. Computer/Server name Parent folder name This is the Users folder Uniform Resource Locator

24. Computer/Server name Parent folder name Your User folder name Uniform Resource Locator

25. Computer/Server name Parent folder name Your User folder name Pub folder name Uniform Resource Locator

26. Computer/Server name Parent folder name Your User folder name Pub folder name Uniform Resource Locator Class folder name

27. Computer/Server name Parent folder name Your User folder name Pub folder name Class folder name Uniform Resource Locator Name of Web page – file name

28. USERS Server: www.jma.duq.edu Doe Jones Gibbs Pub JMA260 index.htm http://www.jma.duq.edu/users/gibbs/pub/jma260/index.htm

29. Server: www.jma.duq.edu JMA260 index.htm http://www.jma.duq.edu/users/gibbs/pub/jma260/index.htm USERS Gibbs Pub

30. What should you check when this happens?

31. Did you upload the image file? Has the image file been moved? Has the image file been renamed? Did you get prompted for a username and password – if so the image is outside of PUB What should you check when this happens?

32. Gibbs user folder Final Project PUB JMA260 Web accessibleNot Web accessible index.htm Final Project Image file Image file outside of pub folder Another thing to check – is image file inside the PUB folder?

33. Creating Web page The basics

34. How do I create a Web page 1. Create a text file with HTML using Dreamweaver, NotePad or another HTML authoring program. Save file with.htm or.html extension NotePad Dreamweaver

35. How do I create a Web page 2. Preview html file in Web browser. Notice the address

36. How do I create a Web page 2. Preview html file in Web browser. Notice the address When checking your site, web address must read as: http://www.jma.duq.edu/users/gibbs/pub/ It should not be: \\jma1\users\gibbs\pub

37. How do I create a Web page 3. Transfer html and all images, sound and video files to Web server – inside PUB and inside jma260 folder. Web Page PUB User Folder gibbs on jma\users' User Folder gibbs on jma\users'

38. How do I create a Web page Web Accessible PUB User Folder gibbs on ‘jma\users' User Folder gibbs on ‘jma\users' 3. Your User (“User Folder”) folder

39. View html file on Web server with browser. Web Page http://www.jma.duq.edu/users/YourLastName/pub/jma260/FileName.htm

40. Remember - File Naming and Project structure

41. Naming conventions (Files & Folders) Use.html or.htm - page1.html Use lower (and upper) case myFinal.htm No spaces page_1.html instead of page 1.html No special characters page_1.html instead of page-1.html or page&1.html

42. Be Organized Ensure that your files and folders are organized.

43. index.htm Web site Section 1 About Shop shop/ index.htm Jobs jobs/ index.htm Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 2003. Pricing price/ index.htm Contact Info. contact/ index.htm products.htm profits.htm order.htm Project structure

44. index.htm Web site Section 1 About Shop shop/ index.htm Jobs jobs/ index.htm Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 2003. Pricing price/ index.htm Contact Info. contact/ index.htm products.htm profits.htm order.htm shop index.htm order.htm products.htm profits.htm images Project structure

45. index.htm Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 2003. view.htm apply.htm search.htm status.htm submit.htm About Shop shop/ index.htm Jobs jobs/ index.htm Pricing price/ index.htm Contact Info. contact/ index.htm Web site Section 2 Projec t struct ure

46. index.htm Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 2003. view.htm apply.htm search.htm status.htm submit.htm About Shop shop/ index.htm Jobs jobs/ index.htm Pricing price/ index.htm Contact Info. contact/ index.htm Web site Section 2 jobs index.htm view.htm status.htm apply.htm submit.htm search.htm images Project structure

47. index.htm Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 2003. sales.htm prices.htmcoupons.htm About Shop shop/ index.htm Jobs jobs/ index.htm Pricing price/ index.htm Contact Info. contact/ index.htm Web site Section 3 Project Structure

48. index.htm Web site Section 1 Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 2003. index.htm staff.htm mangers.htm index.htm sales.htm prices.htm coupons.htm shop index.htm view.htm status.htm apply.htm submit.htm search.htm images index.htm products.htm profits.htm order.htm jobs pricing contact images Project Structur e

49. index.htm Web site Section 1 Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 2003. index.htm staff.htm mangers.htm index.htm sales.htm prices.htm coupons.htm shop index.htm view.htm status.htm apply.htm submit.htm search.htm images index.htm products.htm profits.htm order.htm jobs pricing contact images shop/index.htm jobs/index.htm pricing/index.htm contact/index.htm Project Structure

50. index.htm Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 2003. index.htm staff.htm mangers.htm index.htm sales.htm prices.htm coupons.htm shop index.htm view.htm status.htm apply.htm submit.htm search.htm images index.htm products.htm profits.htm order.htm jobs pricing contact images shop/index.htm jobs/index.htm pricing/index.htm contact/index.htm Project Structure finalProject For Large Project

51. index.htm Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 2003. view.htm status.htm apply.htm submit.htm search.htm sales.htm prices.htm coupons.htm images Project Structure finalProject For A Small Project

52. File Extensions

53. Windows-based computers vs. Mac Index.htm File Name File Extension

54. Why are file extensions important? The extension consists of 3 or 4 characters at the end of the file name such as the.docx in MyAssignment.docx The extension tells us (and the computer) what program created it

55. Some Common Extensions ExtensionApplication aiIllustrator inddInDesign Doc/docxWord fla/swfFlash PSDPhotoshop htm or htmlweb

56. Some Common Extensions ExtensionApplication pdfAcrobat wavSound aviVideo movVideo (Quicktime) mpeg/mpgvideo

57. Extensions…Graphics/Zip jpgPhotoshop/IR (Joint Photographic Experts Group) gifPhotoshop/IR (Graphics Interchange Format) pngPhotoshop/IR (Portable Network Graphics) tifPhotoshop/IR (Tag Image File Format) zipBuilt-in or pkzip

58. Show the extensions To turn the Extensions on, choose Organize menu Folder and Search Options View tab

59. Show the extensions Choose to show file extensions  uncheck Hide extensions for known file types

60. Turning File Extensions on in Windows Start>>Control Panel>>Folder Options>>View>> uncheck Hide Extensions for known file types