1 / 64

第 12 章 Web 网页制作与发布

第 12 章 Web 网页制作与发布. 刘仙菊. 主要内容. HTML 语言. 1. ASP 技术. 2. 基本标记 添加超链接和书签 添加图像 创建表格 定义表单 设置帧. HTML 语言. 1. 2. ASP 技术. 12.1 HTML 语言. ● HTML 文档的编写方法. ● H yper T ext M arkup L anguage — 超文本标记语言. 制作 Web 页面的基本编程语言 一系列标记的集合 用 HTML 编写的超文本文档称为 HTML 文档。.

galena-hodges
Download Presentation

第 12 章 Web 网页制作与发布

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第12章Web网页制作与发布 刘仙菊

  2. 主要内容 HTML语言 1 ASP技术 2

  3. 基本标记 添加超链接和书签 添加图像 创建表格 定义表单 设置帧 HTML语言 1 2 ASP技术

  4. 12.1 HTML语言 ●HTML文档的编写方法 ● HyperTextMarkupLanguage—超文本标记语言 • 制作Web页面的基本编程语言 • 一系列标记的集合 • 用HTML编写的超文本文档称为HTML文档。 • 手工直接编写：记事本、EditPlus等，存成.htm 或.html文件 • 可视化编辑器：Dreamweaver、 Frontpage等 • 由Web 服务器实时动态地生成：IIS、Tomcat等

  5. 12.1 HTML语言 • HTML标签及其属性 • 标签:是HTML语言的基本组成部分，要用<>括起来。 • ● 双边标记：头标与尾标。如：<title>…</title> <html>…</html> 。 • ● 单边标记：只有头标。如：<hr> 标签属性：对标签的状态进行描述，出现在标签的< >内，属性值用“”或者’’引起来。常见共有属性： • color bgcolor background size width height align src。

  6. 12.1.1 文档结构 ●文档结构 1 2 3 4 <html></html> <head></head> <title></title> <body></body> 例: <html> <head> <title>这里是标题栏</title> </head> <body > <p>这里是网页文本的页面体部分 </p> </body> </html>

  7. 12.1.2 字体和颜色 ●字体和颜色 • 标题字体： <h#> ... </h#> #=1, 2, 3, 4, 5, 6 • 字体大小 ：<font size=#> ... </font> #=1, 2, 3, … • 字体名称 ：<font face=#> ... </font> #=黑体，宋体… • 字体颜色 ：<font color=#> ... </font> • 字体形状： • <b>今天天气真好！</b> 今天天气真好！ • <i>今天天气真好！ </i> 今天天气真好！ • <u>今天天气真好！</u> 今天天气真好！ • <sup>今天天气真好！</sup> 今天天气真好！ • <sub>今天天气真好！</sub> 今天天气真好！

  8. 12.1.3 文字布局 ●文字布局 • 段 <p> ； • 换行 <br>； • 区域<div>； • 文字的对齐(Align) • <p align=#>...</p> #=left, center, right • <div align=#> #=left, center, right

  9. 12.1.4 超级链接和书签 • 1 .页面之间的链接，用URL： • <A HREF=“URL 信 息”title=“提示信息”> 文本及图像</A> 例如： • <A HREF="http://www.upc.edu.cn">UPC</A> • <A HREF="../../topic.htm">Return to topic</A> • <A HREF=“mailto:cxr@upc.edu.cn">UPC</A> • 2.页内链接-书签，用锚： • 例如： • <A NAME="achor">Appendix A</A> • Details are in <A HREF="#achor">Appendix A</A>.

  10. 12.1.5 图像 ● 图像格式 —— bmp，gif，jpg 例如：<p><img src=”tupian1.jpg” alt=”图片” align=”bottom” border=0 width=“200” height=600>插入图片</p> ● 标记 —— <img> ● 属性 src：指定图片的位置 Align：指定图片与文本的对齐关系 Alt：提示信息 Border：图片边界宽度 Height：图片高度 Width：图片宽度

  11. 12.1.6 表格 ●作用 • 需要显示表格数据 • 定位页面中的各个元素 ●标记 • <caption></caption> • <table></table> • <tr></tr> • <td></td> • <th><th>

  12. 12.1.6 表格 • 跨多列：colspan=# • 跨多行： rowspan=# • 表格边框的色彩：bordercolor=# • 表元的背景色彩： bgcolor=# • 和背景图象： background="URL" • 文字的对齐/布局： • align= # (#=left, center, right) • valign= # (#=top, middle, bottom)

  13. 12.1.7 表单与控件 表单 <form action="url" method=*>... ... <input type=submit> <input type=reset></form> *=GET, POST 表单控件 <input type=* name=**>*=text, password, checkbox, radio, image, hidden, submit, reset**=Symbolic Name for CGI script

  14. 12.1.7 表单与控件 • 文字输入：<input type= text value=**> • 隐 藏 框：<input type=hidden value=**> • 密码输入：<input type= password value=**> • 复 选 框：<input type=checkbox checked value=**> • 单 选 框：<input type=radio value=** checked> • 列 表 框：<select name=* multiple > • <option value=**> ... </option> • </select> • 文本区域:<textarea name=* rows=** cols=**> ...<textarea>

  15. 12.1.7 表单与控件 <form action=”saveresults” method=”post”> <p>姓名：<input type=text size=25 maxlength=256 name=”name”></p> <p>地址：<input type=text size=50 maxlength=256 name=”address”></p> <p>发送数据？Yes<input type=radio name=”send” value=”yes”> No<input type=radio name=”send” value=”no”> <p>需要什么产品？<select name=”product” multiple size=”1”> <option value=”screen” selected>显示器 <option value=”keyboard”>键盘 <option value=”mouse”>鼠标 <option value=”modem”>调制解调器</select></p> <p>是否会员？<input type=checkbox name=”member” value=”true”></p> <p><input type=submit value=确定> <input type=reset value=取消<html> </form> 属性

  16. 12.1.8 帧 • 标记 ● <frame> </frame> ● <frameset> </frameset> ● <noframes> </noframes> ●帧：在一个浏览器窗口中定义单独的窗框 • 每个帧包含了一个单独的网页 • 可独立于其它帧滚动

  17. 12.1.9 其他 • 插入直线： • <hr size=# color=# width=# > • 插入移动的文字： • <marquee align= #>文字</marquee > • (#=left, right) • 插入对象： • <OBJECT classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><PARAM NAME="movie" VALUE="http://www.upc.edu.cn/images/zy01.swf"></OBJECT> • <OBJECT id="NSPlay" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" ><PARAM NAME="src" VALUE=‘20071210kjj.wmv'></OBJECT> • 空格:&nbsp; • 注释：<!-- 注释内容 -- >

  18. 动态网页开发技术 ASP概述 ASP语法 ASP五大内置对象 ASP技术 2 1 HTML语言

  19. 12.2.1 动态网页开发技术 • 1、网页分类 • 静态网页——网页内容固定不变。 • 优点：简单 • 缺点：不能满足访问者的需要；不易维护 • 动态网页——不需人工修改代码，根据需要可以自动 • 获得并形成随数据库变化的数据。 • -- 特点：交互性、可自动更新、因时因人而变

  20. 12.2.1 动态网页开发技术 • 客户端技术—— DHTML技术 • - 通过各种技术的综合发展而得来。 • - 包括：JavaScript；VBScript；DOM；CSS等 • 服务器端技术——服务器执行一个包含用户HTTP请求的 应用程序，将处理结果返回客户端。 • 常见服务器端Web编程技术有：ASP，JSP，PHP、 CGI等。 • 2、动态网页技术分类

  21. 12.2.1 动态网页开发技术 3、客户端脚本语言与服务器端脚本语言 1）客户端脚本语言 ： 一种介于HTML和编程语言之间的特殊语言，不具备复杂严谨的语法和规则。 1）客户端脚本 • 程序开发语言VisualBasic家族成员。 • 开发者可以在产品中免费使用VBScript源实现程序。 • 它与WWW浏览器集成在一起。 • 大多数Script代码位于Function 或Sub过程中，仅在其他代码要调用它时执行。  • VBScript • JavaScript

  22. 12.2.1 动态网页开发技术 • 由Netscape公司开发并随Navigator一起发布的、介于Java与HTML之间的编程语言。 • 是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。 • 开发环境简单，不需要Java编译器，通过嵌入或调入在标准的HTML语言中实现，直接运行在Web浏览器中。 • 它的出现弥补了HTML语言的缺陷，是Java与HTML折衷的选择。 1）客户端脚本 • VBScript • JavaScript 

  23. 12.2.1 动态网页开发技术 • ASP是微软的Windows IIS系统自带的服务器端脚本语言环境，利用它可以执行动态的Web服务应用程序。 • 语法非常类似VB，学过VB的人可以很快上手。 • 不能很好支持跨平台的应用开发。 • 微软提供了COM/DCOM技术，弥补了ASP功能简单的缺陷，极大拓宽了ASP的应用范围。 • 简单且易维护，是小型网站应用的最佳选择。 2)服务器端脚本技术  • ASP • PHP • JSP

  24. 12.2.1 动态网页开发技术 • PHP是一种嵌入HTML页面中的脚本语言。它大量地借用C和Perl语言的语法，并结合PHP自己的特性，使Web开发者能够快速地写出动态页面。 • PHP是完全免费的开放源代码产品，PHP和MYSQL搭配使用，可以快速地搭建动态网站系统。 • PHP的语法和Perl很相似，但其内部结构的天生缺陷导致它不适合于编写大型网站系统。 2)服务器端脚本技术 • ASP • PHP • JSP 

  25. 12.2.1 动态网页开发技术 • JSP是Sun公司推出的动态网页技术。它以Java语言作为脚本语言，熟悉JAVA语言则可很快上手。 • JSP虽然也使用脚本语言，但JSP代码却是被编译成Servlet并由Java虚拟机执行，因此其执行效率比PHP和ASP都高。 • JSP在技术结构上有其他脚本语言所没有的优势，也能够支持高度复杂的基于Web的应用。 • 虽然其配置和部署相对其他脚本语言环境稍复杂，但对于跨平台的中大型网站系统来讲，基于JAVA技术的JSP几乎成为唯一的选择。 2)服务器端脚本技术 • ASP • PHP • JSP 

  26. 12.2.2 ASP概述 ● 无需编译 ● 可使用其它脚本语言结合HTML代码 ● 对开发环境要求不高 ●浏览器无关 ●能与任何ActiveX Scripting语言兼容 ●可通过ActiveX服务器组件扩充功能 • 1、特点 • Microsoft Active Server Pages 只能运行于Windows98以上的IIS（3.0以上）的服务器端，不能运行于Linux、Unix等中。 • 执行结果为HTML，将HTML返回到客户端浏览器。

  27. 12.2.2 ASP概述 2、ASP文件工作原理 一个网页从申请到执行到最后的显示，一般需要经历以下几个步骤： （1） 用户在浏览器的地址栏中添入ASPages文件名，并回车向服务器的IIS申请这个ASP页面； （2）服务器接收到这个申请，从硬盘或者内存中读ASP文件； （3）服务器利用ASP.DLL来解释执行这个文件，并生成HTML格式的静态页面； （4）HTML页面被送回浏览器； （5）HTML页面被浏览器解释执行并显示。 注意： HTML是不经任何处理送回给浏览器的，而ASP的每一个命令都首先被ASP.DLL解释执行，然后才能生成HTML文件。但是对浏览器而言，HTML文件和ASP文件都是一样的，都是HTML格式的。

  28. 12.2.2 ASP概述 ●版本 —— Windows XP professional ●软件——最常用的Web服务器软件是IIS ●安装IIS ●配置IIS 3、Web服务器（IIS）安装与配置

  29. 12.2.2 ASP概述

  30. 12.2.2 ASP概述 ●配置IIS 配置主目录 配置网站 配置文档

  31. 12.2.2 ASP概述 .asp 纯文本文件 扩展名 编辑器 • HTML标记（tags） • VBScript或Javascript客户端脚本语言 • VBScript或Javascript服务器端脚本语言（ASP语法） 包含内容 EditPlus、记事本、UltraEdit ●服务器默认的解释语言：首选 VBScript 4、ASP文件

  32. 12.3.4 ASP语法 1、分界符号 分界符号 ASP HTML 仍为 < 和 > <% 和 %> <%= 和 %> 用来包含ASP中的脚本命令 例：<%sport=”climbing”%> 用来包含输出表达式 例：<%=sport%>

  33. 12.3.4 ASP语法 2、在语句中使用HTML • 可以在语句内部使用HTML文本。

  34. 12.3.4 ASP语法 3、使用其他脚本语言 ■ 默认：VBScript ■也可使用其他脚本语言，但必须加入脚本标记<SCRIPT>和</SCRIPT>来说明 ■有两个属性：LANGUAGE和RUNAT

  35. 12.3.4 ASP语法 4、变量 • 在VBScript中，变量可以不声明，如：<%score=99%> • 变量命名必须遵循： • 第一个字符必须是字母； • 不能包含嵌入的句点； • 长度不能超过 255 个字符； • 在被声明的作用域内必须唯一。 • 给变量赋值 • 变量在表达式左边，要赋的值在表达式右边。 • 例如： score =99 • 数组变量和一般变量的声明方法相同，唯一的区别是声明数组变量时要使用dim，而且变量名后面带有括号（）。 • 例如： Dim A(10)。

  36. 12.3.4 ASP语法 5、常量 常量是具有一定含义的名称，用于代替一定的具体值，其值从不改变。使用CONST定义常量。 例如：CONST Studentnumber=100 可以一次定义多个常量，只要把每个常量定义用逗号隔开即可。 例如：CONST age=33，classname=”计算机”

  37. 12.3.4 ASP语法 6、运算符

  38. 12.3.4 ASP语法 7、条件语句 在 VBScript 中可使用以下2种条件语句： 1） If...Then...Else 语句 用于计算条件是否为 True 或 False，并且根据计算结果指定要运行的语句。如果条件为真，则执行then后的语句；如果条件为假，则执行else后的语句。 例1：

  39. 12.3.4 ASP语法 例： 例:

  40. 12.3.4 ASP语法 例： 2）Select Case 语句 该语句的一般结构是： Select 表达式 Case 结果1 执行语句 ………… [case 结果n. . . 执行语句 ][Case Else 执行语句] End Select

  41. 12.3.4 ASP语法 8、循环语句 1）. DO loop循环 ① 当条件为 True 时重复执行语句 ② 当条件变为 True 时重复执行语句

  42. 12.3.4 ASP语法 8、循环语句 2）WHILE WEND循环

  43. 12.3.4 ASP语法 8、循环语句 3）for…step…next循环 （step是步长，指定每次增加或减少的值， Step=1 可以省略，Step 可以为负值，计数器每次递减） 。例如：

  44. 12.3.4 ASP语法 9、过程和函数 在 VBScript 中，过程被分为两类：Sub 过程和 Function 过程。 （1） Sub过程 包含在 Sub 和 End Sub 之间的一组 VBScript 语句，执行操作但不返回值。Sub 过程可以使用参数。 调用 Sub 过程时，只需输入过程名及所有参数值，参数值之间使用逗号分隔。不需使用 Call 语句，但如果使用了Call 语句，则必须将所有参数包含在括号之中。 （2）Function 函数 包含在 Function 和 End Function 之间的一组 VBScript 语句。Function函数与 Sub 过程类似，但是Function函数通过函数名返回一个值。

  45. 12.3.4 ASP语法 9、过程和函数 例：

  46. 12.3.4 ASP语法 9、过程和函数

  47. 12.3.4 ASP语法 语 法 <!--# INCLUDE VIRTUAL | FILE = ”filename”--> 10、包含其它文件 ■#INCLUDE处理机制，可以使用它直接在ASP程序中插入另外一个ASP文件。 例如： <!--# INCLUDE VIRTUAL = “/myapp/test.inc” --> <!--# INCLUDE FILE = “test/test.inc” -->

  48. 12.3.5 ASP的五大内置对象 • 五个内置对象（object），程序员可以直接调用 Request对象 Response对象 Server对象 Session对象 Application对象

  49. 12.3.5 ASP的五大内置对象 1、Request:访问基于HTTP传递的所有信息。 如表单参数、Cookie、服务器环境变量等。 （1）Form • 取得Form中通过Post传递的参数。 • 语法：Request.Form(element)[(index)|.Count] • element ：指定要哪个控件（input的radio、checkbox、text、password、button、 submit、hidden以及select等)取值； • index 可选参数，如果某个控件有同名的，使用该参数来指定访问哪一个，可以是 1 到Request.Form(element).Count 之间的任意整数。注意：不是从0开始。 • Count 集合中元素的个数 。

More Related