网页设计与制作上机实践

发行部：ｃｙｌ＠ｍｏｅ．ｅｄｕ．ｃｎ《中国教育信息化》

教学探索应用

《网页设计与制作》

课程教学设计与实践

清华大学计算机系

摘

安颖莲李秀姚瑞霞田荣牌

要：《网页设计与制作》是当前热门课程，该课程集知识和技能于一体，实践性很强。我们以一个学习任

边讲边练的方式和案务为主线贯穿整个学习活动，精心设计教学内容和与之配套的实验教学，采取在机房上课、例教学法，锻炼了学生解决实际问题的能力、自主学习能力和协作学习能力。

关键词：网页制作课程设计实验教学中图分类号：Ｇ４３４

文献标识码：Ａ

文章编号：１６７３－８４５４（２００７）０９－００５３－０３

一、课程特点

网页设计与制作》课程在清华大学计算机教学体系《

中属于应用专题系列课，是全校选修课。该课程集知识和技能于一体，实践性很强，要求学生既要学好理论知识，又要掌握操作技能，还要具有解决实际问题的能力，能将基本技能和操作综合运用到具体的项目中。该课程的教

网页制作类课程是近几年国内高校普遍开设的课程，也是计算机领域发展最快、应用最广泛的课程之一，该课程内容丰富、实用性强，深受学生欢迎。如何在有限的课时中使学生掌握网页设计的精髓，是教师在课程设计中最应关注的问题。笔者结合在清华大学讲授《网页设计与制作》课程的经验，探讨这一问题。

教 案

2012 ～ 2013 学年第 二 学期

学

部 工程技术学部

教研室(实验室) 动漫

课 程 名 称 网页设计与制作 授 课 班 级 11动漫 主 讲 教 师 职

称 讲师

网页设计与制作案例教程

使 用 教 材 主编：九州书源

清华大学出版社

教 案（首页）

至 12-13 学年第 二 学期 课程 名称 网页设计与制作 课程编码 学 分 4 总计：72 学时 类别 必修课（ √ ） 选修课（ ） 理论课（ √ ） 实践课（ √ ） 讲课：36 学时 任课 教师 授课 对象 基本 教材 教材：网页设计与制作案例教程 和主 主编：九州书源 要参 清华大学出版社 考资 参考资料：网页设计与制作案例教程 主编:陈承欢 料 教学 目的 要求 教学目的：本课程是动漫专业的一门职业技术必修课，目的是使学生掌握有关网站建设的基本概念、创建网站的方法和步骤、重点掌握利用Dreamweaver软件来设计布局静态网页以及一些简单的JavaScript脚本语言、熟练掌握网页编写语言html，能够利用Dreamweaver来创建和设计一个网站，为以后学习Web动态网页的开发奠定基础。 教学要求：通过本课程的

第1、2课时 网页设计概述

【教学内容】

讲解网页设计的相关术语及网站制作的基本流程。

【教学目的】

使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。

【教学重点】

网页设计中的若干术语。

【教学难点】

理解网页设计中的若干术语。

【教学方式】

讲授式、讨论式、案例分析式。

【教学参考】

1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。

2、《Internet 网页工场》Wittime工作室 重庆出版社。

3、《WEB网站设计》Joel Sklar著 高等教育出版社。

4、《HTML网页制作教程》材义语编著 铁道出版社。

【新课内容】

1.1 WWW和URL

1.1.1 Web的起源

Web是World Wide Web的简称，一般也称之为WWW或3W

1.1.2 Web的特点和结构

Web最大的特点是使用了超文本（Hypertext）

WWW采用C/S（客户机/服务器）工作模式

在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议

1.1.3 URL

URL的完整格式

协议://主机名或IP地址：端口号/路径名/文件名

1.2 IE5的使用

Web浏览器是浏览Internet资源的客户端软

主题：中秋

课程名称：网页设计

设计题目：中秋主题

学院：电子信息工程学院

专业班级：自动化1205

学生姓名:孟祥麟

学号：12212042

教师:黄宇 《网站设计与制作》报告

主题：中秋

中秋网页制作过程

一、网站开发目的和功能简介

