ASP制作网页的实训报告总结

ASP制作网页的实训报告总结（精选3篇）

1.ASP制作网页的实训报告总结 篇一

《网站设计与制作》实训报告

X学院XX班XXX号

一．实训时间：

2010年6月7日到2010年6月13日

二．实训地点：

XXX学院XXX班级

三．实训组员：

XXX、XXX

四．实训目标：

运用网页设计方法，设计一个网站，提高综合应用所学知识的能力，积累Web网站的制作经验，培养团队协作精神。本次实训的具体目标为:了解网站制作的一般流程;熟练使用网页制作工具Dreamweaver、Flash、Fireworks设计网页;能灵活运用表格、层和框架布局页面;熟练使用CSS样式表美化网页;正确使用JavaScript添加网页特效;灵活使用模板和库来制作网页；学会申请免费域名空间和正确上传站点的方法。

五．实训策划：

这一周，我们要进行《网站设计与制作》实训，我们认为做网站前最主要的是确定主题、框架和标题栏的设计。因此我们相互讨论之后，确定制作以“婚纱”为主题的“喜多坊时尚婚纱网”。在之后的资料收集和网页的框架的建设中，我们发现了许多问题，某些关键点无法做出心中的效果，这让我们有些遗憾。通过自身及组员的共同探索，我们已尽权利将以下是我们的策划内容：

1.确定主题。制作网页,首先是确定主题，冬天很冷,却冷得很幸福，刚刚过去的圣诞的热闹劲还在心头。于是我们从幸福出发，想到了结婚-婚纱，建立一个简单的介绍婚纱的网站并取名喜多坊时尚时尚婚纱,专业介绍一些喜多坊婚纱的特色等。我们本次间的网站基本以粉红为基点，粉红是可爱清纯的颜色，粉红代表着幸福温馨，所以本站以粉红为风格，让整个网站充满爱的力量。

2.设计主页。主页的设计是整个网站的灵魂，构思导航栏的分类，然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，我们构思大致

分几部分，首页，关于我们，婚纱礼服，量体裁衣，婚纱选购，公司门市，与我联系，在线论坛8大板块，每一板块又分几小部分，内容比较充分，多样。确定导航栏的各个分类标题之后对于建立二级子网尤为重要，我们运用Photoshop CS3技术来设计出导航栏，制作切片，建立导航栏，将整体的主页效果建立起来。

3.资料的搜集。主页的导航栏设计好后，接下来就是对主页导航栏的各个内容进行资料的收集，我们采用大量的资料收集再对资料进行塞选p图，得到最适合导航栏内容的资料。素材的选择，要符合网站的主题，图片的大小要符合模板的轮廓，我们将不符合模板的用Photoshop处理编辑，然后放入站点底下，进行图文的链接和排版。

4.各个子网页的建立。我们设计好模板后只要在可编辑区依次编辑所需资料就可，运用模板建立子网页少了很多工序，为我们节省大量的时间。尽管我们建立了模板，但我们在建立子网时很小心，因为一张图片的大小插入就有可能破坏整个模板的结构尤其在使用表格时，因此我们对所插入的图片和表格都得进行测量，做到不影响网站整体的美观。

5.实现网页间的链接。做好个格子网和首页后，接下来就是通过模板的链接，将整个网站中的网页链接起来，过程其实很简单，主要是把要链接的文字和图标选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。做好这一步后，网站基本算是建好了。

6.向静态网页插入动态效果。在基本建好网页中的插入层和时间轴，制作其动态效果，让整个网页充满生机。我们在网上进行flash素材的收集，通过Flash CS3设计出主题下的风格动态效果。然后插入到静态网页中，使网页更加生动形象。

六．实训心得：

通过这周的学习实践，在老师的指导下以大量明晰的操作步骤和典型的应用实例，使我们真正对所学的软件融会贯通。我们结合年轻人心理制作了时尚婚纱网站，作为实训的成果。其内容是多样化的，制作网页用的软件是Deamweaver CS3软件。它提供了网页和表单的动态生成到网站的解决方案。主图是一个网页的门面，它能体现出这个网页的整体风格。

制作网页,首先是确定主题,经过再三考虑,就做了个关于婚纱的网站。考虑到,现在城市普遍幸福感不高，加上寒冬，于是以幸福为论点扩展想到了结婚，想到了婚纱，想到了未来的美好城市生活，城市让生活更美好，结婚让生活更完整婚纱让生活更多姿！想到这些，我们最后决定建立一个简单的介绍都市婚纱的网站,让这个冬天不再寒冷，让我们回忆起那些幸福的日子。于是网站主题确立。

