1、网页设计与制作第三版项目三利用项目三利用Dreamweaver CS6Dreamweaver CS6制作网页制作网页认识认识Dreamweaver CS6Dreamweaver CS61制作简单页面制作简单页面2利用表格工具制作网页利用表格工具制作网页3利用利用AP DIVAP DIV和和SprySpry制作网页制作网页4项目三利用项目三利用Dreamweaver CS6Dreamweaver CS6制作网页制作网页基于行为与基于行为与SprySpry特效特效制作网页制作网页7利用框架技术制作网页利用框架技术制作网页5使用使用CSSCSS修饰和美化网页修饰和美化网页6使用模板快速制作网页使用模
2、板快速制作网页8返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6Dreamweaver CS6的起始页返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6Dreamweaver CS6的标准工作界面返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(一一)菜单栏菜单栏菜单栏u 文件:管理文件，例如，新建、打开、保存、另存为、导人、导出及打印。u 编辑:编辑文本，例如，剪切、复制、粘贴、查找、替换和参数设置
3、。u 查看:切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。u 插入:插入各种元素，例如，图片、多媒体组件、表格、框架及超级链接。u 修改:修改页面元素，例如，在表格中再插人表格及拆分、合并单元格。u 格式:对文本进行操作，例如，设置文本格式。u 命令:所有的附加命令项。u 站点:创建和管理站点。u 窗口:显示和隐藏控制面板以及切换文档窗口。u 帮助:联机帮助功能。例如，按下Fl键，就会打开电子帮助文本。返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(二二)面板组面板组面板组“插入”面板组返回返回上一页上一页下一页下一页
4、任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(四四)标准工具栏标准工具栏标准下具栏标准工具栏包含执行“文件”和“编辑”菜单中常见操作的按钮:如新建、打开、在Bridge中浏览、保存、全部保存、打印代码、剪切、复制、粘贴、撤销和重做，如图所示。返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(五五)样式呈现工具栏样式呈现工具栏“样式呈现”工具栏（默认情况下处于隐藏状态）包含一些按钮，如果使用依赖于媒体的样式表，则这些按钮可帮助您查看设计在不同媒体类型中的呈现方式。它还包含一个允许您启用或禁用
5、CSS 样式的按钮。若要显示该工具栏，请选择“查看”“工具栏”“样式呈现”。样式呈现工具栏返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(六六)文档窗口文档窗口当打开或创建一个项目，进人文档窗口时，可以在文档区域中进行文字输人、表格插人和图片编辑等操作。文档窗口显示当前文档，可以选择以下任一视图。返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(七七)状态栏状态栏文档窗口底部的状态栏提供与正创建的文档有关的其他信息。状态栏返回返回上一页上一页下一页下一页任务任务
6、1 1认识认识Dreamweaver CS6Dreamweaver CS6(八八)“属性属性”面板面板“属性”面板可以检查和编辑当前选定页面元素(如文本和插人的对象)的最常用属性。“属性”面板的内容根据选定的元素的不同会有所不同。“属性”面板返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(九九)“文件文件”面板面板使用“文件”面板可以查看和管理Dreamweaver站点中的文件，如图所示。文件面板返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(十十)CSS样式
7、样式”面板面板 使用“CSS样式”面板可以跟踪影响当前所选页面元素的CSS规则和属性或影响整个文档的规则和属性(“全部”模式)。使用“CSS样式”面板顶部的切换按钮可以在“全部”和“当前”两种模式之间切换，还可以在“全部”和“当前”两种模式下修改CSS属性，如图所示。CSS样式”面板返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(十一十一)可视化辅助线可视化辅助线Dreamweaver提供了几种可视化辅助线，帮助用户设计文档和大概估计文档在浏览器中的外观。用户可以执行以下任一操作:(1)将文档窗口与所需的窗口对齐，查看元素如何
8、更好地适合页面。(2)用跟踪图像作为页面背景，可帮助用户复制在插图或图像编辑应用程序(如Adobe Photoshop或Adobe Fireworks)中创建的设计。(3)用标尺和辅助线为精确定位和调整页面元素提供可视的提示。(4)使用网格标记可以精确定位绝对定位元素(AP元素)以及调整其大小。返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(一一)自适应流体网格布局自适应流体网格布局创建自适应流体网格布局页面返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(二二
9、)“多屏预览多屏预览”面板面板“多屏预览”面板返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(三三)CSS过渡效果过渡效果返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(四四)增强型增强型j Query移动框架支持移动框架支持创建针对手机的文件返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(四四)增强型增强型j Query移动框架支持移动框架支持应用“jQuery Mobile色板”面板 返回
10、返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(五五)改善的改善的FTP性能性能改善的站点管理返回返回上一页上一页下一页下一页任务任务1 1认识认识Dreamweaver CS6Dreamweaver CS6(六六)更新的实时视图更新的实时视图通过实时视图测试后的网页返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(一一)设置站点的本地信息设置站点的本地信息设置站点的本地信息返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置远程服务器的连接方式设置远程服务器的连接方式选择“站点
11、”“新建站点”命令，在弹出的对话框中选择“服务器”选项，在“基本”选项卡中选择“连接方法”为“FTP”，然后分别设置网站的“FTP地址”“用户名”和“密码”等信息，如图所示。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(三三)完成站点建立完成站点建立站点设置完成后，可以看到“文件”面板中列出了站点中的文件，如图3-2 2所示。如果“文件”面板没有显示，可以执行“窗口”“文件”命令查看(快捷键为F8)。站点文件夹返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(一一)创建空白网页创建空白网页(1)在菜单栏中执行“文件”一“新建”命令，弹出“新建文档
12、”对话框，如图所示。“新建文档”对话框返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(一一)创建空白网页创建空白网页(2)在“空白页”选项卡中选择页面类型为“HTML，以及布局为“无”，单击“创建”按钮，创建一个新的可编辑的网页，在“标题”文本框中输人“南通罗德纺织品有限公司”，如图所示。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(一一)创建空白网页创建空白网页(3)在文档窗口中输人相应代码后，选择“文件”“保存”命令，将网页保存在站点中，文件命名为index.Html。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(
13、二二)设置页面属性设置页面属性(1)在菜单栏执行“修改”一“页面属性”命令，弹出“页面属性”对话框，如图所示。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置页面属性设置页面属性(2)设置网页外观。一般情况下，设置字体大小为12像素，文本颜色、背景颜色和背景图像可自行设定。同时设置网页四边的边距，一般只设置上边距为0像素，如图所示。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置页面属性设置页面属性(3)选择背景图像。单击“浏览”按钮，在弹出的“选择图像源文件”对话框中选择背景图片为201.jpg，然后单击“确定”按钮返回。返
14、回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(三三)预览网页预览网页 在菜单栏中执行“文件”“在浏览器中预览”“Internet Explorer”命令或单击工具栏中 按钮即可打开IE浏览器，预览网页。网页预览效果如图所示。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(一一)添加文本添加文本(1)直接输入文本。(2)从其他文档复制并粘贴。粘贴文字到空白文档返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置文字格式设置文字格式(1)用鼠标选择文档窗口中第一行的“企业介绍”四个字，在“属性”面板的“HTML中选择“格
15、式”为“标题2，如图所示。字体属性设置返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置文字格式设置文字格式(2)在“属性”面板的“CSS中设置对齐方式为居中对齐(单击图标)，弹出如图所示的“新建CSS规则”对话框。“新建CSS规则”对话框返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置文字格式设置文字格式(3)建立自定义类“.t1，然后设置字体颜色为“#FF0000，结果如图3-30所示。文字格式设置完成返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置文字格式设置文字格式(4)设置第一段文字为
16、“楷体、14号、红色、斜体”，第二段文字为“黑体、18号、蓝色、居中对齐、粗体”。用鼠标选择第一段文字，在CSS“属性”面板中选择14号字体，随即弹出“新建CSS规则”对话框，定义自定义类“.t2，如图所示，完成后单击“确定”按钮。定义自定义类“.t2返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置文字格式设置文字格式编辑字体列表。Dreamweaver CS6预设的可供选择的只有13项英文字体，要想使用其他字体，需编辑字体列表。编辑字体列表返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置文字格式设置文字格式 分别设置第一段文
17、字和第二段文字的字体。选中对应文字，从CSS“属性”面板中的“字体”下拉列表中分别选择“楷体”“黑体”。设置字体大小。从CSS属性”面板中的“大小”下拉列表中分别选择14号和18号字体。字号数字从小到大，对应的字也逐渐增大。设置文字颜色。单击CSS属性”面板中的颧按钮，在弹出的颜色列表中选择所需要的颜色，即红色和蓝色。设置字符样式。单击CSS属性”面板中的树或俐按钮，将选定文本设置为粗体或斜体，如图所示。设置字符样式返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)设置文字格式设置文字格式各项设置完成后，预览网页，如图所示。预览字体设置效果返回返回上一页上一页下一页
18、下一页任务任务2 2制作简单页面制作简单页面(三三)文字的其他设置文字的其他设置换行换行文本空格文本空格插入特殊字符插入特殊字符插人水平线插人水平线插人项目列表插人项目列表插人文件头插人文件头标签标签返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(三三)文字的其他设置文字的其他设置首选参数设置返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(三三)文字的其他设置文字的其他设置插人特殊字符返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(三三)文字的其他设置文字的其他设置水平线属性设置列表属性设置文件头内容返回返回上一页上一页下
19、一页下一页任务任务2 2制作简单页面制作简单页面目前互联网上支持的图像格式主要有GIF,JPEG和PNG三种，其中使用最为广泛的是GIF和JPEG。在制作网页时，要先构想好网页布局，在图像处理软件中将需要插入的图片进行处理，然后存放在站点根目录下的文件夹中。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(一一)在在“公司介绍公司介绍”四个字符下面添加企业图片四个字符下面添加企业图片返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)选择图像路径选择图像路径返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面 注意注意:如果要插
20、入的图片不在根文件夹中，会弹出如图所示的对话框，提醒用户将该图片保存到根文件夹中，一般情况下都单击“是”按钮，然后将该图片保存到根文件夹中。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(三三)设置图像属性设置图像属性图像的属性返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(四四)在在Dreamweaver中编辑图像中编辑图像Dreamweaver提供了基本的图像编辑功能，可以在Dreamweaver中重新取样、裁剪、优化和锐化图像，还可以调整图像的亮度和对比度。Dreamweaver的图像编辑工具旨在使网页设计者能与内容设计者(负责创建网站中使
21、用的图像文件)轻松地实现协作。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(五五)插入其他图像元素插入其他图像元素1.插入图像占位符返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(五五)插入其他图像元素插入其他图像元素2.鼠标经过图像返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面链接是一个网站的灵魂，一个网站是由多个页面组成的，而这些页面之间依据链接确定相互之间的导航关系。超级链接是指站点内不同网页之间、站点与Web之间的连接关系，它可以使站点内的所有网页成为有机的整体，还能够使不同站点之间建立联系。超级链接由两部分组成
22、:链接载体和链接目标。返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(一一)关于链接路径关于链接路径根路径根路径相对相对路径路径绝对绝对路径路径返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(二二)创建外部链接创建外部链接1.直接输入地址链接属性设置返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(三三)创建内部链接创建内部链接创建内部链接返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(四四)创建创建E-mail链接链接创建E-mail链接手动输人电子邮件地址返回返回上一页上一页下一页下一页任务任务2
23、 2制作简单页面制作简单页面(五五)创建锚记链接创建锚记链接插人命名锚记插人命名锚记后的网页返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(五五)创建锚记链接创建锚记链接创建锚记链接返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面(六六)制作图像映射制作图像映射图片的“属性”面板热点链接返回返回上一页上一页下一页下一页任务任务2 2制作简单页面制作简单页面插入插入Flash插入插入FLV视频视频添加背景添加背景音乐音乐插入视频插入视频返回返回上一页上一页下一页下一页任务任务3 3利用表格工具制作网页利用表格工具制作网页罗德纺织品有限公司网站首页返回
24、返回上一页上一页下一页下一页任务任务3 3利用表格工具制作网页利用表格工具制作网页表格属性设置返回返回上一页上一页下一页下一页任务任务3 3利用表格工具制作网页利用表格工具制作网页表格的边距和间距返回返回上一页上一页下一页下一页任务任务3 3利用表格工具制作网页利用表格工具制作网页设置表格属性u 填充填充:用来设置单元格边距。u 间距间距:用来设置单元格间距。u 对齐对齐:用来设置表格的对齐方式，默认的对齐方式为左对齐。u 边框边框:用来设置表格边框的宽度。返回返回上一页上一页下一页下一页任务任务3 3利用表格工具制作网页利用表格工具制作网页设置单元格属性 水平水平:用来设置单元格内元素的水平
25、排版方式，可以是居左、居右或居中。垂直垂直:用来设置单元格内元素的垂直排版方式，可以是顶端对齐、底端对齐或居中对齐。高、宽高、宽:用来设置单元格的宽度和高度。不换行不换行:勾选该选项防止单元格中较长的文本自动换行。标题标题:使选择的单元格成为标题单元格，单元格内的文字自动以标题格式显示出来。背景颜色背景颜色:用来设置表格的背景颜色。返回返回上一页上一页下一页下一页任务任务3 3利用表格工具制作网页利用表格工具制作网页修改表格返回返回上一页上一页下一页下一页任务任务3 3利用表格工具制作网页利用表格工具制作网页“插入列或行”对话框返回返回上一页上一页下一页下一页任务任务3 3利用表格工具制作网页
26、利用表格工具制作网页(1)在第一行的左边单元格中插人一个公司标记的Flash文件，将top.jpg设置为右边单元格的背景图片。(2)在第二行的单元格中嵌套插人一个新的一行两列的表格，并进行相应设置，作为网站导航。(3)在第三行中插人公司宣传的Flash文件。完成步骤(1)(3)后的效果返回返回上一页上一页下一页下一页任务任务3 3利用表格工具制作网页利用表格工具制作网页(4)在第四行中分别插人三个嵌套表格，并对其进行相应设置。(5)在第五行中插入友情链接图片，并采用图像映射方式分别设置其导航。(6)在第六行中插人网站版本信息并设置其背景颜色为“#c7eefd”。返回返回上一页上一页下一页下一页
27、任务任务4 4利用利用AP DIVAP DIV和和SprySpry制作网页制作网页(一)插入AP DIV(二)拖放APP DIV(三)浏览AP元素返回返回上一页上一页下一页下一页任务任务4 4利用利用AP DIVAP DIV和和SprySpry制作网页制作网页AP DIV的属性返回返回上一页上一页下一页下一页任务任务4 4利用利用AP DIVAP DIV和和SprySpry制作网页制作网页由于AP DIV在网页布局上非常方便，因此一些人可能不喜欢使用表格来创建自己的页面，而是喜欢通过AP DIV来进行设计。Dreamweaver CS6可以使用AP DIV来创建布局，然后将它们转换为表格。返回
28、返回上一页上一页下一页下一页任务任务4 4利用利用AP DIVAP DIV和和SprySpry制作网页制作网页利用AP DIV布局的罗德纺织品公司网站的首页返回返回上一页上一页下一页下一页任务任务4 4利用利用AP DIVAP DIV和和SprySpry制作网页制作网页(一一)使用跟踪图像辅助页面的布局使用跟踪图像辅助页面的布局选择“跟踪图像”返回返回上一页上一页下一页下一页任务任务4 4利用利用AP DIVAP DIV和和SprySpry制作网页制作网页(二二)布局页面顶部布局页面顶部页面顶部布局完成返回返回上一页上一页下一页下一页任务任务4 4利用利用AP DIVAP DIV和和SpryS
29、pry制作网页制作网页(三三)布局页面中间的主体部分布局页面中间的主体部分页面中间主体部分布局完成返回返回上一页上一页下一页下一页任务任务4 4利用利用AP DIVAP DIV和和SprySpry制作网页制作网页(四四)布局页面下方的友情链接及公司信息布局页面下方的友情链接及公司信息AP DIV布局整体结构返回返回上一页上一页下一页下一页任务任务4 4利用利用AP DIVAP DIV和和SprySpry制作网页制作网页(一一)使用使用Spry菜单栏菜单栏提示复制相关文件Spry菜单栏”对话框设置Spry菜单栏属性返回返回上一页上一页下一页下一页任务任务4 4利用利用AP DIVAP DIV和和
30、SprySpry制作网页制作网页(二二)使用使用Spry选项卡式面板选项卡式面板Spry选项卡式面板Spry选项卡式面板的属性返回返回上一页上一页下一页下一页任务任务5 5利用框架技术制作网页利用框架技术制作网页框架是网页中经常使用的页面设计方法，框架的作用就是把网页在一个框架是网页中经常使用的页面设计方法，框架的作用就是把网页在一个浏览器窗口中分割成几个不同的区域，实现在一个浏览器窗口中显示多个浏览器窗口中分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。页面。框架示意图框架结构组成：框架结构组成：框架(Frame)框架集(Frameset)返回返回上一页上一页下一页下一页任
31、务任务5 5利用框架技术制作网页利用框架技术制作网页(1)新建一个HTML文件，在菜单中选择“插入”“HTML”“框架”命令，如图所示，在弹出的下拉菜单中选择“上方及左侧嵌套”。创建的框架结构如图所示。选择框架创建的框架结构返回返回上一页上一页下一页下一页任务任务5 5利用框架技术制作网页利用框架技术制作网页(2)使用鼠标直接拖动框架边框，直至合适的位置，这样上方及左侧嵌套的框架即完成。(3)选中框架集。选择“窗口”“框架”命令，打开“框架”面板。“框架”面板中的字符表示每个框架的名称，在“框架”面板中单击最外层的边框，使其显示出黑边，则选中了框架集，如图所示。选中框架集返回返回上一页上一页下
32、一页下一页任务任务5 5利用框架技术制作网页利用框架技术制作网页(4)选中框架集后，在“属性”面板中设置各个选项的属性，如图所示。框架集的属性返回返回上一页上一页下一页下一页任务任务5 5利用框架技术制作网页利用框架技术制作网页(5)选中框架，设置框架属性。在“框架”面板中单击需要选择的框架，使其出现细黑边，然后在“属性”面板中设置各个选项，如图所示。框架的属性返回返回上一页上一页下一页下一页任务任务5 5利用框架技术制作网页利用框架技术制作网页每一个框架都有一个框架名称，可以用默认的框架名称，也可以在“属性”面板中修改框架名称。系统默认的框架名称为topFrame(上方)、leftFrame
33、(左侧)、mainFrame(右侧)。返回返回上一页上一页下一页下一页任务任务5 5利用框架技术制作网页利用框架技术制作网页在框架式网页中设置超级链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗口。链接目标较远(其他网站)时，一般放在新窗口中;在导航条上创建链接时，一般将目标文档放在另一个框架中显示(当页面较小时)或全屏幕显示(当页面较大时)。返回返回上一页上一页下一页下一页任务任务5 5利用框架技术制作网页利用框架技术制作网页(1)在菜单栏中选择“窗口”“框架”命令，打开“框架”面板，选中整个框架集，如图所示。在“属性”面板中，将“行”的值设置为“317，单位为“像素”，如图所示
34、。选中框架集框架集属性设置返回返回上一页上一页下一页下一页任务任务5 5利用框架技术制作网页利用框架技术制作网页(2)在菜单栏中选择“窗口”“框架”命令，打开“框架”面板，选中子框架集，如图所示。在“属性”面板中，将“列”的值设置为“280，单位为“像素”，如图所示。选中子框架集子框架集属性设置返回返回上一页上一页下一页下一页任务任务5 5利用框架技术制作网页利用框架技术制作网页(3)鼠标在topFrame框架中的空白处单击一下，在页面“属性”面板中将上、下、左、右边距全部设为“0”。插人一个3行2列的表格，宽度为902px，高度为307px，居中对齐，先分别对第二行和第三行进行合并单元格，在
35、3行中依次插人bz.Swf、top.j pg、x01.JPg、top3.Jpg和flash.Swf。返回返回上一页上一页下一页下一页任务任务5 5利用框架技术制作网页利用框架技术制作网页(4)鼠标在leftFrame框架中的空白处单击一下，在页面“属性”面板中将上、下、左、右边距全部设为“0。插人一个2行1列的表格，表格宽度为220px，右对齐。将第一个单元格的高度设为250px，选中其余单元格，将高度设置为50px，背景颜色设置为“#d8efff。分别输人文字设置导航栏目，然后对各个导航栏目建立超级链接，链接路径指向要链接到的网页，“目标”选择“mainFrame，框架，如图所示。子框架页面
36、设置返回返回上一页上一页下一页下一页任务任务5 5利用框架技术制作网页利用框架技术制作网页(5)鼠标在mainFrame框架中的空白处单击一下，在页面“属性”中将上、下、左、右边距全部设为“0。插入一个新的表格，设置为左对齐。返回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页层叠样式表(CSS)是一系列格式设置规则，它们控制Web页面内容的外观。使用CSS设置页面格式时，内容与表现形式是相互分开的。页面内容(HTML代码)位于自身的HTML文件中，而定义代码表现形式的CSS规则位于另一个文件(外部样式表)或HTML文档的另一部分(通常为部分)中。使用
37、CSS可以非常灵活地控制页面的外观。返回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页CSS样式”面板“新建CSS规则”对话框返回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页复合内容的CSS规则返回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页定义.w1的CSS规则返回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页(一一)文本样式的设置文本样式的设置设置CSS的文本样式将CSS样式应用于标签应用CSS样式后的文字效果返
38、回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页(二二)背景样式的设置背景样式的设置WI的背景设置返回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页(三三)区块样式的设置区块样式的设置在“.WI的CSS规则定义”对话框的左侧选择“区块”，可以在右边区域中设置CSS的区块样式。返回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页(四四)方框样式的设置方框样式的设置前面已经设置过图像的大小、图像水平和垂直方向上的空白区域、图像是否有文字环绕效果等，方框样式则进一步完善和
39、丰富了这些设置。在“.WI的CSS规则定义”对话框的左侧选择“方框”，可以在右边区域中设置CSS的方框样式。返回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页(五五)边框样式的设置边框样式的设置设置边框样式可以给对象添加边框，设置边框的颜色、粗细、样式。返回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页(五五)边框样式的设置边框样式的设置应用表格边框样式后的效果返回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页(六六)列表样式的设置列表样式的设置CSS中有关列表的
40、设置丰富了列表的外观。在“.WI的CSS规则定义”对话框的左侧选择“列表”，可以在右边区域中设置CSS的列表样式。返回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页(一一)编辑编辑CSS样式样式返回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页(二二)应用应用CSS自定义样式自定义样式利用快捷菜单设置CSS样式返回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页(三三)附加样式表附加样式表“链接外部样式表”对话框返回返回上一页上一页下一页下一页任务任务6 6使用使用
41、CSSCSS修饰和美化网页修饰和美化网页(一一)用用CSS样式表的滤镜制作模糊文字效果样式表的滤镜制作模糊文字效果w2的CSS规则设置CSS扩展的模糊设置模糊文字效果返回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页(二二)超链接的超链接的CSS样式样式原始导航条带链接的导航条新建CSS规则返回返回上一页上一页下一页下一页任务任务6 6使用使用CSSCSS修饰和美化网页修饰和美化网页(二二)超链接的超链接的CSS样式样式a:link的CSS规则定义”对话框应用超链接样式后的导航效果返回返回上一页上一页下一页下一页任务任务7 7基于行为与基于行为与Sp
42、rySpry特效制作网页特效制作网页对象事件动作事件与动作返回返回上一页上一页下一页下一页任务任务7 7基于行为与基于行为与SprySpry特效制作网页特效制作网页(一一)“行为行为”面板面板“行为”面板返回返回上一页上一页下一页下一页任务任务7 7基于行为与基于行为与SprySpry特效制作网页特效制作网页(二二)创建行为创建行为弹出公告选择对象添加动作调整事件返回返回上一页上一页下一页下一页任务任务7 7基于行为与基于行为与SprySpry特效制作网页特效制作网页(一一)状态栏文本设置实例状态栏文本设置实例“设置状态栏文本”对话框状态栏文本设置预览效果返回返回上一页上一页下一页下一页任务任
43、务7 7基于行为与基于行为与SprySpry特效制作网页特效制作网页(二二)制作图像显示制作图像显示/渐隐效果渐隐效果选择“显示/渐隐”命令显示/渐隐设置选择行为事件提示复制相关文件返回返回上一页上一页下一页下一页任务任务7 7基于行为与基于行为与SprySpry特效制作网页特效制作网页(三三)制作图像左右晃动效果制作图像左右晃动效果选择“晃动”命令晃动设置选择行为事件提示复制相关文件返回返回上一页上一页下一页下一页任务任务7 7基于行为与基于行为与SprySpry特效制作网页特效制作网页(四四)制作跟随鼠标信息提示制作跟随鼠标信息提示添加Spry下具提示构件Spry工具提示文本设置Spry工
44、具提示属性设置提示复制相关文件Spry工具提示效果返回返回上一页上一页下一页下一页任务任务8 8使用模板快速制作网页使用模板快速制作网页直接创建模板直接创建模板将普通网页另将普通网页另存为模板存为模板从从“文件文件”菜菜单新建模板单新建模板返回返回上一页上一页下一页下一页任务任务8 8使用模板快速制作网页使用模板快速制作网页(一一)可编辑区域可编辑区域创建可编辑区域“新建可编辑区域”对话框文档窗口中的可编辑区域返回返回上一页上一页下一页下一页任务任务8 8使用模板快速制作网页使用模板快速制作网页(二二)其他模板区域其他模板区域可编辑的可选区域重复区域可选区域返回返回上一页上一页下一页下一页任务任务8 8使用模板快速制作网页使用模板快速制作网页创建库创建库项目项目插入库插入库项目项目更改库更改库项目项目返回返回上一页上一页下一页下一页任务任务8 8使用模板快速制作网页使用模板快速制作网页添加可编辑区域插人可编辑区域后的页面修改库文件将库文件直接拖到模板中返回返回上一页上一页下一页下一页任务任务8 8使用模板快速制作网页使用模板快速制作网页从模板创建应用所有资源的网页基于模板创建的网页更新源文件提示END.
