网页制作社团规划

第一篇：网页制作社团规划

网页制作社团规划

一、活动的类型、方法和原则 参加活动的成员

高中一年级学生自愿报名参加。类型

科技实践活动。活动方法

任务驱动法、探究学习法、自学辅导法、合作交流法。活动的原則

理论与实践结合的原则。普遍性的原则。

坚持共性与个性相统一的原则。活动的目的

(1)让学生体会信息技术的应用价值,培养学生应用信息技术的意识和观念。

(2)增强学生学习信息技术的兴趣，学会团结合作，培养学生获取、存储、分析、加工、利用、评价、传递信息的能力,提高学生合作探究解决问题的综合实践能力。

(3)培养学生的动手实践能力和创新精神，要让学生成为新技术的主人。

6.活动的目标

培养学生使用信息技术的能力，特别是信息的组织和发布能力。树立学生全面正确的信息技术认识观。通过网页制作活动使学生不仅要认识到信息技术与人们的生活和工作密切相关；认识到信息技术为其他学科的学习和人的全面发展可以提供强大的支持。

激发学生学习信息技术的兴趣。网页制作活动中,结合学生学习、生活的实际,加强信息技术教育的实 践性,学生自主学习的探索性、创新性,这无疑克服了传统活动中内容的枯燥、方法的呆板,对于提髙学生的学习兴趣有巨大作用。

树立学生学好信息技术的自信心。活动中注重用学生容易理解和接受的方式传授信息技术，这些对增强 学生学好信息技术的自信心有着独特的作用。

二、中学生网页制作社团活动设计的特点和开展方式 网寊制作社团活动设计的特点

趣味性：活动的全过程都要注意保护和培养学生学习、使用信息技术的热情。如：作品的选题都来自于学生的日常生活和他们感兴趣的事务；活动中引人比赛等 形式增强趣味性。

技术性：网页制作科技实践活动的过程，就是信息技术水平不断提高的过程。学生除了要掌握好 frontpage这一应用软件,还要能够熟练地结合信息技术课堂所学内容,使用网络查找资料,并恰当应用。

实践性：网页制作科技实践活动的进行,几乎都是在计算机上完成的，因而学生的动手能力是活动能否成功的重要因素。

多样性:作品的选题丰富多样。如：自我介绍、环 境保护、情感故事、国内外大事等。同时,作品的表现形式 也将异彩纷呈。模拟性：考虑到学生的实际情况，作品最后的发布方式宜先在局域网上模拟发布，待学生再经过后续知识的学习后,再发布到因特网上去,并时时维护和更新自己的网贞。

综合性：网页制作要涉及许多其它学科的知识。如：文字编辑要用到语文知识，页面设计要用到美术知识,背景音乐设置要用到音乐知识,等等，协作性：活动过程中把学生分成若干个学习小组，培养他们互助协作的精神和品质。

创新性创新是民族兴旺的灵魂，是一个国家兴旺发达的不竭动力(江泽民语)。”为此,应时时鼓励作品形式和风格的多样性，密切关注制作技术的深度和广度。

2.网頁制作社团活动的开展方式

学校领导重视，成立领导小组，校长经常过问，主管校长亲自督查指导。

活动以建构主义学习理论为指导，采用支架式、任务驱动等教学方法,活动中突出以学生为主体、以教师为主导的活动原则。

采用以自学为主、辅导为辅的活动方式。

采用个人独立完成与小组协作完成相结合的活 动方式。采用课内与课外相结合的活动方式。将学生在课堂所学的各门知识自觉应用到作品制作中。

采用校内与校外相结合的活动方式。学生可在遇到问题时通过电话、QQ、E-mail等工具与教师、同学取得联系，寻求帮助，还可请社会上的有关人士帮忙解决。

三、中学生网页制作社团活动实施方案

第一阶段:结合教材，学习网页制作的基础知识。

这一阶段主要是提高学生运用信息技术的兴趣,体会到信息技术的价值,享受到信息技术学习的乐趣,增强完成作品的信心。由于刚开始接触一个新的软件，所以采用分散知识点，由易到难地掌握教材内容，贴近学生认知水平，贴近学生实际。本阶段主要目标是掌握网页制作所 要用到的基本技术和技能。

第二阶段:安排相关的典型案例，让学生初步掌握制作网页的基本方法。

通过典型案例的讲解，使学生了解到网页设计的基本步骤、制作时应考虑的基本因素。此阶段主要目标是为学生完成作品提供一个支架，帮助学生把对网页制作的理解和认识引向深入，为下一阶段的活动做好准备。

第三阶段:完成作品。通过网页制作活动,培养学生的科学素质，提高创新能力。

网页制作活动是制作者对各种能力的综合应用，它涉及对相关知识的掌握程度，以及观察、分析、综合、比较、概括等各种科学思维方法的综合应用。为此,在这一阶段，师生应组成“共同体”,在教师的点拨指导下，以小组为单位开展活动，同时提高学生独立工作和相互合作的能力。教师重点在解决问题的方法上给予点拨和总结，并让学生大胆地去实践，增强应用信息技术的意识和能力，提高学生的应用能力和创新能力。

第四阶段:作品展评。通过作品展评,提高学生的审美素养和审美能力。

这一阶段可先在小组内对每个作品进行评价，选出 代表作品，再参与整个大组的展评。评价可采用作者自评、组间互评、教师点评等方式，可从思想性、创造性、艺术性、技术性等方面来进行综合评价。

四、开展中学生网页制作社团活动的初步成果

做到了将培养应用信息技术的意识贯彻在活动的全过程之中。在活动中通过引人贴近现实生活、生产和其他学科为实际背景的选题，使学生明确了信息技术与人类社会密不可分，信息技术将会影响到他在信息社会中的立足和发展，从而体现信息技术的实际应用价值和信息技 术的社会功能。

以网页制作活动为手段，激发了学生学习信息技术的积极性，学会了团结协作，建立良好人际关系、相互合作的工作能力。

以网页制作活动为核心，培养了学生的动手能力和创新精神。通过网页设计过程中的作品呈现形式的多 样性，丰富了学生的思维，激发学生的创新，从而为学生将来成为具有创造性思维的人才奠定了基础。

通过网页制作活动,培养学生的自我评价能力。通过自评、互评和教师点评，可以更好地培养学生的自我评价能力和审美、鉴别能力。学生正是在这种不断修改不断完善的过程中，来完善自己，充实自己，从而形成独立思考的习惯和良好的自我评价能力。

通过活动培养了学生顽强拼搏的精神。活动中 引人了学生喜欢的竞赛评比机制，维持了学生认真持久开展活动的积极性。有的学生为了髙质量地完成任务，放弃了休息和娱乐的时间，主动与游戏告别，一心扑在任务上。

