4.2. 为网站设计一个版式

普通网站页面的设计过程

Photoshop设计版式 -- Photoshop切图 -- Dreamweaver排版并且填充内容 -- 使用Dreamweaver或者Editplus定义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" >
			<div id="logo">梦之都</div>
			<div id="mainaim">为初学者提供一个在线的自学之地,为设计者提供一个网络编程的中文参考之地</div> 
			<div id="navmain"></div>
			<div id="navsub"><a href=" http://www.dreamdu.com/" accesskey="d" tabindex="1">首页</a> | 
			<a href=" http://www.dreamdu.com/xhtml/ " accesskey="h" tabindex="3">HTML教程,XHTML教程</a> | 
			<a href=" http://www.dreamdu.com/css/ " accesskey="c" tabindex="4">CSS教程</a> | </div>
		</div>    
			
		<div id="mainbody">
			<div id="leftlist"> 
				<ul>
					<li class="top">每日精选教程</li>
				</ul>
				<div class="gray2"></div>
				<ul>
					<li><a href="http://www.dreamdu.com/xhtml/attribute_collections_imagemap/">Image Map属性集合  Image Map Attribute Collection</a></li>
					<li><a  href="http://www.dreamdu.com/xhtml/ex_tags/">有趣的试验</a></li>
					<li><a href="http://www.dreamdu.com/xhtml/tag_em/">HTML em 标签</a></li>
				</ul>
				<div class="gray2"></div>  
			</div>
			<div id="maincontent">
				<div class="center_top">
					<dl>
						<dt>教程 <sub>Tutorials</sub></dt> 
						<dd>
						<p>一步步的教会你网页设计与<a href="http://www.dreamdu.com/xhtml/  ">HTML语言</a>,<a href="  http://www.dreamdu.com/css/ ">CSS语言</a>,每天花两个小时的时间,一个星期你就可以学会网页制作啦;),从下面的链接开始.</p>
							<ul>
								<li><a href="  http://www.dreamdu.com/xhtml/novice/ ">HTML入门例子</a></li>
								<li><a href="  http://www.dreamdu.com/css/novice/">CSS入门例子</a></li>
								<li><a href="  http://www.dreamdu.com/xhtml/what_is_html/">什么是HTML</a></li>
								<li><a href="  http://www.dreamdu.com/css/what_is_css/  ">什么是CSS</a></li>
							</ul>
						</dd>
						  
						<dt>索引 <sub>References</sub></dt>
						<dd>
						<p>完善的<a href=" http://www.dreamdu.com/xhtml/tag/">HTML标签</a>与<a href="  http://www.dreamdu.com/xhtml/attribute/">HTML属性</a>,方便您的查找与学习.</p> 
							<ul>
								<li><a href="http://www.dreamdu.com/xhtml/  ">HTML标签 按字母顺序索引</a></li>
								<li><a href=" http://www.dreamdu.com/xhtml/function_xhtml11/">XHTML1.1 标签按功能索引</a></li> 
								<li><a href="  http://www.dreamdu.com/xhtml/function_xhtml2/">XHTML2.0 标签按功能索引</a></li>
								<li><a href="  http://www.dreamdu.com/xhtml/attribute_collections/  ">XHTML1.1 属性集合 Attribute Collections</a></li>        
								<li><a href="  http://www.dreamdu.com/xhtml/attribute_xhtml2collections/  ">XHTML2.0 属性集合 Attribute Collections</a></li>        
							</ul>
						</dd>
						  
						<dt>示例 <sub>Examples</sub></dt> 
						<dd>
						<p><a href="http://www.dreamdu.com/xhtml/">HTML教程</a>与<a href="  http://www.dreamdu.com/css/">CSS教程</a>中的所有示例,紧扣教程中的内容,立足初学者,使你轻松搞定每个知识点.</p>
						<p>所有代码与示例都是可以编辑的,现在就开始吧.</p>
							<ul>
								<li><a href=" http://www.dreamdu.com/xhtml/exe_all/">HTML代码</a> -- 可以编辑</li>
								<li><a href="  http://www.dreamdu.com/css/exe_all/">CSS代码</a> -- 可以编辑</li>
							</ul>
						</dd>
					</dl>
				</div>
			</div> 
		</div>
			
		<div id="footer">
			<a href="  http://www.dreamdu.com/about/aboutus/ ">关于我们</a> | 
			<a href=" http://www.dreamdu.com/about/law/"">版权声明</a> | 
			<a href="  http://www.dreamdu.com/about/helpme/ "">使用帮助</a> | 
			<a href=" http://www.dreamdu.com/about/contact/"">联系方式</a> | 
			<a href="  http://www.dreamdu.com/about/friends/  "">酷站推荐</a>
			<p>Copyright &copy; 2004-2007 梦之都(www.dreamdu.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)排版的网页了!

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

From "为网站设计一个版式 - 建设网站的过程 - 网站建设与制作教程"

向上 / 上一页 / 下一页 / 教程列表