静态网页的制作实验报告

范文一：静态网页的制作实验报告

软件学院

实验报告

专方业：_________软件工程__________________ 向：__________云计算与大数据_______________

JavaWeb _______________

课程名称：__________ 班学姓

级：________________________ 号：_______1_______________ 名：_________________________

辅导教师：_________________________

2016 年 3 月制

成绩：实验时间 2016 年 3 月 19 日 8 学时数时至 12 时 1. 实验名称 4H

静态网页的制作

2. 实验目的

1、掌握 HTML 标签元素的使用 2、会使用 div+css 布局网站首页 3、会使用 JavaScript 进行客户端数据校验

3. 实验内容

1、根据前期作业中的项目概述，设计并完成一个网站首页 2、设计一个登陆页面（可以包含在首页中） 3、根据你的项目概述，设计一个表单页面采集数据，可以是报名页面或注册页面或其它的信息录入页面。

4. 实验原理或流程图

用 di v+css 创建 3 个页面，网站首页，登录页面，注册页面，用超链接把他们连接起来。用 JavaScript 进行一些常用的数据校验。

5. 实验过程或源代码网站首页：

Insert title here #header{ margin: 0 auto; height:400px; width:1002px; background="image/falali.jpg"; clear:both; } #xiala{ margin: 0 auto; height:25px; width:1002px; background-color:#808080; } #main{ margin: 0 auto; height:600px; width:1002px; background-color:red; clear:both; } #lside{ height:600px; width:700px; background-color:pink; float:left; } #topa{ height:300px;

width:350px; background-color:#660000; float:left; } #topb{ height:300px; width:350px; background-color:#333333; float:left; } #bottoma{ height:300px; width:350px; background-color:#333333; float:left; } #bottomb{ height:300px; width:350px; background-color:#660000; float:left; } #rside{ height:600px; width:302px; background-color:#696969; float:right; } #footer{ margin: 0 auto; height:80px; width:1002px; background-color:gray; clear:both; line-height：24px； }

范文二：制作网页实验报告

XX大学课程设计报告

课程名称：

计算机网络

设计题目：网页制作

专业：

学生姓名：学生学号: 指导教师:

2014年6月12日

一：实验目的…………………………………..........…………1

二：实验原理…………………………………..........…………1

三：实验过程...…………………………………………………1

四：设计框图……………………………………………...……7

五：网页截图..…………………………………………………8

五：程序..………………………………………………………9

七：实验收获………………………………….. ……………15

一．实验目的

学会用HTML语言制作自己的网页，并且设置iis让别人可以浏览你的网页

二．实验原理

IIS（Internet Infomation Server）：Internet信息服务。它是一种Web服务，主要包括WWW 服务器、FTP服务器等。它使得在Intranet（局域网）或Internet（因特网）上发布信息很容易。Windows 2000 Advanced Server 上提供的为IIS 5.0。

超级文本标记语言(HTML)是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。

二．实验过程

① 设计网页：

注意：(网页中用到的所有的图片、音乐都和网页放在同意文件夹下)

1. 下载软件Dreamweaver

我没有学过HTML语言，所以用软件来做要方便的多，也可以更好的制作出自己想要的网页

2. 利用Dreamweaver制作出3个网页，分别为主页，个人简历，个人收藏

3.把三个网页用链接联系起来插入三个flash文本就行了

文本如下设置

主要需要设置的有2点：

? 文本：这里写上“主页”，告诉浏览者此链接的指向 ? 链接：这里点击“浏览”，选上你制作的3个网页中的index.htm

? 对于其余两个链接是类似的设置，只要把“文本”栏的“主页”换成“个人简历”

和“收藏”，对应的链接也换成制作的相应的网页即可

4.对每个网页都进行上个步骤的设置，这样无论在那个网页下你都可以通过点击flash

文本跳转到相应的页面。

② IIS设置：

1、添加 IIS：

选“控制面板→添加/删除程序→添加/删除Windows组件→选Internet信息服务” ，然后选”下一步”，系统将自动完成。

2、打开 IIS管理器：选“开始菜单→程序→管理工具→Internet信息服务”。如下图：

3、设置“默认Web 站点”项：

“默认Web 站点”一般用于对应向所有人开放的WWW 站点，本网中的任何用户以无限制地通过浏览器来查看它。 ⑵ 网站选项下拉，有个index选项，“index→右键→属性”打开属性窗。 ⑶ 置“Web 站点”：“IP地址”一栏选填入电脑的地址，如我的电脑地址为“192.168.1.111”；

“TPC端口”维持原来的“80”不变。

⑷ 设置“主目录”：在“本地路径”通过“浏览”按钮来选择你的网页文件所在的目录路径最好是英文的，中文路径有时候会出问题。

⑷ 设置“文档”：确保“启用默认文档”一项已选中，再增加需要的默认文档名并相应调整搜索顺序即可。此项作用是，当在浏览器中只输入域名（或IP地址）后，系统会自动在“主目录”中按“次序”（由上到下）寻找列表中指定的文件名，如能找到第一个则调用第一个；否则再寻找并调用第二个、第三个……如果“主目录”中没有此列表中的任何一个文件名存在，则显示找不到文件的出错信息。

③ 在浏览器中输入电脑地址“192.168.1.111”即可连接到主页

四．设计框图

五．网页截图

六．程序

● 主页的源程序：

Transitional//EN

ockwaveFlash

● 个人简历源程序：

XX的个人简历

XX的 resume

● 收藏源程序：

codebase=

七．实验收获

此次实验让我第一次做了一个自己的网站，有点小小的成就感，对超文本标记语言也有浅显的了解，对于初学者的我来说要做出一个排版简洁好看的网页还真是挺难的一件事情。有机会的话我会好好学习下HTML，制作出一个更好看的网页。这次使用的Dreamweaver软件做的网页，整体来说很不方便，特别是做表格的时候，不能随意移动，不能十分灵活的对表格进行处理。

范文三：网页制作实验报告

——四季之音小组

小组成员

XXX

网页制作实验报告——四季之音小组

一、实验目的 ...................................... 错误,未定义书签。

二、实验过程与思考...................................................... - 1 -

1.主题选取与分工...................................................... - 1 -

2.模板的设计 ............................................................ - 3 -

3.制作过程中所感与所得 .......................................... - 3 -

XXX,导航页、“四季之音”首页,, ................... - 3 -

XXX,春之音,, .................................................. - 4 -

XXX,夏之音,, .................................................. - 5 -

XXX,秋之音,, .................................................. - 6 -

XXX,冬之音,, .................................................. - 9 - 三、实验总结 .............................................................. - 10 -

网页制作实验报告——四季之音小组

一、实验目的

通过亲自动手制作网页来熟悉Dreamweaver 8的应用，并培养实践能力和小组合作意识。

二、实验过程与思考

我们差不多都是第一次接触网页制作，小组成员有的以前用Frontpage制作过网页，因为Frontpage应用跟Word差不多，所以觉着网页制作不会很难。初次接触的时候觉得这个网页制作也应该不会很难，但后面实践的时候才发现原来真的任何事都要自己亲自去体会才知道其中的滋味，仅凭自己想象是不会有收获的。这次的网页制作我们学到了不少知识，给自己又加上了一项技术，虽然自己不是专业人士，但也不至于以后用的时候手足无措。 1.主题选取与分工

我们小组做的是以音乐为主的网页。

在讨论阶段，我们从环保、动漫、游戏、音乐这几个方面中选择了音乐，因为音乐与我们的生活还是有很大关系的，音乐会影响我们的心情，会影响我们做事的效率。所以我们决定以大学生的视角，选一些大学生可能喜欢的音乐来做一个网站，加上对人物的介绍以及对所推荐的音乐的赏析，推荐给同样作为大学生的其他同学们。并且根据各类音乐的特点，将欢快、热烈、典雅、静谧等音乐

- 1 -

网页制作实验报告——四季之音小组

特点分别与四季的特点结合起来。这是比较创新的方面。我们组5个成员，分工合作，4个组员(郭玫、徐孟东、李小梦、龙洁)负责各音乐版面，组长刘甲负责主页的设计。

我们一开始觉着音乐没有那么多分类的讲究，但后面做的时候，通过查找资料才发现自己理解的太片面了。

校园歌曲

校园歌曲朝气蓬勃，极富有校园味道，毫无矫饰，完全是率真性情的流露，听起来十分感人，激励学子进步，它形象地反映出青年学子的生活，表现出年轻人的蓬勃朝气、青春活力以及他们那富有诗意的浪漫气息，其曲风总体来说朴实明快、积极向上，充满活力，深受人们的喜爱和传唱。

摇滚

摇滚的音乐来源非常广泛，主要的包括布鲁斯、R&B、和乡村音乐，其它还有福音音乐、传统的流行乐、爵士、以及民间音乐。所有的这些影响加在一起构成了一种简单的以布鲁斯为基础的歌曲结构，它是快速的、适于跳舞的、而且容易让人记住的。摇滚分为酸性摇滚(Acid Rock) 、艺术摇滚(Art Rock)、朋克摇滚(Punk Rock)、轻柔摇滚(Soft Rock)、民谣摇滚(Folk Rock) 、非主流摇滚(Alternative Rock)等等。

古典音乐

古典音乐的内涵其实很深，我们了解的只是是它跟轻音乐的交汇部分。古典音乐不同于流行音乐，它内涵深刻，能发人深思，使

- 2 -

网页制作实验报告——四季之音小组

人高尚、免于低俗。它是一个独立的流派，艺术手法讲求洗练，追求理性地表达情感。

轻音乐

轻音乐可以让人消除工作紧张，减轻生活压力，避免各类慢性疾病等，这些都是有医学根据的。在医学研究中发现，经常的接触轻音乐节奏、律动会对人体的脑波、心跳、肠胃蠕动、神经感应等，产生某些作用，进而使身人身心健康。音乐无形的力量远超乎个人想象，所以聆听音乐、鉴赏音乐，是现代极为普遍的生活调剂。 2.模板的设计