五、中学生网页制作社团活动中的新亮点

活动过程中出现了意料之外的重大收获。有一天，在观察学生制作的过程中，发现张耕畅同学的作品比其他同学多了一些有趣的内容：如浏览网页时停留时间的统计、礼花效果、BBS论坛等特效和难度很大的内 容出现在他的网贞上。经了解，这些都是他通过自学、引用免费代码设计产生的效果。据他讲，起初他在浏览别人网页时，发现有一些教师没有讲的特效，他就试着研究这些效果是如何产生的，结果还真的找到了一条捷径。由此可见，开展科技实践活动确实能收到意想不 到的效果。

六、中学生网页制作社团活动继续深化还应注意的问题 适合中学生水平的信息技术作品制作活动理论与方法，需作进一步研究。

活动时间合理安排和探讨。

维持学生持续的兴趣在活动中有一定难度，还需进一步实践。教师自身素质提高的问题。在实践中，我感到教师的素质和水平是活动能否成功的关键。我们应积极投身到实施和推进素质教育的各项活动中去，不断积累和更 新专业知识。关于活动的评价。如何对参与者及其作品进行更有效的评价,还值得研究。

七、对未来研究的展望

信息技术教育是全面素质教育中一个必不可少的环节。信息技术与人类社会密不可分,信息技术与科学息息相关，信息技术为其它学科的发展提供了条件和基础。学好信息技术对中学生素质教育有着重要的作用，提高学生信息素养是我们长期面临的任务。我们应继续做好信 息技术社团活动及对策的研究工作，并将研究成果及时运用到实践活动中，提高信息技术社团活动的水平，努力开创信息技术社团活动的新局面！

第二篇：网页制作与规划实验教案

实验一 站点的创建与基本HTML标记的应用

一、实验目的及要求

1.了解组成网页的基本元素

2.掌握文本元素的添加和编辑方法 3.掌握图像元素的添加和运用技巧 4.掌握几种链接的具体创建方法 5.掌握图像元素的添加和运用技巧

二、实验学时

4学时

三、实验内容

任务一：在网页中基本页面元素的应用 1．准备工作

在c盘或其他盘新建一个文件夹作为站点文件夹，文件夹名称为myweb3。复制给定的一个图像文件夹images和一个网页文件sx3-2.htm。

2．建立本地站点

‘ 用已学方法建立本地站点。

3．依据图3．38所示的效果，向网页中添加并编辑页面元素，具体操作步骤如下。

(1)在默认打开的网页中选择“修改”|“页面属性”菜单命令，设置使

背景颜色为#CCCCCC。

(2)输入网页首行文本“老邮票知多少”，大小为48像素，颜色为#FFFF00，字体为“华文行楷”粗体，居中对齐。

(3)在网页第二行插入更新日期和版权信息，选择“插入”l“日期”菜单命令，将当前编辑日期插入网页，然后利用“插入”面板上“文本”选项卡中的晶按钮，插入多个空格，再输入版权信息“◎版权所有：D．Wei@sohu．com”整行文字大小为18像素，颜色为#000000，字体为默认字体，粗体，居中对齐。

(4)在网页第三行选择“插入”|“水平线”菜单命令，插入一条水平线，高度为5，其他属性取默认值。

(5)在网页第四行、第七行各插入一行文本，内容分别为“纪33(C33)：中国古代科学家、1955．8．25发行600万套、全套4枚、新票市场参考价￥550元。”和“纪36(C36)：中国工农红军胜利完成二万五千里长征二十周年、1955．12．30发行600万套、全套2枚、新票市场参考价￥850元。”文字大小为18像素，格式为“项目列表”，其他属性取默认值。

(6)在网页第五行选择“插入”I“图像”菜单命令，插入四张邮票图像，文件名分别为0637.jpg、0638.jpg、0639.jpg、0640.ipg。每张图像的宽为

110、高为150，其他属性取默认值。

(7)在网页第六行插入一条水平线，宽为400像素，其他属性取默认值。

(8)在网页第八行插入两张邮票图像，文件名分别为0645.jPg、0646.ipg，图像宽高分别为150／110和110／150，其他属性取默认值。

4．保存网页 选择“文件”“|保存”菜单命令，在站点中将此网页保存为sx3-1．htm。5．打开并编辑给定的网页文件sx3．2．htm，如图3-39所示。

(1)建立图像热点链接。为此选中网页上方图像，利用“属性”检查器

中的热点工具在图像上建立两个热点，如图3．40所示。从左到右两个热点分别链接到sx3-2-1．htm和sx3-2-2．htm文件(两个文件可稍后建立)。

(2)插入命名锚记。为此将光标放在网页标题“教育天地”后，选择“插入”I‘‘命名锚i6'’菜单命令，在输入对话框中输入锚记“A0“。依此方法在网页右侧文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”处分别插入命名锚记，依次为A1～A7。

(3)创建锚点链接。为此分别创建左列目录文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”与右列命名锚记A1～A7的锚点链接。然后再将各段下方的文本“返回”与标题处锚记A0建立锚点链接。

(4)创建无址链接。选中网页上方文本“教师篇”，在“属性”检查器的链接栏中输入“≠}”即可。

(5)创建邮件链接。选中网页最后一行文本“联系”，然后在“属性”检查器的链接栏中输入“mailto：abc@163．com'’即可。如图3—41所示。

6．保存网页

选择“文件”I“保存”菜单命令，将此网页保存在站点中。7建立其他网页

(1)新建一张网页，输入“名人看教育”，文件名为sx3-2-1.htm，保存

在站点中。

(2)再新建一张网页，输入“教育话题”，文件名为sx3-2-2.htm，保存在站点中。

8．站点测试

按【F12】键在浏览器中预览，观察效果与样图是否一致。单击建立的每个链接，以测试超链接是否都能够正确跳转。

任务二：HTML基本标记的应用 1．准备工作

在C盘或其他盘符下新建一个工作夹，制作的所有页面都保存在这个文件夹内。将给定的图像素材文件复制到工作文件夹中。

2．建立名称为了test.html的HTML页面，效果如图4-1所示。页面功能要求为：

（1）页面标题为“基本标记测试”；

（2）页面内的所有标题文字均为标题2格式；

（3）单击链接文字时要求在新的浏览器窗口中，打开test.html页面自身；

(4)图片名称为1．gif，存放在工作文件夹中，与test．htm页面位于同一位置；

(5)依据图4—1所示样式，完成页面中的表格制作

3．建立名称为login．htm的HTMI。页面，效果如图4—2所示。页面功能要求为：

(1)页面标题为“表单标记测试”；

(2)“姓名”为单行文本框，宽10个字符，最多能填写20个字符；(3)“性别”为单选按钮，传递的值为“男”和“女”，第一个按钮为默认选中；

