网页实训报告.doc

衢州学院

网页设计实训报告

课 程 名 称 　　　网页设计与网站开发 　　　　

网 站 名 称 圣诞快乐

班 级 12计算机2班

姓 名 金家辉

指 导 教 师 　　　　　　　　蒋晓丹　　

完 成 时 间 2014年1月15日

目 录
1实训目的 - 1 -
2实训意义 - 1 -
3 网站的设计与制作 - 1 -
3.1 网站的运行环境 - 1 -
3.2 网站的概要设计（网站主题，网站规划，网站结构，网站风格、特色、网站结构图） - 1 -
3.3 网站的详细设计 - 2 -
3.4 网站的改进方法或升级方案 - 8 -
4个人总结 - 9 -

1实训目的
1．通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。
（1）掌握规划网站的内容结构、目录结构、链接结构的方法。
（2）熟练掌握网页制作软件Dreamweaver的基本操作和使用技能。
（3）掌握页面的整体控制和头部内容设置的方法。
（4）熟练掌握网页页面布局的各种方法。
（5）熟练掌握在网页中输入、设置标题和正文文字的方法。
（6）熟练掌握在网页中插入图像、flash动画、背景音乐的方法。
（7）掌握建立各种形式超级链接的方法。
（8）掌握表单网页制作方法。
（9）掌握网页特效的制作方法。
（10）掌握网站测试的方法。
2．训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画和网页特效等。
3．培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。
4．培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心。
5．训练和培养团队协作精神和共同开发网站的综合能力。

2实训意义
《网页设计》实训是教学过程中重要的实践性教学环节。它是根据专业教学计划的要求，在教师指导下对学生进行的网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作能力的培养过程。因此，加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素有着重要的作用。

3 网站的设计与制作
3.1 网站的运行环境

3.2 网站的概要设计（网站主题，网站规划，网站结构，网站风格、特色、网站结构图）
1、网站主题
我的网站的主旨在于从各个方面全面的介绍圣诞节。同时，网站里的每一个网页都有统一的风格，每一个网页的主题色彩都是黑色跟红色，用以展示圣诞节喜庆的效果。最重要的是做出自己的风格，给浏览者好的欣赏感受。
2、网站规划
我的网站共有6个主页面：首页、圣诞起源、圣诞传说、圣诞风俗、圣诞图片、圣诞故事。每个页面用统一的背景图片跟背景音乐，以保证网站统一的风格。
3、网站结构
网站由 首页、圣诞起源、圣诞传说、圣诞风俗、圣诞图片、圣诞故事构成，其中圣诞图片栏目中还有圣诞玻璃球、圣诞铃铛、圣诞礼物这3个内容。如图3-1所示：

图3-1 网站结构图
4、网站风格
网站整体色调为黑色，然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用表格来定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用CSS设计一个样式，一保证随时、准确的调用。另外，为了网页的布局的协调，我加入适当的FLASH动画，用以达到更好的浏览效果。
5、网站特色
我觉得我的网页设计的最大特色就是色彩淡雅，布局协调，结构清晰。观之，给人以清丽，纯朴的感觉。
3.3 网站的详细设计
素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点“234金家辉”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了“file”文件夹来存放图片。首页我设计了一个模板用于方便的制作其他网页，设计的模板如图3-2所示：

图3-2 模板效果图
根据自己的网页风格，在网上搜集合适的图片，另外网页的页宽一般没有超过900像素，以保证左右不出现滚动条。设计时，我在第一行插入了一个一行三列的表格，在表格中间插入了Christmas的Gif动画，左右两边插入了2个铃铛的Gif动画来达到对称以及节日的气氛。背景用了星空的GIF 动画，我还添加了背景音乐。背景音乐代码如下：
<bgsound src="file/4.mid" loop="-1">
在右边我还设置了返回首页的超链接以方便浏览者更好的浏览，其超链接代码如下：
<div class="ZZ" id="apDiv1">
<div align="right"><a href="../index.html">返回首页</a></div>
</div>
根据模板我建立了主页，效果如图3-3所示：

图3-3 主页效果图
为了使页面连接清晰，在首页靠右的地方插入了5个超链接，分别是圣诞起源、圣诞传说、圣诞风俗、圣诞图片、圣诞故事，当点击任意链接都会跳转到相应的页面。在第一张跟第二张图片上我还加入了交换图像行为，当鼠标移到任意一张图片上时，图片会变成另外一张，一开鼠标图片变回原样。其代码如下：
<td width="33%"><img src="Images/49.gif" width="286" height="191" id="Image1" onmouseover="MM_swapImage('Image1','','Images/48.gif',1)" onmouseout="MM_swapImgRestore()" /></td>
第二个页面是圣诞起源，效果如图3-3所示：

图3-3 圣诞起源效果图
圣诞起源主要内容是介绍圣诞的起源，我插入了一个一行三列的表格，在表格的左右分别插入了烟花的Gif动画，然后在中间写上主要内容，在最下面我插入了一段飘雪的Flash动画来增加气氛。其代码如下：
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="347" height="269">
<param name="movie" value="file/飘雪.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="file/飘雪.swf" width="347" height="269">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->

<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
第三个页面是圣诞传说，效果如图3-4所示：

图3-4 圣诞传说效果图
这个页面跟上面的一样也是插入了一段Flash动画，左右插入了跟内容相关的图片。
第四个页面是圣诞风俗，效果如图3-5所示：

这个页面主要是描写圣诞的风俗。
第五个页面是圣诞图片，效果如图3-6所示：

图3-6 圣诞图片效果图
在页面上方我插入了3个超链接，分别是圣诞礼物、圣诞铃铛、圣诞玻璃球。然后下面就是圣诞的各种图片了。当点击圣诞礼物时，会跳转到圣诞礼物的页面，效果如图3-7所示：

