Introduction
Now, I want you to introduce some of the templates that help me start a new web development project in some workflow. In addition to the XHTML templates, I have listed CSS templates and XHTML samples that have helped me build a style guide for a variety of web sites.
A long time ago, the following template, or something called a guide, appeared in the head area.
<title></title>
<body>
</body>
Ah, that was a wonderful time. However, the world is becoming more and more complex, and when the above outline is used as an HTML 101 tutorial, Web developers who follow the Web standard contemporary trend need more code to develop appropriate Web pages.
In fact, for a designer, getting started with HTML tags is one of the most time-consuming tasks. Inspiration? Easy. Multiple comps? No problem. But remembering all the different configuration styles of CSS selectors (selector) is not that easy.
Still, before I got smarter, I used custom CSS and XHTML templates to find out that I had opened the previous project just to answer them over and over again: How do I include an external JavaScript file? How do I write meta tags? What about annotations in CSS files? What's the best way to build a form? My friend, it's time to put an end to inefficient action. Here we go.
File
XHTML Template 1
XHTML Template 2
CSS Template 1
CSS Template 2
XHTML markup Templates
Online style guide Template
Note: This is the translator's modified document, with a small amount of translation instructions added. Download the original, please go to particletree.
XHTML Template 1
The header area of an XHTML page is like a WordPad in a doctor's office--a preparatory text job. The following template focuses on the compatibility and integrity of the header structure. In addition to choosing DOCTYPE, you only need to fill in the blanks.
<!--doctype:choose One and delete this comment-->
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en"
"Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
<title>
</title>
<!--Meta Tags-->
<meta http-equiv= "Content-type" content= "application/xhtml+xml; Charset=utf-8 "/>
<meta name= "Robots" content= "index, follow"/>
<meta name= "description" content= ""/>
<meta name= "keywords" content= ""/>
<meta name= "Author" content= ""/>
<!--Favicon-->
<link rel= "shortcut icon" href= "/>
<!--css:include and embedded versions-->
<link rel= "stylesheet" href= "media=" screen,projection "type=" Text/css "/>"
<link rel= "stylesheet" href= "" media= "print" type= "Text/css"/>
<!--RSS-->
<link rel= "Alternate" href= "title=" RSS feeds type= "Application/rss+xml"/>
<!--JavaScript-->
<script src= "" type= "Text/javascript" ></script>
XHTML Template 2
Template 1 is useful for understanding what information needs to be filled in, but it is not conducive to rapid development and styling because of the attached. CSS and. js files. This means that I have to create more than 2 files to control the behavior (behavior) and style of a page. When I work on deadlines or just one page, managing three files is an unnecessary burden. Adding embedded CSS and JavaScript sections to the head allows me to start right away. To avoid repeating the entire template, I'll just show you the modification section (see the template file for a full section):
<!--css:include and embedded versions-->
<link rel= "stylesheet" href= "media=" screen,projection "type=" Text/css "/>"
<link rel= "stylesheet" href= "" media= "print" type= "Text/css"/>
<style type= "Text/css" >
<!--
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Title:
Author:
Url:
Description:
Created:
Modified:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*-----CSS-----* *
-->
</style>
Modified CSS Section
<!--css:include and embedded versions-->
<link rel= "stylesheet" href= "media=" screen,projection "type=" Text/css "/>"
<link rel= "stylesheet" href= "" media= "print" type= "Text/css"/>
<style type= "Text/css" >
<!--
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Title:
Author:
Url:
Description:
Created:
Modified:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*-----CSS-----* *
-->
</style>
Modified JavaScript section
<!--javascript:include and embedded version-->
<script src= "" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
<!--
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
//
Title:
Author:
Url:
Description:
Created:
Modified:
// // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Javascript
Window.onload = function () {}
-->
</script>
These embedded parts at the same time let me not forget the correct writing. js and. css files. There's no excuse now, because it's really easy. The JavaScript section contains a window.onload null function for sometimes running a page to load a script. When everything is working well, I just need to copy CSS and JavaScript to an external file if I need proper file management.
CSS Template 1
If I knew that the working site would have large chunks of CSS to hit, I'd like to use the following template, which is sort of like checking the list before takeoff, to make sure that I can take care of all the basic selectors. If you want to use a different style for the same set of selectors (such as unordered lists) in different areas of a page, I just copy and paste and add the appropriate ID and class. If it doesn't work out, I just need to erase it. The following are examples of CSS template 1:
/*-----IDS-----*/
#container {
}
#primaryContent {
}
#secondaryContent {
}
#navigation {
}
#footer {
}
/*-----CLASSES-----*/
. hide{
}
. show{
}
/*-----Headings-----*/
h1{
}
h2{
}
h3{
{
h4{
}
/*-----LISTS-----/li{
}
Li p{
}
ol{
}
ul{
}
ol li{
}
ul li{
}
/*-----IMAGES-----*/
img{
}
img a{
}
img a:hover{
}
/*----- LINKS-----*/
a{
}
a:hover{
}
a:visited, a:active, a:focus{
}
a:visited{
}
a:active{
}
a:focus{
}
/*-----FORMS-----*/
form{
}
fieldset{
}
legend{
}
label{
}
input{
}
textarea{
}
Input, textarea{
}
select{
}
optgroup{
}
option{
}
/*-----TABLES-----*/
table{
}
caption{
thead{
}
tbody{
}
tfoot{
tr{
}
tr. alt{
}
th{
}
td{
}
CSS Template 2
Do you know what's out of reach? Remember and fill in the proper properties of all CSS selectors (property, translation properties, attributes). Pay attention to most of my projects and I use the same properties over and over again for selectors. So I created another template based on CSS Template 1, which adds the CSS features that are often used for all CSS selectors. The following are examples of CSS template 2:
/*-----CSS-----* *
*{
margin:;
padding:;
Font-family:;
Font-size:;
}
body{
margin:;
padding:;
Background:;
}
/*-----IDS-----* *
#container {
Width:;
margin:;
padding:;
Background:;
Text-align:;
}
#primaryContent {
Position:;
float:;
Width:;
margin:;
padding:;
Background:;
Text-align:;
}
* *-----CLASSES-----* *
. hide{
Display:none;
}. show{
Display:block;
}
* *-----Paragraphs-----* *
p{
Font:;
Color:;
Font-size:;
Font-family:;
Font-style:;
Font-weight:;
Font-variant:;
Text-align:;
Text-indent:;
Text-decoration:;
Text-shadow:;
Text-transform:;
Letter-spacing:;
Word-spacing:;
}
* *-----LISTS-----* *
li{
Listy-style:;
List-style-type:;
List-style-image:;
List-style-position:;
float:;
margin:;
padding:;
}
/*-----LINKS-----* *
a{
Font:;
Color:;
Text-decoration:;
Border-bottom:;
}
a:hover{
Color:;
Background-color:;
Border-bottom:;
}
a:visited, A:active, a:focus{
Color:;
Background-color:;
Border-bottom:;
}
Good, you've got something. It should be noted that I also joined the Universal selector (shorthand selectors), such as font and List-style, to replace the corresponding individually character. This can have more choices in the design and development phases.
HTML tag Template
But without XHTML markup to demonstrate, what's the benefit of these CSS selectors and properties? XHTML templates are the Lorem ipsum of my web design. The following is an example from this template:
<div id= "Container" >
<p>title: <em>title of this document</em><br/>
Description: <em>a Description of this document so explains how this guide should to be used.</em></p>
<p>author: <em>the author</em><br/>
URL: <em>http://url.to.reference.com</em><br/></p>
<p>created: <em>month DD, yyyy</em><br/>
Modified: <em>month DD, yyyy</em><br/></p>
<div id= "Navigation" >
<ul>
<li>unordered List-first item.</li>
<li>another Item with <a href= "" title= "Test Link" >a link.</a></li>
<li><a href= "" title= "Test Link" >another Item is linked</a></li>
<li>last item.</li>
</ul>
<ol>
<li>ordered List-first item.</li>
<li>another Item with <a href= "" title= "Test Link" >a link.</a></li>
<li><a href= "" title= "Test Link" >another Item is linked.</a></li>
<li>last item.</li>
</ol>
</div><!--Navigation-->
<div id= "Primarycontent" >
<p>first paragraph. In <a href= "" "title=" "Test Link" >typography</a>, and a paragraph is a block of text. Paragraphs are the medium-size unit of <a href= "" title= "Test Link" >human-language text</a>. A group of sentences developing a single idea from a topic sentence. Some words in sentences need to be <b>bolded</b> <i>italicized</i> </strong> or <em>emphasized</em>.</p> <p>another paragraph. In typography, a paragraph be a block of text. Paragraphs are the medium-size unit of human-language text. Group A sentences developing a single idea from a topic sentence.</p>
<ul>
<li>unordered List-first item.</li>
<li>another Item with <a href= "" title= "Test Link" >a link.</a></li>
<li><a href= "" title= "" >another item that is linked</a></li> <li>last
</ul>
<ol>
<li>ordered List-first item.</li>
<li>another Item with <a href= "" title= "Test Link" >a link.</a></li>
<li><a href= "" title= "Test Link" >another Item is linked.</a></li>
<li>last item.</li>
</ol>
Note that the template lacks an example of an image element. Since these elements are external files, I prefer to include them one at a, depending on the situation.
Online style guide Template
If you are like me and have a print design background, you will soon see the value of this template. The style guide is a great convenience for a design and development team to communicate and articulate design points.
The template is basically a page of all the template collections. This online style guide template greatly reduces the time to create an external tag rule set. If you use Firefox and install Web Developer Toolbar, I highly recommend that you edit CSS using edit CSS to see how the page changes. Edit finished, save the modified CSS to the external file, and update the corresponding HTML tags. This is like an advanced CSS editor, or it's free.
The template also allows me to safely test the experimental CSS design to see how it affects other elements and properties of the same page.
Summarize
One of the biggest benefits of creating these templates is that it teaches me a lot of the details hidden behind XHTML and CSS. I have studied the elements, selectors, and properties that I have never considered using, and thus have created these templates. So these templates not only let me design faster, but also let me design better.
Obviously, each of the different designers and developers have their own different ways of working. Using XHTML and CSS templates may not be appropriate for you to start a Web project. All I know is that this is my way of working, and it has helped me enormously. In addition, I think that something can be filled in more efficient than just opening a blank document. Power Energy is not small.
If you like, don't worry, use these templates and introduce your workflow.
Original: Quick Start Your design with XHTML Templates, Kevin Hale,particletree
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
