9章网页制作医学计算机与信息技术应用基础-课件_第1页
9章网页制作医学计算机与信息技术应用基础-课件_第2页
9章网页制作医学计算机与信息技术应用基础-课件_第3页
9章网页制作医学计算机与信息技术应用基础-课件_第4页
9章网页制作医学计算机与信息技术应用基础-课件_第5页
已阅读5页,还剩143页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第9章网页制作.*第9章网页制作.*21世纪医学人才的培养,要紧跟我国卫生信息化建设对医学人才的实际需求,将医信技能的综合应用水平作为当前医学人才的核心能力与培养目标。通过网络进行医学信息检索、并在INTERNET上设计自己的网站,将自己在医学、生命科学领域中研究和应用的成果与大家交流,是当代医药高校大学生必须具备的基本素质与能力。通过本章学习,使学生有能力在今后学习与生活中进行网站设计与网页制作工作,掌握网页设计的要点和应用基础,将本书前面各章作品综合运用到网页中,真正达到学为所用,在医学专业实际应用中夯实自己的IT知识与技能。本章教学思想与教学目标.*21世纪医学人才的培养,要紧跟我国卫生信息化建设学生网页作品93期七年制4班学生综合能力浏览

93期七年制1班学生综合能力浏览93期七年制9班学生综合能力浏览93期七年制10班学生综合能力浏览.*学生网页作品93期七年制4班学生综合能力浏览本章要点9.1节9.2节9.3节9.4节9.5节要点总结

网站设计过程,DREAMWEAVER软件的使用方法,动态网站设计过程。了解使用DREAMWEAVER软件中的框架、行为、时间线等制作网页的方法。掌握

网页设计与制作。使用DREAMWEAVER软件在网页中添加文本、图像,创建链接、图层和表格方法。熟练掌握.*本章要点9.1节9.2节9.3节9.4节9.5节要点总课程导航9.4Dreamweaver概述9.19.29.3网站建立与编辑9.5综合实例网站制作技巧搭建网站数据库平台9.1节9.2节9.3节9.4节9.5节要点总结.*课程导航9.4Dreamweaver概述9.19.299.1Dreamweaver概述9.1.1目9.1.2目9.1.3目

Dreamweaver是Macromedia公司推出的专业网站设计和网页制作软件。使用Dreamweaver软件可以制作各种需求的网站和网页,例如:制作现今比较流行的个人博客、制作用于教学和师生交流的教学网站以及便于医学信息交流和医学常识介绍的医学网站。这一节,我们将介绍Dreamweaver8的安装、启动、窗口布局和网页编辑视图。返回本章.*9.1Dreamweaver概述9.1.1目9.1.2目9.*.*.*.*9.1.1目9.1.2目9.1.3目9.1.1安装启动Dreamweaver2、启动方法第一种方法:在[开始]\[程序]菜单中启动。第二种方法:右击需要编辑的网页文件(HTML),在弹出的快捷菜单中选择“使用Dreamweaver编辑”

Dreamweaver的启动界面9.1.1安装启动Dreamweaver返回本节.*9.1.1目9.1.2目9.1.3目9.1.1安装启动Dre9.1.1目9.1.2目9.1.3目9.1.1安装启动Dreamweaver3、选择工作区

Dreamweaver8的工作区布局包括设计器和编码器两种,在【工作区设置】对话框中单击相应的单选按钮即可选择该工作区。

