网页设计与制作-第一次课要点课件

第1章网页设计基础信息与自动化学院·吕向风A-5038213746012/2/2022网页设计与制作第1章网页设计基础信息与自动化学院·吕向风网页设计与制作网页设计与制作一、课程基本信息二、教学目的、要求三、课程主要内容和学时分配四、学习评价与考核五、使用教材六、参考资料七、知识拓展八、课程学习方法指导网页设计与制作一、课程基本信息一、课程基本信息课程名称:网页设计与制作课程性质：计算机科学与技术专业学科专业课课程学时和学分：总学时：48总学分：3

理论学时：24实验学时：24适用专业：计算机科学与技术先修课程：图形图像处理技术、动画设计与制作开课学院：信息与自动化学院教研室：计算机科学与技术教研室一、课程基本信息课程名称:网页设计与制作二、教学目的、要求“网页设计与制作”是高等学校计算机相关类专业的专业基础课或专业骨干课程，本课程传授和训练网页设计与制作的基本知识和基本技能。通过学习使学生掌握网页、网站的概念、熟练掌握网页主要工具软件Dreamweaver中文版的使用以及了解网页制作的拓展内容（Flash、Firework）的相关内容，通过熟练运用网页制作工具软件使学生具备能够设计并制作中小型网站的能力。二、教学目的、要求“网页设计与制作”是高等学校计算机相关类专教学目标知识目标：了解Web站点的工作原理；了解WWW、HTTP、HTML、CSS的定义，概念和作用；掌握HTML语言中的各种文本格式、字符格式、段落设置、表单、框架、多媒体标记的作用；熟练掌握Dreamweaver网页制作软件的使用；掌握表格、表单的使用，理解事件的概念，理解属性与方法的概念；熟练掌握利用CSS来控制网页中相应内容的样式；熟悉Dreamweaver中行为、模板和库的使用；理解网站发布的基本步骤。能力目标：能熟练运用Dreamweaver应用软件；熟练掌握使用绝对和相对URL，创建链接，图像链接的方法；学会运用HTML语言中的标记设置颜色、文本格式，熟练掌握颜色值的配置和背景图案的设置方法，熟练掌握字符、链接颜色的设置方法；掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法；熟练掌握表格的使用方法，学会利用表格设置布局网页；掌握框架制作网页的方法，会使用框架、层设计网页；掌握制作表单的方法，会利用表单建立交互式页面；会在网页制作中使用行为、库和模板。教学目标知识目标：了解Web站点的工作原理；了解WWW、HT三、授课主要内容和学时分配第一章网页设计基础第二章网页设计语言基础第三章初识Dreamweaver第四章文档的创建与设置第五章表格与框架第六章用CSS美化网页第七章网页布局技术第八章网页表单技术第九章使用行为、模板和库第十章综合实例三、授课主要内容和学时分配第一章网页设计基础第二章网页设三、授课主要内容和学时分配序号章节理论学时实验学时1第一章网页设计基础202第二章网页设计语言基础663第三章初始Dreamweaver24第四章文档创建与设置225第五章表格与框架226第六章用CSS美化网页247第七章网页布局设计228第八章网页表单技术229第九章使用行为、模板和库4410复习综合实验-个人网站制作2合计2424三、授课主要内容和学时分配序号章节理论学时实验学时1四、教学环节安排课堂教学：该门课程安排在专业机房授课，因此在理论教学所讲授的操作方法，让学生利用机房的便利条件上机制作小例子的方式随堂消化理论知识。同时强调记笔记的重要性，需要记录的地方会给学生提出来，一些重要的操作命令在讲授的同时，会要求学生随堂记录。在实验课上上针对理论课上讲解的内容让学生做相应的实验内容以期学生能很好地掌握所学知识，并制作实验讲义明确实验目的以及实验内容。1、教学方法：采用多媒体教学为主、网络教学为辅的教学方法。2、教学手段：在教学过程中采用任务驱动教学手段。3、外语要求：关键术语和概念的英语描述和缩写能够熟练读写。四、教学环节安排课堂教学：该门课程安排在专业机房授课，因此在五、考核和成绩评定方法

在课程结束后，要求学生统一参加期末考试。最终以平时成绩（10%）、期中考试成绩（20%）和期末考试成绩（70%）一起确定学生的课程总评成绩。平时成绩主要包括出勤、课堂表现（回答问题、听课状态）和期中成绩主要为实验作业，通过平时成绩的给定，体现该门课程不但注重目标教学更注重过程教学的要求。

五、考核和成绩评定方法在课程结束后，要求学生统一参加期末考六、使用教材

本课程参考的主要教材是清华大学出版社2011年7月出版，2013年1月第4次印刷的《网页设计与制作》（第2版），梁芳李莉莉主编

