《Html+Css网站设计》课程实训
说 明 书
系 （部）： 信息工程系 班 级： 姓 名：
指导教师： 方继才 王军 张婷婷
2011 ~ 2012学年第一学期
1
摘要
经本次的实验我们主要的是学习table布局，及使用div布局，这两种方法各有各的好处，在以前没有学习div布局的时候，可是学习网页，首先使用的就是使用table布局，感觉很好用，按照老师教的能完成一些简的网页，感觉很好用，按照这样的方式我们慢慢的就开始组合成网页，能完成一个比较简单的网页，感觉很好玩，一个大型的网页我们能把他分割很多的小块，并按照我们的思路建立网页设计的整体框架。
在学习了div布局的时候，我们可是使用的时候我们感觉入手非常的难，有的时候根本不知道自己在做什么，在以后的学习中，我们对div布局有了深入的了解我们，我们感觉div布局比table布局更灵活，在table布局中遇到的弊端基本上能在div中弥补，并且div不受表格或框架，或自己构思思路的影响。很实用。并且在制作网页的时候我们做的效果还是比table好看的很多，可以设置很多的东西，他有自己专门的一个文件放置自己格式设置。减少代码量，看起来很合理。
在本次的实用中我们中我们主要的就是完成10个网页，在主主页的布局中我们主页实用的是div布局，使界面看起来很合理，在其他附页当中我们有两个网页实用的是table布局，其他的是使用混合布局方式，在这两种方式混合使用中，能从中了解更多的知识，并且在设计的时候混合使用比单方面使用更好用。我们在这次的使用中不仅需要学会两种布局方式，而且要学会在网页之间怎么的建立超链接，使用插入一些图片，设置图片的格式，及使用不同格式的文件。
2
目录
第一章：引言 ................................................................................................................................... 4
1.1设计目的 ............................................................................................................................. 4 1.2开发工具 ............................................................................................................................. 4 1.3 Dreamweaver介绍 ............................................................................................................. 4 第二章：需求分析 ........................................................................................................................... 6
2.1需求描述 ............................................................................................................................. 6 2.2功能描述 ............................................................................................................................. 6 第三章：总体设计 ........................................................................................................................... 7
3.1设计概念 ............................................................................................................................. 7 3.2网页界面布局特点 ............................................................................................................. 7 第四章：详细设计 ........................................................................................................................... 9
4.1站点设计 ............................................................................................................................. 9 4.2主界面设计 ......................................................................................................................... 9 4.3附页界面设计 ................................................................................................................... 10 4.4信息工程系 ....................................................................................................................... 11 4.5信息工程系简介 ............................................................................................................... 12 4.6校园文化 ........................................................................................................................... 13 4.7校园文化 ........................................................................................................................... 14 第五章:总结 ................................................................................................................................... 15 参考资料：..................................................................................................................................... 15
3
第一章：引言
1.1设计目的
1. 通过综合实训进一步巩固,深化和加强学生的理论知识于专业技能。 (1) 掌握规划网站的内容结构,目录结构,链接结构的方法。
(2) 熟练掌握网页制作软件Dreamweaver8和基本操作和使用技能。 (3) 掌握页面的整体控制和头部内容设置的方法。 (4) 熟练掌握网页页面布局的各种方法。
(5) 熟练掌握在网页中输入,设置标题和正文文字的方法。
(6) 熟练掌握在网页中插入图像,Flash动画和背景音乐的方法。 (7) 熟练建立各种形式的超级链接的方法。 (8) 掌握表单网页制作方法。 (9) 掌握网页特效制作方法。 (10) 掌握网站测试的方法。
2. 训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。
3. 培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。
4. 培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。
1.2开发工具
Dreamweaver8 、Fireworks、 Photoshop 、Flash、Access、IIS
1.3 Dreamweaver介绍
个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP 功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。
Dreamweaver MX 2004 的十大新特性:
4
1.动态跨浏览器验证:自动检测标签和CSS规则来适应所有主流浏览器! 2.更强大的CSS支持!
3.内建的图形编辑引擎:修剪,改变大小,尺寸,旋转角度,调节明暗度都不需要离开Dreamweaver环境,因为它本身集成了FW的基本图形编辑技术.(这一点有模仿FrontPage的嫌疑,但这个功能确实很实用)!
4.安全FTP:完全加密传输保证文件和帐号信息的安全! 5.增强对当今技术的支持:支持当今主流的开放环
境:ColdFusion,J2EE,PHP,.NET,和其他主流的服务器技术.Dreamweaver现在加入了XML命名空间支持,ASP.NET表单控件对象,新的参考书内容和新的PHP服务器端行为!
6.无缝整合外部文件和代码:直接将Word和Excel文档复制和粘贴到Dreamweaver中,会保留字体,颜色,CSS样式表信息.使用,使用系统支持的编码保存任何字体,包括双字节字符集.
7.紧密整合MM的其他工具:加强了和MM其他几款产品的协同工作能力.例如:你可以通过DW直接设置Flash组件的参数.
8.基本支持改良:插入条,表格工具都有改进!
9.增强代码编写工具:编辑代码更省时,例如右键编写代码工具,增强的查找和替换,高效的属性面板.
10.改进的设计开放环境:一个改良的用户界面,更高的实用性,非常亲切和有逻辑,让你快速找到你想要的东西,一个新的开始屏幕让你快速访问最近的文件和教程资源.
5
第二章：需求分析
2.1需求描述
通过本次实训，让同学们对本学期的《网页设计与制作》这门课程有一个系统的认识，加强和巩固已有的知识，训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效。能够运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题，同时也能够体现自己的工作作风，认真学习的态度。主要是希望同学门能够熟练的掌握利用我们所学的知识来制作一个主题鲜明的网站。
2.2功能描述
我们在实训的时候我们主要使用用到的是div及table布局方式，我们利用者两种方式我们建立一个主页，在主页当中我们建立一些关键的连接，在点击的时候我们能调用我们所需要的网页，使我们所做的网页连接起来，形成一个完整的网页，在这次的实训当中我们主要做的网页课题是校园文化建设，在力个网站、也当中我实现不同网页之间的调用，在进行超链接的时候我们主要利用的是a：link标记和a:hover标记，设置连接的一些特点，在插入flash图片的时候能显示出来。用不同的网页展示我们所要表现的主题，使浏览者能更好的了解我们的校园。
6
第三章：总体设计
3.1设计概念
在学习网页制作的时候我们主要的是学会使用table表格，div，css布局方式，这两中方式是制作网页的时候经常用到的两种布局方式，及一些其他网页制作工具如：Dreamweaver 、Fireworks、 Photoshop 、Flash、Access、IIS等一些网页制作的常用的软件，在网页建成之后我们能熟练的建立进行超链接。
3.2网页界面布局特点
（1）定义CSS样式 （2）创建样式表 （3）创建类
用类选择符能够把多个的元素分类定义不同的样式。类名可以是包含任何字母和数字的组合，所有类样式均以句点（.）开头。 （4）创建标签
采用HTML中标准的标记名称作为选择符（样式名）。作为原HTML标准标记（属性）的补充。 （5）创建CSS链接样式
定义除选择器为类和标签之外的其他CSS样式，有三种形式：派生选择器ID选择器伪类 （6）设置样式表
通过设置样式表样式定义CSS规则的属性，可以对网页中的布局元素，如表格、字体、颜色、背景、链接效果和其他图文效果实现精确的控制。首先，创建新规则，然后设置下列任意属性，如图10-18所示，样式表的设置总共分为八大类:类型、背景、区块、方框、边框、列表、定位和扩展。 （7）定义 CSS 类型属性
使用“CSS 规则定义”对话框中的“类型”类别可以定义 CSS 样式的基本字体和类型设置。
（8）定义 CSS 样式背景属性
使用“CSS 规则定义”对话框的“背景”类别可以定义 CSS 样式的背景设置。可以对网页中的任何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。还可以
7
设置背景图像的位置。 （9）定义 CSS 样式区块属性
使用“CSS 规则定义”对话框的“区块”类别可以定义标签和属性的间距和对齐设置。
（10）定义 CSS 样式方框属性
使用“CSS 规则定义”对话框的“方框”类别可以为用于控制元素在页面上的放置方式的标签和属性定义设置。
可以在应用填充和边距设置时将设置应用于元素的各个边，也可以使用“全部相同”设置将相同的设置应用于元素的所有边。 （11）定义 CSS 样式列表属性
“CSS 规则定义”对话框的“列表”类别为列表标签定义列表设置（如项目符号大小和类型）。
（12）定义 CSS 样式定位属性
--
8
第四章：详细设计
4.1站点设计
首页 信息系 系部概况 风采首页 附件 校园风采 校园风采
4.2主界面设计
本网页主要的是使用了Div布局方式，在网页的首页我们采用的是a：link设计的超链接，并显示字体的颜色，使用a:hover设计样式设计当鼠标移动到上
9
面的时候，会显示另一种效果，用这种方式做，显得界面设计很美观，在显示的时候显示不同的效果。里面建立了很多的超连接和附页建立不同的关系，可以调用其他的网页或网站。
4.3附页界面设计
次附页页面主要显示的是校园文化风景图，在网页的界面中我们主要是利用图片添加的效果，在这个网页中我们使用了table网格和Divi格式 布局，在图片显示的栏中我们主要用到的就是table格式插入图片，在行为动态和快速连接中我用到的是Divi格式布局，整体大框也是使用的div格式布局，整体效果还是很好的，在图片中我们也使用了超链接，设置显示的字体颜色，及当鼠标移动的时候显示其他的颜色此时的图片画面有一种动态的效果，同时我还使用了JavaScript脚本语言，鼠标显示的时候会出现机电欢迎你的字体移动效果界面的设计格式还算很好。
10
4.4信息工程系
本网页主要讲的是信息工程系系部网站，总体的布局还算是好的，在显示的方面显得有一些单调吧！次网页中我也是运用的是div格式布局和table布局格式，两种格式混用，能减少我们的工作量布局的时候我们做起来也很合理，可以随时的改变我们设计的界面效果，菜单栏我采用的是滚动的方式显示，重复的出现，提醒的文字，中的来说建立的还好。
11
4.5信息工程系简介
此网页主要显示的是信息工程系系部的概括，主要讲的是简介情况，这个网页我们主要用的table格式布局，这网页在使用table是显得比较麻烦，虽然此网页的界面布局不是很好，界面的内容还是不是很多，但是基本上完成了table格式设计的一些要求。
12
4.6校园文化
13
4.7校园文化
14
第五章:总结
经过一周紧张的实训，让我感受到很多，因为这周任务很重，所以这周都很紧张，但我体会到网页做出来的快乐和兴奋，但自己把一个一个问题解决了，有一种莫名的感觉就一直想做下去。
在这次实训中我明白了很多，想要做一下好网站，素材和技能都十分重要，好的素材需要多方面查找资料的，好的技能需要不断的实践。有些东西不是一来就会的，是要靠每天练习才能得心应手，松懈了就淡忘了，以前建一个站点那么简单，经过一段时间没做网页了，一下子要建一个站点有点忘却了。以前上课听讲都听懂了，也会做简单的，现在才发现原来不是那么简单，上课之后一定要多练才有效果，听懂了没多大效果，实践才是最真的。
在学习了div布局的时候，我们可是使用的时候我们感觉入手非常的难，有的时候根本不知道自己在做什么，在以后的学习中，我们对div布局有了深入的了解我们，我们感觉div布局比table布局更灵活，在table布局中遇到的弊端基本上能在div中弥补，并且div不受表格或框架，或自己构思思路的影响。很实用。并且在制作网页的时候我们做的效果还是比table好看的很多，可以设置很多的东西，他有自己专门的一个文件放置自己格式设置。减少代码量，看起来很合理。
在这次实训中，我也学到了很多。在我独立完成网站设计的全过程中，我设计中散乱的网页链接成框架体系，使平时学到的知识有很高的提高，在制作过程中，我搜集了大量的素材和网页设计的技术技巧方面的资料，增加知识面，给我在以后的设计过程中懂得了很多，为制作网页打下了基础。
参考资料：
《HTML+CSS网站页面设计》 http://www.baidu.com/ 《JavaScript脚本语言》
2011-12-29
15
因篇幅问题不能全部显示，请点此查看更多更全内容