然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，大致分几部分，首页，关于我们，婚纱礼服，量体裁衣，婚纱选购，公司门市，与我联系，在线论坛，每一部分又分几小部分，内容比较充分，多样。

再后是收集资料与素材，大量浏览相关网站，收集关于婚纱的图片，进行Photoshop CS3图片处理和排版，插入好的文章和图片等，还有参考一些好的网站的布局，特色，颜色搭配，背景图等。

再后是设计网页图片，用flash制作动画，用Photoshop制作静态图片。再后是建立站点，和制作网页了，使用dreamweaver制作。

首页内容精彩丰富，首页主要是导航作用。首页制作时，时刻考虑着网页的基本原则：统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的；连贯，页面之间关系连贯，统成一体；每版内容都自成一体，颜色各异，便于浏览；整个网页有动有静，颜色不同，形成对比，不呆板，富有生气；颜色各异，但又不同之中又相同，浑然一体。

简洁实用: 这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。使用方便:同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美；页面用色协调，布局符合形式美的要求: 布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的。

利用我们所学的模板设计，制作更完美的页面。将动态网页与静态网页结合起来

再后，调试过程，好多次本来在Deamweaver CS3里好好的，把字调的好好的，位置很对，可在浏览器里御览就出毛病了，不是靠上了，就是靠下了，经过再三调试，整理，加了好多表格，终于满意了。

通过温本周的实训，发现自己还有很多的不足。框架的应用很难把握，切片也很难合理切割，当插入图片的时候把原有的模板给撑破了，精确定位很重要。

因为学艺不精，所以不会网页的代码设计，只能通过网络三剑客综合使用。不过也实践中也学到了很多知识，表格的嵌套是非常重要的，CSS样式的应用也很便捷。还有一些行为中的效果也是蛮不错的。所以这次实训还是很有意义的。

2.ASP制作网页的实训报告总结 篇二

系别：计算机工程系 专业：计算机网络 设计班级：网14班 姓名：张静龙

指导教师：乔文彪常娟

2012年12月27日

一、指导教师

乔文彪常娟

二、设计目的与要求

此次的网站设计使我们必须具备有：

（1）色彩构成、（2）图形、图像素材的获取与编辑处理、（3）音频、视频、动画素材的获取和处理、（4）简单数据库设计、（5）Dreamweaver软件的应用等相关知识。

本次《静态网页制作》《网页制作》设计可以培养我们的创新能力，把所学理论与实际操作紧密结合起来，提高其独立解决问题的能力。

三、设计内容、过程以及设计效果

1、设计内容：

我此次设计的网站主题是教育类网站，名为《思科网络学院》，设计中包含了4个导航信息，多个二级页面以及少许的三级页面，题型资料可供下载使用。

在此次期间主要是通过在网上搜集了相关的素材（题库以及各种页面效果的代码等）以及从图书馆借阅相关的书籍来进行对个人站点效果的设计。本次设计的网站主要是用来帮助大家快速了解思科网络学院的最新动态以及学习到思科网络知识，由于站点的容量有限，在这里我总结了几种学习思科网络的方式方法和经典题型。网站的设计来源主要是参考《思科网络学院》和《思科网络学习空间》两大网站，其中包含思科各种教程以及题库，在我的网站设计中也对这两个网站

进行了链接。

2、设计过程：

1、首先分析站点的设计思路及方法。

首先确定了自己的设计思路是思科网络学院，为了完成本次设计会用到相应的资料和素材，而网络和图书馆为我们提供了信息来源。

2、网站架构的确定以及目录链接的确定 架构的设计用到了word，网站的目录确定为 首页、概述、课程介绍、工具和资源、思科网络学院在中国5个导航信息栏，以及设计了各级页面中的导航信息。

链接则是由大量的二级页面，少量的三级页面，文本文档以及各种外部链接组成。

3、配置服务器及站点建立 开始进行配置服务器及站点的建立。本次建立的站点名为cisco，为防止站点目录下出现解析读取错误，所有目录下的所有文件均采用英文名字命名。