网站详细得向大家展示了中秋节的起源习俗等文化色彩。 中秋节又称月夕、秋节、仲秋节、八月节、八月会、追月节、玩月节、拜月节、女儿节或团圆节，是流行于中国众多民族与东亚诸国中的传统文化节日，时在农历八月十五；因其恰值三秋之半，故名，也有些地方将中秋节定在八月十六。

二、 网站的设计

1、 网站的名称：中秋

2、 网站栏目划分

根据本网站的内容和功能划分为：首页、中秋起源、中秋习俗、中秋诗词、神话传说。

（1）首页——表明网站主题；

（2）中秋起源——对中秋的起源和发展做了详细的讲解，让大家了解相关知识；

（3）中秋习俗——详细讲解了全国各地的各种中秋习俗；

（4）中秋诗词——引用了一些有名的诗词；

（5）神话传说——通过flash、文字、图片等为大家呈现中秋神话；

（6）版权信息——声明了网站的建设者。

具体如图所示:

首页

中秋起源

中秋习俗

中秋诗词

主题：中秋

神话传说

3、网站导航应用于所有页面提高网站的操作友好性。

4、网站的风格与色彩选择：页面以橙黄色为主。体

第一章网页设计与制作基础

本章要点

通过本章学习，考生应了解互联网的基本功能、服务、原理，对网页浏览服务的体系结构、技术名词、浏览器有基本的了解，对于网页的设计原则和所使用工具也应有一定的认识，从而为继续深入学习网页制作技术打下知识基础。

第一节关于互联网

一、什么是协议

网络协议：是一系列通信规则的总称，主要包括用户数据与控制信息的结构和格式、需要发出的控制信息以及相应要完成的操作与响应、对事件实现顺序的详细说明等三部门内容。 硬件协议：定义了硬件设备如何运作以及如何协同工作。

软件协议：程序之间的通信是通过软件协议完成的。

二、互联网协议

1、TCP/IP是为了连接不同的网络而设计的一个协议集，主要由TCP和IP两套协议组成，互联网就是以此为基础建立的。这套协议包括远程登录、文件传送、电子邮件等，TCP/IP可与任何硬件或操作系统一起工作。

（1）IP网际协议

IP协议处理网络上一个主要到另一个主要的数据报路由选择，远行在OSI网络七层模型中的网络层上。OSI开放系统互联是由国际标准化组织发起制定的计算机网络通信标准。OSI定义了网络功能的七层模型，分别是：应用层、表示层、会话层、传输层、网络层、数据链路层、物理层，称为OSI七层模型。

（2）TCP传输

毕 业 设 计（论 文）

论文题目：网页设计与制作

学习中心（或办学单位）：电子科技大学

1

摘要

网页设计作为用户界面交互设计的延伸，实在新的媒体和新的技术支持实现一个全新的设计创作领域。设计创作网页与循环其特有的特点和结构思路，具备可实际行和外观时尚。本论文将对网页设计的开发语言开展研究和讨论。在网页设计与制作语言的基础上， 着重使用 HTML作为工具语言进行网页设计与制作 的实际操作，分别对基于对象的 HTML、css、JavaScript进行详细描述并实现网页的开发。

关键字：制作、设计、HTML

2

Summary

Web design as an extension of the interactive user interface design, it is a new media and new technologies to support a whole new field of creative design. Design creation of web pages and circulation of its unique characteristics and structure

第一章网页设计与制作基础

本章要点

通过本章学习，考生应了解互联网的基本功能、服务、原理，对网页浏览服务的体系结构、技术名词、浏览器有基本的了解，对于网页的设计原则和所使用工具也应有一定的认识，从而为继续深入学习网页制作技术打下知识基础。

第一节关于互联网

一、什么是协议

网络协议：是一系列通信规则的总称，主要包括用户数据与控制信息的结构和格式、需要发出的控制信息以及相应要完成的操作与响应、对事件实现顺序的详细说明等三部门内容。 硬件协议：定义了硬件设备如何运作以及如何协同工作。

软件协议：程序之间的通信是通过软件协议完成的。

二、互联网协议

