Web Standard practice-Google Home

Web|web Standard | google

Today we are going to learn how to use the Web standard method to make Google home page (Chinese). Google homepage has been used to layout the table. We use the Google homepage prtscr screen, as the design of the draft reference, and do not open the Google homepage to view its source code-as it does not exist. This is close to the real project work.

The first part, the construction of HTML (based on XHTML transitional)

Read the content from the design manuscript, to try to figure out the structure. Because the whole page content is less, easy to understand, but also met our first question: is using <p> tag or <div>? Each represents the paragraph and division, in principle, there is no paragraph on this page exists, so should not use <p>. But here is a problem, with the style sheet displayed, the <p> clearer, because the default <div> margin and padding values are zero. Well, using <p> <div> is a matter of preference, but in principle the latter should be used. The latter is also used in this example. Start looking for a hand editor to write HTML:

<div><strong>junchenwu@gmail.com</strong> | <a href= "IG" > Personalized Homepage </a> | <a href= "MyAccount" > My Account </a> | <a href= "Logout" > Exit </a></div>
<div></div>

This includes the landing status of the head and the large Logo in the middle. We don't add any style IDs and class first.

Then we see the links in the middle with the "Web Photo information Forum more»". How do you do it? Generally on two kinds of writing, see a person likes. Write these links within a line or write in a UL, as follows:

<div><strong> page </strong> <a href= "pic" > Photo </a> <a href= "info" > Information </a> <a href= "Group" > Forum </a> <a href= "More" ><strong> more»</strong></a></div>

Or:

<ul>
<li><strong> Homepage </strong></li>
<li><a href= "pic" > Picture </a></li>
<li><a href= "Info" > Information </a></li>
<li><a href= "group" > Forum </a></li>
<li><a href= "More" ><strong> more»</strong></a></li>
</ul>

What are the pros and cons of each of these two types of wording? There are 5 items, the first is bold text, the other 4 are links. If you use the first method to control the style, such as controlling the spacing between these 5 items, if you use the second way of writing, in the case of graduation, 5 lines are displayed. Here I write down the shortcomings, according to this case, we still choose the first method, so to control the style of the need to add before and after each item meaningless <span>.

We went on to write a list of three links to the search form and the advanced search on the edge. Which one do you want to write first? Looks like a peer. This is a good time to ask the product designer's intention. We'll write the form here first. As follows:

<form action= "" method= "POST" >
<div><input type= "text" size= "title=" "Google Search"/></div>
<div><button type= "Submit" >google search </button><button> Good luck </button></div>
<div><label><input type= "Radio" name= "T" checked= "checked"/> Search all pages </label> <label> <input type= "Radio" name= "T"/> Chinese page </label> <label><input type= "Radio" name= "T"/> Simplified Chinese page </ Label></div>
</form>

Note Add a label to each item radio button, the effect you can test yourself. In addition, the label contained in the writing, can also be written as <label for= "foo" > for the ID of Foo label </label>. How to write this is to see a person's liking.

Next is the advanced search three links, as well as the bottom of the copyright information, and so on, the code is as follows:

<div><a href= "Advanced_search" > Advanced search </a> <a href= "pref" > Usage preferences </a> <a href= "lang" > Language Tools </a></div>
<div><a href= "AD" > Advertising program </a>-<a href= "All" >google Daquan </a>-<a href= "en" >google.com In english</a></div>
<div>©2007 google</div>

Here we basically finished the HTML construction of the homepage of Google, here is the sample file, we will also trim a part of the code later.

[1] [2] Next page