《网页设计艺术》全程教案

《《网页设计艺术》全程教案》由会员分享，可在线阅读，更多相关《《网页设计艺术》全程教案（62页珍藏版）》请在金锄头文库上搜索。

1、教 案 首 页第 1、2 课时课题 第一章 网页设计概述 课型 理论课教学目的了解网站，网页涉及的概念；了解网页设计涉及的相关概念；了解网页设计的语言 HTML；掌握学习网页设计的某一种工具；理解网站和网页的关系重点难点网页设计的综合素质培养教具挂图课本图 教学方法 图表法授课班级授课日期月 日 月 日 月 日 月 日 月 日教 学 过 程导入新课： 第一章 网页设计概述1、计算机网络的定义和发展2、网站与网页的概念3、网页制作素质和修养4、网站与网页的关系总结课后小结通过对网站网页设计中涉及到的基本概念解释，从而理解掌握网页设计的要求，区别网站与网页的关系，增强网页制作的素质培养。第一章 网

2、页设计概述信息(information),已经成为哲学、自然科学、技术科学和社会科学等各个领域所广泛应用的概念。随着信息技术的发展，网络成为人们共享信息的必然。建立网站也就是必然逝在必行。如何建好网站，如何建立有自身特色的网站将是我们这门课程所要讲述的内容。1、 网络的概念11 计算机网络的定义和发展在 20 世纪 50 年代中期，许多系统都将地理上分散的多个终端通过通讯线路连接到一台中心计算机上，这样就是出现了计算机系统。随着远程终端的增多，在主机前增加了前端机，随着发展，人们有了更深的理解。把计算机网络定义为“以传输信息为目的的而连接起来，实现远程信息处理或进一步达到资源共享的系统” ，这

3、就是网络的趋形。20 世纪 70 年代至 80 年代中期计算机网络得到了迅速的发展。ISO 在1984 年颁布了 OSI/RM。定义为新一代计算机网络体系结构的基础，这七层模型分别为：物理层、链路层、网络层、传输层、会话层、表示层、应用层。目前计算机网络的比较公认的定义是：计算机网络是指在网络协议的控制下，通过通讯设备和线路来实现地理位置不同且具有独立功能的多个计算机系统之间的连接，并通过网络操作系统等网络软件来实现资源共享的系统。12 计算机网络的分类计算机网络分类方法多种多样，常用的方法有：按网络的拓扑结构分类，按传输介质分类，按速率的分类，按数据交换方式分类以及按网络覆盖的地理范围分类。

4、按照网络覆盖的地理位置范围的大小分为：局域网，城域网，广域网。通常我们说的网络其实多是指广域网。13 网络的功能由网络的定义我们可知网络的功能就是数据通讯和资源共享。2、网站与网页的概念21 网站2.1.1 网站功能：网站是提供发布信息、收集信息的平台。2、网站概念：简单地说，网站是由网页通过超级超链接有机地集合而成，通过浏览器看到的画面就是网页。2.1.2 网站的分类：从网站的目的将网站分为：企业网站、政府网站、专业网站和个人网站。2.1.3 网站的管理功能：故障管理、计费管理、配置管理、性能管理、安全管理、站点信息管理。2.1.4 网站的地址为了使得连入的 INTERNET 的众多主机和通

5、讯设备在通信时能够相互识别，因而在 internet 中每台计算机都分配一个唯一的 IP 地址，每个 IP 地址是由四个整数组成，每二个整数之间用点隔开例如：202.112.103.235,其中 IP 地址的每一个整数都不能大于 255。其结构如下：计算机名 组织机构名 网络名 最高层域名在 INTERNET 中把 IP 定义了五类地址，即 A，B ，C，D，E 类地址。 2.2 网页2.2.1 网页制作的基础知识人们在通过 INTERNET 获取信息的同时，纷纷建立自己的主页和网站，向世界展示自己。一个网站可以包含一个或多个网页，这些网页以一定的方式连接在一起，成为一个整体，供人们观赏和为人

