Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian...

Creating an Electronic Photo AlbumPresented bySarita Yim (50147706),Ken Ma (50155522),Vivian Cheung (50153147)

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

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 sitePart 3 – Setup personal web site

Part One: Inputting Photo into Computer

Inputting photo by digital camera.Scanning existing photo.Editing photo.

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.

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

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

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

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

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.

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 4Step 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 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

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

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

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)

Aspects Free 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

The Differences between Web Hosting Services Providers (II)



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

The Differences between Web Hosting Services Providers (III)



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

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

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

What is FTP?

File Transfer Protocol (FTP) For transfer file at InternetE.g WS_FTP

Downloading & Installation

Download from “www.download.com”

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

Questions & Answer

Date post:	26-Mar-2015
Category:	Documents
Upload:	emma-brooks
View:	212 times
Download:	0 times

Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian...

Documents