网页与web程序设计.doc

1.什么是WWW？WWW是World Wide Web的缩写，简称为Web（万维网）。WWW是一个全球性的信息系统，使计算机能够在Internet上相互传送基于超媒体的数据信息。 WWW也可以用来建立Intranet（企业内部网）的信息系统。WWW具有三个统一： 1.统一的资源命名方式：URL（统一资源定位符，即网址）。 2.统一的资源访问方式：HTTP （超文本传输协议）。 3.统一的信息组织方式：HTML（超文本标记语言）。2.WWW的特点分布式的信息资源 。 统一的用户界面 。支持各种信息资源和各种媒体的演播 。广泛的用途。 3.什么是HTML ？超文本标记语言（HTMLHyperText Markup Language）是用于设计网页源文件（网页文档）的语言。每一个页面的代码保存为一个网页源文件(.htm文件) 。八十年代初，HTML由万维网联盟（W3C：World Wide Web Consortium）制订。 HTML包括一些定义页面内容和格式的符号，称为标记。它能够将文本、图像、声音和动画结合在一个网页文档中。这些文档可以通过Web浏览器显示，还可以通过超链接以访问其它的信息资源。后来，进一步推出了XML（扩展标记语言），该语言可以由程序员自己定义标记。 。 4.什么是标记？标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。标记总是放在三角括号中，大多数标记都成对出现（有开始标记和结束标记）。结束标记和开始标记所用的字符相同，只是前面加一个斜杠。例如： 用于标记一个自然段。 标记可以具有相应属性即各种参数，如size、color、 text、 width和noshade等 。 例如： 标记通常可以分成两种：第一种用来指定网页上的元素或元素的样式。 例如， 指定一个自然段及其字体和颜色： 自然段内容。 第二种用来指向其它的资源。 例如，指定一个链接地址： 武汉大学 指定一个图片文件： 5.什么是超文本、超媒体和超链接？超文本是网页上具有链接功能的文字。例如，娱乐 新闻 电影 。超媒体是网页上具有链接功能的多媒体。超链接是网页上连接其它网页或网页上指定位置的超文本和超媒体。超链接分为文字和图像（包括动画）两种，网页中的一段文字、一副图像或图像的某一个部分等都可以定义为超链接。6 网页中的基本元素文本 图像 多媒体 超级链接 表单 导航栏 其他常见元素 7 滚动：用来设置当没有足够的空间来显示当前框架的内容时是否显示滚动条。本项属性有4种选择：“是”表示显示滚动条；“否”表示不显示滚动条；“自动”表示当没有足够的空间来显示当前框架的内容时自动显示滚动条；“默认”表示采用浏览器的默认值（大多数浏览器默认为自动）。CSS样式概述 8 CSS（Cascading Style Sheet）样式是一系列格式设置规则，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS样式可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式等。 9 CSS格式设置规则由两部分组成：选择器和声明。选择器是标识已设置格式元素(如 P、H1、类名称或 ID)的术语，而声明则用于定义样式元素。在下面的示例中，H1 是选择器，介于大括号 () 之间的所有内容都是声明： H1 font-size: 16 px; font-family: Helvetica; font-weight: bold; 声明由两部分组成: 属性和值。上述示例为 H1 标签创建了样式：链接到此样式的所有H1标签的文本都将是 16 像素大小并使用 Helvetica字体和粗体。10 在Dreamweaver中，可以使用四种不同的方法在网页中加入CSS样式。链接外部样式表文件定义内部CSS样式导入外部样式表文件定义内联CSS样式11 (1) CSS滤镜滤镜(filter)属性是CSS的一个扩展部分，它能够渲染对象元素，创建出艺术效果。Dreamweaver的CSS样式提供了丰富的滤镜效果，使用这些滤镜能够创建出文本和图像的3D、阴影和淡入淡出等效果，应用在页面中，在一定程度上美化了页面。 (2) CSS滤镜的基本使用方法滤镜的使用和其它CSS样式的定义方法相似，分为外部引用、内部引用和局部引用三种，语法格式为： filter: filtername(parameters)其中filter是滤镜属性标识符，filtername是滤镜属性名称，parameters是滤镜属性自带的若干参数。例如： 12 Dreamweaver中共含有16种CSS滤镜，可分为无参滤镜和有参滤镜两类。 无参滤镜Gray：使对象产生灰度图效果。Invert：使对象产生“底片”效果。Xray：使对象产生“X光片”效果。FlipH：使对象产生水平翻转效果。FlipV：使对象产生垂直翻转效果。Light：使对象产生一种模拟光源的投射效果。 有参滤镜Alpha：设置对象的透明度。Blur：使对象产生模糊效果。Wave：使对象在垂直方向上产生波纹效果。Shadow：在指定的方向上建立对象的投影。Dropshadow：设置对象的阴影效果。Chroma：将对象中指定的颜色设置为透明色。Glow：在对象的边缘产生类似发光的效果。Mask：为对象建立一个覆盖于表面的膜，其效果就好像是戴有色眼镜看物体一样。 BlendTrans：设置对象的淡入淡出效果。RevealTrans：设置对象之间的切换效果。例如： 13 使用JavaScript编写程序的特点：JavaScript是一种脚本语言，采用小程序段的方式实现编程，可以直接嵌入HTML文档中。在标识之间可以加入JavaScript脚本。可将标识放在或之间。将JavaScript脚本置于之间，可使之在主页和其余部分代码之前装载。JavaScript是一种基于对象的语言，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。对于不支持JavaScript的浏览器，所有在中的代码均被忽略；对于支持JavaScript的浏览器，则执行中的代码。/ 是JavaScript的注释标识，其后的信息不被浏览器解释。14 JavaScript对象利用JavaScript基于对象的功能，可以大大简化程序的设计，用更直观、模块化和可复用的方式进行程序开发。对象的基本知识对象的基本结构：对象是由属性和方法两个基本元素构成的。属性用来描述对象的数据特征，与变量相关联；方法用来描述作用在属性上的操作(行为)，与函数相关联。 例如：大型客机可视为对象，它具有位置、速度、颜色、容量等属性，对于该对象可施行起飞、降落、加速、维修等操作，这些操作将或多或少地改变飞机的属性值。15 引用对象的方式：要么创建新的对象，要么利用现存的对象。引用JavaScript内部对象，如Date、Math等；由浏览器环境中提供，如window、document等；使用new运算符创建新对象。16 对象属性的引用 方式一：通过点运算符(.)实现引用 例如：vince = 湖北省; = 武汉大学; university.date = 1893; university是一个已经存在的对象，province、 name和date是它的三个属性。方式二：通过对象的下标实现引用 例如：university0 = 湖北省; university1 = 武汉大学; university2 = 1893;方式三：通过字符串的形式实现引用 例如：universityprovince = 湖北省; universityname = 武汉大学; universitydate = 1893;对象方法的引用 格式：ObjectName.methodName( ) 例如：window.alert(Hello World!); document.write(欢迎光临!); 浏览器对象：每个HTML文档被载入浏览器中时浏览器就创建了一系列分级的对象体系，其中最常用的对象包括window、frame、document、history等。window对象 window对象处于浏览器对象层次的最顶端，代表当前网页所在的窗口，可以用它来参考包含在网页中的所有元件。 例如：window.document.bgColor = FF0000; window对象是预设的参考对象，因此在使用window对象的属性和函数时，可以不指定window。 例如：window.alert(欢迎光临); 等价于 alert(欢迎光临);document对象 document对象是浏览器对象系统的核心，它可以更新正在载入或已经载入的HTML文档，并可以访问载入文档所包含的元件。 例如：document.write(JavaScript学习天地); document.fgColor=#0000FF;history对象 history对象记录着浏览器所浏览过的每一个页面，这些页面组成了一个历史记录列表。用户可以通过forward( )、back( )或go( )方法来寻找符合条件的历史记录。 例如：history.back( ); /从当前页面后退一页 histrory.go(2); /从当前页面前进两页17 事件驱动及事件处理JavaScript是基于对象和事件驱动的脚本语言，通常把由鼠标或热键引发的一连串程序的动作称为事件驱动。对事件进行处理的程序或函数，称为事件处理程序。JavaScript主要有以下一些常用事件：单击事件onClick：当用户单击元件时，触发onClick事件，同时onClick指定的事件处理程序将被调用执行。通常在下列基本对象中产生： button（按钮） checkbox（复选框）radio （单选按钮） 例 单击按钮激活btnClick( )处理程序function btnClick( ) alert(You have clicked the button!); 改变事件onChange：当text、textarea和select元件失去焦点且内容被改变时，触发该事件。 例如： function textChange(textObj) alert(textObj.value); 载入事件onLoad：当网页载入完成时，触发该事件。 卸载事件onUnload：当用户离开网页时，触发该事件。 例如： function loadFile( ) do var name=prompt(请输入您的大名：,); while(name= | name=null); alert(欢迎 +name+ 光临!); 18 表单“方法”下拉列表框用来选择将表单数据传输到服务器的方式。其选项的含义如下：默认：使用浏览器的默认设置将表单数据发送到服务器。通常，默认方法为GET方法。 GET：将表单数据附加在请求页面的URL地址后面。GET方法用来传送少量数据，字符数不能超过8192个字符。POST：将在HTTP请求中嵌入表单数据。POST方法用来传送大量数据。19 什么是层？层提供一种对网页对象进行有效控制的手段，层可以包含文本、图像、表单等所有可直接用于文档的元素，层中还可以包含插件或其它层（嵌套使用）。层提供了精确定位页面元素的方法，通过将页面元素放置在层中，用户可控制对象的叠放顺序、显示或隐藏，甚至可利用时间轴同时在屏幕上移动一个或多个层。20 行为行为是事件和动作的组合，它允许用户改变网页内容以及执行特定的任务。利用Dreamweaver的行为，可以轻松制作出动态的网页效果，从而使网页更具吸引力。动作是由JavaScript和HTML代码组成的，该代码能执行各种特殊任务，如弹出一个信息框、播放一段音乐等。用户可以使用“行为”面板直接向页面中添加动作。事件是浏览器生成的消息，指示该页的用户执行了某种操作。如果用户预先设置了某个动作，则事件将触发相应的动作发生，如弹出一个信息框等。21 关于Web应用程序Web应用程序是一组静态和动态网页的组合。静态网页由Web服务器直接发送到请求浏览器，而动态网页要在服务器上经过修改后才被发送到请求浏览器。步骤1：Web浏览器请求动态页面步骤2：Web服务器查找该页面并将其传送给应用程序服务器步骤3：应用程序服务器查找该页面中的指令并完成页面步骤4：应用程序服务器将完成的页面传递回Web服务器 步骤5：Web服务器将完成的页面发送到请求浏览器站点构成 22 Dreamweaver站点最多由三部分（或文件夹）组成：本地文件夹：是用户的工作目录。Dreamweaver将该文件夹称为本地站点。本地文件夹一般位于本地计算机上，用于存储正在编辑的网页文档及其相关文件。 注意：只需建立本地文件夹即可定