网页设计实训总结3篇

【路引】由阿拉题库网美丽的网友为您整理分享的“网页设计实训总结3篇”文档资料，以供您学习参考之用，希望这篇范文对您有所帮助，喜欢就复制下载支持吧！

网页设计实验报告实验心得1

一、实验目的：了解HHTML中涉及的技术。

HTML语言的组成及特点，学会利用HTML语言编辑网页。 了解CSS。

了解网站开发的流程。

二、实验内容

1.参考书节，利用记事本实现唐诗实例。

(1):在“记事本”中输入虞美人的文本。

(2):选择“文件”—>“保存”命令，将该文件保存为“虞美人。html”，此时该文档将显示IE图标。

(3):打开图标。

如图所示：

2. 在Dreamweaver中输入如下代码：

3.请写出以下效果的HTML代码(包括分行及分段效果)

角标的实现：在拆分视图下的文本编辑区域输入X1，然后看其在代码编辑区的变化。想要实现上下角标要用到角标在字母的上方； 角标在字母的下方。

红色字体的实现：在文本编辑区域回车编写“这是红色的字”然后选中这行字在属性面板中选择颜色为红色。

粗体字的实现：在文本编辑区域回车编写“这是粗体字”然后选中这行字在属性面板中点击粗体。

斜体字的实现：在文本编辑区域回车编写“这是斜体字”然后选中这行字在属性面板中点击斜体

4.我上网浏览了谷歌

他的URL：http：//

目 标：谷歌的目标是“万能搜索”

此网站的导航利用超连接及表单等实现导航的

实验二、Dreamweavor应用

一、实验目的：掌握如何在Dreamweaver中进行网页编辑； 掌握Dreamweaver中站点的设置；

掌握网站空间的申请及网页的上传。

二、实验内容

1.将实验1中的内容，利用DreamWeavor完成，并注意在拆分视图下，观察它是如何将格式操作变成HTML代码的。

2.按书中要求，制作唐诗宋词网站的首页。

3.在Dreamweaver中设置站点，并为唐诗宋词网站规划网站文件夹结构

上面内容就是差异网为您整理出来的3篇《网页设计实训总结》，能够帮助到您，是差异网最开心的事情。

网页设计实验报告实验心得2

一 设计目的

本课程的设计目的是通过实践使同学们经历Dreamweaver cs3开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver cs3可视化开发工具进行网页开发的方法；了解网页设计制作过程

通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。

根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。

熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。 增强动手实践能力，进一步加强自身综合素质。 学会和团队配合，逐渐培养做一个完整项目的能力。

二、课程设计题目

玩转西安

三、课程设计要求

1.课程设计要求一组一题，每题之间不得有雷同现象。

2.每个题目至少要 有15个不同页面(不能利用模板生成)，总页面不少于30个。作品中必须有为索引页，作品中需包含flash动画、超链接、图片、声音等多媒体元素。

3.课程设计过程中，首先要进行项目调研分析、技术设计分析及页面布局。 4.设计结束时，每人须按题目分析设计的要求，上交所有的HTML文档和素材，将所有文件只作为压缩包，文件名按“学号+姓名+项目名称”来命名。

5.作品内容必须要和课程设计报告中的项目内容要一致，设计报告要求在5000字左右，报告内容应有课程设计题目、需求分析、设计制作方案及关键制作技术等内容，必要处需要将效果图抓屏后进行插图。课程设计报告要求用A4纸打印后与作品一同上交，无设计报告者不予评定成绩。

选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。首先，做好需求调研。调研方式主要是上网查阅资料，在图书馆里翻阅相关书籍。调研内容如下：

1、 网站当前以及日后可能出现的功能需求。

2、 客户对网站的性能(如访问速度)的要求和可靠性的要求。 3、 确定网站维护的要求。 4、 网站的实际运行环境。

5、 网站页面总体风格以及美工效果。 6、 主页面和次级页面数量等。 7、 内容管理及录入任务的分配。

8、 各种页面特殊效果及其数量(如flash等)。 9、 项目完成时间及进度。

然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。

我们选做的主题是旅游交通，并且选定题目为“玩转西安”，其目的是做一个简单的网站，介绍西安旅游的各个方面，提供一定的资讯信息，。进行一番调研之后，该网站整体站功能结构图如下：

(一)建立布局

在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver cs3是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。

1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。 2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。

(二)网页中的图像

图像传输是WWW的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返(如果图片很大，效果会适得其反)。 图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在Internet Explorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。 (1)在网页中插入图像

利用Dreamweaver cs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：

1.新建一个空白网页，把光标定位在网页的开始位置。

2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。 3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。 4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。 (2)图像的各种属性设置 1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框。 2.打开“外观”选项卡。

(1)设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。

(2)设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种：

①左环绕：图像在左边，文本在图像的右边进行环绕。 ②右环绕：图像在右边，文本在图像的左边进行环绕。

在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”

网页设计实训总结3