(4)“职业”为下拉列表框，内容有“教师”、“工人”和“职员”；(5)“爱好”为复选按钮，传递的值分别对应为1，2，3，4，第一个按

钮为默认选中；

(6)“留言”为多行文本框，大小为5行40列，默认内容为“说几句吧!”；(7)“提交”按钮和“重置”按钮分别完成提交表单功能和重置表单功能，表单提交方式为get；

(8)页面上的所有文字默认为3号字。4．页面测试

在浏览器中浏览所完成的页面，观察效果是否符合要求。

实验二 表格、表单和框架的应用

一、实验目的及要求 1.掌握表格的基本用法 2.掌握表格布局页面的方法 3.学会用框架布局页面的方法 4.了解框架布局的特点

二、实验学时

10学时

三、实验内容

任务一：表格的应用 1．准备工作

在c盘或其他盘新建一个文件夹，作为站点文件夹。输入你想要的站点名称，这里输入myweb5。在此文件夹中新建一个图像文件夹images，并将给定图像素材复制到其中。

2．建立本地站点

用已学方法建立本地站点。3．利用表格编辑首页

(1)在默认打开的网页中，选择“修改”l‘‘页面属性”菜单命令，设置背景颜色为#clclcl。

(2)在网页中插入一个2行2列的表格，参数设置如图5-21所示。选中表格，在“属性”检查器的表格“高”输入框中输入100，单位为“％”。将第一行两个单元格合并为一个，如图5-22所示。

．

(3)利用“属性”检查器调整3个单元格的宽度和高度。将光标放在第一行单元格内，在“属性”检查器“高”输入框中输入110，“宽”不输入；将光标放在第二行第一个单元格内，在“属性”检查器“宽”输入框中输入250，“高”不输入；将光标放在第二行第二个单元格内，在“属性”检查器“宽”输入框中输入450，“高”不输入。效果如图5-22所示。

(4)按样张(如图5-23所示)在第一行单元格中输入“饮食本草”，文字大小80像素，字体“华文彩云”，前两个字白色，后两个字颜色为#009900。在文字下方插入一条水平线，属性取默认值。

(5)在第二行第一个单元格内插入一嵌套表格，表格相关属性分别为8行1列、表格高度和宽度均为100％、边框粗细为0、单元格边框为0、单元格间距为0。如图5．23所示。

(6)在第二行第二个单元格内插入一嵌套表格，表格相关属性分别为3行3列、表格高度和宽度均为100％、边框粗细为

2、单元格边框为0、单元格间距为0。如图5-23所示。

(7)在左侧嵌套表格各行中分别输入图5．24所示内容，然后将8个单元格的高度均设置为50。文字大小为36，字体为“华文新魏”，然后将每行文字均创建无址链接。

（8）在中侧嵌套表格中分别插入5张文件夹images中的图片，每张图片的宽度和高度均为150，注意：当图片尺寸变小后，表格不会自动缩小，这时可以选中整个表格，在“属性”检查器中单击“清除行高”和“清除列宽”两个按钮来调整表格大小。

4．保存网页

选择“文件”！“保存”菜单命令，将此网页保存在站点中。5．站点测试

按【F12】键在浏览器中预览，观察效果是否与样张一样。任务二：框架的应用 1．准备工作

在C盘或其他盘新建一个文件夹，作为站点文件夹。并将给定的图片文件和素材文件复制到站点文件夹中。

2．建立本地站点

用已学方法建立本地站点。3．利用框架布局页面

站点首页部局效果如图15-15所示，页面制作步骤如下。（1）在默认打开的网页中，选择“插入”面板上的“布局’’选项卡。单击框架按钮的下拉箭头，从下拉菜单中选择命令。

(2)将光标置于顶端框架内，选择“修改”|“页面属性”菜单命令，设置背景颜色为#C1C1C1。同理将左框架和主框架的页面背景色都设置为#C1C1C1。

(3)选择“窗口“|‘‘框架”菜单命令，将“框架”面板调出来。然后设置三个框架的大小。

“顶端框架”：在“框架”面板中选定外层框架集，在“属性”检查器将顶端框架的高度设置为“120像素”，下面部分设置为“1”，单位为“相对”。将“边框”设置为“是”，“边框宽度”设置为1’，边框颜色设置为“#CCCCCC”。如图15—16所示。

“左侧框架”在“框架”面板中选定内层的子框架集，在“属性”检查器将左侧框+架的宽度设置为“250像素”，右侧主框架设置为“1”，单位为“相对”。将“边框”设置为“是”，“边框宽度”设置为“1’，边框颜色设置为“#CCCCCC”。如图15—17所示。

(4)在顶端框架内输入站点标题‘‘饮食本草”，文字大小为80像素，字体为“华文彩云”，前两个字白色，后两个字颜色为#009900，居中对齐。

(5)在左侧框架内插入一个表格，表格相关属性分别为9行1列、表格高度和为100％、宽度为100％、边框粗细为0、单元格边框为0、单元格间距为0、对齐方式为右对齐。然后

将9个单元格的高度均设置为50，在其中输入样张中的文字，文字大小为36，字体为“华文

新魏”。如图15．15所示。

(6)在右侧主框架中插入一个表格，表格相关属性分别为3行3列、表格高度和宽度任意、边框粗细为

2、单元格边框为0、单元格间距为0、居中对齐。按样张效果在表格中分别插入5 张文件夹images中的图片，每张图片的宽度和高度均为150。注意：当图片尺寸变小后，要在“属

性，检查器中单击cc清除行高’’和“清除列宽”两个按钮，使表格调整到最小。如图15—15所示。

4．保存框架网页

选择“文件”|“保存全部”菜单命令，按照保存窗口弹出的顺序，分别将框架集、右侧

主框架、左侧框架、顶端框架命名为index．htm、main．htm、left．htm、top．htm。注意以上文件均保存在本站点中。

5．建立导航链接 具体制作步骤如下。

(1)按导航栏目分别建立8个相关内容的页面，或者从提供的素材文件中获取。

(2)在左侧框架内选择“首页”文字，在“属性”检查器的链接栏中设置目标文件为本框架集页面．Index．htm，目标选择“parent'’。

(3)在左侧框架内选择“谷物篇”文字，在“属性”检查器的“链接”栏中设置目标文件为素材文件guwu．htm，“目标”栏选择右侧主框架的名称“mainframe”。同理，将左侧框 架内的各项导航内容分别链接到对应的素材文件，且“目标”均设置为“mainframe”。

(4)再次选择“文件”|“保存全部”菜单命令。6．预览和测试站点

在打开的Index．htm文件中，按【F12】键在浏览器中预览，观察效果与样张是否一样，然后，测试各导航链接内容和显示位置是否正确。效果如图15-18所示。

