网页设计与制作

案例说明本案例中，将简单介绍网页和网站的基本概念、网页的构成元素及网页的本质。案例一指出当当网主页的构成元素

——认识网页和网站相关知识网页就是我们上网时在浏览器中打开的一个个画面。网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页，如新浪网就包括新闻、财经、科技、体育、娱乐等多个板块，而每个板块又包括很多网页。一、网页、网站和主页另外，打开某个网站时显示的第一个网页被称为网站的主页（或首页）。当当网主页二、网页的构成元素网页中的元素按功能可分为站标、导航条、广告条、标题栏和按钮等。站标导航条按钮导航条广告条标题栏三、网页的本质一般情况下，网页中除了包含网页文件（扩展名为.html、.asp等）外，还有图像文件（扩展名为.jpg、.gif等）、脚本文件（扩展名为.js）、样式文件（扩展名为.css）以及视频文件（扩展名为.avi、.flv等）等。右图显示了新华网的主页，可以看到网页中有文字、图像和动画等。三、网页的本质在浏览器中单击右上角的“工具”按钮，在弹出的菜单中选择“文件”>“另存为”菜单，打开“保存网页”对话框，在“保存类型”下拉列表中选择“网页，全部（*.htm;*.html）”，将网页保存到磁盘中，便可看到网页的组成文件，如下图所示。案例实施启动IE浏览器，在“地址栏”中输入“当当”网址“/”，然后按回车键在浏览器中打开“当当”网站首页。一、网页、网站和主页步骤01在网页中指出其中的站标、导航条、广告条、标题栏等，如右图所示。步骤02站标导航条广告条标题栏案例说明本案例首先介绍网页设计中网页颜色的选择与搭配、网页版式及网页尺寸的设计。最后通过案例实施，简单了解网页设计与制作的岗位职责，以使初学者有更明确的学习方向和目的。案例二了解网页设计与制作岗位职责——网页设计基础相关知识（1）网页背景颜色最好选择白色或黑色（大部分网页均选择白色），这样颜色搭配最灵活。一、网页颜色的选择与搭配（2）可根据网站性质确定网站主色调，并且该主色调应贯穿于网站中的全部网页。（3）设计网页时恰当利用同类色、邻近色和对比色，可增强网页的层次感、丰富网页的色彩或突出某些重要内容（如导航条或版块标题）。二、网页版式设计设计网页前应事先规划好站标、导航条、广告条和各版块位置。此外，一些基本的元素要贯穿整个网站中的各个页面，如网页上部的站标、导航条和网页底部的网站信息区。导航条站标内容区广告条网站信息区最好为导航条和各版块标题区设计一组形状别致、颜色突出的背景图像，以方便网页浏览者快速找到自己需要的内容，并使网页看起来更精美别致。对每个版块而言，可通过插入典型图片来吸引访问者。各版块之间以空白区分隔。同时，为使各版块区分明显，还可为其设置不同的背景色或加上边框。三、网页尺寸要根据网页和浏览者的特性，以合适的屏幕分辨率为基准来设置网页尺寸，以使浏览者更加便利地浏览网页。如游戏爱好者大部分都使用高配置系统，所以游戏网站的网页尺寸大都在1024像素×768像素以上，如下图所示。1．屏幕分辨率对网页制作的重要性19寸电脑显示器常用的屏幕分辨率为1280像素×1024像素；17寸电脑显示器常用的屏幕分辨率为1024像素×768像素；平板电脑显示屏常用的屏幕分辨率为768像素×1024像素；智能手机屏常用的屏幕分辨率最低为480像素×800像素，最高可以达到1920像素×1080像素。此处的数字表示显示器横向和纵向的像素（Pixel）数，如屏幕分辨率1024像素×768像素表示将显示器横向分成1024格、纵向分成768格以后，在各个格内分别赋予颜色从而形成图像。对于网页尺寸，是没有硬性规定的。目前常见的网页宽度有1000像素、1190像素和1200像素3种，例如新浪是1000像素、淘宝和京东是1190像素，当当是1200像素。如果需要兼容不同浏览器尺寸，现在比较流行的做法是做成响应式的，即根据不同分辨率显示不同的尺寸，不过这样工作量要大很多。网页高度可根据网页内容来定，一般不要超过3屏。2．常见网页尺寸案例实施一、网页、网站和主页对于网页设计与制作初学者来说，提前了解一下网页设计与制作岗位的职责，可以在今后的学习中有更加明确的方向和目的。登录智联招聘、中华英才网等招聘类网站，搜索职位“网页设计与制作”或“前端开发”，可以搜索到相关职位，如图所示。单击要查看的职位，可以打开该职位的详细信息页，查看职位描述和公司介绍等信息。案例说明在学习制作网页之前，首先了解一下与网站建设相关的基础知识，并从整体上认识一下其制作流程，对后面的学习将是非常有利的。本案例主要介绍与网站建设密切相关的基础知识及网站建设基本流程。案例三企业网站建设基本流程——网站建设基础相关知识Internet的全称是Internetwork，中文称为因特网，是集现代计算机技术和通信技术于一体，基于TCP/IP协议将全世界不同国家、不同地区、不同部门和不同类型的计算机、国家骨干网、广域网、局域网通过网络互联设备连接而成的、全球最大的开放式计算机网络。一、Internet，IP地址和域名因特网上连接了不计其数的服务器和客户机，每一个主机在因特网上都有一个唯一的地址，我们称这个地址为IP地址（InternetProtocolAddress）。IP地址由4个小于256的数字组成，数字之间用点间隔。由于IP地址在使用过程中难于记忆和书写，人们又开发了一种与IP地址对应的字符来表示地址，这就是域名。二、WWW，URL，HTTP和浏览器WWW：WorldWideWeb的缩写，中文称为“万维网”，也可简称为Web，它是互联网上的一个资料空间，在该空间中，任何资源都由“统一资源标识符”（URL）标识，并利用超文本传输协议（HypertextTransferProtocol，HTTP）传送给使用者。URL：统一资源标识符，也称为网址，是世界通用的负责给万维网上的资源（如网页）定位的系统。一个完整的URL由通信协议名称、域名或IP地址、资源在服务器中的路径和文件名4部分组成，如下图所示。HTTP：超文本传送协议，它负责规定浏览器和服务器怎样互相交流。浏览器：是WWW服务的客户端浏览程序。使用它可以向万维网服务器发送各种请求，并对从服务器发来的超文本信息进行解释和显示。三、HTML与CSS简介HTML是HyperTextMarkupLanguage（超文本标记语言）的英文缩写，是用于设计网页的主要语言。用HTML编写的超文本文档称为HTML文档，扩展名为“.html”，也就是网页。CSS（CascadingStyleSheets）中文名为“层叠样式表”，用于设置网页中各标签的样式。“样式”是指网页中各元素的样式，比如文本的大小、颜色以及图像的边框、位置等。“层叠”是指当在HTML文件中引用多个样式文件时，浏览器将依据层叠顺序处理，以避免发生冲突。在网页制作中，HTML属于网页的结构层部分，用来确定网页的内容和结构；CSS属于网页的表现层部分，用于设置网页的样式，主要包括各种标签的外观、大小和位置等。四、网站管理与网页制作相关软件网页是由HTML代码组成的。从广义上来说，制作网页文件有两种方法：一是使用记事本直接输入HTML代码；二是使用可视化编辑软件进行可视化制作。常见的可视化编辑软件有Dreamweaver，Frontpage等，目前使用Dreamweaver的居多。Dreamweaver是由美国Adobe公司推出的一款专业的网页编辑软件，它集网页制作和网站管理于一体，并提供网页的可视化编辑和HTML代码编辑两种操作界面。三、网页的本质AdobePhotoshop，简称“PS”，是由AdobeSystems开发和发行的图像处理软件。Photoshop主要用于处理以像素构成的位图图像。在网页制作中，使用Photoshop可以完成效果图制作和图像素材处理工作。Photoshop存储的图像文件格式有JPEG，GIF，PNG和TIF等，而在网页中使用的图像文件格式通常为JPEG，GIF和PNG。1．PhotoshopFlash是由Adobe公司推出的交互式矢量图和Web动画制作软件，用于设计和编辑Flash文档。近年来，由于能耗和安全问题，Flash插件已经被很多浏览器所放弃和屏蔽，所以不得不逐渐退出网页制作领域。2．Flash案例实施一、网页、网站和主页网站建设流程从整体上来说可以分成3大部分，分别是网站设计、网站制作和后期维护，如下图所示。在这3部分中，本书着重介绍的是网站制作部分，强调3个要点的讲解：设置站点、搭建网页主体结构层、搭建网页样式层。案例实施确定主题：可以分为分析策划和资料收集两个部分。制作网站前，首先需要分析网站的功能及建站的目的，确定网站的用户群和网站内容，即确定网站的主题。在确定主题后，可绘制出网站架构图，并搜集建站所需的相关资料和素材，下图是“中国忆达集团”网站的架构图，包括8个频道（栏目）。另外，可要求客户提供与公司相关的文字及图像等资料，如公司介绍、产品图像等。一、网页、网站和主页步骤01案例实施设计页面：网页设计师与客户沟通，了解客户的基本要求后，制定网站建设方案并使用Photoshop等图像处理软件进行页面效果图设计。页面效果图主要包括网站首页效果图和各频道首页效果图，右图是“中国忆达集团”网站的首页效果图。将效果图设计好后交给客户查看，客户查看后提出修改意见，设计人员根据客户意见进行修改，最终确定网页页面效果图。一、网页、网站和主页步骤02案例实施效果图切片：在效果图得到客户认可后，设计师可使用Photoshop等图像处理软件中的切片工具将效果图切割并保存为JPEG、GIF或PNG格式的小图像，将它们作为制作网页的图像素材。一、网页、网站和主页步骤03设置站点：从这一步骤开始进入到网页制作阶段。首先在本地磁盘创建网站根文件夹及子文件夹，并将制作网页需要的素材资源分类放置在各文件夹中，之后在网页制作软件Dreamweaver中定义站点。右图是“中国忆达集团”网站的本地文件目录及在Dreamweaver中的站点结构。步骤04案例实施制作网页：网页的制作可以分为结构层制作和样式、行为层制作两部分。结构层制作就是使用HTML代码搭建网页的主体结构，如文字、图像、超链接等，可以直接编写代码来实现，也可以在Dreamweaver的可视化界面中操作。在结构层制作好后，就可以使用CSS（层叠样式表）及JavaScript（动态脚本语言）来制作网页的样式层及行为层，完成网页的布局和外观设置。一、网页、网站和主页步骤05测试上传网站：在将网站上传到服务器前，需要对其进行测试及优化。测试包括兼容性测试、超链接测试等；优化是尽可能减小网页文件的体积及日后发生错误的概率。完成测试和优化后，就可以利用Dreamweaver或其他FTP工具将网站发布到所申请的空间服务器上。网站上传后，可继续通过浏览器进行实地测试。步骤06案例实施网站推广：网站上传后，需要进行宣传和推广，以提高网站的访问量及知名度。推广网站的方法有很多，如搜索引擎推广、群发电子邮件、借助同类网站留言、加入友情链接、传统媒体宣传等。一、网页、网站和主页步骤07维护更新：上传网站后，还需要经常对其进行维护和更新，才能吸引浏览者。步骤080102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang课后作业请同学们扫一扫进入班级做作业引用配套微课，学生线上看，系统自动记成绩；大作业一键收发，在线判分扫码申请免费开通→线上建课wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦感谢您的阅读！所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具案例说明Dreamweaver是一款集网页制作和网站管理于一身，所见即所得的网页编辑软件。DreamweaverCC2017是其最新版本，本书就以该软件为例介绍网页设计与制作的相关知识（为便于讲解，后面统一称为DreamweaverCC）。本案例首先启动该软件，然后熟悉其工作界面上的各组成元素，最后在案例实施中调整DreamweaverCC的工作界面，以达到进一步熟悉DreamweaverCC工作界面的目的。案例一调整DreamweaverCC2017工作界面——初识DreamweaverCC2017相关知识安装DreamweaverCC后，单击桌面左下角的“开始”按钮，选择“所有程序”>“AdobeDreamweaverCC2017”，就可以启动DreamweaverCC了，如图所示。一、启动DreamweaverCC三、网页的本质首次启动DreamweaverCC，会让用户选择是新手还是老手，此处选择老手；接着会让用户选择工作区，此处选择“标准工作区”，如左图所示；最后还要选择主题颜色，此处选择灰色，如右图所示。二、认识DreamweaverCC工作界面启动DreamweaverCC后，进入其工作界面，按【Ctrl+N】组合键，在打开的文档中单击“创建”按钮，新建一个文档，如图所示。三、网页的本质应用程序栏位于工作区顶部，左侧显示菜单栏，右侧包含工作区切换器（可在其下拉列表中选择不同的工作区模式）和程序窗口控制按钮。1．应用程序栏工具栏中放置了一些常用按钮，如打开文档、文件管理等。它会随着当前窗口的变化而显示不同的内容。另外，单击最下面的省略号可以打开“自定义工具栏”对话框，可以在该对话框中设置工具栏中要显示的按钮，如图所示。2．工具栏三、网页的本质文档标签栏左侧显示当前打开的所有网页文档的标签（标签上显示相应网页文档的名称）及其关闭按钮；右侧显示当前文档在本地磁盘中的保存路径以及向下还原按钮；文档标签下方显示当前文档中包含的文档以及链接的文档。当用户打开多个网页时，通过单击文档标签可在各网页之间切换。另外，单击下方的包含文档或链接文档，同样可打开相应文档，如图所示。3．文档标签栏三、网页的本质文档工具栏位于文档标签栏上方，包括代码、拆分、设计等按钮。4．文档工具栏代码：在文档窗口中显示代码视图。代码视图是一个用于编写HTML、CSS、JavaScript、服务器语言（如PHP或ColdFusion标记语言（CFML））以及其他任何类型代码的手工编码环境，如右图所示。在代码视图中以不同颜色显示不同类型的代码。此外，利用左侧工具栏中的按钮可以对代码进行相应的操作，如折叠、展开代码，选择标签，检查代码，缩进代码等。三、网页的本质拆分：在文档窗口中同时显示代码视图和设计视图。这样当用户在代码视图中编辑网页源代码后，单击设计视图中的任意位置，会立刻在设计视图中看到相应的编辑结果。设计：在文档窗口中显示设计视图。在设计视图中看到的网页效果类似于在浏览器中看到的效果，用户可在该视图中直接编辑网页中的各个对象。实时视图：单击“设计”按钮右侧的小三角，在其下拉列表中有实时视图，其与设计视图类似，但能更逼真地显示文档在浏览器中的效果，还可以像在浏览器中一样与文档进行交互。三、网页的本质5．状态栏状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息，如下图所示。其中，标签选择器的作用很大，它显示了当前光标所在位置或当前选定内容的标签层次结构（HTML网页文档就是由一个个标签组成的），单击某个标签可以选中网页中该标签所代表的内容，如单击<table>标签，可选中网页中与之对应的表格。三、网页的本质6．“插入”面板“插入”面板包含用于创建和插入对象（如表格、图像和链接）的按钮，这些按钮按几个类别进行组织，默认显示“HTML”类别，如图（a）所示；也可以单击其右侧的下拉三角按钮，在弹出的列表中选择其他类别，如图（b）所示。例如，要在页面中插入图像，可先定位插入点，然后单击“插入”面板“HTML”类别中的“Image”按钮。（a）（b）三、网页的本质7．“文件”面板使用“文件”面板可查看和管理站点中的所有文件和文件夹，包括素材文件和网页文件，如下图所示。三、网页的本质8．“CSS设计器”面板使用“CSS设计器”面板可以“可视化”地创建CSS样式和规则，并设置属性和媒体查询，如下图所示。源：列出与文档相关的所有CSS样式表。单击窗格右上方的按钮，可以创建新的CCS文件或将已有的CSS文件附加到文档，也可以在页面中定义样式。@媒体：显示在“源”窗格中所选源中的全部媒体查询。如果不选择特定CSS，则此窗格将显示与文档关联的所有媒体查询。选择器：显示在“源”窗格中所选源中的全部选择器。如果同时还选择了一个媒体查询，则此窗格会为该媒体查询缩小选择器列表范围。如果没有选择CSS或媒体查询，则此窗格将显示文档中的所有选择器。属性：显示为指定的选择器设置的属性。案例实施一、网页、网站和主页默认状态下，文档窗口右侧是面板组。要关闭面板组，可按【F4】键；再次按【F4】键可恢复原来的状态。步骤01要打开或关闭某个面板，可选择“窗口”菜单下的相应菜单项。例如，可选择“窗口”>“插入”菜单，打开或关闭“插入”面板，如图所示。步骤02案例实施一、网页、网站和主页若要折叠窗口右侧的面板区域，可单击该面板区域右上方的按钮，此时按钮将变成按钮，再次单击可展开面板区域，如下图所示。当面板区域处于折叠状态时，单击某个面板按钮可展开该面板，再次单击可将面板恢复为按钮状态。步骤03案例实施一、网页、网站和主页如果面板组包含多个面板，可在展开面板组后，通过单击面板标签在各面板之间切换。例如，展开“文件”面板组后，可以通过单击“文件”“CSS设计器”标签在两个面板之间切换，如右图所示。步骤04双击某个面板组名称或名称右侧的空白处，可以展开或折叠面板组。步骤05单击面板组标题栏并拖动，可将面板组变为浮动状态。此时可拖动面板组标题栏，将其置于屏幕上的任意位置。要还原面板组到文档窗口右侧的面板区域，可将其重新拖动至面板区域。步骤06案例实施一、网页、网站和主页单击面板组右上角的符号，在弹出的菜单中选择“关闭标签组”，可关闭面板组，如下图所示。步骤07如果用户在更改面板组布局后又想恢复其原始布局，可选择“窗口”>“工作区布局”>“重置‘压缩’”（或“重置‘扩展’”）菜单。步骤08案例说明在开始制作网站前，首先制作网站规划书，并绘制好网站栏目结构图，可以让网站开发人员在开发过程中做到心中有数，有章可循。由于本书侧重网页制作部分，所以此处不再介绍网站规划书的制作。本案例主要介绍网站栏目结构和目录结构的设置。案例二设置企业网站栏目结构和目录结构相关知识只有合理设计网站栏目结构，整个网站内容才能围绕主题有序地开展，下图为一个汽车网站的栏目结构。一、设计网站栏目结构（1）层次清晰，突出主题。（2）体现特征，注重特色设计。（3）方便用户使用。（4）网页在功能分配上合理，且要功能强大。（5）可扩展性能好。（6）网页设计与结构在用户体验上要完美结合。二、创建网站目录结构通常情况下，一个网站往往包含很多文件，大型网站更是如此。如果将这些文件杂乱存放，容易造成两个后果。经常搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，这极大地影响工作效率。1．文件管理混乱站点最终都是要上传到网络服务器上的，而服务器一般都会为根目录建立一个文件索引。当将所有文件都放在根目录下时，即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件，大大增加上传时间。2．上传速度慢三、网页的本质避免以上问题的有效方法就是创建清晰有序的网站目录结构，下图为某“个人网站”的目录结构。创建网站目录结构应遵循以下方法和建议。1．按栏目内容建立子目录2．有些程序存放在特定目录下3．在每个主栏目下都建立独立的images目录4．目录的层次不要太深除上述各项外，其他需要注意的还有以下几项：（1）不要使用中文目录。网络无国界，使用中文目录可能对网址的正确显示造成困难。（2）不要使用过长的目录。尽管服务器支持长文件名，但是太长的目录名不便于记忆。（3）尽量使用意义明确的目录。案例实施在了解了网站栏目结构和目录结构的制作后，接下来绘制企业网站的栏目结构图，效果如下图所示。在开始绘制之前，先简单了解一下网站栏目结构图的绘制流程，如下图所示。案例实施新建空白word文档。启动word2007，选择“文件”>“新建”菜单命令，新建一个空白word文档。一、网页、网站和主页步骤01插入组织结构图。单击文档窗口上方工具栏中的“插入”按钮，切换到“插入”工具栏，单击“插图”区域中的“SmartArt”按钮，打开“选择SmartArt图形”对话框，如下图所示。步骤02案例实施插入形状。在对话框左侧列表中选择“层次结构”，然后在右侧列表中选择要插入的形状，单击“确定”按钮即插入形状，如左图所示。步骤03添加/删除文本框。根据实际需要，单击选中“层次结构”第二层中的文本框，按“Delete”键将其删除；右击第三层最右侧的文本框，在弹出的快捷菜单中选择“添加形状”>“在后面添加形状”菜单，添加一个文本框，并按照同样的方法再添加4个文本框，最终右图所示。步骤04案例实施添加文字。右击文本框，在弹出的快捷菜单中选择“编辑文字”，然后在文本框中输入文字，如下图所示。步骤05案例实施自动套用样式。选择层次结构图，在“设计”工具栏中单击要应用的样式，即可对结构图应用选中的样式，如下图所示。步骤06保存文档。步骤07案例实施根据相关知识中的内容，以及刚刚绘制的网站栏目结构，企业网站目录结构设计如下图所示。案例说明通过前面的学习，我们了解了网站建设的前期工作。本案例主要介绍使用Dreamweaver操作站点的基本方法。DreamweaverCC是一款强大的所见即所得网站制作工具，为了更方便地在其中管理和操作网站内容，需要创建本地站点，从而使本地文件与DreamweaverCC建立关联，让设计人员可以通过DreamweaverCC管理站点文件。案例三创建企业网站本地站点

