6.2. 为网站设计一个版式

普通网站页面的设计过程

Photoshop设计版式 -- Photoshop切图 -- Dreamweaver排版并且填充内容 -- 使用Dreamweaver或者Notepad++定义CSS样式 

版式一般是在Photoshop上设计的，之后使用Photoshop或者ImageReady切图，再使用Dreamweaver排版，插入图片，完善内容，过程就是这样的。一般的网站都是由网站头部，网站躯干，网站尾部组成的，其中躯干部分还可以再分。我们以梦之都首页为例，梦之都网站的首页就是由网站头部，网站躯干，网站尾部三部分组成的，躯干部分还分为左侧文章列表，右侧文章内容。

首先我们先在Phostoshop上绘制梦之都的首页(由于梦之都网站的排版没有用到任何的图片，所以绘制比较简单)，之后根据绘制出的图形在Dreamweaver中排版。

下面的排版方式是使用了html+css(div+css)的方式(在CSS高级教程中我将详细讲解此内容)

我们先对网站进行内容的填充，使用html(下面的代码和正真的梦之都首页有些出入，例子部分以下面代码为准),使用Dreamweaver打开default.html输入下面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML   1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " xml:lang="zh-CN" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<meta http-equiv="Content-Language" content="zh-CN" /> 
		<title>星锐技术</title>
		<style type="text/css" media="all">@import url(/style/style.css);</style> 
	</head>
	<body>
		<div id="header" >
			<p>星锐技术</p>
			<p>为初学者提供一个在线的自学之地,为设计者提供一个网络编程的中文参考之地</p>
			<p><a href="http://www.xrjs.net/">首页</a> | <a href="http://www.xrjs.net/h-col-119.html/">HTML教程</a></p>
		</div>
		
		<div id="body">
			<div class="center_top">
			<dl>
			<dt>教程 <sub>Tutorials</sub></dt> 
			<dd>
			<p>一步步的教会你网页设计与HTML语言</p>
			<ul>
			<li><a href="/xhtml/what_is_html/">什么是HTML</a></li>
			</ul>
			</dd>
			
			<dt>索引 <sub>References</sub></dt>
			<dd>
			<p>完善的<a href=" /xhtml/tag/">HTML标签</a></p> 
			<ul>
			<li><a href="/xhtml/">HTML标签</a></li> 
			</ul>
			</dd>
			
			<dt>示例 <sub>Examples</sub></dt> 
			<dd>
			<p>HTML教程中的所有示例</p>
			<p>所有代码与示例都是可以编辑的,现在就开始吧.</p>
			<ul>
			<li><a href="/xhtml/exe_all/">HTML代码</a></li>
			</ul>
			</dd>
			</dl>
			</div>
		</div>
		
		<div id="footer">
			<a href="http://www.xaxingrui.com/h-about.html/">关于我们</a> | 
			<a href="http://www.xaxingrui.com/h-signup.html/">网站留言</a> | 
			<p>Copyright &copy; 2004-2007 星锐技术(www.xaxingrui.com) All rights reserved.</p>
			<p>Powered by XHTML CSS PHP MYSQL</p> 
		</div> 
	</body>
</html>

如果大家不太了解上面的代码，可以先学习HTML教程

设计CSS

首先在style文件夹下建立一个style.css的文件。在default.html中增加

<style type="text/css" media="all">@import url(style/style.css);</style> 

CSS文件可以从星锐技术下载 下载地址

如果大家不太了解上面的代码，可以先学习CSS教程。

好!你已经成功的完成了一个正真的符合web标准的和使用html+css(div+css)排版的网页了!

其它的栏目与页面，和上面的实现方式一样，你可以自己尝试一下。