多媒体技术与应用立体化教程（微课版）（第3版） 课件 项目六 应用Dreamweaver制作网页

多媒体技术与应用立体化教程（微课版）项目六应用Dreamweaver制作网页目录Contents任务一制作“特屿森家居”站 任务二制作“特屿森家居”网站首页任务三为“特屿森家居”网站活动

页添加超链接任务四制作“特屿森家居”公司简

介网页 综合实战制作“重庆老火锅”网站 一、任务描述“特屿森家居”站点参考效果二、知识准备Dreamweaver2021的工作界面（一）认识Dreamweaver工作界面二、知识准备Dreamweaver文档窗口的组成“插入”面板二、知识准备（二）Dreamweaver的基本操作1.了解命名规则网站内容的分类决定了站点中创建文件夹和文件的数量，通常网站中每个分支的所有文件统一存放在单独的文件夹中，根据网站的大小，又可细分文件夹。在制作网页时，为保证制作的网页能够顺利生效，最好遵循以下4种命名规则。1234汉语拼音英文原意拼音缩写英文缩写二、知识准备2.设置“常规”和“新建文档”参数若需要提升进入工作界面的时间和工作效率，可设置“常规”和“新建文档”参数。选择【编辑】/【首选项】命令,或按【Ctrl+U】组合键，打开“首选项”对话框，“分类”列表中默认选择“常规”选项，取消选中“显示开始屏幕”复选框，单击应用按钮，再次启动Dreamweaver时，将不会显示欢迎界面。在“首选项”对话框的“分类”列表框中选择“新建文档”选项，其右侧的“默认文档的类型”下拉列表中重新设置默认文档的类型，单击应用按钮，再次启动Dreamweaver新建文件时，默认文件的类型将会显示为当前设置的选项。设置“常规”参数直排文字工具3.新建文件在使用Dreamweaver制作网页时，首先需要新建文件。具体操作方法为：选择【文件】/【新建】命令，打开“新建文档”对话框，在其中自行设置后，单击创建按钮，创建一个HTML文档。二、知识准备4.保存文件完成网页的制作后，需保存文件。具体操作方法为：选择【文件】/【保存】命令，或选择【文件】/【另保存】命令，打开“另存为”对话框，设置存储位置、文件名和保存类型等参数后，单击保存按钮。二、知识准备（三）认识站点1.认识“管理站点”对话框“管理站点”对话框中部分选项的作用二、知识准备2.新建站点“管理站点”超链接使用命令使用“管理站点”对话框选择【站点】/【新建站点】命令，打开“站点设置对象”对话框，设置站点的名称、保存位置等参数，单击保存按钮。在“管理站点”对话框中单击定义服务器按钮，在打开的“站点设置对象”对话框中进行设置，单击保存按钮。使用“管理站点”对话框在“管理站点”对话框中单击定义服务器按钮，在打开的“站点设置对象”对话框中进行设置，单击保存按钮。二、知识准备3.编辑站点编辑站点是指重新设置v参数的站点，如为创建的站点输入URL。输入URL的方法为：在“管理站点”对话框中选择需要修改的站点，单击“编辑当前选定的站点”按钮，在打开的“站点设置对象”对话框左侧选择“高级设置”选项，在展开的列表中选择“本地信息”选项，单击选中“站点根目录”单选项，在“WebURL”文本框中输入URL，单击保存按钮。二、知识准备4.导出和导入站点01导出站点的方法为02导入站点的方法为在“管理站点”对话框中选择需导出的站点，单击“导出当前选定的站点”按钮，打开“导出站点”对话框，选择导出站点保存的位置，其他保持默认设置，单击保存按钮。打开“管理站点”对话框，单击导入站点按钮，打开“导入站点”对话框，找到需要导入站点的位置并将其选中，单击打开按钮，返回“管理站点”对话框，查看导入的站点，单击完成按钮，返回Dreamweaver工作界面，将自动打开“文件”面板显示导入的站点。二、知识准备5.管理站点中的文件和文件夹B移动和复制文件或文件夹D重命名文件或文件夹A添加文件或文件夹C删除文件或文件夹（一）创建与编辑站点三、任务实施设置站点名称设置站点文件夹存放位置三、任务实施设置WebURL编辑“特屿森家居”站点新建站点的效果（二）管理与导出站点内容三、任务实施重命名HTML文件新建并重命名文件夹新建HTML文件查看复制的文件夹更新文件链接新建文件和文件夹三、任务实施导出站点目录Contents任务一制作“特屿森家居”站 任务二制作“特屿森家居”网站首页任务三为“特屿森家居”网站活动