我们组没有做模板，因为一开始就把每页的构造大致设计出来了，我们每个人只需要按照上面的结构，再根据实际情况作调整就行了。我们觉得做一个模板出来，让大家都用一个版式，有点单一，缺少灵活的变动，给人的感觉也是很单调的。

3.制作过程中所感与所得

小组成员的感想:

XXX(导航页、“四季之音”首页):

大学第一次带领同学进行实验，由于心理准备不够充分，导致我们组的组织活动一直不是很好，以后会加强的。

说说制作网页的感想吧。虽然已经接触网络不少的时间，但是，直到实验结束我才发现，对网页的了解很少。课堂学来的知识都是

- 3 -

网页制作实验报告——四季之音小组

死的，拿来用才觉得不是那么简单。比如背景音乐的插入有好几种方法，每种都有不同的特点，对应的是不同的情况。还有网页的结构，布局等等，这些都大有学问，在此我不敢多说，因为我对于网页制作的过程的了解程度还是不够深入，制作是不能熟练的进行，还是要去查阅大量的资料。知道的越多，未知的也就越多。这就是我做大的收获:厚积而薄发，加强运用，深入了解。继续努力吧～ XXX(春之音):

这次的网页制作真是花了大量时间啊～

我所负责的板块是“春之音”，我把它定名为校园歌曲，因为校园歌曲犹如校园中的一缕春风，表达同学们的心声。

由于是刚接触到网页制作，对里面的内容不太熟悉，制作时出现了很多问题。

第一个就是标题栏图片的选取了。有很多图片可供选择，但是由于对PS、fireworks等软件操作不熟悉，后来就放弃标题栏的设置了，不过和背景统一的话，也不难看。

第二个就是层的应用了。由于要加入一些图片，为了便于管理，就想加入层的效果。但是加入之后发现反而不利于管理了。层的位置会在网页浏览时改变，而且层其实不太适合放在内容中。后来改为插入很多表格来固定图片的位置，图片的效果就比较明显了。

第三个就是特殊效果的设置了。对于字体的移动还有鼠标放上去时就停留的效果，由于老师上机时演示了，因此就比较容易了。

- 4 -

网页制作实验报告——四季之音小组

还有一个问题，就是图片的演示效果。可以将图片设置成移动和停留效果，不过那样需要的空间有点大了。所以我做了一个flash的图片效果，可以将图片放在一个位置依次放映。

这样之后，还需要很多次的调试与演示，包括表格的长度设置，背景的调试，还有图标的大小设置等等，才能最终达到比较理想的效果。

当然，由于是新手，网页的格式可能不是很规范，页面的效果也不是特别好，但是我已经尽力了，并且从中学到了知识，体会到了乐趣，这一点是最重要的。

XXX(夏之音):

首先我觉得，设计一个网页最重要的首先是确立本网站的主题，但是光这一项不少人就浪费了很多时间。再其次我认为次重要的是本次网页制作的各小组中的版面设计和规划，一开始就上来做根本无从下手。因此，初具规模的网页设计和纸面上的规划是重要的。

而对于网页的制作中链接的应用，不应只停留在不同链接的程度上，适度的使用锚链接和不同链接以及其他型的链接，是对于一个网站很不错的应用。

锚链接的应用是很好用的。

- 5 -

网页制作实验报告——四季之音小组

再其次，我觉得本次实验的确锻炼了我们的动手能力，但最重要的时我认为这次实验我们掌握了一种团队的精神，每个人都有自己的见解和看法，但是又必须在全局的整体观中进行必要的调整，譬如整个网站的一致性和色调的统一性之类。

XXX(秋之音):

做的过程中发现了自己的缺点，其实自己有时候挺符合老师说的眼高手低的情况，自己有时候不会多练习一下，觉得只用看课本听老师讲就肯定没问题，可是到做的时候才发现问题很多，很大一部分都是因为自己没熟练操作造成的，自己以后一定要改掉这个习惯。

我们在确定好自己负责的这一部分后，就从网站上找了很多关于主题方面的图片、文本之类的素材，但由于选择的面很多，有时

- 6 -

网页制作实验报告——四季之音小组

候很难决定，所以花了很多时间。

做的过程中技术方面还遇到一些问题。一个问题是建立站点的时候，虽然是跟着老师做的，但在做的时候还是出错了。自己首先是把站点存储在u盘上，后来老师说放在E盘上，自己才改了。最先不知道如果建立了一个站点，但不想要的话要怎么删除，是我在操作过程中看见一个站点管理，然后试着打开才知道原来对站点进行修改删除等操作就是在这。原来什么都要自己亲自去尝试才知道如何用。

另一个问题就是插入的图片在IE浏览器中它的背景和自己设置的网页背景不一样，浏览时就会显得很不和谐，效果如下图。原来背景是其他颜色，后来改成黑色，不和谐的效果就不太明显。自己一直在想怎么改，后来去找学姐请教才知道，这是因为自己下的图片是png格式，在IE6中不支持，如果换成其他的浏览器就可

- 7 -

网页制作实验报告——四季之音小组

以看到。如果没有得到指导，我可能还一直在苦苦寻找改进的方法呢。有时候自己一个人的力量是不够的，或许别人的一句或会让我们苦思冥想的问题豁然开朗，所以还是要多问，会学到很多。

第三个问题是在设置文字滚动效果时，在结束的时候少了“>”。

还有最开始对让字幕滚动很不熟，是向小组成员请教了才知道的，通过多次的操作现在也熟练了。

第四个问题是自己的内容有了，但缺少一些网页上特殊的效果，自己对那些代码不是很熟，所以没能弄成自己想要的结果，这个问题自己会利用时间去找相关书籍或者向老师情请教，拓宽自己在网页制作方面的知识。

通过这次网页制作，我发现了自己的不足，包括操作上的，还有和小组成员之间的合作方面，以后要尽力改善这些不足。

- 8 -

网页制作实验报告——四季之音小组

XXX(冬之音):

制作网页是一个很复杂精细的过程，在插入表格之前，必须先在纸上计算画好所设计的页中需要几行几列，插入表格后，就是内容填充的问题了，我在填充图片的时候，发现了一个问题，就是当图片所需空间比单元格的面积大的时候，它会胀大所在单元格，而将其他的单元格挤得非常小，而且这种单元格的变化是不可逆的，经过老师的帮助，我才了解到在插入图片之前，应该先设定单元格的大小，插入图片后，再对图片进行处理，可以先在图片编辑中对其大小进行剪裁处理，也可在页面上选中图片对其长宽进行设置，使得图片的大小与先前设置的单元格的大小相匹配。

在设置文字滚动的时候，我一开始时让歌词自左向右滚动，并让它当鼠标移开时滚动，至于文字之上时停止，我一开始将顺序弄反了，将停止放在前，滚动放在后，使得文字无法停止。我觉得设置代码的效果很神奇，就在网上搜索了很多关于控制语言的代码介绍各个参数的用法，以下是搜索结果:

创建一个滚动的字幕相关参数:

direction 表示滚动的方向，值可以是left，right，up，down，默认为left;behavior 表示滚动的方式，值可以是scroll(连续滚动)、slide(滑动一次)、alternate(来回滚动);loop 表示循环的次数，值是正整数，默认为无限循环;scrollamount 表示运动速度，值是正整数，默认为6;scrolldelay 表示停顿时间，值是正整数，默认为0，单位是秒;valign 表示元素的垂直对齐方式，值

- 9 -

网页制作实验报告——四季之音小组

可以是top，middle，bottom，默认为middle;align 表示元素的水平对齐方式，值可以是left，center，right，默认为left;bgcolor 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色;height、width 表示运动区域的高度和宽度，值是正整数(单位是像素)或百分数，默认width=100%;height为标签内元素的高度;hspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素;onmouseover=this.stop()

onmouseout=this.start() 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

下面的例子使用了 MARQUEE 元素创建了由左向右的滚动字幕，移动速度为每 200 毫秒 10 像素。

scrolldelay="200">滚动内容

类似的参数还有很多很广泛的应用，以后要学得东西还有很多，学海无涯啊! 三、实验总结

网页设计这个实验给我们带来了很多，从一开始不了解网页制作流程，到逐渐揭开这层神秘面纱，我们用自己的亲身经历探索了互联网中很重要的一个环节。通过亲自上机实践来发现问题，并通过解决问题来巩固所学到的知识，这是这次的实验给我们带来的最深体会。

纵然抱有一腔热情，由于缺少经验，网页的设计中仍然有较多

- 10 -

网页制作实验报告——四季之音小组

缺陷。但是我们已经尽力，因而问心无愧了。

这次的实验只是探索网页制作的一个开端，我们不会囿于现有的知识，而是会在以后的学习中逐渐巩固并且加强。我们坚信，天道酬勤，付出一定会有回报～

文案编辑词条

B 添加义项 ?

文案，原指放书的桌子，后来指在桌子上写字的人。现在指的是公司或企业中从事文字工作的职位，就是以文字来表现已经制定的创意策略。文案它不同于设计师用画面或其他手段的表现手法，它是一个与广告创意先后相继的表现的过程、发展的过程、深化的过程，多存在于广告公司，企业宣传，新闻策划等。

基本信息

中文名称

文案

外文名称

Copy

1发展历程

2主要工作

3分类构成

4基本要求

5工作范围

6文案写法

7实际应用

折叠编辑本段发展历程

汉字"文案"(wén àn)是指古代官衙中掌管档案、负责起草文书的幕友,亦指官署中的公文、书信等;在现代，文案的称呼主要用在商业领域，其意义与中国古代所说的文案是有区别的。

