初中信息技术电子工业版《九年级上册二创建子网页》ppt课件

第10章 创建子网页,10.1 Dreamweaver概述,10.1.1目,10.1.2目,10.1.3目,Dreamweaver是Macromedia公司推出的专业网站设计和网页制作软件。使用 Dreamweaver软件可以制作各种需求的网站和网页，例如：制作现今比较流行的个人博客、制作用于教学和师生交流的教学网站以及便于医学信息交流和医学常识介绍的医学网站。这一节，我们将介绍Dreamweaver 8的安装、启动、窗口布局和网页编辑视图。,10.1.1目,10.1.2目,10.1.3目,10.1 Dreamweaver概述,安装启动Dreamweaver,10.1.1,10.1.2,10.1.3,窗口布局,网页视图编辑,10.1.1目,10.1.2目,10.1.3目,10.1.1 安装启动Dreamweaver,10.1.1安装启动Dreamweaver 1、 安装方法 Dreamweaver的安装界面是标准的Windows程序安装界面，用户通过安装向导就可顺利安装。,10.1.1目,10.1.2目,10.1.3目,10.1.1安装启动Dreamweaver 2、 启动方法 第一种方法：在开始程序菜单中启动。 第二种方法：右击需要编辑的网页文件（HTML），在弹出的快捷菜单中选择“使用Dreamweaver编辑”,Dreamweaver的启动界面,10.1.1 安装启动Dreamweaver,10.1.1目,10.1.2目,10.1.3目,10.1.1安装启动Dreamweaver 3、选择工作区 Dreamweaver8的工作区布局包括设计器和编码器两种，在【工作区设置】对话框中单击相应的单选按钮即可选择该工作区。,设计器方式适合用户的主要工作是使用Dreamweaver中的可视化工具制作网页,编辑器方式是针对代码编写者的习惯进行设计的，方便了程序员的工作。,10.1.1 安装启动Dreamweaver,10.1.1目,10.1.2目,10.1.3目,10.1.2 窗口布局,标题栏：位于Dreamweaver 8界面最上部，其中显示程序名称和当前编辑的文件名称。最左侧为控制按钮；最右侧为最小化、最大化/还原和关闭按钮。 菜单栏：包括10个菜单项，使用这些菜单命令基本上可以实现程序的所有功能。 工具栏：包括【插入】、【样式呈现】、【文档】和【标准】4个工具栏，可通过选择【查看】|【工具栏】子菜单中的相应命令来显示或隐藏它们。 文档窗口：用于显示当前创建或编辑的文档，有【代码】、【设计】和【拆分】3种视图模式。 状态栏：用于显示当前编辑的文档的状态。 属性检查器：用于查看和更改当前选定文本或其他对象的属性。 控制面板：主要包括【CSS】、【应用程序】、【标签检查器】、【文件】、【框架】、【历史记录】、【结果】、【时间轴】8个面板组。,10.1.1目,10.1.2目,10.1.3目,10.1.2 窗口布局,10.1.1目,10.1.2目,10.1.3目,10.1.3网页编辑视图（3种） 可视化视图 在这种视图下看到的网页外观和浏览器中看到的基本一样，通常Dreamweaver默认为可视化视图。,网页编辑视图工具栏,10.1.3 网页编辑视图,10.1.1目,10.1.2目,10.1.3目,10.1.3网页编辑视图（3种） 源代码视图 如果想查看或编辑源代码，可以单击工具栏上的“代码”按钮进入源代码视图。,源代码视图,10.1.3 网页编辑视图,10.1.1目,10.1.2目,10.1.3目,10.1.3网页编辑视图（3种） 拆分视图 在这种视图下编辑窗口被分割成上下两部分，上面显示源代码，下面显示可视化编辑窗口。,拆分视图,10.1.3 网页编辑视图,10.2 网站建立过程,10.2.1目,10.2.2目,在访问互联网时，我们通常见到的网页都是依托在某个Web站点里的。在设计网页之前首先要创建一个Web站点，然后才能制作基于Web站点的网页。本节将介绍如何创建一个新的完整Web站点,10.2.1目,10.2.2目,10.2 网站建立过程,建立新站点,10.2.1,10.2.2,创建站点目录结构,10.2.1目,10.2.2目,基本方式 在【管理站点】对话框中单击【新建】按钮，从弹出菜单中选择【站点】命令，弹出【站点定义为】对话框，在【基本】选项卡中进行设置。,【站点定义为】对话框的【基本】选项卡,10.2.1 建立新站点,高级方式 在【站点定义为】对话框中单击【高级】标签，切换到【高级】选项卡，可进行自定义的站点设置。,【站点定义为】对话框的【高级】选项卡,10.2.1目,10.2.2目,10.2.1 建立新站点,10.2.1目,10.2.2目,10.2.2创建站点目录结构（在“文件”面板中进行） 创建一级目录 在站点根目录上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”。,“新建文件夹”命令,10.2.2 创建站点目录结构,10.2.2创建站点目录结构（在“文件”面板中进行） 创建二级目录 在一级目录上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”。,创建二级目录示意图,10.2.1目,10.2.2目,10.2.2 创建站点目录结构,10.2.1目,10.2.2目,10.2.2创建站点目录结构（在“文件”面板中进行） 新建网页,选择【文件】|【新建】命令，弹出【新建文档】对话框，在【常规】选项卡中的【类别】列表框中选择【CSS样式表】、【框架集】、【页面设计(CSS)】、【页面设计】或【页面设计(有辅助功能的)】选项，然后从右侧的列表框中选择一个设计文件（文件类型随所选网页类别而异），再单击【创建】按钮，即可在文档窗口中打开一个相应的文档副本。,【新建文档】对话框,10.2.2 创建站点目录结构,10.2.1目,10.2.2目,10.2.2创建站点目录结构（在“文件”面板中进行） 文件和文件夹的移动、复制、删除和重命名 选中要进行操作的文件或文件夹，单击鼠标右键，在弹出的快捷菜单中选择“编辑”。,“编辑”命令对话框,10.2.2 创建站点目录结构,10.3 编辑文本和图像,10.3.1目,10.3.2目,10.3.3目,10.3.4目,文本和图像是构成网页的基本元素，本节主要讲解有关文本的基本操作，文本属性面板的使用，以及如何添加水平分隔线和如何插入图像。通过这些基本的操作，我们可以了解网页设计的基本操作和版面设计。,10.3.1目,10.3.2目,10.3.3目,10.3.4目,10.3.4,文本的基本操作,10.3.1,10.3.2,10.3.3,文本“属性”面板,插入图像,添加水平分割线,10.3 编辑文本和图像,10.3.1文本的操作 1、插入普通文本（2种方法） 在文档窗口中输入文本。也就是先选择要插入文本的位置，然后直接输入文本。 复制在其他编辑器中已经生成的文本。,网页中的文本,网页 请点击,10.3.1目,10.3.2目,10.3.3目,10.3.4目,10.3.1 文本的操作,10.3.1文本的操作 2、插入特殊符号（键盘不能直接输入的字符 ） （1）在文档中，将插入点放置在需要插入特殊字符的位置。 （2）选择【窗口】|【插入】命令，打开【插入】工具栏，单击工具栏上【文本】选项卡，如图所示，从中选择某一标记按钮，或者选择【插入】| 【HTML】 |【特殊字符】命令，然后从子菜单中选中要插入字符的名称。,网页 请点击,10.3.1目,10.3.2目,10.3.3目,10.3.4目,10.3.1 文本的操作,10.3.1文本的操作 3、插入换行符 （1）在文本中按回车键强制文本换行，这时会注意到分成两行的文字的间距比较大，这样的换行称为段落换行 。 （2）在段落的某处进行强制换行，但又不希望间距过大，就可以使用换行符来完成换行，这样的换行称为段内换行。按Shift+Enter组合键可以实现段内换行，即插入换行符。,10.3.1目,10.3.2目,10.3.3目,10.3.4目,10.3.1 文本的操作,网页 请点击,10.3.1文本的操作 4、插入日期 (1) 在文档窗口中，将插入点放置到要插入日期的位置。 (2) 选择【插入】|【日期】命令，或者单击“插入”工具栏上的“常用”面板上的【插入日期】按钮。 (3) 在弹出的“插入日期”对话框中，选择日期和时间格式。 (4) 如果希望插入的日期和时间在每次保存文档时都能自动更新，那么就选中【储存时自动更新】复选框。如果只是将插入的日期当作普通文本，那么就取消选择该复选框。 (5) 单击【确定】按钮，即可在文档中插入日期。,10.3.1目,10.3.2目,10.3.3目,10.3.4目,10.3.1 文本的操作,网页 请点击,【插入日期】对话框,10.3.1目,10.3.2目,10.3.3目,10.3.4目,10.3.1 文本的操作,网页 请点击,10.3.2文本属性面板 打开方式有两种： 按快捷键Ctrl+F3， 选择【窗口】|【属性】命令,10.3.1目,10.3.2目,10.3.3目,10.3.4目,10.3.2 文本属性面板,文本属性面板,网页 请点击,10.3.3添加水平分割线 （1）在文档中，将插入点放置到要插入水平线的位置。 （2）选择【插入】| 【HTML】 |【水平线】命令，或者单击“插入”工具栏上的HTML选项卡上的【水平线】按钮。 （3）插入了水平分隔线，选中该水平线，可以在属性面板上根据需要修改其属性。,水平分割线,10.3.1目,10.3.2目,10.3.3目,10.3.4目,10.3.3 添加水平分割线,网页 请点击,10.3.4插入图像 1、插入图像 （1）将光标置入要插入图像的位置。 （2）选择【插入】|【图像】命令；或者单击“插入”工具栏上的“常用”面板，选择【插入图像】按钮；也可以用鼠标把该图像按钮拖到需要插入图像的位置。,注意：无论采用上述哪种方法插入图像，相应地图像文件必须位于当前站点之内。如果不在，Dreamweaver 8会询问是否要把该文件复制到当前站点内的文件夹中。,网页中的图片,10.3.1目,10.3.2目,10.3.3目,10.3.4目,10.3.4 插入图像,网页 请点击,10.3.4插入图像 2、设置图像属性 在属性面板中可以查看和修改图像的属性。,“图像属性”面板,10.3.1目,10.3.2目,10.3.3目,10.3.4目,10.3.4 插入图像,网页 请点击,10.3.4插入图像 3、图像与文本的对齐方式 在Dreamweaver中，插入的图像被视为一般字符。通过设置该图像相对于同一段落或行中的其他元素的对齐方式可以调整图像与其他对象之间的关系。选择所需图像后，可在图像属性面板中的【对齐】下拉列表框中选择要使用的垂直对齐方式。,10.3.1目,10.3.2目,10.3.3目,10.3.4目,10.3.4 插入图像,网页 请点击,10.5 创建表格,10.5.1目,10.5.2目,10.5.3目,在网页中，体现各种数据比较情况最好的体现形式是表格，同时想清晰的放置文本、图像等元素，也可以使用表格来指定它们的具体位置。本节我们将介绍如何插入表格、设置表格属性、表格的常规操作等。以便在网页中设计多种多样的表格，也可以通过表格来设计窗体元素的位置。,10.5.1目,10.5.2目,10.5.3目,插入表格,10.5.1,10.5.2,10.5.3,设置表格属性,表格操作,10.5 创建表格,10.5.1插入表格（3种方法） 单击“插入”工具栏上的“常用”面板上的【表格】按钮。 选择【插入】菜单中的【表格】命令。 “插入”工具栏上的“常用”面板上的【表格】按钮从“常用”面板拖到页面上所需位置。,表格,10.5.1目,10.5.2目,10.5.3目,10.5.1 插入表格,网页 请点击,10.5.2设置表格属性 表格