第6章-DreamWeaver网页设计

2020/6/6，1，第6章web设计工具Dreamweaver，基于大学计算机和网络应用程序，高等教育出版社高等教育电子视听出版社，2020/6/6，2，内容简介本章主要包括HTML标记，使用HTML语言的过程，HTML语言说明如何使用可视化web开发工具Dreamweaver构建站点和设计网页。学习重点是使用Dreamweaver创建站点，了解站点的结构，以及使用Dreamweaver创建网页。了解站点概念，创建站点和了解站点中的单个页面关系，以及创建简单的网页。决定在课堂上讲4 6个小时，机器6 8个小时。6.1HTML语言和HTML超文本文档分为两部分：文档头(head)和文档正文(body)。文档头包含要显示的特定内容的整个文档的一些必需定义。称为标记的HTML命令用于控制文档的外观和内容。HTML文档中的大多数标签成对出现。例如，指示文档的开始，指示文档的结束，和之间的部分构成HTML文档。是文档的头标记，在浏览器窗口中，头信息不显示在正文中。此标记可以插入文件的标题和其他标记，以说明整个文件的某些公用属性。标记对之间的部分是文档正文。2020/6/6，3，6.1HTML语言，嵌套在标题标签中，显示在浏览器窗口的标题栏中。标记之间的文本是正文，是要在浏览器中显示的页面内容。要创建简单的HTML文档，请在记事本中编辑代码。以html格式保存即可。要显示页面，可以在浏览器中打开文档。2020/6/6，4，6.2Dreamweaver概述，6.2.1DreamweaverCS5的界面，DreamweaverCS5界面设计为浮动面板，将整个窗口和面板合并为一个更大的区域，从而减少系统资源的占用，并使文档的操作更加直观高效。1 .菜单栏2。“插入”工具栏插入图像、声音、多媒体动画、表格、图层、框架、表单、Flash和ActiveX等web元素。3.“文档”工具栏“代码”视图“拆分”视图“设计”视图，2020/6/6，5，6.2Dreamweaver概述，配置为6.2.1DreamweaverCS5的界面，4。“文档”窗口用于显示当前正在编辑的网页的内容。通过从“文档”工具栏切换到其它视图，您可以在“文档”窗口中手动编写和编辑可视化编辑、应用程序开发、HTML、JavaScript、服务器语言代码以及任何其它类型的代码。2020/6/6，6，6.2Dreamweaver概述，6.2.1DreamweaverCS5的接口。状态栏状态栏位于文档窗口的底部，提供有关当前文档的其他信息。6.“属性”面板“属性”面板是页面编辑中最常用的面板，主要用于设置页面元素(如文本大小、图像编辑、表格大小等)的属性，在创作网页时，“属性”面板不会将所有属性加载到面板中，而是根据用户选择的对象动态显示这些属性。2020/6/6，7，6.2Dreamweaver概述，6.2.1DreamweaverCS5的接口配置，7。面板组面板组是停靠在标题下的相关面板的集合。常用工具面板包括CSS、应用程序、文件面板和标签检查器。在此，您可以使用“文件”面板管理组织站点的文件和文件夹，这与Windows资源管理器类似。通过运行“窗口|隐藏面板”命令，可以隐藏面板以获得更多工作空间，然后按键重新显示面板。2020/6/6，8，6.2Dreamweaver概述，创建6.2.2站点和主文件，1 .站点结构计划2。创建本地站点3 .创建站点结构4 .创建主页文件；要浏览网站，必须先在本地磁盘上创建，然后传送到internet web服务器。站点表示与服务器上的网站相匹配的一些文件和文件夹的集合。放置在本地磁盘上的网站称为本地站点，internet web服务器上的网站称为远程站点。使用Dreamweaver的第一步是在本地硬盘上创建站点，然后创建网页并执行后续任务。2020/6/6，9，6.2Dreamweaver概述，创建6.2.2站点和主页文件，1 .计划站点结构，网站是多个网页的集合，包括一个主页和多个页面。在创建网站页面之前，设计和规划网站的结构。例如，要创建的页面数、每页上显示的内容、页面布局的外观以及每个页面相互链接的方式。另外，将文件分别放在各自的文件夹中，网站结构清晰，易于管理，便于查找。2020/6/6，10，6.2Dreamweaver概述，创建6.2.2站点和主文件，2 .创建本地站点创建站点之前，请在硬盘上创建本地根文件夹，以确定存储所有站点文件的位置。运行“站点”|“新建站点”命令，弹出“站点设置对象”对话框，然后在“站点”页面上设置站点名称和本地站点文件夹，如下图所示。设置完成后，可以单击“保存”按钮创建本地站点。2020/6/6，11，6.2Dreamweaver概述，创建6.2.2站点和主文件，3 .您可以设置本地站点，方法是创建站点结构，右键单击“文件”面板中的站点根目录，然后从快捷菜单中运行“新建文件夹”命令。当前“文件”面板显示相应的站点结构。2020/6/6，12，6.2Dreamweaver概述，创建6.2.2站点和主页文件，4 .创建主页文件，创建站点时需要主页文件。主页文件通常命名为index.htm、index.html、default.htm或default.html。在“文件”面板中右键单击站点根目录，然后从快捷菜单中执行“新建文件”命令，将显示名为untitled.html的新文件。将Untitled.html重命名为index.html，然后双击文件以打开用于编辑网页的文档窗口。您可以基于2020/6/6，13，6.2Dreamweaver概述、6.2.3示例文件创建网页，并基于Dreamweaver提供的示例文件创建网页，以便用户可以轻松创建专业化的外观和精心设计的网页，从而大大提高工作效率。2020/6/6，14，6 . 3 web制作，构成6 . 3 . 1 web页面的元素，文本和图片是构成web页面的两个最基本的元素。这里的文字是网页的内容部分，图片是为了更好地丰富内容或修饰外观而添加的。除文本和图片外，网页还包括动画、声音、视频、表单和程序。2020/6/6，15，6.3网页制作，构成6.3.1网页的元素，1 .文本2。图像(1)插入图像(2)设置图像属性，生成2020/6/6，16，6.3网页，构成6.3.1网页的元素，3。超链接(1)创建超链接选择要创建超链接的文字或图片。如果要链接到URL，请直接在“属性”面板的“链接”文本框中键入，例如。要链接到一个电子邮件地址，请运行插入|电子邮件链接命令。要链接到网页文件，请单击“属性”面板中“链接”文本框右侧的“浏览文件”按钮。图像热点超链接、(2)图像热点超链接图像热点超链接是指一个图像中的多个本地区域指向不同的网页链接。这些局部区域称为热点。鼠标指向热点时，将显示相应的提示消息，如果有预设网站，则可以单击热点进入该热点。单击图，选择“属性”面板左下角的热点工具之一，在图中绘制热点，最后在热点的“属性”面板中创建超链接，以创建热点。2020/6/6，17，6.3网页制作，构成6.3.1网页的元素，4。表，2020/6/6，18，6.3网页制作，构成6.3.1网页的元素，5。apdivdivdiv是常用的图层。文本、图像和表只能固定位置，不能相互重叠；使用APDiv功能，可以将它们放置在web页上的任何位置。可以放置web文档中的其它创作元素，可以自由移动它们，也可以在图层和图层之间重叠。如果出现层，则web技术将从二维扩展到三维，即垂直于显示平面。您可以使用插入、拖放或绘制方法创建APDiv。一旦创建了APDiv，就可以在“AP元素”面板中选择它并将其包含在另一个APDiv中，或者更改APDiv的堆叠顺序。(1)插入APDiv)绘制APDiv(3)设置AP div的属性，创建2020/6/6，19，6.3 web，构成6 . 3 . 1 web页的元素，6。表单、(1)表单直接插入到文档中，其他表单对象(如文本字段、按钮等)必须插入到浏览器中才能在浏览器中正确处理。(2)文本字段文本字段是用于输入信息的表单对象，如下图所示。2020/6/6，20，6.3网页制作，构成6.3.1网页的元素，6 .“表单”、(3)“按钮表单”按钮可用于将表单中的数据提交到服务器、重置表单或将已在脚本中定义的其他处理任务分配给按钮。单击按钮以执行操作。2020/6/6，21，6.3网页制作，构成6.3.1网页的元素，6 .表格、(4)复选框和单选按钮复选框允许您一次从一个选项组中选择多个适用选项，而单选按钮提供了彼此互斥的选项值。也就是说，在一个单选按钮组中选择一个按钮将取消选择该组中的所有其他按钮。(5)列表/菜单列表用于在有限的空间中为用户提供许多选项。通过列表的滚动条，可以浏览许多选项并在列表中进行多项选择。“菜单”在一个菜单中显示选项值，并允许用户仅选择单个选项。2020/6/6，22，6.3.2创作、6.3.2行为和Dreamweaver中的行为是在浏览器中运行的JavaScript代码，设计者可以将这些代码放置在web文档中以与web页交互。动作是事件和动作的相互结合。事件发生在网页元素上，与浏览器前用户的操作相关。动作是发生事件时网页所做的响应。例如，当鼠标经过网页上的图片时，如果图片发生切换，则鼠标路径(onMouseOver)称为事件，图片切换称为动作，典型的行为由事件触发动作。您可以将行为添加到页