静态网页设计专业实训总结报告提要：

网页设计实训就快结束了，在这短短的两周里，我学会了很多新的知识，更掌握了新的技能，让我觉得受益匪浅。在实训时，有空闲就会想到学校里青葱岁月，简单流畅，无忧无虑。

插入apdiv标签，插入图片，创建超链接，设置段落

作品展示

图一：中秋送祝福

项目2

项目介绍

有铁血战鹰的的图片素材及相关资料，对铁血战鹰进行描述，创建“铁血战鹰网页”

关键技术

应用表格布局，插入横线对网页进行美化

作品展示

图二：铁血战鹰

项目3

项目介绍

现有自然写真的图片，要求自然写真的图片在鼠标经过时换成别的图片，点下导航栏的标题时转向别的网页，制作静态网页，网页名称为自然写真。

关键技术应用

练习头标题的应用，超链接的创建，flash的插入，导航栏的创建。

作品展示

图三：自然写真

3．实训过程总结

实训收获

这个阶段的实训我们主要是练习网页制作及网站发布的各种知识。近些年随着计算机的广泛应用，Internet已经成为人们获得信息不可或缺的媒介，特别是Internet的普及和发展，网络已经成为了不可或缺的通信手段。无论是最新的新闻信息、新产品的出台、新游戏的发布、最新的动态，包括等候就业人才的个人简历，我们都是可以通过网络来获得。但是什么为这提供平台的呢。我们又是通过什么来获取这些信息的呢―网页。由于人们使用网络的频繁，网页作为上网的主要依托就变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。网页设计直接面对的是大量的用户，随时都会反馈回来对网页的批评建议等，可以根据实际情况进行修改，这样做可以使使用者用起来更加的方便。

Dreamweaver工具为我们实现这些提供了便利，下面我将网页制作和网站发布的知识总结如下：

（1）网页制作的前期工作是搜集大量的素材，我们的网页只有是实用的才会是大众喜欢的，搜集素材以充实我们的网页。当然我们也应该在此时定下网站的方向是什么，剩下的就是靠Dreamweaver进行编辑；

（2）网页的版式设计，版式设计时我们应该有重点，把重要的内容新闻放在醒目的位置上。规划各元素在网页中的位置关系和表现方法，合理安排图像、文本等元素，使网页布局合理、美观大方；

（3）文本编写，我们的网页中需要大量的文字材料，这就要在网页编辑器中用HTML语言中的标签编写。也可以利用网页编辑工具的“所见即所得”功能，直接写入文字。在浏览器中运行时出现冗余代码时返回代码页面重新进行查看修改；

（4）处理网页之间的关联，这主要是建立合理、高效的网页导航系统；

（5）网页发布过程，主要是将建设好的网页上传到服务器中供用户浏览。

存在的问题及解决思路

（1）在Dreamweaver基础方面：制作网页时如何实现网页不跳转就可以出现新的内容，实现页面内的。链接；用代码编写网页上的按钮，实现按钮的各种功能，如刷新，重置，确定操作。Css样式表的概念模糊。

（2）网站风格方面：一个网站的各个页面之间风格应该是统一的，只有围绕一个风格才会成功。

（3）网站的内容方面：在制作网站时内容之间应该是相关的，在制作时我们不能追求面面俱到，只能做到精益求精。杂乱无章的网站是不会有大的发展的。

4．结束语

网页设计实训就快结束了，在这短短的两周里，我学会了很多新的知识，更掌握了新的技能，让我觉得受益匪浅。在实训时，有空闲就会想到学校里青葱岁月，简单流畅，无忧无虑，回想各位老师的授课，孜孜不倦，学校的生活固然是快乐，但是学校的实训课程真的很重要，因为它能让我们这些在校学生接触到社会的发展，让我们有时间岗位环境，顺利得从单纯的校园生活感到复杂社会生活的不同。在这一周的时间里，我一心只做网页，做自己喜欢的风格的网页。经历了一次充实而有愉快的实训，我学会了制作框架、使用锚点、给网页网页插入背景音乐、表格、视频、flash、导航条等更深层次的掌握了它们的用法，现在我心目中的网页也已经大体竣工，我感到很开心，经过这两的不断探索，我喜欢上了这门课程，感觉很有意思。或许实训的结束代表一段新生活的开始，但是我认为它不但是一门课，需要我们去掌握，同时还可以锻炼我们的逻辑思维能力和思维的严密性，还有就是在制作网页的过程中，更需要有不错的艺术审美观，这样，你做出的网页才会赏心悦目，让人眼前一亮，也就是从此刻起，我决心好好钻研这门课，力求这方面的技能达到顶级。虽然网页已经完成，可这并不是一件轻而易举的事情，在此过程中遇到了许多以前不曾遇到的问题，多的情况都是自己解决，万不得已之际，我会主动问老师和同学，直到弄懂为止！让我更加清楚地明白老师平日里的良苦用心，也更加清楚地明白了自己以后应该怎样去做事。