creating a project portfolio web page the basics

Creating a Project Portfolio Web page

The basics

Objectives

Accessing the computer Make test Web page (test accounts) Review server basics – common issues

• URLs

• User folder

• PUB

Create project portfolio web page

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

Our Server

• 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

http://www.jma.duq.edu/users/YourLoginName

How do I access the server?

Access from either CH345 and CH205 Start >> Computer (Z: Drive)

OR

\\jma1\users\username


From dorm or home

ftp://www.jma.duq.edu/users/YourLastName

• Example: 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

ftp://www.jma.duq.edu/users/gibbs/


You will be prompted for your user name and password – jma/username


• Folders and files display• Transfer (put) files from your computer, • Download (get) files to your computer.

And The PUB folder

The User Folder

USERSUSERS

Server: www.jma.duq.edu

DoeJones Gibbs Pub

JMA260

inde

x.ht

m

http://www.jma.duq.edu/users/gibbs/pub/jma260/index.htmhttp://www.jma.duq.edu/users/gibbs/pub/jma260/index.htm

File

File

FileFile

PUB Folder

Folder

Gibbs

www.jma.duq.edu

Users

My user folder

File

File

FileFile

PUB Folder

Folder

Gibbs

www.jma.duq.edu

Users

My user folder

All files for Web must be in PUB

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

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.

http://www.jma.duq.edu/classes/gibbs/jma260-03

The Uniform Resource Locator (URL)

http://http://www.jma.duq.edu/users/gibbs/pub/jma260/index.htmwww.jma.duq.edu/users/gibbs/pub/jma260/index.htm

Uniform Resource Locator

Computer/Server name



Parent folder name

This is the Users folder



Parent folder name

Your User folder name



Parent folder name


Pub folder name



Parent folder name


Pub folder name


Class folder name


Parent folder name


Pub folder nameClass folder name


Name of Web page – file name

USERSUSERS


DoeJones Gibbs Pub

JMA260

inde

x.ht

m



JMA260

inde

x.ht

m


USERSUSERSGibbs Pub

What should you check when this happens?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

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?What should you check when this happens?

Gibbs user folderGibbs user folder

Final Project

PUB

JMA260

Web accessibleNot Web accessiblein

dex.

htm

Final Project

Imag

e 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

NotePadNotePad

Dreamweaver

Dreamweaver


2. Preview html file in Web browser.

Notice the address


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

How do I create a Web page3. Transfer html and all images, sound and video files to Web server – inside PUB and inside jma260 folder.

WebPage PUBPUB

User Foldergibbs on jma\users'

User Foldergibbs on jma\users'


Web Accessible

PUBPUB

User Foldergibbs on ‘jma\users'

User Foldergibbs on ‘jma\users'

3. Your User (“User Folder”) folder

View html file on Web server with browser.

WebPage

http://www.jma.duq.edu/users/YourLastName/pub/jma260/FileName.htm

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 siteWeb site

Section 1Section 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

ContactInfo.

contact/

index.htm

products.htm

profits.htmorder.htm

Project structure

index.htm

Web siteWeb site

Section 1Section 1

About Shop

shop/

index.htm

Jobs

jobs/

index.htm


Pricing

price/

index.htm

ContactInfo.

contact/

index.htm

products.htm

profits.htmorder.htm

shopshop

index.htm order.htm

products.htm

profits.htm imagesimages

Project structure

index.htm


view.htmapply.htm

search.htmstatus.htm

submit.htm

About Shop

shop/

index.htm

Jobs

jobs/

index.htm

Pricing

price/

index.htm

ContactInfo.

contact/

index.htm

Web siteWeb site

Section 2Section 2Project structure

index.htm


view.htmapply.htm

search.htmstatus.htm

submit.htm

About Shop

shop/

index.htm

Jobs

jobs/

index.htm

Pricing

price/

index.htm

ContactInfo.

contact/

index.htm

Web siteWeb site

Section 2Section 2

jobsjobs

index.htm view.htm status.htm apply.htm submit.htm search.htm

imagesimages

Project structure

index.htm


sales.htm prices.htm coupons.htm

About Shop

shop/

index.htm

Jobs

jobs/

index.htm

Pricing

price/

index.htm

ContactInfo.

contact/

index.htm

Web siteWeb site

Section 3Section 3

Project Structure

index.htm

Web siteWeb site

Section 1Section 1


• index.htm

• staff.htm

• mangers.htm

• index.htm

• sales.htm

• prices.htm

• coupons.htm

shopshop

• index.htm

• view.htm

• status.htm

• apply.htm

• submit.htm

• search.htm

imagesimages

• index.htm

• products.htm

• profits.htm

• order.htm

jobsjobs pricingpricing contactcontact

imagesimages imagesimages imagesimages

Project Structure

index.htm

Web siteWeb site

Section 1Section 1


• index.htm

• staff.htm

• mangers.htm

• index.htm

• sales.htm

• prices.htm

• coupons.htm

shopshop

• index.htm

• view.htm

• status.htm

• apply.htm

• submit.htm

• search.htm

imagesimages

• index.htm

• products.htm

• profits.htm

• order.htm



shop/index.htmjobs/index.htm

pricing/index.htm

contact/index.htm

Project Structure

index.htm


• index.htm

• staff.htm

• mangers.htm

• index.htm

• sales.htm

• prices.htm

• coupons.htm

shopshop

• index.htm

• view.htm

• status.htm

• apply.htm

• submit.htm

• search.htm

imagesimages

• index.htm

• products.htm

• profits.htm

• order.htm



shop/index.htmjobs/index.htm

pricing/index.htm

contact/index.htm

Project Structure

finalProject For Large ProjectFor Large Project

index.htm


• view.htm

• status.htm

• apply.htm

• submit.htm

• search.htm

• sales.htm

• prices.htm

• coupons.htm

imagesimages

Project Structure

finalProject For A Small ProjectFor A Small Project

File Extensions

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

Extension Application

ai Illustrator

indd InDesign

Doc/docx Word

fla/swf Flash

PSD Photoshop

htm or html web

Some Common Extensions

Extension Application

pdf Acrobat

wav Sound

avi Video

mov Video (Quicktime)

mpeg/mpg video

Extensions…Graphics/Zip

jpg Photoshop/IR (Joint Photographic Experts Group)

gif Photoshop/IR (Graphics Interchange Format)

png Photoshop/IR (Portable Network Graphics)

tif Photoshop/IR (Tag Image File Format)

zip Built-in or pkzip

Show the extensions

To turn the Extensions on, choose Organize menu

Folder and Search OptionsView tab

Show the extensions

Choose to show file extensionsuncheck 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

creating a project portfolio web page the basics

Documents