——站点基本操作相关知识一般在Dreamweaver中制作网页之前，最好先定义站点，然后在站点中创建网页。一、使用Dreamweaver创建和打开本地站点1．创建本地站点首先在本地磁盘创建一个新文件夹作为本地站点根文件夹，以便存放相关文档。此处在D盘新建一个名为“test”的文件夹，并在其中嵌套一个名为“images”的文件夹。步骤01启动DreamweaverCC，在菜单栏中选择“站点”>“新建站点”菜单。步骤02相关知识弹出“站点设置对象”对话框，默认显示“站点”选项，在“站点名称”文本框中输入站点名称，单击“本地站点文件夹”编辑框右侧的“浏览文件夹”按钮，在打开的“选择根文件夹”对话框中选择前面创建的文件夹“test”，然后单击“选择文件夹”按钮，设置网站根文件夹，如下图所示。步骤03用于设置网站文件的存储路径相关知识设置服务器信息。在左侧列表中单击“服务器”选项，对话框右侧将显示服务器相关信息。站点服务器信息可以暂时不填写，在上传网站时再添加。步骤04高级设置。对“高级设置”部分，仅设定“本地信息”即可，如右图所示。设定好后，直接单击“保存”按钮，新的站点就创建完成了。步骤05相关知识2．打开本地站点方法1：在菜单栏中选择“站点”>“管理站点”菜单命令，弹出如左图所示的“管理站点”对话框，选择要打开的站点，单击“完成”按钮即可。方法2：在“文件”面板的“站点”下拉列表中选择已创建的某个站点，也可将其打开，如右图所示。二、使用Dreamweaver管理本地站点管理本地站点的操作主要包括编辑站点、复制站点、删除站点和导出导入站点等。1．编辑站点方法1：选择“站点”>“管理站点”菜单命令，在“管理站点”对话框中双击要编辑的站点，即可弹出此站点相关信息进行编辑，如左图所示。方法1：在“文件”面板中选择站点列表中的“管理站点”选项，也可打开“管理站点”对话框，如右图所示。三、网页的本质首先在“管理站点”对话框中选择要复制的站点，如左图所示，单击“复制当前选定的站点”按钮，在站点列表中即增加一个新的站点“test复制”，表示这个站点是“test”的复制，如右图所示。2．复制站点三、网页的本质在“管理站点”对话框中单击选中要删除的站点名，单击“删除当前选定的站点”按钮，在弹出的对话框中单击“是”按钮确认删除，单击“否”按钮则取消删除。3．删除站点删除站点操作仅将站点信息从Dreamweaver中删除，而站点文件还保留在硬盘原来的位置上，并没有被删除。三、网页的本质在DreamweaverCC中，可以将现有站点导出为一个站点文件，也可以将站点文件导入为一个站点。导出、导入的作用在于保存及恢复站点和本地文件的链接关系。4．导出和导入站点（1）导出站点在“管理站点”对话框的站点列表中单击选中要导出的站点，单击“导出当前选定的站点”按钮，如右图所示。步骤01三、网页的本质在弹出的“导出站点”对话框中为导出的站点文件设置保存位置和名称，然后单击“保存”按钮即可，如下图所示。步骤02导出的站点文件扩展名为“.ste”，本例实现将“test”导出至D盘根目录下，命名为testcopy.ste。步骤03（2）导入站点在“管理站点”对话框中单击“导入站点”按钮，在弹出的“导入站点”对话框中选择要导入的站点文件（后缀为.ste的文件），单击“打开”按钮，站点文件将导入到站点中。案例实施创建本地站点文件夹。将本书附赠素材“素材与实例\ch02”目录下的文件夹“ydjt”拷贝至本地磁盘，作为网站根文件夹。一、网页、网站和主页步骤01新建站点。启动DreamweaverCC，选择“站点”>“新建站点”菜单命令，在弹出的“站点设置对象”对话框中设置站点名称和本地站点文件夹，如下图所示。步骤02案例实施高级设置。单击对话框左侧的“高级设置”选项，设置默认图像文件夹为站点根目录下的“images”文件夹，如下图所示。设置好后，单击“保存”按钮，完成站点的创建。一、网页、网站和主页步骤03案例说明网页文档的基本操作包括新建和保存网页文档，及打开、预览和关闭网页文档。本案例首先介绍网页文档的基本操作，然后通过在案例实施中为企业网站制作欢迎页面来进一步巩固相关知识。案例四为企业网站制作欢迎页面——网页文档基本操作相关知识网页文档的基本操作包括新建网页文档，保存网页文档，以及打开、预览和关闭网页文档等。一、网页文档基本操作在DreamweaverCC中可以创建两种类型的网页文档，一种是直接创建的空白网页文档，另一种是通过DreamweaverCC内置的模板创建具有一定内容和样式的网页文档。1．新建和保存网页文档启动DreamweaverCC，选择“文件”>“新建”菜单，或按【Ctrl+N】组合键，打开“新建文档”对话框。步骤01三、网页的本质在左侧列表中选择一项（此处选择“新建文档”），在“文档类型”列表中选择文档类型（此处选择“HTML”），在“框架”列表中选择“无”（表示不使用框架），在“标题”文本框中输入网页标题，单击“创建”按钮，如图所示。步骤02三、网页的本质创建新文档，如下图所示。步骤03三、网页的本质新建或编辑网页文档后，需要将其保存，才能使所做的设置生效（尤其是要插入图像的文档，由于涉及到路径的问题必须要先保存）。要保存前面新建的网页文档，可选择“文件”>“保存”菜单，或按【Ctrl+S】组合键，打开“另存为”对话框。步骤04在“另存为”对话框的“保存在”下拉列表中选择保存文件的文件夹（此处为前面创建的站点文件夹“test”），在“文件名”文本框中输入文件名（此处为“index”），单击“保存”按钮，即可将文档保存，如右图所示。步骤05三、网页的本质2．打开、预览和关闭网页文档要打开现有的网页文档进行编辑，可选择“文件”>“打开”菜单（或按【Ctrl+O】组合键），打开“打开”对话框。步骤01在“查找范围”下拉列表中选择网页文档所在位置（此处选择本书附赠的“素材与实例\ch03”目录下的“ydjt”文件夹），在“文件列表”中选择要打开的网页文档（此处选择“index.html”），如右图所示。步骤02三、网页的本质单击“打开”按钮，打开网页文档如左图所示。步骤03如要预览文档，可在打开文档后单击“文档工具栏”中的“实时视图”按钮，在文档窗口中预览，如右图所示；也可以按【F12】键，在浏览器中打开预览。步骤04二、“文件”面板基本应用在定义站点后，使用“文件”面板可以非常方便地打开、新建、重命名或删除站点中的文档和文件夹。选择“窗口”>“文件”菜单，打开“文件”面板。要在当前站点的某个文件夹中创建网页文档，可右键单击该文件夹，在弹出的快捷菜单中选择“新建文件”，如图（a）所示。步骤01此时在当前站点中新建了一个网页文档，并且该网页文档名处于可编辑状态，如图（b）所示。步骤02（a）（b）三、网页的本质如要关闭文档，只需单击文档标签栏上的“关闭”按钮（或按【Ctrl+W】组合键），此处将“index.html”文档关闭。执行该操作时，如果文档已修改但未保存，系统会弹出如下图所示的提示框，询问是否保存修改。步骤05提示如果网页文档已修改但未保存，执行预览操作时会弹出提示框，单击“是”按钮，系统将自动保存并在IE浏览器中打开文档。二、“文件”面板基本应用用户可直接输入文档名并按【Enter】键来命名文档。本例是在站点根文件夹下创建名称为“main.html”的网页文档，如右图所示。步骤03要新建文件夹，可在目标文件夹上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”选项，然后给新建的文件夹命名。步骤04要重命名现有的网页文档或文件夹，可首先在“文件”面板中选中文档或文件夹，然后单击文档名或文件夹名（或按【F2】键），此时文档或文件夹名将变为可编辑状态，输入新名称并按【Enter】键即可。步骤05在重命名文档时，注意不要更改其扩展名。当不需要站点中的某个网页文档或文件夹时，可将其删除，方法为：右击要删除的网页文档或文件夹，在弹出的快捷菜单中选择“编辑”>“删除”菜单，然后在弹出的提示框中单击“是”按钮，如下图所示。步骤06除上述操作外，在“文件”面板中双击某个网页文档，可在文档编辑窗口中打开该文档。步骤07在选中需要删除的文档或文件夹后，按键盘上的【Delete】键同样会弹出确认删除提示框，单击“是”按钮即可。案例实施一、网页、网站和主页在“文件”面板“站点”下拉列表中选择案例二中创建的站点“ydjt”，打开该站点。步骤01右击站点根文件夹，在弹出的快捷菜单中选择“新建文件”选项，在该站点中新建文档，并重命名为“welcome.html”。步骤02在“文件”面板中双击文档“welcome.html”，在文档编辑窗口中将其打开。步骤03案例实施一、网页、网站和主页在文档编辑窗口中单击，然后输入文字“欢迎访问中国忆达集团网站！”，如左图所示。步骤04按【Ctrl+S】组合键保存文档，然后按“F12”键，在浏览器中预览页面效果，如右图所示。步骤05拓展知识为便于日后的维护和管理，网站中所有文件和文件夹的命名最好遵循一定的规则。一、网页文档和文件夹命名规则首页文档一般命名为index.html、index.asp或index.php，后缀名与网页本身所使用的技术一一对应。在网页的存放目录中最好不要出现中文，更不要用中文命名网页文档和文件夹。网页文档名中不要使用大写英文字母，最好全部使用小写英文字母。