实验三 网页图像和动画的设计与应用

一、实验目的及要求

1．掌握在Fireworks中创建动画的方法 2．掌握在Fireworks中制作蒙版的创建方法 3．掌握基本动画补间操作

二、实验学时

8学时

三、实验内容 任务一：gif动画 1．准备工作

在c盘或其他盘新建一个文件夹，本次实训的内容将全部保存在该文件夹下。

2．一张向日葵画框图片的制作(1)新建文件

打开Fireworks 8，在“开始页”中选择“新建Fireworks文件”，新建一个空白文件。在弹出的“新建文档”中设置画布的“宽”为360，“高”为400，画布颜色选择白色，然后单击“确定”按钮。选择“文件”|‘‘另存为”菜单命令，将文件以“sx6—1．png”为文件名保存在指定文件夹下。

(2)制作图片 选择“文件”l‘‘导入”菜单命令，在“导入”对话框中选择需要导入的图片“画框．gif”。此时光标的形状变为V-，在画布上单击鼠标左键，即可将该图片以原始大小导入(也可以按下左键拖放，将图片以不同的大小导入)。此时可以在“层”面板中看到刚导入的对象。用相同的方法导入第二张图片“向日葵．png”，将图片的大小调整合适，放入画框内，并调整整个图片的坐标，到此这个图片的制作就完成了。单击“主要”工具栏上的“保存”按钮，保存文件。

(3)图片的优化和导出

选择“窗口”l“优化”菜单命令，打开“优化”面板，如图6-23所示的设置。选择“文件”|“导出”菜单命令，在弹出的“导出”对话框中，“文件名”一栏输入文件名“sx6—1．jpg”，选择侏存类型为“仅图像”，单击“保存”按钮，该文件即可以JPEG的文件格式输出。

选择“文件”l砾存”菜单命令，保存源文件，单击“预览”按钮预览效果，如图6-24所示。

3．进一步编辑向日葵画框图片(1)新建一帧

打开刚刚创建的向日葵画框，即“sx6—1．png”。在“帧”面板，选择刚才已有的第一帧，将它拖到“新建／重制帧”按钮上释放，得到复制的一帧。

将新复制的第二帧选中，将原有的向日葵图片删除，重新导入另一幅图像“椰子树．jpg”，并调整大小使其居于画框内。这样当前文件具有两个帧的画面，如图6—25所示。

(2)观看动画播放效果

单击位于工作窗口下方帧控制器的“播放”按钮，观看动画播放效果。单击“停止”按钮，停止播放。

如果不满意，可以返回帧1或帧2进行修改。

如果想调整两帧的播放速度，可以在帧面板双击每帧右侧的数字“7”，将其修改成想要的值。

再次通过帧控制器观看动画播放效果，如果想再增加几帧，可以按上面的方法进行编辑，直至满意为止。

选择“文件”|“另存为”菜单命令，将文件以“sx6．2．png'’为文件名保存在指定文件夹下保存文件。

再选择“文件”|“图像预览”菜单命令，打开“图像预览”对话框，如图6—26所示。

选择导出的文件格式为“GIF动画”，然后再选择“导出”按钮，就可以导出GIF动画文件，文件名为“sx6．2．gift。这样可以在Fireworks之外，同样看到动画效果。

任务二：蒙版和动画的制作 1．准备工作

在c盘或其他盘新建一个文件夹，将给定图像素材复制到其中，本次实训的内容将全部保存在该文件夹下。

2．导入图像并调整画布

新建空白文档，大小、颜色均默认。

选择“文件”l“导入”菜单命令，将指定文件夹中的图像导入文档。选中图片，在“属性”检查器中修改图片的宽、高值(500×400)。然后单击画布之外，在“属性”检查器选择“符合画布”命令，使画布和图片一样大且对齐。

在“属性”检查器选择“画布”旁边的拾色器，把画布颜色改成自己喜欢的颜色。

3．制作矢量蒙版

选择椭圆工具，在窗口中画一个椭圆。选择“编辑”I“剪切”菜单命令，椭圆消失，用鼠标再次选中导入的图像，然后选择“编辑”I“粘贴为蒙版”菜单命令，出现蒙版效果，如图9-36所示。

打开“层”面板，如图9-37所示。单击层中图片与蒙版之间的链接@标记，可以使它消失，再次单击又会出现。它的出现与消失决定着蒙版是否与图片链接在一起。当未链接时，单击“层”面板中的蒙版图标，使它周围出现绿框。如图9-38所示。

用鼠标移动画布上椭圆的位置，效果如图9-39所示。

把位置调整到理想状态后，选择“文件”|“另存为”菜单命令，将文件以“sx9-1．png'，为名保存在指定文件夹下。

4．修改蒙版效果

打开刚才新建的蒙版文件，在“层”面板选中蒙版。在“属性”检查器中，选择“蒙版”为“灰度外观”，将方式改为“放射状”，并单击旁边的拾色器，将放射状填充的中心调整为透明(白色)，边缘调整为不透明(黑色)，如图9-40所示。

在“属性”检查器中，将“边缘”修改为“羽化”，值为“50'’，“描边”设置为“无”，如下图9-41所示。

在画布上适当调整椭圆填充的放射中心和幅度，最后达到如图9—42所示效果。

5．制作位图蒙版，打开给定图像文件0258.jpg，另存为sx9-2.jpg。把显示的缩放比例调整为66%。单击“层”面板的“添加蒙版”按钮，并在“层”面板选中，然后按照图9-43蒙版图标。

在“工具”面板“颜色”部分中选择“渐变”工具设置蒙版的相关属性。

在图像中间拖动鼠标，使填充呈由中心向四周的放射形状。图像产生了蒙版效果，同时“层”面板的蒙版图标也发生了变化。如图9-44所示。

6.制作文本蒙版

打开给定图像文件0258.jpg，另存为sx9-3.jpg。把显示的缩放比例调整为66%。在“工具”面板“矢量”部分中选取“文字”工具。输入文字“热带风情”，字体为华文行楷，大小150。选中文字，选择“编辑”|“剪切”菜单命令，将其剪切。在“层”面板中选择取位图标，然后选择“编辑”|“粘贴为蒙版”菜单命令。图像产生了蒙版效果，同时“层”面板也出出了文本蒙版图标，如图9-45所示。

任务三：风吹树叶(1)新建Flash文件。

(2)修改背景颜色为“蓝色”。

(3)使用“文本工具”按钮，创建文字“风吹效果”四个字，用工具选中文字并按【Ctrl】+【B】一次，将四个字分解为个体。如13-11所示。

(4)再次用工具，选中“风”字然后选择“修改”|转换为元件”菜单命令。在弹出转换为符号“对话框中，将元件名称改为“风”，如图13-12所示。

