网站规划建设与安全管理.pptx

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,Page,#,点击此处结束放映,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,Page,#,点击此处结束放映,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,Page,#,点击此处结束放映,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,Page,#,点击此处结束放映,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,Page,#,点击此处结束放映,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,Page,#,点击此处结束放映,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,Page,#,点击此处结束放映,网站规划建设与安全管理,第,1,章网络基础知识,Internet,概论,1.1,TCP/IP,协议,1.2,基于,WEB,的应用程序概述,1.3,网络的出现，给人们的生活和社会带来了巨大变化，它正在改变着人们的生活和工作方式。借助网络便捷的信息交流功能，使人们能够提高工作效率，扩大交流范围，改善生活质量。利用网络可以收发电子邮件，浏览网上丰富的信息，下载程序和文件，与世界各地的人们交流意见和想法，获取想得到的任何帮助和建议等,.,1.1 Internet,概论,Internet,概述,由成千上万的不同类型、不同规模的计算机网络和计算机主机组成的覆盖世界范围的巨型网络，,Internet,的中文名字叫,“,因特网,”,或,“,国际互联网络,”,。,Internet,的发展史,1969,年，,ARPANET,诞生，主要用户军事,1982,年，,Internet,由,ARPAnet,，,MILNET,等几个计算机网络合并而成，作为,Internet,的早期骨干网，,ARPAnet,试验并奠定了,Internet,存在和发展的基础，较好地解决了异种机网络互联的一系列理论和技术问题。,1983,年，,ARPAnet,分裂为两部分：,ARPAnet,和纯军事用的,MILNET,。该年,1,月，,ARPA,把,TCP/IP,协议作为,ARPAnet,的标准协议，其后，人们称呼这个以,ARPAnet,为主干网的网际互联网为,Internet,。,1986,年，,NSF,建立起了六大超级计算机中心，为了使全国的科学家、工程师能够共享这些超级计算机设施，,NSF,建立了自己的基于,TCP/IP,协议簇的计算机网络,NSFnet,。,1994,年，所有的,Internet,软件几乎全是,TCP/IP,协议保，那时人们需要的是能兼容,TCP/IP,协议的网络体系结构；如今,Internet,重心已转向具体的应用，象利用,WWW,来做广告或进行联机贸易。,Web,是,Internet,上增长最快的应用。,Internet,常用的专业术语,流媒体,电子商务,网络电话,远程教育,账号安全,防火墙,域名,超媒体,超文本,FTP,静态网页和动态网页,Internet,提供的服务,电子邮件（,Electronic mail,，,E-mail,）亦称,E-mail,环球信息网（,World Wide Web,），简称,Web,网络新闻（,Net News,）,电子公告板（,Bulletin Board System,，,BBS,）,文件传输协议（,File Transfer Protocol,FTP,）,远程登录（,Telnet,）,交互式通信（,Interactive Communication,）,搜索引擎（,Hunting Engine,）,1.2 TCP/IP,协议,1.2.1,网络协议体系结构,1,协议的基本概念,协议（,protocol,）是通信双方为了实现通信而设计的约定或对话规则。,网络协议通常由语义、语法和定时关系,3,部分组成。语义定义做什么，语法定义怎么做，而定时关系则定义何时做。,2,网络的层次结构,对网络进行层次划分就是将计算机网络这个庞大的、复杂的问题划分成若干较小的、简单的问题。通过,“,分而治之,”,，解决这些较小的、简单的问题，从而解决计算机网络这个大问题。计算机网络层次结构划分应按照层内功能内聚，层间耦合松散的原则。也就是说，在网络中，功能相似或紧密相关的模块应放置在同一层；层与层之间应保持松散的耦合，使信息在层与层之间的流动减到最小。,3,ISO/OSI,参考模型,随着网络应用的广泛和深入，各种机构越来越认识到网络技术在提高生产效率、节约成本方面的重要性。于是，人们开始接入互联网，扩大网络规模。由于很多网络使用不同的硬件和软件，结果造成大部分网络不能兼容，而且很难在不同的网络之间进行通信。,OSI,将这,7,层从低到高叫做物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。如图,1-1,所示为,OSI,的,7,层结构和每一层解决的主要问题。,ISO/OSI,的,7,层参考模型,1.2.2 TCP/IP,协议体系结构,1,TCP/IP,体系结构的层次划分,与,ISO/OSI,参考模型不同，,TCP/IP,体系结构将网络划分为应用层,(application layer),、传输层,(transport layer),、互联层,(internet layer),和网络接口层,(network interface layer)4,层，如图所示。,2,TCP/IP,体系结构中各层次的功能,（,1,）网络接口层：在,TCP/IP,分层体系结构中，网络接口层是其最底层，负责通过网络发送和接收,IP,数据报。,（,2,）互联层：是,TCP/IP,体系结构的第二层，它实现的功能相当于,OSI,参考模型网络层的无连接网络服务。互联层负责将源主机的报文分组发送到目的主机，源主机与目的主机可以在一个网上，也可以在不同的网上。,（,3,）传输层：位于互联层之上，它的主要功能是负责应用进程之间的端,-,端通信。在,TCP/IP,体系结构中，设计传输层的主要目的是在互联网中源主机与目的主机的对等实体之间建立用于会话的端,-,端连接。,（,4,）应用层：在,TCP/IP,体系结构中，传输层之上是应用层。它包括了所有的高层协议，并且总是不断有新的协议加入。,1.2.3 TCP/IP,的工作原理,TCP/IP,是,OSI,七层模型的简化，如图,1-5,所示，共分为,4,层：应用层，传输层，,IP,层和物理网络接口层。,TCP/IP,模型将与物理网络打交道的物理网络部分称为网络接口，它相当于,OSI,的物理层和数据链路层。,TCP/IP,是,OSI,七层模型的简化,在下表中给出了,TCP/IP,协议集的主要协议及它们所提供的服务，如表所示。,协 议,提 供 服 务,相应,OSI,IP,数据报服务,3,ICMP,差错和控制,3,ARP,互联网地址,-,物理地址,3,RARP,物理地址,-,互联网地址,3,TCP,可靠流服务,4,FTP,文件传送,7,TELNET,终端仿真,7,DNS,域名,-IP,地址,7,1.3.1 WEB,服务的概述,对于,Web,服务目前还没有一种统一的、标准的,Web,服务定义。,IBM,、,Microsoft,及,sun,三大公司对,Web,服务都提出了自己的一种定义。,1.3,基于,WEB,的应用程序概述,1.3.2 B/S,模式概述,B/S,结构（,Browser/Server,结构）结构即浏览器和服务器结构。它是随着,Internet,技术的兴起，对,C/S,结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过,WWW,浏览器来实现，极少部分事务逻辑在前端（,Browser,）实现，但是主要事务逻辑在服务器端（,Server,）实现，形成所谓三层,3-tier,结构。,B/S,模式的优点和缺点,B/S,结构的优点,具有分布性特点，可以随时随地进行查询、浏览等业务处理。,业务扩展简单方便，通过增加网页即可增加服务器功能。,维护简单方便，只需要改变网页，即可实现所有用户的同步更新。,开发简单，共享性强,B/S,模式的缺点,个性化特点明显降低，无法实现具有个性化的功能要求。,操作是以鼠标为最基本的操作方式，无法满足快速操作的要求。,页面动态刷新，响应速度明显降低。,无法实现分页显示，给数据库访问造成较大的压力。,功能弱化，难以实现传统模式下的特殊功能要求。,1.3.3 WEB2.0,标准,1,WEB2.0,的概述,2,WEB2.0,的特点,3,WEB2.0,的七大原则,（,1,）互联网作为平台。,（,2,）利用集体智慧。,（,3,）数据是下一个,Intel Inside,。,（,4,）软件发布周期的终结。,（,5,）轻量型编程模型。,（,6,）软件超越单一设备。,（,7,）丰富的用户体验。,小结与提高,不管是设计制作静态网站还是动态网站，最终都要把设计好的网站发布到,Internet,上并使其可以在网络上运行，那么我们必须要掌握网络基础知识。网站只有运行在互联网上才有意义，掌握一定的,Internet,基础知识是制作网站的提前。本章描述了,Internet,的发展历史、工作原理、,TCP/IP,协议以及,Web2.0,标准等网络知识。,第,2,章网站规划与设计,网站建设的整体规划,2.1,商业网站的设计,2.2,Web,服务器的安装,2.3,网站规划是指在网站创建前必须明确创建网站的主题、目的和功能。任何一个网站，必须首先具有明确的建站目的和目标访问群体，即网站定位。,目的应该是定义明确的，而不是笼统的说要做一个平台、要搞电子商务，应该清楚希望谁来浏览，具体要做到哪些内容，提供怎样的服务，达到什么效果。网站是面对客户、供应商、消费者还是全部？建站包括类型的选择、内容功能的筹备、界面设计等各个方面都受到网站定位的直接影响，因此网站定位是建立整个网站的基础。,2.1,网站建设的整体规划,2.1.1,网站的分类,明确要设计的网站属于哪种类型将有助于更好地进行规划。不同的角度有不同的分类方法，根据网站内容和服务对象的不同主要分为以下几种类型。,1,门户型网站,2,政府网站,3,学校和科研机构网站,4,电子商务网站,5,企业网站,6,新闻媒体网站,7,论坛型网站,8,展示宣传型网站,2.1.2,网站规划的流程,1,确定网站建设的目的,需要了解客户的真正意图。了解客户希望依靠这个站点实现什么样的目的，希望通过什么样的方法实现这一目的。,2,可行性分析,这里的可行性分析包括技术可行性和经济可行性。,3,网站结构的总体策划,网站的整体规划，包括设计网站各栏目的摆放，每张网页中图片和文字的排列、它们之间的相互关系等。好的布局可以让浏览者非常容易地找到他想看的东西。,2.2,商业网站的设计,2.2.1,网站设计的原则,设计者要想设计出达到预期效果的站点和网页，需要对用户需求有深刻的理解并对人们上网时的心理进行分析和研究，以下是网站设计的基本原则：,1,符合人们的阅读习惯,2,网站导航要清晰,3,页面风格要统一,4,动静要搭配好,5,突出新内容,2.2.2,定位网站的,CI,形象,所谓,CI,，是借用的广告术语。,CI,是英文,corporate identity,的缩写，意思是通过视觉来统一企业的形象。现实生活中的,CI,策划比比皆是，杰出的例子如：可口可乐公司，采取全球统一的标志，大红的色彩和产品包装，给人们的印象极为深刻。更多的例子如,SONY,、三菱、麦当劳等。,主要研究的内容为：,1,设计网站的标志,2,网站的色彩应用,3,屏幕布局设计,2.3.1,安装,IIS,服务器,一般说，架建,Web,服务器大部分使用,IIS,或,Apache,。,IIS,（,Internet Information Server,）是,Windows,操作系统子带的组建，通过它可以架设,IIS+ASP+CGI+Perl,或,PHP+Mysql,。,Apache,服务器可以架建,Apache+Mysql,服务器（在,Linux,中应用较多）。这里只讲解如何在,WindowsXP,中安装,IIS,服务器。,目标：在,WindowsXP,中安装,IIS,服务器以供测试网站使用。,2.3 Web,服务器的安装,操作过程：,（,1,）依次单击任务栏上的“开始”,|“,控制面版”菜单命令，在“控制面版”窗口中单击“添加或删除程序”图标，选择“添加,/,删除,Windows,组件”链接，系统将弹出“,Windows,组件向导”对话框,（,2,）在窗口中选中“,Internet,信息服务（,IIS,）”复选框，然后放入,Windows,系统源盘，单击“下一步”按钮，在弹出的窗口中单击“完成”按钮即可。,（,3,）当系统安装完毕，将在“控制面版”,|“,管理工具”中看到的“,Internet,信息服务”，一项，并且在系统分区（如,C,：,）中多了一个名为,Internet,的目录。,（,4,）当要对网站进行测试时，只需把网站目录（如,F,：,myweb,）复制到,C,：,Inetpubwwwroot,目录中，然后在浏览器中输入网址,localhost/myweb/index.htm,即可观看网站的真实效果。,2.3.2,配置,IIS,服务器,配置,IIS,，打开“控制面版”,|“,管理工具”,|“Internet,信息服务”，在左边框中选择展开本地计算机目录，在出现的“默认网站”选项上单击右键，选择“属性”命令，打开如图所示的对话框。,1,“网站”选项卡,IP,地址：单击“高级”按钮可以设置多个,IP,，即计算机可以作为多台服务器使用。如果在本机上试验,IIS,请输入,127.0.0.1,或,localhost,。,TCP,端口：在采用默认值“,80”,时，用户只需通过浏览器输入域名，如,便能对该站点进行访问，如果把该端口修改成其它的端口号，则需要在域名后加上其端口号值,2,“主目录”选项卡,本地路径：选择网站文件存放的物理路径，为创建的网站建立应用程序名称并为其设置执行权限。,3,“文档”选项卡,启用默认内容文档：添加需要默认启用的页面文件，如：,index.aspx,，如果要将其设置为第一位查找，只要将该文件调到第一个位置即可。,小结与提高,本章通过讲授网站的整体规划、网站设计的原则及,Web,服务器的安装和配置，我们了解了商业网站的设计流程及网站运行的基本要求。一个完整的商业网站从设计到运行需要注意网站的设计原则及运行环境的配置等问题。在制作网站之前，我们必须要先对网站做好规划及设计，考虑其运行的要求，不能盲目、随意的制作。,第,3,章网页设计与制作,认识,Dreamweaver CS3,3.1,HTML,基础,3.2,网页布局,3.3,CSS,样式,3.4,Web2.0,网页布局,3.5,行为和时间轴,3.6,网站页面设计案例分析,3.7,3.1,认识,Dreamweaver CS3,3.1.1 Dreamweaver CS3,的启动与工作界面,在众多的网页制作工具中，,Dreamweaver,是备受专业,Web,开发人士推崇的软件，,Dreamweaver CS3,更是新增加了许多强大的功能，这些新增功能改善了软件的易用性，并使用户无论处于设计环境还是编码环境都可以方便地制作页面。如图,3-1,就是,Dreamweaver CS3,的启动画面。新版本中完善了网页设计功能，设计理念更为人性化。,图,3-1 Dreamweaver CS3,启动画面,系统启动Dreamweaver CS3软件。并自动打开一个空白未命名的文档窗口，这就是制作网页时的工作界面，如下图所示。,3.1.2,站点的管理,在创建一个站点前通常在本地计算机上新建一个文件夹，以此文件夹作为站点的根目录。,在Dreamweaver CS3中使用创建站点向导可以快速地创建一个站点，具体步骤如下：,（,1,）执行,“,站点,”,|,“,新建站点,”,菜单命令，调出,“,站点定义为,”,（高级）对话框。,（,2,）在,“,站点名称,”,文本框内输入站点的名称。站点名称可以使用任何名称，它不在浏览器上显示，只用来参考。,（,3,）在,“,本地根文件夹,”,文本框内输入站点在本地计算机上的存储位置，即路径和文件夹名称。,（,4,）在,“,默认图像文件夹,”,文本框输入站点默认图片存放文件夹的位置。,（,5,）在,“,HTTP,地址,”,文本框输入上传站点的,URL,。,（,6,）选中,“,启用缓存,”,复选框，可加速链接的更新速度。当硬盘容量足够大时可选中它。,（,7,）设置完毕后，单击,“,确定,”,按钮即可创建一个新的站点。,在建立站点之后，需要对站点进行管理，例如站点的添加、删除、切换等。下面介绍Dreamweaver CS3对站点的主要管理操作。,通过编辑站点可以重新设置站点的一些属性。,在,“,管理站点,”,对话框中可以复制站点。,在,“,管理站点,”,对话框中可以删除站点,同时还可以执行导出站点操作。,3.2 HTML,基础,3.2.1,什么是,HTML,HTML,（,HyperText Mark-up Language,）,即超文本标记语言或超文本链接标示语言,，,是目前网络上应用最为广泛的语言,，,也是构成网页文档的主要语言。,HTML,文本是由,HTML,命令组成的描述性文本，,HTML,命令可以说明文字、图形、动画、声音、表格、链接等。,HTML,的结构包括头部（,Head,）、主体（,Body,）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。,HTML,是组合成一个文本文件的一系列标签。,HTML,标签通常是英文词汇的全称（如块引用,:blockquote,）或缩略语（如,“,p,”,代表,Paragraph,），但它们与一般文本有区别，因为它们放在单书名号里。因此,Paragragh,标签是,块引用标签是,。有些标签说明页面如何被格式化（例如，开始一个新段落），其他则说明这些词如何显示,(,使文字变粗,),还有一些其他标签提供在页面上不显示的信息例如标题。,3.2.2 HTML,的常用标记,HTML,语言的标记种类很多，常用的,HTML,程序文档中所用标记的含义介绍如下：,1,标记,它是,HTML,文档中最基本的标记，不可缺少。,表示,HTML,文档的开始，,表示文档的结束。,2,与,标记,前者是网页标题标记符，可提高网页文档的可读性，向浏览器提供一个信息，它也可以被忽略。后者是网页名称标记，是,标记内一般不可缺少的标记。,3,标记,它是网页主题内容标记。其内包括了网页的全部内容，一般不可缺少。,4,标记,使用,标记中的,BGCOLOR,属性，可设置网页的背景颜色。使用的格式有：,和,第一种格式中，,RR,、,GG,、,BB,分别取值为,00,FF,的十六进制数，分别用来表示颜色中红、绿蓝色成分的多少，数值越大，颜色越深。红、绿、蓝三色按一定比例混合，可以得到各种颜色。此处，,RR=00,，,GG=00,BB=FF,表示为蓝色。如果,RRGGBB,取值为,000000,，则为黑色；,RRGGBB,取值为,FFFFFF,，则为白色；,RRGGB,取值为,FF0000,，则为红色。,第二种格式中，是直接使用颜色的英文名称来设定网页的背景颜色。例如：,用来设置网页的背景颜色为蓝色；,用来设置网页的背景颜色为黑色；,用来设置网页的背景颜色为白色。,5,标记,它是正文的第一级标题标记。此外，还有第二、三、四、五、六级标记，分别为,、,、,、,和,。级别越高，文字越小。,6,标记,它的作用是使其中的文字或其他页面中的构成元素在网页内居中放置。,7.,标记,它是图像标记，用来加载,GIF,图像与动画。在网页中加载,GIF,动画的方法与加载,GIF,图像的方法一样，,GIF,动画文件的扩展名也是,.gif,文件格式是,GIF89A,格式。,8.,标记,它是依附于其他标记的一个属性，依附于,标记时，用来导入,GIF,图像与动画。其格式为：,。,例：大小为,120*40,的图像文件,LOGO.gif,在该,HTML,文档所在文件夹内的,images,文件夹内。应写为,。如果文件的目录或文件名字不对，则在浏览器中显示网页时，图像的位置处会出现一个红色的,“,”,。,9,标记,它是换行标记，表示以后的内容移到下一行，它是单向标记，没有,。,10,标记,它是保留文本原来格式的标记。它的作用可以将其内的文本内容，按照原来的格式显示。否则浏览器会自动取消文本中的空格，在最后加入换行。,11,标记,它是粗体标记，可使其中的文字变为粗体,12,、,与,标记,是有序标记。其内用,标记引导文字，显示网页中的这些文字后，文字前会自动加上,“,1,”,，,“,2,”,，,序号。,是无序标记。其内用,标记引导文字，显示网页中的这些文字后，文字前会自动加上,“,”,。,3.2.3,图像、多媒体元素的属性,1,src,属性,使用该属性可以设置被引用的图像文件所在的位置，既可以使用相对,URL,也可以使用绝对,URL,。,2,alt,属性,使用该属性可以设置图像的简单文字说明。当使用老版本的浏览器或者访问者关闭了浏览器的,“,显示图像,”,功能时，这个属性非常有用。使用,alt,属性将大大加强文档的可读性，方便访问者浏览页面信息。下面是一个使用,alt,属性的例子，其源代码如下：,在浏览器中打开该文档，将鼠标移动到图像上方并停顿片刻，此时将显示,“,这是我的照片,”,。,3,width,（宽度）和,height(,高度,),属性,使用这两个属性可以设置图像的宽度和高度，浏览器根据这个数值为图像留出显示的空间（以像素为单位），等图像完全下载以后再在这个空间显示图像，这样能够加够加快整个页面的显示速度。该属性的值既可以是以像素为单位的具体数值，也可以是百分比值。使用百分比值时实际是相对于当前窗口的宽度和高度。例子代码如下：,原大,指定大小,4,align,（对齐方式）属性,图像的对齐方式分为两种情况，一种为水平方向的对齐，另一种为垂直方向的对齐。,（,1,）水平方向对齐方式可以取的值有：,Left(,左对齐,):,该属性表示图像居左，文字在图像右面。,Right,（右对齐）：该属性表示图像居右，文字在图像左面。,（,2,）垂直方向对齐方式可以取值有：,Top,（顶部对齐）：该属性表示文字与图像的顶部对齐。,与文字顶部对齐！,Bottom,（底部对齐）：该属性表示文字与图像的底部对齐。,与文字底部对齐！,Middle,（中部对齐）：该属性表示文字与图像的中部对齐。,与文字中部对齐！,5,border,（边框）属性,可以利用,border,属性来指定图像边框的宽度（边框的宽度可以为,0,）。,Border,属性的取值是数字，表示边框宽度的像素数。例如下面代码：,6,hspace,（垂直方向的间距）和,vspace,（水平方向的间距）属性,这两个属性定义了图像元素的水平和垂直间距,Vspace,属性用于指定图像与其垂直方向上相邻页面元素之间的距离，,hspac,用来指定图像与其水平方向相邻页面元素之间的距离。,3.2.4,超链接,1,页面间的超链接,语法：,说明：使用,a,标记符创建页面间超链接时，既可以使用相对路径（指向同一网站内的文件）也可以使用绝对路径（指向本站点以外的文件）。,2,页面内的超链接,语法：,3,指向电子信箱的链接,语法：,说明：创建指向电子信箱的超链接时，属性,href,中使用的是,mailto,协议。该协议后面直接跟一个具体的电子信箱地址。,3.2.5,表单,表单在,Web,网页中用来收集访问者的信息，使网页具有交互功能。,1,表单对象概述,在,Dreamweaver CS3,中，选择,“,插入,”,面板中的,“,表单,”,，如图所示。也可以执行,“,插入,”,|,“,表单,”,菜单命令，在其下拉菜单中选择适合的表单选项进行插入。,2,创建表单,在网页中插入表单对象，如文本域、按钮等，首先必须创建表单域。在,“,设计,”,视图状态下表单域用红色的虚线表示，如果看不到表单域的矩形红线，则可以选择,“,查看,”,|,“,可视化助理,”,|,“,不可见元素,”,菜单命令，将表单域的矩形红线显示出来。,3.3,网 页 布 局,3.3.1,表格的创建,表格为网页带来了结构概念。最初，表格用来实现以一个更方便阅读的格式显示未格式化数据任务。现在，网页设计者已经把表格当做控制页面布局最有力的工具。,1,插入表格,使用,“,插入,”,(,常用,),面板内的,“,插入表格,”,按钮，或单击,“,插入,”,（,insert,）,|,“,表格,”,（,Table,）菜单命令调出,“,插入表格,”,（,Insert Table,）对话框,2,设置表格属性,为了使创建的表格更加美观、醒目，需要对表格的属性（如边框线的颜色、表格或单元格的背景图像、颜色等）进行设置。,3,设置列、行和单元格属性,表格由很多单元格组成，除了可以设置整个表格属性外，还可以单独设置某行、某列或某些单元格的属性。首先选择单元格的任意组合，然后使用属性面板改变单元格、行、列的属性即可。,4编辑表格,在实际应用表格的过程中，往往是结构不规则的表格，需要将规范的单元格通过单元格的合并、拆分，从而达到界面布局的需要。,合并单元格：可把选定的单元格、行、或列合并成一个单元格。,拆分单元格：可把一个单元格分割成多个单元格。,5,插入或删除行、列,将鼠标在某个单元格中单击，可进行行列的增加或删除操作。,3.3.2,层的创建,层是,CSS,中的定位技术，在,Dreamweaver,中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。,1,创建普通层,选择菜单栏,“,插入,”,|,“,布局对象,”,|,“,层,”,命令，可将层插入到页面中,2,创建嵌套层,创建嵌套层就是在一个层内插入另外的层。,3.3.3,表格的网页布局,表格的创建可用,table,标记符，它的语法如下：,说明：,HTML,使用语言,table,标记符定义表格，表格中所有得内容都包含在开始标记符,和结束标记符,中。在表格中，可以使用,caption,标记符来定义表格得单元格，其中用来定义作为表头得单元格，而,td,用来定义普通的单元格。,3.3.4 DIV,布局,3.4 CSS,样式,3.4.1,创建,CSS,样式,层叠样式表（,CSS,）是一系列格式设置规则，它们控制,Web,页面内容的外观。使用,CSS,设置页面格式时，内容与表现形式是相互分开的。页面内容（,HTML,代码）位于自身的,HTML,文件中，而定义代码表现形式的,CSS,规则位于另一个文件（外部样式表）或,HTML,文档的另一部分（通常为,部分）中。,3.4.2,管理,CSS,样式,若要对,CSS,规则进行编辑或修改可按如下步骤进行：,（,1,）选中需要编辑的规则类型，鼠标单击编辑样式按钮,（,2,）在弹出,“,CSS,规则,”,对话框中修改相应的设置，或新增其他,CSS,规则表设置,（,3,）完成后单击,“,确定,”,按钮，,CSS,规则就编辑完成。,3.4.3,应用,CSS,样式,（,1,）在,Dreamweaver,中打开执行,“,窗口,”,|,“,CSS,样式,”,菜单命令，显示,“,CSS,样式,”,面板。,（,2,）在网页编辑区域选取要应用规则的文本或者段落等页面元素。,（,3,）在,“,CSS,样式,”,面板中鼠标右键单击需要应用的规则名称，选择套用,即可完成,CSS,规则的应用。,3.5 Web2.0,网页布局,WEB,标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（,Structure,）、表现（,Presentation,）和行为（,Behavior,）。对应的标准也分三方面：结构化标准语言主要包括,XHTML,和,XML,，表现标准语言主要包括,CSS,，行为标准主要包括对象模型（如,W3C DOM,）、,ECMAScript,等。这些标准大部分由,W3C,起草和发布，也有一些是其他标准组织制订的标准，比如,ECMA,（,European Computer Manufacturers Association,）的,ECMAScript,标准。,1,结构标准语言,1,）,XML,2,）,XHTML,2,表现标准语言,目前推荐遵循的是,W3C,标准。,W3C,创建,CSS,（,Cascading Style Sheets,，层叠样式表）标准的目的是以,CSS,取代,HTML,表格式布局、帧和其他表现的语言。纯,CSS,布局与结构式,XHTML,相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。,3,行为标准,1,）,DOM,DOM,（,Document Object Model,，文档对象模型）是一种与浏览器，平台，语言的接口，使得用户可以访问页面其他的标准组件。简单理解，,DOM,解决了,Netscaped,的,Javascript,和,Microsoft,的,Jscript,之间的冲突，给予,web,设计师和开发者一个标准的方法，使他们来访问他们站点中的数据、脚本和表现层对象。,2,）,ECMAScript,ECMAScript,是,ECMA(European Computer Manufacturers Association),制定的标准脚本语言（,JAVAScript,）。目前推荐遵循的是,ECMAScript 262,。,3.6,行为和时间轴,3.6.1,行为的概念,一般来说，动态网页是通过,JaveScript,或基于,JaveScript,的,DHTML,代码来实现的，既包含,JaveScript,脚本的网页，还能够实现用户与页面的简单交互。但是编写脚本既复杂又需要专门学习，而,Dreamweaver,提供的,“,行为,”,的机制，虽然行为也是基于,JaveScript,来实现动态网页和交互的，但却不需书写任何代码。,与行为相关的有三个重要的部分,对象、事件和动作。,1,对象,(Object),对象是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒体文件等，甚至是整个页面。,2,事件,(Event),事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到,HTML,标记中。一个事件总是针对页面元素或标记而言的，例如：将鼠标移到图片上、把鼠标放在图片之外、单击鼠标，是与鼠标有关的三个最常见的事件,(onMouseOver,、,onMouseOut,、,onClick),。,3,动作,(Action),行为通过动作来完成动态效果，如：图片翻转、打开浏览器、播放声音都是动作。,3.6.2,行为的应用,1,“,行为,”,面板,2,创建行为,3,行为的应用,3.6.3,时间轴的概念,时间轴是根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面,3.6.4,时间轴动画,时间线只能移动分层对象，如果想移动文本或图像之类的对象，可以将其放在层中。,3.7,网站页面设计案例分析,本节以一个实际的网站项目为例，详细的分析该网站页面设计的具体实现方法及步骤。网站设计主要分为三步骤来进行，即网站的整体设计、布局的规划与分析及网页布局。,小结与提高,本章主要讲述了如何使用,Dreamweaver,软件进行网页的设计，其中也重点讲述了,Html,语言在网页制作中的应用。,接着，讲述了常用的页面布局的方法，使用表格、绘制层及,div,进行页面的布局，并讲述了,web 2.0,标准。最后讲述了样式、行为与时间轴的运用，为我们制作交互式页面打下了基础。,第,4,章,JavaScript,动态网页制作基础,文档对象模型,DOM,4.1,JavaScript,程序设计基础,4.2,在网页中使用,JavaScript,4.3,JavaScript,在网页中应用的案例分析,4.4,在开发动态网页的时候经常需要在页面中制作出特殊的效果，比如在文本框中输入日期时只要弹出日期控件让我们去选择即可，另外经常在首页看到有今天是星期几，现在是什么时间等信息。在页面中增加了这些信息使得页面更具有吸引力。这正是开发者通过在页面中添加,JavaScript,代码来实现的。,4.1,文档对象模型,DOM,文档对象模型（,Document Object Model,，,DOM,）是用于表示,HTML,元素以及,Web,浏览器信息的一个模型，它使脚本能够访问,Web,页上的信息及其他特殊信息。,对于不同的脚本语言，通常都具有一个,DOM,的子集，以便用户在特定的脚本语言中实现对象模型。,对于每一个页面，浏览器都会自动创建,window,对象、,document,对象、,location,对象、,navigator,对象、,history,对象。而基于这个层次结构，还可以创建其他对象。例如，如果在页面中有一个表单对象（名称为,myform,），那么在引用,myform,对象时，就可以使用,window.document.myform,。在这里可以看出，,document,对象是,window,对象的属性，而如果页面中存在,form,对象，那么，,form,对也是,document,对象的属性。,1,document,的对象属性,1,）,alinkColor,、,vlinkColor,、,bgColor,、,gfColor,和,linkColor,属性,这些属性是页面的颜色设置。,bgColor,是页面的背景颜色，,fgColor,是页面的前景颜色（也就是文本颜色），,linkColor,是超链接的颜色，,alinkColor,是鼠标单击中的超链接的颜色，,vlinkColor,是已经访问过的的超链接的颜色，这些属性和（,BODY,）标签中定义的各种属性相对应。,2,）,title,属性,Title,属性中存储的是页面的标题，也就是在,标签中所定义的标题。,2,document,对象的方法,1,）,Write(),方法,在前面的内容中，已经使用了,Write,（）方法，,Write,（）方法的功能就是向页面内写入文本或者标签，其实，这些功能似乎都可以直接在,HTML,页面中完成，而不需要,Script,，但是,运用,Script,，可以完成一定的运算工作然后显示结果，这一点是,HTML,做不到的。,2,）,Open(),和,Close(),方法,Open(),方法的功能就是打开一个新文档，而,Close(),方法的功能就是关闭前文档。,4.2 JavaScript,程序设计基础,4.2.1 JavaScript,的特点及其基本格式,1,JavaScript,特点,JavaScript,是一种脚本语言，脚本语言是指在,web,浏览器内由解释器解释执行的编程语言。每次执行的时候解释器都会把程序代码翻译成可执行的格式。使用脚本语言编写的程序都是在脚本引擎装载,HTML,页面时解释执行，脚本引擎是一个解释器，它是,web,浏览器的一部分，一个包含翻译脚本的脚本引擎的,Web,浏览器称为脚本宿主，例如：,Internet Explorer,和,Navigator,都是,JavaScript,程度的脚本宿主。,JavaScript,是一种解释语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器解释执行，它是由上而下地执行。这种语言的弱点是容错性较差，如果不条不执行不了，那么下面的语言也无法执行，而且由于一条一条的解释，速度较慢。,JavaScript,对大小写是敏感的，这意味着大小写字母相应的小写字母是不同的。,4.2.2 JavaScript,的数据类型,字符串、数值和布尔型是,JavaScript,的三种基本数据类型，数组和对象是复合数据类型。本节只介绍三种基本数据类型和数组。,1,字符串型,一个字符串值是排在一起的一串字