1、第七章 网页制作,本章要点,WWW技术及网页设计工具HTML语言Dreamweaver MX的使用,WWW技术及网页设计工具,静态网页技术所谓静态是指网页的内容是事先设计好的，不会根据实际情况发生变化HTML语言（HpyerText Markup Language，超文本标记语言） 文件扩展名：.htm 或 .html制作工具 Microsoft FrontPage Macromedia Dreamweaver（网页设计三剑客之一）,WWW技术及网页设计工具,动态网页技术网页的内容不再是固定不变的，而会根据实际情况发生动态变化网页里的内容很大一部分是访问数据库得到的，用户输入的信息也将被保存到
2、数据库中与用户的交互性大大加强分类 Server端动态网页技术 Client端动态网页技术,WWW技术及网页设计工具,Server端动态网页技术Web服务器不只是简单地将用户请求的文件发送给Client端，而是先执行相应的脚本程序（Script），通常执行的结果为HTML格式，然后将执行结果返回给浏览器进行显示用户能够看到的只是HTML文件，而看不到脚本程序的源代码,WWW技术及网页设计工具,Server端动态网页技术 CGI（Common Gateway Interface，通用网关接口） 脚本程序文件扩展名：.cgi 通常使用Perl语言 典型应用实例：检查用户身份,WWW技术及网页设计工
3、具,Server端动态网页技术在HTML代码中嵌入脚本程序代码段，Web服务器同样先将脚本程序代码段执行，转变为HTML代码后，返回给浏览器显示ASP（Active Server Pages ，动态服务器主页），由Microsoft公司推出，以Visual Basic为脚本语言，文件扩展名为.aspPHP，采用了类似于C语言的脚本语言，扩展名为.phpJSP（Java Server Pages），以Java为脚本语言，扩展名为.jsp,WWW技术及网页设计工具,Server端动态网页技术开发工具Visual InterDev（CGI/ASP） V ASP.netDreamweaver Ultr
4、aDev （CGI/ASP/PHP/JSP）Dreamweaver （CGI/ASP/PHP/JSP）文本编辑器：UltraEdit,WWW技术及网页设计工具,Client端动态网页技术 JavaScript Plug-in（各类插件） 媒体工具类 Adobe Photoshop / Macromedia Fireworks Macromedia Flash Java语言 可移植性强，可以在不改动源程序的前提下让应用程序运行于不同的操作系统平台上，适用于网络环境,HTML语言,什么是HTML语言HTML （Hyper-Text Markup Language）超文本标记语言是由W3C万维网协议
5、组织颁布的一种描述文件结构的标识语言，主要用于编写万维网中的超文本主页文件WWW网上最基本的传输单位是Web页面，它们都是用HTML语言来编写的HTML是一种解释性语言，通过在Web主页文本中加入控制标签，然后由Web浏览器对各种标签进行解释，并在浏览器窗口中实现需要的显示的效果通常HTML文件的扩展名为“.htm”或“.html”,HTML语言的发展：80年代末在SGML的基础上产生1994年，W3C（World Wide Web Consortium）组织对HTML进行了标准化工作自1990年问世以来，已发行4个版本：HTML 1.0、HTML 2.0、HTML 3.0、HTML 4.0H
6、TML标准的网站：http:/www.w3c.org/pub/www,HTML语言,HTML文件的基本结构网页示例一个简单的网页示例。,HTML语言,HTML程序的特点HTML程序由一系列的标签（标记）组成HTML程序可以分为头部（Head）和主体 （Body）在HTML程序的Head部分中，主要包含了整个页面的信息，其内容通常不会作为实际的网页内容显示出来,HTML语言,HTML程序的特点浏览器（Browser）负责对HTML程序进行解释执行，并将结果显示出来不同的浏览器对同一HTML程序的解释会略有差别，显示的结果略有不同可以方便地在HTML程序中加入如JavaScript等语句,HTML
7、语言,典型的HTML页面的访问过程,浏览器 Client,WWW Server,发出访问某个页面的请求,返回该页面的HTML程序,请求发送页面中包含的其他文件（如图片）,返回相关的文件,HTML语言,页面头部（Head）中的主要标签和：页面的标题（不超过60个字符）：嵌入其他附加信息，如字符集、HTML页面编辑器及其版本等,HTML语言,页面主体（Body）中的主要标签 文字分割标签： 分段标签： 换行标签： 文字属性标签： 可以带有字体、字号、颜色等参数 表格标签：、,HTML语言,页面主题（Body）中的主要标签图片标签： 带有图片的文件名、图片大小、对齐方式等参数超级链接标签：链接文字
8、如华东师范大学，表示一个以文字“华东师范大学”作为超级链接，该超级链接的目标地址为http:/电子版学习教程http:/ weaver MX的使用,Dreamweaver的操作界面 网页编辑器 “插入”面板 “属性”面板 其它控制面板 “时间轴”面板 “HTML样式”、“CSS样式”、行为面板 “历史记录”、“框架”和“层”面板 “窗口”菜单可以控制各个面板的显示和隐藏 “查看|标尺”， “查看|网格” 菜单可以控制标尺和网格的显示和隐藏 状态栏,Dream weaver MX的使用,Dreamweaver的操作界面 站点管理器 “站点|站点地图”或“窗口|站点”菜单，打开站点管理器 站点管理
9、器窗口左侧显示站点地图，右侧显示当前网站中的文件列表 网页设计初步 建立本地站点 创建用作本地站点的文件夹 选择“站点|新建站点”菜单，并根据提示进行设置 设置页面属性 页面属性包括页面标题、背景图像、背景颜色、普通文本颜色、链接文本颜色以及边界宽度等 新建页面后，选择“修改|页面属性”菜单,Dream weaver MX的使用,练习 练习设置页面属性 创建如图所示的本地站点,Dream weaver MX的使用,设计网页 应用文字 文字的格式包括字体、字号、颜色、粗体、斜体、段落对齐、添加项目符号及编号等 手工设置文字格式 选中需设置格式的文字 通过“属性”面板进行设置 使用文本换行符 当按
10、回车换段时，两段之间的距离较远，要是两段文字之间的距离和正常行距一样，需要插入“换行符” 选择“文本”面板“字符”按钮中的“换行符”，可以在指定位置上加入一个行中断符,Dream weaver MX的使用,在网页中插入水平线、日期对象及图片 使用水平线 使用一条或多条水平线以可视化方式分隔文本和对象 “插入”面板的“HTML”选项卡中单击水平线按钮 可以利用“属性”面板设置水平线的宽度、高度、对齐方式以及是否设置阴影等属性 插入日期对象 插入日期对象可使用户以任何格式在网页中插入当前日期，并可以选择在每次保存文件时都自动更新该日期 “常用”面板中的“日期”按钮 选中“储存时自动更新”复选框,D
11、ream weaver MX的使用,在网页中插入水平线、日期对象及图片 插入图片对象 在网页中可使用的图片格式有JPG、GIF、PNG 图片文件必须位于当前站点中 把光标移到需要插入图片的位置，选择“插入|图像”菜单或常用面板中的图像按钮 图片对象的主要属性 链接与导航 超链接类型 内部链接：链接到本站的其他文档 外部链接：链接到本站以外的文档 E_mail链接：打开E_mail表单 链接到特定的“书签”：跳转到同一页或其他页的特定区域,Dream weaver MX的使用,链接与导航 绝对路径与相对路径 绝对路径：提供链接文档的完整URL 文档相对路径：用于本地链接时最常使用的链接设置方式
12、根相对路径：该路径为从站点根文件夹到文档的路径 创建通用链接的方法和步骤 使用站点地图来查看、创建、修改及删除链接 使用“修改|创建链接”菜单来制作到某个文件的链接 使用“属性”面板中的“链接”编辑框 使用快捷菜单，然后从中选择“创建链接”选项,Dream weaver MX的使用,链接与导航 链接到文档中命名位置的方法 设置命名位置（书签或锚） 创建到该位置的链接 创建E_mail链接 创建后，当浏览者单击该链接时，系统将自动启动其计算机中的邮件发送程序（Outlook Express） 选择准备作为邮件链接的文字或图片 选择“插入|电子邮件链接”，或在“插入”面板的“常用”选想卡中单击电子
13、邮件链接按钮,Dream weaver MX的使用,链接与导航 使用导航条 导航条由一个或多个图像组成，其显示根据用户的动作而改变 插入导航条：“插入|图像对象|导航条”菜单，打开导航条的配置窗口 编辑导航条：“修改|导航条” 使用表格 表格是在网页中添加数据与图片的强大工具 在网页中插入表格 格式化表格 设置表格属性 设置单元格属性及单元格的合并和拆分 单元格的剪切、复制、粘贴与清除,Dream weaver MX的使用,使用层 层提供了精确定位页面元素的方法 创建层和嵌套层 利用“布局”面板将页面切换到“标准视图”模式 在“布局”面板中选择“描绘层”按钮，并在页面中拖曳即可创建层 用户也可
14、在某个位置单击定位插入点，然后选择“插入|布局对象|层”菜单来创建层 创建层后，可选择“插入|图像”菜单在层中插入一图像，或直接在层中单击，输入文本 嵌套层是指包含在其他层中的层。使用嵌套层的好处是确保该层能永远位于其父层的上方,Dream weaver MX的使用,使用层 使用层控制面板和属性面板 选择“窗口|层”菜单，即可显示或隐藏“层”控制面板 “层”控制面板可以完成的任务 显示和隐藏层 修改层名 修改层的层次属性值 设置在创建层时禁止各层重叠 在属性面板中设置层属性 激活、选择、移动、对齐层和调整层尺寸 层与表的相互转换 “修改|转换”菜单,Dream weaver MX的使用,使用框
15、架 框架适合制作区域划分明确的网页 框架由两部分组成、即框架页与框架 框架页在文档中定义了框架的结构、数量、尺寸及装入框架的页面文件 创建框架页及框架的删除 单击“新建|框架集”菜单，并选择框架集的样式 通过“布局”面板的框架按钮，可以在某个页面中插入框架 删除框架，只需将框架分割线拖至与其父框架页边线重合即可 选择与设置框架页及框架 选择框架最好的方法是使用“框架”控制面板 通过属性面板设置框架属性,Dream weaver MX的使用,使用框架 框架内容的更新 当用户将某些文字或图片设置超级链接后，可在属性面板的链接编辑框中设置链接网页，而在“目标”下拉列表中选择在何处显示网页 “目标”下
16、拉列表中选项的含义 _blank：将链接网页显示在新窗口中 _parent：将链接网页显示在当前框架的父框架页中 _self：将链接网页显示在当前框架中 _top：将链接网页显示在当前框架的最高层框架页中，即取代所有的框架 框架的保存 保存框架页文档 保存框架文档 保存全部文档,Dream weaver MX的使用,使用表单 表单可以实现与用户的交流 建立表单 执行“插入|表单|表单”命令，或选择“插入”面板“表单”类别，单击“表单”按钮 表单属性 表单控件 插入一个表格 文字字段 复选框 单选按钮 滚动列表 跳转菜单 按钮 隐藏域 文件域,Dream weaver MX的使用,使用CSS C
17、SS（Cascading Style Sheets, 层叠样式单），利用它可自动格式化文本及页面 CSS的好处：利用它不仅可控制传统的格式属性，还可设置诸如位置、特殊位置、鼠标滑过等HTML属性，并且通过修改样式表，还可自动快速更新所有采用该样式的文字格式 新建CSS 选择“窗口|CSS样式”菜单，打开CSS样式面板 新建和编辑CSS样式 链接或导入外部样式单,Dream weaver MX的使用,设计动态网页 在页面中使用鼠标经过图片 鼠标经过图片对象的特点是，当浏览者将鼠标经过该图片时，图片内容将会自动更新 插入鼠标经过图像对象 使用图片影像 利用图片影像可将图片划分为若干区域，这些区域被
18、称为“热点” 创建客户端图片影像,Dream weaver MX的使用,使用行为 行为是Dreamweaver中重要的一个部分，通过行为可以在网页上制作出一些简单的交互效果。 运用行为：以鼠标移动到图片上时显示相应说明文字的例子来学习行为的应用 在页面上插入一个层，输入相应文字 选择“窗口|层”打开层控制面板，将层设置为不可见 单击选中图片，选择“窗口|行为”菜单，打开行为控制面板，添加“显示-隐藏层”行为 鼠标离开图片时应关闭显示的层，因此，还必须为图片添加该行为,Dream weaver MX的使用,使用行为 行为实际上是事件与动作的联合 事件用于指明执行某项动作的条件，如鼠标移到对象上方、离开对象、单击对象等 动作实际上是一段执行特定任务预先写好的JavaScript代码，如打开窗口、播放声音、停止电影等 行为面板用于设置和编辑行为 主要事件 主要动作,