，属21世纪高等学校数字媒体专业规划教材。该教材内容比较全面，语言通俗易懂，符合教学大纲的要求。同时针对计算机科学与技术专业2012级本科教学进度表，对有些内容进行了增减，来满足学生的学习要求。六、使用教材本课程参考的主要教材是清华大学出版社2011年七、参考资料[1]房爱莲主编.网页设计与制作案例教程.北京：北京大学出版社，2009年8月.[2]王柯柯主编.Web网页设计技术.北京：机械工业出版社，2011年3月.[3]谢永超主编.网页设计与制作项目教程.北京：中国电力出版社，2009年8月[4]王春红王瑾瑜.DreamweaverCS3网页设计案例教程.北京.机械工业出版社.2010.8七、参考资料[1]房爱莲主编.网页设计与制作案例教程.八、上课要求1、不允许旷课、迟到早退；旷课超过该门课程一定数量（超过1/3）取消考试资格。2、3次迟到或早退算一次旷课。3、课堂纪律和课堂听课态度占平时成绩50%的比例。4、上课手机静音或者关机，不允许看短信回短信（特别重要情况除外）。5、上实验课不允许玩游戏。八、上课要求1、不允许旷课、迟到早退；旷课超过该门课程一定数第1章网页设计基础1.1Internet的基础知识什么是Internet？Internet译为“因特网”，也称为国际互联网或互联网，它是指通过TCP/IP协议将世界各地的网络连接起来实现资源共享，并提供各种应用服务的全球性计算机网络。它是当今世界上最大、最流行的计算机网络，是信息社会的基础，在人类社会的各个领域中起着重大的作用。第1章网页设计基础1.1Internet的基础知识什第1章网页设计基础什么是计算机网络?计算机网络是计算机技术与通信技术紧密相结合的产物。它涉及通信和计算机两个领域，是利用通信线路与设备，把地理上分散的并具有独立功能的多台计算机或多个计算机系统互相连接，按照网络协议进行数据通信，由功能完善的网络软件管理，实现资源共享的计算机系统的集合。1.1Internet的基础知识

第1章网页设计基础什么是计算机网络?1.1Intern第1章网页设计基础1.1.1Internet提供的服务类型网络信息浏览（WWW=worldwideweb）电子邮件（E-mail）新闻组（NewsGroup）文件传输（FTP）远程登录（Telnet）电子公告板（BBS）网上电话第1章网页设计基础1.1.1Internet提供的服务第1章网页设计基础补充：Internet与intranet的区别intranet与Internet是不同的两概念。intranet译为“内联网”，通常称为企业网，是指将Internet的概念与技术应用到企业内部信息管理和交换业务中，形成企业内部网络。Intranet主要特点是采用TCP/IP通信协议和跨平台的Web信息交换技术，同时通过防火墙技术来保护内部敏感信息，它的出现将全面影响企业的经营效率和企业文化。它所使用的Internet技术主要有Web、电子邮件、FTP和Telnet等。二者的区别在于：Internet是公众信息网，它允许任何人从任何一个站点去访问它的资源；而intranet是企业自有的计算机网络，主要为企业内部服务，存储企业内部的信息，其中绝大多数信息是不供外界使用的，它主要用于企业内部的信息共享和协同工作。intranet是Internet技术在企业内部的广泛应用，Internet的巨大威力迅速渗透到企业内部网之上，推动了企业管理信息系统的一场革命。第1章网页设计基础补充：Internet与intranet第1章网页设计基础1.1.2万维网和浏览器万维网（WorldWideWeb，WWW）也可以简称为Web、W3、3W等，它是基于“超文本”的信息查询和信息发布的系统。超链接：超链接技术可以说是万维网流行起来的最主要的原因。它是从一个网页指向另一个目的端的链接。Web就是以Internet上众多的Web服务器所发布的相互链接的文档为基础，组成的一个庞大的信息网，它不仅可以提供文本信息，还可以包括声音、图形、图像以及动画等多媒体信息，它为用户提供了图形化的信息传播界面——网页。InternetExplorer（IE）是微软公司开发的Web浏览器，可以搜索、查看和下载Internet上的各种信息。URL(UniformResourceLocator)统一资源定位符，也被称为网页地址（网址）,是Internet上标准的资源地址。

URL一般格式如下：访问协议：//主机域名或IP地址［：端口号］/路径/文件名例如：

