网页设计与制作

实训报告

班 级：

姓 名：**

学 号：47

指导老师：***

实训时间：5.9——5.22

甘肃机电职业技术学院

20**年5月20日

一、实训目的：

1、进一步熟悉和掌握网站建设的基本流程和技术规范；

2、 巩固运用Dreamweaver网页制作软件制作网页、特别是制作复杂网页的知识；

3、巩固运用PS图像处理软件进行网页中图形制作和运用flash动画制作软件设计网页中动画的知识；

4、巩固综合运用Dreamweaver、PS、flash三个软件完成网站建设任务的方法，能独立设计一个内容完整、图文并茂、技术运用得当的网站；

5、具备独立撰写实训报告基本能力；

6、在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交流的能力，培养创新能力和团队意识；

7、紧紧围绕网页制作的流程：规划、设计、开发、发布、维护来进行网站的开发，制作出具有较高水准的静态网页。以此作为学生学习这门课程的阶段性总结，使学生复习、巩固所学过的理论，并予以适当的深化，进一步训练学生的基本技能（如：搜集资料、整理数据、发现与分析问题、寻求解决问题的方案等），为今后从事网站开发、维护和管理奠定基础。、

二、实训项目——星空间街舞俱乐部网站设计

1、网站主题

我的网站的主旨在于从各个方面全面的介绍星空间街舞俱乐部，包括它的团队、环境和课程。另外，网站里还包括我的资料，建立了一个展示自我形象的平台。同时，网站里的每一个网页都有统一的风格，每一个网页的主题色彩都是橙色和蓝色搭配，用以展示星空间街舞俱乐部个性的效果。其实最重要的是要做出自己的风格，给浏览者好的欣赏感受。

2、网站材料

主要在网站上搜集所要的网页信息，包括图片、文字。同时，查询相关的书籍、百度等方式收集所需的文字资料,图象资料,flash动画和网页特效等，用以得来更加具有说服力的页面。要想做好自己的网站，能够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。

3、网站规划

我的网站共有7个主页面：首页、介绍、团队、环境、课程、联系我们和关于我。每一个页面用统一的模块，以保证网站统一的页面风格。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用CSS设计一个样式，以保证随时、准确的调用。

4、网站的制作工具

做网页时主要使用的是Deamweaver。另外，为了处理网页中的其他元素，还使用了Photoshop等软件。

5、制作网站的网页

素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点“093501”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了“img”文件夹来存放图片。网页中的CSS 样式文件也应统一管理，做到有条不紊，我设计的网站的首页如下图：

导航栏下面插入了一个flash，用以给浏览者好的视觉享受。左上方插入了一个图片滚动效果，左侧有关于街舞的一些教程，是相关链接的菜单栏，一方面为了布局合理，弥补右边的空缺，另一方面给浏览者提供放便的导航。另外，右边插入的是表格，表格中的背景是蓝色的。用以体现网站的主题色彩，左边加入了图片滚动特效。当鼠标停在图片上时，图片停止滚动。特效代码如下：

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

＜html xmlns="http://www.w3.org/1999/xhtml"＞

＜head＞

＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /＞

＜title＞向左无缝滚动＜/title＞

＜style type="text/css"＞

body,html,div,a{ margin:0; padding:0}

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

width: 500px;

}

#demo img {

border: 3px solid #F2F2F2;

}

#indemo {

float: left;

width: 800%;

}

#demo1 {

float: left;

}

#demo2 {

float: left;

margin-left:7px;

}

＜/style＞

＜script type="text/javascript"＞

window.onload = function(){

var speed=10; //数字越大速度越慢

var tab=document.getElementById("demo");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft＜=0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++;

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

}

＜/script＞

＜/head＞

＜body＞

向左无缝滚动

＜div id="demo"＞

＜div id="indemo"＞

＜div id="demo1"＞

＜a href="#"＞＜img src="../img/11.jpg" border="0" /＞＜/a＞

＜a href="#"＞＜img src="../img/12.jpg" border="0" /＞＜/a＞

＜a href="#"＞＜img src="../img/13.jpg" border="0" /＞＜/a＞

＜a href="#"＞＜img src="../img/14.jpg" border="0" /＞＜/a＞

＜a href="#"＞＜img src="../img/15.jpg" border="0" /＞＜/a＞

＜/div＞