在中国古代，文案亦作" 文按 "。公文案卷。《北堂书钞》卷六八引《汉杂事》:"先是公府掾多不视事，但以文案为务。"《晋书?桓温传》:"机务不可停废，常行文按宜为限日。" 唐戴叔伦《答崔载华》诗:"文案日成堆，愁眉拽不开。"《资治通鉴?晋孝武帝太元十四年》:"诸曹皆得良吏以掌文按。"《花月痕》第五一回:" 荷生觉得自己是替他掌文案。"

旧时衙门里草拟文牍、掌管档案的幕僚，其地位比一般属吏高。《老残游记》第四回:"像你老这样抚台央出文案老爷来请进去谈谈，这面子有多大!"夏衍《秋瑾传》序幕:"将这阮财富带回衙门去，要文案给他补一份状子。"

文案音译

- 11 -

网页制作实验报告——四季之音小组

文案英文:copywriter、copy、copywriting

文案拼音:wén àn

现代文案的概念:

文案来源于广告行业，是"广告文案"的简称，由copy writer翻译而来。多指以语辞进行广告信息内容表现的形式，有广义和狭义之分，广义的广告文案包括标题、正文、口号的撰写和对广告形象的选择搭配;狭义的广告文案包括标题、正文、口号的撰写。

在中国，由于各个行业发展都相对不够成熟，人员素质也参差不齐，这使得"文案"的概念常常被错误引用和理解。最典型的就是把文案等同于"策划"，其实这是两种差别很大，有着本质区别的工作。只是由于文案人员常常需要和策划人员、设计人员配合工作，且策划人员也需要撰写一些方案，这使得很多人误认为文案和策划就是一回事，甚至常常把策划与文案的工作会混淆在一起(这也和发源于中国的"策划学"发展不够成熟有关)。

广告文案

很多企业中，都有了的专职的文案人员，只有当需要搞一些大型推广活动、做商业策划案、写可行性分析报告等需求量大的项目时，才需要对外寻求合作。以往一般企业都会找广告、文化传媒等公司合作。这些公司一般都有专业的文案、设计团队，经验也相对丰富，但因为业务量大，范围广泛，在针对性方面会较为薄弱。随着社会经济不断发展，对专业文案的要求更加严格，逐渐衍生了一些专注于文字服务的文案策划公司。这类企业发展速度很快，大多数都是从工作室形式转型而来，也有从文化传播机构独立出来的。

随着中国广告业二十余年的迅猛发展，广告公司的经营范围，操作流程，工作方式都在变化，文案的角色由无闻转为配角，现正昂首阔步走向台面，成为主角，从前一则广告多是由设计出计划，再配图之后，文案轮为完稿，一则广告的计划多是由文案与美工共同完成，然后各自分工。说起文案的地位，日本是从1992年意识到文案的重要性，台湾是1998年。2002年，大陆的一些中大型广告公司的老总几乎都在垂叹，好的文案太少了。好的文案往往愿意扎堆，从全国形式来看，这股潜规则正逐渐由华南广告重镇广州向华东中心上海转移。

折叠编辑本段主要工作

撰写报纸广告、杂志广告、海报; 撰写企业样本、品牌样本、产品目录; 撰写日常宣传文案白领一族

文案白领一族

- 12 -

网页制作实验报告——四季之音小组

产品或品牌命名，并作创意阐述; 为路演或活动命名，并作创意阐述; 撰写活动请柬及活动现场宣传品上的文字; 为各种礼品命名，并作创意阐述; 为专卖店命名，并作创意阐述; 撰写商店的橱窗或店内POP物料文案; 撰写软文、新闻式、故事式、评论式; 撰写策划书，或协助策划人员优化、润色方案文字; 协助客户企业内刊的编辑，提供主题方向，审核文字。不同的环境对文案撰稿人有着不同的锤炼和要求。

折叠编辑本段分类构成

从现有的文案分类有很多种，按照4A标准，一般有四类:助理文案(ACW)，文案(CW策划文案

策划文案

)，高级文案(ACW)，资深文案(SCW)，其中稍微要区别的是高级文案与资深文案，前者要求的是文案的撰写能力，而后者不仅仅是文案的撰写能力还包括做文案的年资。有些4A公司设有文案主任(CE)一职，大体上与文案职责类似，有时候负责专项。另外有些个别公司还配有首席文案的职位(CCW)，文案功力凤毛麟角，虽不具领导才能，但有的首席文案拿的工资却比创意总监还要高。大部分国内广告公司文案的种类繁杂，有房地产文案、创意文案、企划文案、品牌文案等。

文案是由标题、副标题、广告正文、广告口号组成的。它是广告内容的文字化表现。在广告设计中，文案与图案图形同等重要，图形具有前期的冲击力，广告文案具有较深的影响力。

广告标题:它是广告文案的主题，往往也是广告内容的诉求重点。它的作用在于吸引人们对广告的注目，留下印象，引起人们对广告的兴趣。只有当受众对标语产生兴趣时，才会阅读正文。广告标语的设计形式有:情报式，问答式、祈使式、新闻式、口号式、暗示式、提醒式等。广告标语撰写时要语言简明扼要，易懂易记，传递清楚，新颖个性，句子中的文字数量一般掌握在12个字以内为宜。

广告副标题:它是广告方案的补充部分，有一个点睛的作用。主要表现在对标题的补充及让人感觉，前面的不懂，在这里全部让人了解。

广告正文:广告正文是对产品及服务，以客观的事实、具体的说明，来增加消费者的了解与认识，以理服人。广告正文撰写使内容要实事求是，通俗易懂。不论采用何种题材式样，都要抓住主要的信息来叙述，言简易明。

广告口号:口号是战略性的语言，目的是经过反复和相同的表现，以便名域其他企业精神的不同，使消费者掌握商品或服务的个性。这以成为推广商品不可或缺的要素。广告口号常有的形式:联想式、比喻式、许诺式、推理式、赞扬式、命令式。广告口号的撰写要注意简洁明了、语言明确、独创有趣、便于记忆、易读上口。

所谓广告文案是以语辞进行广告信息内容表现的形式。广告文案有广义和狭义之分，广义的广告文案就是指通过广告语言、形象和其他因素，对既定的广告主题、广告创意所进行的具体表现。狭义的广告文案则指表现广告信息的言语与文字构成。广义的广告文案包括标题、正文、口号的撰写和对广告形象的选择搭配;狭义的广告文案包括标题、正文、口

- 13 -

网页制作实验报告——四季之音小组

号的撰写。

折叠编辑本段基本要求

1)准确规范、点明主题

准确规范是文案中最基本的要求。要实现对广告主题和广告创意的有效表现和对广告信息的广告文案

广告文案

有效传播，首先要求广告文案中语言表达规范完整，避免语法错误或表达残缺。其次，广告文案中所使用的语言要准确无误，避免产生歧义或误解。第三，广告文案中的语言要符合语言表达习惯，不可生搬硬套，自己创造众所不知的词汇。第四，广告文案中的语言要尽量通俗化、大众化，避免使用冷僻以及过于专业化的词语。

2)简明精炼、言简意赅

文案在文字语言的使用上，要简明扼要、精练概括。首先，要以尽可能少的语言和文字表达出广告产品的精髓，实现有效的广告信息传播。其次，简明精练的广告文案有助于吸引广告受众的注意力和迅速记忆下广告内容。第三，要尽量使用简短的句子，以防止受众因繁长语句所带来的反感。

3)生动形象、表明创意

文案中的生动形象能够吸引受众的注意，激发他们的兴趣。国外研究资料表明:文字、图像能引起人们注意的百分比分别文字是35%, 图像是65%，文案创作时采用生动活泼、新颖独特的语言的同时，附助以一定的图像来配合。

4)优美流畅、上口易记

文案是广告的整体构思，对于由其中诉之于听觉的广告语言，要注意优美、流畅和动听，使其易识别、易记忆和易传播，从而突出广告定位，很好地表现广告主题和广告创意，产生良好的广告效果。同时，也要避免过分追求语言和音韵美，而忽视广告主题，生搬硬套，牵强附会，因文害意。

折叠编辑本段工作范围

策划文案和创意文案

一)策划文案:工作主要是将策划工作人员的策划思路形成文字。毋庸置疑，公司很多策划人员均有很强的策划水平和丰富的策划经验，但有时候手上同时进行几个案子，同时时间又比较紧的情况下，文案可以在充分理解策划意图的情况下帮助策划人员完成策划方案的写作。这其中有几个内容:

1.必须充分了解本案的运作背景，包括宏观市场信息和微观市场动态。

- 14 -

网页制作实验报告——四季之音小组

2.掌握整个策划的战略指导思想。

3.以通俗易懂、言简意赅的论述方式将策划思想反映在字里行间。

4.到比较专业的问题或障碍的时候，应及时与策划人员沟通，保证策划方向的一致性。

5.贯彻战略方针的同时，也可就战略思想的表达方式和文字提述上提出一些合理化建议，从而更好地展现策划的战略核心点。

二)创意文案:主要是将广告作品的表现及形式用完整的文字表达出来，其中，除了产生画面的构想之外，还包括广告语言的表现内容(如平面的标题、引文、正文、随文，广告语等，影视的音效、旁白、字幕、广告语等)。其中至关重要的就是新颖的创意和传神的文字表现。而这些智慧的闪光绝对不是拍一下脑门子就能出来的。这其中包括了以下内容:

1.通过各个层面，特别是swot方面深入理解，从而找出项目的核心优势。

2.把握目标消费群的心态。

3.掌握宏观政策及大市场对项目本身的影响。

4.场策划人员和设计人员保持密切联系，随时沟通。

5.市场上类似房产项目的文案及创意，力求全面加以突破。

6.获悉开发商对文案创作的要求，调整文字内容和形式。

折叠编辑本段文案写法

商家要吸引、留住消费者必须注重细节的提高和改善，而其中，文案就是不可忽视的一大细节。下面是一些能吸引买家的写文案方法:

折叠九宫格思考法

