Creating a Project Portfolio Web page The basics.
-
Upload
egbert-lester -
Category
Documents
-
view
216 -
download
0
Transcript of Creating a Project Portfolio Web page The basics.
![Page 1: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/1.jpg)
Creating a Project Portfolio Web page
The basics
![Page 2: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/2.jpg)
Objectives
Accessing the computer Make test Web page (test accounts) Review server basics – common issues
• URLs
• User folder
• PUB
Create project portfolio web page
![Page 3: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/3.jpg)
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
![Page 4: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/4.jpg)
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)
![Page 5: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/5.jpg)
How to access the server
Our Server
![Page 6: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/6.jpg)
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
![Page 7: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/7.jpg)
How do I access the server?
Access from either CH345 and CH205 Start >> Computer (Z: Drive)
OR
\\jma1\users\username
![Page 8: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/8.jpg)
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/
• You will be prompted for your user name and password
• Use the same name and password you used to login to Windows
![Page 9: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/9.jpg)
How do I access the server?
You will be prompted for your user name and password – jma/username
![Page 10: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/10.jpg)
How do I access the server?
• Folders and files display• Transfer (put) files from your computer, • Download (get) files to your computer.
![Page 11: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/11.jpg)
And The PUB folder
The User Folder
![Page 12: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/12.jpg)
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
![Page 13: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/13.jpg)
File
File
FileFile
PUB Folder
Folder
Gibbs
www.jma.duq.edu
Users
My user folder
![Page 14: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/14.jpg)
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
![Page 15: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/15.jpg)
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
![Page 16: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/16.jpg)
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.
![Page 17: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/17.jpg)
The PUB folder
•You might create subfolders, for each course.
Double-click on pub
Right-click on any unused white area
![Page 18: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/18.jpg)
Make JMA260 folder and test page
![Page 19: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/19.jpg)
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.
![Page 20: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/20.jpg)
The Uniform Resource Locator (URL)
![Page 21: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/21.jpg)
http://http://www.jma.duq.edu/users/gibbs/pub/jma260/index.htmwww.jma.duq.edu/users/gibbs/pub/jma260/index.htm
Uniform Resource Locator
![Page 22: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/22.jpg)
Computer/Server name
Uniform Resource Locator
![Page 23: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/23.jpg)
Computer/Server name
Parent folder name
This is the Users folder
Uniform Resource Locator
![Page 24: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/24.jpg)
Computer/Server name
Parent folder name
Your User folder name
Uniform Resource Locator
![Page 25: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/25.jpg)
Computer/Server name
Parent folder name
Your User folder name
Pub folder name
Uniform Resource Locator
![Page 26: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/26.jpg)
Computer/Server name
Parent folder name
Your User folder name
Pub folder name
Uniform Resource Locator
Class folder name
![Page 27: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/27.jpg)
Computer/Server name
Parent folder name
Your User folder name
Pub folder nameClass folder name
Uniform Resource Locator
Name of Web page – file name
![Page 28: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/28.jpg)
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
![Page 29: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/29.jpg)
Server: www.jma.duq.edu
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
USERSUSERSGibbs Pub
![Page 30: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/30.jpg)
What should you check when this happens?What should you check when this happens?
![Page 31: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/31.jpg)
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?
![Page 32: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/32.jpg)
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?
![Page 33: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/33.jpg)
Creating Web page
The basics
![Page 34: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/34.jpg)
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
![Page 35: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/35.jpg)
How do I create a Web page
2. Preview html file in Web browser.
Notice the address
![Page 36: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/36.jpg)
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
![Page 37: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/37.jpg)
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'
![Page 38: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/38.jpg)
How do I create a Web page
Web Accessible
PUBPUB
User Foldergibbs on ‘jma\users'
User Foldergibbs on ‘jma\users'
3. Your User (“User Folder”) folder
![Page 39: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/39.jpg)
View html file on Web server with browser.
WebPage
http://www.jma.duq.edu/users/YourLastName/pub/jma260/FileName.htm
![Page 40: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/40.jpg)
Remember - File Naming and Project structure
![Page 41: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/41.jpg)
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
![Page 42: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/42.jpg)
Be Organized
Ensure that your files and folders are organized.
![Page 43: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/43.jpg)
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
![Page 44: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/44.jpg)
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
shopshop
index.htm order.htm
products.htm
profits.htm imagesimages
Project structure
![Page 45: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/45.jpg)
index.htm
Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 2003.
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
![Page 46: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/46.jpg)
index.htm
Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 2003.
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
![Page 47: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/47.jpg)
index.htm
Adapted from HTML Beginners Guide, Second Edition, Wendy Willard, McGraw Hill, 2003.
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
![Page 48: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/48.jpg)
index.htm
Web siteWeb site
Section 1Section 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
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
![Page 49: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/49.jpg)
index.htm
Web siteWeb site
Section 1Section 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
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
shop/index.htmjobs/index.htm
pricing/index.htm
contact/index.htm
Project Structure
![Page 50: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/50.jpg)
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
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
shop/index.htmjobs/index.htm
pricing/index.htm
contact/index.htm
Project Structure
finalProject For Large ProjectFor Large Project
![Page 51: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/51.jpg)
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
imagesimages
Project Structure
finalProject For A Small ProjectFor A Small Project
![Page 52: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/52.jpg)
File Extensions
![Page 53: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/53.jpg)
File Extensions
Windows-based computers vs. Mac Index.htm
File Name
File Extension
![Page 54: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/54.jpg)
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
![Page 55: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/55.jpg)
Some Common Extensions
Extension Application
ai Illustrator
indd InDesign
Doc/docx Word
fla/swf Flash
PSD Photoshop
htm or html web
![Page 56: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/56.jpg)
Some Common Extensions
Extension Application
pdf Acrobat
wav Sound
avi Video
mov Video (Quicktime)
mpeg/mpg video
![Page 57: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/57.jpg)
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
![Page 58: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/58.jpg)
Show the extensions
To turn the Extensions on, choose Organize menu
Folder and Search OptionsView tab
![Page 59: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/59.jpg)
Show the extensions
Choose to show file extensionsuncheck Hide extensions for known file types
![Page 60: Creating a Project Portfolio Web page The basics.](https://reader036.fdocuments.us/reader036/viewer/2022062422/56649e6c5503460f94b6b4aa/html5/thumbnails/60.jpg)
Turning File Extensions on in Windows
Start>>Control Panel>>Folder Options>>View>> uncheck Hide Extensions for known file types