网页设计与制作Dreamweaver8网页设计.ppt

《网页设计与制作Dreamweaver8网页设计.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作Dreamweaver8网页设计.ppt（63页珍藏版）》请在三一办公上搜索。

1、网页设计与制作 Dreamweaver 8 网页设计,李京文,教学目标,1熟悉Dreamweaver 8的操作界面；2熟悉和掌握使用Dreamweaver 8建立与管理站点；3掌握如何使用Dreamweaver 8设置页面属性；4掌握如何使用Dreamweaver 8对文本进行编辑；5掌握在Dreamweaver 8中如何插入和编辑图像；6掌握如何在Dreamweaver 8创建表格并对其进行编辑；7掌握如何在Dreamweaver 8建立超链接；8掌握如何在Dreamweaver 8中使用多媒体；9掌握如何在Dreamweaver 8中使用层；10掌握如何在Dreamweaver 8中使用框

2、架；11了解如何在Dreamweaver 8中创建和使用样式表；12了解如何在Dreamweaver 8中使用模板与库；13掌握如何在Dreamweaver 8创建表单；14了解如何在Dreamweaver 8中使用行为与时间轴；15熟练运用Dreamweaver 8创建自己个人主页。,本章内容,Dreamweaver 8简介 站点的建立与管理 页面设计,3.1 Dreamweaver 8简介,本章案例的小型个人网站是利用Dreamweaver 8设计的，在设计前首先要对该环境作个基本的了解，下面就来简单的介绍Dreamweaver 8。,3.1 Dreamweaver 8简介,3.1.1 D

3、reamweaver 8操作界面在安装好Dreamweaver 8后，我们可以通过windows中的“开始/程序/Macromedia/Macromedia Dreamweaver 8”来启动Dreamweaver 8。第一次启动时会出现“工作区设置”对话框，如下图所示，可以从“设计者”和“编码者”中选择一种工作区布局，它们分别面向设计者和代码编写者，两种布局也可以在主菜单“编辑/参数选择”中切换，通常选择默认的“设计者”工作区。,3.1 Dreamweaver 8简介,Dreamweaver 8工作界面如下图所示。,3.1 Dreamweaver 8简介,3.1.2 标题栏Dreamweav

4、er 8的“标题栏”中将显示文字“Macromedia Dreamweaver 8”，如果打开网页的话，在后面还会显示该网页的一些信息，如网页标题、所在位置及文件名称，右边有3个按钮，分别对应Dreamweaver 8窗口的最小化、最大化和关闭的操作。,3.1 Dreamweaver 8简介,3.1.3 菜单栏“标题栏”的下面是“菜单栏”，菜单栏中提供了“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗口”和“帮助”十个菜单项。单击其中任意一个菜单，会出现一个下拉式指令菜单，如果指令选项为浅灰色的话，则代表该指令在当前的状态下不能执行。有些指令的右边会有键盘的

5、代码，这是该指令的快捷键，熟练使用快捷键将会有助于提高工作效率。有些指令的右边会有一个小黑三角的标记，它代表该指令还包含有下一级的指令，鼠标停留片刻即可显现下一级指令,3.1 Dreamweaver 8简介,3.1.4 工具栏“工具栏”指的是“菜单栏”下边三排按钮，选择菜单“查看/工具栏”，选定里面的“插入”、“文档”和“标准”三项，三个工具栏就显示出来了，如下图所示。,插入工具栏,文档工具栏,标准工具栏,3.1 Dreamweaver 8简介,3.1.5 网页编辑窗口 工具栏下面的区域是“网页编辑区域”，在Dreamweaver 8启动时显示一个“起始页”，其中包括“打开最近项目”、“创建新