4、网站各级页面的设计 本次设计使用的是PS 7.0 专业绘图软件，通过使用PS的各项功能来设计网站的各级页面（一级页面，二级页面）。

5、网站各种标志的设计 此次网站logo的设计主要是模仿官方logo，然后再加以修饰。

6、网站导航及板块设计、版权信息设计 导航栏的设计主要用到的技术是PS中圆角矩形框工具以及文字工具进行设计，版权信息则是参考教材中的格式进行设计。

7、切片制作及各级页面的实现 通过PS的切片功能对设计好的全图像页面进行切片，然后通

过存储为Web格式来生成html格式的网页。

8、首页动态展示栏以及时钟的设计

完成上面的全图像页面设计后，就开始用Dreamweaver软件对首页进行动态设计。首先是从网上搜索到代码用以实现动态图片展示栏和时钟的效果。之前切片切好的页面用来做插入时钟代码的时候，结果造成网页拥挤，后来又重新进行切片，插入背景，然后再放入时钟代码，效果就做好了。

9、网页元素添加及格式设置

然后对首页中的图片滚动进行设计，在这里用到了书上相应的代码，至此一个网站的首页就完成了。在二级页面则是用到了大量的嵌入式框架，来对文字进行编辑。在其中一个二级页面（思科网院在中国）中用到了弹出式信息栏来显示各省思科网院的情况。

10、站点各级页面的链接添加及测试

对做好的各级页面进行链接，在这里可以用到库，避免了繁琐的步骤，最后测试网站。

3、设计效果：

在此次设计中使用的效果有：

Dreamweaver：动态信息展示栏、Flase动画、多次使用嵌入式框架、时钟、动态滚动图片、链接、弹出式信息栏、插入表格、背景，PS：切片工具、插入圆角矩形框、横排文字工具、魔棒、插入图片，渐变工具等。

四、设计地点与时间安排：

3.实训一 制作一个简单的网页 篇三

实训目标：用Dreamweaver制作一个简单的网页

一、用Dreamweaver创建和管理站点

（一）在D盘上创建“畅想未来”站点

在菜单栏中选择“站点”→“新建站点”，在文本框中输入网站的名称“畅想未来”。

（二）对站点进行规划

1．在文件面板中搭建站点的结构

（1）在站点根文件夹下建立4个子文件夹“city”、“novel”、“outspace”和“travel”。在文件面板中右单击站点“畅想未来”，选择“新建文件夹”命令。

2）在文件夹“city”中建4个子文件夹“images”、“sound”、“swf”和“webpages”。

3）将文件夹“city”中的4个子文件夹分别复制到“novel”、“outspace”和“travel”中。6（（方法：依次选中“images”、“sound”、“swf”和“webpages”，然后按住Ctrl键，分别将其拖动到“novel”、“outspace”和“travel”中。

结果如下图所示。

（二）设置网站首页，重新搭建站点结构

1．设置网站首页

（1）右单击站点的根文件夹，从弹出的快捷菜单中选择“新建文件”命令。（2）将文件重命名为“index.html”。（3）将其设置成首页。

2．重新搭建站点结构

（1）将站点的根文件夹下的4个子文件夹“city”、“novel”、“outspace”和“travel”删除。（2）在站点的根文件夹下新建2个子文件夹“images”和“webpages”，如下图所示。

在Dreamweaver中打开文件“txt3_1.txt”，并将其另存为index.html。

二、设置index.html网页属性

选择“修改”→“页面属性”，打开“页面属性”对话框。

（一）设置页面外观

在“分类”→“外观”中按下图设置“页面字体”：宋体、“文本颜色”：#034881、“背景颜色”：#B8DCF4。

（二）设置页面标题

在“分类”→“标题/编码”中按下图设置“标题”：畅想未来。

（三）按F12键，保存并预览网页。

三、制作index.html网页

（一）编辑文本

1．编辑网页中的文本。

按下图编辑index.html网页中的文本。

换行标记
的使用

HTML文件中任何位置只要使用了
标记，当文件显示在浏览器中时，该位置之后的文字将显示于下一行，该
标记就是起到换行的标记。段落标记

的使用

由

标记所标识和文字，代表同一个段落的文字。在浏览器中，不同段落文字间除了换行外，有时还会以一行空白加以间隔，以便区别出文字的不同段落，其语法如下：

文字

的有什么区别呢？通俗的讲就是，它们在分行的时候
分得行比

分得行距比较大！

