1. Creating a Project Portfolio Web page The basics

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

3. JMA 260 – Software Access to (CH345 and 205 labs): Adobe Illustrator Adobe Photoshop Adobe InDesign Adobe Premiere Adobe Encore Adobe Dreamweaver

4. JMA 260 – Applications Adobe Premiere & Encore Sound & Video

5. JMA 260 – Applications Photoshop Digital images

6. JMA 260 – Applications Adobe Illustrator, illustration

7. JMA 260 – Applications Adobe InDesign, document layout

9. JMA 260 – Applications The Web Project Body of Web page Web development

10. JMA 260 – Applications

11. JMA 260 – Class Web Site Web Site has link to bookstore for Adobe pricing. http://www.jma.duq.edu/classes/gibbs/jma260-04/

12. Connect to our servers

13. 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

14. 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)

15. How to access the server Our Server

16. 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

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

18. 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

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

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

21. And The PUB folder The User Folder

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

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

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

25. 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

26. 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.

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

28. Make JMA260 folder and test page

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

30. The Uniform Resource Locator (URL)

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

32. Computer/Server name Uniform Resource Locator

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

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

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

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

37. 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

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

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

40. What should you check when this happens?

41. 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?

42. 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?

43. Creating Web page The basics

44. 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

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

46. 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

47. 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'

48. 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

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

50. Remember - File Naming and Project structure

51. 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

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

53. 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

54. 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

55. 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

56. 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

57. 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

58. 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

59. 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

60. 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

61. 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

62. File Extensions

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

64. 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

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

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

67. 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

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

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

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