Presentation on theme: "Page Design Scroll zone Data Tables Screen Readers"— Presentation transcript:
1Page Design Scroll zone Data Tables Screen Readers The area beyond the initial visible screenIt is important to keep important links, logos and content above the scroll zone. You never know how big your visitors monitor is and you want your vital information to be presented.Data TablesOrganizes text or numbers on a given topic(s).These are great tools when comparing and contrasting information, like your favorite sport teams stats, price of tickets, etc.Fixed Width Table- is absolute and will not resize if the browser window resizes. Defined in pixelsYou have more control of what the visitor seesDisadvantage is that it does not resize to different monitor’s resolutionsRelative Width Table- is flexable and resizes as the browser window resizes. It is defined as a percentage of the browser windowYou have less control of how the table is displayedIt resizes to fix all browsers and keeps it a specific percentage of the browser windowScreen ReadersRead web pages to the visually impaired usersProblem with tables is that the reader reads vertically and will misread the information to the visitor. This can be confusing to someone looking for information.
2Links and their various forms Text linksAre text on a page that has been created into a hyperlink. This allows the visitor to maneuver to new pages and different parts of the page.These links clearly identify their target ( the page where the link leads to)Be sure to use text that clearly identify where the link is going to. If you are going to Origins, it may be good to label that link Origins of StoryRollover linkThese links are hidden within the text and may only be identified with in the text by a change of color or underlinedThe Problem with these links is that often times your visitor many not click on it, due to it being ambitious where it leadsUse these with caution.
3Links and their various forms cont. Image LinksAssigns a link to an imageImage maps- is an image (usually of a map) that has hotspots that allows the visitor to click on a particular hotspot. These are connected to links.
4Menus, Bars and TabsNavigation menu- is a menu with a list of related links (pages)Pop out menus are displayed vertically ( like our school webpage)Navigation bar- uses graphic buttons to present links.Drop down menus- must be clicked on to show menu and shows up in menu bar.Navigation tabs- presents links in the form of tabs at top/bottom of page (like my website)*Page 119 in your book shows these really well
5Breadcrumb Trail- is a horizontal list at the top of the page that shows a visitor the path he/she has taken from the homepage to the page being viewed.Each part of the trail is a link and allows the visitor to click these links to access say the homepageThis should only be used with other navigation systems, because alone it can be very confusing.Site MapHas a site Index that lists a summary of links to major pages within the site. ( Ebay and Amazon has one)Should only be used if you have a site that has a lot of different pages
6Images Text to images Scanners Using Photoshop, you can add text to your images.The text is entered into a bounding box (like text box in word)You can choose, font, color and shape of box to add interestImages text should also be conveyed in your body text, so that screen readers may be able to interpreted the informationScannersIf need be, you can scan an image in if you do not already have a digital copyKeep in mind: scan image in at the size you want it on your webpage. If you want to edit it, scan it a little bigger to make it easier to resize and manipulateScan illustrations at 256 colors or higher color settingsSave images as Tagged Image File Format (TIFF)- used to save files from scanning and storage. This allows you to access the file and to edit it, but remember that you must save it once finished into a different format to make it easier to upload onto webpage.
7Today’s Lab Your Turn in book on Page 138 Visit our site scsite.com/web3e and click on the links under chapter 5 to review the homepage and at least 3 other underlying pages at each siteNASA Kids’ ClubNOAA Ocean ExplorerAICPALane Home FurnishingsReview how the sites use images. Do the images add value? Do they match or complement the color scheme? If site maps are used, do the images represent their links’ target pages? Do the images contribute to the overall mood of the site and promote the sites’ message? How does knowing this information help you in choosing and editing your images for your sites?Write a report answering these questions. Include screen shots of what specifically you are talking about. Compare the pages using the questions above.