第1章网页设计基础1.1.2万维网和浏览器万维网（W第1章网页设计基础1.2IP地址和Internet域名IP地址是在Internet网络中为每一台主机分配的由32位二进制数组成的唯一标识符通常又把32位二进制数分成四个字节段，每字节段8位，用小数点将它们隔开，然后把每一字节段数都转换成相应的十进制数，称为点分十进制表示法IP地址分类：A类（~55）B类（55~55）C类（55~55）D类（55~55）E类其他的属于此类说明：一般国际上流行的只有A类、B类和C类三种1.2.1IP地址第1章网页设计基础1.2IP地址和Internet域名IPv6IPv6是“InternetProtocolVersion6”的缩写，它是IETF(InternetEngineeringTaskForce译：互联网工程任务组)设计的用于替代现行版本IP协议-IPv4-的下一代IP协议，它由128位二进制数码表示。全球因特网所采用的协议族是TCP/IP协议族。IP是TCP/IP协议族中网络层的协议，是TCP/IP协议族的核心协议。IPv6IPv6是“InternetProtocolVe与IPV4相比，IPV6具有以下几个优势：一：IPv6具有更大的地址空间。IPv4中规定IP地址长度为32，最大地址个数为2^32；而IPv6中IP地址的长度为128，即最大地址个数为2^128。与32位地址空间相比，其地址空间增加了2^128-2^32个。现在，IPv4采用32位地址长度，约有43亿地址，而IPv6采用128位地址长度可以忽略不计无限制的地址，有足够的地址资源。地址的丰富将完全删除在IPv4互联网应用上有很多的限制，如IP地址，每一个电话，每一个带电的东西可以有一个IP地址，与真正形成一个数字家庭的家庭。IPv6的技术优势，目前在一定程度上解决IPv4互联网存在的问题，这使得IPv4向IPv6演进的重要动力之一。二：IPv6使用更小的路由表。IPv6的地址分配一开始就遵循聚类（Aggregation）的原则，这使得路由器能在路由表中用一条记录（Entry）表示一片子网，大大减小了路由器中路由表的长度，提高了路由器转发数据包的速度。三：IPv6增加了增强的组播（Multicast）支持以及对流的控制（FlowControl），这使得网络上的多媒体

应用有了长足发展的机会，为服务质量（QoS，QualityofService）控制提供了良好的网络平台。与IPV4相比，IPV6具有以下几个优势：一：IPv6具有更四：IPv6加入了对自动配置（AutoConfiguration）的支持。这是对DHCP协议的改进和扩展，使得网络（尤其是局域网）的管理更加方便和快捷。五：IPv6具有更高的安全性。在使用IPv6网络中用户可以对网络层的数据进行加密并对IP报文进行校验，在IPV6中的加密与鉴别选项提供了分组的保密性与完整性。极大的增强了网络的安全性。六：允许扩充。如果新的技术或应用需要时，IPV6允许协议进行扩充。七：更好的头部格式。IPV6使用新的头部格式，其选项与基本头部分开，如果需要，可将选项插入到基本头部与上层数据之间。这就简化和加速了路由选择过程，因为大多数的选项不需要由路由选择。八：新的选项。IPV6有一些新的选项来实现附加的功能。与IPV4相比，IPV6具有以下几个优势：四：IPv6加入了对自动配置（AutoConfigurat第1章网页设计基础1.2.2域名系统域名：与网络上的数字型IP地址相对应的字符型地址。例如，清华大学的IP地址为00

对应的域名为。第1章网页设计基础1.2.2域名系统域名：与网络上的数第1章网页设计基础例如：””其中www是为用户提供服务的主机类型;tsinghua代表清华大学；edu代表教育科研网；cn代表中国。说明:域名的结构是一种分层次结构，根据域的大小，从小到大用“.”分隔。按照Internet的组织模式，域名有两种分类方法：一种是按照机构进行分类，如表1-1所示（P3）。另一种是按国家和地区进行分类，如cn（中国）、us（美国）、hk（香港）等。域名的构成第1章网页设计基础例如：”www.tup.tsinghua第1章网页设计基础1.3网页浏览原理静态网页，指的就是在web服务器中存放的页面内容是“固定不变”的，不会根据用户的需要而变化，如要修改或维护，必须修改源代码。静态网页是以.htm、.html、.shtml、.xml等为后缀的文档。在HTML格式的网页上，也可以出现各种动态效果，如GIF动画、Flash动画、JavaScript或VBScript特效等，这些“动态效果”只是视觉上的，它仍然不具备与客户端进行交互的功能。1.3.1静态网页第1章网页设计基础1.3网页浏览原理静态网页，指的就是第1章网页设计基础静态网页的特点：静态网页每个页面都有一个固定的URL，且网页的URL以.htm、.html、.shtml等常见形式为后缀。网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件。静态网页的内容相对稳定，因此容易被搜索引擎检索。静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难。静态网页的交互性较差，在功能方面有较大的限制。

1.3.1静态网页第1章网页设计基础静态网页的特点：1.3.1静态网页第1章网页设计基础静态网页的执行过程

Web客户机

Web服务器

．接受请求

2．找到静态网页

．发送静态网页

请求响应第1章网页设计基础静态网页的执行过程Web客户机We第1章网页设计基础动态网页是指在服务器端运行的程序、网页和组件等属于动态网页，它们会随不同客户、不同时间返回不同内容的网页。具有交互性。动态网页是以.asp、.aspx、.php、.jsp等为后缀的文档。常用的动态网页技术有ASP、ASP.net、PHP、JSP等。1.3.2动态网页第1章网页设计基础动态网页是指在服务器端运行的程序、网页和第1章网页设计基础1.3.2动态网页动态网页的特点