(5)重复步骤(4)，将剩下的三个字“吹”、“效”、“果”也依次做成图形元件。

(6)选中所有的文字，然后鼠标右击，在弹出的上下文菜单中选择“分散到各层”，于是个字将分别处于四个不同的图层。这样做是为了动画渐变能够正确的执行。

如果分散到各层后文字没有对齐，则可用“对齐面板”，将各层的文字重新排列好。“对面板如图13-13所示，可以通过菜单“窗口”|对齐’’菜单命令打开“对齐”面板。

(7)在时间轴中第1 5帧处，给各层“添加关键帧”，选中第15帧。(8)将四个字全部选中，使用鼠标向上移动一段距离，选择“修改”|变形”|“水平翻转”菜单命令，将四个字水平翻转一下，然后调整字体的位置，用“对齐’’面板排列字体，如图13-14所示。

(9)选中所有元件，在“属性，检查器中将颜色“Alpha”值设为“O”，如图13-15所示。

(1 O)在“吹”、“效”、“果”三个元件所在层的第1帧处创建动画补间，如图13-16所示。

(11)按住【Ctrl】键，选择第二层的第2帧到最后一帧。按住鼠标左键不放，将位置向后拖放一段距离，如图13-17所示。

(1 2)参照步骤(1 0)内容，将‘‘效”、“果”两个元件所在层的位置分别后移，如图13-l8所示。

(1 3)按【Ctrl】+【Enter】组合键查看效果。任务四：球的跳动 1.准备工作

在c盘或其他盘新建一个文件夹，并将给定的图片文件和素材文件复制到站点文件夹中。本次初训的内容将全部保存在该文件夹下。

2．素材的导入

1)新建文件

打开Flash 8，在“开始页”中选择“新建Flash文件”，以新建一个空白文件。背景色为“白色’’。

选择“文件”|“保存”菜单命令，将文件保存为ex3.fla文件。2)“球’’的导入

选择“文件”|“导入”|“导入到库”菜单命令将“球”导入到库，如图13-33所示。

3.元件的转换

选择“修改”|“转换为元件”菜单命令，将图片转换为“图形”元件，并命名为“球”。13-34所示。

4．动作补间的设置

将元件“球”拖放到场景1的图层1中。在图层1的第60帧处插入关键帧，如图13-35所示。

在第1帧处添加‘‘动画补-间，效果，如图13-36所示。

在第1帧处处的“属性”检查器中，单击“缓动”旁边的“编辑”按钮，设置动作的“缓入|缓出”效果(通过缓入／缓出可以控制动画渐变的速度和状态)。设置效果如图13-37所示。

在“自定义缓入／缓出”对话框定义各个帧处的动画补间速度和方向。新建图形元件，命名为“阴影”，设置笔触色为“无”，填充色为“黑白渐变”，白色部分的alpha透明度为29％。使用椭圆工具绘制一个椭圆，设置面板如图13-38所示，绘制的效果如13-39所示。

在场景1中新建图层2，将元件“阴影”拖放到第1帧处的恰当位置(在球落下的下方)，并在第60帧插入关键帧，阴影位置如图13—40所示。

在图层2第1帧处设置元件“阴影”的A1pha透明度为20％，如图1 3-4 1所示。

在图层2第1帧处设置补间动作，如图1 3—42所示。

打开图层1第一帧“属性”，检查器的“自定义缓入／缓出”面板，按键【Ctrl】+【c】复制缓动效果。打开图层2第一帧处的“自定义缓入／缓出”面板，按I Ctrl 】+【V】组合键，将其粘贴到阴影动画补间中。

5．发布动画

使用“文件”|“发布”菜单命令进行发布。

实验四 层叠样式与层的应用

一、实验目的及要求 1.掌握层的正确定位方法

2.学会利用层来制作弹出式菜单 3.了解时间轴的编辑特点和方法 4．学会定义和应用CSS样式

二、实验学时

6学时

三、实验内容

任务一：利用层制作弹出菜单

步骤：

l准备工作

在c盘或其他盘新建一个文件夹，作为站点文件夹。将给定的素材文件存入其中。

2．建立本地站点

启动Dreamweaver·8，用已学方法建立本地站点。3．利用图层制作下拉弹出菜单

(1)新建一个空白页面，选择“修改”I“页面属性”菜单命令，设置页面的背景颜色为#FFCC99，左边距为0，上边距为0。

(2)在文档第一行插入一行文字“电子信息职业技术学院”作为站点标题，字体为华文行楷，大小为48号字，颜色为#FF9933。

(3)在标题的下一行插入一个l行5列的表格，表格宽度800像素，边框粗细为l，高 度30，平均分配各列(每列宽度为160像素)，表格背景颜色为#9999FF。

(4)在表格的各列分别写入“首页”、“学院概况”、“师资建设”、“系部设置”、“招生就业”，各单元格文字对齐方式为居中对齐，文字为粗体显示。如图16—16所示。

(5)在“学院概况”列中添加一个图层，命名为“Layerl”，注意不可见元素“层锚记”应在此列当中。如果不在，可用鼠标将其拖到此列中。然后在图层中添加一个3行l列的表格，表格宽度为160像素，各行高度为30像素，边框粗细为1，单元格文字为居中对齐，表格背景颜色为#9999F’F，文字为粗体显示。三个单元格内容为“学院简介”、“办学思想”、“校园风景”，如图16．17所示。

(6)同样在其他几列中也分别添加图层，各自命名为“Layer2'’，“Layer3”，“Layer4”。其中Layer2中插入3行1列的表格，表格属性与Layerl中的相同，内容为“队伍建设、名师风采、优秀教师”；L,ayer3中插入5行l列的表格，表格属性与L,ayerl中的相同，内容为“机电技术系、电子技术系、计算机应用系、计算机网络系、计算机软件系”；Layer4中插入2行1列的表格，表格属性与Layerl中的相同，内容为“招生信息、就业信息”。如图16—18所示。

(7)调整各层的位置。注意：层的调整非常重要，不同的浏览器窗口大

小，不同的分辨率，层的位置显示都不是一样。即使在同一个机器上调整浏览器的窗口大小，都会出现位置的变动。Dreamweaver中并不是所见即所得，需要我们来精确定位才会达到满意的效罘。为此，首先固定表格的宽度，本例中将表格固定为宽度800，高度30。然后固定层的位置，这

个位置需要计算一下，计算公式并不是很难。本例中表格总宽度为800，共有5列，这样每列的横坐标起始位置的计算公式为：

800÷5*(当前列一1)对于“Layerl”，当前列为2，所以结果为160。

最后加上一个将要创建的层与原表格列偏移值，那么计算各列下属的层的横坐标公式变为：

800--5x(当前列-1)+偏移量