6、项目”、“从范例创建”三个较方便使用的项目。选中任意项，出现“网页编辑窗口”，则“网页编辑区域”就会出现“网页编辑窗口”，用户可以在文档区域中输入文字、插入表格和编辑图片等操作。,3.1 Dreamweaver 8简介,3.1.6 状态栏 文档区下部有一个如下图所示的区域，其中左半部分文字（如“”）表示当前光标所在区域的HTML标记，单击可以选定这个HTML标记包括的区域，其中右半部分文字表示的是当前页面的尺寸（单位是像素），单击它会出现下拉菜单，用户可以选择各种网页分辨率，也可以自定义新的分辨率。,3.1 Dreamweaver 8简介,3.1.7 面板工具 1.属性面板网页编辑窗口下面是“

7、属性面板”,用来显示和调整页面对象的属性，根据鼠标所选中对象的不同，“属性面板”界面会有差异，用户可以分别对不同的对象进行设置 2.浮动控制面板组,3.2 站点的建立与管理,如果要制作一个完整的网站，在制作网站的具体页面之前，首先需要创建一个本地站点。下面我们以本章案例的站点建设为例，说明本地站点创建与管理的方法。3.2.1 建立站点 创建过程如下：打开“文件”面板；单击“管理站点”，出现“管理站点”对话框；单击“新建”按钮，并从下拉菜单中选择“站点”命令，按向导新建站点。,3.2 站点的建立与管理,3.2.2 管理站点Dreamweaver 8的“管理站点”对话框提供了站点的新建、编辑、复制

8、、删除、导出、导入等操作，从而能够很方便的对站点进行管理。,3.3 页面设计,3.3.1 页面属性设置打开任意页面，进入页面的编辑窗口。这时的“属性”面板下方有一个“页面属性”按钮，单击该按钮，调出如下图所示的“页面属性”对话框，用于设置页面属性。,3.3 页面设计,3.3.2 文本编辑在网页中插入文本有两种方式，一种是在网页编辑窗口中直接输入，另外一种就是复制粘贴。其设置包括：设置格式、设置样式、设置文本的对齐方式、设置项目列表和编号列表、设置文本凸出和文本缩进、设置超链接等。,3.3 页面设计,3.3.3 图像操作及应用图像是网页中不可缺少的组成部分，几乎所有的网页都采取图像和文字结合的方

9、式，图像对于丰富网页的外观极其重要，因此，合理的使用图像，可以使网站充满激情和活力，让网站更加受用户的青睐。,3.3 页面设计,1插入“图像”将插入点移到页面中要插入图像的位置，单击“常用”工具栏中的“图像”按钮旁的“”，打开其下拉列表，单击“图像”插入图像，并可以通过属性面板设置图像属性。2插入“图像占位符”在“常用”工具栏中的“图像”下拉菜单中选择“图像占位符”，插入图像占位符。,3.3 页面设计,3插入“鼠标经过图像”在网页中，我们经常可以看到这样的情况，当鼠标移动到某一个图像时，图像变成了另一幅图像，当鼠标移开时，又恢复成原来的图像，通常我们将这种图像称做“鼠标经过图像”。插入过程：(

10、1)首先准备两张大小相同的图片；(2)将光标移到要插入“鼠标经过图像”的位置，单击“常用”工具栏中“图像”下拉菜单的第三项“鼠标经过图像”按钮；(3)在弹出的对话框中设置图像。,3.3 页面设计,4插入“导航条”“导航条”与“鼠标经过图像”的效果基本一样，操作也大致相同。“导航条”通常是由一系列的栏目按钮组成，并且一个网页中一般只有一个“导航条”。在状态方面，“鼠标经过图像”可以存在两个状态，分别为“原始图像”和“鼠标经过图像”；与之相对应的，“导航条”则可以存在四个状态，除了有“鼠标经过图像”的两种状态外，还有自己独有的“按下图像”和“按下时鼠标经过图像”这两种状态。,3.3 页面设计,3.