拿一张白纸，用笔先分割成9宫格。中间那格填上你的商品名，接下来开始在其它8格填上可以帮助此商品销售的众多可能优点。这是强迫创意产生的简单练习法，我也常用这种方式构思出企划案或演讲PPT的结构。

折叠要点衍伸法

把该商品型录上的商品特点照抄下来，然后每个要点后面加以延伸。如果你真的很懒，照抄型录商品卖点也可，但文字会比较没有人味，说服力道会稍差。

折叠三段式写作法

- 15 -

网页制作实验报告——四季之音小组

这是仿新闻学中"倒三角写作法"。第一段，请精要地浓缩全文的销售话术，因为多数人都没耐心看全文。第二段，请依照型录要点衍伸法，逐一说明该商品的众多特色。到底是点列还是一段长文章较好，要看你的文字功力。文字功力欠佳就点列式写出卖点即可。最后一段是「钩子」，主要任务是要叫人【Buy Now】，所以一般是强化商品USP(Unique Selling

Point，独特销售卖点)、价格优势或赠品。

折叠编辑本段实际应用

市场研究

没有正确的市场导向，任何文案或创意都是天马行空的奇思怪想。的确，再优美的文字用在不适宜的场合中都可能导致整个策划执行的失败。一篇优秀的文案，一定是在对市场有深入的了解后方能下笔的。例如不同地区的经济发展水平、文化构成、风土人情、产业结构比重等等皆有很大差异，同一地区不同年龄、阶层人士的世界观、思维观、道德观和价值观也参差不齐，加上特定环境、特定历史背景或政策规文赋予某些项目的特殊意义，都会对文案产生深远的影响。所以无市场，文案便如枯井之蛙，其作品不仅缺乏远见，生命力也极为低下。

沟通与互助

在创作一幅作品时，常常发生这种情况:设计人员与文案人员一开始没有很好的沟通;结果是设计人员设计出来的作品文案看来好像是曲解了原意，而将文案配上去时候，设计人员又认为文案的风格与画面差入甚大。矛盾自然就出现了。其实文案和设计，乃至市场、企划、媒体等各部门工作人员都应随时保持高效的沟通。通篇来看，文案的工作是将市场的调查分析结果作为其创作的翔实论据、企划的核心思想作为其创作的指引方向，媒体投放的渠道作为其创作的特定模式，设计排版作为其创作的具体表现。因此，每一个环节都是动态维系着的。在做一个文稿之前，与各个部门广泛沟通，并做到互爱互助，才能在一个凝聚力超强的团队中展现出自己独特的个性和才华文案编辑词条

B 添加义项 ?

基本信息

中文名称

文案

外文名称

Copy

1发展历程

2主要工作

- 16 -

网页制作实验报告——四季之音小组

3分类构成

4基本要求

5工作范围

6文案写法

7实际应用

折叠编辑本段发展历程

文案音译

文案英文:copywriter、copy、copywriting

n àn 文案拼音:wé

现代文案的概念:

广告文案

- 17 -

网页制作实验报告——四季之音小组

快，大多数都是从工作室形式转型而来，也有从文化传播机构独立出来的。

折叠编辑本段主要工作

撰写报纸广告、杂志广告、海报; 撰写企业样本、品牌样本、产品目录; 撰写日常宣传文案白领一族

文案白领一族

单页、各类宣传小册子; 撰写DM直邮广告，包括信封、邮件正文; 撰写电视广告脚本，包括分镜头、旁白、字幕; 撰写电视专题片脚本; 撰写电视广告的拍摄清单; 撰写广播广告; 将海外版广告文案作汉化(翻译); 撰写广告歌词，或汉化(翻译)外文歌词; 撰写各种形式的网络广告; 为网站栏目命名; 撰写网站内部文案; 撰写手机短信广告; 撰写各类广告作品的创意阐述; 撰写广告口号; 撰写产品包装文案，包括:品牌名、使用说明、产品成分等; 为产品或品牌命名，并作创意阐述; 为路演或活动命名，并作创意阐述; 撰写活动请柬及活动现场宣传品上的文字; 为各种礼品命名，并作创意阐述; 为专卖店命名，并作创意阐述; 撰写商店的橱窗或店内POP物料文案; 撰写软文、新闻式、故事式、评论式; 撰写策划书，或协助策划人员优化、润色方案文字; 协助客户企业内刊的编辑，提供主题方向，审核文字。不同的环境对文案撰稿人有着不同的锤炼和要求。

折叠编辑本段分类构成

从现有的文案分类有很多种，按照4A标准，一般有四类:助理文案(ACW)，文案(CW策划文案

策划文案

广告标题:它是广告文案的主题，往往也是广告内容的诉求重点。它的作用在于吸引人们对广告的注目，留下印象，引起人们对广告的兴趣。只有当受众对标语产生兴趣时，才会阅

- 18 -

网页制作实验报告——四季之音小组

读正文。广告标语的设计形式有:情报式，问答式、祈使式、新闻式、口号式、暗示式、提醒式等。广告标语撰写时要语言简明扼要，易懂易记，传递清楚，新颖个性，句子中的文字数量一般掌握在12个字以内为宜。

广告副标题:它是广告方案的补充部分，有一个点睛的作用。主要表现在对标题的补充及让人感觉，前面的不懂，在这里全部让人了解。

折叠编辑本段基本要求

1)准确规范、点明主题

准确规范是文案中最基本的要求。要实现对广告主题和广告创意的有效表现和对广告信息的广告文案

广告文案

2)简明精炼、言简意赅

3)生动形象、表明创意

文案中的生动形象能够吸引受众的注意，激发他们的兴趣。国外研究资料表明:文字、图像

- 19 -

网页制作实验报告——四季之音小组

能引起人们注意的百分比分别文字是35%, 图像是65%，文案创作时采用生动活泼、新颖独特的语言的同时，附助以一定的图像来配合。

4)优美流畅、上口易记

折叠编辑本段工作范围

策划文案和创意文案

1.必须充分了解本案的运作背景，包括宏观市场信息和微观市场动态。

2.掌握整个策划的战略指导思想。

3.以通俗易懂、言简意赅的论述方式将策划思想反映在字里行间。

4.到比较专业的问题或障碍的时候，应及时与策划人员沟通，保证策划方向的一致性。

5.贯彻战略方针的同时，也可就战略思想的表达方式和文字提述上提出一些合理化建议，从而更好地展现策划的战略核心点。

1.通过各个层面，特别是swot方面深入理解，从而找出项目的核心优势。

2.把握目标消费群的心态。

3.掌握宏观政策及大市场对项目本身的影响。

4.场策划人员和设计人员保持密切联系，随时沟通。

5.市场上类似房产项目的文案及创意，力求全面加以突破。

- 20 -

网页制作实验报告——四季之音小组

6.获悉开发商对文案创作的要求，调整文字内容和形式。

折叠编辑本段文案写法

商家要吸引、留住消费者必须注重细节的提高和改善，而其中，文案就是不可忽视的一大细节。下面是一些能吸引买家的写文案方法:

折叠九宫格思考法

折叠要点衍伸法

折叠三段式写作法

Point，独特销售卖点)、价格优势或赠品。

折叠编辑本段实际应用

市场研究

沟通与互助

在创作一幅作品时，常常发生这种情况:设计人员与文案人员一开始没有很好的沟通;结果是设计人员设计出来的作品文案看来好像是曲解了原意，而将文案配上去时候，设计人员又认为文案的风格与画面差入甚大。矛盾自然就出现了。其实文案和设计，乃至市场、企

- 21 -

网页制作实验报告——四季之音小组

划、媒体等各部门工作人员都应随时保持高效的沟通。通篇来看，文案的工作是将市场的调查分析结果作为其创作的翔实论据、企划的核心思想作为其创作的指引方向，媒体投放的渠道作为其创作的特定模式，设计排版作为其创作的具体表现。因此，每一个环节都是动态维系着的。在做一个文稿之前，与各个部门广泛沟通，并做到互爱互助，才能在一个凝聚力超强的团队中展现出自己独特的个性和才华

文案编辑词条

B 添加义项 ?

基本信息

中文名称

文案

外文名称

Copy

1发展历程

2主要工作

3分类构成

4基本要求

5工作范围

6文案写法

7实际应用

折叠编辑本段发展历程

文案音译

文案英文:copywriter、copy、copywriting

- 22 -

网页制作实验报告——四季之音小组

文案拼音:wén àn

现代文案的概念:

广告文案

折叠编辑本段主要工作

撰写报纸广告、杂志广告、海报; 撰写企业样本、品牌样本、产品目录; 撰写日常宣传文案白领一族

文案白领一族

- 23 -

网页制作实验报告——四季之音小组

或协助策划人员优化、润色方案文字; 协助客户企业内刊的编辑，提供主题方向，审核文字。不同的环境对文案撰稿人有着不同的锤炼和要求。

折叠编辑本段分类构成

从现有的文案分类有很多种，按照4A标准，一般有四类:助理文案(ACW)，文案(CW策划文案

策划文案

广告副标题:它是广告方案的补充部分，有一个点睛的作用。主要表现在对标题的补充及让人感觉，前面的不懂，在这里全部让人了解。

折叠编辑本段基本要求

- 24 -

网页制作实验报告——四季之音小组

1)准确规范、点明主题

准确规范是文案中最基本的要求。要实现对广告主题和广告创意的有效表现和对广告信息的广告文案

广告文案

2)简明精炼、言简意赅

3)生动形象、表明创意

4)优美流畅、上口易记

折叠编辑本段工作范围

策划文案和创意文案

1.必须充分了解本案的运作背景，包括宏观市场信息和微观市场动态。

2.掌握整个策划的战略指导思想。

- 25 -

网页制作实验报告——四季之音小组

3.以通俗易懂、言简意赅的论述方式将策划思想反映在字里行间。

4.到比较专业的问题或障碍的时候，应及时与策划人员沟通，保证策划方向的一致性。