页添加超链接任务四制作“特屿森家居”公司简

介网页 综合实战制作“重庆老火锅”网站 一、任务描述“特屿森家居”网站首页效果（一）页面属性1.外观（CSS）二、知识准备2.设置“外观（HTML）”属性3.设置“链接（CSS）”属性二、知识准备4.设置“标题（CSS）”属性5.设置“标题/编码”属性二、知识准备6.设置“跟踪图像”属性（二）网页元素1.插入文本二、知识准备文本是网页中最基本的元素之一，包括标题、段落、列表等，文本不仅是网站内容和信息的核心载体，更是网站与用户之间进行交流和沟通的主要手段。在Dreamweaver中插入文本的方法主要有以下两种。输入文本复制并粘贴文本“属性”面板的两种模式2.插入表格二、知识准备表格通常用于在网页上显示数据和信息，如成绩单、日历、价格表等。此外，也可以使用表格布局页面。插入表格3.插入图像在选择和使用图像时，需要注意文件大小和格式，以确保它们能够快速地加载并在不同设备上正确显示。选择图像二、知识准备通过“文件”面板插入图像通过“资源”面板插入图像图像的“属性”面板4.插入音频二、知识准备在Dreamweaver中插入音频是通过插入<audio>标签来实现的。插入<audio>标签<audio>标签的“属性”面板5.插入视频二、知识准备在Dreamweaver中插入视频是通过插入<video>标签来实现的。插入<video>标签<video>标签的“属性”面板（三）鼠标经过图像二、知识准备鼠标经过图像是一种具有特殊效果的图像，在浏览器中查看网页时，若将鼠标指针移动到鼠标经过图像上，就会显示另外一张图像。创建鼠标经过图像的方法为：在“插入”面板中单击鼠标经过图像按钮，打开“插入鼠标经过图像”对话框，选择原始图像和鼠标经过图像的路径，并设置相关参数，再单击确定按钮。插入鼠标经过图像（一）设置页面属性三、任务实施<video>标签的“属性”面板<video>标签的“属性”面板（二）插入页面内容三、任务实施插入表格复制素材文件三、任务实施插入“logo.png”图像文件合并单元格并设置宽度插入“main.png”图像文件输入文本并设置单元格的水平对齐方式三、任务实施输入页脚文本插入<p>标签设置页脚文本格式（四）添加背景音乐三、任务实施插入<audio>标签设置<audio>标签属性目录Contents任务一制作“特屿森家居”站 任务二制作“特屿森家居”网站首页任务三为“特屿森家居”网站活动页添加超链接任务四制作“特屿森家居”公司简