在HTML代码中，
是换行符，表示强制性换到下一行。而

则是分段符，相当于回车，等同于两个
。

Copyright ? 2007200x 畅想工作室，All Rights Reserved
如果您对我们的服务有任何意见或建议，请惠赐E-mail至:teach_ie@163.com
联系电话：0755-12345678 联系人：丝雨轻梦

2．设置文本格式

（1）在第一行前输入2个空格，并去掉最后3行之间的空行，如下图所示。

（2）将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”设置为“标题2”，并为其添加项目符号。

（3）将“设为首页”、“加入收藏”、“联系我们”、“网站管理”设置为“标题5”。（4）将最后4行文本的对齐方式设置为“居中”。（5）将最后3行文本的颜色设置为灰色（#999999）。

3．添加和删除中文字体

（1）添加“隶书”、“华文行楷”等中文字体。

（2）将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”5行文字的字体设置为华文行楷。

（3）按F12，保存并预览网页。

（二）在页面中插入和处理图象

1．插入图象

（1）在index.html页面顶端插入图象“img3_1.jpg”。

（a）将光标置于页面左上角的起始处，然后按回车键，生成一个空行。

（b）在菜单栏中选择“插入”→“图象”命令，找到素材文件夹webcoursechapter03images中的图象“img3_1.jpg”。注意：要将其复制到站点的“images”文件夹中。

（c）用同样的方法，在第一段下面插入图象“img3_2.jpg”，效果如下图所示。

2．调整图象“img3_1.jpg”、“img3_2.jpg”的对齐方式

（1）使图象“img3_1.jpg”居中对齐。方法：选中图象“img3_1.jpg”，在属性面板中单击“居中对齐”按钮。

（2）使图象“img3_2.jpg”左对齐。方法同上。3．调整图象“img3_2.jpg”的周边间距

选中图象“img3_2.jpg”，按下图设置图象的垂直边距和水平边距。

4．为图象“img3_2.jpg”添加提示文本：科幻图象

方法：选中图象“img3_2.jpg”，在“属性”面板的“替换”文本框中输入“科幻图象”，然后按回车键。按F12，保存并预览网页，效果如下图所示。

（三）插入水平线

1．在页面中插入水平线

（1）将插入点置于“设为首页”文本前。

（2）在菜单栏中选择“插入”→“HTML”→“水平线”。

2．修改水平线

将水平线设置成居中对齐、宽：920像素、高：5像素。如下图所示。

3．将水平线的颜色设置为蓝色

（1）选中水平线。

（2）单击“属性”面板右侧的“快速标签编辑器”中输入“color=”#024918””。

按钮，打开“快速标签编辑器”，如下图所示，在其

（3）按F12键预览，可以看到水平线变为蓝色了。

（四）插入特殊字符

1．在页面页脚插入版权字符“©”（Ctrl+Alt+c）

（1）删除页脚中的“？”。

（2）在菜单栏上选择“插入”→“HTML”→“特殊字符”，从单出的子菜单中选择“版权”。

2．改变栏目颜色

将“未来都市”、“未来旅游”、“未来通讯”、“展望太空”、“科幻小说”5行文本的颜色设置为与顶端“畅想未来”logo相同的颜色。

方法：先选中文本，然后在文本的“属性”面板上单击“文本颜色”按钮，拖动鼠标移动滴管到所要设置的颜色上单击即可，如下图所示。

至此，本页面已完成，完成后的效果如下。

四、实训总结

（一）本实训介绍了利用Dreamweaver创建站点的方法

1．建立站点，首先要规划站点结构，然后创建站点。2．其中重点介绍了利用“文件”面板管理站点文件的方法。

（二）制作一个简单的网页

1．设置页面属性 2．网页中的基本元素

（1）在网页中编辑文本 字体格式和段落格式（2）在网页中插入图片 图片格式的设置

（3）在网页中插入水平线 水平线格式的设置

（4）在网页中插入特殊字符

五、作业

参照提供的作业结果，利用所给的素材文件，制作一个介绍台湾音乐团体“信乐团”的网站，要求如下：

1．在Dreamweaver创建本地站点文件夹，将网页用到的素材按类别复制到站点文件夹中。2．新建index.html文件，设置页面背景图象为bg.jpg，网页标题为“信乐团”。3．插入基本页面元素，包括文本、图象、水平线和日期对象，效果如下图所示。