5.贯彻战略方针的同时，也可就战略思想的表达方式和文字提述上提出一些合理化建议，从而更好地展现策划的战略核心点。

1.通过各个层面，特别是swot方面深入理解，从而找出项目的核心优势。

2.把握目标消费群的心态。

3.掌握宏观政策及大市场对项目本身的影响。

4.场策划人员和设计人员保持密切联系，随时沟通。

5.市场上类似房产项目的文案及创意，力求全面加以突破。

6.获悉开发商对文案创作的要求，调整文字内容和形式。

折叠编辑本段文案写法

商家要吸引、留住消费者必须注重细节的提高和改善，而其中，文案就是不可忽视的一大细节。下面是一些能吸引买家的写文案方法:

折叠九宫格思考法

折叠要点衍伸法

折叠三段式写作法

这是仿新闻学中"倒三角写作法"。第一段，请精要地浓缩全文的销售话术，因为多数人都没耐心看全文。第二段，请依照型录要点衍伸法，逐一说明该商品的众多特色。到底是点

- 26 -

网页制作实验报告——四季之音小组

列还是一段长文章较好，要看你的文字功力。文字功力欠佳就点列式写出卖点即可。最后一段是「钩子」，主要任务是要叫人【Buy Now】，所以一般是强化商品USP(Unique Selling

Point，独特销售卖点)、价格优势或赠品。

折叠编辑本段实际应用

市场研究

沟通与互助

文案编辑词条

B 添加义项 ?

基本信息

中文名称

文案

外文名称

Copy

1发展历程

2主要工作

3分类构成

4基本要求

- 27 -

网页制作实验报告——四季之音小组

5工作范围

6文案写法

7实际应用

折叠编辑本段发展历程

文案音译

文案英文:copywriter、copy、copywriting

文案拼音:wén àn

现代文案的概念:

广告文案

- 28 -

网页制作实验报告——四季之音小组

折叠编辑本段主要工作

撰写报纸广告、杂志广告、海报; 撰写企业样本、品牌样本、产品目录; 撰写日常宣传文案白领一族

文案白领一族

折叠编辑本段分类构成

从现有的文案分类有很多种，按照4A标准，一般有四类:助理文案(ACW)，文案(CW策划文案

策划文案

- 29 -

网页制作实验报告——四季之音小组

字数量一般掌握在12个字以内为宜。

广告副标题:它是广告方案的补充部分，有一个点睛的作用。主要表现在对标题的补充及让人感觉，前面的不懂，在这里全部让人了解。

折叠编辑本段基本要求

1)准确规范、点明主题

准确规范是文案中最基本的要求。要实现对广告主题和广告创意的有效表现和对广告信息的广告文案

广告文案

2)简明精炼、言简意赅

3)生动形象、表明创意

- 30 -

网页制作实验报告——四季之音小组

4)优美流畅、上口易记

折叠编辑本段工作范围

策划文案和创意文案

1.必须充分了解本案的运作背景，包括宏观市场信息和微观市场动态。

2.掌握整个策划的战略指导思想。

3.以通俗易懂、言简意赅的论述方式将策划思想反映在字里行间。

4.到比较专业的问题或障碍的时候，应及时与策划人员沟通，保证策划方向的一致性。

5.贯彻战略方针的同时，也可就战略思想的表达方式和文字提述上提出一些合理化建议，从而更好地展现策划的战略核心点。

1.通过各个层面，特别是swot方面深入理解，从而找出项目的核心优势。

2.把握目标消费群的心态。

3.掌握宏观政策及大市场对项目本身的影响。

4.场策划人员和设计人员保持密切联系，随时沟通。

5.市场上类似房产项目的文案及创意，力求全面加以突破。

6.获悉开发商对文案创作的要求，调整文字内容和形式。

- 31 -

网页制作实验报告——四季之音小组

折叠编辑本段文案写法

商家要吸引、留住消费者必须注重细节的提高和改善，而其中，文案就是不可忽视的一大细节。下面是一些能吸引买家的写文案方法:

折叠九宫格思考法

折叠要点衍伸法

折叠三段式写作法

Point，独特销售卖点)、价格优势或赠品。

折叠编辑本段实际应用

市场研究

沟通与互助

- 32 -

网页制作实验报告——四季之音小组

的渠道作为其创作的特定模式，设计排版作为其创作的具体表现。因此，每一个环节都是动态维系着的。在做一个文稿之前，与各个部门广泛沟通，并做到互爱互助，才能在一个凝聚力超强的团队中展现出自己独特的个性和才华

- 33 -

范文四：网页制作实验报告

实验报告

实验项目名称：网页设计与制作所属课程名称：网页设计与制作实验类型：操作型实验实验日期： 2008 年 5 月9日班级：学号：姓名：成绩：

：

以小组为单位自行设计一个网页，利用Photoshop设计网页的初稿和基本框

架，然后用网页制作工具软件如FrontPage,Dreamweaver等具体完成网页。

[]

1、实践上课的理论知识，利用网页制作软件制作网页； 2、网页设计的要有明确的主题，突出风格等； 3、要对制作的网页进行介绍。

[]

1、 HTML语言的基本掌握；

2、 Photoshop工具的熟练应用；

3、网页制作工具软件（如FrontPage，Dreamweaver）的具体应用。

[]

1、分组（5人一组）；

2、确定主题，设计网页方案；

3、收集并整理资料，完成网页制作。

：

根据确定的网页主题，用Photoshop完成基本的框架设计，再用FrontPage制

作出网页。

[]

1、确定主题，设计网页方案；

2、分组并分配小组成员的具体工作任务； 3、收集并整理资料；

4、利用Photoshop完成网页的初稿；

5、运用FrontPage制作并完成网页。

[]

1、确定网页的主题为酒店；

2、利用Photoshop制作出的网页的框架，如图：

3、使用FrontPage将Photoshop设计的初稿制作出来，如图所示：

[]

通过这次网页制作的经历，我们充分发挥了团队的力量，集大家的想法于一

体，完成了我们的第一个网页。在这过程中我们虽然也借鉴别的网页，但我们也

加入了许多自己的设计，最终使网页制作完成并在布局、外观设计、代码的方面基本符合规定。

[]

通过这次实验，让我们深深体会了看似一个简单的网页，其制作过程有很多

值得注意的小细节。在使用Photoshop时，图层的应用时是各很大的阻碍，如果

不用图层的话，各个图片的修改或者变动会影响其他的图片，以致影响全局的设计；另外，利用FrontPage制作网页时，最主要的是使用表格来完成的，有时若

不用表格的嵌套，插入的内容会互相影响，最终还是会破坏网页；最后还应注意

的是，插入图片文件的路径确定后，不能随便更改文件的名称，否则会导致打开

网页时不能显示图片。

评语：

成绩：指导教师签名：

批阅日期：

范文五：网页制作实验报告

Dreamweaver+Fireworks

网页制作

实验指导书

安徽电子信息职业技术学院

软件学院数字艺术系

实验一、绘制直线、矩形—书本的制作 ............................................................ - 3 -

实验二、钢笔工具—Fireball篮球队LOGO设计 .............................................. - 4 -

实验三、文本工具—沿路径排列的文字 ............................................................ - 8 - 实验四、帧面板—数字连续翻滚动画 .............................................................. - 10 - 实验五、Dreamweaver 8基本操作 ................................................................... - 12 - 实验六、网页文本操作 ..................................................................................... - 14 - 实验七、网页图像操作 ..................................................................................... - 17 - 实验八、网页表格操作 ..................................................................................... - 20 - 实验九、超级链接 ............................................................................................. - 22 - 实验十、框架操作 ............................................................................................. - 25 - 实验十一、模板的运用 ..................................................................................... - 25 - 实验十二、CSS样式表的创建及运用 .............................................................. - 27 - 实验十三、表单 ................................................................................................. - 28 - 实验十四、综合运用—创建个人站点 .............................................................. - 29 -

实验一、绘制直线、矩形—书本的制作实验目的:

1.熟练Fireworks的文档操作;

2.熟练掌握绘图工具属性面板的使用;

3.掌握基本几何图形工具的使用，绘制直线、几何形; 实验内容:

1.绘制书本

2.给书本添加滤镜效果

实验步骤:

图1 效果图

1、首先制作一个桌布，使用矩形工具绘制一个填充色为#DFCFC0的矩形并

添加杂点;

Dreamweaver+Fireworks网页制作实验指导书

图2 制作桌布

2、制作书皮，矩形工具绘制一个矩形，并使用放射填充;

图3 制作书皮

3、为书皮增加质感，添加杂点;

- 1 -

Dreamweaver+Fireworks网页制作实验指导书

图4 为书皮增加质感

4、制作书本投影效果;

图5 投影效果

5、制作书本边框效果，绘制一个长宽都比书皮少6px的矩形，无填充，边框使

用喷枪-纹理，透明度为17%;

图6 制作边框效果

- 2 -

Dreamweaver+Fireworks网页制作实验指导书

图7 添加图书折边

7、书写文字，字体选择的Curlz MT(可用其他字体代替)，垂直渐变填充，并发光;

图8 书写字体

8、制作书角，使用L型工具，放射性渐变。最终完成效果

- 3 -

Dreamweaver+Fireworks网页制作实验指导书

图9 制作书角

实验二、钢笔工具—Fireball篮球队LOGO设计实验目的:

1.掌握钢笔工具的使用，绘制路径及修改路径;

2.掌握编辑图形颜色，编辑渐变填充;

实验内容:

Fireball篮球队LOGO设计

实验步骤:

1.新建一个 Fireworks 画布，设置画布的宽度和高度都为“300”像素，背景颜色为黑色。

2.使用【椭圆形】工具，在画布中绘制一个直径为“150”像素的正圆，填充任意颜色。

3.在【属性】面板中，给这个正圆，填充放射状变色，设置渐变的颜色为红色过度到黑色，并且调整渐变色的方向和范围，如图所示

- 4 -

