网页设计与制作实验过程及报告

第一篇：网页设计与制作实验过程及报告

网页制作过程及报告

网页设计与制作的一般实验步骤：

1、确定网站主题

网站里的每一个网页都要有统一的风格，以加强渲染自己性格的效果。最重要的是做出自己的风格，吸引浏览者的眼球。

2、搜集材料

主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻，同时，查询相关的图书、报纸、光盘、多媒体等，也可以得来更加有说服力的信息。

3、规划网站

我的网站包括5个页面。版面设计要灵活，根据各部分内容的不同适当的自由设计。但是每个页面的主元素和位置不能变。用CSS设计一个样式，以保证随时、准确的调用。另外，为了网页布局的协调，还可以加入flash动态图片，会达到更好的效果。

4、选择合适的制作工具

做网页的首先工具当然为Dreamweaver。

5、认识网页设计工具Dreamweaver

（1）Dreamweaver的启动

（2）窗口组成的认识

6、新建站点

7、站点中首页的创建

8、制作网页

素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点。网页中的css 样式文件也应统一管理，做到有条不紊。

9、根据自己的网页风格，在网上搜集合适的图片。

最后还要制作各个页面的链接，把整个网页可怜起来，形成一个统一的整体，方便浏览者进行各个页面间的跳转。

10、上传测试

网页制作完毕以后，要进行测试，在浏览器上运行自己的网站，反复测试，以发现设计中的缺陷。

实验结果及理论分析：

通过这简短的三个周的学习，让我有一个独立设计，制作网页的机会，通过这次试验，我的收益颇多。首先，独立的实践了一个完整的网站设计的全过程，把设计中零散的注意点和要求在自己大脑中形成了一个完整的框架体系，使平时学到的知识点有了一个质的升华，并且合理的在试验中进行了实践。第二，在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，扩大了知识面，给我在以后的设计过程中能博采众长，制作出技术精湛的网页打下了基础。最后，我感受最深的是，技术方面的学习，最重要的是自己实践做出东西，只通过自己的亲身实践，才能学会、学懂、学通技术。

朱礼明

信息管理与信息系统1301班

2014.07.23

第二篇：电子政务网页设计与制作实验教案

《电子政务网页设计与制作》实验教案

实验名称 IIS的安装与调试

实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生

一、实验目的

1．掌握检测不同版本Windows操作系统IIS的安装与否； 2.掌握在Windows操作系统中安装IIS的方法；

3．掌握利用IIS设置虚拟目录调试ASP程序的初步方法。

二、实验重点、难点

利用IIS设置虚拟目录调试ASP程序

三、实验原理

ASP模型的运行原理是：当浏览器向Web服务器请求.asp文件时，服务器端脚本开始运行，WEB服务器调用.asp文件，将运行结果发送到浏览器。

四、实验设备、实验教学软件介绍

个人PC，Windows 2000,IIS 5.0,记事本

五、实验分组及组织情况

无

六、实验的基本操作与实验重要步骤

1、实验前先观看指导老师的演示；

2、如果计算机未安装IIS，使用安装程序安装IIS；

3、利用记事本编写教材P13 1－1的ASP程序并存盘；

4、在IIS中建立虚拟目录，调试ASP程序，找出并解决问题，确保调试成功，并相互访问；

5、学生独立完成相应的实验报告。

七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；

参照上述实验内容，分模块讲解各业务流程的作用和操作方法

八、预期的实验效果

多数学生能独立完成实验，掌握基本原理和方法。

九、实验中应注意事项

对于因操作系统本身的原因，无法安装调试好IIS，需重新安装系统。

十、课外实验或思考题

教材P13 练习1-1

十一、实验教材及实验参考资料

《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版

十二、实验后记

学生独立完成实验报告

实验名称 HTML网页编辑

实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生

一、实验目的

1．掌握HTML基本标记的使用； 2.掌握HTML中超级链接的使用方法；

3．掌握HTML中特殊符号、图片链接的使用方法。

二、实验重点、难点

HTML中特殊符号、图片链接的使用方法

三、实验原理 HTML标记语言

四、实验设备、实验教学软件介绍

个人PC，Windows 2000,IIS 5.0,记事本

