网页设计实验报告实验心得体会5篇

网页设计实验报告实验心得体会5篇

网页设计(web design，又称为Web UI design，WUIdesign，WUI)，是依据企业盼望向扫瞄者传递的信息(包括产品、服务、理念、文化)，进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣扬物料的其中一种，精致的网页设计，对于提升企业的互联网品牌形象至关重要。 下面是我带来的有关网页设计试验报告试验心得，盼望大家喜爱

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

本学期的网业设计课程，开展了动态思维训练教学活动，对于我们同学来说，可以激发学习爱好，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、独特的个人网页。总体来说，整个学期的学习过程，我学会了许多学问，虽然过程比较艰辛，但在INTENET领域中，有了一个展现自我的空间，我觉得很快乐、很有成就感。

一.充分发挥动手力量

作为网页设计的初学者，我对网页设计特别感爱好，一心想设计出一个美观、有用、内容丰富的个人网页。本学期的教改方案由以前同学单纯接受学问变为主动参加教学活动。在这样的压力和动力下，通过自己动手、动脑，通过网络资源，老师的指导，在不断发觉问题和解决问题的过程中学到了许多学问，也增添了我的创作力量和动手力量，在网页设计过程中，从构思到设计、完善、维护，整个过程我都全身心投入，使我真正学到了网页设计的学问。

第 1 页

二.在设计过程中不断提高网页设计水平

在本次网页设计中，我不仅学到了许多关于网页设计方面的学问，也从中学会了关于网络、编程等方面的学问。我从最初开头运用FrontPage设计网页，到后来运用Dreamweaver、Flash、Fireworks等网软件设计网页，完善网页。在这个过程中，我通过自学教材、上网查询，学习了Dreamweaver、Flash、Fireworks等网页软件的应用，学会了管理、维护自己的站点，以及一些简洁动画、控件的制作等等。在设计过程中也消失了许多的问题，但通过看书，上网查询，请教老师等方式，不断的学习、解决、提高，设计出的网页不管是外观还是内容，都在不断的进步、改善。可以说在自己动手，不断实践的过程中，网页设计水平得到了很大的提高。

三.缺乏之处

由于平常工作比较繁忙，学习时间比较少，对于网页设计软件的强大功能运用得还不够。在网页设计过程中，由于没有网页制作代码的学问，所以在设计时也遇到了许多麻烦，有时插入一个特效脚本也是很麻烦。在网页制作过程中，想提高设计水平，想有个抱负的网页，必需学会代码的运用，我将在以后的学习过程中不断加强这方面的学习，盼望老师能简洁介绍一下代码，让我也对它有个初步的熟悉，以后再加强学习也才会有所提高。

总体来说，通过今次的对网页设计的学习，有收获也有圆满、缺乏的地方，但我想，我已经迈入了网页设计的大门，只要我再仔细努力的去学习，去提高，凭借我对网页设计的热忱和执着，我将来设

第 2 页

计出的网页会更加专业，更完善。也盼望老师在今后的日子里多指导。

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

如今，计算机和网络已经深化到了我们生活中的方方面面，也已经成了生活中不行缺少的一部分，网络成了我们猎取学问和信息的一种便捷工具，如今的网民也在不断的增多，所以，了解和学习网络学问是我们作为一名高校生迫切所需的，

我利用寒假的时间，对网页设计进行了初步的熟悉和了解，并基本把握Dreamweaver的应用。

通过对网页设计书籍的翻阅，我学习到了一些关于建设网站和制作网页的学问，在实践查阅资料时，对flash也有所了解。我还了解了一些基础的网络技术。通过学习，我对计算机有了更深层次得到了解，也有了更深厚的爱好。尤其是对网页制作的过程与一些技巧手法更有了另外一番了解，对网页制作的基础学问也有了肯定的把握。在这个过程中，我同样熟悉到网页设计不是一门学科的独秀，而是多种课程的综合，他是、Flash、Fireworks等网页软件的综合应用。