Dreamweaver+Fireworks网页制作实验指导书

4.复制这个正圆，把复制出来的第2个圆填充色设置为透明，并且添加“4”像素粗细的白色边框，如图所示

5.再次复制刚刚得到的白色边框的正圆，在图层面板中选择位于下方的那个白色边框的正圆，并且把边框颜色更改为黑色，粗细为“11”像素，如图所示

6.使用【缩放】工具适当缩小这个黑色边框正圆的宽度，同时适当增加这个圆的高度，调整成一个椭圆形，并且和最下方的正圆居中对齐，如图所示。

- 5 -

Dreamweaver+Fireworks网页制作实验指导书

7.使用【钢笔】工具绘制这个球体中间的曲线，具体绘制过程如图所示。

8.在【属性】面板中设置这条曲线的笔触样式为【书法】?【基本】，并且设置笔触的颜色为黑色，粗细为“8”像素，如图所示。

9.使用同样的方法，绘制多个线条，排列成如图所示的效果。

10.按快捷键【Ctrl+G】，把所有的线条都组合起来，然后在【层】面板中调整其叠加顺序，放置到白色边框之下，如图所示。

- 6 -

Dreamweaver+Fireworks网页制作实验指导书

11.使用【文本】工具，在画布的下方输入文字“Fireball”，并且在【属性】面板中设置其字体为“Fatboy”，字号为“50”，如图所示。

12.给文字“fireball”填充线性渐变色，渐变的颜色同样为红色到黑色，并且调整渐变色的方向和范围，如图所示。

13.最后给文字添加滤镜，在【属性】面板的【滤镜】菜单中选择【Photoshop 动态效果】?【笔触】命令，并且进行相应的设置，效果如图所示。

- 7 -

Dreamweaver+Fireworks网页制作实验指导书

14.最后适当调整文字和圆形的位置，效果制作完毕。

实验三、文本工具—沿路径排列的文字

实验目的:

1.掌握文本的输入方法，包括使用文字工具输入、导入文本、粘贴文本; 2.掌握编辑文本，文本与路径等

实验内容:

制作出沿路径排列的文本,注意文本的排列方式以及属性栏中对文本字体、字号、对齐等选项的设置。

实验步骤:

1.新建一个 Fireworks 画布，设置画布的宽度和高度都为“400”像素，背景颜色为白色。然后选择工具箱中的钢笔工具，在绘图区绘制出一条曲线路径。如图1-1所示。

图 1-1

2.2、选择工具箱中文本工具，在绘图区单击，并书写内容如图1-2所示。

- 8 -

Dreamweaver+Fireworks网页制作实验指导书

图 1-2

3.选择指针工具，同时按住shift键，将文本与路径全部选中 4.选择 “文本” /“附加到路径”(将文本附加到指定的路径)结果如图1-3所示。

图 1-3

5、此时我们也可继续修改制作好的沿路径排列文本，打开“文本”/“方向”菜单我们会发现默认选中了“依路径旋转”命令，我们也可以选择“文本”/“方向”/“垂直”或“文本”/“方向”/“垂直倾斜”等命令，变更后效果如图1-4，图1-5，图1-6

图1-4(垂直)

图 1-5(垂直倾斜)

- 9 -

Dreamweaver+Fireworks网页制作实验指导书

图1-6(水平倾斜)

6、也可以使用“文本”/“倒转方向”命令制作倒着书写的文字。效果如图1-7。

图1-7(倒转方向)

7、如果制作的文本排列形式不如意，可以使用“文本”/“从路径分离”命令解除文本与路径的排列。然后可以重新调整路径的形状。编辑好以后可以重新执行1-4步骤的操作。

(属性面板上可以调整沿路径排列文本的对齐方式、位移、字体等)

实验四、帧面板—数字连续翻滚动画

实验目的:

1、掌握帧面板的使用方法;

2、练习使用fireworks制作简单动画。

实验内容:

数字连续翻滚动画，使用Fw中的“逐帧”制作出来的效果，还可以用同样的方法做成倒计秒数的动画。

实验步骤:

效果图:

1.在Fireworks中打开一个新的画布，选择工具栏中的文本工具，输入第一个数字，并设置好文字的字体、像素大小等样式

- 10 -

Dreamweaver+Fireworks网页制作实验指导书

2.打开帧面板，使用黑白选择工具，在面板是右上角点击，弹出下拉菜单，选择“重制帧...”。

3.在弹出的对话框中，如下图设置:

4.选择9个新帧，是因为动画包含0-9个数字(相当于10帧)。然后选择每一帧，并修改画布中的相应数字。

帧面板如下图所示:

- 11 -

Dreamweaver+Fireworks网页制作实验指导书

提示:帧面板中右手边显示的是默认的帧延时值7毫秒，即7/100秒的速度。如果动画播放的速度有些快，可以修改这个延时值。选择顶部帧，按住Shift键，点击底部的最后一帧，全选这些帧，在帧延时值处双击，在显示的对话框中设置一个更高的值。更高值将减慢动画的播放速度。

5.最后一步，打开优化面板，设置导出文件格式为“Gif动画”，如图:

也可以在帧面板的底部设置Gif动画循环，默认为“永久”选项。

实验五、Dreamweaver 8基本操作

实验目的:

1.掌握创建和管理网站的方法;

2.熟悉Dreamweaver 8的工作界面;

3.能够自定义工作环境。

实验内容:

1.验证创建站点和管理站点的方法;

2.创建个人网站，保存到指定路径;

3.用Dreamweaver 8创建网页及保存到指定路径;

实验步骤:

1.创建本地站点步骤

1)打开DREAMWEAVER,选择菜单下[站点]|[管理站点]| [站点]命令。

- 12 -

Dreamweaver+Fireworks网页制作实验指导书 2)在弹出“站点定义”对话框的高级标签中输入如下信息。

3)“站点名称”——输入站点名称如“myweb“。 4)“本地根文件夹”——选择本地文件夹如“D\myweb” 5)“HTTP地址”——输入实用的完整网站的URL。 6)选中缓存项

7)“确认”

8)建立站点文件

2.设计一个网页步骤

1)启动Dreamweaver 8选择[开始],[程序],[Macromedia],[Macromedia

Dreamweaver 8]菜单命令，打开如图所示的起始页。

- 13 -

Dreamweaver+Fireworks网页制作实验指导书

2)新建一个空白的HTML网页。在起始页面的“创建新项目”栏中单击“HTML”选项，Dreamweaver即会自动创建一个空白的HTML网页。

3)在工作区中输入内容。在工作窗口的“编辑窗口”中输入一些简单的句子，如“大家好，这是我的第一个测试网哦～”，如图所示。

4)保存网页。在浏览测试中，如果觉得比较满意，就可以保存当前网页了。保存的方法也有多种，一种是直接按【Ctrl+S】键;另外一种方法是选择[文件],[保存]菜单命令，在打开的“另存为”对话框中选择该网页的保存路径，然后单击按钮。

实验六、网页文本操作

实验目的:

1.掌握特殊文本的插入方法;

2.掌握应用项目列表;

3.掌握文本格式化的方法。

实验内容:

1.在网页中插入特殊文本;

2.在网页中应用项目列表;

3.对插入的文本进行格式化。

实验步骤:

1.在网页中插入特殊文本;

1)在页面中插入日期，设置日期的星期、日期、时间格式和保存时自动更新。

- 14 -

Dreamweaver+Fireworks网页制作实验指导书

2)单击“插入”栏中的“文本”选项卡，如图所示。

3)单击按钮，展开如图所示的“字符”下拉列表。

4)单击相应的选项即可在Web页面中添加相应的特殊字符，如图所示。

5)插入不换行空格，可执行如下操作之一。

,在“插入”栏的“文本”选项卡中，单击“字符”按钮，在下拉列表中选择“插入不换行空格”选项。

,选择[插入],[HTML],[特殊字符],[不换行空格]菜单命令。 ,按【Ctrl+Shift+空格键】键输入。

- 15 -

Dreamweaver+Fireworks网页制作实验指导书

,将输入法切换到全角状态再按空格键

2.创建文字链接的步骤

1)选中要建立链接的文本。

2)单击“文本”属性面板“链接”文本框后的按钮，在打开的“选择新文件”对话框中选择要链接的文件，

2.单击“确定”按钮返回到Dreamweaver编辑窗口，新建链接地址出现在“链接”后的文本框中，同时，编辑窗口中的文本显示为蓝色，且加上了下划线。 3.插入日期

1)选择[插入],[日期]菜单命令，或者选择“插入”栏的“常用”选项中，然后单击“插入日期”按钮，则打开如图所示的“插入日期”对话框。

2)在弹出的“插入日期”对话框中选择星期格式、日期格式和时间格式。 3)选中复选框，则在日期格式插入到文档中后可以对其进行编辑单击“确定”按钮即可插入日期。

4.插入水平线

1)在“文档”窗口中，将插入点放在要插入水平线的位置。

2)执行以下操作之一。

,选择[插入],[HTML],[水平线]菜单命令;

,在“插入”栏的“HTML”选项中单击“水平线”按钮。

5. 插入特殊字符

1、在页面中输入如下文字:

,在页面中插入特殊符号如:“,和空格符”。

,将光标定位到插入特殊字符的位置。

,单击“插入”栏中的“文本”选项卡，如图所示

,在页面中插入日期，设置日期的星期、日期、时间格式和保存时自动更新。 ,选择[插入],[日期]菜单命令，或者选择“插入”栏的“常用”选项中，然后单击“插入日期”按钮，则打开如图所示的“插入日期”对话框。

- 16 -

Dreamweaver+Fireworks网页制作实验指导书

,在弹出的“插入日期”对话框中选择星期格式、日期格式和时间格式。 ,在页面中插入水平线。

,编辑一个项目列表。