11、3.4 表格的使用1表格的组成 表格是网页制作技术的一个重要组成部分，是用于在网页上显示表格数据以及对文本和图像进行布局的强有力的工具。一张表格横向叫行，纵向叫列。行列交叉部分就叫做单元格。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。,3.3 页面设计,2表格的插入单击“常用”工具栏左侧第四个按钮，弹出“表格”对话框，在这里可以对插入的表格进行设置。3表格的设置 选中表格后，在属性面板中可以进一步设置表格属性、单元格属性、行属性等。,3.3 页面设计,4选定表格元素(1)选中一行：把光标移到该行的最左边单元格的左面，光标会变成箭头状。单击就可以

12、选中一行。(2)选中一列：把光标移到该列的最上边单元格的上面，光标会变成箭头状，然后单击可以选中一列。(3)选中整张表格：把光标移到表格的左上角或右边框或下边框线上。单击即可选中整幅表格。选中的表格会在周围出现一个黑框表示整张表格选中了。(4)选中单元格：单元格可以同时选中多个。选择连续的单元格，光标先选中的一个单元格，按shift键不放，单击最后一个单元格即可；要选中不连续的单元格，先按住Ctrl键不放，再单击所需要的单元格即可。,3.3 页面设计,3.3.5 超链接1页面之间的超连接 在网页中选中要做超链接的文字或者图片。在属性面板中单击“链接”后的文件夹图标，在弹出的对话框中选中目标网页

13、文件即可。设置好超链接后属性面板将显示链接文件路径与名称。按F12预览网页。在浏览器中鼠标移到超链接的地方就会变成“手形”。,3.3 页面设计,2邮件地址的超链接 在网页制作中，还经常看到这样的一些超链接。单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。这也是一种超链接。制作方法是，在编辑状态下，先选定要链接的图片或文字，在“常用”工具栏中点击“电子邮件链接”按钮弹出“电子邮件链接”对话框，输入E-Mail地址即可。,3.3 页面设计,3制作图片上的超链接图片上的超链接是指在一张图片上实现多个局部区域指向不同的网页的链接。可点的区域就是热区。热区链接的制作过程：首先插入图片，这时属

14、性面板显示图片属性，利用热点工具“”、“”和“”，在图上可以绘制热区。在图上绘制好热区后，属性面板变为热点属性面板。其中，“链接输入框”输入相应的目标页面。“替换”框输入提示说明文字。“目标框”不作选择，则默认在新浏览器窗口打开目标页面。,3.3 页面设计,3.3.6 使用多媒体在Dreamweaver 8中，除了可以插入“文本”和“图像”外，用户还可以插入动画、声音、视频等媒体元素。1插入Flash2插入Flash按钮3插入Flash文本4插入Shockwave,3.3 页面设计,3.3.7 层的使用“层”是另一种可以进行排版的工具。它可以被定位在网页上的任何位置，并且其中可以包含文本、图像

15、等所有可以直接插入至网页的对象。层拥有很多表格所不具备的特点，比如可以重叠、便于移动、可设为隐藏等。这些特点有助于我们的设计思维不受局限，从而发挥更多的想象力。,3.3 页面设计,1创建层 插入层有以下两种方法：(1)单击“布局”工具栏中“描绘层”按钮“”，再在页面上拖动以绘制一个层；(2)单击“插入/布局对象/层”，将会在页面中插入一个层。,3.3 页面设计,2嵌套层所谓嵌套层指的是一个层创建在另外一个层中，这种嵌套层我们称为父子关系，也就是隶属关系。父层移动会影响到子层，子层移动不会影响到父层。要建立这样的一种隶属关系方法很简单。在层面板中按Ctrl键将子层拖拽到父层即可。,3.3 页面设

16、计,3层和表格之间转换(1)层转换为表格在转换为表格之前，先确保层没有重叠，然后选择“修改/转换/层到表格”菜单，即可显示“转换层为表格”对话框，如下图所示。根据要求设置即可。,3.3 页面设计,(2)表格转换为层若要将表格转换为层，请选择“修改/转换/表格到层”菜单，出现如下图所示的“转换表格为层”对话框，进行适当设置即可。,3.3 页面设计,3.3.8 框架 Dreamweaver 8中的最后一个排版工具，它就是框架。虽然框架也是排版工具，但是它与之前讲过的表格和层在用途上却有着本质的差别。表格和层均是以插入的对象为单位，而框架则不同，它是以插入的网页为单位，它提供了一种较为固定的网页结构

