网页设计与制作(第三版)-(4)课件

1、网页设计与制作第三版项目三利用Dreamweaver CS6制作网页认识Dreamweaver CS61制作简单页面2利用表格工具制作网页3利用AP DIV和Spry制作网页4项目三利用Dreamweaver CS6制作网页基于行为与Spry特效制作网页7利用框架技术制作网页5使用CSS修饰和美化网页6使用模板快速制作网页8任务1认识Dreamweaver CS6一、认识Dreamweaver CS6的工具界面Dreamweaver CS6的起始页任务1认识Dreamweaver CS6一、认识Dreamweaver CS6的工具界面Dreamweaver CS6的标准工作界面任务1认识Dre

2、amweaver CS6一、认识Dreamweaver CS6的工具界面(一)菜单栏菜单栏文件:管理文件，例如，新建、打开、保存、另存为、导人、导出及打印。编辑:编辑文本，例如，剪切、复制、粘贴、查找、替换和参数设置。查看:切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。插入:插入各种元素，例如，图片、多媒体组件、表格、框架及超级链接。修改:修改页面元素，例如，在表格中再插人表格及拆分、合并单元格。格式:对文本进行操作，例如，设置文本格式。命令:所有的附加命令项。站点:创建和管理站点。窗口:显示和隐藏控制面板以及切换文档窗口。帮助:联机帮助功能。例如，按下Fl键，就会打开电子帮助文本。任

3、务1认识Dreamweaver CS6一、认识Dreamweaver CS6的工具界面(二)面板组面板组“插入”面板组任务1认识Dreamweaver CS6一、认识Dreamweaver CS6的工具界面(四)标准工具栏标准下具栏标准工具栏包含执行“文件”和“编辑”菜单中常见操作的按钮:如新建、打开、在Bridge中浏览、保存、全部保存、打印代码、剪切、复制、粘贴、撤销和重做，如图所示。任务1认识Dreamweaver CS6一、认识Dreamweaver CS6的工具界面(五)样式呈现工具栏“样式呈现”工具栏（默认情况下处于隐藏状态）包含一些按钮，如果使用依赖于媒体的样式表，则这些按钮可帮

4、助您查看设计在不同媒体类型中的呈现方式。它还包含一个允许您启用或禁用 CSS 样式的按钮。若要显示该工具栏，请选择“查看”“工具栏”“样式呈现”。样式呈现工具栏任务1认识Dreamweaver CS6一、认识Dreamweaver CS6的工具界面(六)文档窗口当打开或创建一个项目，进人文档窗口时，可以在文档区域中进行文字输人、表格插人和图片编辑等操作。文档窗口显示当前文档，可以选择以下任一视图。任务1认识Dreamweaver CS6一、认识Dreamweaver CS6的工具界面(七)状态栏文档窗口底部的状态栏提供与正创建的文档有关的其他信息。状态栏任务1认识Dreamweaver CS6

5、一、认识Dreamweaver CS6的工具界面(八)“属性”面板 “属性”面板可以检查和编辑当前选定页面元素(如文本和插人的对象)的最常用属性。“属性”面板的内容根据选定的元素的不同会有所不同。“属性”面板任务1认识Dreamweaver CS6一、认识Dreamweaver CS6的工具界面(九)“文件”面板使用“文件”面板可以查看和管理Dreamweaver站点中的文件，如图所示。文件面板任务1认识Dreamweaver CS6一、认识Dreamweaver CS6的工具界面(十) CSS样式”面板 使用“CSS样式”面板可以跟踪影响当前所选页面元素的CSS规则和属性或影响整个文档的规则

6、和属性(“全部”模式)。使用“CSS样式”面板顶部的切换按钮可以在“全部”和“当前”两种模式之间切换，还可以在“全部”和“当前”两种模式下修改CSS属性，如图所示。CSS样式”面板任务1认识Dreamweaver CS6一、认识Dreamweaver CS6的工具界面(十一)可视化辅助线Dreamweaver提供了几种可视化辅助线，帮助用户设计文档和大概估计文档在浏览器中的外观。用户可以执行以下任一操作: (1)将文档窗口与所需的窗口对齐，查看元素如何更好地适合页面。 (2)用跟踪图像作为页面背景，可帮助用户复制在插图或图像编辑应用程序(如Adobe Photoshop或Adobe Firew

7、orks)中创建的设计。 (3)用标尺和辅助线为精确定位和调整页面元素提供可视的提示。 (4)使用网格标记可以精确定位绝对定位元素(AP元素)以及调整其大小。任务1认识Dreamweaver CS6二、体验Dreamweaver CS6的新功能(一)自适应流体网格布局创建自适应流体网格布局页面任务1认识Dreamweaver CS6二、体验Dreamweaver CS6的新功能(二)“多屏预览”面板“多屏预览”面板任务1认识Dreamweaver CS6二、体验Dreamweaver CS6的新功能(三)CSS过渡效果任务1认识Dreamweaver CS6二、体验Dreamweaver CS