2、选择上面输入的所有内容，单击“文本”属性面板中的“编号列表”按钮，再选中“将光标定位到插入特殊字符的位置。”和“单击“插入”栏中的“文本”选项卡，如图所示”字段，单击“文本”属性面板中的“文本缩进”按钮，最后单击“文本”属性面板中的“项目列表”按钮。对其他段落进行相应设置，设置完成后的效果如图所示。

实验七、网页图像操作

实验目的:

1.通过本例要求掌握常见的图像格式及图像的插入方法。

2.能够修改图像属性，利用外部图像处理软件编辑图像。

3.创建图像映射和超链接。

实验内容:

1.在页面中分别插入gif、jpeg和png格式图片。

2.在页面中创建轮换图象。

3.在页面中插入图片，并在该图片上设计多个热点连接。

实验步骤:

1)插入图像

1)将光标定位到要插入图像的位置。

2)执行如下方法之一:

,选择[插入],[图像]菜单命令，打开“选择图像源”文件对话框; ,单击“插入栏”的“常用”选项卡中的按钮，打开“选择图像源文件”对

话框;

- 17 -

Dreamweaver+Fireworks网页制作实验指导书

,按【Ctrl+Alt+I】键打开“选择图像源文件”对话框。

3)在“选择文件名自”栏中选中单选项，在“查找范围”下拉列表框

中指定要插入图像的路径并在文件列表中选择需要的文件名称(*.gif、

*.jpeg和*.png)

4)在“相对于”下拉列表框中选择“站点根目录”选项。

5)单击“确定”按钮，若所选择的图像文件不在定义的本地站点中，系统会打开

如图所示的询问对话框，询问是否保存到本地站点目录下。 6)在提示对话框中单击按钮，打开“复制文件为”对话框，在该对话

框中选择保存路径，并在“文件名”文本框中更改图像的名称。 7)单击“确定”按钮即可将所选的图像插入到网页中指定的位置。 2)插入鼠标经过图像

1)在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。 2)使用以下方法之一插入鼠标经过图像:

,在“插入栏”中单击“常用”选项卡，然后单击“鼠标经过图像”按钮 ; ,在“插入栏”中单击“常用”选项卡，然后将按钮拖到“文档”窗口中的所需位置;

,选择[插入],[图像对象],[鼠标经过图像]菜单命令。

3)执行以上操作后都将打开“插入鼠标经过图像”对话框，在该对话框中完成各项参数的设置操作。

,在“图像名称”文本框中输入图像的名称。

,在“原始图像”文本框后单击“浏览”按钮并选择载入页面时显示的图像，或

直接在文本框中输入图像文件的路径。

,在“鼠标经过图像”文本框后单击“浏览”按钮并选择鼠标指针滑过原始图像

时显示的图像，或在文本框中输入图像文件的路径。

,如果希望图像预先载入浏览器的缓存中，以便将鼠标指针滑过图像时不发生延

迟，可以选中复选框。

,在“替换文本”(可选)文本框中输入描述该图像的文本。

- 18 -

Dreamweaver+Fireworks网页制作实验指导书 ,在“按下时，前往的URL”文本框中单击“浏览”按钮并选择要链接的文件，

或者直接输入文件的路径。

4)设置完成后，单击“确定”按钮关闭“插入鼠标经过图像”对话框。 5)按【F12】键在IE浏览器中预览。

选取要添加热区的图片，此时属性面板中出现4个热点工具，如图所示。

,指针热点工具，用于移动、放大或缩小热区。

,矩形热点工具，用于绘制矩形热区。

,椭圆形热点工具，用于绘制圆形热区。

,多边形热点工具，用于绘制多边形热区。

,选择矩形绘制工具，在图像上“情感美女”绘制热区后，自动打开“热区”属

性面板，如图所示。

在属性面板中进行具体的设置。

,在“链接”文本框中输入要链接的文件名称或相应的锚点名称。 ,在“目标”下拉列表框中选择打开链接页的方式。

,在“替代”文本框中输入鼠标移动到链接热点上时显示的别名。用同样的方法绘制其他热点，并设置相应的链接。

- 19 -

Dreamweaver+Fireworks网页制作实验指导书

在图片中绘制完成所有的热点后在文档的空白区域单击，以便应用属性的设置。热点链接完成后按【F12】键预览页面，当鼠标移至热区上时即可看到手形图标下面有一个提示文本。

实验八、网页表格操作

实验目的:

1.掌握表格的创建、结构调整与美化方法;

2.熟悉表格与单元格的主要属性及其设置方法;

实验内容:

1.创建表格，并设置单元格属性，在单元格中插入文字或图片。 2.创建表格并格式化表格。

实验步骤:

1.创建表格

1)打开在实验一中建立的站点并在Dreamweaver中打开主页; 2)建立第一个表:1行1列、宽度772像素、边距、间距和边框均为0像素;插入两张图片;

3)建立第二个表:2行3列、宽度772像素、边距、间距和边框均为0像素;第

一列宽度170 像素，水平居中，垂直顶端对齐;第三列水平居中、背

景颜色为#ffffcc、宽度160像素、垂直顶端对齐;

4)在第二个表的第一列中插入第三个表:12行1列、宽度98%、边距为2像素、

间距为1像素、框均为0像素、背景颜色为#006AB0;各个单元格背景颜色均

为#5496D0;单元格中键入文字，文字前插入三个空格 5)在第二个表的第二列中插入第四个表:2行1列、宽度98%、边距、间距和边

框均为0像素;第一个单元格背景颜色为#bababa、插入图片;第二个单元格

中插入Flash动画，插入换行;

6)在第二个表的第二列中，在第四个表的下方插入第五个表:1行2列、宽度96%、

边距、间距和边框均为0像素;第一个单元格宽度为20像素、背景颜色为

#ff6600;第一个单元格背景颜色为#006AB0、键入空格和文字，插入换行; 7)在第二个表的第二列中，在第五个表的下方插入第六个表:1行2列、不限制

宽度、边距、间距和边框均为0像素;第二列顶端对齐、键入换行，然后插

入图片，再键入换行，再插入图片;

8)在第六个表的第一列中插入第七个表:2行2列、第一行的两个单元格中插入

两张图片;在第一行第二列的图片上方键入换行、顶端对齐;合并第二行、

- 20 -

Dreamweaver+Fireworks网页制作实验指导书

水平方向向右对齐、插入图片;

9)在第二个表的第三列中插入第八个表:6行1列、宽度100%、边距为2像素、

间距和边框均为0像素;所有单元格均居中;第一行背景颜色#ff6600;拆分

第六行为两列;第二到六行背景颜色#ffcc66;键入一、二、四行的文字;插

入换行;

10)在第二个表的第三列中，在第八个表下方插入第九个表:6行2列、宽度100%、

边距为2像素、间距和边框均为0像素;合并第一行、居中;第一列宽度为

47像素、背景颜色为#ff6600;合并第三行、高度3像素(在代码中删除空

格，将height=3复制到本行的tr中);合并第五行、高度3像素(在代码中

删除空格，将height=3复制到本行的tr中);第二、四、六行的背景颜色为

#ffcc66;

2.创建表格并格式化表格

1)dreamweaver mx中新建一个文档，建立一个表格并输入相关内容，如图所示。

学号语文数学英语政治

10001 89 56 87 89

10002 56 89 74 65

10003 56 68 98 74

10004 78 58 98 89

2)现在选中这个表格，点击主菜单中的“命令”/“格式化表格”选项，将出现

如图所示的格式化表格窗口。

3)其中，窗口左上角的选择框里为dreamweaver mx预设好了一些表格样式，旁边显示的一个小表格为对应样式的示例。例如选择“altrow;green,yellow”，会立即在窗口中看到该样式的示例。

4)如果对其中设置的样式不满意，可以对窗口中的其他参数进行适当调整。下面一些参数的含义。

,“行颜色”用来设置表格行的颜色。其中“第一种”设置第一种行颜色，“第

- 21 -

Dreamweaver+Fireworks网页制作实验指导书

二种”设置第二种行的颜色;“交错”设置表格每一行的颜色是否变化，它包含不要交替、每一行、每两行、每三行、每四行等选项，可以根据自己喜好设置其变化。

,“第一行”设置表格第一行单元格的参数。其中“对齐”为表格内容对齐方式;“文字样式”为表格中文字样式设置;“背景色”设置背景颜色;“文本颜色”设置表格中的文字颜色;“最左列”用来设置表格最左边一列的单元格样式，其设置与“第一行”中的设置类似。

,如果要修改边框宽度，在“边框”一栏中输入数值即可。不需要表格线则输入0。

,另外，还有一项“将所有属性应用于TD标签而不是TR标签“，虽然应用于表格单元的格式优先于应用于表格行的格式，但是应用于表格行的格式将产生更清晰、更简洁的html源代码。所以一般情况下不选择这个选项。 5)点击“确定”按钮。表格就制作好了。

实验九、超级链接

实验目的:

1.掌握超链接的基本概念和种类

2.能熟练设置文本和图片超链接以及锚点超级链接。

实验内容:

1.创建文本和图片超链接

2.创建锚点超链接

3.创建电子邮件链接

实验步骤:

1.创建文字链接:

1)选中要建立链接的文本。

2)单击“文本”属性面板“链接”文本框后的按钮，在打开的“选择新文

件”对话框中选择要链接的文件，例如“index.html”(即首页)，同时在“相

对于”下拉列表框中选择相应的选项。

3)单击“确定”按钮返回到Dreamweaver编辑窗口，新建链接地址出现在“链接”

后的文本框中，同时，编辑窗口中的文本显示为蓝色，且加上了下划线。 4)按【F12】键在IE浏览器中浏览，当鼠标移动到该链接上面时，会变成手形，

单击它则可以在当前窗口中打开该文本所链接的页面。

- 22 -

Dreamweaver+Fireworks网页制作实验指导书

2.创建锚链接:

在Dreamweaver 8中还可以建立命名锚记的链接，也就是锚链接。使用命名

