Dreamweaver 课件PPT

网页设计经典教程主讲 段玲 第一章 万维网和网页的基本概念万维网又称WWW和公众信息网是Internet世界最为重要的成员之一。 WWW是从网上获得信息的主要途径。 万维网的特点万维网的信息是通过信息页的形式体现的。信息页是用HTML（超文本标注语言）语言编写的。（即网页） 静态网页：网页的内容不会发生变化；不能实现和浏览者的交互。 动态网页：是指网页文件里包含了程序代码，通过后台数据库与WEB服务器进行信息交互。信息页的传输是采用的HTTP协议,即超文本传输 协议 。 客户浏览信息页必须使用客户端软件，即浏览器。如：IE，Netscape等 网站的设计和发布流程网站是有独立域名、独立存放空间的内容的集合，这些内容可能是网页，也可能是程序或其他文件。对网站进行规划确定所创建的网站的目的及所提供的服务，从而确定站点中应包含哪些网页。设计站点的基本结构站点的结构是指站点内部文件存放的排列方式。根据站点规划确定站点框架收集素材；包括图片、文字和声音等内容制作具体的网页将设计的站点上传到所选择的远程站点上 继续 网站的站点建设什么是站点？ 站点可以看作是一系列文档的组合，这些文档之间通过各种链接关联起来，用来管理网站中的各类文件。站点的优越性： 自动更新链接；自动复制文件到当前默认的站点；自动生成站点地图等。 相关概念本地计算机：存放自己制作网页的计算机。远程计算机：是用来发布自己主页，提供给Internet上的其它使用者来浏览的计算机。本地站点：是指建立在本地计算机上的站点。远程站点：上传到远程计算机上的站点 DR的启动及界面介绍 DR是将多个文件集中到一个界面中一个集成软件。它大大降低了资源的占用率。使用户可以方便快捷的完成相关的操作。 DR除了有一般应用程序窗口所拥有的菜单和工具栏，它的更多操作是通过各种面板完成的。有关面板的使用以后慢慢介绍。 站点的创建创建站点方法：1.创建一个多级的文件夹，一般要设置有一个总文件夹，在其中再创建一些子文件夹，用于存放不同类型的文件。如img用于存放图片文件，audio用于存放音频文件。2.在DR中，指定总文件夹为站点方法：1)建立一个文件夹2)站点/站点管理（指定所建的文件夹为站点文件夹） 站点规划要点1.用分级文件夹来保存文档2.使用合理的文件名 文件名要直观3.合理配置文档中的资源4.将本地站点和远程站点设置为同样的结构5.整个站点要有一个整体的风格 设计站点和网页的注意事项在网页设计中，不能使用中文作为文件或文件夹名网页中的文件命名区分大小写每个网站都必须有一个主页主页文件一般以index.htm文件名而且必须放在站点的根文件夹下 网站页面布局网页的构成网页的基本内容通常包括：标题、标志、页眉、导航栏、主内容区和页脚。1.标题是用来提示该页面内容的，通常显示在IE的标题栏。是在页面属性中设置的。2.网站的标志：成功的网站标志有着独特的形象标识。3. Banner(横幅广告）：大多数网站的创建者在此设置网站的宗旨、宣传口号和广告语。4.导航栏：导航既是网页设计中的重要部分，又是整个网站设计中的一个较独立的部分。它通常放在顶端和左边。5.内容区：它是页面设计的主体元素。6.页脚：是页面的底部；它用来标注该站点所属公司的名称、地址、上的版权和电子信箱地址等 网页的布局类型常用的有：国字型、厂字型、封面型等。 网页的制作浏览和修改1.网页文档的创建在DR中进行编辑2. 文档的保存注意1.应将文档保存在站点文件夹中 2.一般只要建立了站点会默认存入站点文件夹中3.网页的预览：需要在IE中4.网页文件的修改：需要在DR中5. 关闭文档 视图方式在Dreamweaver 中共有三种视图方式。1.代码2.设计3.代码和设计它们之间的切换可以利用“查看”/也可以利用“查看”菜单中的视图按钮。 网页文件的建立1.建立站点2.在站点目录中右击/新建文件/为该文件改名注意：网页文件常用的文件类型为.htm。在更改文件名时不可更改扩展名。也可以用文件/新建/基本页完成，但是这种方法建立的文件应立即保存为好。 页面的属性设置页面属性包括对背景、标题以及页面元素的初步设置在创建新网页时，默认的页面总是以白色为背景，没有背景图像、没有标题。制作一个网页时，一般需要先对网页的页面属性进行设置。网页的标题是在浏览网页时做为IE窗口的标题显示在IE的标题栏上。 文档的输入和编辑方法一：直接输入方法二：可以从其它软件中复制/粘贴 空格的输入在编辑网页时一般情况下只能输入一个空格，不能输入连续的，可以采用以下方法。将汉字的输入方式设制为全角方式，按SPACE键便可连续输入空格。用与背景颜色相同的字符来完成空格的输入。 分段与分行回车是段落的结束标记，当需要分段时，只需要回车就可以。如果只需要换行而不分段，则需要同时按下SHIFT+ENTER段落间的距离要比行距大。在HTML语言的标记中，分段为而换行的标记为 字符格式的设置字符格式一般包括字体、字号、颜色、字形等。字符格式的设置都可以使用下面两种方法完成：1.属性面板2.文本/如果所需要的字体字体列表中没有则可以从“字体列表编辑”框中添加。设置字符的颜色时，最好使用属性面板。在代码中颜色是用十六进制数表示的。字号有17级，在“编辑/参数选择”中可以设置各级字体的大小。要注意如何删除已设置好的颜色。 滚动字幕的制作在网页中常常可以看到滚动的字幕。制作法一：选中要滚动的文字1.插入/标签/marquee(这时的视图方式自动变为设计/代码视图2.在代码视图中填写需要的参数输入marque direction=“up”,即可让文字向上移动。方向还可用“down” ,”left”, “right” 可以使用onmouseover=“stop()”和onmouseout=“start()” 注意： marquee标签不能放入之中。 项目符号和编号a.给段落添加项目符号和编号后，段落间的距离会变小。b.设置好项目符号和编号后，可以用属性面板上的“项目符号”按钮设置项目符号的形状和编号的起始数。 面板的操作 DR的面板是浮动的，可以随意的在屏幕上移动，也可以隐藏或关闭。如何将关闭的面板打开方法：窗口/面板的名称如何将隐藏的面板显示出来方法：窗口/排列面板 插入对象在网页设计中，网页的页面上除了文字之外，还可以插入一些非文字性的对象。如日期，图片等 。插入的方法都需要先定位插入点，然后可以用下面两种插入对象：1.在“插入”面板上选择需要的对象2.在“插入”菜单中选择需要的对象 插入水平线长度的设置有两种方式，一种是按绝对像素长度，另一种是按屏幕的相对长度。水平线独立成一段落 插入日期在网页上设置站点发布的日期，无论是对设计者还是浏览者来说都会带来方便。如果选中“存储时自动更新”项，则每次存储时都会自动更新插入的日期。 插入特殊符号用此功能输入键盘上不能输入的字符。 插入图片在设计网页时主要用到的有三种格式的图像文件，它们是JPG,GIF和PNG。当网页页面被浏览时，系统会在站点中调用所用到的图像文件。为了确保图像的正确浏览，一定要将所用到的图像文件复制到当前站点之中。图片的图文混排：在DW中图文混排是利用对齐方式来完成的。当图片与文字的对齐方式设置为左对齐或右对齐时可实现图文混排。图片属性面板中的“替换（ALT)项是为图片添加说明的。利用“属性”面板可以设置图像的效果，如：亮度、裁剪等。 插入图片的注意事项在网页中插入的图片尺寸越大读取的速度越慢，因此应先在其它软件中将尺寸改小。如果在DW中改变它的大小则还会改变文件的大小。如果一张图片要用多次可以在”窗口“/资源，即利用资源面板完成。 图像占位符图像占位符，顾名思义就是占领位置的图形。在网页设计过程中，页面中的某个位置一时没有合适的图片或其它的内容，可能导致整个页面的混乱，我们就可以用占位符，先占用这些图片的位置。方法一：插入/占位符方法二：插入面板/图像/占位符。 插入翻转（轮换）图片翻转图片是指这样当鼠标指针掠过一幅图片时，它的显示会变为另一幅图片。翻转图片包含了两张图片，一张是初始图片另一张是替换图片。 插入FLSH按钮和FLSH文字 FLSH按钮是利用内置的FLSH按钮和文字，可以在网页上制作出有动态效果的按钮和方字。方法：1.插入/交互式图像/FLSH按钮2.利用对象面板 .如果多次用到同一形式（标注文字不同）的按钮，必须一个一个插入，不能复制。按钮的大小在属性面板上修改。每插入一个FLSH按钮就会产生一个“.swf”格式的文件，最好将其存在站点文件夹下。 FLASH文字只能改变颜色。 插入flash文件插入flash文件方法：插入/媒体/FLASH注意：必须事先准备好类型为.swf的flash文件。 表格表格是网页设计中非常有用的设计工具。它不仅可以使得数据的表达更加清晰，而且在设计页面中有着非常特殊的作用，如页面的布局，页面分栏等。 表格的创建表格的创建的方法：1.插入/表格2.单击“对象”面板中的“插入表格”按钮。3.拖动“对象”面板上的“插入表格”按钮到需要的位置。 表格属性的设置表格的宽度和高度有两种设置方式，即像素数(pixels)和浏览器窗口的百分比数()。表格的高度一般采用自动。“边框”项是用来设置表格线的宽度，默认值为1。当边框设为0时，表格线为虚线，在浏览器中不显示。表格或单元格的背景可以是纯色也可以是图片。 选中整张表格选中表格的标致：整个表格的外边框线为粗线。选中整张表格的方法：1.用鼠标单击表格的左上角2.用鼠标单击表格的任意一条表格线3.修改/表格/选择表格4.将光标定位到表格中，单击任务栏上的标记5.编辑/全选（ctrl+A) 关于“全选”命令该命令不同于word 中的“全选”命令，具体操作如下：1.如光标在单元格中，则选中该单元格。2.如果已选中了单元格，则选中整张表。3.如果已选中了整张表则选中该网页中的所有内容。 选中表格和单元格选中单元格的标致1.光标在该单元格中闪烁;2.单元格的边框线为粗线选择方法：1.先单击要选择的单元格，然后拖动鼠标到相邻的单元格。2.先单击要选择的单元格，然后单击状态栏的。 单元格的拆分1.选中要拆分的单元格2.单击属性面板上的拆分单元格按钮 单元格的合并1.选中要合并的单元格2.单击属性面板上的合并单元格按钮。 表格行、列的增加和删除方法：1.修改/表格/2.利用右键3.用属性面板改变行数和列数4.用TAB键 表格格式套用1.选中表格2.命令/格式化表格 单元格的复制、移动、和清除其操作与WORD相同注意：1.如果复制的是整行或整列，则会添加一行或是一列。2.编辑/清除不能删除单元格 表格排序方法：命令/表格排序 表格在页面布局中的应用用表格布局页面时常常需要与跟踪图配合使用。跟踪图常常是用其他软件制作的。跟踪图的使用方法：页面属性/跟踪图 布局视图DR有两种视图：标准视图和布局视图。切换方法：对象面板中，单击相应的按钮。说明：在布局视图中，应在选使用布局表格，才能使用布局单元格。 超级链接的使用超链接的概述超链接为畅游网络提供了方便，是网页制作中使用的比较多的一种技术。是WWW的魅力所在。使用超链接是为了把众多的网站的网页联系起来，构成一个有机的整体。超链接使用的方法就是选择需要插入超链接的页面元素，然后再设置该链接的URL地址。 超链接的分类超级链接有文本超级链接、图像热点的超级链接、Email链接、锚点的超级链接和下载文件的超级链接。 文本或图像的超级链接首先要选定欲要创建链接的文本使用下列方法之一建立链接：1.用属性面板2.用“修改/创建链接”3.利用“指向文件图标 ”创建链接例一文本的超级链接例二图像的超级链接（返回按钮） 热区链接所谓热区链接是指将一张图片分成若干个区域，为不同的区域设置不同的链接或图片说明。在创建超链接时，可以为整幅图建立链接也可以为每个热区创建一个链接。定义热区的方法1.选中整个图片2.选择属性面板上的矩形、圆形或多边形工具3.在图形适当位置标记出形状不同的热区 锚点的超级链接所谓锚点超级链接就是链接到同一个网页中的不同的位置或者链接到另一个网页的某一个位置。锚点用来标记网页中的某一个具体的位置。 创建锚点及锚点的超级链接1.在网页中选择需要插入锚点的位置2.选择“插入/命名锚记”或在对象面板中单击“命名锚记”按钮。3.便会在插入点上显示锚标记 4.如果没有锚点显示用“查看/可视化助理/不可见元素”设置其显示，也可用这种方法 设置锚点隐藏。5.锚点在链接的引用时，同一文档中路径需要在锚点名前加#；不同文档中锚点的描述应是文档名.htm #锚点名6.命名锚点是区分大小写的。7.例一：报价单（同一网页中和不同网页中）例二：为中国地图不同的区域设置不同的说明和链接。 文件下载超级链接当被链接的文件类型不是网页文件时，这时文件就会被下载。如类型为.MP3时，就为MP3下载。 创建E-mail链接E-mail链接的方式在很多网页中都被广泛地采用，当浏览者单击该链接时，系统 会启动电子邮件发送程序（如Outlook Express),并将网页设计者的邮件地址放在收件人文本框，为浏览者发送邮件做好准备。 创建E-mail链接的方法1.插入/电子邮件链接2.选中要创建链接的对象/在属性面板的Link文本框中输入 mailto:要链接的电子邮件地址 友情链接所谓友情链接是指被链接的对象是本站点之外的其它网站。创建方法与其它方法相同，只是链接的地址必须填写被链接网站的网址。如要链接新浪链接地址应为：http:/ 空链接和脚本链接空链接：将链接地址设为#脚本链接：将链接地址设为脚本，通常为：javascript:脚本代码。如javascript:close() 其作用是关闭当前窗口。 建立超链接需注意的问题1.超链接路径中的文件名或文件夹的名字都必须是英文的。2.目标文件必须保存才可以链接成功。3.打开链接窗口的方式可以在“属性面板中”用“目标”项设定。blank 将被链接的文件在新的窗口中打开self 在原窗口中打开 网页的自动刷新在对象面板中的“文件头”子面板中选择刷新 按钮。 网页的头部文件一个HTML文件，通常由包括在和标记间的头部和包括在和标记间的正文两个部分组成。在文档窗口中，主要显示的是正文部分的内容；头部中包括很多非常重要的信息，如标题、文档类型等很多不可见元素，但这些元素对网页的设计是很重要的。 书写头部的方法可在代码中直接书写可用对象面板中的文件头面板编写 网页的自动刷新在浏览网页时常常需要自动转到另一个网页，这就是头部标记META的刷新作用。标记格式：Meta http-equiv=“refresh”conten=“秒数;URL网页的URL地址”注意：1. URL必须大写。2.网页地址中的文件名必须带有扩展名例如：meat http-equiv=“refresh”conten=“3;URL=file:/e:lx01.htm” 表单的创建与应用表单技术可以实现浏览者同Internet服务器之间信息的交互传送，它是网络信息收集处理的 种重要的方式。无论是电子商务、网上调查、还是留言板都要求网页能够接收浏览者输入的信息，而表单就是网站获取用户信息的最重要的手段之一。 创建表单的方法创建表单的方法 ：1.插入/表单2.使用“表单”对象面板 注意：使用表时单必须先创建表单，再创建表单元素。当创建了表单之后，在页面上会用红色虚线框表示表单域。这种红色域是不能被编辑的，但会自动调整。 插入表单对象表单可以包含标准对象，如文本域、按钮、复选框、单选框、列表和跳转菜单等。利用表单发送的内容:在表单“属性”面板中的“动作”文本框中输入：mailto:电子邮件地址，表示要将表单数据发送给相应的电子邮箱，当单击“提交”按钮后，将自动打开outlook expreese处理该邮件。 框架框架就是把网页页面划分成相对独立的若干区域，每个区域都相当于一个独立的页面，这些页面既各自独立又相互联系。框架技术是由框架集和框架两部分组成。框架集是框架的集合。它定义了各框架的结构、数量、大小尺寸及装入框架中的页面属性等。框架是框架集的组成元素，框架的页面是整个网页页面的一部分，它具有网页所有的属性和功能。 框架的创建、调整与删除用框架技术制作的网页可以将一个页面分成上下或左右结构的框架，把单页面拓展成多页面。创建方法1.文件/新建/框架类型2.对象面板/框架类型3.修改/框架集 框架的保存框架结构的网页制作完成后，可以分别保存每个框架文档;也可以单独保存框架集文档;还可以将整个框架集与它的各个框架文档一起保存，不同方式的操作如下：1.保存框架文档：2.保存框架集文档3.保存框架集中所有文档 说明：含有框架的网页保存会同时存在多个.htm文件。除每个框架一个文件外，框架集还会有一个文件。 拆分框架1.单击要拆分的框架内部2.修改/框架3.按住ALT键用鼠标拖动边框线 调整框架1.用鼠标拖动边框线2.用属性面板 删除框架拖动边框线 框架集的属性设置1.选中框架集 单击边框线2.框架集属性面板 默认框架属性是无边框线、无滚动条的。 框架属性设置1.选中框架 按住alt键单击要选中的框架的任意位置2.框架属性：框架的名称：它是用于超链接的，其名称中只能用字母、数字、下划线。可以设置框架是否有滚动条 框架中内容的填写1.可以在框架中直接编辑网页内容2.将事先制作好的网页文件设为源文件（即设置默认显示页面）。A)选中该框架B)在属性面板中填写源文件名为欲使用的网页文件路径。 用链接控制框架显示内容1.选择要建立超链接的对象2.在属性面板中指定要链接的文件名3.在“目标”栏中，选择要显示被链接文档的框架名称。默认为在当前框架中显示。 CSS样式 CSS是英文cascading style sheet的缩写。称为“级联样式表”，也称为层叠样式表。 CSS是一种对文本进行格式化操作的高级技术，它从一个较高的级别上对文本进行控制。它的特点是可以对文本的格式进行精确控制，而且可以在文档中实现格式的自动更新。 CSS样式的分类嵌入式：独立的文档中应用CSS样式外部链接式：应用于多个文档 ，生成专门的*.css文件。 CSS样式引例设置超链接文字的格式.利用“页面属性”设置，查看代码如下：可从代码中修改代码如下：a:hover color: #33CC00;font-family:华文彩云; 创建CSS样式的方法1.用菜单在CSS样式面板中（窗口/CSS样式）右击/新建说明：新建样式的名称必须以”.”开始样式有三种类型，其中use CSS selector用于超链接的格式设置。2.套用CSS样式：选中对象/在CSS样式面板中右击/套用。 几种常见的CSS格式1.设置背景不随文字一起滚动。CSS样式定义框中：背景/附件/固定（设置后一定要选择：全选/应用）2.字的大小、添加上、下划线3.设置阴影（扩展/shadow)。 阴影的效果只对层起作用。4.动感效果（扩展/blur/)5.光晕的效果（扩展/glow)6.修改项目符号和编号的形式(列表）7.设置表格的边框线。（边框） 样式文件的删除CSS样式面板中/选中要删除的样式/删除样式 2.用代码设置CSS属性在文档的头部内容中插入CSS格式代码。其格式为：查看代码双击CSS样式名。例如：设置背景不随文字一起滚动可在头部内容中加入 层层是可以将页面元素精确定位的一种新的定位技术。层内可以放置文本、图像、表单等元素。插入层的方法：方法1：插入/布局对象/层方法2：布局面板/层层的标签为Div 选择层1.选定层的标志是层的边框线上有黑色的方块点。2.方法：单击层的选择手柄或边线。（如果在层中单击则只是激活层）3.选择多个层：在选择的同时按住SHIFT键。 层的属性1.名称2.定位3.大小4.层的叠放层次5.层颜色的填充6.可见性 层面板的使用1.打开：窗口/层2.可观察、设置可见性和叠放层次3.可设置“防止重叠” 层的操作1.层的对齐：选中/修改/对齐2.防止层的重叠3.层与表的相互转换：修改/转换/ 层的应用层和行为技术组合可以完成很多网页制作中的操作如：下拉菜单、拼图游戏等。还有一个重要应用就是布局页面。例利用层制作模板。 时间线所谓时间线，是DW提供的一个设计网页动态运动层的工具面板，时间线通过设置不同时间段的层的大小、位置和可见性等属性可以制出动态的网页动画。 时间线创作动画的基本原理把一对象在一定的时间内，根据设计好的路径显示在某网页页面上，再把其它对象放置在另外的时间段内。在时间线上显示的每一对象就叫一帧。整条时间线就是由许多帧构成的。当将时间段连续播放时，则所有的帧将按照设置好的时间和显示方式一个一个的显示出来，一段动态效果画面就显示在浏览者面前。 相关术语1.关键帧：是指给某个对象指定了属性的帧。可以自动生成两个关键帧之间的过渡帧。2. FPS：是每秒播放的帧数。一般电影每秒播放27帧。 用时间线创建动画1.时间线只能移动层，因此要移动的文字或图像首先要将其放入层中。2.时间线通过改变层的位置、大小、可见性以及叠放顺序来创建动画。 创建对象的移动过程1.创建相关的层2.打开时间线面板（窗口/时间轴）3.为时间线添加对象a.右击时间线/添加对象b.直接拖动对象到时间线c.修改/时间轴/添加对象4.设置路径：a.添加关键帧:设置关键帧的位置b.修改/时间轴/录制路径/拖动对象绘制路径5.设置播放速度和播放方式。 在时间线上改变层的可见性在时间线上选择一个关键帧打开属性面板进行调整 事件、动作和行为的应用行为（behaviors)顾名思义就是以某种方式完成的动作，行为是由事件（Event)和动作（action)两部分组成的，事件是指完成某一动作的方式,如单击、双击、鼠标离开等。动作是指网页的一些特殊的功能，如播放音乐、显示和隐藏层。如在右击图标打开快捷菜单的行为中，右击是事件，打开菜单是动作即行为事件动作 为对象添加行为为对象添加行为是通过行为面板完成的。打开方法：窗口/行为 具体步骤1.在合适的位置插入所有的元素2.选中要添加行为的对象3.单击行为面板上的“”按钮，并为该元素选择一个动作，然后为其设置属性。4.单击事件和动作之间的可以选择需要的事件。注意：一定要选择适用的浏览器，否则很多行为和事件不能添加。 修改行为1.修改行为也是在行为面板中完成的。 常用的行为层的显示与隐藏（例捉迷藏、下拉菜单）层的拖动（看图记英语、拼图游戏）弹出消息框（大小是默认的，例：拒绝下载：设置右击弹出消息框）弹出网页（是一个预先制作好的网页，可以设置窗口的大小）验证表单（简单的内容验证）播放音乐（试听）动态的下拉菜单和级联菜单(设置此行为前必须先建立自链接并保存此文件）设置状态栏的文本行为与时间轴的结合（制作“开始”和“停止”按钮）调用javascript(例09.htm)1 编写函数2 给对象添加行为 代码插件（例如：插入视频文件） 模板新建模板文件1.资源面板中/新建按钮2.编辑页面内容：主要编辑布局和不变内容区。3.设置可编辑区域。4.保存应用模板1.新建/基本页2.在资源面板中选中要套用的模板文件/应用。注意：1.模板中的区域默认为“不可编辑区”2.万万不可直接打开模板文件建立基本网页。 后续作业添加时间轴（停止和播放按钮）层的拖动（新的网页）菜单层的隐藏消息框和弹出网页“网络调查”添加验证新歌中添加“试听”改变状态栏的文本调用脚本（新的网页）代码插件