17、。,3.3 页面设计,1创建框架和框架集 在Dreamweaver 8菜单栏里选择“文件”中的“新建”，弹出新建文件对话框 如下图所示。,3.3 页面设计,在左边的“类别”栏目中选择“框架集”后，中间的“框架集”栏目出现了多种设定好的框架结构可供选择。当然，你也可以自定义框架结构。选择将页面垂直拆分的框架结构，单击“创建”按钮后，弹出如下图所示对话框，用于设置框架的名称，也可以使用默认名称。,3.3 页面设计,单击“确定”按钮，出现设置好后的框架页面如下图所示。,3.3 页面设计,2编辑框架 对于页面中的框架和框架集，各自都有不同的属性设置。选择它们需要使用如下图所示的“框架”面板。“框架”面

18、板是通过在菜单栏中选择“窗口/框架”菜单调出的。,3.3 页面设计,(1)框架集的属性。在“框架”面板中单击最外层的边框，使其变成黑边显示，这是就属性面板用于设置框架集的属性。(2)框架的属性。在框架面板中选择任意一个框架，被选中的框架会有黑色的边框显示，这时属性面板显示该框架的属性，用于对框架进行设置,3.3 页面设计,3拆分框架自定义框架，常常要将一个框架拆分成几个更小的框架，有以下方法：(1)要拆分插入点所在的框架，从“修改/框架页”子菜单选择拆分项；(2)要以垂直或水平方式拆分一个框架或一组框架，请将框架边框从“设计”视图的边缘拖入“设计”视图的中间即可。框架设置完毕，就可以输入框架中

19、的内容了。用鼠标单击任意一个框架，然后像正常编辑页面一样插入各种文本内容、图片、Flash动画和背景音乐等网页元素。,3.3 页面设计,3.3.9 样式表的创建与使用Dreamweaver 8提供了强大的CSS支持。在Dreamweaver 8中，通过属性面板可以定义页面元素的CSS样式。但是要有效地减少设计者的工作量，需要使用CSS样式编辑器定义一个完整的CSS样式表。1创建样式表文件打开设计版面，切换到CSS样式选项卡。单击“新建CSS样式”按钮，弹出一个“新建CSS样式”的对话框。在“选择器类型”选项中，选择CSS样式的类型:类、标签或高级。,3.3 页面设计,选定合适的CSS样式类型后

20、，在“定义在”选项中选择默认的“新建样式表文件”。设置完毕中，单击“确定”按钮关闭对话框，此时会弹出保存文件对话框，提示用户保存新建的样式表文件。这里将新的样式表文件命名为word.css，保存在和网页文件同级的目录里。至此，一个新的样式表文件就创建完成了。单击“保存”按钮关闭对话框，就会打开样式表编辑器，进入样式表编辑状态。,3.3 页面设计,2文本样式的定义 字体：用于设置当前样式所用的字体。大小：用于设置字体的字号和单位。样式：用于设置字体的特殊格式，包括正常、斜体和偏斜体。行高：用于设置文本的行高。可以选择正常，由系统自动计算行高和字体大小；也可以直接输入数值，然后选择单位。修饰：用于

21、设置字体的一些修饰格式，选中相应的复选框，则激活相应的修饰格式。粗细：用于指定字符的粗细，输入数值可以指定字体的绝对粗细程度，选择粗体或特粗则可以指定字体相对的粗细程度。变量：用于设置字体的变体形式，但是在文档窗口中不能直接看到设置结果，必须在浏览器中才可以看到效果。大小写：用于设置字符的大小写方式。颜色：用于打开调色板，设置CSS样式的字符颜色。,3.3 页面设计,3背景样式的定义 背景颜色：用于设定页面背景色。背景图像：用于设定页面背景图像文件。重复：用于设定使用图像当背景时是否需要重复显示，这一般用于图像面积小于页面面积的情况。附件：用于设定对象的背景图像是随对象内容滚动还是固定。水平位

