【教学课件】第5章网页制作基础.ppt

第第5章章 网页制作基础网页制作基础大学计算机信息科技教程（第二版）第5章 网页制作基础2主要内容主要内容概述概述设计站点设计站点编辑网页编辑网页页面布局页面布局建立超链接建立超链接使用使用CSS样式样式层、行为和时间轴层、行为和时间轴模板模板管理和发布站点管理和发布站点大学计算机信息科技教程（第二版）第5章 网页制作基础35.1 概述概述站点站点站点站点 具有相关主题的网页有机地整合在一起，集中具有相关主题的网页有机地整合在一起，集中具有相关主题的网页有机地整合在一起，集中具有相关主题的网页有机地整合在一起，集中进行管理，构成一个整体，这就是站点。进行管理，构成一个整体，这就是站点。进行管理，构成一个整体，这就是站点。进行管理，构成一个整体，这就是站点。超文本标记语言超文本标记语言超文本标记语言超文本标记语言HTMLHTML 站点中的每个网页的内容都要使用一种标准的站点中的每个网页的内容都要使用一种标准的站点中的每个网页的内容都要使用一种标准的站点中的每个网页的内容都要使用一种标准的语言来描述，这就是超文本标记语言语言来描述，这就是超文本标记语言语言来描述，这就是超文本标记语言语言来描述，这就是超文本标记语言HTMLHTML。常用的网页制作软件常用的网页制作软件常用的网页制作软件常用的网页制作软件 Microsoft OfficeMicrosoft Office中的中的中的中的FrontPageFrontPageMacromediaMacromedia公司的公司的公司的公司的DreamweaverDreamweaver大学计算机信息科技教程（第二版）第5章 网页制作基础45.1 概述概述Dreamweaver概述概述HTML简介简介大学计算机信息科技教程（第二版）第5章 网页制作基础55.1.1 Dreamweaver简述简述 Macromedia Dreamweaver 8 Macromedia Dreamweaver 8 美国美国美国美国MicromediaMicromedia公司开发公司开发公司开发公司开发集集集集网页制作和网站管理网页制作和网站管理网页制作和网站管理网页制作和网站管理于一体于一体于一体于一体大学计算机信息科技教程（第二版）第5章 网页制作基础65.1.1 Dreamweaver简述简述启动启动 选择选择选择选择“开始开始开始开始”/“所有程序所有程序所有程序所有程序”/“MicromediaMicromedia”/“Micromedia Dreamweaver 8Micromedia Dreamweaver 8”选项，选项，选项，选项，DreamweaverDreamweaver有两种工作区布局模式：有两种工作区布局模式：有两种工作区布局模式：有两种工作区布局模式：设计器和编码器设计器和编码器设计器和编码器设计器和编码器第一次运行显示第一次运行显示第一次运行显示第一次运行显示大学计算机信息科技教程（第二版）第5章 网页制作基础75.1.1 Dreamweaver简述简述 启动启动启动启动DreamweaverDreamweaver后，显示起始页。在后，显示起始页。在后，显示起始页。在后，显示起始页。在起始页中可以打开最起始页中可以打开最起始页中可以打开最起始页中可以打开最近使用过的网页，快近使用过的网页，快近使用过的网页，快近使用过的网页，快速地创建新的网页。速地创建新的网页。速地创建新的网页。速地创建新的网页。大学计算机信息科技教程（第二版）第5章 网页制作基础85.1.1 Dreamweaver简述简述 打开或者创建网页后的操作界面打开或者创建网页后的操作界面打开或者创建网页后的操作界面打开或者创建网页后的操作界面 “插入插入”工具栏工具栏“标准”工具栏“文档”工具栏文档窗口面板组面板组属性检查器属性检查器通过菜单通过菜单 查看查看工具栏工具栏XXX 来显示或隐藏某个工具栏，通过菜单来显示或隐藏某个工具栏，通过菜单 窗口窗口XXX 来显示或隐藏某个面板组或属性面板。来显示或隐藏某个面板组或属性面板。大学计算机信息科技教程（第二版）第5章 网页制作基础95.1.2 HTML简介简介HTML(HyperText Mackup LanguageHTML(HyperText Mackup Language 超文本超文本超文本超文本 标记标记标记标记 语言语言语言语言)制作超文本文档的简单标记语言制作超文本文档的简单标记语言制作超文本文档的简单标记语言制作超文本文档的简单标记语言只是提供一些语法标记给浏览器，由浏览器解释只是提供一些语法标记给浏览器，由浏览器解释只是提供一些语法标记给浏览器，由浏览器解释只是提供一些语法标记给浏览器，由浏览器解释生成相应的页面。生成相应的页面。生成相应的页面。生成相应的页面。由格式标签和资源引用构成。由格式标签和资源引用构成。由格式标签和资源引用构成。由格式标签和资源引用构成。标签来设置引用内容的格式，标签分头标签和尾标签来设置引用内容的格式，标签分头标签和尾标签来设置引用内容的格式，标签分头标签和尾标签来设置引用内容的格式，标签分头标签和尾标签，用标签，用标签，用标签，用“”括起来，与被标注的内容括起来，与被标注的内容括起来，与被标注的内容括起来，与被标注的内容区分开来。区分开来。区分开来。区分开来。大学计算机信息科技教程（第二版）第5章 网页制作基础105.1.2 HTML简介简介文件的开始文件的结束头部文件体网页标题段落图片Rwjgxltj.html大学计算机信息科技教程（第二版）第5章 网页制作基础115.1.2 HTML简介简介和和和和标签标志了文件的开始和结束，标签标志了文件的开始和结束，标签标志了文件的开始和结束，标签标志了文件的开始和结束，分成两部分：分成两部分：分成两部分：分成两部分：第一部分叫作头部第一部分叫作头部第一部分叫作头部第一部分叫作头部以以以以和和和和标签标志开始和结束标签标志开始和结束标签标志开始和结束标签标志开始和结束其中其中其中其中和和和和标签用于定义网页的标题标签用于定义网页的标题标签用于定义网页的标题标签用于定义网页的标题 第二部分是文件体第二部分是文件体第二部分是文件体第二部分是文件体以以以以和和和和标签标志开始和结束标签标志开始和结束标签标志开始和结束标签标志开始和结束包含对浏览器中显示的内容的具体描述包含对浏览器中显示的内容的具体描述包含对浏览器中显示的内容的具体描述包含对浏览器中显示的内容的具体描述和和和和标签标志一个段落，之间的文本将显示在浏览器中；标签标志一个段落，之间的文本将显示在浏览器中；标签标志一个段落，之间的文本将显示在浏览器中；标签标志一个段落，之间的文本将显示在浏览器中；和和和和标签控制文本的字体、大小、颜色等；标签控制文本的字体、大小、颜色等；标签控制文本的字体、大小、颜色等；标签控制文本的字体、大小、颜色等；和和和和标签用于排版段落的格式；标签用于排版段落的格式；标签用于排版段落的格式；标签用于排版段落的格式；标签用于插入图片，没有结束标签，通常后面带有属性，标签用于插入图片，没有结束标签，通常后面带有属性，标签用于插入图片，没有结束标签，通常后面带有属性，标签用于插入图片，没有结束标签，通常后面带有属性，表示图片文件的存储路径、对齐、以及大小。表示图片文件的存储路径、对齐、以及大小。表示图片文件的存储路径、对齐、以及大小。表示图片文件的存储路径、对齐、以及大小。大学计算机信息科技教程（第二版）第5章 网页制作基础12 .和和和和和和和和 .大学计算机信息科技教程（第二版）第5章 网页制作基础135.2 设计站点设计站点网站设计网站设计定义本地站点定义本地站点管理站点资源（使用管理站点资源（使用文件面板文件面板）新建新建新建新建（快捷菜单：新建文件、新建文件夹）（快捷菜单：新建文件、新建文件夹）（快捷菜单：新建文件、新建文件夹）（快捷菜单：新建文件、新建文件夹）移动、复制移动、复制移动、复制移动、复制（拖曳、（拖曳、（拖曳、（拖曳、CtrlCtrl拖曳）拖曳）拖曳）拖曳）删除、重命名删除、重命名删除、重命名删除、重命名（DelDel、两次单击）、两次单击）、两次单击）、两次单击）导入导入导入导入（复制（复制（复制（复制/粘贴）粘贴）粘贴）粘贴）打开、保存和预览网页打开、保存和预览网页打开打开打开打开（文件面板：双击文件）（文件面板：双击文件）（文件面板：双击文件）（文件面板：双击文件）保存保存保存保存（标准工具栏：保存按钮、全部保存按钮）（标准工具栏：保存按钮、全部保存按钮）（标准工具栏：保存按钮、全部保存按钮）（标准工具栏：保存按钮、全部保存按钮）预览预览预览预览（标准工具栏：在浏览器中预览按钮）（标准工具栏：在浏览器中预览按钮）（标准工具栏：在浏览器中预览按钮）（标准工具栏：在浏览器中预览按钮）大学计算机信息科技教程（第二版）第5章 网页制作基础145.2.1 网站设计网站设计网站：多个主题相关的网页按一定的组织结构、网站：多个主题相关的网页按一定的组织结构、网站：多个主题相关的网页按一定的组织结构、网站：多个主题相关的网页按一定的组织结构、以超链接方式连接在一起，形成一个整体。以超链接方式连接在一起，形成一个整体。以超链接方式连接在一起，形成一个整体。以超链接方式连接在一起，形成一个整体。网站主页：获取网站的信息的起点。网站主页：获取网站的信息的起点。网站主页：获取网站的信息的起点。网站主页：获取网站的信息的起点。建立网站：建立网站：建立网站：建立网站：在本地硬盘建立一个本地站点（存放网站的所在本地硬盘建立一个本地站点（存放网站的所在本地硬盘建立一个本地站点（存放网站的所在本地硬盘建立一个本地站点（存放网站的所有文档的文件夹）有文档的文件夹）有文档的文件夹）有文档的文件夹）网页设计、制作网页设计、制作网页设计、制作网页设计、制作网页文档复制到服务器中网页文档复制到服务器中网页文档复制到服务器中网页文档复制到服务器中大学计算机信息科技教程（第二版）第5章 网页制作基础155.2.1 网站设计网站设计设计网站的基本步骤设计网站的基本步骤 对站点进行规划。对站点进行规划。对站点进行规划。对站点进行规划。确定站点的主题和风格，明确建立站点的目的。确定站点的主题和风格，明确建立站点的目的。确定站点的主题和风格，明确建立站点的目的。确定站点的主题和风格，明确建立站点的目的。收集素材。收集素材。收集素材。收集素材。合理规划站点结构。合理规划站点结构。合理规划站点结构。合理规划站点结构。例如：旅游天地大学计算机信息科技教程（第二版）第5章 网页制作基础165.2.1 网站设计网站设计 创建站点的基本结构。创建站点的基本结构。创建站点的基本结构。创建站点的基本结构。在本地站点中建立若干在本地站点中建立若干在本地站点中建立若干在本地站点中建立若干个文件夹，用于存放各个文件夹，用于存放各个文件夹，用于存放各个文件夹，用于存放各类文档，必要时还可以类文档，必要时还可以类文档，必要时还可以类文档，必要时还可以建立子文件夹。建立子文件夹。建立子文件夹。建立子文件夹。创建和编辑网页。创建和编辑网页。创建和编辑网页。创建和编辑网页。将本地站点的所有文档发将本地站点的所有文档发将本地站点的所有文档发将本地站点的所有文档发布到服务器。布到服务器。布到服务器。布到服务器。大学计算机信息科技教程（第二版）第5章 网页制作基础175.2.2 定义本地站点定义本地站点新建站点新建站点“站点站点站点站点”/“新建站点新建站点新建站点新建站点”大学计算机信息科技教程（第二版）第5章 网页制作基础18单击开始演示新建站点新建站点大学计算机信息科技教程（第二版）第5章 网页制作基础195.2.2 定义本地站点定义本地站点修改站点的设置信息修改站点的设置信息“站点站点”/“管理站点管理站点”“编辑编辑”大学计算机信息科技教程（第二版）第5章 网页制作基础205.2.2 定义本地站点定义本地站点打开站点打开站点选定站点，单击选定站点，单击选定站点，单击选定站点，单击“完成完成完成完成”按钮按钮按钮按钮同一时刻同一时刻只能打开只能打开一个站点一个站点大学计算机信息科技教程（第二版）第5章 网页制作基础21单击5.2.2 定义本地站点定义本地站点建立多个站点建立多个站点“新建新建新建新建”按钮：再建立另一个站点按钮：再建立另一个站点按钮：再建立另一个站点按钮：再建立另一个站点复制站点复制站点“复制复制复制复制”按钮：建立一个与选定站点相同的站点按钮：建立一个与选定站点相同的站点按钮：建立一个与选定站点相同的站点按钮：建立一个与选定站点相同的站点删除站点删除站点“删除删除删除删除”按钮：删除选定站点按钮：删除选定站点按钮：删除选定站点按钮：删除选定站点导出、导入站点导出、导入站点选中站点，单击选中站点，单击选中站点，单击选中站点，单击“导出导出导出导出”按钮，将站点导出为包含按钮，将站点导出为包含按钮，将站点导出为包含按钮，将站点导出为包含站点设置的站点设置的站点设置的站点设置的 XML XML 文件，其文件扩展名为文件，其文件扩展名为文件，其文件扩展名为文件，其文件扩展名为.ste.ste。以后单击以后单击以后单击以后单击“导入导入导入导入”按钮，可以导入该文件，并成为按钮，可以导入该文件，并成为按钮，可以导入该文件，并成为按钮，可以导入该文件，并成为站点（站点（站点（站点（注意选择站点根文件夹注意选择站点根文件夹注意选择站点根文件夹注意选择站点根文件夹）。）。）。）。将导出的将导出的.ste.ste文件文件和站点的和站点的根文件夹根文件夹一起复制一起复制到另一台电脑上到另一台电脑上根文根文件夹件夹大学计算机信息科技教程（第二版）第5章 网页制作基础22单击5.2.3 管理站点资源管理站点资源定义了本地站点后，在本地计算机中建立了一个用于存放定义了本地站点后，在本地计算机中建立了一个用于存放定义了本地站点后，在本地计算机中建立了一个用于存放定义了本地站点后，在本地计算机中建立了一个用于存放站点中的文档的文件夹。初始状态下，该文件夹是一个空站点中的文档的文件夹。初始状态下，该文件夹是一个空站点中的文档的文件夹。初始状态下，该文件夹是一个空站点中的文档的文件夹。初始状态下，该文件夹是一个空文件夹，在此文件夹中可以进行新建文件夹、新建文件、文件夹，在此文件夹中可以进行新建文件夹、新建文件、文件夹，在此文件夹中可以进行新建文件夹、新建文件、文件夹，在此文件夹中可以进行新建文件夹、新建文件、复制文件、移动文件、删除文件、重命名文件等操作。复制文件、移动文件、删除文件、重命名文件等操作。复制文件、移动文件、删除文件、重命名文件等操作。复制文件、移动文件、删除文件、重命名文件等操作。右击大学计算机信息科技教程（第二版）第5章 网页制作基础235.2.3 管理站点资源管理站点资源新建文件夹新建文件夹 右单击右单击右单击右单击“文件文件文件文件”面板中要新建文件夹的位置（如：站点名面板中要新建文件夹的位置（如：站点名面板中要新建文件夹的位置（如：站点名面板中要新建文件夹的位置（如：站点名称或子文件夹名），在弹出的快捷菜单中选择称或子文件夹名），在弹出的快捷菜单中选择称或子文件夹名），在弹出的快捷菜单中选择称或子文件夹名），在弹出的快捷菜单中选择“新建文件新建文件新建文件新建文件夹夹夹夹”命令，建立一个以命令，建立一个以命令，建立一个以命令，建立一个以“untitleduntitled”为默认名称的文件夹，为默认名称的文件夹，为默认名称的文件夹，为默认名称的文件夹，此时输入新建文件夹的名称（如：此时输入新建文件夹的名称（如：此时输入新建文件夹的名称（如：此时输入新建文件夹的名称（如：PicturePicture），然后按），然后按），然后按），然后按EnterEnter键即可。键即可。键即可。键即可。快捷菜单：新建文件夹快捷菜单：新建文件夹Contents：网页网页Picture:图片图片Css：样式样式Templates：模板模板大学计算机信息科技教程（第二版）第5章 网页制作基础245.2.3 管理站点资源管理站点资源新建文件新建文件 1.1.“文件文件文件文件”/“新建新建新建新建”命令，选择文件类别和类型（如：基命令，选择文件类别和类型（如：基命令，选择文件类别和类型（如：基命令，选择文件类别和类型（如：基本页），单击本页），单击本页），单击本页），单击“创建创建创建创建”按钮。按钮。按钮。按钮。2.2.单击起始页的单击起始页的单击起始页的单击起始页的“从范例创建从范例创建从范例创建从范例创建”栏中列出的选项。栏中列出的选项。栏中列出的选项。栏中列出的选项。单击起始页的单击起始页的单击起始页的单击起始页的“创建新项目创建新项目创建新项目创建新项目”栏中的选项。栏中的选项。栏中的选项。栏中的选项。3.3.“文件文件文件文件”面板，快捷菜单面板，快捷菜单面板，快捷菜单面板，快捷菜单“新建文件新建文件新建文件新建文件”命令，输入文件名；命令，输入文件名；命令，输入文件名；命令，输入文件名；双击打开新建的文件。双击打开新建的文件。双击打开新建的文件。双击打开新建的文件。快捷菜单：新建文件快捷菜单：新建文件1.1.输入文件名：如输入文件名：如Index.htmlIndex.html2.2.双击打开该文件双击打开该文件返回大学计算机信息科技教程（第二版）第5章 网页制作基础255.2.3 管理站点资源管理站点资源移动、复制文件和文件夹移动、复制文件和文件夹 选定拖放选定拖放选定拖放选定拖放将出现将出现将出现将出现“更新文件更新文件更新文件更新文件”对话框，提示是否要更新其对话框，提示是否要更新其对话框，提示是否要更新其对话框，提示是否要更新其他文件中有指向被移动的文件的超链接。他文件中有指向被移动的文件的超链接。他文件中有指向被移动的文件的超链接。他文件中有指向被移动的文件的超链接。拖曳拖曳大学计算机信息科技教程（第二版）第5章 网页制作基础265.2.3 管理站点资源管理站点资源复制文件，选定按住复制文件，选定按住复制文件，选定按住复制文件，选定按住CtrlCtrl键同时拖放键同时拖放键同时拖放键同时拖放Ctrl拖曳拖曳快捷菜单：快捷菜单：剪切剪切 拷贝拷贝 粘贴粘贴返回大学计算机信息科技教程（第二版）第5章 网页制作基础275.2.3 管理站点资源管理站点资源删除、重命名文件和文件夹删除、重命名文件和文件夹 选定按选定按选定按选定按DeleteDelete键键键键选定选定选定选定再次单击再次单击再次单击再次单击返回删除：删除：Delete重命名：重命名：再次单击文件（文件夹）再次单击文件（文件夹）大学计算机信息科技教程（第二版）第5章 网页制作基础285.2.3 管理站点资源管理站点资源导入文件和文件夹导入文件和文件夹 选中非本站点的文件或文件夹选中非本站点的文件或文件夹编辑编辑/拷贝拷贝编辑编辑/粘贴粘贴本站点文件面板中本站点文件面板中从神秘的西藏从神秘的西藏网站网站大学计算机信息科技教程（第二版）第5章 网页制作基础295.2.4 打开、保存和预览网页打开、保存和预览网页打开网页文档打开网页文档“文件文件文件文件”/“打开打开打开打开”“文件文件文件文件”/“打开最近的文件打开最近的文件打开最近的文件打开最近的文件”起始页中列出的最近打开的文件名；起始页中列出的最近打开的文件名；起始页中列出的最近打开的文件名；起始页中列出的最近打开的文件名；单击起始页中单击起始页中单击起始页中单击起始页中“打开打开打开打开”选项，在出现的选项，在出现的选项，在出现的选项，在出现的“打开打开打开打开”对话框选择文件；对话框选择文件；对话框选择文件；对话框选择文件；在在在在“文件文件文件文件”面板中双击文件名。面板中双击文件名。面板中双击文件名。面板中双击文件名。本站点文件面板中本站点文件面板中双击文件名双击文件名返回大学计算机信息科技教程（第二版）第5章 网页制作基础305.2.4 打开、保存和预览网页打开、保存和预览网页保存网页文档保存网页文档 标准工具栏标准工具栏“保存保存”按钮按钮“全部保存全部保存”按钮按钮返回大学计算机信息科技教程（第二版）第5章 网页制作基础315.2.4 打开、保存和预览网页打开、保存和预览网页预览网页预览网页 标准工具栏标准工具栏“在浏览器中预览在浏览器中预览”按钮按钮F12F12键键作业作业参见参见elearning网站网站大学计算机信息科技教程（第二版）第5章 网页制作基础32