367_3102817_使用Dreamweaver制作简单网页(ppt).ppt
,网页设计与制作实用教程,吴 丰 主编,清华大学出版社,第3章 使用Dreamweaver制作简单网页,3.1.1 Dreamweaver CS5的工作环境,图3-1 起始对话框,图3-1 起始对话框,正确安装Dreamweaver CS5后，双击桌面快捷图标，即可运行软件。在打开的文档窗口中，可以看到起始对话框，如图3-1所示。,图3-1 起始对话框,第3章 使用Dreamweaver制作简单网页,图3-2 文档窗口,3.1.1 工作环境,第3章 使用Dreamweaver制作简单网页,3.1.2 多样的工具栏,1“文档”工具栏使用“文档工具栏”所包含的按钮可以在文档的不同视图之间快速切换，如图3-3所示。,图3-3 文档工具栏,第3章 使用Dreamweaver制作简单网页,3.1.2 多样的工具栏,2“编码”工具栏“编码”工具栏垂直显示在“文档”窗口的左侧，仅当显示“代码”视图时才可见。3“浏览器导航”、“样式呈现”与“标准”工具栏“浏览器导航”工具栏只在实时视图环境下才被激活，其功能类似于常规浏览器；“样式呈现”工具栏只有在文档依赖于媒体的样式表时才被激活，用户可以通过不同的按钮来查看不同媒体类型的呈现方式；“标准”工具栏主要包含新建、复制、粘贴、保存等常用操作按钮，如图3-5所示。,图3-5“浏览器导航”、“样式呈现”与“标准”工具栏,第3章 使用Dreamweaver制作简单网页,3.1.3 属性检查器,显示“属性”检查器的快捷键是Ctrl+F3，用户可以通过该检查器检查和编辑当前选定页面元素（如文本和插入的对象）最常用的属性。根据选定元素的不同，其中所呈现的属性也不尽相同，如图3-6、3-7所示。,图3-6 属性检查器（选定对象为图像）,图3-7 属性检查器（选定对象为文本）,第3章 使用Dreamweaver制作简单网页,3.1.4 插入面板,“插入”面板包含用于创建和插入对象（例如表格、图像和链接）的多种按钮。,图3-8 插入面板之常用 图3-9 插入面板之表单 图3-10插入面板之Spry,第3章 使用Dreamweaver制作简单网页,3.1.5 CSS样式面板,“CSS样式”面板的作用在于跟踪影响当前所选页面元素的CSS规则和属性，打开或隐藏该面板的快捷键是Shift+F11。,图3-11 CSS样式面板全部模式 图3-12 CSS样式面板当前模式,第3章 使用Dreamweaver制作简单网页,3.1.6 自定义工作环境,1“常规”参数设置执行“编辑”“首选参数”，或按下组合键Ctrl+U，即可打开“首选参数”对话框，如图3-13所示。,第3章 使用Dreamweaver制作简单网页,3.1.6 自定义工作环境,2代码格式设置,第3章 使用Dreamweaver制作简单网页,3.1.6 自定义工作环境,3新建、保存、管理工作区在对相关参数，以及面板布局改动后，通过存储为命名的工作区，即便移动或关闭了面板，下一次也可以恢复该工作区。,图3-15 新建工作区 图3-16 输入新工作区名称,第3章 使用Dreamweaver制作简单网页,3.2.1 站点的基本概念,站点由文档和文件夹组成，不同的文件夹保存不同类别的网页内容，如images文件夹存放各种网页图像素材；style文件夹存放CSS样式文件；JavaScript文件夹存放JS文件；XML文件夹存放.xml文档等。1本地站点本地计算机上创建的用了保存整个网站文件的文件夹；2远程站点存储在Internet上的站点文件夹。,第3章 使用Dreamweaver制作简单网页,3.2.3 在文件面板中处理文件,1创建文件夹和文件,图3-20 右键菜单 图3-21 新建文件夹,图3-22 嵌套文件夹 图3-23 新建文件,第3章 使用Dreamweaver制作简单网页,3.2.3 在文件面板中处理文件,2站点内的基本操作在“文件”面板中，可以方便地对站点内的文件执行复制、移动和删除等操作，这里以示例的方式讲述操作方法。,第3章 使用Dreamweaver制作简单网页,3.2.4 站点的管理,创建好本地站点后，必要时还需对站点进行多方面的管理，如打开站点、复制站点、编辑站点、删除站点等。,第3章 使用Dreamweaver制作简单网页,3.3.1 什么是CSS以及它的作用,1CSSCSS（Cascading Style Sheet，层叠样式表）是由W3C（万维网联盟）的CSS工作组创建和维护的。它是一种不需要编译，可直接由浏览器执行的标记性语言，用于控制Web页面的外观。2CSS的作用（1）简化了网页的格式代码，外部样式被暂存在浏览器缓存中，加快了显示速度。（2）方便网页风格的同时更新，缩短更新和维护的时间。（3）由于代码减少，汇总起来能够节约很多流量，这样便间接地减少了服务器和带宽的费用，节约资金。,第3章 使用Dreamweaver制作简单网页,3.3.2 CSS的基本语法,CSS语言由两部分构成：选择符（selector），以及一条或多条声明，其中声明由一个属性（property）和一个属性值（value）组成。,图3-29 CSS语法结构,第3章 使用Dreamweaver制作简单网页,图3-30 网页效果,body font-family:微软雅黑;/*设置字体*/font-size:13px;/*设置文字大小为13px*/color:#F00;/*设置文字颜色为红色*/background-color:#FF0;/*设置背景颜色为黄色*/注意观察，此处的所有文字均为红色！,【教与练3-5】：改变字体属性,第3章 使用Dreamweaver制作简单网页,3.3.3 盒子模型,CSS盒模型（Box Model）是CSS控制页面时的重要概念，当改用CSS后，页面中的每个元素可以理解为一个矩形框，这个框由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成，如图3-31所示。,图3-31 盒模型,1盒模型的宽度2盒模型的高度,第3章 使用Dreamweaver制作简单网页,3.3.3 盒模型,【教与练3-6】：盒模型。,盒模型第一行文字盒模型第二行文字,/*分别向h1和h2增加1像素粗细的红色实心边框*/h1 border:1px#F00 solid;h2 border:1px#F00 solid;,h1 border:1px#F00 solid;margin-bottom:50px;/*底部增加50像素的外边距*/,图3-32 页面效果,图3-33 修改代码后页面效果,第3章 使用Dreamweaver制作简单网页,3.3.4 如何将CSS文档应用到网页中,1内联样式内联样式的使用是直接在XHTML标签中加入style参数，而style参数的内容就是CSS的属性和值。,【教与练3-7】：内联样式。,内联样式是混合在HTML标签中使用的，这种方法可以很简单的对某个元素单独定义样式。内联样式的使用是直接在HTML标签中加入style参数，而style参数的内容就是CSS的属性和值。,图3-34 内联样式,2/22/2023,清华大学,第3章 使用Dreamweaver制作简单网页,3.3.4 如何将CSS文档应用到网页中,2内部样式直接把样式表放到head区域内，只能控制本页面样式。,2/22/2023,清华大学,第3章 使用Dreamweaver制作简单网页,3.3.4 如何将CSS文档应用到网页中,3外部样式把CSS代码单独写到一个CSS文件中，然后再源代码head区域用link方式链接，可以多个页面共享一个CSS代码文件。,href：CSS文件位置；rel=“stylesheet”：在页面中使用外部样式表；type=“text/css”：指的是文件类型的样式表；,2/22/2023,清华大学,第3章 使用Dreamweaver制作简单网页,3.4.1 通配符选择符与类型选择符,1通配符选择符通配符选择符用“*”进行表示，用于清理标签的默认样式。作用范围是所有元素2类型选择符类型选择符是指以网页中已有标签类型作为名称的选择符，如body、a和p等。例子3-8,2/22/2023,清华大学,第3章 使用Dreamweaver制作简单网页,3.4.2 ID选择符与类选择符,1ID选择符仅用于一个元素ID选择符是以“#”开头，在一个XHTML文件中id具有唯一性是不可以重复的。页面中：Css中：#abc*2类选择符可用于一类元素类选择符，通过直接引用元素中类属性的值而产生效果，这个应用前面总是有一个句点“.”，这个句点用来标识一个类选择符，类名可以随意命名。页面中：Css中：.abc*,第3章 使用Dreamweaver制作简单网页,3.4.3 包含选择符与群组选择符,li a text-decoration:none;/*此规则作用的对象是li元素所包含的所有a元素*/,1包含选择符当用户想要选取X元素下的子元素Y时，包含选择符就能发挥作用。,2群组选择符群组选择符使用逗号对选择符进行分隔，这样书写的优点在于同样的样式只需要书写一次，减少了代码量。,body,ul,li,a,pmargin:0;padding:0;/*此规则将作用于多个元素上面*/,第3章 使用Dreamweaver制作简单网页,3.5.1 布局规划,图3-44 电子竞技活动页面最终效果,图3-45 布局示意图,第3章 使用Dreamweaver制作简单网页,图3-67 页面效果,图3-68 布局示意图,