8、6的新功能(四)增强型j Query移动框架支持创建针对手机的文件任务1认识Dreamweaver CS6二、体验Dreamweaver CS6的新功能(四)增强型j Query移动框架支持应用“jQuery Mobile色板”面板 任务1认识Dreamweaver CS6二、体验Dreamweaver CS6的新功能(五)改善的FTP性能改善的站点管理任务1认识Dreamweaver CS6二、体验Dreamweaver CS6的新功能(六)更新的实时视图通过实时视图测试后的网页任务2制作简单页面一、新建站点(一)设置站点的本地信息设置站点的本地信息任务2制作简单页面一、新建站点(二)设置远

9、程服务器的连接方式选择“站点”“新建站点”命令，在弹出的对话框中选择“服务器”选项，在“基本”选项卡中选择“连接方法”为“FTP”，然后分别设置网站的“FTP地址”“用户名”和“密码”等信息，如图所示。任务2制作简单页面一、新建站点(三)完成站点建立站点设置完成后，可以看到“文件”面板中列出了站点中的文件，如图3-2 2所示。如果“文件”面板没有显示，可以执行“窗口”“文件”命令查看(快捷键为F8)。站点文件夹任务2制作简单页面二、新建网页(一)创建空白网页(1)在菜单栏中执行“文件”一“新建”命令，弹出“新建文档”对话框，如图所示。“新建文档”对话框任务2制作简单页面二、新建网页(一)创建空

10、白网页 (2)在“空白页”选项卡中选择页面类型为“HTML，以及布局为“无”，单击“创建”按钮，创建一个新的可编辑的网页，在“标题”文本框中输人“南通罗德纺织品有限公司”，如图所示。任务2制作简单页面二、新建网页(一)创建空白网页 (3)在文档窗口中输人相应代码后，选择“文件”“保存”命令，将网页保存在站点中，文件命名为index. Html。任务2制作简单页面二、新建网页(二)设置页面属性 (1)在菜单栏执行“修改”一“页面属性”命令，弹出“页面属性”对话框，如图所示。任务2制作简单页面二、新建网页(二)设置页面属性 (2)设置网页外观。一般情况下，设置字体大小为12像素，文本颜色、背景颜色

11、和背景图像可自行设定。同时设置网页四边的边距，一般只设置上边距为0像素，如图所示。任务2制作简单页面二、新建网页(二)设置页面属性(3)选择背景图像。单击“浏览”按钮，在弹出的“选择图像源文件”对话框中选择背景图片为201.jpg，然后单击“确定”按钮返回。任务2制作简单页面二、新建网页(三)预览网页 在菜单栏中执行“文件”“在浏览器中预览”“Internet Explorer”命令或单击工具栏中 按钮即可打开IE浏览器，预览网页。网页预览效果如图所示。任务2制作简单页面三、添加文本(一)添加文本(1)直接输入文本。(2)从其他文档复制并粘贴。粘贴文字到空白文档任务2制作简单页面三、添加文本(

12、二)设置文字格式(1)用鼠标选择文档窗口中第一行的“企业介绍”四个字，在“属性”面板的“HTML中选择“格式”为“标题2，如图所示。字体属性设置任务2制作简单页面三、添加文本(二)设置文字格式(2)在“属性”面板的“CSS中设置对齐方式为居中对齐(单击图标)，弹出如图所示的“新建CSS规则”对话框。“新建CSS规则”对话框任务2制作简单页面三、添加文本(二)设置文字格式(3)建立自定义类“. t1，然后设置字体颜色为“# FF0000，结果如图3-30所示。文字格式设置完成任务2制作简单页面三、添加文本(二)设置文字格式 (4)设置第一段文字为“楷体、14号、红色、斜体”，第二段文字为“黑体、