五、实验分组及组织情况 无

六、实验的基本操作与实验重要步骤

1.实验前先观看指导老师的演示；

2.利用记事本编写教材P34 2－1的HTML程序并存盘； 3.调试；

4.学生独立完成相应的实验报告。

七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；

参照上述实验内容，分模块讲解各业务流程的作用和操作方法

八、预期的实验效果

多数学生能独立完成实验，掌握基本原理和方法。

九、实验中应注意事项

注意热点链接的使用，调试出问题时，多从连接文件的上下级目录上找原因。

十、课外实验或思考题

教材P34 练习2-1

十一、实验教材及实验参考资料

《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版

十二、实验后记

学生独立完成实验报告

实验名称 Vbscript对象编程

实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生

一、实验目的

1．掌握Vbscript的基本数据类型、常量、变量、表达式和常用函数； 2.掌握在HTML中插入Vbscript编码的方法； 3．掌握事件驱动程序的编制。

二、实验重点、难点

事件驱动程序的编制，面向对象的程序设计思想的掌握。

三、实验原理

Vbscript事件驱动程序编制。

四、实验设备、实验教学软件介绍

个人PC，Windows 2000,IIS 5.0,记事本

五、实验分组及组织情况

无

六、实验的基本操作与实验重要步骤

1.实验前先观看指导老师的演示；

2.利用记事本编写教材P74练习4－1题的程序并存盘； 3.调试；

4.学生独立完成相应的实验报告。

七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；

参照上述实验内容，分模块讲解各业务流程的作用和操作方法

八、预期的实验效果

多数学生能独立完成实验，掌握基本原理和方法。

九、实验中应注意事项

对象编程的思想，对象事件的编程方法。

十、课外实验或思考题

教材P74 练习4-1

十一、实验教材及实验参考资料

《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版

十二、实验后记

学生独立完成实验报告

实验名称 表单设计

实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生

一、实验目的

1．掌握DHTML中INPUT控件的使用； 2.掌握DHTML中SELECT控件的使用； 3．掌握DHTML中TextArea控件的使用。

二、实验重点、难点

掌握DHTML中INPUT控件的使用

三、实验原理 DHTML语言

四、实验设备、实验教学软件介绍

个人PC，Windows 2000,IIS 5.0,记事本

五、实验分组及组织情况

无

六、实验的基本操作与实验重要步骤 1.实验前先观看指导老师的演示；

2.利用记事本或Dreamweaver等软件编写表单程序并存盘； 3.调试；

4.学生独立完成相应的实验报告。

七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；

参照上述实验内容，分模块讲解各业务流程的作用和操作方法

八、预期的实验效果

多数学生能独立完成实验，掌握基本原理和方法。

九、实验中应注意事项 Dreamweaver集成化工具的使用

十、课外实验或思考题

教材P121 练习6-1

十一、实验教材及实验参考资料

《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版

十二、实验后记

学生独立完成实验报告

实验名称 Response对象应用

实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生

一、实验目的

1．掌握Response对象中Write方法的使用； 2.掌握Response对象中Redirect方法的使用； 3．掌握Response对象中End方法的使用。

二、实验重点、难点

Response对象中Write方法的使用

三、实验原理

ASP中Response对象应用

四、实验设备、实验教学软件介绍

个人PC，Windows 2000,IIS 5.0,记事本

五、实验分组及组织情况

无

六、实验的基本操作与实验重要步骤

1.实验前先观看指导老师的演示；

2.利用记事本或Dreamweaver等软件编写程序并存盘； 3.打开IIS并设置虚拟目录进行调试； 4.学生独立完成相应的实验报告。

七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；

参照上述实验内容，分模块讲解各业务流程的作用和操作方法

八、预期的实验效果

多数学生能独立完成实验，掌握基本原理和方法。

九、实验中应注意事项

对于ASP的内置对象，注意代码的编写规范性。

十、课外实验或思考题

教材P142 练习7-1

十一、实验教材及实验参考资料

《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版

十二、实验后记

学生独立完成实验报告

实验名称 交互式表单程序设计

实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生

一、实验目的

1．掌握交互式表单程序设计的方法； 2.掌握Response对象中Write方法的使用； 3.掌握Request对象中Form集合的应用。

