网站规划与网页设计-浙江师范大学

《网站规划与网页设计-浙江师范大学》由会员分享，可在线阅读，更多相关《网站规划与网页设计-浙江师范大学（52页珍藏版）》请在金锄头文库上搜索。

1、1 网站规划与网页设计网站规划与网页设计 实验指导书实验指导书 编编写者：胡峰写者：胡峰 浙江浙江师师范大学范大学 文科文科综综合合实验实验教学中心教学中心 2 目目 录录 课程实验教学大纲 .3 实验一、XHTML 的基础知识与创建静态网页7 实验二、VBSCRIPT 脚本语言17 实验三、DREAMWEAVER 8 的基础知识创建和编辑网页.28 实验四、FIREWORKS 基本操作.33 实验五、FLASH 遮罩动画的制作.36 实验六、ASP 编程环境设置.40 实验七、网站规划综合实验 47 3 课程实验教学大纲课程实验教学大纲 课程编号：6804049 实验课时：18 实验是否独立

2、设课：是 课程负责人：胡峰 任课教师： 胡峰、赵小红 一、 课程简介、目的与任务 网站规划与网页设计 课程是电子商务等专业的一门核心课程，也是其他计算机 专业的普及型课程，它涵盖了 HTML 设计、JavaScript 脚本编程语言、 Dreamweaver、Fireworks 等相关知识，全面介绍 WEB 站点设计的基本操作技术和使用 技巧。 通过本课程的学习，使学生掌握 HTML 语言的语法规则及文字、链接、列表、表格、 表单、图像、多媒体、框架元素标记及属性，能设计出多窗口网页、动态网页；能熟练 运用 Dreamweaver 进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技

3、能；能实现网页的交互和特殊效果；能维护、管理和设计WEB 应用程序；能独立设计 小型 WEB 站点等。 二、 实验的地位、作用和目的 网站规划与网页设计 ，是一门实践性很强的课程，上好实验课是保证教学质量的 关键环节。 通过本课程的学习，让学生能够掌握静态网页的制作工具的使用以及HTML 标记语 言的运用，并掌握 JavaScript 脚本语言编程的基本方法与技巧。熟练掌握Fireworks 工具的使用，具备图形处理与制作的能力，如图片的美化、网络广告等。具备网站的建 立、规划、管理、发布的相关技术及网页制作的操作技能，能独立设计小型WEB 站点。 通过课堂教学和实验教学的结合，课堂进行理论、

4、方法的学习，实验进行动手操作， 使能够合理地进行站点规划，利用各种工具制作出符合要求的精美页面，功能强大的站 点，并能进行站点维护和更新工作，进而培养学生的方法能力、学习能力、专业能力及 社会能力。 4 三、 实验方式与基本要求 知识要求： 1.了解 Web 站点的工作原理； 2.了解 Internet、WWW、HTTP、HTML 的定义，概念和作用； 3.理解服务器、客户端、浏览器的概念和作用； 4.理解 HTML 语言中的各种文本格式、字符格式、段落设置、列表、表单、框架、 多媒体标记的作用； 5.理解表格、表单的作用； 6.理解 JavaScript 中对象的定义，及含义； 7.理解 J

5、avaScript 中事件的概念； 8.理解 JavaScript 中属性与方法的概念； 9.了解面向对象程序设计思想； 10. 理解 Dreamweaver 应用软件中菜单项的功能； 11. 理解 Fireworks 应用软件中菜单项的功能。 能力要求： 1.学会熟练运用 Dreamweaver 和 Fireworks 应用软件； 2.熟练掌握使用绝对和相对 URL，创建超链接，图像链接； 3.学会运用 HTML 语言中的标记； 4.熟练掌握设置颜色、文本格式和列表； 5.掌握在网页中添加 CSS 的方法 6.掌握在网页中嵌入图像、声音、多媒体信息的方法； 7.熟练掌握表格的使用方法，学会利

