|
|
Information - Web Page Design Pictures Good web picture size is 71 ppi / 640 x 480 pixels (9.1 x 6.76 inch) / 921600 bytes. True color (24 bit). bird.bmp 393x279x16m IUG Presentation * 640 x480 is typical size of 15 in. monitor. * 30k image maximum. * Enhance by sharpening. * Resize to 72 dpi, 555 x 350. * Want to download in 5 sec. * 5 x 3 inch is good for e-mail. Backgrounds Backgrounds are tiled images. This means the browser reads the image once then repeats it into the viewing window until the whole displayed area of the window is showing that image. With this in mind you have to think of the various measurements your viewer will be using. For backgrounds in the style of this web site (i.e. narrow column on left) you should aim for the largest dimensions, widthwise, that your viewer may be using. I use a width of 1400 pixels - this ensures that most people even if they are viewing in 1200x1000 mode will not see a repeat of the left column. If I used a background image that was only 800 wide then those viewers using 1200 mode would see an ugly red strip down the right hand side of the page covering half the writing. So...bear in mind that just because you view in 800 mode there are still plenty of folk who may view in higher resolution - make that image wide. If it is going to be a plain background down the whole length of the page you need only make the depth 50 pixels (or even less to save on file size). The browser will just repeat the image. If there is a pattern in your background then the depth of the patterns dictate the depth of the background image. STAY AWAY from clouds and other such gaudy "homepage" backgrounds - even if your site is a homepage about you and your interests, please, have a bit of decorum - the viewer needs to read your text - don't try and hide it from him!! There are thousands of readymade backgrounds freely available. Just do a search in altavista.com for "background" - you'll get 1000's of pages of ideas to choose from. Colors Color is important for an effective web page for a number of reasons:
color is, however, difficult to use correctly and can be a disadvantage:
Guide to using color on a display screen: color coding No more than 5 separate colors should be used if their meanings are to be remembered by the user. color meanings The majority of users associate certain meanings with certain colors. For example, red is constantly associated with heat, danger or stop. Where there is existing conventions for colors, use them. If the meaning of an arbitrary association is to be recalled by the user, provide a table with the associated color meaning. Ensure that color used for purely decorative purposes does not interfere with the functionality of the display, as the users may look for the underlying reasons behind the color choice. Avoid using color as the symbol of your company or site. colors are associated with many peoples passions, political views, customs and religion. For example the telephone company Orange. Their identity and logo is 'The future is orange'. Just imagine trying to market the color orange in Northern Ireland. You will upset many people. color contrast The contrast ratio should be maximized when selecting colors for background and foreground elements. Black text on a white background provides the highest contrast ratio and optimizes visual processing for text. Using colors from the opposite ends of the spectrum can lead to visual fatigue; in particular, combining red and blue/cyan should be avoided. General advice on colors is given in the table below:
color systems
Frames Despite the fact that the recent trend in web design frowns upon the use of frames and tables in large, commercial websites, as they are a disadvantage when registering a site with many major search engines, frames and tables remain extremely useful for amateur webmasters. Despite their many disadvantages, frames and tables allow beginners to put together attractive web sites that are well-organized and viewable in most major web browsers. In the section below, we will provide you with the basics you need to get started on your web site with frames and tables, so that you can get your site online as soon as possible! You can sub-divide your web pages into sections called 'Frames'.
Frames are supported on lots of browsers now and are very popular for navigation bars and menu's.
HTML tag : <frameset rows="frame rows position" border="border thickness"> ......... </frameset> Description : The frameset rows tag tells the browser how to split up the screen into rows.
Example :
HTML tag : <frameset cols="frame column position" border="border thickness"> ......... </frameset> Description : The frameset cols tag tells the browser how to split up the screen into columns.
Example :
HTML tag : <frame src="file name" marginwidth="frame margin width" marginheight="frame margin height" name="name of frame" scrolling="scrolling option"> Description : The frame src tag tells the browser what file is to be placed in the frame. The element is also used to setup parameters for the frame.
Example :
Examples to set up frames on a web page. Here is the frame that is going to be setup:  Here is the HTML code to set up this framed web page:
Example number 2 The FRAMESETs can be nested to split the screen up further. Here is the frame that is going to be setup:  Here is the HTML code to set up this framed web page:
HTML tag : <noframes> ........ </frameset> Description : Browsers that do not support Frames - Not all browsers are capable of rendering frames and you don't want to leave the users with a blank screen. You should include a NOFRAMES tag to tell the browser what to do if it does not support Frames. See the first feeling of rolex replica uk is "cool", because it's disk is "ice blue", this is why it was in the bezel it was known as rolex replica watches reasons. Ice blue dial in the Rolex watch is very rare, this dial color is unique to replica watches uk
Example :
Formatting and aligning text and images
Description : Aligns characters/images on the screen. Examples :
HTML tag : <pre>.....</pre> Description : Displays characters in a fixed-width font rather than the variable-width font used for simple paragraphs. Example :
HTML tag : <blockquote>.....</blockquote> Description : This tag slightly indents a paragraph of text (from the left and right margins) to make the paragraph stand out. Example :
HTML tag : <i>.....</i> Description : This tag changed text to an italic format. Example :
HTML tag : <u>.....</u> Description : This tag underlines text. Example :
Note: It is good practice not to use this tag because usually underlined text means it is a link to another web page (or link to another part of the web page) i.e. you will fool users into thinking the underlined text is a link.
HTML tag : <s>.....</s> Description : This tag places a line across the Example :
HTML tag : <sup>.....</sup> Description : This tag super-scripts text. This tag is most useful in writing mathematical formulas and calendar dates. e.g. E = mc2, 3 rd April Example :
HTML tag : <sub>.....</sub> Description : This tag sub-scripts text. This tag is most useful in writing mathematical formulas e.g. Base 16 Example :
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