运算符符号不能用在文件名的开头。比较长的网页文档名可以使用下划线“_”来隔开多个单词或关键字。在大型网站中，分支页面的文件应存放在单独的文件夹中，每个分支中的图像也应该存放在各自单独的文件夹中，存放网页图像的文件夹一般命名为“images”或者“img”。在动态网站中，用来存放数据库的文件夹一般命名为“data”或者“database”。二、HTML的标签构成HTML文件由一系列元素和标签组成，元素是HTML文件的重要组成部分，元素名不区分大小写。HTML用标签来规定元素的属性和它在文档中的位置。1．HTML标签概述HTML标签是由尖括号括起来的关键词，绝大多数HTML标签都是成对出现的，包含首标签和尾标签。首标签的格式为<标签名>，尾标签的格式为</标签名>，首标签和尾标签的中间为标签内容。其完整语法如下：<标签名>标签内容</标签名>成对标签仅对包含在其中的内容起作用，如标题标签<title>和</title>用于界定标题元素的范围。除成对标签外，也存在少量的单标签，其格式为<标签名>，作用是在相应位置插入元素，如换行标签<br>表示在该标签所在位置插入一个换行符。HTML文档源码中一行可以写多个不同的标签，也可将一对标签写在不同的行中，但每对标签必须嵌套使用，不能交叉使用。下表列出了标签的正确用法和错误用法。正确错误<table><tr><td></td></tr></table><table><tr><td></tr></td></table>以上代码中，<td></td>标签对包含在<tr></tr>标签对中，<tr></tr>标签对又包含在<table></table>标签对中，形成父子关系。在HTML文件中，标签的完整定义语法如下：2．HTML标签格式在HTML文件中，每个标签都有名称、可选择的属性和标签内容，标签的属性都在首标签内标明。首标签的基本语法如下：<标签名属性名1＝"属性值1"属性名2＝"属性值2"……>而尾标签的语法格式如下：</标签名><标签名属性名1＝"属性值1"属性名2＝"属性值2"……>标签内容（文本或超文本）