动态网页以数据库技术为基础，可以大大减少网站维护的工作量。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等。

动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时，服务器才会返回一个完整的网页。

采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求

第1章网页设计基础1.3.2动态网页动态网页的特点

第1章网页设计基础动态网页的浏览过程

HTTP请求HTTP响应Web服务器客户端

（浏览器）数据库服务器获取数据库数据返回服务器请求数据第1章网页设计基础动态网页的浏览过程

HTTP请求HTT第1章网页设计基础1.3.3网页制作语言网页制作语言主要有以下几种：HTML：是一种利用标记（tag）来描述字体、大小、颜色及页面布局的语言。XML：是一种定义语言，任何人、任何行业都可以遵循这些法则，定义各种标识来描述信息中的所有元素，然后通过一种被称为分析程序的小型程序进行处理，使信息能“自我描述”。ASP：由微软公司提供的开发动态网页的技术，提供了VBScript或JavaScript两种脚本引擎，主要用于网络数据库的查询和管理。ASP.NET：也是微软公司提供的开发动态网页的技术，是一种已经编译的、基于.NET环境，可以使用任何与.NET兼容的语言（如C#、VB.NET）构造Web应用程序。PHP：是一种在服务器端运行，在HTML文档中嵌入的脚本语言。JSP：是一项基于Java语言的动态网页技术标准，为创建可支持跨平台和Web服务器的动态页面提供了简洁而有效的工具，并逐渐成为动态网页的主流开发工具。。VRML：用于描述三维的物体及其连接的网页格式。第1章网页设计基础1.3.3网页制作语言网页制作语言主第1章网页设计基础1.3.4网页制作软件用途

软件名称网页编辑

Dreamweaver、FrontPage图像编辑制作

Fireworks、Photoshop、CorelDraw音乐编辑录音

AudioEditor、GoldWave、CoolEditPro动画编辑

Flash、GIFAnimator、COOL3D屏幕抓图

HySnapDX第1章网页设计基础1.3.4网页制作软件用途第1章网页设计基础1.4网站开发流程确定建设网站的目标分析目标用户对站点的需求确定网站风格考虑网络技术因素网络速度浏览器与分辨率一网站定位第1章网页设计基础1.4网站开发流程确定建设网站的目标1.4网站开发流程二、网站设计设计页面的布局站点结构主页设计草图导航系统的设计设计页面版式1.4网站开发流程二、网站设计1.4网站开发流程二、网站设计网页中的颜色红、绿、蓝三原色的数值相同则称为安全色。设计颜色方案的原则保持一致性注意可读性

1.4网站开发流程二、网站设计1.4网站开发流程二、网站设计文字、图像、动画和多媒体中文网站中的字体最好使用默认的“宋体”，以及“楷体”、“黑体”等基本字体。使用任何对象时要考虑的一点：是否有利于达到站点目标。

1.4网站开发流程二、网站设计1.4网站开发流程三、网页制作根据设计阶段制作出的示范网页，通过Dreamweaver等软件在各个具体网页中添加实际内容，包括：文本、图像、声音、Flash电影以及其他多媒体信息。

1.4网站开发流程三、网页制作1.4网站开发流程四、网站测试对所有影响页面显示的细节因素进行测试。测试页面中的超链接是否能够正常跳转。将本地站点文件夹在计算机硬盘中移动位置，是测试超链接能否正确工作的一种简便方法。

1.4网站开发流程四、网站测试1.4网站开发流程五、网站发布用户创建了Web页之后，通常可以直接将其保存在硬盘、软盘或光盘上，作为一种电子文档；也可以将其发布到Internet或Intranet上，以便其他浏览者浏览。1.4网站开发流程五、网站发布网站发布申请网页空间免费收费用

FTP上传网页CuteFTPLeapFTP网站发布申请网页空间1.4网站开发流程六、网站维护随着网站的发布，应根据访问者的建议，不断修改或是更新网站中的信息，并从浏览者的角度出发，进一步完善网站。这时网站建设工作又返回到了流程中的第一步，这样周而复始，就构成了网站的维护过程。