下面阐述一下我在翻阅《Dreamweaver》时的一些关于网页设计的见解。在详细的制作一个网页时我了解到一个优秀的网页设计应当具备一些基本原则。

首先，要·确定网页设计的内容一个优秀的风站要有一个明确的主题。整个网站围绕这个主题,也就是你在网页设计之前要明确你这个网站有什么目的,用来做什么，全部页面都是围围着这个内容来制作，有了明确的内容对排名有很重要的作用;其次，要了解你网站

第 3 页

所在行业的客户，及你的网页属于哪个类别。用户是一个网站成败的关键,假如用户要花许多时间进入你网站很有可能用户会马上关掉你网站,或者你网站操作很不便利用户也会立刻离开,这种网站是很失败的设计,只会让用户绝望的离去.

在完成以上的基本内容之后网页的基本框架便成形成了，

下面要开头的便是优化工作，

内容是整个网页的核心。在网页设计之前必需明确网页的内容支配。优秀网页设计是要建立在平凡的基础上的。然后在详细的规划一个网页时，可以用树状结构先把每个页面的内容大纲列出来，尤其要制作一个大的网站(有许多页面)的时候，特殊需要把这个架构规划好，也要考虑到以后可能的扩充性，免得做好以后又要一改再改整个网站的架构，很铺张时间和财力。大纲列出来后，还必需考虑每个页面之间的链接关系。是星形，树形，或是网形链接。这也是判别一个网站优劣的重要标志。链接混乱，层次不清的站点会造成扫瞄困难，影响内容的发挥。框架定下来了，然后开头一步一步有条理，有次序地做来，就胸有成竹得多，也会为主页将来进展打下良好的基础。下一步，就以动手制作详细内容了，题材选定，框架选定，接下来就开头往主页里面填内容。

假如是个人主页，有力量的人完全可以靠自己来创作全部的内容。大部分人的方法是：从报纸，杂志，光盘等媒体中把相关的资料收集整理，再加上肯定的编辑后就可以了。另外一个好的方法是从网络上收集，您只要到搜寻引擎上查找相应的关键字，就可以找到一大

第 4 页

堆的资料。在预备材料的时候我们可以用一些小的动画和动态图片，Flash供应了功能齐全的绘图和编辑图形工具。可以直接在编辑区里绘画，编辑修改特别敏捷，它的另一大特点是“交互性”强。在动画播放时，可以用鼠标或键盘对动画的播放进行掌握，效果可以很直观的反映出来。然后是开头正式制作主页。通过Dreamweaver作为制作软件，只需要用到软件中的一些基本的功能：图片插入和对齐设置;文字的格式、颜色、背景颜色的设置等就可以制作出一个简洁的网页。

总体来说，通过这个假期对网页设计的学习，有收获也有圆满。但是，我已经迈入了网页设计的大门，只要我再仔细努力的去学习，在今后的闲余时间学习制作网页的更多学问以实现自身技能的提高，我坚信将来设计出的网页会更加专业，更加华丽，使它最终成为自己的一项技能。

网页设计试验报告试验心得3

转瞬间，已到了期末，学习网页设计这门课程也要结束了，虽然时间有点短，但是学过这个几周以后我受益匪浅。

记得最初接触dreamweaver的时候，我很茫然，由于刚接触生疏的软件心里会很可怕跟不上老师的进程。刚开头几节课，老师讲得比较基础，还能跟得上，慢慢的老师授课的进程开头加速，有些跟不上了，需要下课后自己补上，问老师和四周的同学。慢慢的，在老师的悉心教育下，我们开头熟识这个软件了。老师布置的第一个任务，要求做一个自我形象网站。由于学习的时间较短，老师只要求用PS做好模板即可，任务相对简洁。但也要求设计感强，颜色搭配和谐，

第 5 页

并且尽可能的做成有用又符合实际的美丽网页。