</标签名>属性是可选择的，如果标签中有属性，则标签名和属性名之间以及各属性之间要用空格隔开，各属性值用英文输入法下的双引号括起来。例如，实现超链接的代码如下：<ahref="web/index.html"target="_blank">点击我吧</a>三、HTML网页文档的基本结构HTML文档默认被分为两部分：文档头<head>和文档体<body>，它们都包含在<html></html>标签对中，如我们在前面“案例实施”中制作的企业网站欢迎页面。在Dreamweaver中打开前面创建的企业网站欢迎页面，并切换到代码界面，可看到HTML文档的基本结构，如下图所示。1．文档类型<!doctype>doctype是英文“documenttype（文档类型）”的简写，是HTML中的文档声明，简称为DTD声明，其作用是告知浏览器当前文档所使用的是哪种HTML规范。doctype声明位于文档最前端，标签为<!doctype>，它不属于文档的结构部分。<!doctypehtml>网页中的所有代码内容都包含在<html></html>标签对中，它表示该文档是以超文本标记语言（HTML）编写的。首标签<html>用于HTML文档的最前边，用来标识HTML文档的开始；而尾标签</html>恰恰相反，它放在HTML文档的最后面，用来标识HTML文档的结束，两个标签必须成对使用。如：2．整个文档<html></html>Web浏览器通过判断文件开头的这个声明，来调整解析器的渲染类型。其格式如下：<html>网页文档的全部内容</html>3．文档头<head></head><head>标签是HTML文档所有头部元素的容器，它包含的元素用来描述HTML文档的相关信息，如指定网页标题、编码方式，指示浏览器在何处找到CSS样式表等。<title>标签用于设置网页文档的标题信息。要将网页标题显示在浏览器的标题栏中，只要在<title></title>标签对之间输入要设置的标题信息即可。如：<title>一个简单的页面</title>（1）<title></title>（2）<meta><meta>标签用于定义文档的元数据，如字符编码、作者、版权、关键字和网页说明等。<metacharset="utf-8">基本形式。定义页面使用的字符编码为utf-8。设置关键字。关键字是与网页相关的短语或词组，其作用是协助Internet上的搜索引擎查找网页，格式如下，注意各个关键字之间用逗号隔开。设置说明信息。说明信息是对网页或网站的简单介绍，格式如下。<metaname="description"content="关于网页的说明信息"/>（3）<style></style><style>标签用来声明将样式表内嵌在HTML文档中，可以在<style></style>标签对中书写CSS样式代码，从而规定HTML元素在浏览器中呈现的样式。<metaname="keywords"content="关键字1,关键字2,关键字3,关键字4,关键字5"/>（4）<link></link><link>标签用于定义HTML文档与外部资源之间的关系，常用于链接外部样式表。（5）<script></script><script>标签用于定义客户端脚本，比如JavaScript。<body>标签定义HTML文档的主体部分，在此标签对之间可包含<p></p>、<h1></h1>、<div></div>、<a>和<br>等众多标签，它们定义的文本和图像等都会在浏览器中显示出来。4．文档体<body></body>0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦感谢您的阅读！所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具案例说明本案例首先介绍文档头信息和页面属性的设置方法，然后通过为企业网站新闻显示网页设置头信息和页面属性，来进一步加强和巩固网页基本信息的设置方法。案例一为企业网站新闻显示网页设置页面基本信息——设置网页基本信息相关知识文档头信息包括网页关键字、网页说明等。网页关键字对搜索引擎来说起着不容忽视的作用。用户使用Google、Baidu、Yahoo等搜索引擎搜索网页时，搜索引擎是通过网页关键字找到网页的。一、设置文档头信息说明文本是对网页的简要介绍，除关键字外，搜索引擎在检索网页时还会查看网页的说明文本。将本书附赠素材“素材与实例\ch03”目录下的“text”文件夹拷贝至第2章创建的站点“test”根目录下。步骤01在Dreamweaver中打开“text”文件夹中的“index-1x.html”文档，单击“文档工具栏”中的“拆分”按钮，使文档窗口左侧显示HTML代码，如图所示。步骤02提示如果“文件”面板中没有出现刚刚拷贝的文件夹，可单击“刷新”按钮刷新站点，如右图所示。将插入点置于代码界面中<metacharset="utf-8">标签的后面，在菜单栏中选择“插入”>“HTML”>“Keywords”，弹出“Keywords”对话框，在“关键字”编辑框中输入要为网页设置的关键字，各个关键字之间用逗号或空格隔开，单击“确定”按钮，即在网页中插入关键字，如下图所示。步骤03三、网页的本质将插入点置于代码界面中刚插入的关键字标签后面，在菜单栏中选择“插入”>“Head”