1.4网站开发流程六、网站维护网页布局布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。网页布局布局，就是以最适合浏览的方式将图片和文字排放在页面的4）左右框架型网页布局4）左右框架型网页布局5）上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。6）综合框架型：上面两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构网页布局5）上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的7）封面型网页布局7）封面型网页布局8）Flash型：9）综合型网页布局8）Flash型：网页布局第1章网页设计基础网页配色网页色彩总的应用原则应用是“总体协调，局部对比”，即网页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据网页内容的需要，分别采用不同的主色调。第1章网页设计基础网页配色网页色彩总的应用原则应用第1章网页设计基础网页图形和图像素材基本概念：1、像素：记录图像的基本单位，也是组成“位图”的最小单位,像素数量越多越能够表现图像极细微的部分。2、分辨率：指图像中存储的信息量。以每英寸的像素数(PPI)来衡量。图像分辨率和图像尺寸(高宽)的值一起决定文件的大小及输出的质量，该值越大图像文件所占的磁盘空间也就越多。3、图像：是由扫描仪、摄像机等输入设备捕捉实际的画面产生的数字图像,即由像素点阵构成的位图。4、图形：是指由外部轮廓线条构成的矢量图,即由计算机绘制的直线、圆、矩形、曲线、图表等。5、颜色模式：1）RGB颜色：是工业界的一种颜色标准，是通过对红(Red)、绿(Green)、蓝(Blue)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。2）CMYK颜色：是一种基于印刷处理的颜色模式,由于印刷机采用青(cyan)、洋红(magenta)、黄(yellow)、和黑(black)四种油墨来组合出一副彩色图像，因此CMYK颜色模式就是由这四种用于打印分色的颜色组成。第1章网页设计基础网页图形和图像素材基本概念：第1章网页设计基础网页图形和图像素材图形图像的文件格式：1、GIF(GraphicInterchangeFormat,图形交换格式)格式的特点是压缩比高,磁盘空间占用较少。既可以存储静止图像(GIF87a),又可以存储若干幅静止图像进而形成连续的动画。2、JPEG(JointPhotographicExpertsGroup,联合图像专家组)格式文件后缀名为“.jpg”或“jpeg”,是最常用的图像文件格式。3、PNG格式是目前保证最不失真的格式，它具有GIF和JPEG两者的优点,存储形式丰富,兼有GIF和JPEG的色彩模式；它的另一个特点是能把图像文件压缩到极限，以利于网络传输,但又能保留所有与图像品质有关的消息。第1章网页设计基础网页图形和图像素材图形图像的文件格式：第1章网页设计基础第1章网页设计基础第1章网页设计基础第1章网页设计基础第1章网页设计基础第1章网页设计基础网页设计与制作-第一次课要点课件第1章网页设计基础思考题P121—10第1章网页设计基础思考题P121—10第1章网页设计基础信息与自动化学院·吕向风A-5038213746012/2/2022网页设计与制作第1章网页设计基础信息与自动化学院·吕向风网页设计与制作网页设计与制作一、课程基本信息二、教学目的、要求三、课程主要内容和学时分配四、学习评价与考核五、使用教材六、参考资料七、知识拓展八、课程学习方法指导网页设计与制作一、课程基本信息一、课程基本信息课程名称:网页设计与制作课程性质：计算机科学与技术专业学科专业课课程学时和学分：总学时：48总学分：3

理论学时：24实验学时：24适用专业：计算机科学与技术先修课程：图形图像处理技术、动画设计与制作开课学院：信息与自动化学院教研室：计算机科学与技术教研室一、课程基本信息课程名称:网页设计与制作二、教学目的、要求“网页设计与制作”是高等学校计算机相关类专业的专业基础课或专业骨干课程，本课程传授和训练网页设计与制作的基本知识和基本技能。通过学习使学生掌握网页、网站的概念、熟练掌握网页主要工具软件Dreamweaver中文版的使用以及了解网页制作的拓展内容（Flash、Firework）的相关内容，通过熟练运用网页制作工具软件使学生具备能够设计并制作中小型网站的能力。二、教学目的、要求“网页设计与制作”是高等学校计算机相关类专教学目标知识目标：了解Web站点的工作原理；了解WWW、HTTP、HTML、CSS的定义，概念和作用；掌握HTML语言中的各种文本格式、字符格式、段落设置、表单、框架、多媒体标记的作用；熟练掌握Dreamweaver网页制作软件的使用；掌握表格、表单的使用，理解事件的概念，理解属性与方法的概念；熟练掌握利用CSS来控制网页中相应内容的样式；熟悉Dreamweaver中行为、模板和库的使用；理解网站发布的基本步骤。能力目标：能熟练运用Dreamweaver应用软件；熟练掌握使用绝对和相对URL，创建链接，图像链接的方法；学会运用HTML语言中的标记设置颜色、文本格式，熟练掌握颜色值的配置和背景图案的设置方法，熟练掌握字符、链接颜色的设置方法；掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法；熟练掌握表格的使用方法，学会利用表格设置布局网页；掌握框架制作网页的方法，会使用框架、层设计网页；掌握制作表单的方法，会利用表单建立交互式页面；会在网页制作中使用行为、库和模板。教学目标知识目标：了解Web站点的工作原理；了解WWW、HT三、授课主要内容和学时分配第一章网页设计基础第二章网页设计语言基础第三章初识Dreamweaver第四章文档的创建与设置第五章表格与框架第六章用CSS美化网页第七章网页布局技术第八章网页表单技术第九章使用行为、模板和库第十章综合实例三、授课主要内容和学时分配第一章网页设计基础第二章网页设三、授课主要内容和学时分配序号章节理论学时实验学时1第一章网页设计基础202第二章网页设计语言基础663第三章初始Dreamweaver24第四章文档创建与设置225第五章表格与框架226第六章用CSS美化网页247第七章网页布局设计228第八章网页表单技术229第九章使用行为、模板和库4410复习综合实验-个人网站制作2合计2424三、授课主要内容和学时分配序号章节理论学时实验学时1四、教学环节安排课堂教学：该门课程安排在专业机房授课，因此在理论教学所讲授的操作方法，让学生利用机房的便利条件上机制作小例子的方式随堂消化理论知识。同时强调记笔记的重要性，需要记录的地方会给学生提出来，一些重要的操作命令在讲授的同时，会要求学生随堂记录。在实验课上上针对理论课上讲解的内容让学生做相应的实验内容以期学生能很好地掌握所学知识，并制作实验讲义明确实验目的以及实验内容。1、教学方法：采用多媒体教学为主、网络教学为辅的教学方法。2、教学手段：在教学过程中采用任务驱动教学手段。3、外语要求：关键术语和概念的英语描述和缩写能够熟练读写。四、教学环节安排课堂教学：该门课程安排在专业机房授课，因此在五、考核和成绩评定方法