13、18号、蓝色、居中对齐、粗体”。用鼠标选择第一段文字，在CSS“属性”面板中选择14号字体，随即弹出“新建CSS规则”对话框，定义自定义类“. t2，如图所示，完成后单击“确定”按钮。定义自定义类“. t2任务2制作简单页面三、添加文本(二)设置文字格式编辑字体列表。Dreamweaver CS6预设的可供选择的只有13项英文字体，要想使用其他字体，需编辑字体列表。编辑字体列表任务2制作简单页面三、添加文本(二)设置文字格式 分别设置第一段文字和第二段文字的字体。选中对应文字，从CSS“属性”面板中的“字体”下拉列表中分别选择“楷体”“黑体”。设置字体大小。从CSS属性”面板中的“大小”下拉列

14、表中分别选择14号和18号字体。字号数字从小到大，对应的字也逐渐增大。设置文字颜色。单击CSS属性”面板中的颧按钮，在弹出的颜色列表中选择所需要的颜色，即红色和蓝色。设置字符样式。单击CSS属性”面板中的树或俐按钮，将选定文本设置为粗体或斜体，如图所示。设置字符样式任务2制作简单页面三、添加文本(二)设置文字格式各项设置完成后，预览网页，如图所示。预览字体设置效果任务2制作简单页面三、添加文本(三)文字的其他设置换行文本空格插入特殊字符插人水平线插人项目列表插人文件头标签任务2制作简单页面三、添加文本(三)文字的其他设置首选参数设置任务2制作简单页面三、添加文本(三)文字的其他设置插人特殊字符

15、任务2制作简单页面三、添加文本(三)文字的其他设置水平线属性设置列表属性设置文件头内容任务2制作简单页面四、添加图像目前互联网上支持的图像格式主要有GIF, JPEG和PNG三种，其中使用最为广泛的是GIF和JPEG。在制作网页时，要先构想好网页布局，在图像处理软件中将需要插入的图片进行处理，然后存放在站点根目录下的文件夹中。任务2制作简单页面四、添加图像(一)在“公司介绍”四个字符下面添加企业图片任务2制作简单页面四、添加图像(二)选择图像路径任务2制作简单页面四、添加图像 注意:如果要插入的图片不在根文件夹中，会弹出如图所示的对话框，提醒用户将该图片保存到根文件夹中，一般情况下都单击“是”

16、按钮，然后将该图片保存到根文件夹中。任务2制作简单页面四、添加图像(三)设置图像属性图像的属性任务2制作简单页面四、添加图像(四)在Dreamweaver中编辑图像Dreamweaver提供了基本的图像编辑功能，可以在Dreamweaver中重新取样、裁剪、优化和锐化图像，还可以调整图像的亮度和对比度。Dreamweaver的图像编辑工具旨在使网页设计者能与内容设计者(负责创建网站中使用的图像文件)轻松地实现协作。任务2制作简单页面四、添加图像(五)插入其他图像元素1.插入图像占位符任务2制作简单页面四、添加图像(五)插入其他图像元素2.鼠标经过图像任务2制作简单页面五、添加链接链接是一个网站

17、的灵魂，一个网站是由多个页面组成的，而这些页面之间依据链接确定相互之间的导航关系。超级链接是指站点内不同网页之间、站点与Web之间的连接关系，它可以使站点内的所有网页成为有机的整体，还能够使不同站点之间建立联系。超级链接由两部分组成:链接载体和链接目标。任务2制作简单页面五、添加链接(一)关于链接路径根路径相对路径绝对路径任务2制作简单页面五、添加链接(二)创建外部链接1.直接输入地址链接属性设置任务2制作简单页面五、添加链接(三)创建内部链接创建内部链接任务2制作简单页面五、添加链接(四)创建E-mail链接创建E-mail链接手动输人电子邮件地址任务2制作简单页面五、添加链接(五)创建锚记

18、链接插人命名锚记插人命名锚记后的网页任务2制作简单页面五、添加链接(五)创建锚记链接创建锚记链接任务2制作简单页面五、添加链接(六)制作图像映射图片的“属性”面板热点链接任务2制作简单页面六、添加多媒体插入Flash插入FLV视频添加背景音乐插入视频任务3利用表格工具制作网页一、设计表格结构罗德纺织品有限公司网站首页任务3利用表格工具制作网页二、添加表格表格属性设置任务3利用表格工具制作网页二、添加表格表格的边距和间距任务3利用表格工具制作网页三、设置表格属性设置表格属性填充:用来设置单元格边距。间距:用来设置单元格间距。对齐:用来设置表格的对齐方式，默认的对齐方式为左对齐。边框:用来设置表格