>“说明”，弹出“说明”对话框，在“说明”编辑框中输入要为网页设置的说明信息，单击“确定”按钮，即在网页中插入说明信息，如下图所示。步骤04二、设置网页页面属性一般在创建一个新网页后，首先要对网页进行页面属性设置，主要是对“标题/编码”的设置。继续在前面的文档“index_1x.html”

中操作，在文档窗口设计界面中任意位置单击鼠标右键，在弹出的快捷菜单中选择“页面属性”，将弹出“页面属性”对话框，对话框左侧的“分类”列表中显示可以设置的类别，右侧显示相应的设置项，默认显示“外观（CSS）”设置项，如图所示。步骤01三、网页的本质在左侧的“分类”列表中选择“标题/编码”，然后在“标题”编辑框中输入网页标题“海的女儿”，“编码”类型保持默认，如下图所示。步骤02三、网页的本质“跟踪图像”是Dreamweaver一个非常有效的功能，它允许用户在网页中将原来的平面设计稿作为辅助背景。这样，用户就可以非常方便地定位文字、图像、表格等网页元素在页面中的位置。在“跟踪图像”选项中，“跟踪图像”编辑框用于设置跟踪图像的路径和名称。在实际生成网页时，跟踪图像并不显示在网页中。在“透明度”标尺上可以通过拖动滑块改变设计图（跟踪图像）的透明度，如下图所示。案例实施将本书附赠素材“素材与实例\ch03\ydjt”目录下的所有文件拷贝至项目二中创建好的网站“ydjt”根目录下，将两个“images”文件夹合并。一、网页、网站和主页步骤01启动DreamweaverCC，在“文件”面板中打开“ydjt”站点，双击其中的“xinwen_1x.html”文档，将其打开，如右图所示。步骤02案例实施参照相关知识第一节中的操作，将插入点置于代码界面<metacharset="utf-8">标签的后面，打开“关键字”对话框，在“关键字”编辑框中输入要为该网页设置的关键字，如左图所示。一、网页、网站和主页步骤03单击“确定”按钮即在网页中插入关键字，按照同样的方法插入说明文本，最终效果如右图所示。步骤04案例实施在设计界面空白处单击鼠标右键，在弹出的快捷菜单中选择“页面属性”，打开“页面属性”对话框，单击左侧“分类”列表中的“标题/编码”选项，然后在“标题”文本框中输入网页标题“忆达新闻”，并单击“确定”按钮完成设置，如下图所示。一、网页、网站和主页步骤05保存文档，并在浏览器中预览，可看到浏览器标题栏中的标题为刚刚设置的信息，如下图所示。步骤06案例说明文本是网页中最基本的元素，它以平淡、直白的方式将信息传达给浏览者，通常内容丰富的网页都有大量的文本。在Dreamweaver中可以直接输入文本，也可以从其他文档中复制文本，还可以插入水平线和特殊字符等。本案例主要介绍在网页中输入各种文本的相关知识。案例二为企业网站新闻显示网页设置文本内容——设置网页文本相关知识使用DreamweaverCC向网页文档中添加文本的方法有多种，可以直接在“设计”界面中输入文本，也可以通过复制、粘贴的方法添加文本。一、添加普通文本在Dreamweaver中输入文本的方法非常简单，只要将插入点定位在网页的某个位置（如某个表格单元格内），然后选择输入法输入文本就可以了。对于大量的外部文本，可利用剪贴板将其拷贝至网页文档中。三、网页的本质启动DreamweaverCC，在“文件”面板“站点”下拉列表中选择“test”，分别双击“text”文件夹中的“index_2x.html”和“text1.txt”文档将它们打开，如下图所示。步骤01三、网页的本质在“text1.txt”文档窗口中单击，按【Ctrl+A】组合键全选文本，然后按【Ctrl＋C】组合键复制选中的文本，如下图所示。步骤02切换至网页文档“index_2x.html”，将插入点置于文档窗口中的方框内，按【Ctrl+V】组合键粘贴文本，如下图所示。步骤03二、插入特殊符号网页文本中除包含汉字和字母外，往往还包含一些特殊符号，如注册商标符号®、版权符号©等。这些特殊符号一般不能从键盘直接输入。在DreamweaverCC中，可单击“插入”面板“常用”类别中的“字符”按钮，然后在其下拉列表中选择相应字符进行插入，如下图所示。三、网页的本质如果在“字符”下拉列表中没有找到需要的字符，可以通过选择该列表中最下方的“其他字符”命令，打开“插入其他字符”对话框，这样就能获取更多的特殊字符了，如下图所示。在该对话框中选中要插入的字符后，单击“确定”按钮即可插入。三、添加空格由于在HTML格式的文档中只允许有一个空格，所以在Dreamweaver中添加空格的方法与Word等文字编辑软件中不一样。若需要添加多个空格，可通过以下方法实现。（1）将输入法切换到全角状态，直接按空格键；如需添加多个空格，重复此操作。（2）在菜单栏中选择“插入/HTML/不换行空格”菜单，可添加一个空格；如需添加多个空格，重复此操作。（3）在文档窗口“代码”界面中，直接在源代码中加入代表空格的HTML代码“ ”。四、添加与设置水平线水平线是网页中常见的一种元素。在网页排版中，水平线的作用是分隔文本和对象，使段落区分更清楚、明了。水平线的添加方法是：首先将插入点定位在目标位置，然后选择菜单栏中的“插入/HTML/水平线”菜单命令，效果如下图所示。三、网页的本质三、网页的本质知识库如要改变水平线颜色，可在选中水平线后切换至代码视图，在水平线标签<hr>中输入“color=‘颜色代码’”，如下图所示。一般无法直接在编辑画面看到水平线的颜色设置效果，只有在浏览器中预览时才能看到。五、创建列表列表是指将具有相似特性或某种顺序的文本进行有规则地排列，常用于条款或列举类型的文本中，是一种简单且实用的段落排列方式。在文档窗口中，可以用现有文本或新文本创建无序列表和有序列表，这是最常使用的两种列表。项目列表文字前面一般用项目符号作为前导字符，效果如右图所示。1．项目列表将插入点置于需要创建项目列表的位置。在“插入”面板“HTML”类别中单击“项目列表”按钮，项目符号将出现在鼠标光标前，如右图所示。步骤01在项目符号前导符后面输入相应的文本内容，按【Enter】键分段后，下一个项目前导符会自动出现。步骤02继续输入其他列表项文本内容，完成整个项目列表的文字输入后，按两次【Enter】键即可停止列表输入。步骤03三、网页的本质编号列表前通常有数字或字母作前导字符。这些字符可以是阿拉伯数字、英文字母或罗马数字等，效果如右图所示。2．编号列表案例实施一、网页、网站和主页启动DreamweaverCC，在“文件”面板中打开“ydjt”站点，分别双击其中的“xinwen_2x.html”和“text.txt”文档，将它们打开，如下图所示。步骤01案例实施将插入点置于“text.txt”文档窗口中，按【Ctrl+A】组合键选中所有文本，再按【Ctrl+C】组合键复制所选文本。一、网页、网站和主页步骤02单击“文档标签栏”中的“xinwen_2x.html”，切换到该文档，将插入点置于id=“content”的Div中，按【Ctrl+V】组合键粘贴文本，如下图所示。步骤03案例实施一、网页、网站和主页知识库在定位插入点时，可以打开“拆分”视图，对照代码进行操作，以免出错。根据需要，按照前面介绍的方法为文本分段。步骤04将插入点置于文本标题“董事局主席尚利永光荣当选中国光彩事业促进会副会长”后面，选择“插入”>“HTML”>“水平线”菜单，在标题下方插入水平线，如下图所示。步骤05按【Ctrl+S】组合键保存网页，此时便完成了网页中文本内容的设置。步骤06拓展知识大部分网页中的列表均采用项目列表，在HTML中使用<ul></ul>标签对定义，包含的列表项使用<li></li>标签对定义，如下表所示。列表项的默认符号为小圆点●，要改变符号类型或去除符号，可使用CSS属性进行控制。列表在HTML中的表示1．项目列表代