二、实验重点、难点

Request对象中Form集合的应用

三、实验原理

ASP交互式表单程序设计

四、实验设备、实验教学软件介绍

个人PC，Windows 2000,IIS 5.0,记事本

五、实验分组及组织情况

无

六、实验的基本操作与实验重要步骤 1.实验前先观看指导老师的演示；

2.利用记事本或Dreamweaver等软件编写程序并存盘； 3.打开IIS并设置虚拟目录进行调试； 4.学生独立完成相应的实验报告。

七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；

参照上述实验内容，分模块讲解各业务流程的作用和操作方法

八、预期的实验效果

多数学生能独立完成实验，掌握基本原理和方法。

九、实验中应注意事项

注意对于Form集合的运用，代码要规范。

十、课外实验或思考题

教材P163 练习8-1

十一、实验教材及实验参考资料

《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版

十二、实验后记

学生独立完成实验报告

第三篇：个人网页制作过程

个人网页制作过程：

制作个人网页的目的就是向大家介绍自己，我制作个人网页的过程如下

（1）首先是熟悉并熟练一款网页制作软件的使用方法，这样制作出来的个人主

页才不会显得粗糙，我选择的是frontpage，这款软件比较适合于初学者来使用。虽然在制作效果上也许会逊色一点，但是其优点的是比较容易上手。

（2）其次就是选择素材了，网页上那些好看的背景还有点缀以及一些装饰，标

志性的图片，元素都是需要自己来选择的。选择好了这些图片元素会为你的网页增添很多生气。这里介绍一个比较好的网站。我的所有图片元素以及背景都是从这里面找的。

（3）所需要介绍的当然是自己的个人信息，包括自己的基本信息以及自己的爱

好，工作以及一些零碎的感悟。这些都是要在网页里面表达出来的文本信息，所以必须要实现准备好。

（4）现在就是需要布置自己的网站了，我的计划是用多页面网站来介绍自己，制作个人主页。首先必须有一个主页，里面是我的基本信息，然后有几个选项，分别超链接我的爱好，我的工作以及我的感悟。在下面会有三个子网页，分别就是我的爱好，我的工作以及我的感悟。出去剩下的两个不在超链接以外，我的爱好会再向下借三个子网页，分别是我喜欢的歌，我喜欢的书和我喜欢的电影。

（5）有了明确的目标就开始着手制作，在上面那个网站里下载的背景和矢量图

都是需要加工的，需要利用绘图工具把需要的元素从整个照片里抠出来，把不需要的多余的部分擦除，在这个时候什么图片需要放置在什么地方用来做什么已经有一个大致的想法。

（6）没有用其他的网页制作工具，frontpage里面需要事先插入表格，将图片

文本信息填到适合的表格里，这里面的布局工作就需要自己动手了，以个人爱好而定，里面遇到了不少问题，但都最终被我解决了。这里面插入图片需要在插入选项里面选择插入图片，设置背景则是在格式选项里选择背景，背景图片也要在绘图工具里设定好尺寸。一开始我选择的网页形式是新建一个只有一个网页的网站，后面的子网页可以在网站里新建网页来实现。

第四篇：网页设计及制作 实习报告

中原工学院信息商务学院毕业实习报告专用纸

网页设计及制作

【实习目的】

熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。通过网页设计理论联系实际操作，巩固所学的知识，提高处理问题的能力。充分学习网页设计实践中的操作理论，提高自己网页设计水平，并为能顺利与社会环境接轨做准备。

【实习时间】

2012年2月15日至2012年3月15日

【实习地点】

未来路锦江国际花园9栋501室

【实习单位】

郑州市托斯卡纳餐饮有限公司

【实习内容和过程】

实习内容：

我在托斯卡纳餐饮公司旗下的56°网络蛋糕店一个月的实习，我的工作就是负责设计整个网站的页面部分。为其一个月的实习，使我第一次亲身感受到了所学知识与实际的应用，作为一个网站美工除了要求网页三剑客,ps,这些必会的软件以外，还要对Html用的很熟,对ASP或PHP或jsp要有初步的了解。通过这次实习，进一步巩固和深化所学的理论知识，为以后的工作打好基础。以下是我做的一些实习过程中的经验总结：

