《网站规划与网页设计-浙江师范大学》由会员分享,可在线阅读,更多相关《网站规划与网页设计-浙江师范大学(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 属性,可以改变图片的垂直(居上、居中、居下)对齐 方式和水平对齐方式(居左、居中、居右)。 设置图片链接。示例如下: 你可以将一张图片作为一个链接,点击这个图片。 使用标记设置滚动字幕或是图片。 (