XHTML+CSS标准网站制作

昨天，拼了，不去考四级了，为了研究XHTM+CSS标准网站的制作，小改了一下给老师做的课堂的一个小部分，代码如下，嘿嘿，很辛苦，不过回过头来一看，其实也很简单，WEB标准确实减少了冗繁的代码，相对于以往的普通网站，XHTM+CSS过渡型的标准制作，将表现，框架和行为相分离，确实很明了，建议观看：[url]http://www.w3cn.org[/url]，很不错的一个网站哦。以下代码均已通过W3C测试，符合标准。
course.html代码：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;
&lt;meta http-equiv="Content-Language" content="gb2312" /&gt;
&lt;meta name="author" content="彭飞,tcrazyalways(at)mail.csdn.net" /&gt;
&lt;meta name="copyright" content="徐明,彭飞" /&gt;
&lt;meta name="description" content="徐明老师电视摄像网络课堂之精彩课堂篇" /&gt;
&lt;meta name="keywords" content="电视画面基础,电视摄像造型元素,固定画面,运动摄像技巧,光学镜头及其应用,电视画面调度,电视记者素质" /&gt;
&lt;link rel="stylesheet" href="sty.css" type="text/css" /&gt;
&lt;link rel="stylesheet" href="style.css" type="text/css" /&gt;
&lt;title&gt;电视摄像网络课程——精彩课堂&lt;/title&gt;
&lt;style&gt;
A:link { text-decoration:none; font-size:9pt; color:#999999}
A:visited { text-decoration:none; font-size:9pt; color:#999999}
A:hover { text-decoration:none; font-size:9pt; color:#499300}
A:active { text-decoration:none; font-size:9pt; Color:#999999}

#xmkt {
MARGIN: 0px;
PADDING: 0px;
FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }
/*定义上栏*/
#up {
MARGIN: 0px;
WIDTH: 1024px;
MARGIN: 0px;
PADDING: 0px;
}
/*定义左栏*/
#left {
MARGIN: 0px;
WIDTH: 760px;
MARGIN: 0px;
PADDING: 0px;
}
/*定义右上栏*/
#rightup {
POSITION: absolute;
text-align: center;
TOP: 90px;
LEFT: 760px;
height: 70px;
WIDTH: 264px;
MARGIN: 0px;
PADDING: 0px;
font-size: 12pt;
font-weight: bold;
color: #999999;
}
/*定义右下栏*/
#right {
POSITION: absolute;
text-align : center;
TOP: 130px;
LEFT: 760px;
HEIGHT: 30px;
WIDTH: 264px;
MARGIN: 0px;
PADDING: 0px;
}
/*定义下左栏*/
#dleft {
MARGIN: 0px;
WIDTH: 21px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(images/tiao1.gif) no-repeat top;
}
/*定义下中栏*/
#dmid {
POSITION: absolute;
TOP: 400px;
LEFT: 21px;
MARGIN: 0px;
WIDTH: 1px;
height: 250px;
PADDING: 0px;
BACKGROUND: url(images/dot_line01.gif) repeat-y;
}
/*定义下右栏*/
#dright {
POSITION: absolute;
Top: 440px;
LEFT: 22px;
WIDTH: 738px;
height: 250px;
PADDING: 0px;
BACKGROUND: url(images/tu.jpg) no-repeat top 30px;
}
#dright ul {
POSITION: absolute;
Top: 60px;
LEFT: 22px;
MARGIN: 0px;
PADDING: 0px;
}
#dright li {BACKGROUND: url(images/new.gif) no-repeat left 0px;}
#dright li a{left: 10px;}
/*定义底栏*/
#bot {
POSITION: absolute;
Top: 660px;
WIDTH: 1024px;
HEIGHT: 30px;
BACKGROUND: url(images/bg.jpg) no-repeat;
}
#rzs {
POSITION: absolute;
Top: 690px;
HEIGHT: 31px;
WIDTH: 88px
}
#rz {
POSITION: absolute;
TOP:690px;
LEFT: 90px;
HEIGHT: 31px;
WIDTH: 88px
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body id="xmkt"&gt;
&lt;!--logo条--&gt;
&lt;div id="up"&gt;
  &lt;img src="images/logo.jpg" alt="logo条" width="1024" height="30" border="0" usemap="#Map" /&gt;
  &lt;map name="Map" id="Map"&gt;
    &lt;area shape="rect" coords="840, 7, 873, 25" href="../index.htm" alt="索引" /&gt;
    &lt;area shape="rect" coords="892, 6, 943, 26" href="../index.htm" alt="索引" /&gt;
  &lt;/map&gt;
&lt;/div&gt;
&lt;!--Flash菜单栏--&gt;
&lt;div id="left"&gt;
  &lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="760" height="400"&gt;
    &lt;param name="movie" value="images/test.swf" /&gt;
    &lt;param name="quality" value="high" /&gt;
  &lt;/object&gt;
