creating an electronic photo album presented by sarita yim (50147706), ken ma (50155522), vivian...
TRANSCRIPT
![Page 1: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/1.jpg)
Creating an Electronic Photo AlbumPresented bySarita Yim (50147706),Ken Ma (50155522),Vivian Cheung (50153147)
![Page 2: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/2.jpg)
Run DownTotal 30-45 minutesIntroductionSteps to create electronic photo album Part 1: Inputting photo into
computer(Sarita) Part 2: Preparing file for a web site(Ken) Part 3: Setup personal web site(Vivian)
Q & A session
![Page 3: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/3.jpg)
Introduction
Scenario – Taking lots of photos after traveling and gatherings.Problem – How to distribute and share photos in an efficient way?Solution – Creating an electronic photo album. Save your time and money.
![Page 4: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/4.jpg)
Aim & Requirements
Aim – Provide basic concepts and idea on how to create a photo album.
Intended Audience – People with basic computer knowledge.
Hardware Requirement – Digital camera, scanner.
Software Requirement – Digital camera and scanner application program, Paint Shop Pro 7, FrontPage, Internet Explorer, FTP.
![Page 5: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/5.jpg)
Three Main Parts
Part 1 – Inputting photo into computer
Part 2 – Preparing file for a web sitePart 3 – Setup personal web site
![Page 6: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/6.jpg)
Part One: Inputting Photo into Computer
Inputting photo by digital camera.Scanning existing photo.Editing photo.
![Page 7: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/7.jpg)
Inputting Photoby Digital Camera
Model : FujiFilm FinePix F601Setup and installationDownloading photo Switch the PC on. Connect the digital camera to the PC. Turn the camera. FinePixViewer(camera application
program) will start up automatically.
![Page 8: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/8.jpg)
Layout of FinePixViewer
Photo are displayed in the right hand side
Digital camera are viewed as a storage drive
![Page 9: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/9.jpg)
Download Photo
Select [Automatic Save] to download all photos
![Page 10: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/10.jpg)
Inputting Photo by Scanner
Model: HP Scanjet 7400CSetup and installationScanning photo Switch on the scanner. Start “HP Precision Scan Pro”
(scanner application program). Place the photo on the scanner and
press [Scan] icon.
![Page 11: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/11.jpg)
Layout of Precision Scan Pro
Press the icon to start scanning
![Page 12: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/12.jpg)
Editing Photo
Modify the photo to suit what we need.Use Paint Shop Pro 7 (photo editor) to demonstrate the editing work. Basic function: resize, add title … Special effect: page curl, circle …
![Page 13: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/13.jpg)
Example (Add Title)
Press [A] icon in toolbar
Add title here
![Page 14: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/14.jpg)
Example (Circle)
Choose [Circle] to apply special effect from [Effect] menu
![Page 15: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/15.jpg)
Saving Photo
File type Bitmap: Not vector graphic, cannot be
rescale immediately. JPEG: Vector graphic, rescale image
without losing the quality. PSP format: special for Paint Shop Pro,
can save the defined feature property. User can keep modifying the photo.
Compression
![Page 16: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/16.jpg)
Compression
Reducing the photo size to save the storage space and transmission time.
File Size Quality Transmission Time
High Compression
Smaller size Worse quality
Shorter
Low Compression
Bigger size Better quality
Longer
Comparison on high and low compression
![Page 17: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/17.jpg)
Part Two:Preparing file for a web site
Introduction to HTMLIntroduction to FrontpageCreate a new HTML page with photoFormatting the HTML Page LayoutDividing Each Page into Category
![Page 18: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/18.jpg)
Introduction to HTML
HTML stands for the HyperText Markup Language Use to Construct HTML DocumentA HTML document should contain 3 parts: html, head and body which represent by <HTML>…</HTML>,<HEAD>…</HEAD>, <BODY>…</BODY>
Reference: http://www.cwru.edu/help/introHTML.TCh2.html
The first page of a website called index page.
![Page 19: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/19.jpg)
Introduction to Frontpage (I)
Microsoft FrontPage is software which help you to build up web page without the knowledge of HTML
Frontpage
![Page 20: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/20.jpg)
Introduction to Frontpage (II)
FrontPage provides many features which are are grouping in a toolbar. There are 3 types of toolbar: Standard Toolbar , Formatting Toolbar , Component Menu
![Page 21: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/21.jpg)
Introduction to Frontpage (III)
Standard Toolbar – To perform basic functions new an html document, save, delete, copy, paste, etc.
Standard Toolbar
![Page 22: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/22.jpg)
Introduction to Frontpage (IV)
Formatting Toolbar – To perform formatting on the html document
Formatting Toolbar
![Page 23: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/23.jpg)
Introduction to Frontpage (V)
Component Menu – To select different components into the web page hyperlink, picture, button, etc.
Component Menu
![Page 24: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/24.jpg)
Create a New HTML Page with Photo (I)
Step 2: Insert a picture into the blank page
Step 1
Step 2
Step 1: Create a new HTML page
![Page 25: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/25.jpg)
Create a New HTML Page with Photo (II)
Step 4: Preview the HTML file in the web browser
Step 4Step 3
Step 3: Select the photo and add it into the web
page
![Page 26: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/26.jpg)
Formatting the HTML Page Layout
Use “Table” to formatting the page Easy to organize information Have a better visualization on the page
![Page 27: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/27.jpg)
Steps in Making Table Format (I)Step 1:
Insert a table into the HTML page Use mouse to highlight the no. of
rows and columns which the table should have
Step 1
![Page 28: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/28.jpg)
Steps in Making Table Format (II)
Step 2:Set the border of the table to transparent:
Set the sizes of the borders property to 0 The table border will disappear in the HTML
editor
Step 2
![Page 29: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/29.jpg)
Steps in Making Table Format (III)Step 3:
Insert picture into the left upper cell of the tableInsert another photo into the right lower cell of the tableMove the input cursor to the empty CellUse keyboard to type the words inside the empty cell
Step 3
![Page 30: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/30.jpg)
Dividing Each Page into Category
You can group your photo album into different category, such as a page for showing pet, another page for showing daily photo, etc.
![Page 31: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/31.jpg)
Steps in Dividing Category (I)
Step 1: Add a new frame page in FrontPage Select the style of the frame page
![Page 32: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/32.jpg)
Steps in Dividing Category (II)
Step 1
![Page 33: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/33.jpg)
Steps in Dividing Category (III)Step 2:
In the left hand column, click on the [New Page]button to add a new page in the frame
Insert a hyperlink (a link which link to another HTML Doc)
In the Create Hyperlink menu, select a file to associate with the hyperlink.
![Page 34: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/34.jpg)
Steps in Dividing Category (IV)
![Page 35: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/35.jpg)
Steps in Dividing Category (V)Step 2 (Continue):
Set the target frame which the html file will load after you click on the hyperlink
![Page 36: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/36.jpg)
Steps in Dividing Category (VI)Step 2 (Continue):
Select the target frame by clicking on the right hand column with your mouse. And then Press “OK” button
![Page 37: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/37.jpg)
Steps in Dividing Category (VII)Step 3:
Modify the text shown in the hyperlink by highlighting the originally text and re-type it
Preview the photo album in browser
![Page 38: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/38.jpg)
Part Three:Setup a Personal Web Site
Choosing a web hosting serviceThe different types of web hosting services providers The differences between web hosting services providersA free web site account registrationPutting the files to the web siteSharing the photos at the web
![Page 39: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/39.jpg)
Choosing a Web Hosting Service
Purposes Save storing photos spaceShare photos with our friends
Needs Enough storing spaceNo need email No need database
Budgets No money need to used
![Page 40: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/40.jpg)
The Different Types of Web Hosting Services Providers
Free web hosting services providers
Paid web hosting services providers
![Page 41: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/41.jpg)
The Differences between Web Hosting Services Providers (I)
Aspects Free web hosting services providers
Paid web hosting services providers
Payment No need to pay Monthly payment and set up fee (for the first time)
Domain name
Can only determine a part of your web address with your own name e.g. www.web-hosting.com/your-name or www.your-name.web-hosting.com
Can determine the web address with your own name e.g. www.your-name.com
Sub-domain Not support Can determine the services your web site provided with a easily way
![Page 42: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/42.jpg)
The Differences between Web Hosting Services Providers (II)
Aspects Free web hosting services providers
Paid web hosting services providers
Disk spacing
Limited Unlimited, more your paid, more your get.
Bandwidth Less More
Email service
Email address with the web hosting company domain name
Email address with your own domain name
Supporting services
Limited, e.g. FTP More, but various in different web hosting company and web hosting plane.g. FTP, database, different computing language
![Page 43: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/43.jpg)
The Differences between Web Hosting Services Providers (III)
Aspects Free web hosting services providers
Paid web hosting services providers
Limitation The size in each file,e.g. cannot larger than 170K / filethe type of each file, e.g. all the media file are not support, such as mp3, mpeg, etc.Unwanted advertisement banner
No limitation
Purpose For developing personal web site For developing company web site
![Page 44: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/44.jpg)
A Free Web Site Account Registration
Basic features of Internet Explorer (IE) Steps of Registration a Free Web Site Account
![Page 45: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/45.jpg)
Basic features of Internet Explorer (IE)
Back
Forward Stop Refresh Home
Address Bar
![Page 46: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/46.jpg)
Steps of Registration a Free Web Site Account
Click [Start]>[Program]>[Internet Explorer]
Type “ www.angelfire.com” at address bar and click [Enter]
Click “Sign Up Now” button
Follow the instruction of the web site
Get username and password
![Page 47: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/47.jpg)
Putting the Files to the Web Site
What is FTP?Download WS_FTPInstall WS_FTPBasic Features of WS_FTP Transferring Files to the Web Site
![Page 48: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/48.jpg)
What is FTP?
File Transfer Protocol (FTP) For transfer file at InternetE.g WS_FTP
![Page 49: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/49.jpg)
Downloading & Installation
Download from “www.download.com”
Installation Follow instruction form installation kit
![Page 50: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/50.jpg)
Basic Features of WS_FTP (I)
![Page 51: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/51.jpg)
Basic Features of WS_FTP (II)
![Page 52: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/52.jpg)
Transferring Files to the Web Site
Check out host name, user name and password for uploading with WS_FTP
Make connection with WS_FTP
Transfer files from local side to server side
![Page 53: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/53.jpg)
Sharing the Photos at the Web Site
Open IE
Type your web site address at the address bar and click [ENTER]
Now your photo album is displayed at the IE
![Page 54: Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)](https://reader035.vdocuments.site/reader035/viewer/2022081602/55141ee0550346dd488b5718/html5/thumbnails/54.jpg)
Questions & Answer