在课程结束后，要求学生统一参加期末考试。最终以平时成绩（10%）、期中考试成绩（20%）和期末考试成绩（70%）一起确定学生的课程总评成绩。平时成绩主要包括出勤、课堂表现（回答问题、听课状态）和期中成绩主要为实验作业，通过平时成绩的给定，体现该门课程不但注重目标教学更注重过程教学的要求。

五、考核和成绩评定方法在课程结束后，要求学生统一参加期末考六、使用教材

本课程参考的主要教材是清华大学出版社2011年7月出版，2013年1月第4次印刷的《网页设计与制作》（第2版），梁芳李莉莉主编

，属21世纪高等学校数字媒体专业规划教材。该教材内容比较全面，语言通俗易懂，符合教学大纲的要求。同时针对计算机科学与技术专业2012级本科教学进度表，对有些内容进行了增减，来满足学生的学习要求。六、使用教材本课程参考的主要教材是清华大学出版社2011年七、参考资料[1]房爱莲主编.网页设计与制作案例教程.北京：北京大学出版社，2009年8月.[2]王柯柯主编.Web网页设计技术.北京：机械工业出版社，2011年3月.[3]谢永超主编.网页设计与制作项目教程.北京：中国电力出版社，2009年8月[4]王春红王瑾瑜.DreamweaverCS3网页设计案例教程.北京.机械工业出版社.2010.8七、参考资料[1]房爱莲主编.网页设计与制作案例教程.八、上课要求1、不允许旷课、迟到早退；旷课超过该门课程一定数量（超过1/3）取消考试资格。2、3次迟到或早退算一次旷课。3、课堂纪律和课堂听课态度占平时成绩50%的比例。4、上课手机静音或者关机，不允许看短信回短信（特别重要情况除外）。5、上实验课不允许玩游戏。八、上课要求1、不允许旷课、迟到早退；旷课超过该门课程一定数第1章网页设计基础1.1Internet的基础知识什么是Internet？Internet译为“因特网”，也称为国际互联网或互联网，它是指通过TCP/IP协议将世界各地的网络连接起来实现资源共享，并提供各种应用服务的全球性计算机网络。它是当今世界上最大、最流行的计算机网络，是信息社会的基础，在人类社会的各个领域中起着重大的作用。第1章网页设计基础1.1Internet的基础知识什第1章网页设计基础什么是计算机网络?计算机网络是计算机技术与通信技术紧密相结合的产物。它涉及通信和计算机两个领域，是利用通信线路与设备，把地理上分散的并具有独立功能的多台计算机或多个计算机系统互相连接，按照网络协议进行数据通信，由功能完善的网络软件管理，实现资源共享的计算机系统的集合。1.1Internet的基础知识