设计器方式适合用户的主要工作是使用Dreamweaver中的可视化工具制作网页编辑器方式是针对代码编写者的习惯进行设计的,方便了程序员的工作。9.1.1安装启动Dreamweaver返回本节.*9.1.1目9.1.2目9.1.3目9.1.1安装启动Dre9.1.2窗口布局9.1.1目9.1.2目9.1.3目9.1.2窗口布局返回本节.*9.1.2窗口布局9.1.1目9.1.2目9.1.3目9.1标题栏:位于Dreamweaver8界面最上部,其中显示程序名称和当前编辑的文件名称。最左侧为控制按钮;最右侧为最小化、最大化/还原和关闭按钮。菜单栏:包括10个菜单项,使用这些菜单命令基本上可以实现程序的所有功能。工具栏:包括【插入】、【样式呈现】、【文档】和【标准】4个工具栏,可通过选择【查看】|【工具栏】子菜单中的相应命令来显示或隐藏它们。文档窗口:用于显示当前创建或编辑的文档,有【代码】、【设计】和【拆分】3种视图模式。状态栏:用于显示当前编辑的文档的状态。属性检查器:用于查看和更改当前选定文本或其他对象的属性。控制面板:主要包括【CSS】、【应用程序】、【标签检查器】、【文件】、【框架】、【历史记录】、【结果】、【时间轴】8个面板组。9.1.1目9.1.2目9.1.3目9.1.2窗口布局返回本节.*标题栏:位于Dreamweaver8界面最上部,其中显示程9.1.1目9.1.2目9.1.3目9.1.3网页编辑视图(3种)可视化视图在这种视图下看到的网页外观和浏览器中看到的基本一样,通常Dreamweaver默认为可视化视图。网页编辑视图工具栏可视化视图拆分视图源代码视图9.1.3网页编辑视图返回本节.*9.1.1目9.1.2目9.1.3目9.1.3网页编辑视图(9.1.1目9.1.2目9.1.3目9.1.3网页编辑视图(3种)源代码视图如果想查看或编辑源代码,可以单击工具栏上的“代码”按钮进入源代码视图。源代码视图9.1.3网页编辑视图返回本节.*9.1.1目9.1.2目9.1.3目9.1.3网页编辑视图(9.1.1目9.1.2目9.1.3目9.1.3网页编辑视图(3种)拆分视图在这种视图下编辑窗口被分割成上下两部分,上面显示源代码,下面显示可视化编辑窗口。拆分视图9.1.3网页编辑视图返回本节.*9.1.1目9.1.2目9.1.3目9.1.3网页编辑视图(9.2网站建立与编辑在访问互联网时,我们通常见到的网页都是依托在某个Web站点里的。在设计网页之前首先要创建一个Web站点,然后才能制作基于Web站点的网页。本节将介绍如何创建一个新的完整Web站点

9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

.*9.2网站建立与编辑在访问互联网时,我们9.2网站建立过程建立新站点9.2.19.2.2编辑文本与图像9.2.3创建超链接、锚点链接和E-mail链接9.2.4创建表格9.2.6创建框架结构9.2.5使用图层9.2.7创建表单9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*9.2网站建立过程建立新站点9.2.19.2.2编辑文本与基本方式在【管理站点】对话框中单击【新建】按钮,从弹出菜单中选择【站点】命令,弹出【站点定义为】对话框,在【基本】选项卡中进行设置。9.2.1建立新站点【站点定义为】对话框的【基本】选项卡9.2.1建立新站点9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*基本方式9.2.1建立新站点【站点定义为】对话框的【基本】选

高级方式在【站点定义为】对话框中单击【高级】标签,切换到【高级】选项卡,可进行自定义的站点设置。【站点定义为】对话框的【高级】选项卡9.2.1建立新站点9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*【站点定义为】对话框的【高级】选项卡9.2.1建立新站创建站点目录结构(在“文件”面板中进行)创建一级目录在站点根目录上单击鼠标右键,在弹出的快捷菜单中选择“新建文件夹”。“新建文件夹”命令9.2.1建立新站点9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建站点目录结构(在“文件”面板中进行)“新建文件夹”命令9创建站点目录结构(在“文件”面板中进行)创建二级目录在一级目录上单击鼠标右键,在弹出的快捷菜单中选择“新建文件夹”。创建二级目录示意图9.2.1建立新站点9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建站点目录结构(在“文件”面板中进行)创建二级目录示意图9创建站点目录结构(在“文件”面板中进行)新建网页选择【文件】|【新建】命令,弹出【新建文档】对话框,在【常规】选项卡中的【类别】列表框中选择【CSS样式表】、【框架集】、【页面设计(CSS)】、【页面设计】或【页面设计(有辅助功能的)】选项,然后从右侧的列表框中选择一个设计文件(文件类型随所选网页类别而异),再单击【创建】按钮,即可在文档窗口中打开一个相应的文档副本。【新建文档】对话框9.2.1建立新站点9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建站点目录结构(在“文件”面板中进行)选择【文件】|【新建创建站点目录结构(在“文件”面板中进行)文件和文件夹的移动、复制、删除和重命名选中要进行操作的文件或文件夹,单击鼠标右键,在弹出的快捷菜单中选择“编辑”。“编辑”命令对话框9.2.1建立新站点9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建站点目录结构(在“文件”面板中进行)“编辑”命令对话框99.2.2编辑文本和图像文本和图像是构成网页的基本元素,本节主要讲解有关文本的基本操作,文本属性面板的使用,以及如何添加水平分隔线和如何插入图像。通过这些基本的操作,我们可以了解网页设计的基本操作和版面设计。

9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

.*9.2.2编辑文本和图像文本和图像是构成网页的基本文本的操作1、插入普通文本(2种方法)在文档窗口中输入文本。也就是先选择要插入文本的位置,然后直接输入文本。复制在其他编辑器中已经生成的文本。

网页中的文本网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*文本的操作网页中的文本网页9.2.2编辑文本和图像9.2文本的操作2、插入特殊符号(键盘不能直接输入的字符)(1)在文档中,将插入点放置在需要插入特殊字符的位置。(2)选择【窗口】|【插入】命令,打开【插入】工具栏,单击工具栏上【文本】选项卡,如图所示,从中选择某一标记按钮,或者选择【插入】|【HTML】|【特殊字符】命令,然后从子菜单中选中要插入字符的名称。网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*文本的操作网页9.2.2编辑文本和图像9.2.7目9.2.文本的操作3、插入换行符(1)在文本中按回车键强制文本换行,这时会注意到分成两行的文字的间距比较大,这样的换行称为段落换行。(2)在段落的某处进行强制换行,但又不希望间距过大,就可以使用换行符来完成换行,这样的换行称为段内换行。按Shift+Enter组合键可以实现段内换行,即插入换行符。网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*文本的操作网页9.2.2编辑文本和图像9.2.7目9.2.文本的操作4、插入日期(1)在文档窗口中,将插入点放置到要插入日期的位置。(2)选择【插入】|【日期】命令,或者单击“插入”工具栏上的“常用”面板上的【插入日期】按钮。(3)在弹出的“插入日期”对话框中,选择日期和时间格式。(4)如果希望插入的日期和时间在每次保存文档时都能自动更新,那么就选中【储存时自动更新】复选框。如果只是将插入的日期当作普通文本,那么就取消选择该复选框。(5)单击【确定】按钮,即可在文档中插入日期。网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*文本的操作网页9.2.2编辑文本和图像9.2.7目9.2.【插入日期】对话框网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*【插入日期】对话框网页9.2.2编辑文本和图像9.2.7目文本属性面板打开方式有两种:按快捷键Ctrl+F3,选择【窗口】|【属性】命令

文本属性面板网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*文本属性面板文本属性面板网页9.2.2编辑文本和图像9.添加水平分割线(1)在文档中,将插入点放置到要插入水平线的位置。(2)选择【插入】|【HTML】|【水平线】命令,或者单击“插入”工具栏上的HTML选项卡上的【水平线】按钮。(3)插入了水平分隔线,选中该水平线,可以在属性面板上根据需要修改其属性。水平分割线网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*添加水平分割线水平分割线网页9.2.2编辑文本和图像9.插入图像1、插入图像(1)将光标置入要插入图像的位置。(2)选择【插入】|【图像】命令;或者单击“插入”工具栏上的“常用”面板,选择【插入图像】按钮;也可以用鼠标把该图像按钮拖到需要插入图像的位置。注意:无论采用上述哪种方法插入图像,相应地图像文件必须位于当前站点之内。如果不在,Dreamweaver8会询问是否要把该文件复制到当前站点内的文件夹中。网页中的图片网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*插入图像注意:无论采用上述哪种方法插入图像,相应地图像文件必插入图像2、设置图像属性在属性面板中可以查看和修改图像的属性。

“图像属性”面板网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*插入图像“图像属性”面板网页9.2.2编辑文本和图像9.插入图像3、图像与文本的对齐方式在Dreamweaver中,插入的图像被视为一般字符。通过设置该图像相对于同一段落或行中的其他元素的对齐方式可以调整图像与其他对象之间的关系。选择所需图像后,可在图像属性面板中的【对齐】下拉列表框中选择要使用的垂直对齐方式。网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*插入图像网页9.2.2编辑文本和图像9.2.7目9.2.59.2.3创建超级链接、锚点链接和E-mail链接在浏览网页时,我们通常可以发现可以某个网页打开其它网页或文件,这些功能都是通过各种链接实现的。本节将重点介绍如何创建超级链接,超级链接使得网络上的信息有机的联系在一起。同时我们还将介绍锚点链接和E-mail链接。

9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

.*9.2.3创建超级链接、锚点链接和E-mail链接创建超级链接(1)选择窗口中的文本或其他对象。

(2)单击“链接”下拉列表框右侧的文件夹图标,浏览并选择一个文件,

(3)选择被链接文档的载入位置。在默认情况下,被链接文档打开在当前窗口或框架中。要使被链接的文档显示在其他窗口或框架内,需要从“属性”面板的“目标”下拉列表上选择一个选项。键入的地址链接网页请点击9.2.3创建超级链接、锚点链接和E-mail链接9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建超级链接键入的地址链接网页9.2.3创建超级链接、锚点创建锚点链接锚点常常被用来跳转到特定的主题或文档的顶部,便访问者能够快速测览到选定的位置,加快信息检索速度。

(1)插入锚点:选择“插入”|“命名锚点”命令。(2)链接到锚点:在文档窗口中选择要建立锚点链接的文本或图像。在“属性”面板的“链接”下拉列表框中输入一个号码符号(#)和锚点名。例如,要链接到当前文档中称为top的锚点,输入:#top。锚点链接网页请点击9.2.3创建超级链接、锚点链接和E-mail链接9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建锚点链接锚点链接网页9.2.3创建超级链接、锚点链接和创建E-mail链接(1)把光标置于文档窗口希望显示电子邮件链接的地方,或选定希望显示为电子邮件链接的文本,然后执行以下操作之一。选择【插入】|【电子邮件链接】命令。或者在“插入”工具栏的“常用”面板上单击【插入电子邮件链接】按钮。(2)在“电子邮件链接”对话框的“文本”文本框中输入或编辑作为电子邮件链接显示在文档中的文本,在“电子邮件”文本框中输入邮件应该送达的电子邮件地址。(3)在文档窗口选择文本或图像,在“属性”面板上的“链接”下拉列表框中输入“mailto:”和电子邮件地址。网页请点击9.2.3创建超级链接、锚点链接和E-mail链接9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建E-mail链接网页9.2.3创建超级链接、锚点链接和9.2.4创建表格在网页中,体现各种数据比较情况最好的体现形式是表格,同时想清晰的放置文本、图像等元素,也可以使用表格来指定它们的具体位置。本节我们将介绍如何插入表格、设置表格属性、表格的常规操作等。以便在网页中设计多种多样的表格,也可以通过表格来设计窗体元素的位置。9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

.*9.2.4创建表格在网页中,体现各种数据比较情况最插入表格(3种方法)单击“插入”工具栏上的“常用”面板上的【表格】按钮。选择【插入】菜单中的【表格】命令。“插入”工具栏上的“常用”面板上的【表格】按钮从“常用”面板拖到页面上所需位置。表格网页请点击9.2.4创建表格9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*插入表格(3种方法)表格网页9.2.4创建表格9.2.7目设置表格属性表格通过属性面板设置它的属性实现的。1.设置整个表格属性:选择整个表格。2.设置单元格属性:选择单个单元格或单元格的任意组合。

“表格属性”面板网页请点击9.2.4创建表格9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*设置表格属性“表格属性”面板网页9.2.4创建表格9.2表格操作对表格经常需要编辑、修改、删除等操作,尤其是用表格对整个页面进行布局时更是如此。打开【修改】|【表格】命令,然后在级联菜单中选择相应的命令,可以实现大多数表格操作。表格菜单网页请点击9.2.4创建表格9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*表格操作表格菜单网页9.2.4创建表格9.2.7目9.2.9.2.5使用图层层(Layer)是网页内容的一种容器。与表格一样,也有网页元素定位功能。层的最主要特点就是它能够在网页上任意浮动,可以实现层对网页内容的精确定位。层可以重叠,可以显示和隐藏,利用程序可以控制层的显示和隐藏,实现层内容的动态交替显示等特殊效果。本节具体介绍层的使用方法。9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

.*9.2.5使用图层层(Layer)是网页内容的一种层的基本操作1、插入层(1)将光标放置在要插入层的位置,选择【插入】|【布局对象】|【层】命令。(2)就可在文档窗口插入一个空的预设置大小的层。网页请点击9.2.5使用图层9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*层的基本操作网页9.2.5使用图层9.2.7目9.2.5目层的基本操作2、绘制层(1)鼠标单击“插入”工具栏上的【布局】面板,单击【描绘层】按钮。(2)将鼠标移动到文档窗口,这时鼠标指针变为十字形状。(3)在文档窗口中希望放置层的位置上按下鼠标左键,拖动鼠标到希望大小后释放鼠标,一个新层就被创建。注意:同时绘制多个层,可按住Ctrl键的同时,单击“布局”面板上的【描绘层】按钮。网页请点击9.2.5使用图层9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*层的基本操作网页9.2.5使用图层9.2.7目9.2.5目层的基本操作3、激活层把鼠标光标移至层内任何地方单击,即可激活层。

被激活的层网页请点击9.2.5使用图层9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*层的基本操作被激活的层网页9.2.5使用图层9.2.7目9设置层的属性通过层的属性面板设置层的属性。

“层属性”面板网页请点击9.2.5使用图层9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*设置层的属性“层属性”面板网页9.2.5使用图层9.2.使用“层”面板1、显示“层”面板选择【窗口】|【层】命令或是按F2键。2、改变层名称选中层,在“属性”面板的“层编号”文本框中可以输入或修改层名称。3.设置层的可见性选择要改变可见性的层所在行,单击眼睛图标列,直至设置为想要的可见性。睁开的眼睛表示层可见;闭上的眼睛表示层不可见。

“层”面板层可见性层编号网页请点击9.2.5使用图层9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*使用“层”面板“层”面板层可见性层编号网页9.2.5使用9.2.6创建框架结构登陆网站浏览网页时,用户经常会遇到这样的情形,浏览器窗口被分隔成了几个不同的浏览区域,每个区域中显示着不同的文档内容,这就是利用了框架。本节我们将介绍框架的使用,如何创建和删除框架,如何设置框架和框架集的属性等。有了框架,我们对网页的版面设计就更加得心应手。9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

.*9.2.6创建框架结构登陆网站浏览网页时,用户经常框架概述登陆网站浏览网页时,用户经常会遇到这样的情形,浏览器窗口被分隔成了几个不同的浏览区域,每个区域中显示着不同的文档内容,这就是利用了框架。一般来说,框架技术主要通过两种类型的元素来实现,框架集和框架。框架就是在框架集中用来组织和显示网页文档的页面元素。框架集就是框架的集合。框架网页请点击9.2.6创建框架结构9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*框架概述框架网页9.2.6创建框架结构9.2.7目9.2创建、删除框架

1、创建框架(1)用鼠标拖动文档窗口四周显示的框架边框,将其拖动到希望的位置上,释放鼠标,即可构建框架。(2)如果用鼠标拖动的是框架的边框角,则可以在左右和上下两个方向上同时分割框架,同样,拖动的边框和方向不同,原有的内容最后所位于的框架也不同。(3)继续拖动各框架边框(包括最初出现在文档窗口四周的边框,以及生成框架后各框架的边框),可以继续构建框架。网页请点击9.2.6创建框架结构9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建、删除框架网页9.2.6创建框架结构9.2.7目9.2创建、删除框架

2、删除框架如果希望删除创建的框架,只需用鼠标拖动框架边框,将之拖离页面或拖动到父框架边框上即可。构建框架网页请点击9.2.6创建框架结构9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建、删除框架构网页9.2.6创建框架结构9.2.7目9.设置框架和框架集的属性

1、框架面板打开【窗口】|【框架】命令,或是按Shift+F2键,即可显示“框架”面板。框架面板网页请点击9.2.6创建框架结构9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*设置框架和框架集的属性框架面板网页9.2.6创建框架结构设置框架和框架集的属性

2、设置框架属性先选中框架,然后从“属性”面板中设置框架属性。

“框架属性”面板网页请点击9.2.6创建框架结构9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*设置框架和框架集的属性“框架属性”面板网页9.2.6创建9.2.7创建表单表单是Internet上用户同服务器进行信息交流最主要的工具。通过登录Web页收发E-mail邮件时,首先需要输入用户的账号和地址,这就是表单的一种具体应用。本节中我们将介绍如何创建表单、表单的属性以及如何添加表单对象。有了表单,可以帮助网站与用户进行信息交流。9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

.*9.2.7创建表单表单是Internet上表单概述表单是Internet上用户同服务器进行信息交流最主要的工具。通过登录Web页收发E-mail邮件时,首先需要输入用户的账号和地址,这就是表单的一种具体应用。用表单制作的留言簿网页请点击9.2.7创建表单9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*表单概述用表单制作的留言簿网页9.2.7创建表单9.2.创建表单

(1)把光标置于要插入表单的位置,然后选择【插入】|【表单】命令。(2)把光标置于要插入表单的位置,然后选择【窗口】|【插入】,接下来在调出的“插入”工具栏上选择“表单”面板,最后单击【表单】按钮。(3)把【表单】按钮拖到页面上需要插入表单的位置。注意:创建表单的时候,表单的区域是以虚线区域表示的。它的大小随着包含内容的多少自动调整,虚线不会在浏览器中显示出来。网页请点击9.2.7创建表单9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建表单注意:创建表单的时候,表单的区域是以表单属性

选中表单,打开“属性”面板,在“属性”面板中可以设置表单的属性。

“表单属性”面板网页请点击9.2.7创建表单9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*表单属性“表单属性”面板网页9.2.7创添加表单对象(2种方法)

将插入点放入表单中要放置控件的位置,选择【插入】|【表单对象】命令中的命令来插入表单对象。将插入点放入表单中要放置控件的位置,打开“插入”工具栏,激活“表单”选项卡,从该选项卡中选择对应的表单对象按钮。插入表单对象(点击查看常用表单对象)网页请点击9.2.7创建表单9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*添加表单对象(2种方法)插入表单对象(点击文本字段:文本字段可接受任何类型的文本、字母或数字,输入的文本可以显示为单行、多行和密码,默认为单行。隐藏域:设计者利用它存储信息(如表单主题),这些信息与用户无关,但却是应用程序在处理表单时所必需的。复选框:在工具栏中对应的图标按钮。复选框允许用户在一组选项中选择多项。单选按钮:在一组选项中一次只能选择一项。选择一组中的某个按钮,就会禁止选择该组中的所有其他按钮。图像域:在表单中插入图像。可以使用图像域替换【提交】按钮,以生成图形化按钮。按钮:在表单中插入文本按钮。按钮在单击时执行任务,如提交或重置表单。网页请点击9.2.7创建表单9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*文本字段:文本字段可接受任何类型的文本、字母或数字,输入的文9.3网站制作技巧我们在浏览网页时,可能会在网页上进行一些交互式的操作,例如:我们申请电子邮箱时,当输入完相关信息后,要进行确认和提交,而网页是通过Dreamweaver提供的行为来识别用户的这些交互操作的。本节我们将介绍行为、行为面板的使用、如何绑定行为等内容。有了行为,使网页更加生动,具有动态的感觉和交互的变化。9.3.1目9.3.2目返回本章

.*9.3网站制作技巧我们在浏览网页时,可能会行为概述9.3.19.3.2动态网页设计9.3网站制作技巧9.3.1目9.3.2目返回本章.*行为概述9.3.19.3.2动态网页设计9.3网站制作技巧行为概述一般来说,一个行为应该由一个事件(event)和一个动作(action)所组成。例如,当用户将鼠标移动到一幅图像上,这就产生了一个事件,如果这时候图像变化,则相应地就有一个动作被执行。事件通常由浏览器所定义,它可以被绑定到各种页面元素上,例如,大多数浏览器中,超级链接上都会发生onMouseOver、onMouseOut和onCLick这三种事件。动作通常由一段代码所组成,利用这段代码可以完成相应的任务,例如打开浏览器、播放音乐或视频等。将事件和动作组合起来,就构成了行为。Dreamweaver8提供大约20多个行为动作。9.3.1行为概述网页请点击9.3.1目9.3.2目返回本章.*行为概述9.3.1行为概述网页9.3.1目9.3.2目返回10.9.2

应用行为1、行为面板用户要编辑行为,给页面添加行为,就必须了解“行为”面板。选择【窗口】|【行为】命令,或者直接按Shfit+F3键,将打开“行为”面板。行为面板9.3.1行为概述网页请点击9.3.1目9.3.2目返回本章.*10.9.2应用行为行为面板9.3.1行为概述网页9.10.9.2

应用行为2、绑定行为(1)在文档窗口中,选中要绑定行为的对象。如果希望为整个文档绑定行为,可以在文档窗口状态栏左方的标记选择器上选中<body>标记。

(2)单击“行为”面板上的加号按钮,打开行为菜单,然后选择需要绑定的行为项。

(3)通常,选择了某个命令之后,会出现一个对话框,选中的选项不同,对话框也不同。设置对话框中的相应参数,单击【确定】按钮,页面或选定的页面元素就绑定了一个行为。

(4)这时在行为列表中会显示添加的事件己经对应的动作,如果默认的触发事件不是所需的事件,可以单击该事件项右方的箭头,打开事件菜单选择其他事件。9.3.1行为概述网页请点击9.3.1目9.3.2目返回本章.*10.9.2应用行为9.3.1行为概述网页9.3.1目9绑定行为9.3.1行为概述网页请点击9.3.1目9.3.2目返回本章.*绑定行为9.3.1行为概述网页9.3.1目9.3.2目返10.9.2

应用行为3.修改已添加的行为用户可以修改已添加的行为,使之更加符合设计要求。选中包含要修改行为的对象,在“行为”面板选中要修改的行为,双击该行为,这时会打开该行为对应的对话框,重新设置行为参数,单击【确定】按钮,行为就被修改了。

4.Dreamweaver8的内置行为Dreamweaver8的内置行为是经过精心编写的,如果能够好好利用,就能够创建出绚丽多彩的网页。Dreamweaver8提供了很多内置行为,这些行为基本上可以满足普通用户的需求。单击“行为”面板上的加号按钮,就可打开行为菜单。9.3.1行为概述网页请点击9.3.1目9.3.2目返回本章.*10.9.2应用行为9.3.1行为概述网页9.3.1目910.9.2

应用行为5.设置适用事件的浏览器不同版本的浏览器,它所支持的事件类型也不尽相同。因此在页面中应用行为之前,应该先确定浏览网页的人会使用哪些浏览器。设置方法如下。

(1)单击“行为”面板上的按钮,打开行为菜单。选择“显示事件”选项,这时会在如图所示的菜单中看到相应的浏览器类型。

(2)选中相应的浏览项。9.3.1行为概述网页请点击9.3.1目9.3.2目返回本章.*10.9.2应用行为9.3.1行为概述网页9.3.1目9显示事件菜单9.3.1行为概述网页请点击9.3.1目9.3.2目返回本章.*显示事件菜单9.3.1行为概述网页9.3.1目9.3.2目9.3.2动态网页设计

下面通过几个网页设计实例介绍动态网页设计技巧,做出更加生动实用的网页,使网页更加生动,具有动态交互的感觉。例9-5制作弹出的消息框。例9-6制作交替出现图片的广告动画。例9-7制作任意移动的广告动画。如图所示。网页请点击9.3.1目9.3.2目返回本章.*9.3.2动态网页设计下面通过几个网页设计实例介绍动态9.4搭建网站数据库平台搭建交互网站时,配置计算机的系统环境很重要。需要安装IIS服务、设计Access数据库、创建DSN以及定义数据库连接等。操作过程如下:安装因特网信息服务器IIS建立Access数据库9.1节9.2节9.3节9.4节9.5节要点总结.*9.4搭建网站数据库平台搭建交互网站时,配置计算机的系统环创建系统数据源DSN:数据库建立好之后,要设定系统的DSN(数据来源名称),来确定数据库所在的位置以及数据库相关的属性。使用DSN的优点是:如果移动数据库档案的位置,或是使用其他类型的数据库,只要重新设定DSN即可,不需要去修改原来使用的程序。定义数据库连接:这里要定义交互网站使用的数据库连接,只有定义了数据库连接,网站中的网页才能使用数据库中的信息。前面我们已经设定好系统DSN了,这里只要将数据库连接指定为前面所设的系统DSN即可。9.4搭建网站数据库平台9.1节9.2节9.3节9.4节9.5节要点总结.*创建系统数据源DSN:数据库建立好之后,要设定系统的DSN(9.5综合实例---“中药百草园”

本实例建立的是以中草药为主题的小型药材网站,共建立了三级网页结构。(p359)

中药百草园网站首页网页请点击9.1节9.2节9.3节9.4节9.5节要点总结

.*9.5综合实例---“中药百草园”本实例建立的是以中草药本章小结总结作为设计网页,其最主要基础是网页设计软件的操作与技术应用,本章中我们介绍网页制作软件Dreamweaver8的操作、应用和功能。主要使同学能初步了解和掌握网页设计的要点和应用基础,通过具体的实例,能够举一反三,如果在实际使用中遇到困难,也可以通过软件中的帮助进行解决。9.1节9.2节9.3节9.4节9.5节要点总结.*本章小结总结作为设计网页,其最主第9章网页制作.*第9章网页制作.*21世纪医学人才的培养,要紧跟我国卫生信息化建设对医学人才的实际需求,将医信技能的综合应用水平作为当前医学人才的核心能力与培养目标。通过网络进行医学信息检索、并在INTERNET上设计自己的网站,将自己在医学、生命科学领域中研究和应用的成果与大家交流,是当代医药高校大学生必须具备的基本素质与能力。通过本章学习,使学生有能力在今后学习与生活中进行网站设计与网页制作工作,掌握网页设计的要点和应用基础,将本书前面各章作品综合运用到网页中,真正达到学为所用,在医学专业实际应用中夯实自己的IT知识与技能。本章教学思想与教学目标.*21世纪医学人才的培养,要紧跟我国卫生信息化建设学生网页作品93期七年制4班学生综合能力浏览

93期七年制1班学生综合能力浏览93期七年制9班学生综合能力浏览93期七年制10班学生综合能力浏览.*学生网页作品93期七年制4班学生综合能力浏览本章要点9.1节9.2节9.3节9.4节9.5节要点总结

网站设计过程,DREAMWEAVER软件的使用方法,动态网站设计过程。了解使用DREAMWEAVER软件中的框架、行为、时间线等制作网页的方法。掌握

网页设计与制作。使用DREAMWEAVER软件在网页中添加文本、图像,创建链接、图层和表格方法。熟练掌握.*本章要点9.1节9.2节9.3节9.4节9.5节要点总课程导航9.4Dreamweaver概述9.19.29.3网站建立与编辑9.5综合实例网站制作技巧搭建网站数据库平台9.1节9.2节9.3节9.4节9.5节要点总结.*课程导航9.4Dreamweaver概述9.19.299.1Dreamweaver概述9.1.1目9.1.2目9.1.3目

Dreamweaver是Macromedia公司推出的专业网站设计和网页制作软件。使用Dreamweaver软件可以制作各种需求的网站和网页,例如:制作现今比较流行的个人博客、制作用于教学和师生交流的教学网站以及便于医学信息交流和医学常识介绍的医学网站。这一节,我们将介绍Dreamweaver8的安装、启动、窗口布局和网页编辑视图。返回本章.*9.1Dreamweaver概述9.1.1目9.1.2目9.*.*.*.*9.1.1目9.1.2目9.1.3目9.1.1安装启动Dreamweaver2、启动方法第一种方法:在[开始]\[程序]菜单中启动。第二种方法:右击需要编辑的网页文件(HTML),在弹出的快捷菜单中选择“使用Dreamweaver编辑”

Dreamweaver的启动界面9.1.1安装启动Dreamweaver返回本节.*9.1.1目9.1.2目9.1.3目9.1.1安装启动Dre9.1.1目9.1.2目9.1.3目9.1.1安装启动Dreamweaver3、选择工作区

Dreamweaver8的工作区布局包括设计器和编码器两种,在【工作区设置】对话框中单击相应的单选按钮即可选择该工作区。

设计器方式适合用户的主要工作是使用Dreamweaver中的可视化工具制作网页编辑器方式是针对代码编写者的习惯进行设计的,方便了程序员的工作。9.1.1安装启动Dreamweaver返回本节.*9.1.1目9.1.2目9.1.3目9.1.1安装启动Dre9.1.2窗口布局9.1.1目9.1.2目9.1.3目9.1.2窗口布局返回本节.*9.1.2窗口布局9.1.1目9.1.2目9.1.3目9.1标题栏:位于Dreamweaver8界面最上部,其中显示程序名称和当前编辑的文件名称。最左侧为控制按钮;最右侧为最小化、最大化/还原和关闭按钮。菜单栏:包括10个菜单项,使用这些菜单命令基本上可以实现程序的所有功能。工具栏:包括【插入】、【样式呈现】、【文档】和【标准】4个工具栏,可通过选择【查看】|【工具栏】子菜单中的相应命令来显示或隐藏它们。文档窗口:用于显示当前创建或编辑的文档,有【代码】、【设计】和【拆分】3种视图模式。状态栏:用于显示当前编辑的文档的状态。属性检查器:用于查看和更改当前选定文本或其他对象的属性。控制面板:主要包括【CSS】、【应用程序】、【标签检查器】、【文件】、【框架】、【历史记录】、【结果】、【时间轴】8个面板组。9.1.1目9.1.2目9.1.3目9.1.2窗口布局返回本节.*标题栏:位于Dreamweaver8界面最上部,其中显示程9.1.1目9.1.2目9.1.3目9.1.3网页编辑视图(3种)可视化视图在这种视图下看到的网页外观和浏览器中看到的基本一样,通常Dreamweaver默认为可视化视图。网页编辑视图工具栏可视化视图拆分视图源代码视图9.1.3网页编辑视图返回本节.*9.1.1目9.1.2目9.1.3目9.1.3网页编辑视图(9.1.1目9.1.2目9.1.3目9.1.3网页编辑视图(3种)源代码视图如果想查看或编辑源代码,可以单击工具栏上的“代码”按钮进入源代码视图。源代码视图9.1.3网页编辑视图返回本节.*9.1.1目9.1.2目9.1.3目9.1.3网页编辑视图(9.1.1目9.1.2目9.1.3目9.1.3网页编辑视图(3种)拆分视图在这种视图下编辑窗口被分割成上下两部分,上面显示源代码,下面显示可视化编辑窗口。拆分视图9.1.3网页编辑视图返回本节.*9.1.1目9.1.2目9.1.3目9.1.3网页编辑视图(9.2网站建立与编辑在访问互联网时,我们通常见到的网页都是依托在某个Web站点里的。在设计网页之前首先要创建一个Web站点,然后才能制作基于Web站点的网页。本节将介绍如何创建一个新的完整Web站点

9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

.*9.2网站建立与编辑在访问互联网时,我们9.2网站建立过程建立新站点9.2.19.2.2编辑文本与图像9.2.3创建超链接、锚点链接和E-mail链接9.2.4创建表格9.2.6创建框架结构9.2.5使用图层9.2.7创建表单9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*9.2网站建立过程建立新站点9.2.19.2.2编辑文本与基本方式在【管理站点】对话框中单击【新建】按钮,从弹出菜单中选择【站点】命令,弹出【站点定义为】对话框,在【基本】选项卡中进行设置。9.2.1建立新站点【站点定义为】对话框的【基本】选项卡9.2.1建立新站点9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*基本方式9.2.1建立新站点【站点定义为】对话框的【基本】选

高级方式在【站点定义为】对话框中单击【高级】标签,切换到【高级】选项卡,可进行自定义的站点设置。【站点定义为】对话框的【高级】选项卡9.2.1建立新站点9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*【站点定义为】对话框的【高级】选项卡9.2.1建立新站创建站点目录结构(在“文件”面板中进行)创建一级目录在站点根目录上单击鼠标右键,在弹出的快捷菜单中选择“新建文件夹”。“新建文件夹”命令9.2.1建立新站点9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建站点目录结构(在“文件”面板中进行)“新建文件夹”命令9创建站点目录结构(在“文件”面板中进行)创建二级目录在一级目录上单击鼠标右键,在弹出的快捷菜单中选择“新建文件夹”。创建二级目录示意图9.2.1建立新站点9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建站点目录结构(在“文件”面板中进行)创建二级目录示意图9创建站点目录结构(在“文件”面板中进行)新建网页选择【文件】|【新建】命令,弹出【新建文档】对话框,在【常规】选项卡中的【类别】列表框中选择【CSS样式表】、【框架集】、【页面设计(CSS)】、【页面设计】或【页面设计(有辅助功能的)】选项,然后从右侧的列表框中选择一个设计文件(文件类型随所选网页类别而异),再单击【创建】按钮,即可在文档窗口中打开一个相应的文档副本。【新建文档】对话框9.2.1建立新站点9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建站点目录结构(在“文件”面板中进行)选择【文件】|【新建创建站点目录结构(在“文件”面板中进行)文件和文件夹的移动、复制、删除和重命名选中要进行操作的文件或文件夹,单击鼠标右键,在弹出的快捷菜单中选择“编辑”。“编辑”命令对话框9.2.1建立新站点9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建站点目录结构(在“文件”面板中进行)“编辑”命令对话框99.2.2编辑文本和图像文本和图像是构成网页的基本元素,本节主要讲解有关文本的基本操作,文本属性面板的使用,以及如何添加水平分隔线和如何插入图像。通过这些基本的操作,我们可以了解网页设计的基本操作和版面设计。

9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

.*9.2.2编辑文本和图像文本和图像是构成网页的基本文本的操作1、插入普通文本(2种方法)在文档窗口中输入文本。也就是先选择要插入文本的位置,然后直接输入文本。复制在其他编辑器中已经生成的文本。

网页中的文本网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*文本的操作网页中的文本网页9.2.2编辑文本和图像9.2文本的操作2、插入特殊符号(键盘不能直接输入的字符)(1)在文档中,将插入点放置在需要插入特殊字符的位置。(2)选择【窗口】|【插入】命令,打开【插入】工具栏,单击工具栏上【文本】选项卡,如图所示,从中选择某一标记按钮,或者选择【插入】|【HTML】|【特殊字符】命令,然后从子菜单中选中要插入字符的名称。网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*文本的操作网页9.2.2编辑文本和图像9.2.7目9.2.文本的操作3、插入换行符(1)在文本中按回车键强制文本换行,这时会注意到分成两行的文字的间距比较大,这样的换行称为段落换行。(2)在段落的某处进行强制换行,但又不希望间距过大,就可以使用换行符来完成换行,这样的换行称为段内换行。按Shift+Enter组合键可以实现段内换行,即插入换行符。网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*文本的操作网页9.2.2编辑文本和图像9.2.7目9.2.文本的操作4、插入日期(1)在文档窗口中,将插入点放置到要插入日期的位置。(2)选择【插入】|【日期】命令,或者单击“插入”工具栏上的“常用”面板上的【插入日期】按钮。(3)在弹出的“插入日期”对话框中,选择日期和时间格式。(4)如果希望插入的日期和时间在每次保存文档时都能自动更新,那么就选中【储存时自动更新】复选框。如果只是将插入的日期当作普通文本,那么就取消选择该复选框。(5)单击【确定】按钮,即可在文档中插入日期。网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*文本的操作网页9.2.2编辑文本和图像9.2.7目9.2.【插入日期】对话框网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*【插入日期】对话框网页9.2.2编辑文本和图像9.2.7目文本属性面板打开方式有两种:按快捷键Ctrl+F3,选择【窗口】|【属性】命令

文本属性面板网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*文本属性面板文本属性面板网页9.2.2编辑文本和图像9.添加水平分割线(1)在文档中,将插入点放置到要插入水平线的位置。(2)选择【插入】|【HTML】|【水平线】命令,或者单击“插入”工具栏上的HTML选项卡上的【水平线】按钮。(3)插入了水平分隔线,选中该水平线,可以在属性面板上根据需要修改其属性。水平分割线网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*添加水平分割线水平分割线网页9.2.2编辑文本和图像9.插入图像1、插入图像(1)将光标置入要插入图像的位置。(2)选择【插入】|【图像】命令;或者单击“插入”工具栏上的“常用”面板,选择【插入图像】按钮;也可以用鼠标把该图像按钮拖到需要插入图像的位置。注意:无论采用上述哪种方法插入图像,相应地图像文件必须位于当前站点之内。如果不在,Dreamweaver8会询问是否要把该文件复制到当前站点内的文件夹中。网页中的图片网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*插入图像注意:无论采用上述哪种方法插入图像,相应地图像文件必插入图像2、设置图像属性在属性面板中可以查看和修改图像的属性。

“图像属性”面板网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*插入图像“图像属性”面板网页9.2.2编辑文本和图像9.插入图像3、图像与文本的对齐方式在Dreamweaver中,插入的图像被视为一般字符。通过设置该图像相对于同一段落或行中的其他元素的对齐方式可以调整图像与其他对象之间的关系。选择所需图像后,可在图像属性面板中的【对齐】下拉列表框中选择要使用的垂直对齐方式。网页请点击9.2.2编辑文本和图像9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*插入图像网页9.2.2编辑文本和图像9.2.7目9.2.59.2.3创建超级链接、锚点链接和E-mail链接在浏览网页时,我们通常可以发现可以某个网页打开其它网页或文件,这些功能都是通过各种链接实现的。本节将重点介绍如何创建超级链接,超级链接使得网络上的信息有机的联系在一起。同时我们还将介绍锚点链接和E-mail链接。

9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

.*9.2.3创建超级链接、锚点链接和E-mail链接创建超级链接(1)选择窗口中的文本或其他对象。

(2)单击“链接”下拉列表框右侧的文件夹图标,浏览并选择一个文件,

(3)选择被链接文档的载入位置。在默认情况下,被链接文档打开在当前窗口或框架中。要使被链接的文档显示在其他窗口或框架内,需要从“属性”面板的“目标”下拉列表上选择一个选项。键入的地址链接网页请点击9.2.3创建超级链接、锚点链接和E-mail链接9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建超级链接键入的地址链接网页9.2.3创建超级链接、锚点创建锚点链接锚点常常被用来跳转到特定的主题或文档的顶部,便访问者能够快速测览到选定的位置,加快信息检索速度。

(1)插入锚点:选择“插入”|“命名锚点”命令。(2)链接到锚点:在文档窗口中选择要建立锚点链接的文本或图像。在“属性”面板的“链接”下拉列表框中输入一个号码符号(#)和锚点名。例如,要链接到当前文档中称为top的锚点,输入:#top。锚点链接网页请点击9.2.3创建超级链接、锚点链接和E-mail链接9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建锚点链接锚点链接网页9.2.3创建超级链接、锚点链接和创建E-mail链接(1)把光标置于文档窗口希望显示电子邮件链接的地方,或选定希望显示为电子邮件链接的文本,然后执行以下操作之一。选择【插入】|【电子邮件链接】命令。或者在“插入”工具栏的“常用”面板上单击【插入电子邮件链接】按钮。(2)在“电子邮件链接”对话框的“文本”文本框中输入或编辑作为电子邮件链接显示在文档中的文本,在“电子邮件”文本框中输入邮件应该送达的电子邮件地址。(3)在文档窗口选择文本或图像,在“属性”面板上的“链接”下拉列表框中输入“mailto:”和电子邮件地址。网页请点击9.2.3创建超级链接、锚点链接和E-mail链接9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*创建E-mail链接网页9.2.3创建超级链接、锚点链接和9.2.4创建表格在网页中,体现各种数据比较情况最好的体现形式是表格,同时想清晰的放置文本、图像等元素,也可以使用表格来指定它们的具体位置。本节我们将介绍如何插入表格、设置表格属性、表格的常规操作等。以便在网页中设计多种多样的表格,也可以通过表格来设计窗体元素的位置。9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

.*9.2.4创建表格在网页中,体现各种数据比较情况最插入表格(3种方法)单击“插入”工具栏上的“常用”面板上的【表格】按钮。选择【插入】菜单中的【表格】命令。“插入”工具栏上的“常用”面板上的【表格】按钮从“常用”面板拖到页面上所需位置。表格网页请点击9.2.4创建表格9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*插入表格(3种方法)表格网页9.2.4创建表格9.2.7目设置表格属性表格通过属性面板设置它的属性实现的。1.设置整个表格属性:选择整个表格。2.设置单元格属性:选择单个单元格或单元格的任意组合。

“表格属性”面板网页请点击9.2.4创建表格9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*设置表格属性“表格属性”面板网页9.2.4创建表格9.2表格操作对表格经常需要编辑、修改、删除等操作,尤其是用表格对整个页面进行布局时更是如此。打开【修改】|【表格】命令,然后在级联菜单中选择相应的命令,可以实现大多数表格操作。表格菜单网页请点击9.2.4创建表格9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*表格操作表格菜单网页9.2.4创建表格9.2.7目9.2.9.2.5使用图层层(Layer)是网页内容的一种容器。与表格一样,也有网页元素定位功能。层的最主要特点就是它能够在网页上任意浮动,可以实现层对网页内容的精确定位。层可以重叠,可以显示和隐藏,利用程序可以控制层的显示和隐藏,实现层内容的动态交替显示等特殊效果。本节具体介绍层的使用方法。9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目

.*9.2.5使用图层层(Layer)是网页内容的一种层的基本操作1、插入层(1)将光标放置在要插入层的位置,选择【插入】|【布局对象】|【层】命令。(2)就可在文档窗口插入一个空的预设置大小的层。网页请点击9.2.5使用图层9.2.7目9.2.5目9.2.3目9.2.4目9.2.1目9.2.2目返回本章9.2.6目.*层的基本操作网页9.2.5使用图层9.2.7目9.2.5目层的基本操作2、绘制层(1)鼠标单击“插入”工具栏上的【布局】面板,单击【描绘层】按钮。(2)将鼠标移动到文档窗口,这时鼠标指针变为十字形状。(3)在文档窗口中希望放置层的位置上按下鼠标左键,拖动鼠标到希望大小后释放鼠标,一个新层就被创建。注意:同时绘制多个层,可按住Ctrl键的同时,单击“布局”面板上的【描绘层】按钮。网页

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论