网页设计与制作

教 案

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、请把教师机上“website”文件夹复制—>粘贴到本地D盘根目录下, 上交时必须把整．．．．．．．个文件夹压缩打包，并重命名为“学籍号.rar”，不要填加空格或是其他分隔符。 ．．．．．．．．．．．．．．．．．．．．．．

2、此文件夹中只能包括主页文件(index.html)和三个下级文件夹files、images、other、css。文件夹files中存放除主页外的其他网页文件（扩展名为.html），文件夹images中存放图片（题目中所有的图片都在改文件夹内），文件夹css中存放样式表文件（扩展名为.css），文件夹other中存放其他所有文件。在文件夹files、images、other、css中不得再自建子文件夹。

3、除以上规定的文件和文件夹外，其他的文件只能由小写字母、阿拉伯数字和下划线组成，扩展名必须为小字英文字母。

4、不按以上要求制作将做扣分处理。 ．．．．．．．．．．．．．．．．．

5、考试时间：90分钟。 ．．．．．．．．．．．．

1

一、理论题

《网页设计与制作》期中测验

一、填空题：（2分X30空）

1、静态网页的后缀名通常为_________和_________。

2、通常所说的“网页制作三剑客”指美国Macromedia公司推出的___________、___________和___________。

3、表格的宽度可以用_______和_________两种单位来设置。

4、要为词条“与我联系”创建一个Email地址的链接，邮箱地址为：hailing@163.com，请编写语句代码______________________________________。 5、在DW软件窗口中有三个视图，它们分别是_______、_______和 ________。 6、网页其实是用HTML编写的，HTML的中文名称是_____________________。 7、通过_________的方式可以使各个网页之间联接起来，使网站中众多的页面构成一个有机整体，使访问者能够在各个页面之间跳转。

8、如果要使浏览器不显示表格边框，应将“边框粗细”设置为_______。 9、HTML语言中的列表标记符包括“项目列表”标记符________和“编号列表”标记符________，它们都是成对标记符。