Creating a Project Portfolio Web page The basics

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

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

JMA 260 – Applications Adobe Premiere & Encore Sound & Video

JMA 260 – Applications Photoshop Digital images

JMA 260 – Applications Adobe Illustrator, illustration

JMA 260 – Applications Adobe InDesign, document layout

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

JMA 260 – Applications

JMA 260 – Class Web Site Web Site has link to bookstore for Adobe pricing.

Connect to our servers

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

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)

How to access the server Our Server

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

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

How do I access the server? From dorm or home ftp:// Example: ftp:// You will be prompted for your user name and password Use the same name and password you used to login to Windows

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

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

And The PUB folder The User Folder

USERS Server: Doe Jones Gibbs Pub JMA260 index.htm

File PUB Folder Gibbs Users My user folder

File PUB Folder Gibbs Users My user folder All files for Web must be in PUB

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

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.

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

Make JMA260 folder and test page

Make Test Page Make JMA260 folder Go to class site to test page Test page and give me your name if you get prompted for user name and password.

The Uniform Resource Locator (URL)

Uniform Resource Locator

Computer/Server name Uniform Resource Locator

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

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

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

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

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

USERS Server: Doe Jones Gibbs Pub JMA260 index.htm

Server: JMA260 index.htm USERS Gibbs Pub

What should you check when this happens?

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?

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?

Creating Web page The basics

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

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

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: It should not be: \\jma1\users\gibbs\pub

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'

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

View html file on Web server with browser. Web Page

Remember - File Naming and Project structure

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

Be Organized Ensure that your files and folders are organized.

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, Pricing price/ index.htm Contact Info. contact/ index.htm products.htm profits.htm order.htm Project structure

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, 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

index.htm Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 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

index.htm Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 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

index.htm Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 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

index.htm Web site Section 1 Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 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

index.htm Web site Section 1 Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 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

index.htm Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 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

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

File Extensions

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

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

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

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

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

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

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

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