6、们提供服务。一个成功的网站的建设离不开其中每一张制作精美的网页。2.2.2 HTML 语言超文本文件的格式早在 1945 年就由 Vannevar Bush 提出，他在理论上建立了一个超文本文件系统。1965 年 Ted Nelson 第一次使用“超文本”一词来形容这种管理信息的系统。与 Bush 一样，他的超文本文件系统“Xanadu”，最终也未获得成功。1967年，在 IBM 资助下，世界上第一个真正运行成功的“超文本编辑系统”建成，这项研究由 Andries Van Dam 主持，在美国布朗大学最终完成。1969 年，美国国防部高级研究计划署建立了 ARPA 网，该网络最成功的技术就是

7、TCP/IP 协议。 超文本标识语言(HyperText Markup Language，HTML)的 HTML 最早版本起源于 1992 年，HTML 4.01 版于 1999 年 12 月 24 日被推荐使用。HTML 最初用于发布信息，并没有在网络上使用。但它那极容易使用的显著特点和随着网络带宽的逐渐增加，人们便将其作为网络上发布信息的首选语言。超文本标识语言的领头先锋是美国麻省理工学院计算机科学实验室的 WWW 标准化组织，又称万维网联盟，其互联网地址为：http:/www.w3c.org 。有关 HTML 语言的各种参考资料和 W3C 行将发布的各种新版特征、最新消息等内容，均可以在

8、这个网站上查到。此语言可以把网页里的文字、表格、图象、动画、声音和视频等等有机地组织在一起，构成一种超文本 标记语言（HTML） 。HTML 语言生成扩展名是.HTM 或.HTML 的文件。HTML 语言是标准的 ASCII 文件，由一对标记，和 组成,内容包括文件的头,文件的主体,文件结尾三部分。2.2.3 网页制作的工具虽然 HTML 语言是功能强且语法简单的网页设计语言。但是，直接用 HTML 在普通的文本编辑器上编写制作复杂精美的网页是很不方便的。网页设计者不得不花大量的时间去测试所写的文档是否合乎其语法规则，又不能在网页设计的同时就了解文档在浏览器上地显示的确切效果。其次要记忆、掌握

9、大量的 HTML 语言地语法规则也不是一件容易的事情。而现在可视化网页设计工具可以使得设计者网页设计轻松自如。网页设计的工具很多，当前流行的工具有：Frontpage：它是建立和管理专业网站的简易工具，用户可以精确地将网页中的每一个元素放置在网页地任意位置上；用户可以自定义主题。它具有方便地数据库管理功能，还能提供灵活的网页发布工具。Dreamweaver：它是 Macromedia 公司设计推出，可以最快的方式将 Photoshop 等文件移至网页；它能够通过网站地地图快速制作网站雏形、设计、更新和重组网页；提供了可视化编辑与原代码编辑同步的设计工具；集成了动态出版可视编辑及电子商务功能，在

10、动态网页设计中网页的预览无需通过浏览器；利用它设计的网页一般不受平台的限制。Flash：它能制作可任意放大的动画，使用方便，它提供的交互动画文件容量很小，它的使用流技术播放动画。以上三种网页设计工具通常称为“网页设计三剑客” 。网页设计的工具很多，常用的还有 Interdev，Hotmetal Pro 等等。这里不做一一介绍。224 网页设计早期的网页外观是静态的，只有文字与静态的图片，用户只能被动地阅读网页制作者提供的信息。其网页的内容也是静态的，若无外来干预，其内容不会自动改变，也无法通过网页实现与访问网页者交互信息的功能。因此，为了克服静态网页的呆板、缺乏交互性等缺点，使网页变得绚丽多彩

11、、充满互动性，动态网页便应运而生。动态网页技术包括网页的动态表现技术与网页的动态内容技术，前者是网页外观的动态表现技术，如 GIF 动画、FLASH 技术、DHTML（动态 HTML）技术、VHTML（虚拟 HTML）技术、 VRML（虚拟实现造型语言）技术等。而网页的动态内容技术是通过一定的计算机语言编程如 CGI、ASP 、JSP 等，使得计算机按照网页设计者设置的网页格式，生成所需要内容的网页并传送给访问网页者浏览。225 音频与视频随着多媒体技术的发展，人们已经不满足简单的文件传输，电子邮件，远程登陆等网络应用。人们希望网络提供实时交互的服务，如：视频会议、视频点播、远程多媒体教学和网