&lt;/div&gt;
&lt;!--站内导航--&gt;
&lt;div id="rightup"&gt;
站内导航
&lt;/div&gt;
&lt;div id="right"&gt;
&lt;form name="form1" method="post" action=""&gt;
  &lt;select name="select" size="1" &gt;
    &lt;option style="color: #C0C0C0;"&gt;课堂介绍(Intro)&lt;/option&gt;
    &lt;option style="color: #C0C0C0;"&gt;视频欣赏(Video)&lt;/option&gt;
    &lt;option style="color: #C0C0C0;"&gt;电子文档(Document)&lt;/option&gt;
    &lt;option style="color: #C0C0C0;"&gt;疑难问答(FAQ)&lt;/option&gt;
    &lt;option style="color: #C0C0C0;"&gt;影视社区(Forum)&lt;/option&gt;
  &lt;/select&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;!--知识要点--&gt;
&lt;div id="dleft"&gt;
&lt;/div&gt;
&lt;div id="dmid"&gt;
&lt;/div&gt;
&lt;div id="dright"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;(2004.11.27)网站正在建设中&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;(2004.11.27)网站正在建设中&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;(2004.11.27)网站正在建设中&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;(2004.11.27)网站正在建设中&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;div id="bot"&gt;
&lt;/div&gt;
&lt;div id="rzs"&gt;
  &lt;a href="http://validator.w3.org/check?uri=referer"&gt;
    &lt;img style="border:0;width:88px;height:31px"
      src="http://www.w3.org/Icons/valid-xhtml10"
         alt="Valid XHTML 1.0!" /&gt;
  &lt;/a&gt;
&lt;/div&gt;
&lt;div id="rz"&gt;
 &lt;a href="http://jigsaw.w3.org/css-validator/"&gt;
  &lt;img style="border:0;width:88px;height:31px"
       src="http://jigsaw.w3.org/css-validator/images/vcss"
       alt="Valid CSS!" /&gt;
 &lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>电视摄像网络课程——精彩课堂</title>

<style>

A:link { text-decoration:none; font-size:9pt; color:#999999}

A:visited { text-decoration:none; font-size:9pt; color:#999999}

A:hover { text-decoration:none; font-size:9pt; color:#499300}

A:active { text-decoration:none; font-size:9pt; Color:#999999}

#xmkt {

MARGIN: 0px;

PADDING: 0px;

FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;

FONT-SIZE:12px;

LINE-HEIGHT:150%; }

/*定义上栏*/

#up {

MARGIN: 0px;

WIDTH: 1024px;

MARGIN: 0px;

PADDING: 0px;

}

/*定义左栏*/

#left {

MARGIN: 0px;

WIDTH: 760px;

MARGIN: 0px;

PADDING: 0px;

}

/*定义右上栏*/

#rightup {

POSITION: absolute;

text-align: center;

TOP: 90px;

LEFT: 760px;

height: 70px;

WIDTH: 264px;

MARGIN: 0px;

PADDING: 0px;

font-size: 12pt;

font-weight: bold;

color: #999999;

}

/*定义右下栏*/

#right {

POSITION: absolute;

text-align : center;

TOP: 130px;

LEFT: 760px;

HEIGHT: 30px;

WIDTH: 264px;

MARGIN: 0px;

PADDING: 0px;

}

/*定义下左栏*/

#dleft {

MARGIN: 0px;

WIDTH: 21px;

MARGIN: 0px;

PADDING: 0px;

BACKGROUND: url(images/tiao1.gif) no-repeat top;

}

/*定义下中栏*/

#dmid {

POSITION: absolute;

TOP: 400px;

LEFT: 21px;

MARGIN: 0px;

WIDTH: 1px;

height: 250px;

PADDING: 0px;

BACKGROUND: url(images/dot_line01.gif) repeat-y;

}

/*定义下右栏*/

#dright {

POSITION: absolute;

Top: 440px;

LEFT: 22px;

WIDTH: 738px;

height: 250px;

PADDING: 0px;

BACKGROUND: url(images/tu.jpg) no-repeat top 30px;

}

#dright ul {

POSITION: absolute;

Top: 60px;

LEFT: 22px;

MARGIN: 0px;

PADDING: 0px;

}

#dright li {BACKGROUND: url(images/new.gif) no-repeat left 0px;}

#dright li a{left: 10px;}

/*定义底栏*/

#bot {

POSITION: absolute;

Top: 660px;

WIDTH: 1024px;

HEIGHT: 30px;

BACKGROUND: url(images/bg.jpg) no-repeat;

}

#rzs {

POSITION: absolute;

Top: 690px;

HEIGHT: 31px;

WIDTH: 88px

}

#rz {

POSITION: absolute;

TOP:690px;

LEFT: 90px;

HEIGHT: 31px;

WIDTH: 88px

}

</style>

</head>

</map>

</div>

</object>

</div>

站内导航

</div>

<option style="color: #C0C0C0;">课堂介绍(Intro)</option>

<option style="color: #C0C0C0;">视频欣赏(Video)</option>

<option style="color: #C0C0C0;">电子文档(Document)</option>

<option style="color: #C0C0C0;">影视社区(Forum)</option>

</select>

</form>

</div>

</div>

</div>

<ul>

<li><a href="#">(2004.11.27)网站正在建设中</a></li>

</ul>

</div>

</div>

<img style="border:0;width:88px;height:31px"

src="http://www.w3.org/Icons/valid-xhtml10"

alt="Valid XHTML 1.0!" />

</a>

</div>

<img style="border:0;width:88px;height:31px"

src="http://jigsaw.w3.org/css-validator/images/vcss"

alt="Valid CSS!" />

</a>

</div>

</body>

</html>

2025 年 7 月
一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

发表回复 取消回复

相关文章

发表回复取消回复