In: Root » Internet and online » Web design tips » Specifying Page Settings, Tables and frames
The following sections explain the importance of page settings screen size considerations, page length, and page layout to control how your pages look in a Web browser. Screen size considerations Most computer users are used to scrolling up and down to view pages that are longer than the height of the screen. But few users like to scroll left and right to view pages that are too wide. To avoid horizontal scrolling, design your pages so that they fit within the width of the screen. If you want to target users who run their computers with 800 x 600 screen resolution (which accounts for almost all users now that 15-inch and larger monitors are commonplace), shoot for 780 as the maximum page width. If your pages consist entirely of text, you don’t have to worry about screen size because the user’s Web browser automatically adjusts text lines to fit the width of the screen. The only time you have to worry about page width is when you are creating a page that includes elements that have a fixed width, such as tables, images, or frames. The following list explains how to adjust the width for those three elements: - Tables: Set the overall width of a table by using the WIDTH attribute in the <TABLE> tag, like this: <TABLE WIDTH=”620”> - Images: The size of the image determines how wide the image appears on the page. If the image is too wide, you can change the width by using the WIDTH attribute in the <IMG> tag: <IMG SRC=”chick.gif” WIDTH=”200”> - Frames: Set the width of side-by-side frames by using the columns (COLS) attribute in the <FRAMESET> tag. Page length Even though most users don’t mind scrolling down to see pages that are longer than the height of the screen, you should still limit the length of your pages. As a general rule, try to limit your pages to two or three times the height of the screen about the same amount of information that could be printed on a single 81⁄2-x-11-inch sheet of paper. Page layout The best way to create an effective design for your Web pages is to set up a basic grid of common elements that will appear in the same or a similar arrangement on all your pages. The following list indicates some of the elements you may need to include in your Web design grid. (Depending on the content of your site, you may not need to provide all these elements.) - Header area: The header area appears at the top of each page, indicating the site title, page title, company name, site navigation buttons, and any other elements that you want to place at the top of each page. - Footer area: The footer area appears at the bottom of each page, possibly including contact information, a copyright notice, and navigation buttons. - Main text area: This area contains the main text and illustrations for each page. - Sidebar area: A sidebar occupies a vertical band on the left or right portion of each page. This area can contain elements such as a table of contents or menu for the site. Working with Backgrounds When creating Web pages, don’t make the mistake of using a garish background image that makes your page almost impossible to read. If you want to use a background image for your pages, choose an image that doesn’t interfere with the text and other elements on the page. Setting the background color To set the background color of your Web page, follow these steps: 1. Add the background color (BGCOLOR) attribute to the <BODY> tag. 2. Type a color name for the BGCOLOR attribute. For example: <BODY BGCOLOR=”WHITE”> For more information about using color, see “Color,” earlier in this article. Using a background image To use a background image for your Web page, follow these steps: 1. Add the BACKGROUND attribute to the <BODY> tag. 2. Type the name of the image file you want to use for the background as the BACKGROUND attribute value, like this: <BODY BACKGROUND=”bgpic.gif”> The background image repeats as many times as necessary to fill the page. As a result, the background image file doesn’t have to be very large. Adding Links Links are an integral part of any Web page. Links let your reader travel to a different location, which can be a part of the same HTML document, a different page located on your Web site, or a page from a different Web site located elsewhere on the Internet. All the user has to do to be transported to a different page is click the link. Using text links A text link is a portion of text that someone viewing your page can click to jump to another location. To create a text link, follow these steps: 1. Determine the address of the page that you want the link to jump to. 2. Type an <A> tag where you want the link to appear on the page. In the <A> tag, use an HREF attribute to indicate the address of the page that you want to link to. For example: <A HREF=”http://www.google.com”> 3. After the <A> tag, type the text that you want to appear in your document as a link and add a closing </A> tag, like this: <A HREF=”http://www.google.com”>The Official For google Web Page</A> The text that appears between <A> and </A> is called the anchor. The Web address that appears in the HREF attribute is called the target. The anchor text is displayed on the Web page in a special color (usually blue) and is underlined so that the person viewing the page knows that the text is a link. If the target refers to another page at the same Web site as the page the link appears on, you can use just the filename as the target. Always enclose the filename or URL in quotation marks. For example: <A HREF=”emerald7.html”>See the Wizard</A> When a user clicks the See the Wizard link, the HTML file named emerald7.html appears on-screen. Using graphic links An image link is a graphic image that a user can click to jump to another page or a different location on the current page. To create an image link, follow the procedure described in the preceding section, “Using text links.” But in Step 3, instead of typing text for the link, type an <IMG> tag that contains an SRC attribute that identifies the image file to use for the link. For example: <A HREF=”emerald7.html”><IMG SRC=”emerald.gif”></A> In this example, the graphic image file named emerald.gif appears onscreen. If a user clicks it, the browser displays the emerald7.html page. Linking within the same page To create a link that simply moves the user to another location on the same page, follow these steps: 1. Assign a name to the section that you want to link to by adding an <A> tag with the NAME attribute to the first HTML line of that section. Immediately follow the <A> tag with an </A> end tag. 2. Create a text or graphic link to that section, typing the section name preceded by the # symbol in the HREF attribute. Here is an example of an <A> tag that assigns a name to a location in a document: <A NAME=”Here”></A> Here is a snippet of HTML that creates a link that jumps to the location named “Here”: <A HREF=”#Here”>Go over there!</A> |
legal disclaimer
Our website is not responsible for the information contained by this article. Web-articles is a free articles resource.
Suggestion: If you need fresh, daily updated content for your website, feel free to use our service. Click here for more information.
related articles
All HTML documents contain the following elements, which define the overall structure of the document: <HTML> <HEAD> <TITLE>Your title goes here</TITLE> </HEAD> <BODY> The body of your document goes here. </BODY> </HTML> As the preceding example shows, HTML tags are generally used in pairs that enclose portions of your document. The beginning tag, such as <BODY>, signals the start of specific formatting for t...
This article presents the techniques for adding graphics, sounds, and video elements to your Web pages. You find out how to add images and image maps to your Web pages, link and embed sound and video files, and use a background sound that plays when your Web page displays. File Formats for Image, Sound, and Video You can choose from many different file formats for images, sounds, and videos. Fortunately, you can construct most Web pages using only the formats that we describe in the following se...
3. How to publish your website on the web
This article presents the procedures that you must follow to make your Web pages available so that others can see them. You find out how to test your Web pages, publish your Web pages with the Web Publishing Wizard, and use FTP to post Web files. Finally, you discover how to announce your site via the major search services. Previewing Your Web Pages Before you post your Web pages to a Web server, it’s a good idea to test them. You can preview your Web pages from your hard drive with a Web ...
4. How to promote a webiste
Obviously, you want your Web site to be more popular than Britney Spears and it can be, if you promote it well. Search engines, such as Yahoo!, Lycos, Google, and the rest of them, are always scouring the Internet and recording information about Web pages. Individual search engines work a little differently: Some record information about every word on a Web page and some look only at titles and headings. The search engines store this information in giant databases. When you conduct a search of the Intern...
5. Image editing programs like Adobe Photoshop
Image-editing programs Following are some popular image-editing applications: - The trial edition of Adobe Photoshop CS3 This download is rated highly by users and ranked first in image-editing downloads with more than 8 million to date. This download requires site registration before use. There is also a shareware version available for Apple users. - PhotoImpact X3 This is a user-friendly image editor that actually has most of the editing tools that most people would need and use f...
6. Ilustrator Flash Professional Photoshop Extended and Fireworks
Illustrator The Illustrator application allows the user to efficiently create vector graphics, and then seamlessly use the result with other applications included in CS3. The developer can prepare content for Web, mobile, and print media. The interface of the CS3 version has been modified to provide more efficient utilization of the workspace. For example, the Tools palette has been streamlined from two columns to one that docks inconspicuously along the borders of the screen. Simultaneously, more ...
7. Adobe Creative Suite 3 Photoshop and Dreamweaver
Adobe Creative Suite 3 Photoshop and Dreamweaver The purpose of this article is to provide a brief look at some of the tools available for use in Web site design, and point you to where there is more in-depth coverage of each technology highlighted in later articles. For readers working within the constraints of a variety of budgets, this article describes a range of image-editing tools that are available on the Web either as freeware, shareware, or trial versions of c...
8. How to design a web site for the mobile web
Designing for the Mobile Web There are more than 50 companies producing mobile telephones in significant and marketable quantities. By 2009, projections indicate there will be 3 billion mobile phone users worldwide. The market for the delivery of Web content to these mobile device users dwarfs the market for desktops. There is theoretically unlimited potential for expansion of the Web (or Web 2.0) into these devices, and we are now on the cutting edge of Web site design for Mobile Web (or the ‘‘Ubi...
9. Origins of the Internet and How a router routes
Origins of the Internet One of the first ideas to get out of your mind (if it is there) is that the Internet is a monolithic creation that came about at a single point in time and at a single location. The Internet is a conglomerate of overlapping and mutually reinforcing technologies from computer science, data storage and retrieval sciences (the once lowly data processing), and communications that have been developed (and are still being developed) over the past half century. From inception in the Depart...