《DreamweaverCS6网页设计与制作》第2章Dreamweaver基础知识刘敏娜主编课件.ppt

Dreamweaver基础知识,Dreamweaver基础知识,2.1Dreamweavercs3简介2.2Dreamweaver的工作界面2.3站点的部署2.4文本的处理2.5建立超级链接2.6在网页中使用图像2.7在网页中使用多媒体,Dreamweaver基础知识,2.8使用表格结构布局2.9使用APDiv布局页面2.10使用层叠样式表2.11使用框架布局页面2.12使用模板和库2.13使用行为2.14使用表单2.15Spry控件,2.1Dreamweavercs3简介,Dreamweaver被称为梦幻工厂，它具有“所见即所得”的编辑方式，在网页中可以引入行为，样式，模板等技术，所以在制作网页时体验非常好。由于它具备可视化编辑功能，用户可以快速地创建页面而不需要掌握专业的html语言。在查看站点元素和资源时，能够直接的进行拖拽，操作非常直观。另外还可以直接将photoshop，fireworks中创建和编辑的图像导入到dreamweaver中，使资源得到整合。也可以在其中编辑asp、php、jsp等动态网站。所以说，dreamweaver在网站建设中起着不可替代的作用。,2.2Dreamweaver的工作界面,在Dreamweaver的工作区域中集合了一系列的窗口、面板和检查器，在进行网页制作之前先要来对Dreamweaver的工作区有一定的了解，指导如何使用检查器和面板进行设置适合用户风格的界面。,2.2.1界面布局,窗口的各组成要素,菜单栏有10个主菜单，在其中包括了Dreamweaver的所有功能，通过菜单栏可以对对象进行任意的设置。菜单栏是按照功能的不同进行了划分，方便用户的使用。插入栏插入栏以选项卡形式展示，占了屏幕很小的区域，在其中包含了各种网页元素（图像、表格、层）插入到网页的按钮。,窗口的各组成要素,文档工具栏文档工具栏上有视图切换的按钮，另外还包含文件管理功能，上传下载，浏览器预览等功能按钮。文档窗口显示用户正在编辑的网页文档。属性浮动面板可以查看和编辑当前选定的网页元素的属性，此面板中的内容会随着选中对象的不同而变化，比如当前选中了文字，面板中就会显示文字相关的属性，如字体，大小，样式等。,窗口的各组成要素,面板组组合在一个标题下面的多个相关的面板的集合。可以通过单击组名称左侧的展开箭头将这多个面板在折叠或展开之间切换。文件面板这个面板组非常重要，用来管理文件和文件夹，还可以对站点进行操作，查看站点中的资源。标签选择器处于文档底部的状态栏中，用来显示当前选定html对象标签的层次结构，单击其中的任何标签，就可以选中该标签及其内容。,2.2.2窗口和面板,1、欢迎界面,图起始界面,这是第一次启动Dreamweaver后显示的界面。欢迎界面分为3列。左边一列可以打开最近使用的文档，中间列可以创建各类新文档，右边一列是从模板中创建。界面下面提供了软件的帮助信息，帮助信息可以通过网络进行更新。,2.2.2窗口和面板,2、文档工具栏单击文档工具栏左边的3个按钮，可以在“代码视图”，“设计视图”和“拆分”视图之间切换。另外在工具栏中还有添加网页标题，文件管理，在本地和远程站点间传送文档等命令。如下图所示。,2.2.2窗口和面板,3、标准工具栏标准工具栏中包括“文件”和“编辑”菜单中的常用的操作按钮。如新建、打开、保存、打印代码、剪切、复制、撤销等按钮。在默认的界面下此工具栏是不显示的，如果需要显示，可以通过“查看-工具栏-标准”命令打开。,图标准工具栏,2.2.2窗口和面板,4、编码工具栏此工具栏只出现在编码视图中，并且以垂直方式显示在文档窗口的左侧。其中包含多种标准编码操作的按钮。例如高亮显示无效代码、应用删除注释、缩进代码以及插入最近使用的代码片断。在使用编码工具栏时，不能把它移动，但是可以把它隐藏起来。,2.2.2窗口和面板,5、状态栏状态栏位于窗口的底部，主要用来提供与当前文档相关的信息。这部分包括选择标签、选取工具、手形工具、缩放工具等。其中的选择标签用来显示环绕当前选定内容html标签的层次结构，单击任何标签可以选择该标签及其全部内容。,2.2.2窗口和面板,6、使用插入栏插入栏位于菜单栏和文档工具栏的中间位置，它几乎覆盖了网页制作时的所有的操作。在插入栏中包括了插入对象的按钮，这些按钮根据类型被组织到不同的选项卡中。,2.2.3管理面板和面板组,1、展开折叠面板组：在面板组的左上角的小三角符号上单击可以折叠或展开面板。2、拖动面板组：将光标放在需要拖动的面板组左上角，按下左键进行拖动，可以将面板从面板组中脱离。如果要拖回原来的位置，需要重复拖出的方法（将光标放在需要拖回的面板组左上角，按下左键拖动到面板组中）。,3、查看面板组的“选项”菜单：单击面板或面板组右上方的选项按钮，在列表中可以对网页进行设置，比如有新建和打开文件等操作。4、重命名面板组：可以为面板组命名，操作方法：单击面板组的选项列表，选择重命名面板组，输入新名称就可以了。,2.2.4自定义快捷键,Dreamweaver为用户定制了一些常用命令的快捷键，当然用户也可以自己设置快捷键。方法是：点击“编辑”菜单-“快捷键”，选择需要更改的命令，如“新建”命令，单击右上角的“复制副本”按钮复制为副本（可以为副本重命名），在副本设置中继续选择“新建”，在“按钮”输入框按下新设置的快捷键（在键盘上直接输入组合键，要求必须是包含ctrl键）,单击“确定”即可生效。,2.3站点的部署,2.3.1管理站点资源组织站点结构如何在Dreamweaver中管理站点2.3.2能力提高项目一：为茶品文化网站建立站点,2.4文本的处理,2.4.1网页标题的设置2.4.2文本的基本设置2.4.3项目列表2.4.4使用外部文本,2.5建立超级链接,2.5.1什么是超级链接2.5.2如何表示超级链接2.5.3为文本添加链接2.5.4超链接的检查2.5.5电子邮件链接2.5.6下载链接2.5.7锚链接,2.5.1什么是超级链接,超级链接在一个网页中是非常重要的组成部分，通过链接可以将www上的不同站点的信息进行访问。一个超级链接就像一个箭头一样，包括起点，终点，由起点到终点的方向，起点是当前网页，终点是目标网页，方向是从当前页面跳转到目标页面。,2.5.2如何表示超级链接,在设置超级链接时，描述目标文件（也就是超链文件）的路径是个难点。根据情况的不同，可以采用四种描述方式：绝对路径、相对路径、根路径。,2.5.3为文本添加链接,操作方法：在设计视图中选中需要添加超级链接的文字，属性面板中找到链接选项，直接在文本框中输入完整的地址，或者单击后面的黄色的文件夹图标，在本地硬盘中找到一个文件进行链接。,2.5.4超链接的检查,对于网站中断了的链接、链接到站点以外文件的链接以及孤立的文件会生成一个报告。检查链接的方法：单击文件菜单，选择“检查页”菜单项，在级联菜单中选择“链接”选项。检测结束后，在属性面板的下方打开一个“结果”面板，为用户显示检测过的链接报告。如果网页中有断掉的链接，会显示在下方，当然除了检查网页的链接以外还可以检测整个网站的链接。这些检测过的报告也可以被保存下来。,2.5.5电子邮件链接,电子邮件链接是比较常见的一种超级链接。在浏览网页时，如果单击一个电子邮件的链接时，会显示在outlookExpress中发送电子邮件信息的窗口。在窗口中已经为用户提供了已经写好的收件人地址，用户只需要添加邮件的主题，输入主要的内容，单击“发送”按钮。,2.5.6下载链接,制作下载链接的方法:选中需要添加下载链接的对象，在属性面板的链接项处单击“指向文件”按钮，并在单击时按下鼠标左键进行拖动，这时有一个极案头跟着移动，直接将其拖动到文件面板汇总，选择一个压缩文件或者一个可执行程序如exe文件。选择好之后，在链接项后面就有了选择的文件名称。,2.5.7锚链接,在同一个页面中添加锚链接。在不同的页面上使用锚链接。,2.6在网页中使用图像,2.6.1插入图片的方法在设计视图中插入从资源面板中插入2.6.2图片的基本设置2.6.3热区的操作2.6.4制作光标经过图像,2.6.5制作导航条2.6.6插入图像占位符2.6.7添加背景图像2.6.8使用Photoshop文件,2.7在网页中使用多媒体,2.7.1在网页中插入Flash动画2.7.2使用Flash文本和按钮2.7.3插入Flash视频和FlashPaper文件2.7.4使用插件添加网页元素2.7.5插入Flash元素图像查看器,2.8使用表格结构布局,2.8.1页面的布局2.8.2使用表格2.8.3选择表格2.8.4导入表格式数据2.8.5导出表格式数据2.8.6扩展和布局模式,2.9使用APDiv布局页面,2.9.1什么是AP2.9.2如何创建APDiv2.9.3APDiv的操作2.9.4设置属性2.9.5使用面板2.9.6使用技巧,2.10使用层叠样式表,采用css技术可以有效的对页面的布局，字体，颜色进行精确的控制，所以现在这门技术越来越多的引入到网页设计中。在Dreamweaver中可以方便的创建css样式,对样式进行编辑。,2.10.1css样式简介,样式是用来控制文档中某个文本区域外观的属性格式，利用css可以一次设置多个样式。css的英文全称是CascadingStyleSheets，也称层叠样式表。在网页中用户可以使用css样式控制文本的格式，比如，字体，大小，颜色，还可以控制表格，APDiv等的显示效果。,2.10.2css的分类,在Dreamweaver中有3种样式表类型：类样式：可以使用到任何的标签中。主要用来设置文本或者文本块的属性。标签：用来重定义特定标签的外观。当更改一个HTML标签的样式时，所有使用该标签的文本都得到了更新。高级：可以重新定义特定标签组合的格式或者重新定义包含特定ID属性的所有标签的格式。,2.10.3css规则的保存形式,用户自定义的css规则可以保存在外部的css文件中，也可以保存在某个网页中（这种形式被称为嵌入式样式表）。外部的css样式表：多个样式保存在一个独立的css文件中，通过链接或者导入可以被多个网页使用。嵌入式样式表：将css规则定义在文档头标记中的标记中。,2.10.4如何创建css,在使用css样式之前必须新建css样式，这样才能对网页中的内容应用此样式。在Dreamweaver中提供了方便快捷的方法来设置样式。,2.10.5应用css样式,在Dreamweaver中可以也能够用制作好的css样式，操作方法如下：在文档窗口中选中要套用格式的对象（如文本，图像等元素），打开css面板，选择某种样式后，在样式面板的右上角选择按钮，从弹出的列表中选择“套用”命令，这样可以为所选的内容增加样式。,2.10.6附加样式表,如果网页中要使用已经定义好的外部样式表，可以通过附加方式进行设置。,2.10.7标签,新建css规则对话框中第二种类型的css是“标签”。这种类型是针对于Dreamweaver中的各种标签来制定的。当选择“标签”类型后，可以在“标签”下拉项中看到Dreamweaver中的各种标签类型，可以选择某个标签来重定义其样式。定义样式的操作与前面讲到类样式的操作一致。不同在于，如果重定义了标签，此时拥有这个标签的对象的效果会自动随着标签的变化而变化，不需要手动应用标签。,2.10.8高级,“高级”选项用来为某个HTML组合或所有的包含特定ID属性的标签定义样式。用户可以在“选择器”中输入多个标签，用逗号作为间隔。高级选项中的“伪类”和“伪元素”也很实用，伪类的状态在用户操作时会发生动态的发生变化，或者随着时间的变化而产生不同的输出效果。在选择器中单击下拉列表按钮可以看到4个选项，分别为4个伪类定义样式。,2.11使用框架布局页面,利用框架技术可以把浏览器显示区域分割成几个部分，每个部分显示不同的网页。,2.11.1什么是框架,框架是制作网页时常用的一种布局技术，利用框架可以将窗口分成多个子窗口，每个子窗口可以显示不同的网页文档，可以使每个文档之间毫无关联，每个网页中有自己的布局，内容。包含框架结构的网页通常是由两部分构成，一种是包含嵌入网页的文档，称为框架集文件，另一种是由网页构成的浮动框架文件。,2.11.2创建框架和框架集,1）新建框架集网页的操作方法2）为某个网页应用框架,2.11.3框架的基本操作,1）选择框架集、框架页。2）保存含框架结构的网页。3）编辑框架属性。4）编辑框架链接。5）创建嵌套框架集。6）创建嵌入式框架,2.12使用模板和库,模板是Dreamweaver提供的又一个快速制作网页的工具。在Dreamweaver中提供了两种创建网页模板的方式，一种是直接创建空白模板，通过插入各种网页元素和模板标记完成模板，另一种是将以创建的网页保存为模板，然后为模板添加特殊的标记来实现模板的功能。,2.12.1创建模板,从“新建文档”对话框中创建模板文件将网页保存为模板,2.12.2编辑模板,一个Dreamweaver模板包括锁定区域，可编辑区域，重复区域，可选区域，可编辑的可选区域，重复表格等。1）锁定区域和可编辑区域2）重复区域3）可选区域4）可编辑的可选区域5）重复表格,2.12.3应用模板,1）创建模板网页2）为网页应用模板,2.12.4库项目,库项目是一种特殊的网页元素，它的作用是作为可复用的模块化的内容添加到网站内的某些页面中。通俗的讲，如果网站中很多页面都要用到相同的网页元素如导航条，版尾信息等，那么可以将这个元素保存成库项目，以后需要可以直接插入这个库项目，不用重复来制作。,2.12.4库项目（续）,1）创建库项目2）设置库项目属性3）修改库项目,2.13使用行为,行为是Dreamweaver的一项重要功能，在Dreamweaver中以可视化的方式添加行为。2.13.1什么是行为2.13.2设置行为,2.14使用表单,什么是表单？表单是一种特殊的网页容器标签，在这个容器中用户可以插入各种普通的网页标签，如表格，层，也可以插入各种表单交互组件，如文本框，密码框，单选按钮，从而获取用户输入的信息。表单可以与jsp或者asp等编程语言结合，同时也可以与前台的javascript合作，通过脚本来控制用户输入的信息的合法性。在万维网中，很多网站都是通过表单进行采集客户端数据