19、边框的宽度。任务3利用表格工具制作网页四、设置单元格属性设置单元格属性水平:用来设置单元格内元素的水平排版方式，可以是居左、居右或居中。垂直:用来设置单元格内元素的垂直排版方式，可以是顶端对齐、底端对齐或居中对齐。高、宽:用来设置单元格的宽度和高度。不换行:勾选该选项防止单元格中较长的文本自动换行。标题:使选择的单元格成为标题单元格，单元格内的文字自动以标题格式显示出来。背景颜色:用来设置表格的背景颜色。任务3利用表格工具制作网页五、修改表格的行和列修改表格任务3利用表格工具制作网页五、修改表格的行和列“插入列或行”对话框任务3利用表格工具制作网页六、插入嵌套表格并设计网页元素(1)在第一行的

20、左边单元格中插人一个公司标记的Flash文件，将top.jpg设置为右边单元格的背景图片。(2)在第二行的单元格中嵌套插人一个新的一行两列的表格，并进行相应设置，作为网站导航。(3)在第三行中插人公司宣传的Flash文件。完成步骤(1)(3)后的效果任务3利用表格工具制作网页五、修改表格的行和列(4)在第四行中分别插人三个嵌套表格，并对其进行相应设置。(5)在第五行中插入友情链接图片，并采用图像映射方式分别设置其导航。(6)在第六行中插人网站版本信息并设置其背景颜色为“#c7eefd”。任务4利用AP DIV和Spry制作网页一、绘制AP DIV(一)插入AP DIV(二)拖放APP DIV(

21、三)浏览AP元素任务4利用AP DIV和Spry制作网页二、设置AP DIV的属性AP DIV的属性任务4利用AP DIV和Spry制作网页三、AP DIV和表格之间的转换由于AP DIV在网页布局上非常方便，因此一些人可能不喜欢使用表格来创建自己的页面，而是喜欢通过AP DIV来进行设计。Dreamweaver CS6可以使用AP DIV来创建布局，然后将它们转换为表格。任务4利用AP DIV和Spry制作网页四、利用AP DIV布局设计网站首页利用AP DIV布局的罗德纺织品公司网站的首页任务4利用AP DIV和Spry制作网页四、利用AP DIV布局设计网站首页(一)使用跟踪图像辅助页面

22、的布局选择“跟踪图像”任务4利用AP DIV和Spry制作网页四、利用AP DIV布局设计网站首页(二)布局页面顶部页面顶部布局完成任务4利用AP DIV和Spry制作网页四、利用AP DIV布局设计网站首页(三)布局页面中间的主体部分页面中间主体部分布局完成任务4利用AP DIV和Spry制作网页四、利用AP DIV布局设计网站首页(四)布局页面下方的友情链接及公司信息AP DIV布局整体结构任务4利用AP DIV和Spry制作网页五、使用Spry布局网页(一)使用Spry菜单栏提示复制相关文件Spry菜单栏”对话框设置Spry菜单栏属性任务4利用AP DIV和Spry制作网页五、使用Spr

23、y布局网页(二)使用Spry选项卡式面板Spry选项卡式面板Spry选项卡式面板的属性任务5利用框架技术制作网页框架是网页中经常使用的页面设计方法，框架的作用就是把网页在一个浏览器窗口中分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。框架示意图框架结构组成：框架(Frame)框架集(Frameset)任务5利用框架技术制作网页一、创建框架 (1)新建一个HTML文件，在菜单中选择“插入”“HTML”“框架”命令，如图所示，在弹出的下拉菜单中选择“上方及左侧嵌套”。创建的框架结构如图所示。选择框架创建的框架结构任务5利用框架技术制作网页一、创建框架(2)使用鼠标直接拖动框架边框

24、，直至合适的位置，这样上方及左侧嵌套的框架即完成。(3)选中框架集。选择“窗口”“框架”命令，打开“框架”面板。“框架”面板中的字符表示每个框架的名称，在“框架”面板中单击最外层的边框，使其显示出黑边，则选中了框架集，如图所示。选中框架集任务5利用框架技术制作网页一、创建框架 (4)选中框架集后，在“属性”面板中设置各个选项的属性，如图所示。框架集的属性任务5利用框架技术制作网页一、创建框架(5)选中框架，设置框架属性。在“框架”面板中单击需要选择的框架，使其出现细黑边，然后在“属性”面板中设置各个选项，如图所示。框架的属性任务5利用框架技术制作网页二、保存框架网页每一个框架都有一个框架名称，