图3-7 圣诞礼物效果图
当点击圣诞铃铛时，会跳转到圣诞铃铛的页面，效果如图3-8所示：

图3-8 圣诞铃铛效果图
当点击圣诞玻璃球时，会跳转到圣诞玻璃球的页面，效果如图3-9所示：

图3-9 圣诞玻璃球效果图
最后一个页面是圣诞故事，效果如图3-10所示：

图3-10 圣诞故事效果图
在这个页面我加入了一段高尔基的长篇故事，来供那些喜欢阅读的浏览者们。
其中每个页面我都设置了统一的CSS样式，确保字的颜色、大小都能统一，给浏览者带来清晰的感觉。其代码如下：
.q {
font-family: "华文新魏";
font-size: 14px;
color: #0FF;
}

图3-11 版权效果图
上图3-11是版权信息，尽量用简洁的语言和稳重的色彩，给人留下清新，简练的感觉。版权信息标名了作者和版权用以提高内容的可读性和使内容充实，既突出网站的主色调，又给人以凝重的感觉。
上传测试网站
网页制作完毕以后，要进行反复的测试，保存后在IE浏览器上反复运行自己的网站，用以发现设计中的缺陷并及时改正。

3.4 网站的改进方法或升级方案

4个人总结
通过这次实训对这门课程的学习，做好网页，并不是一件容易的事，它包括网页的选题、 内容采集整理、 图片的处理、 页面的排版设置、 背景及其整套网页的色调等很多东西。
所以我得出一下总结：
一、 准备资料和挑选符合目的主题的合适素材
做网页当然要收集、准备资料。在网上多转转，看到什么漂亮的网页，把它保存起来， 作为以后自己设计主页时的参考。另外，还包括搜集美化主页可能要用到的各种材料，如背景、小动画图标等等。可以在硬盘上建一个文件夹，下分“图片、声音、动画”等文件夹， 养成上网时看到有创意、新鲜的图像，就按鼠标右键存入你硬盘相应文件夹的习惯，时间一长就拥有了一个可观的图库，等做网页时随手拈来或加以修改就成你自己的东西了。
二、 规划好整个网站
主页的设计应以醒目优先，应该令人一目了然，切勿堆砌太多不必要的细节，或使画面 过于复杂。切记，页面给人的第一观感最为重要！在网上到处浏览网站的人很多，如果你的主页给人的第一印像没有吸引力， 很难令他们深入观赏， 而且他们恐怕再也不会访问你的网站了。
三、 善用图片，增强艺术效果
我记得老师说过网页的迷人之处之一， 要算它上面能点缀许多漂亮的图片。 精美的图片设计，可以使自己的网页增辉不少，令人过目不忘。图片的内容应有一定的实际作用，切忌 虚饰浮夸，同时还要注意与文字的颜色搭配。最佳的图像集美观与资讯于一身。
四、善于借鉴他人主页制作中的设计技巧
由于在网上用浏览器浏览任何主页时， 都能查看到该主页制作时所编写的绝大部分网页编程源代码。因此，如果想知道并掌握一些优秀的主页采用的设计技巧，试着将其源代码 调出来仔细揣摩，并模仿着一步一步去实现。
合同管理制度

1 范围
本标准规定了龙腾公司合同管理工作的管理机构、职责、合同的授权委托、洽谈、承办、会签、订阅、履行和变更、终止及争议处理和合同管理的处罚、奖励；
本标准适用于龙腾公司项目建设期间的各类合同管理工作，厂内各类合同的管理，厂内所属各具法人资格的部门，参照本标准执行。
2 规范性引用
《中华人民共和国合同法》
《龙腾公司合同管理办法》
3 定义、符号、缩略语
无
4 职责
4.1 总经理：龙腾公司经营管理的法定代表人。负责对厂内各类合同管理工作实行统一领导。以法人代表名义或授权委托他人签订各类合法合同，并对电厂负责。
4.2 工程部：是发电厂建设施工安装等工程合同签订管理部门；负责签订管理基建、安装、人工技术的工程合同。
4.3 经营部：是合同签订管理部门，负责管理设备、材料、物资的订购合同。
4.5 合同管理部门履行以下职责：
4.5.1 建立健全合同管理办法并逐步完善规范；
4.5.2 参与合同的洽谈、起草、审查、签约、变更、解除以及合同的签证、公证、调解、诉讼等活动，全程跟踪和检查合同的履行质量；
4.5.3 审查、登记合同对方单位代表资格及单位资质，包括营业执照、经营范围、技术装备、信誉、越区域经营许可等证件及履约能力（必要时要求对方提供担保），检查合同的履行情况；
4.5.4 保管法人代表授权委托书、合同专用章，并按编号归口使用；
4.5.5 建立合同管理台帐，对合同文本资料进行编号统计管理；
4.5.6 组织对法规、制度的学习和贯彻执行，定期向有关领导和部门报告工作；
4.5.7 在总经理领导下，做好合同管理的其他工作，
4.6 工程技术部：专职合同管理员及材料、燃料供应部兼职合同管理员履行以下职责：
4.6.1 在主任领导下，做好本部门负责的各项合同的管理工作，负责保管“法人授权委托书”；
4.6.2 签订合同时，检查对方的有关证件，对合同文本内容依照法规进行检查，检查合同标的数量、金额、日期、地点、质量要求、安全责任、违约责任是否明确，并提出补充及修改意见。重大问题应及时向有关领导报告，提出解决方案；
4.6.3 对专业对口的合同统一编号、登记、建立台帐，分类整理归档。对合同承办部门提供相关法规咨询和日常协作服务工作；
4.6.4 工程技术部专职合同管理员负责收集整理各类合同，建立合同统计台帐，并负责

- 10 -