6、用表格设布局网页； 8.掌握框架制作网页的方法，会使用框架设计网页； 9.掌握制作表单的方法，会利用表单建立交互式页面； 10. 掌握 JavaScript 语言的语法； 11. 掌握在 HTML 语言代码中嵌入 JavaScript 代码的方法，能看懂 JavaScript 特效网 页源代码； 12. 学会修改 JavaScript 代码，实现不同的特效网页效果； 13. 学会使用 JavaScript 语言实现网页特效。 素质要求： 1.具有勤奋学习的态度，严谨求实、创新的工作作风； 5 2.具有良好的心理素质和职业道德素质； 3.具有高度责任心和良好的团队合作精神； 4.具有一定的科学思

7、维方式和判断分析问题的能力； 5.具有较强的网页设计创意思维、艺术设计素质。 四、 实验环境及设备、材料要求 带有投影仪的多媒体网络机房，并全要配备Pentium以上 PC，局域网可用；并安 装好 Windows XP/2003，MS Office 2003，Dreamweaver 8，Fireworks 8，Flash 8 等 软件。 五、 实验项目一览表 序号实验项目名称目的要求、内容提要 实验 时数 实验 类型 必做选 做 1 XHTML 的基础知识与 创建静态网页 掌握如何利用 XHTML 创建网页，了解 XHTML 的各种标记； 掌握 XHTML 的 各个元素，以及元素特性。 4 验

8、证 实验 必做 2VBScript 脚本语言 了解并掌握 VBScript 脚本程序设计语 言的基本语法知识及简单程序设计方法； 熟练掌握 ASP 环境中的输出方法； 熟练掌握 VBScript 的 If 语句和 Select Case 语句的编程技术； 熟 练掌握 VBScript 的 ForNext、DoLoop 和 For eachIn 等循环语句的编程技术 2 验证 实验 必做 3 Dreamweaver 8 的基 础知识创建和编辑网 页 掌握站点管理，网页元素处理及表单、 框架、模板等高级应用功能； 掌握 如何组织排版、制作网页、网页发布等 功能 2 验证 实验 必做 4Firewo

9、rks 基本操作 掌握 Fireworks 制作地球实例； “橡皮图章”工具复制小狗； 将图 5-7 中的两张猪笼草图像进行合成处理， 效果如图 5-8 所示； 将几张图片制 作成一个自动播放的 GIF 动画 2 验证 实验 必做 5FLASH 遮罩动画制作 理解遮罩动画的制作原理； 学会创建、设计遮罩动画 2 验证 实验 必做 6 序号实验项目名称目的要求、内容提要 实验 时数 实验 类型 必做选 做 6ASP 编程环境设置 掌握 Windows 2000/NT 服务器上 IIS(Internet 服务管理器)的安装与配 置； 掌握虚拟目录的设置方法； 掌握 ASP 文件上传、下载和运行方法

10、； 掌握 Dreamweaver MX 站点环境的设置。 2 验证 实验 必做 7网站规划综合实验 对 web 站点进行规划。包括 web 站点目 录结构和链接结构的规划；站点主题、 名称、LOGO 标志进行规划； 网站 主页的设计与实现； 其他静态页面 的设计与实现； 网络留言版的设计 与实现； 对网站进行测试与调试。 4 综合 实验 必做 六、 报告与考核 本课程考核采用形成性考核方式，即课程考试成绩由学习期间的各项成绩组成，即 平时考核成绩 20%+期末考核成绩 80%。其中平时考核成绩强调学生的课堂出勤、学习纪 律和作业、试验及课程设计等完成情况；期末考核采用开卷上机操作的方式。 七、

11、 实验教材与主要参考书 1. 参考教材： 网站规划与网页设计 、张兵义、电子工业出版社 。 7 实验一、实验一、XHTMLXHTML 的基础知识与创建静态网页的基础知识与创建静态网页 一、 实验目的 1. 掌握如何利用 XHTML 创建网页，了解 XHTML 的各种标记； 2. 掌握 XHTML 的各个元素，以及元素特性。 二、 实验内容 1创建一个新页面； 2熟悉 XHTML 中段落和文字排版的标记； 3熟悉 XHTML 中图片、表格、框架、表单、超链接的应用。 三、 预习要求 了解 XHTML 的概念，元素，以及元素属性。 四、 实验步骤 （1） 建立一个新页面 sy1-1.htm。内容为