其次个网页设计老师要求相对较高，用dreamweaver做一个比较接近真实的网页，还要做一个二级页面。于是开头收集各方面的资料。确定了主题就开头布局了。最开头使用了一个表格，然后在表格内进行拆分合并处理，接着就把通过ps处理出来一个版头并且把修改正大小的图片放进去了。

中间时预览，问题消失了，发觉版头与下面的图片文字之间消失了很大的一段距离，但是在软件中已经把距离缩小为0了，多次尝试后没有效果。最终想到可以另外再加一个表格，把版头放在一个表格内面，这样问题就解决了。预览是效果还不错。但是总觉得首页做得太一般，一次扫瞄学长做的网页时，觉得他们的文字滚动窗口做得效果做得不错，于是想借见一下。就确定把自己网站的左边修改修改。复制了他的代码，把上面的内容修改成我的网站需要的文字。本以为可以轻松的完成，但是却消失大问题了。

由于需要滚动的文字占的空间太大，把左边的那部分表格全部占满了，而在实际的网页预览中，这个有文字滚动的框只占了左边Oeasy教你玩转网页设计扫瞄的工具建站程序三分之一，左边有三分之二留白了。我就想可不行以把文字这样一层层的放在上面，试了许多方法，在网站查了许多资料，可能由于没有专业术语作为搜寻的关键词，查不到任何相关的资料，试过div标签，试过不停的拆分表格，最终还是没有效果。就这样试着试着，突然想到了层这个概念。于是在布局中点击了绘制层，结果胜利了，经过一些加工，最终胜利的完

第 6 页

成左边的布局。印象还比较深刻的是插入声音，记得老师曾经给我们讲过许多次怎样插入声音，可是等到自己做网页的时候却遗忘了，于是问其他人，结果竟然都遗忘了，于是自己在百度上收。最终最终找到了一个可以使用的代码，但是在加入声音路径时消失了问题。在属性内加入源文件，结果就是加不进去MP3的音乐文件，然后自己就尝试加入了一个视频，登记了路径格式，然后照着这种格式写下了指向声音源文件的路径，最终胜利了。在设计过程中还消失了许多的问题，但通过看书，上网查询，请教同学等方式，不断的学习、解决、提高，设计出的网页不管是外观还是内容，都在不断的进步、改善。可以说在自己动手，不断实践的过程中，网页设计水平得到了很大的提高。热忱和执着，我将来设计出的网页会更加专业，更完善。

网页设计试验报告试验心得4

一 设计目的

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

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

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

第 7 页

娴熟把握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。 增添动手实践力量，进一步加强自身综合素养。学会和团队协作，渐渐培育做一个完好项目的力量。

二、课程设计题目

玩转西安

三、课程设计要求

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

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

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

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

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

第 8 页

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

2、 客户对网站的性能(如访问速度)的要求和牢靠性的要求。

3、 确定网站维护的要求。 4、 网站的实际运行环境。

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

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

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

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

(一)建立布局

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

1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个也许的布局。2.使用背景图片：选中该项，按扫瞄可以插入一幅预备好的图片作为表格的背景，由于图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要掌握好。

(二)网页中的图像

第 9 页

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

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

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

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

(1)设定图像边框粗细：在“外观”选项卡的“布局”栏里可

第 10 页

以依据需要定义图像的边框，也可以定义边框值为“0”，即无边框。

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

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

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

网页设计试验报告试验心得5

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

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

了解网站开发的流程。

二、试验内容

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

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

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

(3):打开图标。

如下图：

第 11 页

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

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

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

角标在字母的下方。

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

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

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

4.我上网扫瞄了谷歌

他的URL：http：//

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

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

试验二、Dreamweavor应用

一、试验目的：把握如何在Dreamweaver中进行网页编辑; 把握Dreamweaver中站点的设置;

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

二、试验内容

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

第 12 页

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

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

第 13 页