（1）表达一定的艺术效果

一个成功的网站应该把网页设计得吸引人，同时又要传达设计思想和情感。网页作为一种媒体，它必须具有一定的艺术感染力，一个平淡无奇、杂乱无章或毫无美感的网页很难会有浏览者喜欢，更不要说让浏览者去注意它的内容了。

（2）使页面结构清晰可读性强

经常可以看到这样的页面，上面堆砌了许多内容，却没有考虑它的空间框架，让人看了无法知晓哪些内容才是最具发言权的。没有流畅的视觉流程，这是典型的没有注意到编排清晰度、可读性的表现。

（3）实现不同的功能

在网络这条信息高速公路上，网页最主要的功能就是一种传递信息的手段。因此，它一切内容都是为了这个目的而服务，都是要围绕这个中心进行设计的。然而，要实现这个功能，网页的美工设计和内容都必须有针对性。所谓针对性，就是指对不同类别的网页要求采用不同的美工艺术效果。

（4）网页的内容

网页设计人员美化网页，增加网页设计的艺术感，都是为了网页设计的内容服务的。一般来说，网页的几项基本内容：标题、网站标志、主体内容、导航、广告栏等。

（5）确定网站的类型

在设计网页之需要做大量的准备工作，需要思考以下几个问题：

1、网站的类型：站点属于新闻、娱乐、商务类的综合站点，还是个人主页；

（6）确定网站的风格

如果浏览者主要是年轻人，页面就要设计得基调明快，活泼富有朝气；如果针对的群体是政府工作者或科学工作者，那么页面就要设计得严谨、严肃、理性、科学；如果针对的群体是妇女儿童，页面则要设计得温馨、友爱、轻松；如果针对的群体是恋人或从事艺术工作的人，页面就要设计得浪漫并有艺术感

（7）确定网页之间的链接关系

在网站的总体规划列出来后，就必须要考虑各个网页之间的关系，是星型、树型、网型还是直线链接。

实习过程：

1．我所在的公司是托斯卡纳餐饮公司旗下的56°蛋糕部门，主要项目是蛋糕类。而我主要是负责网页设计制作这一块。

2.因为是有关蛋糕的网站，我首先从网上了解了一些有关项目和一些基本常识。接下来我就应该考虑配色与构图了。这在做食品网页上是最关键的环节。考虑配色与构图：对整个内容有了一了解后，现在要思考作品的色彩和具体的构图，先用笔画出草图，也可以直接在脑海里构思。色彩要活泼健康，所以选择粉色作为主色调。

查找素材：其实素材这种东西总是数量大于质量，我可以很轻易的下载到许多许多的素材，但却很少用的到它。为了使网页看上去质量更好，要对图片的进

行筛选，加上拍摄的蛋糕图片。

开始设计：设计的时间是最多的，有的时候，在设计时原先找到的素材就不能用了，甚至全部用不到。所以后来我就先设计，想用什么图的时候再找。加上去拍摄蛋糕的照片使用PS进行加工，让的图片上的蛋糕更加诱人。做一张首页效果图一般用两天的时间。然后把效果图给领导看，等到领导通过才能进行下一步工作。

做子页：子页一般需要五六张效果图。不过，对于这一步骤来将，我们就轻松多了。时间一般也需要两天。

切图：所有的效果图做好了之后就开始切图，切图其实就是把效果图变成网页。一般需要两天。切图之中其实会遇到好多匪夷所思的事情，不过当你熟练这后就好了。当然，一开始我经常会遇到，比如代码的意思是使网页正题居中，但结果却是整个网页偏移到了左边。等等这样的事情在我初期切图的时候经常遇到。现在好多了。

完成：做到这一步我的任务就完成了。

工作这么长时间，对一切越来越熟习之后，总想找到一些别的感觉。每天我会去不同风格的网站，会观察他们出彩的地方，然后不断加强自身的职业素质。

【实习体会和收获】