码效

果<body><ul><li>咖啡</li><li>牛奶</li><li>奶茶</li></ul></body>三、网页的本质编号列表在列表项前用编号表示，浏览者可以清晰地了解每项的顺序。其中<ol></ol>标签对用来定义编号列表，包含的列表项用<li></li>标签对定义，默认序号为1、2、3，如右表所示。2．编号列表除上述两种列表外，还有一种定义列表，是项目及其注释的组合。其中<dl></dl>标签对表示定义列表；<dt></dt>标签对表示每个定义的名称（项目名）；<dd></dd>标签对表示每个定义名称的详细内容（注释），如右表所示。3．定义列表代

码效

果<body><ol><li>咖啡</li><li>牛奶</li><li>奶茶</li></ol></body>代

码效

果<body><dl><dt>咖啡</dt><dd>黑色的热饮</dd><dt>牛奶</dt><dd>白色的冷饮</dd></dl></body>案例说明添加了图像的网页往往更为生动和吸引人，本案例通过为企业网站新闻显示网页设置图像，来学习在网页中插入图像的方法。案例三为企业网站新闻显示网页设置图像

——设置网页图像根据实现方式的不同，网页中的图像可分为两大类，一类是插入图像，它是用HTML代码实现的；另一类是背景图像，一般是通过设置CSS样式实现的。本案例主要讲解插入图像的方法。相关知识在网页中插入图像时，最好能保证网页和要插入的图像均位于当前站点中（图像一般位于img文件夹或images文件夹中），否则很容易出现网页发布后看不到图像的情况。一、插入与编辑图像启动DreamweaverCC，在“文件”面板中打开站点“test”，并双击“text”文件夹中的“index_3x.html”文档将其打开。步骤01将插入点置于水平线右侧，单击“插入”面板“HTML”类别中的“Image”按钮，如右图所示。步骤02打开“选择图像源文件”对话框，在上方的下拉列表中选择图像所在文件夹，在文件列表中选择要插入的图像文件，然后单击“确定”按钮，插入图像，如下图所示。步骤03右键单击插入的图像，在弹出的快捷菜单中选择“属性”，可打开“属性”面板，在其中可对图像的各项属性进行修改设置，如下图所示。步骤04如果所选图像文件不在当前站点中，DreamweaverCC会自动将其复制到站点根目录下的图像文件夹中。下面简单介绍一下图像“属性”面板中各设置项的意义。Src：指定图像的源文件地址。