＜div id="demo2"＞＜/div＞

＜/div＞

＜/div＞

＜/body＞

＜/html＞

然后利用模板制作了关于街舞种类介绍的链接，它分为Breaking、Poppin、Hip-hop、New style、Jazz.从而进行了全面的介绍，当点击任意一个舞种按钮，都会在右下版块出现对应浏览文字版块。如下图：

创建模板时，我在右侧建立了关于街舞教程的导航，这样可以让整个界面显得整洁、有序。与介绍街舞类型的主页面采用了相同的背景，相同的布局。使页面连接清晰。

最后就是制作个人简介,也就是导航栏中的关于我，包含我的姓名、性别、年龄、爱好、学校、班级、学号和家庭住址等。简历的左侧，插入了一张代表中国街舞爱好者的标志图，为达到亮眼的效果。加入了滚动图片特效。增加页面的可看性。

6、上传测试网站

网页制作完毕以后，要进行反复的测试，保存后在IE浏览器上反复运行自己的网站，用以发现设计中的缺陷并及时改正。

三、实训中遇到的问题和解决方法

1、在制作网页的过程中，经常遇到CSS样式的运用和网页特效的添加，由于对CSS样式的不熟悉和网页特效代码的不了解，导致在做网页时遇到很多的麻烦，但是最后经过老师和同学们的帮助，最终解决了CSS样式和网页特效添加的问题。

2、创建了模板，但是运用模板制作网页时，发现全部不可编辑，这就需要在模板中添加可编辑区域。这样就可以利用模板制作其它的网页。

3、表格的应用，当每次插入表格，对其插入内容，就会影响到整个页面的大小，经过再三的思考，发现要在表格里插入图片，就要先插入表格再插入图片，这样就不会影响到整个网站的布局。

四、心得体会

我非常感谢学校给了我这次制作网页的机会，通过这次实训，我学到了很多有价值的东西。独立的完成了网站设计的全过程，把设计中散乱的网页链接成框架体系，使平时学到的知识点有了很高的提高，并且合理的在试验中进行了实践。在这次实训的过程中，搜集了大量的素材和网页设计的技术，扩大了知识面，给我在以后的设计过程中能博采众长，制作出好的网页打下了基础。掌握文档排版标记的熟练使用及其属性设置。熟练使用超级链接，合理使用列表；掌握图片标记及相关属性的使用、了解表格标记制作表格的方法。

最后，我感受最深的是：要想做好一个网站，素材和技能都十分重要。好的素材需要多方查找资料，可以从图书、网站和新闻上查找。好的技能需要不断的实践，经常锻炼做网页。如果拥有好的素材和精湛的技能就可以做出精湛的网页。

第二篇：网页设计与制作实训报告

《网页设计与制作》

实习报告

指导老师：

实习地点：

实习时间：

实习班级：

学生姓名：

一、实习目的

1　学会制作新闻发布系统。

2　学会制作在线调查系统。

3　熟悉购物网站的主要功能和栏目。

4　学会购物网站数据库表的创建和数据库连接的创建。

5　学会购物系统前台页面制作和后台管理制作。

二、实训内容

1.创建数据库表

1　启动Microsoft Access ，执行“文件”——“新建”命令，打开“新建文件”面板，在面板中单击“空数据库”。

2　弹出“文件新建数据库”对话框，在对话框中选择数据库保存的路径，“文件名”文本框中输入shop。

3　单击“创建”按钮，在对话框中双击“使用设计器创建表”选项。

4　弹出“表1：表”对话框，在对话框中输入“字段名称”和字段所对应的“数据类型”，将shopID字段设置为主键。

5　执行“文件”——“保存”命令，弹出“另存为”对话框，在对话框的“表名称”文本框中输入products。

6　单击“确定”按钮，保存表。按以上步骤的方法，创建表fen和admin。

2.创建数据库连接

新建一个网页文件夹，打开IIS信息服务，创建IIS虚拟目录，在文件夹安全性把来宾用户的权限修改为完全控制，并导入数据库。

3.制作购物网系统页面

1　用index.html创建zhanshi.asp商品分类展示页，新建站点，导入shop.mdb数据库文件建立数据库连接。插入表格并插入图片、文字，创建记录集并在表格相应位置绑定数据。在服务器行为里为表格设置重复区域，创建记录集RS2并在左边的商品分类表格里绑定数据，在服务器行为里为左侧的表格添加重复区域和转到详细页，制作记录集导航条。