介网页 综合实战制作“重庆老火锅”网站 “特屿森家居”网站活动页效果一、任务描述二、知识准备（一）超链接的组成FEB主机名D路径锚记A访问方案C端口文件URL的基本格式为：“访问方案://主机名:端口/路径/文件#锚记”，例如“http://baike.abc***:80/view/10021486.html#2”。二、知识准备（二）超链接的种类文本超链接图像超链接文件下载超链接文件下载超链接脚本超链接空超链接电子邮件超链接二、知识准备（三）超链接的创建方法1.创建文本超链接“Hyperlink”对话框输入HTML代码2.创建图像超链接为整个图像创建超链接为图像热点创建超链接二、知识准备3.创建锚点超链接为整个图像创建超链接为图像热点创建超链接为图像热点创建超链接跳转到其他网页的锚点超链接二、知识准备4.创建文件下载超链接创建文件下载超链接5.创建电子邮件超链接“电子邮件链接”对话框通过HTML代码创建二、知识准备6.创建空超链接创建空超链接创建脚本超链接7.创建脚本超链接复制素材文件为“注册”文本添加文本超链接三、任务实施（一）插入文本超链接和图像超链接为“登录”文本添加文本超链接为Logo图像添加图像超链接复制素材文件为“注册”文本添加文本超链接三、任务实施（二）插入文件下载超链接、脚本超链接和电子邮件超链接插入电子邮件超链接为“沙发系列”图像设置ID属性为“餐桌系列”图像设置ID属性接三、任务实施（三）插入图像热点超链接和锚点超链接为“柜系列”图像设置ID属性为“床系列”图像设置ID属性为沙发系列图标创建热点并设置超链接为餐桌系列图标创建热点并设置超链接三、任务实施为柜系列图标创建热点并设置超链接为床系列图标创建热点并设置超链接目录Contents任务一制作“特屿森家居”站 任务二制作“特屿森家居”网站首页任务三为“特屿森家居”网站活动页添加超链接任务四制作“特屿森家居”公司简介网页 综合实战制作“重庆老火锅”网站 “特屿森家居”网站首页效果一、任务描述CSS（CascadingStyleSheets，层叠样式表）是一种用来表现HTML或XML等文件样式的计算机语言，目前的最新版本是CSS3。CSS语法规则（一）CSS样式二、知识准备1.CSS语法规则2.CSS样式的书写位置CSS样式按照书写位置的不同可以分为外部样式、内部样式和行内样式3种。超链接外部CSS文件导入外部CSS文件内部样式行内样式使用<div>标签可以在页面中创建一个容器，通常被称为div盒子。<div>标签本身无任何显示效果，但是可以在其中添加任意网页元素，也可以通过CSS样式来控制<div>标签以及其内部网页元素的样式。（二）<div>标签二、知识准备“插入Div”对话框div+CSS盒子模型是布局网页的常用方式，与HTML中的表格（table）布局不同的是，div承载的是结构，CSS则精确控制页面的布局、元素等。div+CSS盒子模型完美地实现了结构和表现的结合，相较于传统的表格布局，更便于后期进行修改、维护等。（三）div＋CSS盒子模型二、知识准备div+CSS盒子模型（四）div＋CSS盒子模型的优势二、知识准备1.网页加载速度更快2.修改效率更高3.搜索引擎更容易检索4.站点更容易被访问三、任务实施（一）添加<div>标签和网页内容复制素材文件插入header<div>标签插入logo<div>标签三、任务实施输入公司简介内容设置“标题1”格式插入3个<div>标签并插入图像插入header_right<div>标签并输入内容三、任务实施设置加粗显示插入footer<div>标签并输入内容创建无序列表设置“标题2”格式三、任务实施（二）创建并应用CSS样式创建新的CSS文件使用快速选择工具减去选区三、任务实施创建并设置“.logo”CSS样式创建并设置“.header_right”CSS样式三、任务实施创建并设置“.main”CSS样式创建并设置“.left”CSS样式三、任务实施创建并设置“.leftimg”CSS样式创建并设置“.right”CSS样式三、任务实施创建并设置“h1”CSS样式三、任务实施创建并设置“p”CSS样式创建并设置“h2”CSS样式三、任务实施创建并设置“p”CSS样式创建并设置“.footer”CSS样式三、任务实施创建并设置“.footerp”CSS样式目录Contents任务一制作“特屿森家居”站 任务二制作“特屿森家居”网站首页任务三为“特屿森家居”网站活动页添加超链接任务四制作“特屿森家居”公司简介网页 综合实战制作“重庆老火锅”网站 实战描述“重庆老火锅”网站首页参考效果实训思路及步骤制作页头时，可以使用灰色作为背景，并在其中添加导航栏、主图和3张小图片；