类：可对图像应用类样式。宽和高：设置图像在页面中的宽度和高度。替换：为图像输入一个名称或一段简短的描述，在浏览网页时，当鼠标移动到图像上时，即可显示该信息。链接：指定图像的超链接。目标：单击其后的下拉按钮，在弹出的下拉列表中可选择链接目标的打开方式。编辑：可对图像进行编辑，包括从源文件更新、裁切、重新取样、亮度和对比度以及锐化图像等操作。地图：通过热点工具，在图像上绘制热区，并设置其名称、链接地址等。其中，热点工具可分为指针热点工具、矩形热点工具、椭圆形热点工具和多边形热点工具。启动DreamweaverCC，在“文件”面板中打开“test”站点，然后在“swapimg”文件夹中新建文档“main_1x.html”，并双击在文档编辑窗口中打开。二、插入鼠标经过图像在Dreamweaver中可以轻松实现图像翻转效果，也就是我们通常所说的鼠标经过图像，当鼠标指针经过一幅图像时，它会显示为另一幅图像。鼠标经过图像实际上是由两幅图像组成的，即初始图像（页面首次装载时显示的图像）和替换图像（当鼠标指针经过时显示的图像）。将“swapimg”文件夹拷贝至“test”站点根目录中。步骤01步骤02在文档窗口中单击，确定图像插入位置，然后单击“插入”面板“HTML”类别中的“鼠标经过图像”按钮。步骤03打开“插入鼠标经过图像”对话框，单击“原始图像”编辑框右侧的“浏览”按钮，如下图所示。步骤04打开“原始图像：”对话框，选择要插入的图像，单击“确定”按钮，如下图所示。步骤05回到“插入鼠标经过图像”对话框，按照同样的方法设置“鼠标经过图像”，并在“替换文本”编辑框中输入文字解说内容，在“按下时，前往的URL”编辑框中设置链接地址，此处输入“#”设置空链接，最后单击“确定”按钮，插入鼠标经过图像，如图所示。步骤06保存文档，并在浏览器中预览，效果如下图所示。步骤07案例实施一、网页、网站和主页启动DreamweaverCC，在“文件”面板中打开“ydjt”站点，双击其中的“xinwen_3x.html”文档，将其打开。步骤01将插入点置于id=“content”的Div中文本的后面，单击“插入”面板“HTML”类别中的“Image”按钮，如下图所示。步骤02案例实施一、网页、网站和主页在打开的“选择图像源文件”对话框中选择要插入的图像，然后单击“确定”按钮，如下图所示。步骤03案例实施一、网页、网站和主页插入图像，并保存文档，效果如下图所示。步骤04拓展知识目前在网页中可以使用的图像格式有JPEG、GIF和PNG。一、网页中可用的图像格式