22、置：用于指定背景图像相对于应用样式的元素的水平位置。如果将“附件”设置为固定，则元素的位置是相对于文档窗口，而不是元素本身的。垂直位置：用于指定背景图像相对于应用样式的元素的垂直位置。类似“水平位置”。,3.3 页面设计,4区块样式的定义 单词间距：在字与字之间增加更多的空隙。可以在单词之间添加额外的间距。字母间距：调整字符之间的间距。与单词间距相同，可以在字符之间添加额外的间距。垂直对齐：调整页面元素的垂直位置，多数情况下要参照其父对象的位置。文本对齐：定义对象的对齐方式。文字缩进：设置每段第一行的缩进距离。空格：决定了一个元素怎样处理其中的空白部分，有三个属性值。,3.3 页面设计,5方框

23、样式的定义 宽：设置元素的宽度。可以选择“自动”由浏览器自行控制，也可以直接输入数值。只有当该样式应用到图像或分层上面时，才可以直接从文档窗口中看到设置结果。高：设置元素的高度。与“宽”类似。浮动：设置应用样式的元素的浮动位置。利用该选项，可以将元素移动到页面范围之外。清除：定义不允许分层。如果选择“左对齐”，则表明不允许分层出现在应用该样式的元素左侧；如果选择“右对齐”，则表明不允许分层出现在应用该样式的元素右侧。如果分层出现在元素相应的那侧，则该元素会在分层下自动移开。填充：定义应用样式的元素内容和元素边界之间的空白大小。边界：定义应用样式的元素边界和其他元素之间的空白大小。,3.3 页面

24、设计,6边框样式的定义样式：下拉列表中有9个选项，每个选项代表一种边框样式。宽度：可以定义应用该样式的元素的边框宽度，在上、右、下和左几个下拉列表中，可以分别设置边框的宽度。颜色：可以分别设定上、右、下和左边框的颜色。,3.3 页面设计,7列表样式的定义 类型：可以为列表项加上项目符号或编号，用于区分不同的文本行，其中有9中不动的选择。项目符号图像：可以设置以图片作为无序列表的项目符号。位置：可以设置列表项的换行位置。,3.3 页面设计,8定位样式的定义 类型：可以设置浏览器如何放置层。显示：可以设置层的初始化显示位置。Z轴：可以定义层的顺序，也就是层重叠的顺序。溢出：可以定义如果层中的内容超

25、出了层的边界后，会如何处理。置入：可以设置层的位置和大小。裁切：可以定义可视层的局部区域的位置和大小。,3.3 页面设计,9扩展样式的定义CSS的扩展样式中主要包含三方面的CSS支持，分别为CSS鼠标指针、CSS分页及CSS滤镜。10使用标签面板Dreamweaver 8允许用户使用如下图所示的e标签面板定义CSS样式表。,3.3 页面设计,11CSS样式的使用(1)内部样式表的应用 CSS样式类型有以下3种：类、标签和高级。标签和高级样式定义好了之后就直接应用了，不需要特别操作。类样式应用过程如下：在文档中，确定要应用 CSS 样式的范围。方法如下：如果样式应用于整个段落时只要将插入点放在段

26、落中；如果样式应用于部分文本，则要选取需要使用样式的文本；如果样式应用于的标签之间的内容，则要在“文档”窗口左下角的标签选择器中选择标签。,3.3 页面设计,应用类样式，方法如下：在“CSS 样式”面板中，选择“全部”模式，右键单击要应用的样式名称，然后从弹出的快捷菜单中选择“套用”；在文本“属性”面板中单击“样式”，弹出样式列表，从中选择要应用的类样式；在“文档”窗口中，右键单击所选文本，在弹出的快捷菜单中选择“CSS样式”，然后选择要应用的样式；选择“文本/CSS 样式”菜单，然后在子菜单中选择要应用的样式。,3.3 页面设计,(2)外部样式表的应用外部样式要应用到文档，首先需要将样式表文