这个偏移量需要通过大家试验来最终确定，因为不同的字体和宽度这个值是不同的。这里测试满意的效果是-1，所示Layer1的实际工资起始横坐标为159据这个公式将各个层的位置设定好，最好不要用鼠标禾移功定位。要使用“属性”检查器来设置。(8)打开“层，面板，将Layerl～Layer4都设置为隐藏状态。．

(9)在窗口左下方选中第2列“学院概况”所在单元格的标签选择器，在“行为”面板中为其添加“显示一隐藏层’’行为，将“Layerl”设定为“显示”，如图16-19所示。

(10)更改行为的触发事件为“onMouseOver”。(11)再次选中第二列的标签选择器，在‘‘行为’’面板中为其添加“显示一隐藏层”行为，设定图层Layerl为‘‘隐藏”，并更改此行为的触发事件为“onlMoluseOut”。．

(12)重复步骤9～1l，为第三列、第四列、第五列添加显示与隐藏图层的行为。

4．保存与预览

保存文件为Index．html，然后按IFl2]键进行预览。当移动鼠标到菜单时，将显示当前菜单项所属的子菜单内容，当鼠标离开显示的子菜单时，子菜单隐藏，返回初始状态。最终效果如图16—20所示。

5．为下拉菜单设置超级链接

(1)根据菜单内容，建立相应的其他页面文件。(2)为各菜单项设置跳转到这些页面的超级链接。(3)再次保存文件并预览效果。任务二：时间轴 步骤：

1．准备工作

在C。盘或其他盘新建一个文件夹，作为站点文件夹。在此站点中再建一个images子文件夹，将给定的素材存入其中。2．建立本地站点

启动Dreamweaver 8，用已学方法建立本地站点。

3.利用时间轴使层做直线运动

(1)打开给定的网页文件sx17-1-1.htm，在网页上插入一个层”Layerl",并将其位置调整好，然后在其中插入给定的图片imgl．gif,图片大小为64×64。如图17-9所示.(2)打开“时间轴”面板，把图层Layerl拖到“时间轴’’面板上，单击最后一帧关键帧，并将其拖到第100帧的位置。再单击图层Layerl，将 Layerl水平拖动到页面的右侧。如图17-10所示。

(3)选中“时间轴”面板上的“自动播放”和“循环”选项。

(4)将文件另存为sxl7-1-3．htm，并在浏览器中预览，即可看到小猪从页面左侧运动到 右侧，并循环播放。

4．利用时间轴使层做轨迹运动

(1)打开刚才保存的sxl7-1-3．htm文档，再插入一个图层Layer2，并将给定的图片img2．Gif插入其中，设置图片和层的大小均为100*100，如图17-11所示。

(2)右击“时间轴”面板的动画通道，在弹出的快捷菜单中选择“添加时间轴”命令，新添加的时间轴为“Timeline2'’。

(3)选中页面中的图层Layer2，并单击右键，在弹出的快捷菜单中选择

“记录路径”命令，紧接着用鼠标拖动层左上角的标记在页面上移动绘制路径，释放鼠标，在页面上出现了一条灰色的路径。同时，时间轴上也出现了一个有多个关键帧的动画条。如图17-12所示。

(4)选中“时间轴”面板上的“自动播放”和“循环”选项。

(5)保存文件，并在浏览器中预览，即可看到小猪从页面左侧运动到右侧的同时，另一小猪在页面上按绘制的轨迹进行移动，并循环播放。5．给移动的小猪添加行为和超级链接

(1)选中页面中的Layer2，打开“行为”面板，单击“+”按钮，从弹出的菜单中选择“时间轴”I“停止时间轴”命令。然后从对话框中选择“1'imeline2'’，单击“确定”按钮。在“行为”面板中将事件改为onMouseover。(2)再次单击“行为”面板的“+”按钮，从弹出的菜单中选择“时间轴”}“播放时间轴”命令。然后从对话框中选择“Timeline2'’，单击“确定”按钮。在“行为”面板中将事件改为onMouseout。

(3)选中Layer2层中的图片，在“属性”检查器的链接栏中输入“sxl7-1-2．htm'’(预先编辑好的网页)，在替代栏中输入“单击有惊喜”。

(4)保存文件，并在浏览器中预览，即可看到当鼠标指向小猪时，小猪停止移动；当鼠标离开小猪时，小猪继续移动。当鼠标单击小猪时，跳转到sxl7-1-2．htm页面。

任务三：利用CSS样式改变页面风格 步骤：

1．准备工作

在c盘或其他盘新建一个文件夹，作为站点文件夹。将给定的网页文件及素材文件夹存入该文件夹中。

2．建立本地站点

启动Dreamweaver 8，用已学方法建立本地站点。3．自定义样式的定义及应用

(1)打开站点中给定的sx20．1．1．htm文档。(2)选择“窗口”I‘‘样式”菜单命令，将“CSS样式”面板打开。(3)单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框。在选择器类型处选择“类(可应用于任何标签)”，名称处输入“ysl”，定义在处选择“仅对该文档”。单击“确定”按钮。

