6_静态网页制作
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
换行
对于需要换行的地方，应加上<Br>标记， 有了它浏览器会自动将右边的文字转移至 下一行。请注意， <Br>是单标记。 示例：没有换行效果 换行效果
段落标记
为了使文本排列的整齐和清晰，文字段落 之间常用<P>和 </P>来做标记。 </P>是可 以省略的，因为下一个<P>的开始就意味着 上一个<P>的结束。 <P>标记还有一个属性ALING，它用来指明 字符显示时的对齐方式，一般值有 CENTER、LEFT、RIGHT3种。 示例：段落标记效果
6.2.2 页面布局与文字标记
文本是网页传播信息的基本载体，在网页 中的重要地位可想而知。对于任何一个基 本网页来说，文本都是必不可少的，文本 的格式化也是非常重要的。
标题
HTML中提供了相应的标题标记<Hn>。HTML 总共提供6个等级的标题，n越小标题字号就越大。 字号大 <H1>„ </H1> 一级标题 <H2>„ </H2> 二级标题 <H3>„ </H3> 三级标题 <H4>„ </H4> 四级标题 <H5>„ </H5> 五级标题 字号小 <H6>„ </H6> 六级标题 示例:标题效果
1. 2. 3. 4.
5.
简单动态页面处理流程 浏览器发出对动态页面的请求； Web服务器找到该页面，传给应用服务器； 应用服务器扫描页面，执行代码，生成结果； 应用服务器把结果页面返回给Web服务器； Web服务器发回该结果页面给浏览器。
请求
浏览器
网络服务器
请求
<html> <code> </html>
6.2.1 HTML的基本语法
HTML是Hypertext Marked Language的英 文缩写，即超文本标记语言，是一种用来 制作超文本文档的简单标记语言(就是制作 网页的最基本的语言)。 用HTML编写的超文本文档称为HTML文 档，它能独立于各种操作系统平台。所谓 超文本，是因为它可以加入图片、声音、 动画和影视等内容。
a) Web数据库接口技术的选择；
b) 编程语言的选择；
c) 应用程序的编写。
将实体－关系模型转变为关系模型
数据库逻辑设计
将关系模型转变为特定DBMS下的数据模型
对数据模型进行优化
估算数据库的数据存储量 数据库物理设计
设计数据库设备 定义数据库的结构
数据库实施
数据的装载 选择Web与数据库接口技术
颜色，默认为蓝色。 vlink＝颜色，用于定义网页中已被访问过的超 链接字符的颜色，默认为紫红色。 alink＝颜色，用于定义被鼠标选中，但未使用 时超链接的颜色，默认为红色。 示例：<body>标记
HTML文件的创建
HTML的格式非常简单，是由文字和标记 组合而成的纯文本文件，几乎任何的文字 编辑器，如Windows中的记事本、写字板 都可以用来编写HTML文件，只需保存时 修改其扩展名即可。
网页中显示的实际内容均包含在这个正文 标记之间。正文标记<BODY>中提供以下 属性来改变文本的颜色及页面背景：
bgcolor＝颜色，用于定义网页的背景颜色。 backgrond＝url，用于定义网页背景图案的图
像文件。 text＝“„„”，用于定义正文字符的颜色， 默认为黑色。
link＝颜色，用于定义网页中超级链接字符的
<EM> </EM> 表示强调，一般为斜体 <STRONG> </STRONG> 表示特别强调，一般为 粗体 <CITE> </CITE> 用于引证、举例，一般为斜体
FONT标记中还有一个属性Face,用来表示 文字的字体 示例：文字的字体与样式效果
文字的颜色
文字的颜色可以是一个16进制数。文字颜 色通过FONT标记里的color属性来进行设 置,颜色设置格式如下： <font color=color_value>„</font>
文字的字体与样式
为了丰富文字的变化，或强调某一部分，HTML 提供了如下所示标记,这些标记用于显示文字的样 式： <B> </B> 粗体 <I> </I> 斜体 <U> </U> 加下划线 <TT> </TT> 打字机字体 <BIG> </BIG> 大型字体 <SMALL> </SMALL> 小型字体 <BLINK> </BLINK> 闪烁效果
HTML的基本结构
<html> <head> 网页头部信息 </head> <body> 网页主体正文部分 </body> </html>
头部描述浏览器所需的信息
主体包含所要说明的具体内容
HTML的标记
HTML的任何标记都由“＜”和“＞”符 号围起来，称为标记，是用来分割标记文 本的元素，从而形成文本的布局、文字的 格式及五彩缤纷的画面。在起始标记的标 记名前加上符号“/”便是其终止标记，如 </html>。
单标记
某些标记称为“单标记”，因为它只需单 独使用就能完整的表达意思。 单标记语法如下： <标记名称> 最常用的单标记是<BR>，它表示换行。
双标记
它由“始标记”和“尾标记”两部分构成， 必须成对使用。其中，始标记告诉Web浏 览器从此处开始执行该标记所表达的功能； 尾标记告诉Web浏览器在这里结束该功能。 双标记语法如下： <标记>内容</标记> 其中“内容”部分就是要被这对标记施加 作用的部分。
示例：文字的颜色效果
6.2.3 多媒体
在网页中，经常会插入一些多媒体。例如 图像、音乐、视频等。
插入图像
插入图像的标记是<IMG>，它的SCR属性 指明了所要链接的图像文件地址，这个图 形文件可以是位于本地机器上的图形，也 可以是位于远端主机上的图形。ALT属性 指出图片的替代文字，在有些情况下，这 个属性非常重要。其他还有TITLE（图片 的提示文字）、WIDTH（图片的宽度）、 HEIGHT（图片的高度）等属性。 示例：插入图像效果
第六章 静态网页制作
第六章 静态网页制作
6.1 网页制作概述 6.2 HTML
6.2.1
HTML的基本语法 6.2.2 页面布局与文字标记 6.2.3 多媒体 6.2.4 列表 6.2.5 表格 6.2.6 超级链接标记 6.2.7 表单标记
6.1 网页制作概述
一般而言，一个电子商务网站中的web资源 总是包括静态网页和动态网页两种。 静态网页：是一个个.html文件，内容相对 稳定，不需要经常修改，文件比较小，适 合在网上传输，执行效率很高；如公司介 绍、员工信息、销售网络、售后服务信息 等是一些相对固定不变的信息。
浏览器
请求 回答
网络服务器 <html> <p>h1 </html> 静态页面
<HEAD> 和</HEAD>双标记
这部分内容分别表示头部信息的开始和结 尾。头部中包含的标记是页面的标题、说 明等内容，它本身不作为内容来显示，但 影响网页显示的效果。头部中最常用的标 记是<title></title>，它用于定义网页的标题， 它的内容显示在网页窗口的标题栏中。
<BODY> 和</BODY>双标记
5.
6. 7.
8.
资源服务器执行资源访问命令，返回结果 数据集； 应用服务器执行余下的代码，插入数据到 结果页面； 应用服务器把结果页面返回给Web服务器； Web服务器发回该结果页面给浏览器。
静态网页的制作
制作静态网页的第一步就是选定一种网页 制作软件（或工具）。从原理上来讲，用 任何一种文本编辑器都可以制作静态网页， 但“所见即所得”的可视化开发工具无疑 是最方便的。
编程语言的选择和应用程序的编写
程序设计
6.2 HTML
HTML(超文本标记语言)是制作网页的基础。 HTML标记是HTML的核心与基础，用于修饰、 设置HTML文件的内容及格式。 一个HTML文件中包含了所有将显示在网页上的 文字信息。其中也包括对浏览器的一些指示，如 文字应放置在何处，显示模式如何等。如果还有 一些图片、动画、声音或是任何其他形式的资源， HTML文件也会告诉浏览器到哪里去查找它们， 以及它们将放置在网页中的什么位置。
使用记事本创建HTML文件 启动Windows XP，打开记事本窗口，即可 编写HTML代码。当编辑完HTML文件后， 选择菜单中的【文件】→【保存】命令， 将它存为扩展名为.htm或.html的文件即可。 然后就可以在浏览器中浏览网页。
使用所见即所得的网页编辑工具创建 HTML文件 例如使用Dreamweaver，可打开其代码视 图，在代码视图中输入HTML代码。输入 代码完成后，可在设计视图中浏览效果。
数据库逻辑设计数据库逻辑设计将实体关系模型转变为关系模型将实体关系模型转变为关系模型将关系模型转变为特定将关系模型转变为特定dbmsdbms下的数据模型下的数据模型估算数据库的数据存储量估算数据库的数据存储量估算数据库的数据存储量估算数据库的数据存储量对数据模型进行优化对数据模型进行优化数据库物理设计数据库物理设计数据库实施数据库实施程序设计程序设计设计数据库设备设计数据库设备定义数据库的结构定义数据库的结构数据的装载数据的装载选择选择webweb与数据库接口技术与数据库接口技术编程语言的选择和应用程序的编写编程语言的选择和应用程序的编写62html?html超文本标记语言是制作网页的基础
水平线段
水平线对组织信息很有用。在页面上可以 使用一条或多条水平线以可视方式分隔文 本和对象。水平线标记为单标记<Hr>，它 有以下几个属性：
Size：水平线的宽度，默认值为１；
Width：水平线的长，用占屏幕宽度的百分比
或像素值来表示；
Align：水平线的对齐方式，有LEFT、RIGHT、
般是和数据库系统联系在一起，通过特定的编 程语言和外部应用程序来访问企业信息系统已 经存在于数据库中的信息。
①
交互式动态网页的制作主要包括两大步骤 数据库设计阶段
此阶段主要工作是根据前面确定的网站信息结 构图进行数据库的逻辑设计、物理设计，并将 具体的数据录入到数据库管理系统中去。
②
程序设计阶段
动态网页的制作
一般而言，动态网页的制作分为两种：网 页表现形式的动态制作和网页数据内容的 动态制作。
网页表现形式的动态制作
Script（脚本）语言； Java Applets; 层叠样式表（CSS）； 虚拟现实建模语言（VRML）。
网页数据内容的动态制作
交互式动态网页中网页数据内容的动态制作一
CENTER3种。 Noshade：线段无阴影属性，为实心线段。 示例：水平线效果
文字的大小设置
文字大小设置的标记是FONT， FONT有 一个属性SIZE，通过指定SIZE属性就能设 置字号大小。也可以在SIZE属性值之前加 上“+”、“-”字符，来指定相对于字号 初始值的增量或减量。 示例：字号大小效果
如有关于产品的信息、网上销售的信息以及其
他服务（如技术支持、公司新闻动态、论坛系 统），特别是网站的管理系统，一般而言都是 采用动态页面的形式。
浏览器
请求 请求
<html> <code> </html>
网络服务器
<html> <p>h1 </html>
应用服务器
简 单 动 态 页 面 的 处 理 流 程
播放音乐
浏览器可以播放音乐，标记为<EMBED>， 属性主要有以下几个： SCR指明所要播放的音乐文件地址。 AUTOSTART表示是否自动播放。 LOOP表示是否循环播放。 示例： 播放音乐效果
播放视频
用浏览器可以播放的视频格式有MAV格式 和AVI格式。与音乐的播放一样，可以使用 EMBED标记播放视频。 例如： <EMBED SCR=“shipin.avi” autostart=false loop=false widthቤተ መጻሕፍቲ ባይዱ350 height=250>
静 态 页 面 的 处 理 流 程
1.
2.
3.
静态页面的处理流程 浏览器发出对静态页面的请求； Web服务器寻找该页面； Web服务器将该页面返回给浏览器。
动态网页：由数据库和相应的应用程序构 成，包含需要频繁更新的数据。由于其页 面中包含的内容是来自数据库的，因此， 可根据用户的不同选择返回不同的页面。
标记属性
许多单标记和双标记的始标记内可以包含 一些属性。其语法如下： <标记名字 属性1 属性2 属性3„„> 各属性之间无先后次序，属性也可省略。 如单标记<HR>表示在文档当前位置画一条 线。 示例：最基本的超文本文档
<HTML> 和</HTML>双标记
<HTML>标记说明该文件是用HTML来描述 的，它是文件的开头，而<／HTML>则表 示该文件的结尾。
<html> <p>h1 </html>
应用服务器
询问 记录集
复 杂 动 态 页 面 的 处 理 流 程
数据库驱动程序
数据库
1. 2. 3. 4.
复杂动态页面处理流程 浏览器发出对动态页面的请求； Web服务器找到该页面，传给应用服务器； 应用服务器扫描页面，执行代码； 遇外部资源访问代码，应用服务器发送资 源访问命令给资源服务器；