(网页设计及说明1.docVIP

存档资料 成绩：　 *******大学理工学院 课 程 设 计 报 告 书 所属课程名称 网 页 设 计 题 目 　　　网 站 的 模 版 分 院 　　 　　 专 业 班 级 学　　 号 　 　 学 生 姓 名 指导教师 2012年 6 月 22 日 目录 目录 建立站点 结构分析 搭建框架 （1）div框架代码 （2）各框架的属性截图 切割效果图 布局页面 （1）头部和导航 （2）侧边栏 （3）主体部分 底部和细节调整 参考文献  第1章 建立站点 要做一个网站，首先需要建立一个站点。因为网站不同于其它文件， 站点建立好后，先建立一个images和文件夹，分别用来存放图片和文件。直接在windows的资源管理器下建立或者在dw里建立都是可以的；在dw建立需要在文件面板列表的根目录上点击右键，选择新建文件夹后更改名字即可。  在浏览器中打开效果图预览从图中可以看出整个页面分为头部区域、导航区域、主体部分和底部，其中主体部分又分为左右两列，整个页面居中显示，看明白了这点，下框架就好搭建了。整体框架结果图如下： 搭建框架 css样式表就最好写在单独文件里了，不要再写在文件内部了，这样可以利用代码的重用性，减少很多劳动强度。在DW文件菜单选择新建，然后在打开的窗口页面类型中选择css，创建后保存在css文件夹中layout.css div框架代码!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title主页/title /head body /body /html div id=header此处显示 id header 的内容/div div id=nav此处显示 id nav 的内容/div div id=maincontent div id=main此处显示 id main 的内容/div div id=side此处显示 id side 的内容/div /div div id=footer此处显示 id footer 的内容/div 从上边的效果图分析得知，整个网页是居中浏览器显示的，按照这样的写法需要把以上的header、nav、maincontent、footer都设置宽度并居中，这样做起来很麻烦，所以再在这些标签外增加一下父标签，设置这个父标签宽度并居中后，是不是所有的标签都居中了呢。增加后的代码如下： div id=container div id=header此处显示 id header 的内容/div div id=nav此处显示 id nav 的内容/div div id=maincontent div id=main此处显示 id main 的内容/div div id=side此处显示 id side 的内容/div /div div id=footer此处显示 id footer 的内容/div /div （2） 各框架的属性截图 第4章 切割效果图 基本框架搭建完毕后，下一步就是要分析每一块该怎么切图了。切图方法有多种，可以使用ps或fireworks自带的切片工具，也可以用QQ的截屏或者创建新文件，把需要的部分复制过来保存都可以，关键看个人  布局页面 div id=headerdiv id=logoimg src=images/logo.gif width=181 height=45 //divdiv id=search #logo { float:left; margin-top:18px;}#search { float:right; height:24px; margin-top:30px; color:#444;}.inp_srh { width:140px; hei