(4)在弹出的“ysl的CSS样式定义”对话框中，进行如图20-25所示的样式定义(类型：字体为隶书，大小为36像素，颜色为#0033FF；区块：文字对齐为居中)。

(5)用同样的方法定义样式“ys2”，定义内容如图20-26所示(类型：

字体为华文新魏，大小为24像素；区块：文字对齐为居中)。

(6)用同样的方法定义样式“ys3”，定义内容如图20—27所示(类型：字体为隶书，大小为36像素，粗细为粗体，#00CC33；区块：文字对齐为居中)。

(7)下面开始应用已定义的样式。选中第一行标题“唐诗欣赏”，单击右键，选择“CSS样式ysl，(或者用前面介绍的其他方法来应用ysl)，这时标题已变成所定义的样式了。用同样的方法，将每首诗的诗文内容应用

‘‘ys2’’，将每首诗的标题段落应用“ys3”。效果如图20-28所示。

(8)修改页面的背景风格。首先为页面设置背景图像(站点中images文件夹中的bj．jpg文件)，效果如图20-29所示。由于选择的背景图像的尺寸不够大，在页面中图像会以不断重复的形式铺满整个页面，视觉效果不够理想。

(9)在“CSS样式”面板新建自定义样式“ys4”，在样式定义对话框中，背景样式的设置如图20—30所示(背景：重复为不重复，附件为固定，水平位置为居中，垂直位置为居中)。

(10)选择文档窗口左下方的标签选择器<．body>，然后单击右键，从下拉列表中选择“设置类，ys4”，文档应用样式ys4后的效果如图20-31所示。当预览时会发现背景图像居中并不再重复，且当用鼠标滚动游览文字时，背景图像保持静止，而不随文字的滚动而滚动。

4．重定义特定标签外观

(1)单击“CSS样式”面板下方的“新建(；SS样式”按钮，打开新建样式对话框，选择器类型处选择“标签(重定义特殊标签的外观)”，标签处下拉列表选择“ln定义在处选择“仅对该文档”。单击“确定”按钮。

(2)在弹出的“li的CSS样式定义”对话框中，进行如图20-32所示的样式定义(类型：字体为华文新魏，大小为24像素；列表：项目符号图像为0001．gif)。

(3)单击“确定”按钮，发现页面列表外观发生了变化。效果如图20-33

所示。

(4)再次单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框，选择器类型处选择“标签(重定义特殊标签的外观)”，标签处下拉列表选择“a”，定义在处选择“仅对该文档”。单击“确定”按钮。

(5)在弹出的‘‘a的cSS样式定义”对话框中，进行定义，其中类型分类中只将修饰选择为‘‘无”。单击“确定”后，页面中超级链接的下划线处的修饰没有了，如图20-33所示。

5．链接文字技术

(1)单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框，选择器类型处选择“高级(ID、伪类选择器等)”，选择器处下拉列表选择“a：link”，定义在处选择“仅对该文档”。单击“确定”按钮。

(2)在弹出的“a：link的(；SS样式定义”对话框中，进行如图20—34所示的样式定义(类型：字体为华文新魏，大小为24像素，颜色为#CC0099，修饰为无)。

(3)再次单击“CSS样式”面板下方的“新建CSS样式”按钮，在对话框中其他选项不变，只将选择器选为“a：hover'。然后在“a：hover的CSS样式定义”对话框中，进行如图20—35所示的样式定义(类型：字体为华文新魏，大小为24像素，颜色为#FF0000，修饰为下划线)。

(4)单击“确定”按钮，关闭定义对话框。预览时可以看到当鼠标指针移到超级链接文字时，文字变为红色且出现下划线修饰。

(5)将网页另存为Index．．html，按【F12】预览网页，观察各种样式的应用效果。

实验五

网页综合设计

一、实验目的及要求

利用所学的网页设计的方法来设计一个个性化的网站，网站的内容一定要合理，内容健康，页面美观。

二、实验学时

6学时

三、实验内容

自己设计

第三篇：网站规划书与网页制作实验报告

网站规划书

一、主题选择

本次网站设计大作业我们选择了建立一个个人主页的主题，最后综合实际电脑操作水平，决定主要由***进行实际的操作，我辅助进行素材整理和网站规划书和网站设计与制作的实验报告的撰写。

二、网页内容

1.“首页”页面，首页我们设计了各个子网页的导航、友情链接以及联系我们板块，友情链接可以让我们进入其它不同的学习参考网站，可以获得一些有用的信息，同时得到获得这些信息的便捷性，体验专业性和个性化的差别。同时，联系我们以及包括在内的用户注册，能让浏览者与我们建站者互动，因而能使我们的网站不断完善，做得更好。

2.“我的日志”页面，我们摘录了***同学所写的两篇空间日志，插入了土豆网的播放器，选取了精彩的视频，向浏览者介绍***同学的一些个人经历，也献上了一席视觉盛宴。这里还有歌曲的改编、二胡的奏唱，还有令人感动的文章。

3.“我的相册”页面，我们插入了一个Flash相片展示舞台，主要展示了***同学此前旅游时所拍的照片，向浏览者展示另一个侧面的他。

4.“我的爱好”页面，是一段Flash视频的展示，同样展示了***同学的个人兴趣。

三、网站风格

通过思考和讨论，我们决定将红色调作为网站的主色调，并且我们大量运用Flash元素、JavaScript代码使网站风格现代化、美观化，给浏览者以最好的体验。

四、网页布局

网页采用表格布局的模式，虽然没有通过模板的使用来制作网站，但是我们使用了一个母页面来做到全站布局的统一，结构整齐，分类内容一目了然。

五、多媒体素材的使用

我们在多个页面加入了背景音乐，并在每个页面中加入了大量优质的图文。这些图片部分来自于网络，但我们使用Photoshop，处理成我们需要的形式，或是以它们为素材做更好的图片。使用的工具软件

Dreamweaver 8（部分通过Dreamweaver CS6）

Photoshop CS6

FlashProfessionalCS6

Word2010

网页设计与制作实验报告

一、制作组成员

12******班

120310** ***，120310** ***

二、网页制作中使用的技术及方法

由于网页制作使用的软件中最重要的是Dreamweaver8，因此使用其他软件的方法就不一一列举。

1.善于利用母页面。

2.Flash的使用。其简易的使用和制作方法，为网站带来了很大方便，并且也兼顾了效果。

3.JavaScript的使用。合理的使用JavaScript，能使网页实现更多功能，或者使网页更加美观。但此方法涉及到编程，对于大部分同学都很有难度。

4.其他的Photoshop技术以及网页Flash中所用的Action Script就不再详细介绍。

三、组员分工

***：查找和整理资料，完成网页的模板制作和内容加入，解决技术问题并且通过技术美化网页。

***：查找和整理资料，撰写规划书和实验报告。

网站的规划和结构设置是我们共同讨论的结果。

四、制作中遇到的问题及解决方法

本部分由组员***撰写。

实际上在网页制作过程中遵循注意事项并理解网页结构，只是制作一个简单的功用小的网站不是一件难事。在本次制作中遇到的最大困难就是代码以及编程语言知识的匮乏，难以制作出更漂亮的效果。因此，最为困难的一步便是JavaScript的编写。通过阅读书上给的一部分事例，我掌握了一些基本的语句结构和语句用法但是感觉嵌入自己的页面却无从下手，所以我只能上网搜寻相关代码知识并试着自己去理解。最终我将我所理解的这一代码成功地插入了目标网页中，达到了需求的效果。然而遗憾的是，由于时间问题，没有加入更多的代码丰富我们的网站。

实验中遇到的大部分问题我都通过自己摸索和在线搜索解决了，并且在和别的同学交流的过程中，我对每项功能的具体原理和实现方法又有了更深层次的了解。不过我还有一些问题无法得到解决，同时也是我困惑已久的问题。一是比Dreamweaver 8更新的Dreamweaver CS6上却难以找到许多Dreamweaver 8上的功能，比如在Dreamweaver CS6找不到怎样插入层；二是不知道如何保证不同品牌，不同版本的浏览器获得同样的最佳观赏效果。我也希望能在日后的深入学习当中解决这些疑惑。

五、实验总结

网页制作是最能体现团队合作的一个实验操作，我们通过不同的分工，认认真真的完成了每个人应该完成的任务而且做到都非常出色，这都体现了我们两个人的默契，更使得这次实验配合的非常成功。我们也深刻学习到了Photoshop、Flash、Dreamweaver等软件的操作程序，只能说做网页是从一开始制作就是一件浩大的工程，得花很多时间和精力，但是在这过程中很好地锻炼了我们的动手能力和整体性思维，我们很高兴我们最终制作出来的网站很主观的表达了我们两个人的想法，最终做出了这个符合我们网站规划的个人网站！

第四篇：《网站规划与网页设计制作》学习心得

《网站规划与网页设计制作》的总结

不知不觉，我已经学习《网页设计与制作》这门课程一个学期了，虽然时间有点短，但这一个学期以后我却受益匪浅，不仅让我全面的、系统的学会了网页设计与制作的基础知识，还让我学会了自己动手去制作属于自己的网页，这对于我来说是很值得高兴的，能让我在以后的工作生活中更好的展现自己。下面来谈谈我一个学期来对这门课的打比方总结。

比如建立一个网站就像盖一幢大楼一样，它是一个系统工程，有自己特定的工作流程，你只有遵循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。

一、确定网站主题

网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，你不可能像综合网站那样做得内容大而全，包罗万象。你没有这个能力，也没这个精力，所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。

二、搜集材料

明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。

三、规划网站

一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。如何规划网站的每一项具体内容，我们在下面会有详细介绍。

四、选择合适的制作工具

尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多，首先就是网页制作工具了，在这里，我们一般都是用有“网络三剑客”之称的

Dreamweaver、Fireworks、flash来制作网页。

五、制作网页

材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。

六、上传测试

网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看，现在上传的工具有很多，有些网页制作工具本身就带有FTP功能，利用这些FTP工具，你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友，让他们来浏览。

七、推广宣传

网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入ican博彩通等。

八、维护更新

网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者。

以上就是我对于网页制作的一些个人心得，由于本人的技术还不是很成熟，可能还存在很多的不足和错误。选择学习这门课是很正确的选择，虽然在以后不会再有机会去上了，但我还是会通过各种方式继续学习网页设计和制作的，同时很感谢带我入门的老师，让我有机会去学习有关网页的知识。

第五篇：网页制作毕业论文

一 引 言

随着Internet的诞生和发展，许多人不再仅仅局限于网上冲浪，而是参与到网站建设中。企业建站相当于在网上建立一个家，你就可以在这里向客户介绍你的企业，展示你的实力，推销你的产品，网页制作作为网站制作中一个重要的环节，相对于传统的平面设计而言，网页设计具有更多的新颖性，更多可以表现的手法。结合本人的实习过程，现就网站建设与管理过程中，网页设计与制作的具体经历，包括：网页设计与制作过程中的网页布局、色彩构置，框架结构等相关事项做以下论述。

二 网站建设的流程

1.定义合适的域名。由域名构成的网址会像商标一样，有助于将来塑造网上的形象。域名除了要符合公司的性质以及信息内容的特征外，还要具有简洁、易记、具有冲击力的特点。

2.租用虚拟服务器。有了域名后，就需要一个空间存放网站，这个空间就是Internet上的服务器。一般虚拟主机提供商都能向用户提供大容量、高速度的服务器，用户可根据网站的内容设置及其发展前景来选择。

3.设计网页。网页的设计制作可以自己完成，也可以通过虚拟主机提供商或专业的网页设计制作商来完成。设计网页前要收集所有需要放在网站上的文本资料、图片等，并尽量用文字详细说明制作的框架结构，将收集的材料提供给网页设计者。

4.ICP备案。网站备案的目的就是为了防止在网上从事非法的网站经营活动，打击不良互联网信息的传播，如果网站不备案的话，很有可能被查处以后关停。ICP备案可以自主通过官方备案网站 http://www.xiexiebang.com/sale/view.asp?Article ID=288 [4]许凌云，柳勇良.网页设计全方位学习[M].北京：清华大学出版社，2008，11 [5]陈琳.photoshop cs3 入门实战与提高[M].北京：电子工业出版社，2008，11 [6]焦慧.网页制作基础与典型范例[M].北京：电子工业出版社，2008，7 [7]戎马工作室.Dreamweaver 8与asp动态网站开发[M].北京：机械工业出版社，2006，5 [8]戴一波.Dreamweaver CS3网站制作炫例精讲[M].北京：电子工业出版社，2008，1 [9]何秀芳.网页制作与网站建设课堂实录[M].北京：人民邮电出版社.2009，3 [10]孙连三.新编网页制作与网站建设入门与提高[M].北京：人民邮电出版社.2008，9 [11]邓文渊.网页制作高手FLASH 8[M].北京：人民邮电出版社，2007，6 [12]胡崧.超梦幻劲爆网页[M].中国青年出版社.2008，7 [13]Scot Johson etal.using Active Server Page[J].Que 2007 [14]卓越科技.PHOTOSHOP CS3 美工广告设计百炼成精[M].电子科技出版社，2009，3 [15]David Hunter etal，Beginning XML[J].Wrox Press Ltd，2005 [16]杨大勇，李金江.ASP网络开发自学导航[M].北京：机械工业出版社，2007，6 [17]卓越科技.SQL SERVER数据库开发培训教程[M].北京：电子工业出版社，2009，4 [18]李曦琳.WEB导航设计[M].北京：电子工业出版社，2009，3 [19]力诚教育.ACCESS 2007完全自学手册[M].成都：四川出版集团，2009，3 [20]丛书编委会.ASP动态网页编辑[M].北京：清华大学出版社，2006，10 [21]陈刚.商业网站开发从入门到精通[M].科学出版社，2008，2 8

致 谢

毕业论文如期完成了，在此我要感谢在毕业设计期间给予我帮助的许多人。首先，我要特别感谢的是我敬爱的指导老师王琛老师。因为是他为我提供了一个良好的环境，才使我很好的完成了毕业设计。在设计期间他也给与我无私的帮助。在此表示深深的谢意。

正是他的付出，使我找到并改正了许多看起来很明显的错误和不严谨的论述。在毕业设计的过程中是愉快的，我很感谢与我设计有帮助的每一个人，是他们的存在，让我感到了毕业设计的过程中的快乐，使我融入到了团队工作中，感受到了相互合作的乐趣。

我对所有人的耐心表示感谢，尤其是我的指导老师王琛老师。他仔细阅读了我的论文和程序，并提出了许多宝贵的意见和建议。感谢他能在忙碌的工作中抽时间指导我。我在与他通过电话和电子邮件的联系中很好的把握住了设计的进度，使设计得以顺利完成。

最后，当然不能忘记帮助过我的老师和同学。写论文通常是一项非常枯燥的工作，但幸运的是他们使这项工作变成了一种乐趣。还有默默无闻帮过我的朋友，也在此表示对你们诚挚的感谢。