Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)"— Presentation transcript:

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

2 Run Down Total 30-45 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

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

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

5 Three Main Parts Part 1 – Inputting photo into computer Part 2 – Preparing file for a web site Part 3 – Setup personal web site

6 Part One: Inputting Photo into Computer Inputting photo by digital camera. Scanning existing photo. Editing photo.

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

8 Layout of FinePixViewer Photo are displayed in the right hand side Digital camera are viewed as a storage drive

9 Download Photo Select [Automatic Save] to download all photos

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

11 Layout of Precision Scan Pro Press the icon to start scanning

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

13 Example (Add Title) Press [A] icon in toolbar Add title here

14 Example (Circle) Choose [Circle] to apply special effect from [Effect] menu

15 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

16 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

17 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

18 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: http://www.cwru.edu/help/introHTML.TCh2.html http://www.cwru.edu/help/introHTML.TCh2.html The first page of a website called index page.

19 Introduction to Frontpage (I) Microsoft FrontPage is software which help you to build up web page without the knowledge of HTML Frontpage

20 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

21 Introduction to Frontpage (III) Standard Toolbar – To perform basic functions new an html document, save, delete, copy, paste, etc. Standard Toolbar

22 Introduction to Frontpage (IV) Formatting Toolbar – To perform formatting on the html document Formatting Toolbar

23 Introduction to Frontpage (V) Component Menu – To select different components into the web page hyperlink, picture, button, etc. Component Menu

24 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

25 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

26 Formatting the HTML Page Layout Use Table to formatting the page Easy to organize information Have a better visualization on the page

27 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

28 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

29 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

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

31 Steps in Dividing Category (I) Step 1: Add a new frame page in FrontPage Select the style of the frame page

32 Steps in Dividing Category (II) Step 1

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

34 Steps in Dividing Category (IV)

35 Steps in Dividing Category (V) Step 2 (Continue): Set the target frame which the html file will load after you click on the hyperlink

36 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

37 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

38 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

39 Choosing a Web Hosting Service PurposesSave storing photos space Share photos with our friends NeedsEnough storing space No need email No need database BudgetsNo money need to used

40 The Different Types of Web Hosting Services Providers Free web hosting services providers Paid web hosting services providers

41 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. 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 supportCan determine the services your web site provided with a easily way

42 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 Email service Email address with the web hosting company domain name Email 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

43 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

44 A Free Web Site Account Registration Basic features of Internet Explorer (IE) Steps of Registration a Free Web Site Account

45 Basic features of Internet Explorer (IE) Back Forward Stop Refresh Home Address Bar

46 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

47 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

48 What is FTP? File Transfer Protocol (FTP) For transfer file at Internet E.g WS_FTP

49 Downloading & Installation Download from www.download.com Installation Follow instruction form installation kit

50 Basic Features of WS_FTP (I)

51 Basic Features of WS_FTP (II)

52 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

53 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

54 Questions & Answer


Download ppt "Creating an Electronic Photo Album Presented by Sarita Yim (50147706), Ken Ma (50155522), Vivian Cheung (50153147)"

Similar presentations


Ads by Google