第1章网页设计基础什么是计算机网络?1.1Intern第1章网页设计基础1.1.1Internet提供的服务类型网络信息浏览（WWW=worldwideweb）电子邮件（E-mail）新闻组（NewsGroup）文件传输（FTP）远程登录（Telnet）电子公告板（BBS）网上电话第1章网页设计基础1.1.1Internet提供的服务第1章网页设计基础补充：Internet与intranet的区别intranet与Internet是不同的两概念。intranet译为“内联网”，通常称为企业网，是指将Internet的概念与技术应用到企业内部信息管理和交换业务中，形成企业内部网络。Intranet主要特点是采用TCP/IP通信协议和跨平台的Web信息交换技术，同时通过防火墙技术来保护内部敏感信息，它的出现将全面影响企业的经营效率和企业文化。它所使用的Internet技术主要有Web、电子邮件、FTP和Telnet等。二者的区别在于：Internet是公众信息网，它允许任何人从任何一个站点去访问它的资源；而intranet是企业自有的计算机网络，主要为企业内部服务，存储企业内部的信息，其中绝大多数信息是不供外界使用的，它主要用于企业内部的信息共享和协同工作。intranet是Internet技术在企业内部的广泛应用，Internet的巨大威力迅速渗透到企业内部网之上，推动了企业管理信息系统的一场革命。第1章网页设计基础补充：Internet与intranet第1章网页设计基础1.1.2万维网和浏览器万维网（WorldWideWeb，WWW）也可以简称为Web、W3、3W等，它是基于“超文本”的信息查询和信息发布的系统。超链接：超链接技术可以说是万维网流行起来的最主要的原因。它是从一个网页指向另一个目的端的链接。Web就是以Internet上众多的Web服务器所发布的相互链接的文档为基础，组成的一个庞大的信息网，它不仅可以提供文本信息，还可以包括声音、图形、图像以及动画等多媒体信息，它为用户提供了图形化的信息传播界面——网页。InternetExplorer（IE）是微软公司开发的Web浏览器，可以搜索、查看和下载Internet上的各种信息。URL(UniformResourceLocator)统一资源定位符，也被称为网页地址（网址）,是Internet上标准的资源地址。

URL一般格式如下：访问协议：//主机域名或IP地址［：端口号］/路径/文件名例如：

第1章网页设计基础1.1.2万维网和浏览器万维网（W第1章网页设计基础1.2IP地址和Internet域名IP地址是在Internet网络中为每一台主机分配的由32位二进制数组成的唯一标识符通常又把32位二进制数分成四个字节段，每字节段8位，用小数点将它们隔开，然后把每一字节段数都转换成相应的十进制数，称为点分十进制表示法IP地址分类：A类（~55）B类（55~55）C类（55~55）D类（55~55）E类其他的属于此类说明：一般国际上流行的只有A类、B类和C类三种1.2.1IP地址第1章网页设计基础1.2IP地址和Internet域名IPv6IPv6是“InternetProtocolVersion6”的缩写，它是IETF(InternetEngineeringTaskForce译：互联网工程任务组)设计的用于替代现行版本IP协议-IPv4-的下一代IP协议，它由128位二进制数码表示。全球因特网所采用的协议族是TCP/IP协议族。IP是TCP/IP协议族中网络层的协议，是TCP/IP协议族的核心协议。IPv6IPv6是“InternetProtocolVe与IPV4相比，IPV6具有以下几个优势：一：IPv6具有更大的地址空间。IPv4中规定IP地址长度为32，最大地址个数为2^32；而IPv6中IP地址的长度为128，即最大地址个数为2^128。与32位地址空间相比，其地址空间增加了2^128-2^32个。现在，IPv4采用32位地址长度，约有43亿地址，而IPv6采用128位地址长度可以忽略不计无限制的地址，有足够的地址资源。地址的丰富将完全删除在IPv4互联网应用上有很多的限制，如IP地址，每一个电话，每一个带电的东西可以有一个IP地址，与真正形成一个数字家庭的家庭。IPv6的技术优势，目前在一定程度上解决IPv4互联网存在的问题，这使得IPv4向IPv6演进的重要动力之一。二：IPv6使用更小的路由表。IPv6的地址分配一开始就遵循聚类（Aggregation）的原则，这使得路由器能在路由表中用一条记录（Entry）表示一片子网，大大减小了路由器中路由表的长度，提高了路由器转发数据包的速度。三：IPv6增加了增强的组播（Multicast）支持以及对流的控制（FlowControl），这使得网络上的多媒体

应用有了长足发展的机会，为服务质量（QoS，QualityofService）控制提供了良好的网络平台。与IPV4相比，IPV6具有以下几个优势：一：IPv6具有更四：IPv6加入了对自动配置（AutoConfiguration）的支持。这是对DHCP协议的改进和扩展，使得网络（尤其是局域网）的管理更加方便和快捷。五：IPv6具有更高的安全性。在使用IPv6网络中用户可以对网络层的数据进行加密并对IP报文进行校验，在IPV6中的加密与鉴别选项提供了分组的保密性与完整性。极大的增强了网络的安全性。六：允许扩充。如果新的技术或应用需要时，IPV6允许协议进行扩充。七：更好的头部格式。IPV6使用新的头部格式，其选项与基本头部分开，如果需要，可将选项插入到基本头部与上层数据之间。这就简化和加速了路由选择过程，因为大多数的选项不需要由路由选择。八：新的选项。IPV6有一些新的选项来实现附加的功能。与IPV4相比，IPV6具有以下几个优势：四：IPv6加入了对自动配置（AutoConfigurat第1章网页设计基础1.2.2域名系统域名：与网络上的数字型IP地址相对应的字符型地址。例如，清华大学的IP地址为00