1、TCP/IP是为了连接不同的网络而设计的一个协议集，主要由TCP和IP两套协议组成，互联网就是以此为基础建立的。这套协议包括远程登录、文件传送、电子邮件等，TCP/IP可与任何硬件或操作系统一起工作。

（1）IP网际协议

IP协议处理网络上一个主要到另一个主要的数据报路由选择，远行在OSI网络七层模型中的网络层上。OSI开放系统互联是由国际标准化组织发起制定的计算机网络通信标准。OSI定义了网络功能的七层模型，分别是：应用层、表示层、会话层、传输层、网络层、数据链路层、物理层，称为OSI七层模型。

（2）TCP传输

主题：中秋

课程名称：网页设计

设计题目：中秋主题

学院：电子信息工程学院

专业班级：自动化1205

学生姓名:孟祥麟

学号：12212042

教师:黄宇 《网站设计与制作》报告

主题：中秋

中秋网页制作过程

一、网站开发目的和功能简介

网站详细得向大家展示了中秋节的起源习俗等文化色彩。 中秋节又称月夕、秋节、仲秋节、八月节、八月会、追月节、玩月节、拜月节、女儿节或团圆节，是流行于中国众多民族与东亚诸国中的传统文化节日，时在农历八月十五；因其恰值三秋之半，故名，也有些地方将中秋节定在八月十六。

二、 网站的设计

1、 网站的名称：中秋

2、 网站栏目划分

根据本网站的内容和功能划分为：首页、中秋起源、中秋习俗、中秋诗词、神话传说。

（1）首页——表明网站主题；

（2）中秋起源——对中秋的起源和发展做了详细的讲解，让大家了解相关知识；

（3）中秋习俗——详细讲解了全国各地的各种中秋习俗；

（4）中秋诗词——引用了一些有名的诗词；

（5）神话传说——通过flash、文字、图片等为大家呈现中秋神话；

（6）版权信息——声明了网站的建设者。

具体如图所示:

首页

中秋起源

中秋习俗

中秋诗词

主题：中秋

神话传说

3、网站导航应用于所有页面提高网站的操作友好性。

4、网站的风格与色彩选择：页面以橙黄色为主。体

存档资料成绩：

课程设计报告书

课程名称网页设计与制作

题目设计个人网站主页

分院电信分院

专业班级电子商务

学号

学生姓名

指导教师

2011 年 6月 20日

课程设计评阅意见

评阅人__________职称________

年月日

目录

第1章课程设计任务书 .................................. 错误!未定义书签。

一、课程设计题目设计个人网站主页............... 错误!未定义书签。

二、课程设计工作：................................... 错误!未定义书签。

三、课程设计的内容要求：............................. 错误!未定义书签。

1、课程设计要求.................................. 错误!未定义书签。

2、课程设计内容.................................. 错误!未定义书签。

第2章课程设计目的 .................................... 错误!未定义书签。

第3章课程设计内容................................... 错误!未定义书签。

设计一选题的

- 1 -

实验一 Dreamweaver 站点管理和建立简单的网站

【 实验目的 】 使学生掌握 Dreamweaver 的基本使用方法，并利用 Dreamweaver 工具制作一个比较完整的网页。

【 实验器材 】安装有Windows 98/2000/xp；Dreamweaver MX，Flash MX，Fireworks MX；IE浏览器，NetScape浏览器，IIS5.0 等软件的计算机。

【 实验内容 】 利用Dreamweaver制作一个简单网站，要求满足以下条件： ? 至少有4个网页，网页之间用超链接相连；反映一中心主题； ? 网页中尽量图文并茂，即有文字，也配以一定的展示图片； ? 某网页中要包含图像映射超链接，链接目标是一副图像； ? 制作鼠标经过图像效果作为网站的导航系统； ? 制作图像翻转效果及网站相册效果；

【 实验步骤 】

一、在Dreamweaver中建立本地站点的操作步骤如下：

1、在Dreamweaver文档窗口中，依次单击“站点”菜单→“新建站点”命令或者是在“站点”面板中单击“站点”菜单→“新建站点”命令，打开“站点定义”对话框。如图所示。选择“高级”选项卡建立站点(也可以按“基本”选项卡中的向导