《网页制作_医学计算机与信息技术应用基础》由会员分享，可在线阅读，更多相关《网页制作_医学计算机与信息技术应用基础（74页珍藏版）》请在金锄头文库上搜索。
1、第9章 网页制作,21世纪医学人才的培养，要紧跟我国卫生信息化建设对医学人才的实际需求，将医信技能的综合应用水平作为当前医学人才的核心能力与培养目标。通过网络进行医学信息检索、并在INTERNET上设计自己的网站，将自己在医学、生命科学领域中研究和应用的成果与大家交流，是当代医药高校大学生必须具备的基本素质与能力。 通过本章学习，使学生有能力在今后学习与生活中进行网站设计与网页制作工作，掌握网页设计的要点和应用基础，将本书前面各章作品综合运用到网页中，真正达到学为所用，在医学专业实际应用中夯实自己的IT知识与技能。,本章教学思想与教学目标,学生网页作品,93期七年制4班学生综合能力浏览,93期
2、七年制1班学生综合能力浏览,93期七年制9班学生综合能力浏览,93期七年制10班学生综合能力浏览,本 章 要 点,网站设计过程，DREAMWEAVER软件的使用方 法，动态网站设计过程。,了解,使用DREAMWEAVER软件中的框架、行为、时 间线等制作网页的方法。,掌握,网页设计与制作。使用DREAMWEAVER软件在 网页中添加文本、图像，创建链接、图层和表格方法。,熟练掌握,课 程 导 航,9.4,Dreamweaver概述,9.1,9.2,9.3,网站建立与编辑,9.5,综合实例,网站制作技巧,搭建网站数据库平台,9.1 Dreamweaver概述,9.1.1目,9.1.2目,9.1.
3、3目,Dreamweaver是Macromedia公司推出的专业网站设计和网页制作软件。使用 Dreamweaver软件可以制作各种需求的网站和网页，例如：制作现今比较流行的个人博客、制作用于教学和师生交流的教学网站以及便于医学信息交流和医学常识介绍的医学网站。这一节，我们将介绍Dreamweaver 8的安装、启动、窗口布局和网页编辑视图。,9.1.1目,9.1.2目,9.1.3目,9.1.1安装启动Dreamweaver 2、 启动方法 第一种方法：在开始程序菜单中启动。 第二种方法：右击需要编辑的网页文件（HTML），在弹出的快捷菜单中选择“使用Dreamweaver编辑”,Dreamw
4、eaver的启动界面,9.1.1 安装启动Dreamweaver,9.1.1目,9.1.2目,9.1.3目,9.1.1安装启动Dreamweaver 3、选择工作区 Dreamweaver8的工作区布局包括设计器和编码器两种，在【工作区设置】对话框中单击相应的单选按钮即可选择该工作区。,设计器方式适合用户的主要工作是使用Dreamweaver中的可视化工具制作网页,编辑器方式是针对代码编写者的习惯进行设计的，方便了程序员的工作。,9.1.1 安装启动Dreamweaver,9.1.1目,9.1.2目,9.1.3目,9.1.2 窗口布局,标题栏：位于Dreamweaver 8界面最上部，其中显示
5、程序名称和当前编辑的文件名称。最左侧为控制按钮；最右侧为最小化、最大化/还原和关闭按钮。 菜单栏：包括10个菜单项，使用这些菜单命令基本上可以实现程序的所有功能。 工具栏：包括【插入】、【样式呈现】、【文档】和【标准】4个工具栏，可通过选择【查看】|【工具栏】子菜单中的相应命令来显示或隐藏它们。 文档窗口：用于显示当前创建或编辑的文档，有【代码】、【设计】和【拆分】3种视图模式。 状态栏：用于显示当前编辑的文档的状态。 属性检查器：用于查看和更改当前选定文本或其他对象的属性。 控制面板：主要包括【CSS】、【应用程序】、【标签检查器】、【文件】、【框架】、【历史记录】、【结果】、【时间轴】8个
6、面板组。,9.1.1目,9.1.2目,9.1.3目,9.1.2 窗口布局,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网页编辑视图（3种） 源代码视图 如果想查看或编辑源代码，可以单击工具栏上的“代码”按钮进入源代码视图。,源代码视图,9.1.3 网页编辑视图,9.1.1目,9.1.2目,9.1.3目,9.1.3网页编辑视图（3种） 拆分视图 在这种视图下编辑
7、窗口被分割成上下两部分，上面显示源代码，下面显示可视化编辑窗口。,拆分视图,9.1.3 网页编辑视图,9.2 网站建立与编辑,在访问互联网时，我们通常见到的网页都是依托在某个Web站点里的。在设计网页之前首先要创建一个Web站点，然后才能制作基于Web站点的网页。本节将介绍如何创建一个新的完整Web站点,9.2 网站建立过程,建立新站点,9.2.1,9.2.2,编辑文本与图像,9.2.3,创建超链接、锚点链接和E-mail链接,9.2.4,创建表格,9.2. 6,创建框架结构,9.2.5,使用图层,9.2.7,创建表单,基本方式 在【管理站点】对话框中单击【新建】按钮，从弹出菜单中选择【站点】
8、命令，弹出【站点定义为】对话框，在【基本】选项卡中进行设置。,【站点定义为】对话框的【基本】选项卡,9.2.1 建立新站点,高级方式 在【站点定义为】对话框中单击【高级】标签，切换到【高级】选项卡，可进行自定义的站点设置。,【站点定义为】对话框的【高级】选项卡,9.2.1 建立新站点,创建站点目录结构（在“文件”面板中进行） 创建一级目录 在站点根目录上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”。,“新建文件夹”命令,9.2.1 建立新站点,创建站点目录结构（在“文件”面板中进行） 创建二级目录 在一级目录上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”。,创建二级目录示意图,9.
9、2.1 建立新站点,创建站点目录结构（在“文件”面板中进行） 新建网页,选择【文件】|【新建】命令，弹出【新建文档】对话框，在【常规】选项卡中的【类别】列表框中选择【CSS样式表】、【框架集】、【页面设计(CSS)】、【页面设计】或【页面设计(有辅助功能的)】选项，然后从右侧的列表框中选择一个设计文件（文件类型随所选网页类别而异），再单击【创建】按钮，即可在文档窗口中打开一个相应的文档副本。,【新建文档】对话框,9.2.1 建立新站点,创建站点目录结构（在“文件”面板中进行） 文件和文件夹的移动、复制、删除和重命名 选中要进行操作的文件或文件夹，单击鼠标右键，在弹出的快捷菜单中选择“编辑”。,
10、“编辑”命令对话框,9.2.1 建立新站点,9.2.2 编辑文本和图像,文本和图像是构成网页的基本元素，本节主要讲解有关文本的基本操作，文本属性面板的使用，以及如何添加水平分隔线和如何插入图像。通过这些基本的操作，我们可以了解网页设计的基本操作和版面设计。,文本的操作 1、插入普通文本（2种方法） 在文档窗口中输入文本。也就是先选择要插入文本的位置，然后直接输入文本。 复制在其他编辑器中已经生成的文本。,网页中的文本,网页 请点击,9.2.2 编辑文本和图像,文本的操作 2、插入特殊符号（键盘不能直接输入的字符 ） （1）在文档中，将插入点放置在需要插入特殊字符的位置。 （2）选择【窗口】|【
11、插入】命令，打开【插入】工具栏，单击工具栏上【文本】选项卡，如图所示，从中选择某一标记按钮，或者选择【插入】| 【HTML】 |【特殊字符】命令，然后从子菜单中选中要插入字符的名称。,网页 请点击,9.2.2 编辑文本和图像,文本的操作 3、插入换行符 （1）在文本中按回车键强制文本换行，这时会注意到分成两行的文字的间距比较大，这样的换行称为段落换行 。 （2）在段落的某处进行强制换行，但又不希望间距过大，就可以使用换行符来完成换行，这样的换行称为段内换行。按Shift+Enter组合键可以实现段内换行，即插入换行符。,网页 请点击,9.2.2 编辑文本和图像,文本的操作 4、插入日期 (1)
12、 在文档窗口中，将插入点放置到要插入日期的位置。 (2) 选择【插入】|【日期】命令，或者单击“插入”工具栏上的“常用”面板上的【插入日期】按钮。 (3) 在弹出的“插入日期”对话框中，选择日期和时间格式。 (4) 如果希望插入的日期和时间在每次保存文档时都能自动更新，那么就选中【储存时自动更新】复选框。如果只是将插入的日期当作普通文本，那么就取消选择该复选框。 (5) 单击【确定】按钮，即可在文档中插入日期。,网页 请点击,9.2.2 编辑文本和图像,【插入日期】对话框,网页 请点击,9.2.2 编辑文本和图像,文本属性面板 打开方式有两种： 按快捷键Ctrl+F3， 选择【窗口】|【属性】
13、命令,文本属性面板,网页 请点击,9.2.2 编辑文本和图像,添加水平分割线 （1）在文档中，将插入点放置到要插入水平线的位置。 （2）选择【插入】| 【HTML】 |【水平线】命令，或者单击“插入”工具栏上的HTML选项卡上的【水平线】按钮。 （3）插入了水平分隔线，选中该水平线，可以在属性面板上根据需要修改其属性。,水平分割线,网页 请点击,9.2.2 编辑文本和图像,插入图像 1、插入图像 （1）将光标置入要插入图像的位置。 （2）选择【插入】|【图像】命令；或者单击“插入”工具栏上的“常用”面板，选择【插入图像】按钮；也可以用鼠标把该图像按钮拖到需要插入图像的位置。,注意：无论采用上述
14、哪种方法插入图像，相应地图像文件必须位于当前站点之内。如果不在，Dreamweaver 8会询问是否要把该文件复制到当前站点内的文件夹中。,网页中的图片,网页 请点击,9.2.2 编辑文本和图像,插入图像 2、设置图像属性 在属性面板中可以查看和修改图像的属性。,“图像属性”面板,网页 请点击,9.2.2 编辑文本和图像,插入图像 3、图像与文本的对齐方式 在Dreamweaver中，插入的图像被视为一般字符。通过设置该图像相对于同一段落或行中的其他元素的对齐方式可以调整图像与其他对象之间的关系。选择所需图像后，可在图像属性面板中的【对齐】下拉列表框中选择要使用的垂直对齐方式。,网页 请点击,
15、9.2.2 编辑文本和图像,9.2.3 创建超级链接、锚点链接和E-mail链接,在浏览网页时，我们通常可以发现可以某个网页打开其它网页或文件，这些功能都是通过各种链接实现的。本节将重点介绍如何创建超级链接，超级链接使得网络上的信息有机的联系在一起。同时我们还将介绍锚点链接和E-mail链接。,创建超级链接 （1）选择窗口中的文本或其他对象。 （2）单击“链接”下拉列表框右侧的文件夹图标，浏览并选择一个文件， （3）选择被链接文档的载入位置。在默认情况下，被链接文档打开在当前窗口或框架中。要使被链接的文档显示在其他窗口或框架内，需要从“属性”面板的“目标”下拉列表上选择一个选项。,键入的地址链
16、接,网页 请点击,9.2.3 创建超级链接、锚点链接和E-mail链接,创建锚点链接 锚点常常被用来跳转到特定的主题或文档的顶部，便访问者能够快速测览到选定的位置，加快信息检索速度。 (1) 插入锚点：选择“插入”|“命名锚点”命令。 (2)链接到锚点：在文档窗口中选择要建立锚点链接的文本或图像。在“属性”面板的“链接”下拉列表框中输入一个号码符号(#)和锚点名。例如，要链接到当前文档中称为top的锚点，输入:#top。,锚点链接,网页 请点击,9.2.3 创建超级链接、锚点链接和E-mail链接,创建E-mail链接 （1）把光标置于文档窗口希望显示电子邮件链接的地方，或选定希望显示为电子邮件链接的文本，然后执行以下操作之一。选择【插入】|【电子邮件链接】命令。或者在“插入”工具栏的“常用”面板上单击【插入电子邮件链接】按钮。 （2）在“电子邮件链接”对话框的“文本”文本框中输入或编辑作为电子邮件链接显示在文档中的文本，在“电子邮件”文本框中输入邮件