25、可以用默认的框架名称，也可以在“属性”面板中修改框架名称。系统默认的框架名称为topFrame(上方)、leftFrame(左侧)、mainFrame(右侧)。任务5利用框架技术制作网页三、在框架中使用超级链接在框架式网页中设置超级链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗口。链接目标较远(其他网站)时，一般放在新窗口中;在导航条上创建链接时，一般将目标文档放在另一个框架中显示(当页面较小时)或全屏幕显示(当页面较大时)。任务5利用框架技术制作网页四、制作框架页面 (1)在菜单栏中选择“窗口”“框架”命令，打开“框架”面板，选中整个框架集，如图所示。在“属性”面板中，将“行”

26、的值设置为“317，单位为“像素”，如图所示。选中框架集框架集属性设置任务5利用框架技术制作网页四、制作框架页面(2)在菜单栏中选择“窗口”“框架”命令，打开“框架”面板，选中子框架集，如图所示。在“属性”面板中，将“列”的值设置为“280，单位为“像素”，如图所示。选中子框架集子框架集属性设置任务5利用框架技术制作网页四、制作框架页面(3)鼠标在topFrame框架中的空白处单击一下，在页面“属性”面板中将上、下、左、右边距全部设为“0”。插人一个3行2列的表格，宽度为902px，高度为307px，居中对齐，先分别对第二行和第三行进行合并单元格，在3行中依次插人bz. Swf、top. j

27、pg、x01.JPg、top3. Jpg和flash. Swf。任务5利用框架技术制作网页四、制作框架页面(4)鼠标在leftFrame框架中的空白处单击一下，在页面“属性”面板中将上、下、左、右边距全部设为“0。插人一个2行1列的表格，表格宽度为220px，右对齐。将第一个单元格的高度设为250px，选中其余单元格，将高度设置为50px，背景颜色设置为“#d8efff。分别输人文字设置导航栏目，然后对各个导航栏目建立超级链接，链接路径指向要链接到的网页，“目标”选择“mainFrame，框架，如图所示。子框架页面设置任务5利用框架技术制作网页四、制作框架页面(5)鼠标在mainFrame框架

28、中的空白处单击一下，在页面“属性”中将上、下、左、右边距全部设为“0。插入一个新的表格，设置为左对齐。任务6使用CSS修饰和美化网页层叠样式表(CSS)是一系列格式设置规则，它们控制Web页面内容的外观。使用CSS设置页面格式时，内容与表现形式是相互分开的。页面内容(HTML代码)位于自身的HTML文件中，而定义代码表现形式的CSS规则位于另一个文件(外部样式表)或HTML文档的另一部分(通常为部分)中。使用CSS可以非常灵活地控制页面的外观。任务6使用CSS修饰和美化网页一、创建CSS样式CSS样式”面板“新建CSS规则”对话框任务6使用CSS修饰和美化网页一、创建CSS样式复合内容的CSS

29、规则任务6使用CSS修饰和美化网页一、创建CSS样式定义.w1的CSS规则任务6使用CSS修饰和美化网页二、用CSS美化网页(一)文本样式的设置设置CSS的文本样式将CSS样式应用于标签应用CSS样式后的文字效果任务6使用CSS修饰和美化网页二、用CSS美化网页(二)背景样式的设置WI的背景设置任务6使用CSS修饰和美化网页二、用CSS美化网页(三)区块样式的设置在“. WI的CSS规则定义”对话框的左侧选择“区块”，可以在右边区域中设置CSS的区块样式。任务6使用CSS修饰和美化网页二、用CSS美化网页(四)方框样式的设置前面已经设置过图像的大小、图像水平和垂直方向上的空白区域、图像是否有文

30、字环绕效果等，方框样式则进一步完善和丰富了这些设置。在“. WI的CSS规则定义”对话框的左侧选择“方框”，可以在右边区域中设置CSS的方框样式。任务6使用CSS修饰和美化网页二、用CSS美化网页(五)边框样式的设置设置边框样式可以给对象添加边框，设置边框的颜色、粗细、样式。任务6使用CSS修饰和美化网页二、用CSS美化网页(五)边框样式的设置应用表格边框样式后的效果任务6使用CSS修饰和美化网页二、用CSS美化网页(六)列表样式的设置CSS中有关列表的设置丰富了列表的外观。在“.WI的CSS规则定义”对话框的左侧选择“列表”，可以在右边区域中设置CSS的列表样式。任务6使用CSS修饰和美化网页三、CSS样式表的其他操作(一)编辑CSS样式任务6使用CSS修