1. Information Technology in Travel, Hospitality and Tourism
Unit 3
Computer LAB Session 1

2. Today’s Topics Layout Files Pictures Hyperlinks Resolution Page Layout
What is a pixel anyway?!?
Page Layout
Special Layouts
Files
Names
Page Titles
Locations
Sizes
Pictures
Sizes
Auto-Thumbnail
Alt Tags
Hyperlinks
3 main types
Screen Tips
The basic unit of the composition of an image on a television screen, computer monitor, or similar display.

3. How to plan your content
When you're planning a Web site, it's important to establish the goal of the site first.
The designer of the site shown here established a goal, which was to generate $500,000 in sales through online orders.
After looking at the site, do you agree it was designed with this goal in mind?

4. Tips for creating a goal
Make sure you know who your audience is.
Make sure the goal is specific and quantitative.
Keep your goal simple—about one sentence long.
[Note to trainer: Steps—given in either numbered or bulleted lists—are always shown in yellow text.]

5. Sketch site structure
Once your site's goal is defined, sketch out the structure of your site beforehand.
Use a pencil and paper (or a diagramming tool, like Microsoft® Visio®) to draw boxes for pages and arrows for links. Remember to keep your goal in mind as you do this.

6. Sketch a common layout
After you've sketched a map of your site, it's time to start sketching a common layout for each of your pages.
You could start designing the page layout using FrontPage, but we recommend keeping it on paper at this point. Pencil and paper can be easier to change, as noted before.

7. Things to consider while sketching layout
Here are some of the things to consider as you sketch the layout:
Should each page have a common header and footer?
Should the site have a consistent method of navigation?
Are there any marketing requirements for the site? Legal requirements?

8. Sketch a common layout
Using your sketches as a model, you'll eventually use FrontPage to design Web pages in HTML. You might use a table for the skeletal structure, or layout, of the page.
Once the layout is defined, you can fill it with content. For example, you'll want to add text, hyperlinks, pictures, and interactive buttons.

9. Web Structure Index Home page Room Dining Facilities Attraction
History
Location

10. Begin Adding Information to Your New Page

11. Saving Your New Document

12. Changing the Name of the Document
Be sure to give the document a logical, but short, name.

13. Close your newly created document,
and you will see your original
document with a new link...

14. Preview Your Document in Your Browser

15. Be Sure to Test Your New Link!

16. Inserting a Link to an External Web Page

17. Inserting an External Link
To create a link to the Michigan Historical Center… the address is:
Highlight the Item that you want to link to…
and click on the link icon...

18. You will see the same window as with an internal link
Put the address for the site in the URL line and click on the OK button.

19. You will now have a link on the page, which (hopefully) goes to the desired address...

20. Create a second link to the Michigan Electronic Library History Page using the following address:

21. Inserting Images with FrontPage
The end result we’re aiming for with the example document...

22. Saving the Image to Your Computer
Click the Right Mouse Button, Select Save Image As...

23. Pick A Location on Your Computer for the Image
The Location is very important with FrontPage! The path should be like the example image above. The path is as follows:
C:\Webshare\Wwwroot\myorganization\images

24. Write Down the File Name!!
In this case, the file name is bl_diam.gif
Don’t forget the extension! (.gif in this case)

25. Click on the Save Button...
Very briefly, you will see the Saving Location Window…
The image is now saved on your computer and can be used on your web document.

26. Once you’ve got the image saved, you will need to insert it into the document...
1. Place the cursor where you want the image to appear in your document...
2. Click on the Insert Image Button...

27. Locate the image on your computer
The location of the image should be exactly the same as where it was save to, as in the example below: C:\Webshare\Wwwroot\myorganization\images
Double click the image to insert it into your document...

28. An image should be inserted into your document

29. Using an Image as a Link

30. Using an Image as a Link
Insert the address of the web page that you want to link to in the Location line. In the example, the address being used is: history/history.html
Click on the OK button to make the image a link

31. Using an Image as a Link Using an Image as a Link
When you make an image a link, you’ll notice that the image now has a blue border around it. Most of the time, you won’t want a blue border around your image. To remove the border around the image, you will again need to view the properties of the image again by pointing at the image and clicking the right mouse button.
If the Appearance tab is not to the front, you will need to click on Appearance. This tab allows you to alter the properties affecting the display of the image. There is an item on the Appearance tab is Border Thickness. The Border Thickness controls the size of the border surrounding images. To remove the image border, simply place a value of zero as the Border Thickness and click on the OK button. The image should no longer have a border surrounding it.

32. Inserting Tables into Your Document

33. Changing Table Properties

34. Changing the Size of the Cells

35. Inserting a Line Break

37. Layout Screen Resolution Smaller number = larger text
800 x 600 (most common)
1024 x 768
Smaller number = larger text
Smaller number = smaller amount of information on screen
Preview in browser at different resolutions

38. 640 x 480 screen resolution
800 x 600 screen resolution
1024 x 768 screen resolution

39. 640 x 480 screen resolution
800 x 600 screen resolution
1024 x 768 screen resolution

40. Layout Step One, set screen resolution Step two, insert layout table
This two step approach formats your pages for optimum viewing by your audience
Alternative: Make Column Autostretch

41. Layout with Tables A. B. C. D. Page layout has 3-4 areas
Header
Navigation
Body
Footer
Total layout table dimensions should be 760 x 405 (shown in the task pane under Layout Tables and Cells) - Fits best on 800 x 600
Use tables for special layouts - pictures, archives, design elements (Table/Insert/Table) A. B. C. D.

42. Files 2 MB file 200 KB file FileNames vs. File%20Names
Page Titles
File Locations – Organization is key
Subfolders for Newsletters & Images
File Sizes
1,024 KB = 1 MB
Documents ( KB max)
Pictures ( KB max)
How many more pictures can you put on the site in the same amount of space?
2 MB file
200 KB file

43. Picture Size Layout size File size
Use Picture Manager to edit both together
Reduce file size to 6% on average
Make a copy first, as this will alter your original file
Took a 1.5 MB file reduced it to 89 KB (1536 KB to 89 KB) 5.79%

44. Pictures Arranging with Tables Auto-Thumbnail to minimize pictures
Place a line first (enter)
Table / Insert / Table
Auto-Thumbnail to minimize pictures
Alt Tags
Right Click – Format Picture
Site – Alternative Text
Alt Tags in reference to persons with disabilities

45. Hyperlinks 3 most common types of hyperlinks Screen Tips = Alt Tags
Existing Pages
Page in this site (Current Folder)
Recently Browsed (Browsed Pages)
Place in this document
Create bookmark first
Pre-determined “Subject” field tells you:
That someone visited your webpage
What this from a stranger is about
Screen Tips = Alt Tags
Alt