Use XHTML and CSS to design reusable web pages

css|xhtml| Design | Web page

With the gradual popularization of XHTML, HTML has become obsolete on many occasions. World Wide Web Consortium published the first version of XHTML as a recommended standard on June 26, 2000. The goal of the XHTML standard is to replace HTML. According to the consortium, "XHTML is the successor to HTML" (http://www.w3.org/MarkUp/).

XHTML has two main goals:

• Creates a more distinct separation between the document structure and the representation.
• An application that will reuse HTML as XML.

The advantage of using the XHTML standard is that the page is designed to be displayed and worked in exactly the same way in any modern browser, just once. For example, after a standard build, pages are displayed in the same way in Internet Explorer, Mozilla Firefox, Netscape Navigator, Opera, Camino, and Safari without doing any extra work. and XHTML standards make it easier for WEB sites to access devices such as smartphones and disabled computers.

Because the XHTML standard requires creating a more distinct separation between the document structure and the representation. Therefore, it is essential to use CSS style sheets. CSS in the Web page occupies a very important position, its use has been a hot topic of discussion. CSS is a shorthand for cascading style sheet, translated as "cascading style forms." The HTML4 standard was promulgated in 1997, and the first standard CSS1 on the stylesheet was published, after the CSS1 version, and the CSS2 version was released in May 1998.

The purpose of the CSS inventor is to remove the presentation element, that is, the content should be tagged based on what the content represents, and the style sheet should be used to beautify the content. This is consistent with the objective of XHTML's separation of document structures and representations (the B, I and IMG tags (as well as big, small, and TT) are eliminated in XHTML 2.0, and even the use of BR is not favoured, ready to be removed from future releases. The reason is that most of the tags are representation. Their sole purpose is to give the browser instructions on how their content should be displayed, but without providing information about what the content is. So they become the best partners. For more information on XHTML2.0, see: http://www-128.ibm.com/developerworks/cn/xml/x-wa-xhtml/index.html

CSS used to be used to define the attributes of a font, and now we will use it to control the display of the entire page in the new standard. However, we must do something different from the past to adapt to this new change, such as using div to lay out instead of tables, using structured, semantically marked, and so on. With the new approach, we can now easily design reusable CSS (used in multiple Web sites of the same style file) and a Web site that can be skinned (one site uses many different styles).

For example, see the Sichuan Provincial construction Office information portal, the interface is switched to the upper right, as shown in Figure 1. For time reasons, XHTML and CSS checksums are not validated, but the principle is the same.

　　

Figure 1: Interface style switching

1, redesign the site's HTML

First we want to remove the label on the page about the appearance. In previous code, we used a table to create a border block in the content of a page, and we used 〈b〉 to add bold text. Used to change the font color and so on. Use

Labels to create paragraphs, and so on.

To make a website that adapts to XHTML standards and can be changed at will, we need to avoid using labels on the skins in the pages. One of the biggest benefits of separating the document structure from the presentation is that it makes the document available and accessible when there is no CSS. The performance (what the document looks like) will be different in a supportive browser, but its content will never change, and in most cases, the content is actually more important to the person visiting the site than the way it behaves. That's why it's better to send a page without a style to a poorly supported browser than to exclude them from the outside.

Now more popular practice is to use Div, span and other tags to layout the entire page, and Table,ul,pre,code and other labels to display data, with UL is used to display unordered list information, and OL display ordered list information. This will be more meaningful than using table to display a list, while UL and OL in the browser faster than the table tag download speed, and relative to the Table,css UL and OL appearance control more flexible. Of course, for complex data, such as reports, using a table to display is still the choice.

2, establish the basic common style

Because all XHTML files are made up of a variety of HTML tags and text within the label, some basic tags exist in every XHTML file, such as body, table, TD, Div, H1-H6, ul, Li, input, etc. If we define CSS styles for these tags, such as fonts, font sizes, line spacing, background colors, backgrounds, and so on, we have a basic style, like a theme in Word or PowerPoint, where each theme is a style style. Therefore, we can define a common style based on the basic HTML tags, such as creating a SITECOMM.CSS file, defined as follows:

The "(" and ")" in the style sheet syntax in the/* is used for the example because the blog has an error each time it saves curly braces. Please change to the correct symbol when using.

Body
(
Background:url (images/bg_page.jpg);
Font:10pt verdana,arial,;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
)
H1, H2, H3, H4, H5, H6
(
Border-bottom:solid 1px #ccc;
Margin:1em 0;
)
Td
(
font:10pt;
)
A:link
(
Color: #057AE0;
Text-decoration:none;
)
a:visited
(
Color: #057AE0;
Text-decoration:none;
)
A:hover
(
Color: #009900;
)
A:active
(
Color: #009900;
)

Such a style file, can be applied to any one page, as long as the addition of references we can immediately see the effect.

Because the style sheet's inheritance rules are external, the label style is preserved and inherited to the other tags contained in the label. In fact, all the tags nested in the label inherit the attribute values specified by the outer label. Sometimes the styles of many layers of labels are stacked together, for example, the font size is defined in the body tag, so the Div, p, and so on will inherit the same font size, if the font color is defined in the P tag, Then the text in the P label has both the font size of the body label and the font color of the P label. Note that the table label does not inherit the body font size setting, so in the style sheet above, we individually define the TD style.

3, define the layout of the page structure

Many times, we always make the Web page from the vision, first with Photoshop or fireworks, thinking the color of the page, do some very cool effect, very beautiful pictures, and then cut into small figure. Then make all the designs into pages by editing HTML.

However, people with visual defects cannot understand these colors or effects. These effects cannot be resolved on PDAs, mobile phones and screen readers.

So the appearance is not the most important. A well-formed XHTML can be displayed in any appearance, with a different definition of CSS, on any network device that supports XHTML.

Through analysis, we can find that for most Web sites, pages are made up of similar chunks of content, such as:

• Site Title Area
• Site navigation (main menu, times and menu)
• Ribbon (e.g. search box, user login area)
• Content area (article body or article, product list)
• Footer (copyright and related legal notices)

Then we use DIV tags to include these blocks, like this:

<div class= "PageHeader" > site title
</div>
<div class= "Pagenav" > Site navigation
</div>
<div class= "Catalognav" > Column navigation
</div>
<div class= "PageContent" > Article body or list, etc.
</div>
<div class= "Pagesearch" > Enquiry
</div>
<div class= "Pagebottom" > Footer
</div>

With the definition of CSS, we can place the blocks of these div tags anywhere on the page, and then specify the color, font, border, background, and alignment properties of the blocks, and so on. For example: we create the sitelayout.css file, defined as follows:

. PageHeader
(
padding:10px;
border:1px solid #666;
height:100px;
height:70px;
)
. Pagenav
(
padding:10px;
border:1px solid #666;
height:100px;
height:30px;
)
. Catalognav
(
Float:left;
top:130px;
padding:10px;
border:1px solid #666;
width:20%;
)
. pagesearch
(
Float:left;
top:130px;
padding:10px;
border:1px solid #666;
width:20%;
)
. pagecontent
(
Float:left;
padding:10px;
border:1px solid #666;
height:400px;
width:60%;
)
. pagebottom
(
Clear:both;
padding:10px;
border:1px solid #666;
height:100px;
height:70px;
)

So, we define a three-column page layout: The top Adaptive page width. The middle three columns are adaptive pages. The bottom of the adaptive page width, of course, you can also define the page as the middle of only two columns and so on, You only need to adjust the Layout.css file, so you can flexibly modify the layout of the page, so that the appearance of the page changes radically, without having to move to the HTML source file, which is particularly important for the server-side code generation program. For more information on CSS layouts, see: http://www.w3cn.org/article/layout/2004/55.html

4, define the unique style of the site

After two more steps, we already have a general appearance of the page theme, next we want to design the details of the site, for example, we want to use the site navigation bar and the normal hyperlink is not the same style, such as: blue, bold, larger font, plus a stereo effect of the background picture:

. Pagenav A:link,. Pagenav a:hover,. Pagenav a:visted (Color: #36c;
Font-weight:bold; font-size:120%; Background:url (images/bg_sitemenu.jpg) #36c;
)

For column navigation, we want to add a background color to each column and have the effect of the mouse slipping and moving out. The HTML code for the column navigation area is:

<div class= "Catalognav" >
<ul>
<li>
<a href= "1" > Column 1</a>
<li>
<a href= "2" > Column 2</a>
<li>
<a href= "3" > Column 3</a>
<li>
<a href= "4" > Column 4</a>
<li>
<a href= "5" > Column 5</a>
<li>
<a href= "6" > Column 6</a>
</li>
</ul>
</div>

The corresponding CSS code for the column navigation area is:

. Catalognav UL
(
Margin-left: -30px;
List-style:none;
)
. Catalognav Li
(
Float:left;
Background: #CCC;
line-height:30px;
Border:solid 1px #black;
)
. Catalognav A
(
width:100%;
Text-align:center;
height:30px;
)
. Catalognav A:link
(
Color: #666;
Background:url (arrow_off.gif) #CCC no-repeat 5px 12px;
Text-decoration:none;
)
. Catalognav a:visited
(
Color: #666;
Text-decoration:underline;
)
. Catalognav a:hover
(
Color: #FFF;
Font-weight:bold;
Text-decoration:none;
Background:url (arrow_on.gif) #F00 no-repeat 5px 12px;
Next, we also need to define styles that are unique to other sites, such as column headings, article lists, article bodies, times, comments, hints, errors, and so on, and these styles are more of a class and ID as selectors. These styles are for one site, not for other sites, and then we save these styles as sitestyle.css files.

So we have 3 CSS files. SITECOMM.CSS: A style file that can be used by any site and defines the common HTML tag style. SITELAYOUT.CSS: Site layout files, can be applied to most of the site structure, specific details need to be adjusted. SITESTYLE.CSS: Site Unique style file, can show the unique style of this site and adapt to the content of the site.

Then we use the external invocation method: Associate These style sheets with the page.

<link rev= "stylesheet" media= "All" href= "Css/sitecomm.css" type= "Text/css" rel= "stylesheet" >
<link rev= "stylesheet" media= "All" href= "Css/sitelayout.css" type= "Text/css" rel= "stylesheet" >
<link rev= "stylesheet" media= "All" href= "Css/sitestyle.css" type= "Text/css" rel= "stylesheet" >

In a design that conforms to the XHTML standard, we use external usage, the benefit is self-evident, the HTML document will become very small, the CSS file is in the browser's cache, only need to download once, and you only need to modify a file to change the style of the entire site.

In this way, we can quickly change the skin function by client script or server-side code conveniently changing the connection address of the style sheet.

5, according to the user set the skin

Website style switch on the internet already have a lot of ready-made JavaScript skin code, the general use of cookies to save user settings, in the request page, change the page CSS file connection.

and the server-side skin-changing approach is based on user requests, the dynamic generation of CSS file connections, user settings are generally stored in the database or cookies.

Since we use 3 different CSS style files to display our web site, we can design more flexible skin-changing solutions and combinations, such as switching themes and retaining layouts, and switching layouts and themes, as well as various details, and more.

The added benefit of using 3 CSS style files is that every time we design a new system, its style style features can almost always be applied to the previous system (because we have the same page structure model, which is very different, but the main framework is the same), In this way, we can accumulate a considerable number of very rich and quite windy interface style library.

6, through the calibration

The final step in the process is to validate the XHTML\CSS code. There are a variety of tools that can help you verify both.

For example, Dreamweaver MX can check the accessibility of my sample code. You can do this by selecting Check page in the File menu and then selecting Check Accessibility. Any errors or warnings will be displayed, along with the line number of the occurrence and a brief explanation of the problem. You can find out more about these errors and warnings in the Dreamweaver MX reference tool.

and Microsoft ASP.net 2.0 has many useful features that help us design and build Web sites that conform to XHTML and accessibility standards. Using Web standards to build ASP.net 2.0 Web site http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx

In addition, the World Wide Web Consortium provides links to more than 30 accessibility assessment tools. The consortium also provides web-based free validators for HTML and CSS.

Therefore, if you want to improve site friendliness, availability, accessibility, etc., you can see the new standard as an opportunity, not an obstacle. To learn more about new standards and accessibility, you can take a look at the Web Accessibility Initiative (WAI) in the World Wide Web Consortium.