12、上购物等。音频：通过计算机的声卡等多媒体设备来实现声音的传输和播放。一般有 Wave波形音频、MIDI 音频和 CD 音频，MP3视频：通过视频采集和处理实现图象的传输和播放。一般有AVI，MOV，MPEG 等格式的文件。226 简单介绍 HTML 语言的设计Html 语言设计的代码书写可以在写字板或记事本等一些编辑平台中实现。下面举一个简单的实例来说明 HTML 语言的书写过程和其结构例 1.1 含有超文本标识的网页源程序。含有超文本标识的网页源程序读书人的三个意境昨夜西风凋碧树，独上高楼，望尽天涯路。衣带渐宽终不悔，为伊消得人憔悴。众里寻她千百度，蓦然回首，那人却在灯火阑珊处。昨夜西风凋碧

13、树，独上高楼，望尽天涯路。衣带渐宽终不悔，为伊消得人憔悴。众里寻她千百度，蓦然回首，那人却在灯火阑珊处。例 12 简单的表单设计您的姓名:密码:3网页制作素质和修养网页制作是一个系统工程，一个网页的优劣完全取决于设计者的综合素质和动机。不仅仅是一个技术的问题，还要重视艺术性。并且不可以偏废。技术是基础，艺术是升华，艺术效果表现用技术来实现。好的网页让人留恋往返。这不仅仅是技术的高超，而是艺术效果吸引了浏览者的眼球。所以这是一个综合的系统的工程。4网站与网页的关系网站是一个主体，是“框架” ；网站突出一个主题；网站的目标是组织；网站好比一本画册。网页是被包含于网站之中的个体，是“砖瓦”；网页围绕

14、网站主题各分项，丰富和烘托主题；网页的目标是表现；网页好比画册中的每一个分页。 小结：网站是爸妈，网页是她们的孩子；爸爸妈妈的行为影响她的孩子，也是孩子成长的灯塔；她的孩子优秀也使得爸爸妈妈荣光。没有爸爸妈妈的孩子是无人问，没有孩子的爸爸妈妈只能孤独一生。5习题（1）网页元素包括哪些？打开网易（） ，指出其中包含的网页通常怎样对网页页面分区？各分区应放置什么内容？ （2）元素请阐述网页设计与平面设计的异同点。（3）网页与网站有何不同？请举例说明。（4）请从不同角度阐述网页的功能。 （5）请分析一下网页设计的基本要素和潜能。 （6）请阐述网页设计与平面设计的异同点。 （7）网页构成的基本元素是什

15、么？ （8）怎样使网页内容更具合理性？ （9）说出自己熟悉的 3 个网页，并试分析它的归类。 （10）按照网页的分类，自拟主题设计一帧页面。 教 案 首 页第 3、4 课时课题 第二章 网站赏析 课型 理论课教学目的初步了解网页赏析要求；理解网页赏析的理论要求；理解网页设计合乎心理需要；掌握网页突破性设计的要素；分清各类网站的设计要求和框架；理解实例分析过程。重点难点各类网站的设计要求和框架网页设计合乎心理需要教具挂图课本图 教学方法 图表法授课班级授课日期月 日 月 日 月 日 月 日 月 日教 学 过 程导入新课： 第二章 网页赏析一、网页设计概述二、网页赏析要求三、网页设计要合乎心理需要

16、四、网页设计与网站主题五、网页突破性设计的要素总结六、各类网站的设计要求和框架七、网页赏析：举例说明课后小结通过对第五个和第六个问题的讲述，引导学生进行网页赏析。第二章 网页赏析2.1 概述2.1.1 网页设计概述网页界面的构成要素，除了有传统媒体的文字、图形、色彩等基本构成要素以外，还有声音、视频、动画等多媒体要素，以及其他一些特效和交互功能。正因为如此，对于网页的赏析、评测也将是多角度、全方位的。虽说网页界面设计与平面设计非常类似，但也存在着一个很大的差异，那就是网页界面作品具有明确的实用功能，而一般的艺术作品只具单纯性观念。实际赏析和评测网页界面作品的第一点，是看它是否具有完整的功能，其次才是它的艺术效果。优秀的网页界面作品应该是实用的物质功能与审美的精神功能完美的结合。每一个人由于经历、经验、思维方式的不同，对事