JPEG（联合图像专家组标准）格式适于表现色彩丰富，具有连续色调的图像，如各种照片。

GIF（图形交换格式）格式最多只能包含256种颜色，因而适合表现色调不连续或具有大面积单一颜色的图像，如卡通画、按钮、图标、徽标等。

PNG（便携网络图像）格式集JPEG和GIF格式的优点于一身，图像质量高且可包含透明区。二、图像在HTML中的表示图像的HTML标签代码如下：<imgsrc="images/1.jpg"width="400"height="300"alt="">上述代码表示插入一个images文件夹下名为1.jpg的图像，并将图像的宽和高分别设为400和300像素，alt表示替换文本，此处为空。0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦感谢您的阅读！所有教学资源，我们给；所有复杂操作，我们做；图书附赠，永久免费，只为老师用书更方便课件教案微课扫码题库建课互评考试平台

学习工具案例说明对于一些风格活泼的网站来说，只有文本和图像的网页会显得很单调，为丰富网页内容，可以在网页中插入HTML5音频和视频，以及插件。案例一制作音视频在线播放页面——在网页中插入HTML5音视频相关知识一、插入HTML5Audio启动DreamweaverCC，在“文件”面板中双击打开站点“blog”中的“music.html”文档。步骤02将插入点置于表格中“单击播放”文字所在单元格下方的单元格中，单击“插入”面板“HTML”类别中的“HTML5Audio”，插入HTML5音频，如下图所示。步骤03将本书附赠的“素材与实例\ch04”目录下的“blog”文件夹拷贝至本地磁盘，并以“blog”为站点文件夹，在DreamweaverCC中创建站点“blog”。步骤01按【Ctrl+F3】组合键打开“属性”面板，选中刚插入的“HTML5Audio”，在“属性”面板上单击“源”编辑框右侧的“浏览”按钮，如下图所示。步骤04ID：用于设置HTML5音频的标题。源：用于设置HTML5音频源文件。Controls：选中该属性，表示显示音频播放控件。Autoplay：选中该属性，则音频在加载完成后自动播放。Loop：选中该属性，则音频将循环播放。Muted：设置音频是否静音。Preload：选中该属性，则音频在页面加载的同时进行加载，并预备播放。如果已选中“Autoplay”，则忽略该属性。“Alt源1”和“Alt源2”：用于设置当“源”编辑框中设置的音频格式不被当前浏览器支持时，打开的第2种和第3种音频格式。打开“选择音频”对话框，在该对话框中选择一个音频文件，此处选择“1111.mp3”，然后单击“确定”按钮，如下图所示。步骤05按【Ctrl+S】组合键保存文档，然后在浏览器中预览，单击控件中的“播放”按钮可播放音频，效果如下图所示。步骤07在“属性”面板中默认选中Controls复选框，显示音频播放控件。步骤06二、插入HTML5VideoHTML5Video提供了一种将电影或视频嵌入网页的标准方式。同HTML5Audio的插入类似，定位插入点后，通过单击“插入”面板“HTML”类别中的“HTML5Video”，可以插入HTML5视频。

Flash回退：用于设置在不支持HTML5视频的浏览器中显示的SWF文件。在插入HTML5视频后，还需要在“属性”面板中设置其属性，如下图所示。

“W”和“H”：用于设置视频对象的宽度和高度，默认单位为像素。三、插入并编辑插件在“blog”站点中新建文档“chj.html”，并将其在文档编辑窗口中打开。步骤01将插入点置于文档编辑窗口中，单击“插入”面板“HTML”类别中的“插件”按钮，打开“选择文件”对话框。步骤02在对话框的文件列表中选择要插入的文件“cj.mp3”，并单击“确定”按钮，插入插件，如右图所示。步骤03选中插入的音频文件，在“属性”面板“宽”和“高”文本框中可设置音频插件的大小，以完全显示播放控制按钮，如下图所示。步骤04案例实施一、网页、网站和主页启动DreamweaverCC，在“文件”面板中双击“blog”站点中的“ys3.html”文档，将其打开。步骤01将插入点置于网页中部“自制动画‘汽车鉴赏片头’”文本的下方，单击“插入”面板“HTML”类别中的“HTML5Video”，插入HTML5视频，如下图所示。步骤02案例实施选中页面中的HTML5