对应的域名为。第1章网页设计基础1.2.2域名系统域名：与网络上的数第1章网页设计基础例如：””其中www是为用户提供服务的主机类型;tsinghua代表清华大学；edu代表教育科研网；cn代表中国。说明:域名的结构是一种分层次结构，根据域的大小，从小到大用“.”分隔。按照Internet的组织模式，域名有两种分类方法：一种是按照机构进行分类，如表1-1所示（P3）。另一种是按国家和地区进行分类，如cn（中国）、us（美国）、hk（香港）等。域名的构成第1章网页设计基础例如：”www.tup.tsinghua第1章网页设计基础1.3网页浏览原理静态网页，指的就是在web服务器中存放的页面内容是“固定不变”的，不会根据用户的需要而变化，如要修改或维护，必须修改源代码。静态网页是以.htm、.html、.shtml、.xml等为后缀的文档。在HTML格式的网页上，也可以出现各种动态效果，如GIF动画、Flash动画、JavaScript或VBScript特效等，这些“动态效果”只是视觉上的，它仍然不具备与客户端进行交互的功能。1.3.1静态网页第1章网页设计基础1.3网页浏览原理静态网页，指的就是第1章网页设计基础静态网页的特点：静态网页每个页面都有一个固定的URL，且网页的URL以.htm、.html、.shtml等常见形式为后缀。网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件。静态网页的内容相对稳定，因此容易被搜索引擎检索。静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难。静态网页的交互性较差，在功能方面有较大的限制。

1.3.1静态网页第1章网页设计基础静态网页的特点：1.3.1静态网页第1章网页设计基础静态网页的执行过程

Web客户机

Web服务器

．接受请求

2．找到静态网页

．发送静态网页

请求响应第1章网页设计基础静态网页的执行过程Web客户机We第1章网页设计基础动态网页是指在服务器端运行的程序、网页和组件等属于动态网页，它们会随不同客户、不同时间返回不同内容的网页。具有交互性。动态网页是以.asp、.aspx、.php、.jsp等为后缀的文档。常用的动态网页技术有ASP、ASP.net、PHP、JSP等。1.3.2动态网页第1章网页设计基础动态网页是指在服务器端运行的程序、网页和第1章网页设计基础1.3.2动态网页动态网页的特点

动态网页以数据库技术为基础，可以大大减少网站维护的工作量。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等。

动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时，服务器才会返回一个完整的网页。

采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求

第1章网页设计基础1.3.2动态网页动态网页的特点

第1章网页设计基础动态网页的浏览过程

HTTP请求HTTP响应Web服务器客户端

（浏览器）数据库服务器获取数据库数据返回服务器请求数据第1章网页设计基础动态网页的浏览过程

HTTP请求HTT第1章网页设计基础1.3.3网页制作语言网页制作语言主要有以下几种：HTML：是一种利用标记（tag）来描述字体、大小、颜色及页面布局的语言。XML：是一种定义语言，任何人、任何行业都可以遵循这些法则，定义各种标识来描述信息中的所有元素，然后通过一种被称为分析程序的小型程序进行处理，使信息能“自我描述”。ASP：由微软公司提供的开发动态网页的技术，提供了VBScript或JavaScript两种脚本引擎，主要用于网络数据库的查询和管理。ASP.NET：也是微软公司提供的开发动态网页的技术，是一种已经编译的、基于.NET环境，可以使用任何与.NET兼容的语言（如C#、VB.NET）构造Web应用程序。PHP：是一种在服务器端运行，在HTML文档中嵌入的脚本语言。JSP：是一项基于Java语言的动态网页技术标准，为创建可支持跨平台和Web服务器的动态页面提供了简洁而有效的工具，并逐渐成为动态网页的主流开发工具。。VRML：用于描述三维的物体及其连接的网页格式。第1章网页设计基础1.3.3网页制作语言网页制作语言主第1章网页设计基础1.3.4网页制作软件用途

软件名称网页编辑

Dreamweaver、FrontPage图像编辑制作

Fireworks、Photoshop、CorelDraw音乐编辑录音

AudioEditor、GoldWave、CoolEditPro动画编辑

Flash、GIFAnimator、COOL3D屏幕抓图

HySnapDX第1章网页设计基础1.3.4网页制作软件用途第1章网页设计基础1.4网站开发流程确定建设网站的目标分析目标用户对站点的需求确定网站风格考虑网络技术因素网络速度浏览器与分辨率一网站定位第1章网页设计基础1.4网站开发流程确定建设网站的目标1.4网站开发流程二、网站设计设计页面的布局站点结构主页设计草图导航系统的设计设计页面版式1.4网站开发流程二、网站设计1.4网站开发流程二、网站设计网页中的颜色红、绿、蓝三原色的数值相同则称为