12、个人主页。 打开记事本，新建一个文件，然后拷贝以下代码到这个新文件，然后将这个文 件存成 sy1-1.htm。 Title of page This is my first homepage. This text is bold 要浏览这个 sy1-1.htm 文件，双击它。或者打开浏览器，在 File 菜单选择 Open，然后选择这个文件。 （2）熟悉基本的 HTML 标记 学习 HTML 最好的方法，就是跟着示例学。根据我们下面的示例一起来熟悉 HTML 的标记。把示例中的代码拷贝到记事本当中，保存成 sy1-x.htm，查看示例效果。 8 这是一个非常简单的 HTML。 这个示例算是一个

13、最简单的 HTML 文件，只包含了最基本的能构成一个 HTML 文件 的 Tag。通过这个例子，同学们可以看到浏览器是如何显示这个文件的，以此对 HTML 文件有个最初的认识。 在 HTML 里用和划分段落。示例如下： 这是第一段。 这是第二段。 这是第三段。 在 HTML 里，用 p 来定义段落。 这个示例显示在 HTML 文件里如何分段。 HTML 用到这几个 Tag 来定义正文标题，从大到小。示例如下： 这是 1 号标题 这是 2 号标题 这是 3 号标题 这是 4 号标题 9 这是 5 号标题 这是 6 号标题 HTML 用 align=“center“定义正文标题居中。示例如下： 这

14、是标题 上面的标题是居中显示的。 通过使用这个 Tag，可以在不新建段落的情况下换行。没有 Closing Tag。用换行是个坏习惯，正确的是使用。示例如下： This is a paragraph with line breaks 在 HTML 文件里，你可以写代码注释，解释说明你的代码，这样有助于你和 他人日后能够更好地理解你的代码。注释可以写在之间。浏览器是忽略注 释的，你不会在 HTML 正文中看到你的注释。示例如下： 代码注释是不会显示在网页里的。 HTML 用 hr 这个 Tag 可以在 HTML 文件里加一条横线。示例如下： 用 hr 这个 Tag 可以在 HTML 文件里加一条

15、横线。 村妇想像皇宫的生活：皇后得用金扁担挑水吧。 10 问：谁是世界上最可怜的人？答：炮兵连炊事班战士！问：为什么？答：戴 绿帽背黑锅看别人打炮。 初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！ 我要变形了！ HTML 当中用 bgcolor=“ “定义网页背景颜色。示例如下： 看，这个页面是黄色的。 （3）熟悉基本的 HTML 常用格式 常用文本格式常用文本格式 TagTag TagTag 说明说明 粗体 bold 斜体 italic 文字当中划线表示删除 文字下划线表示插入 下标 上标 缩进表示引用 保留空格和换行 表示计算机代码，等宽字 体 示例如下： 11 粗体用

16、 b 表示。 斜体用 i 表示。 芙蓉姐姐这个词当中划线表示删除。 想唱就唱这个词下划线插入。 X2其中的 2 是下标 X2其中的 2 是上标 好好学习，天天向上。这句话缩进表示引用 这是 预设(preformatted)文本. 在 pre 这个 tag 里的文本 保留 空格和 分行。 call getOrders 用 code 显示计算机代码，code 里显示的字符是等宽字符。 （4）HTML 的超链接 建立一个超链接 这是一个链接 百度 12 （4）HTML 中图片的应用 设置图片的大小。在缺省状况下，图片显示原有的大小。你可以用 height 和 width 属性改变图片的大小。 设置图片位置。用 align 属性，可以改变图片的垂直(居上、居中、居下)对齐 方式和水平对齐方式(居左、居中、居右)。 设置图片链接。示例如下： 你可以将一张图片作为一个链接，点击这个图片。 使用标记设置滚动字幕或是图片。 （