光阴似箭，日月如梭。转眼间，愉快而又充实的网页实习结束了，在这一个月的时间里，让我尝试了理论与实践相结合。网页设计理论一点点转化为实践经验。丰富的实习生活充满了惊喜，快乐和充实，当然也少不了网页设计过程中的困难。实习结束了，觉得脑袋里又注入了新的知识，对网页设计也有了新的了解，在以后的工作中，希望能用自己了解的东西去处理相关问题，在探究新的问题，使自己不断进步。

在实习生涯中影响了我很多，就像我用两天的时间制作出一张首页效果图，他人往往只能看到完成品。而这并不是最重要的，最重要的是别人没有经历的我却在珍惜的创作过程。也许这个过程还远远不能称之为创造，但我会努力的。做了一个月的美工，终于体会到网页设计无非是图文混排的那点事。不过，当你真正的去努力的创造了之后，结果却并不会每次都是好的。太多自己精心设计的东西，被别人一眼就否定了。当时心情真的很糟糕。不过，现在想想，这都些都没

有什么，这也无非是成长中常常要遇到的事罢了。

在实习过程中，我发现社会比校园更残酷，在工作的单位我学会了，凡事第一反应是找方法，而不是找借口；凡事先订立目标，并且尽量制作“梦想板”；凡事预先做计划，尽量前目标视觉化；六点优先工作制，每一分，每一秒做生产力的事情；把重要的观念，方法写下来，并贴起来，以随时提示自己；每天提前30分钟上班，推迟30分钟下班。

工作是人生活的重要部分，不论是消极还是积极，都会给人带来不同感受。而精彩的生活往往有来源于有意义的工作中，所以我不会让自己因工作的烦恼、困难和压力，困扰自己，使自己工作情绪化、生活情绪化。遇到困难我会用平常的心态实际看待问题，告自己凡事要先做人、后做事。

第五篇：网页设计与制作期末设计报告

网页设计与制作

---个人网站设计报告

指导老师：盛加林 学号：20082809 姓名：杜才伟 班级：信管0802

一． 概述

随着网络技术的迅速发展，网络应用越来越趋于平凡化，无论是企业还是其他组织机构或者是个人，都希望利用计算机网络技术开发对自己有价值的东西。关于个人网站，现在越来越多的人通过个人网站记录自己的故事，与朋友分享生活的点滴，同时还可以通过个人网站广交朋友。

本次的个人网站设计是网页设计与制作的期末检测，同时也是对自己学习的检验。本次设计运用平台是windows，运用的工具是Macromedia Dreamweaver 8，主要语言是html语言和javascript，样式设计采用的是css样式。

在个人网站的设计中，我采用了通常iframe网页框架，风格源于自己浏览其他网站的灵感，网页flash的设计借鉴了网上优秀flash动画，首页还采用了网页音乐播放器控件。照片的处理用到了photoshop和Macromedia Fireworks 8。

二． 设计结构图

个人空间我们的故事

相册关于我首页 三． 设计主题

岁月如梭，年华似水。默默流逝的青春给我们每个人留下了不同的回忆，我的个人空间的设计主要是记录大学生活。有学校的剪影，有寝室的合影„„每一张记录都是未来的我最美好的回忆。设计的主要以怀念为主题。曾经的那些花儿，曾经的那些故事都是生命里美的转弯。

四． 模块介绍

（一）、首页介绍

首页是个人网站的入口，大概的设计框架是头是一个部分、头以下分为左右两个部分。头部如下图：

导航条：

导航条主要是“我们的故事”、“相册”、“关于我”三个模块的超链接点击三个连接即可跳转到不同页面。头部以下部分：

这部分的设计主要有图片处理、文字从下往上滚动、音乐播放器、时钟的设计、flash设计

(二)、我们的故事

我们的故事主要是文字描述，整体样式如下：

这个部分主要是记录一些故事，每一段故事中都会存在一些悲伤的插曲，背景漂浮的flash动画加上背景音乐，还有略带伤感的文字，整体呈现淡淡的伤感而又不失积极向上。

(三)、相册 相册主要是展示大学四年中的记录，有关于学校的，有我们寝室的，有自己的：整天样式如下图：

相册页面上面是大学里照片的轮换，中间是自己处理后的照片，下面是文字大概描述照片的故事：

(四)、关于我 五． 主要设计

(一)、首页主体框架