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 © 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)排版的网页了!
其它的栏目与页面,和上面的实现方式一样,你可以自己尝试一下。