Presentation on theme: "Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)"— Presentation transcript:
Creating an Electronic Photo Album Presented by Sarita Yim ( ), Ken Ma ( ), Vivian Cheung ( )
Run Down Total minutes Introduction Steps 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
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.
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.
Three Main Parts Part 1 – Inputting photo into computer Part 2 – Preparing file for a web site Part 3 – Setup personal web site
Part One: Inputting Photo into Computer Inputting photo by digital camera. Scanning existing photo. Editing photo.
Inputting Photo by Digital Camera Model : FujiFilm FinePix F601 Setup and installation Downloading photo Switch the PC on. Connect the digital camera to the PC. Turn the camera. FinePixViewer(camera application program) will start up automatically.
Layout of FinePixViewer Photo are displayed in the right hand side Digital camera are viewed as a storage drive
Download Photo Select [Automatic Save] to download all photos
Inputting Photo by Scanner Model: HP Scanjet 7400C Setup and installation Scanning photo Switch on the scanner. Start HP Precision Scan Pro (scanner application program). Place the photo on the scanner and press [Scan] icon.
Layout of Precision Scan Pro Press the icon to start scanning
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 …
Example (Add Title) Press [A] icon in toolbar Add title here
Example (Circle) Choose [Circle] to apply special effect from [Effect] menu
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
Reducing the photo size to save the storage space and transmission time. File SizeQualityTransmission Time High Compression Smaller sizeWorse quality Shorter Low Compression Bigger sizeBetter quality Longer Comparison on high and low compression
Part Two: Preparing file for a web site Introduction to HTML Introduction to Frontpage Create a new HTML page with photo Formatting the HTML Page Layout Dividing Each Page into Category
Introduction to HTML HTML stands for the HyperText Markup Language Use to Construct HTML Document A HTML document should contain 3 parts: html, head and body which represent by …, …, … Reference: The first page of a website called index page.
Introduction to Frontpage (I) Microsoft FrontPage is software which help you to build up web page without the knowledge of HTML Frontpage
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
Introduction to Frontpage (III) Standard Toolbar – To perform basic functions new an html document, save, delete, copy, paste, etc. Standard Toolbar
Introduction to Frontpage (IV) Formatting Toolbar – To perform formatting on the html document Formatting Toolbar
Introduction to Frontpage (V) Component Menu – To select different components into the web page hyperlink, picture, button, etc. Component Menu
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
Create a New HTML Page with Photo (II) Step 4: Preview the HTML file in the web browser Step 4 Step 3 Step 3: Select the photo and add it into the web page
Formatting the HTML Page Layout Use Table to formatting the page Easy to organize information Have a better visualization on the page
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
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
Steps in Making Table Format (III) Step 3: Insert picture into the left upper cell of the table Insert another photo into the right lower cell of the table Move the input cursor to the empty Cell Use keyboard to type the words inside the empty cell Step 3
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.
Steps in Dividing Category (I) Step 1: Add a new frame page in FrontPage Select the style of the frame page
Steps in Dividing Category (II) Step 1
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.
Steps in Dividing Category (IV)
Steps in Dividing Category (V) Step 2 (Continue): Set the target frame which the html file will load after you click on the hyperlink
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
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
Part Three: Setup a Personal Web Site Choosing a web hosting service The different types of web hosting services providers The differences between web hosting services providers A free web site account registration Putting the files to the web site Sharing the photos at the web
Choosing a Web Hosting Service PurposesSave storing photos space Share photos with our friends NeedsEnough storing space No need No need database BudgetsNo money need to used
The Different Types of Web Hosting Services Providers Free web hosting services providers Paid web hosting services providers
The Differences between Web Hosting Services Providers (I) AspectsFree web hosting services providers Paid web hosting services providers Payment No need to payMonthly 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. hosting.com/your-name or hosting.com Can determine the web address with your own name e.g. Sub-domain Not supportCan determine the services your web site provided with a easily way
The Differences between Web Hosting Services Providers (II) AspectsFree web hosting services providers Paid web hosting services providers Disk spacing LimitedUnlimited, more your paid, more your get. Bandwidth LessMore service address with the web hosting company domain name address with your own domain name Supporting services Limited, e.g. FTPMore, but various in different web hosting company and web hosting plan e.g. FTP, database, different computing language
The Differences between Web Hosting Services Providers (III) AspectsFree web hosting services providers Paid web hosting services providers Limitation The size in each file, e.g. cannot larger than 170K / file the 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 siteFor developing company web site
A Free Web Site Account Registration Basic features of Internet Explorer (IE) Steps of Registration a Free Web Site Account
Basic features of Internet Explorer (IE) Back Forward Stop Refresh Home Address Bar
Steps of Registration a Free Web Site Account Click [Start]>[Program]>[Internet Explorer] Type at address bar and click [Enter] Click Sign Up Now button Follow the instruction of the web site Get username and password
Putting the Files to the Web Site What is FTP? Download WS_FTP Install WS_FTP Basic Features of WS_FTP Transferring Files to the Web Site
What is FTP? File Transfer Protocol (FTP) For transfer file at Internet E.g WS_FTP
Downloading & Installation Download from Installation Follow instruction form installation kit
Basic Features of WS_FTP (I)
Basic Features of WS_FTP (II)
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
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