锚记的链接可以跳转至文档内的特定位置。建立锚链接分为创建命名锚记和

创建到该命名锚记的链接两部分。

1)命名锚记的具体操作:

方法一:

第一步:创建锚点，其操作如下:

I.在“文档”窗口的“设计”视图中，将插入点放在需要命名锚记的地方。 II.执行下列操作之一。

,选择[插入],[命名锚记]菜单命令;

,在“插入”栏的“常用”选项中，单击“命名锚记”按钮。 III.在打开的“命名锚记”对话框的“锚记名称”文本框中，输入锚记名称，并

单击“确定”按钮，锚记标记出现在插入点处。

第二步:创建到该命名锚记的链接的具体操作如下。

I.选择要创建命名锚记的文本或图像。

II.在属性面板的“链接”文本框中，输入一个数字符号“#”和锚记名称。 ,若要链接到当前文档中名为“top”的锚记，则输入“#top”。 ,若要链接到同一文件夹内其他文档中的名为“top”的锚记，则输入

index.html#top”形式的锚记引用。

III.按【F12】键，在IE浏览器中单击“返回顶部”链接，则返回到页面顶部(命

名锚记处)。

方法二:使用指向文件的方法链接到命名锚记，具体操作如下。 I.打开含有所需命名锚记的文档。

II.在“文档”窗口的“设计”视图中，选择要从其创建链接的文本或图像(如果

- 23 -

Dreamweaver+Fireworks网页制作实验指导书

这是其他打开文档，则必须切换到该文档)。

III.执行下列操作之一

,单击属性面板“链接”文本框右侧的“指向文件”按钮， ,然后将其拖到要链接到的锚记上(可以是同一文档中的锚记，也可以是其

他打开文档中的锚记);

,在“文档”窗口中，按住【Shift】键进行拖动，将所选文本或图像拖动到

要链接到的锚记(可以是同一文档中的锚记，也可以是其他打开文档中的

锚记)。

3.电子邮件链接:

方法一:

1)在“文档”窗口的“设计”视图中，将插入点置于希望出现电子邮件链接的位置，或者选择要作为电子邮件链接的文本或图像。

2)执行下列操作之一插入该链接:

,选择[插入],[电子邮件链接]菜单命令;

,在“插入”栏的“常用”选项中，单击“插入电子邮件链接”按钮。 3)打开“电子邮件链接”对话框。

4)在“文本”文本框中输入显示在Web页面中的链接文本，如“与我联系”。 5)在“E-Mail”文本框中输入要链接到的电子邮箱地址，如“yezi@163.com”。

6)单击“确定”按钮。

方法二:

使用“文本”属性面板创建电子邮件链接:

1)在“文档”窗口的“设计”视图中选择要建立电子邮件链接的文本或图像，如“与我联系”。

2)在属性面板的“链接”文本框中，输入“mailto:”，然后在它后面输入电子邮件地址，如“mailto:yezi@163.com”，在IE浏览器中单击该链接的显示效果。

- 24 -

Dreamweaver+Fireworks网页制作实验指导书

实验十、框架操作

实验目的:

1.掌握创建框架和框架集的方法;

2.掌握对框架的基本操作;

3.掌握设置框架的常用属性;

4.掌握超链接目标框架的设置。

实验内容:

利用框架布局一个框架页面。本页面主要分为3个框架构成，建立框架时采用预定义框架集进行创建。上面框架用于放置班级徽标，左侧框架用于放置导航栏，右侧框架用于显示主要内容。创建文本和图片超链接

实验步骤:

1.新建站点“框架网页”(本地文件夹为“frame”)后选择[文件],[新建]菜单

命令，打开“新建文档”对话框。

2.在“类别”列表中选择“框架集”选项，再在右侧的“框架集”列表框中选择

“上方固定，左侧嵌套”选项。

3.单击 “创建“ 按钮即可“创建”一个框架文档。

4.将光标定位到顶部的框架中，在“视图”栏的“标题”文本框中输入顶框架的

名称，如“班级图标”，再将光标定位到左侧框架中，并在左侧框架中的“标

题”文本框中输入“网站导航栏”，在右侧框架中输入“主要内容”。 5.将光标定位在“班级图标”的框架中，选择[文件],[保存框架]菜单命令，在

打开的对话框中将该框架保存在“frame”文件夹中，名称为“top”，用同

样的方法将保存左侧和右侧框架，其名称分别为“left”和“main”。 6.将光标定位到顶部框架中，插入一个1行2列的表格，并分别在表格的两列单

元格中分别插入图片，作为班级图标。

7.将光标定位到左侧框架中，插入一个6行1列的表格，并分别插入图片作为项

目导航菜单。

8.将光标定位到右侧框架中，插入2行1列的表格，根据需要插入相应文字或图

片。

9.选择[文件],[保存所有]菜单命令，逐个保存每个框架后，然后在“另存为”

对话框中保存框架集，将其命名为“index.htm”。

实验十一、模板的运用

实验目的:

- 25 -

Dreamweaver+Fireworks网页制作实验指导书

1.掌握模板的可编辑区域和可重复区域的创建;

2.掌握从模板到页面的创建方法。

实验内容:

创建一个名为photo.htm的Web页面并进行编辑，编辑完成后将其另存为名为photo.dwt的模板文件，然后通过该模板创建一个新的Web页，最后对该新文档进行编辑保存。

实验步骤:

1.新建一个名为“相册”的站点。

2.新建一空白文件，命名为photo.htm。

3.编辑该文档，类似如下页面。

4.选择[文件],[另存为模板]菜单命令。

5.在“站点”下拉列表框中选择“相册”站点，在“另存为”文本框中输入模板的名称，如photo。

6.选择文档编辑窗口中写有“这是可编辑区域”字样的单元格。 7.选择[插入],[模板对象],[可编辑区域]菜单命令或按【Ctrl+Alt+V】键，打开“新建可编辑区域”对话框。

8.在“名称”文本框中输入可编辑区域的名称，如Edit1。

9.选择[文件],[保存]菜单命令保存该模板文件。

10.按【F11】键打开“资源”面板，选择“模板”类别，在右侧的模板文件列表新建的模板photo.dwt文件上单击鼠标右键，在弹出的快捷菜单中选择“从模板新建”命令。

11.删除可编辑区域中的文字，并在其中创建电子相册。可以使用创建电子相册

- 26 -

Dreamweaver+Fireworks网页制作实验指导书

的方法创建，也可以用手动插入表格，再插入图片的方法创建。

实验十二、CSS样式表的创建及运用

实验目的:

1、熟悉CSS样式面板;

2、掌握创建和使用一些常用的CSS样式的方法;

3、掌握通过CSS样式管理和修饰页面的方法。

实验内容:

1.CSS样式的创建;

2.CSS样式的管理;

3.使用CSS选择器;

4.CSS控制网页背景;

5.CSS区块排列文本;

实验步骤:

1.新建站点;

2.用前面的方法制作表格，插入图片，插入文字，创建超级链接; 3.建立一个css文件保存到站点的css文件夹下;

4.在此css文件中建立一个重定义标签body的css样式:填充全部相同:0px;

边界全部相同:0px;

5.在此css文件中建立第一个自定义css样式:黑色、大小12px、行高18px(颜

色和字体可以忽略，因为黑色、宋体是默认颜色和字体); 6.建立第二个自定义css样式(红色):大小12px、粗细600、颜色#cc0000; 7.建立第三个自定义css样式(白色):大小12px、粗细600、颜色#ffffff; 8.保存css文件，打开各网页;

9.将保存好的css样式表文件附加到各网页中;

10.在各网页中分别选择红色文字所在的单元格的标签td，应用以上定义好的红

色的样式;

11.保存各网页;若发现某个样式不合适打开css样式表文件，在css面板中选

择打开此样式进行编辑修改，保存css样式表文件后浏览网页查新建一张有

多个段落的纯文本网页。

- 27 -

Dreamweaver+Fireworks网页制作实验指导书实验十三、表单

实验目的:

1.掌握表单form的插入和设置，以及数据的提交;

2.掌握各表单元素的插入和设置方法.

实验内容:

1.按要求制作调查表页面(页面要求)。

2.按要求使用CSS样式修饰以上各页的表单样式。

实验步骤:

1.新建站点，站点名为form;

2.新建网页，命名为form.htm，根据要求设置页面属性; 3.插入表单form;

4.在表单form中插入控制表单元素的17行4列的表格; 5.将表格的第一行和第二行分别合并单元格，并在该单元格中输入相应的“注册

界面”和“填写基本信息(带*号的必须填写)”，并设置第二行的背景颜色为

#999999;

6.在第三行的单元格中分别输入“用户名”、“文本字段”表单域、“按钮”表单

域和(5~18个字符)、*;

7.根据界面设计要求，依次在单元格中输入相应的文本、表单域等。 8.根据要求，依次设置每个表单域的属性。

- 28 -

Dreamweaver+Fireworks网页制作实验指导书

实验十四、综合运用—创建个人站点

实验目的:

本实验是Dreamweaver和Fireworks的综合应用，要求学生在掌握这两种网

页制作软件的的前提下，自行设计实验步骤，完成个人网站的制作，培养学生的

设计思维能力和工程意识。

实验内容:

1、页面采用1024*768的分辨率，中号字体，IE6.0以上或者相当版本的浏览器;

2、整个页面综合运用Dreamweaver的各种效果，表现个人网站特色。实验步骤:

1.设计站点的主题、内容、色调等。

2.设置站点位置

3.建立Dreamweaver 站点:

1) “站点”|“新建站点”

2)“高级”——“本地信息”

3)“站点名称”

4)“本地根文件夹”——“选择本地文件夹”

5)“HTTP地址”

6) 选中缓存项

7)“确认”

8) 建立站点文件

9) 建立站点文件夹

4.创建个人站点。

- 29 -

转载请注明出处范文大全网 » 静态网页的制作实验报告