2　用index.html创建xiangxi.asp商品详细信息页，首先创建记录集并制作左侧的商品分类表格，之后在中间区域插入表格，在表格中插入图片、文字，创建记录集RS2并将数据绑定在表格相应位置。

3　用index.html创建denglu.asp商品详细信息页,创建记录集并制作左侧的商品分类表格，在中间区域插入表单，在表单里插入表格，在表格里插入文字、文本域、表单按钮，并为表单设置检查表单。创建记录集RS2并在服务器行为里添加登录用户。

4　用index.html创建fenlei.asp添加商品分类页，插入表单，在表单里插入文字、文本域、表单按钮，创建记录集并在服务器行为里添加插入记录和限制对页的访问。再用index.html创建fenleiok.asp,在其中插入表格输入文字，并设置返回链接。

5　用index.html创建tianjia.asp添加商品页，创建记录集，用插入记录表单向导创建插入记录表单，在服务器行为里添加限制对页的访问。再用index.html创建tianjiaok.asp,在其中插入表格输入文字，并设置返回链接。

6　用index.html创建guanli.asp商品管理页，创建记录集并制作左侧的商品分类表格，在中间区域插入表格并插入文字，创建记录集RS2并在表格相应位置绑定数据，为该表格设置服务器行为的重复区域，制作修改和删除链接，制作记录集导航条。

7　用tianjia.asp创建xiugai.asp修改页面，创建记录集在对应的文本域中绑定数据，把服务器行为里的插入记录删除并添加更新记录。在服务器行为里添加限制对页的访问。再用index.html创建xiugaiok.asp,在其中插入表格输入文字，并设置返回链接。

8　用index.html创建shanchu.asp删除页面,插入表格并插入文字，建立记录集，在表格相应位置绑定数据，插入表单和表单按钮，创建服务器行为限制对页的访问和删除记录。再用index.html创建shanchuok.asp,在其中插入表格输入文字，并设置返回链接。

三、疑难解惑

1　网页不能正常打开，电脑用户权限没有修改，在文件夹安全性把来宾用户的权限修改为完全控制。

2　创建重复区域时，总显示相同的内容，仔细阅读教材，发现创建重复区域时要选中表格，而不是文字内容。

3　登陆页面不能登陆，把表格放入表单后，重新登录，问题解决。

4　创建添加商品页面时，无法显示商品分类。在插入记录表单时，应将feileiID"显示为"下拉列表中选择“菜单”，并在“菜单属性”里的“域”列表中选择fenlei。

5　修改页面点进去初始内容都一样 ，“唯一键列”下拉列表中应选择shpID。

6　商品分类点进去每个种类都一样，查找原因，发现记录集中筛选是shpID，把记录集中的筛选改为fenleiID解决。

四、实训心得

经过一周动态网页的实训，使我们对本学期的这门课进行了整体的汇总。在这汇总期间，也算是对自己本学期的一个考核，此次实训暴露出了许多我自身存在的问题，同时也对自身有了很大的提高。

在这次实训中，我也有许多收获。首先，我体会到了作为一个计算机专业的人，不会用DW的痛苦和尴尬。在制作的过程中遇到问题，可以说得是困难重重，这毕竟是第一次独自制作动态网页，难免会遇到过各种各样的问题，同时在制作的过程中发现了自己的不足之处，对以前所学过的知识理解得不够深刻，掌握得不够牢固。在此过程当中弥补了我许多知识上的缺陷，弄清的以前没有搞懂的知识点。经过多番的努力和辛酸，我成功地完成了这次过程艰辛的实训，而且我从中体会到了一种叫做‘成功的喜悦’的感觉，那种小有成就的兴奋是只有置身其中的人才能体会的。

在实训过程中，我更体会到了基础知识的重要性，也许我们正在迷惘，我们是否学到了东西，但事实说明零零散散的知识，在项目开发当中起到了非常关键的作用，我们不缺少时间和工具，我们只是缺少经验和动手能力，如果我们以后能更好的在各方面增长自己的经验，相信我们能在长长的就业队伍中脱颖而出的！相信自己，相信未来。今后我将会更加努力的学习，不断提高自身素质，为我将来的就业打下良好的基础。