27、件附加到文档中，附加过程如下：单击“窗口/CSS 样式”，打开CSS样式面板；在“CSS 样式”面板中，单击“附加样式表”按钮“”，出现附加样式对话框，在对话框中选择样式表文件，并按要求设置后，单击“确定”按钮，样式表文件就出现在“CSS 样式”面板中。,3.3 页面设计,3.3.10 库与模板为提高网站创建与更新的工作效率，Dreamweaver 8提供了两种可以使用的方法，分别为“模板”和“库”。1模板模板是一种特殊类型的文档，用于设计布局比较“固定的”页面。基于模板的网页文件，将继承所选模板的页面布局。在设计模板的过程中，需要指定模板的可编辑区域，以便在网页中应用模板时可以进行编辑操作。

28、(1)模板的特点,3.3 页面设计,（2）创建模板 在Dreamweaver 8中，有两种方法可以创建模板:一种是将现有的网页文档另存为模板，然后根据需要再进行修改；另外一种是直接新建一个空白模板，再在其中插入需要显示的文档内容。创建模板过程如下：创建模板文件，以.dwt 为扩展名，保存在Templates文件夹中。设置“可编辑区域”。,3.3 页面设计,（3）从模板新建文档 模板创建好后，我们就可以很方便的利用模板设计其他页面，制作过程如下：选择菜单栏“文件”中的“新建”，弹出新建文档对话框。选择“模板”选项卡，就可以看到刚才我们创建的模板。单击“创建”，进入页面设计状态后，我们就可以在模板

29、可编辑区域中修改页面，直到满足要求。,3.3 页面设计,2库 库是库项目管理工具，是已创建的、能够单独放在网页上使用的“资源”或“资源”副本的集合，这些资源被称为库项目。库项目是可以在多个页面中重复使用的页面元素，每当更改某个库项目的内容时，都可以同时更新所有使用了该项目的页面。每个库项目对应一个库文件，所有库文件都放在站点根目录下的Library子文件夹下。在库中，可以存储各种各样的页面元素，如图像、表格、声音和Flash影片等。,3.3 页面设计,3.3.11 表单及其应用 1.表单工具栏2.表单对象的插入 3.验证表单数据,3.3 页面设计,3.3.12 行为与时间轴 使用“时间轴”可以

30、实现这种网页动画效果。1时间轴“时间轴”只能对“层”发生作用，所以要产生动画效果，首先要创建层，再将图像、文本等内容插入到层中，然后通过移动层来移动这些元素。,3.3 页面设计,操作步骤如下：打开站点目录中的页面，在该页面插入一个层，并在层内放入一张图片，调整层的大小，使其与图片大小一致。现在我们要将做好的层添加到时间轴面板中。选择菜单栏“窗口”中的“时间轴”，打开时间轴面板。选中操作区中的层，并将它拖动到时间轴面板中。在时间轴中就可以看到一条从第1帧到第n帧的动画栏，用于设置动画效果。我们还要对动画的播放状态进行设置。勾选“自动播放”和“循环”选项。,3.3 页面设计,2用行为丰富网页效果(1)弹出消息框(2)链接解释文字(3)自动调整窗口大小,3.4 案例解析,3.4.1 设计思路 1网站功能定位和模块划分网站为一个“个人Web站点”，用户访问该网站，浏览该网站可以对作者的思想有一个大概的了解。网站的功能模块主要包括：主页：展示网站全貌。内容显示：显示各主题内容。2站点设计在D盘根目录下创建本地站点“chap_3”，并创建相关文件夹；根据案例结构，创建各页面文件。根据页面设计需求，实现各页面功能。,3.4 案例解析,3.4.2案例结构,3.4 案例解析,3.4.3页面解析分析各页面的设计方法和所需知识点。,