Controlling the size and alignment of your images using CSS keeps rules that affect the presentation of your page in the CSS and out of the HTML markup. You can also achieve several interesting effects using background images. In this chapter you will learn how to:
The background-image property allows you to place an image behind any HTML element. This could be the entire page or just part of the page.
Background images are often the last thing on the page to load (which can make a website seem slow to load). As with any
longer to download.
### fixed : The background image stays in the same position on the page scroll.
When an image is not being repeated, you can use the background-position
property to specify where in the browser window the background image should be placed.
This property usually has a pair of values. The first represents the horizontal position and the second represents the vertical.
The background property acts like a shorthand for all of the other background properties you have just seen, and also the background-color property.
The properties must be specified in the following order, but you can miss any value if you do not want to specify it:
You can specify the dimensions of images using CSS. This is very helpful when you use the same sized images on several pages of your site.
Images can be aligned both horizontally and vertically using CSS.
You can use a background image behind the box created by any element on a page.
Background images can appear just once or be repeated across the background of the box.
You can create image rollover effects by moving the background position of an image.
To reduce the number of images your browser has to load, you can create image sprites.
CONCISE
CLEAR
SELECTIVE
Good navigation provides context. It lets the user know where they are in the website at that moment. Using a different color or some kind of visual marker to indicate the current page is a good way to do this.
Each link should be big enough to click on and the appearance of the link should change when the user hovers over each item or clicks on it. It should also be visually distinct from other content on the page.
The more pages a site contains, the larger the number of navigation items there will be. Although secondary navigation will change from page to page, it is best to keep the primary navigation exactly the same.
PROCESS & Design :
You can differentiate between pieces of information using size, color, and style.
You can use grouping and similarity to help simplify the information you present.
Search engine optimization.
Using analytics to understand visitors.
Putting your site on the web.
Search engine optimization (orSEO) is the practice of trying to help your site appear nearer the top of search engine results when people look for the topicsthat your website covers.
On-page techniques are the methods you can use on your web pages to improve their rating in search engines.
Getting other sites to link to you is just as important as on-page techniques. Search engines help determine how to rank your site by looking at the number of other sites that link to yours.
### 1: Page Title The page title appears at the top of the browser window or on the tab of a browser. It is specified in the
The name of the file is part of the URL. Where possible, use keywords in the file name.
If the keywords are in a heading
Where possible, it helps to repeat the keywords in the main body of the text at least 2-3 times. Do not, however, over-use these terms, because the text must be easy for a human to read.
Use keywords in the text that create links between pages (rather than using generic expressions such as “click here”).
Search engines rely on you providing accurate descriptions of images in the alt text. This will also help your images show up in the results of image-based searches.
The description also lives inside the <head> element and is specified using a tag. It should be a sentence that describes the content of the page. (These are not shown in the browser window but they may be displayed in the results pages of search engines.)
to have a good webpage resarch :
As soon as people start coming to your site, you can start analyzing how they found it, what they were looking at and at what point they are leaving. One of the best tools for doing this is a free service offered by Google called Google Analytics.
The Google Analytics service relies on you signing up for an account at: www.google.com/analytics The site will give you a piece of tracking code which you need to put on every page of your site.
Every time someone loads a page of your site, the tracking code sends data to the Google servers where it is stored.Google then provides a webbased interface that allows you to see how visitors use your site.
A tracking code is provided by Google Analytics for each website you are tracking. It should appear just before the closing </head> tag. The code does not alter the appearance of your web pages.
The overview page gives you a snapshot of the key information you are likely to want to know. In particular, it tells you how many people are coming to your site…
The content link on the left-hand side allows you to learn more about what the visitors are looking at when they come to your site.