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

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.

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?

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

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.

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.

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?

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.

Web Structure Index Home page Room Dining Facilities Attraction History Location

Begin Adding Information to Your New Page

Saving Your New Document

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

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

Preview Your Document in Your Browser

Be Sure to Test Your New Link!

Inserting a Link to an External Web Page

Inserting an External Link To create a link to the Michigan Historical Center… the address is: http://www.sos.state.mi.us/history/history.html Highlight the Item that you want to link to… and click on the link icon...

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.

You will now have a link on the page, which (hopefully) goes to the desired address... http://mel.lib.mi.us/michigan/MI-history.html

Create a second link to the Michigan Electronic Library History Page using the following address: http://mel.lib.mi.us/michigan/MI-history.html

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

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

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

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

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.

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

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

An image should be inserted into your document

Using an Image as a Link

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: http://www.sos.state.mi.us/ history/history.html Click on the OK button to make the image a link

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.

Inserting Tables into Your Document

Changing Table Properties

Changing the Size of the Cells

Inserting a Line Break

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

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

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

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

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.

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 (100-200 KB max) Pictures (50-100 KB max) How many more pictures can you put on the site in the same amount of space? 2 MB file 200 KB file

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%

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

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 E-mail Pre-determined “Subject” field tells you: That someone visited your webpage What this e-mail from a stranger is about Screen Tips = Alt Tags Alt