Presentation on theme: "Information Technology in Travel, Hospitality and Tourism"— Presentation transcript:
1Information Technology in Travel, Hospitality and Tourism Unit 3Computer LAB Session 1
2Today’s Topics Layout Files Pictures Hyperlinks Resolution Page Layout What is a pixel anyway?!?Page LayoutSpecial LayoutsFilesNamesPage TitlesLocationsSizesPicturesSizesAuto-ThumbnailAlt TagsHyperlinks3 main typesScreen TipsThe basic unit of the composition of an image on a television screen, computer monitor, or similar display.
3How 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?
4Tips 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.]
5Sketch site structureOnce 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.
6Sketch a common layoutAfter 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.
7Things 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?
8Sketch a common layoutUsing 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.
9Web Structure Index Home page Room Dining Facilities Attraction HistoryLocation
17Inserting 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...
18You 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.
19You will now have a link on the page, which (hopefully) goes to the desired address...
20Create a second link to the Michigan Electronic Library History Page using the following address:
21Inserting Images with FrontPage The end result we’re aiming for with the example document...
22Saving the Image to Your Computer Click the Right Mouse Button, Select Save Image As...
23Pick 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
24Write Down the File Name!! In this case, the file name is bl_diam.gifDon’t forget the extension! (.gif in this case)
25Click 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.
26Once 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...
27Locate 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\imagesDouble click the image to insert it into your document...
30Using an Image as a LinkInsert 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.htmlClick on the OK button to make the image a link
31Using 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.
37Layout Screen Resolution Smaller number = larger text 800 x 600 (most common)1024 x 768Smaller number = larger textSmaller number = smaller amount of information on screenPreview in browser at different resolutions
38640 x 480 screen resolution800 x 600 screen resolution1024 x 768 screen resolution
39640 x 480 screen resolution800 x 600 screen resolution1024 x 768 screen resolution
40Layout Step One, set screen resolution Step two, insert layout table This two step approach formats your pages for optimum viewing by your audienceAlternative: Make Column Autostretch
41Layout with Tables A. B. C. D. Page layout has 3-4 areas HeaderNavigationBodyFooterTotal layout table dimensions should be 760 x 405 (shown in the task pane under Layout Tables and Cells) - Fits best on 800 x 600Use tables for special layouts - pictures, archives, design elements (Table/Insert/Table)A.B.C.D.
42Files 2 MB file 200 KB file FileNames vs. File%20Names Page TitlesFile Locations – Organization is keySubfolders for Newsletters & ImagesFile Sizes1,024 KB = 1 MBDocuments ( KB max)Pictures ( KB max)How many more pictures can you put on the site in the same amount of space?2 MB file200 KB file
43Picture Size Layout size File size Use Picture Manager to edit both togetherReduce file size to 6% on averageMake a copy first, as this will alter your original fileTook a 1.5 MB file reduced it to 89 KB (1536 KB to 89 KB) 5.79%
44Pictures Arranging with Tables Auto-Thumbnail to minimize pictures Place a line first (enter)Table / Insert / TableAuto-Thumbnail to minimize picturesAlt TagsRight Click – Format PictureSite – Alternative TextAlt Tags in reference to persons with disabilities
45Hyperlinks 3 most common types of hyperlinks Screen Tips = Alt Tags Existing PagesPage in this site (Current Folder)Recently Browsed (Browsed Pages)Place in this documentCreate bookmark firstPre-determined “Subject” field tells you:That someone visited your webpageWhat this from a stranger is aboutScreen Tips = Alt TagsAlt