网页设计(CS5)-第3讲-向网页中添加元素

1、Dreamweaver CS5第第3 3讲讲向网页中添加元素（向网页中添加元素（1 1）1 在网页中添加文本编辑文本在网页中添加图片4 编辑图像图文混排鼠标经过更换图片特效第第3讲讲向网页中添加元素向网页中添加元素Dreamweaver CS5在网页中添加文本在网页中添加文本1网页设计网页设计第第2 2讲讲文本概述在绝大多数网页中，文本内容占据着核心的地位，它负责主要信息的传播，是信息的主要载体。同时为了使页面美观整齐，还需要对输入的文本进行修饰和排版。如果在页面中要输入的文本较少，可直接通过键盘输入文本，若是在其他位置存在的大段文本内容则可以通过复制、粘贴或导入的方式来完成 。无论是直接输入

2、文本还是从外部导入，都需要先在网页中单击一次鼠标来定位，即指定文本开始的地方，对于表格性的文字内容，可以直接按Tab键跳到下一个单元格添加普通文本方法：A、直接输入 （1）用鼠标单击网页编辑窗口中的空白区域，窗口中随即出现闪动的光标，标识输入文字的起始位置。 （2）选择适当的输入法输入文字B、复制和粘贴C、从其他文件导入网页设计网页设计第第2 2讲讲在网页中添加文本在网页中添加文本1添加空格输入法切换到半角状态，按空格键只能输入一个空格；如果需要输入多个连续的空格可以通过以下几种方法来实现： （1）菜单“插入”HTML特殊字符不换行空格（2）直接按“Ctrl+Shift+Space”组合键（3

3、）菜单“编辑”设置软件首选参数允许连续空格网页设计网页设计第第2 2讲讲在网页中添加文本在网页中添加文本1（1）菜单“插入”HTML特殊字符不换行空格网页设计网页设计第第2 2讲讲1（2）直接按“Ctrl+Shift+Space”组合键（3）菜单“编辑”设置软件首选参数允许连续空格网页设计网页设计第第2 2讲讲1添加日期时间在文档的最后一行插入形式如“Thursday, 1974-03-07 10:18 PM”所示的日期，且要求每次保存网页时自动更新日期。具体操作过程如下： （1）切换到【常用】插入工具栏，按Enter键，添加一空行，将光标放置在空行与正文对齐的最左端（2）单击菜单【插入】【日

4、期】，或者单击“常用”插入栏的【日期】按钮，将弹出 “插入日期”对话框（3）在【插入日期】对话框中，【星期格式】下拉表框中选取“Thursday,”，【日期格式】选取“1974-03-07”，在【时间格式】下拉列表框选取“10:18PM”，选中“储存时自动更新”复选框，然后单击【确定】按钮，最后生成的日期效果为当时的日期与时间（4）保存插入的日期，且浏览网页网页设计网页设计第第2 2讲讲在网页中添加文本在网页中添加文本1网页设计网页设计第第2 2讲讲在网页中添加文本在网页中添加文本1插入水平线（1）将光标放置到标题最后一个字符的右边（2）单击HTML插入工具栏的“水平线”按钮（3）在“插入”工

5、具栏中，选择“HTML”，选择“水平线”网页设计网页设计第第2 2讲讲在网页中添加文本在网页中添加文本1（2）单击插入工具栏的“水平线”按钮网页设计网页设计第第2 2讲讲在网页中添加文本在网页中添加文本1方法一：网页设计网页设计第第2 2讲讲方法二：添加特殊字符（方式1）通过菜单【插入】【HTML】【特殊字符】插入 先将光标放置到需要插入特殊字符的位置，然后展开菜单【插入】【HTML】【特殊字符】，在【特殊字符】的级联菜单中选择需要插入的特殊字符。（方式2）通过【文本】插入工具栏插入 先在Dreamweaver cs5的【插入】工具栏中选择【文本】，显示【文本】插入工具栏。将光标放置到需要插入

6、特殊字符的位置，然后单击工具栏中的【文本】，单击所需插入的特殊字符即可插入到网页中。网页设计网页设计第第2 2讲讲在网页中添加文本在网页中添加文本1网页设计网页设计第第2 2讲讲（方式1）通过菜单【插入】【HTML】【特殊字符】插入网页设计网页设计第第2 2讲讲（方式2）通过【文本】插入工具栏插入编辑文本编辑文本2文本可以像Word一样进行编辑（1）拖动鼠标选中一个或多个文字、一行或多行文本，也可以选中网页中的全部文本。（2）按BackSpace键或Delete键实现删除文本操作。（3）实现复制、剪切、粘贴等操作。（4）实现查找与替换操作。（5）实现撤消或重做操作。网页设计网页设计第第2 2讲

7、讲设置文本格式字体(通用性问题)、大小、颜色、风格注：CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。网页设计网页设计第第2 2讲讲编辑文本编辑文本2分段与换行分段按Enter回车键（隔一行）换行按Shift+Enter（不分段）网页设计网页设计第第2 2讲讲编辑文本编辑文本2EnterShift + Enter设置段落格式a.对齐方式b.列表编号：列表可以将文本段落用符号或序号标注起来，有两种类型：项目列表和编号列表。 设置项目(或编号)列表的操作过程如下: （1）选择要添加列表的若干文本段落 （2）单击

8、属性检查器中的“项目列表”按钮或“编号列表”按钮c.缩进网页设计网页设计第第2 2讲讲编辑文本编辑文本2a.对齐方式网页设计网页设计第第2 2讲讲编辑文本编辑文本2左对齐左对齐居中居中右对齐右对齐两端对齐两端对齐b.列表编号： 设置项目(或编号)列表的操作过程如下: （1）选择要添加列表的若干文本段落 （2）单击属性检查器中的“项目列表”按钮或“编号列表”按钮网页设计网页设计第第2 2讲讲编辑文本编辑文本2b.列表编号： 设置项目(或编号)列表的操作过程如下: （1）选择要添加列表的若干文本段落 （2）单击属性检查器中的“项目列表”按钮或“编号列表”按钮网页设计网页设计第第2 2讲讲编辑文本编

9、辑文本2使用Html段落样式网页设计网页设计第第2 2讲讲编辑文本编辑文本2网页设计网页设计第第2 2讲讲编辑文本编辑文本2网页设计网页设计第第2 2讲讲网页设计网页设计第第2 2讲讲网页设计网页设计第第2 2讲讲网页设计网页设计第第2 2讲讲使用Html段落样式后的效果网页设计网页设计第第2 2讲讲注意：HTML段落样式是针对段落而言的！如果没有分段，格式就是同一个！标题1标题2标题3网页设计网页设计第第2 2讲讲注意：HTML段落样式是针对段落而言的！如果没有分段，格式就是同一个！在网页中添加图片在网页中添加图片3网页中常用的图片格式使用图片的原则：在保证画质的前提下尽可能使图片的数据量小

10、一些，这样有利用户快速的浏览我们的网页。.GIF格式特点：它的图片数据量小，可以带有动画信息，且可以透明背景显示，但最高只支持256种颜色。用途：大量用于网站的图标Logo、广告条Banner及网页背景图像。但由于受到颜色的显示，不适合用于照片级的网页图像。网页设计网页设计第第2 2讲讲网页中常用的图片格式.JPEG格式特点：可以高效地压缩图片的数据量。使图片文件变小的同时基本不丢失颜色画质。用途：通常用于显示照片等颜色丰富的精美图像。.PNG格式特点：是一种逐步流行的网络图像格式。既融合了GIF能做成透明背景的特点，又具有JPEG处理精美图像的优点。用途：常用于制作网页效果图。网页设计网页设

11、计第第2 2讲讲在网页中添加图片在网页中添加图片3想一想：相同的图片，不同的图片格式，大小会不会相同？网页设计网页设计第第2 2讲讲在网页中添加图片在网页中添加图片3想一想：相同的图片，不同的图片格式，大小会不会相同？网页设计网页设计第第2 2讲讲在网页中添加图片在网页中添加图片3想一想：相同的图片，不同的图片格式，大小会不会相同？网页设计网页设计第第2 2讲讲在网页中添加图片在网页中添加图片3想一想：相同的图片，不同的图片格式，大小会不会相同？网页设计网页设计第第2 2讲讲在网页中添加图片在网页中添加图片3想一想：相同的图片，不同的图片格式，大小会不会相同？网页设计网页设计第第2 2讲讲在网

12、页中添加图片在网页中添加图片3如何获取网页图像网上下载、购买素材光盘、使用图像制作软件创作站酷：http:/ 2讲讲在网页中添加图片在网页中添加图片3插入图像插入图像插入面板常用图像直接将图像文件拖入编辑区注意：在插入图像前应先将网页文件已保存，从而使所插图像引用正确。图像插入网页后，应确定图像文件已存入站点，否则在下次打开网页时，会出现看不到图像的情况。技巧：图像的位置、替换文字网页设计网页设计第第2 2讲讲在网页中添加图片在网页中添加图片3插入图像方式一网页设计网页设计第第2 2讲讲插入图像方式二网页设计网页设计第第2 2讲讲选择图片网页设计网页设计第第2 2讲讲设置图像的基本属性图像设置

13、的名称宽、高可缩小和放大图片的显示尺寸源文件图片的路径和名称替代图像的说明文字边框图片是否要加边框网页设计网页设计第第2 2讲讲在网页中添加图片在网页中添加图片3编辑图像编辑图像4设置图像的基本属性裁切锐化对比度/亮度重新采样：当图片的宽高缩小后，重新生成更小的图片优化（为图片瘦身）网页设计网页设计第第2 2讲讲图文混排图文混排5设置图像的基本属性垂直边距和水平边距图片四周突出的尺寸对齐在一行中图形和文本的对齐方式网页设计网页设计第第2 2讲讲鼠标经过更换图片特效鼠标经过更换图片特效6设置图像的基本属性1）概念：是指在页面中先显示一张图像，当鼠标移动到该图像上时，图像切换成另一张图像。2）步骤

14、： a 将光标放到要插入图像的地方。 b单击菜单“插入记录”“图像对象”“鼠标经过图像”，打开“插入鼠标经过图像对话框”网页设计网页设计第第2 2讲讲鼠标经过更换图片特效鼠标经过更换图片特效6网页设计网页设计第第2 2讲讲鼠标经过更换图片特效鼠标经过更换图片特效6网页设计网页设计第第2 2讲讲网页设计网页设计第第2 2讲讲网页设计网页设计第第2 2讲讲网页设计网页设计第第2 2讲讲归纳与小结归纳与小结 掌握添加文本与图片的方法熟练图文编辑与排版学会设置鼠标经过更换图片特效第第3讲讲向网页中添加元素向网页中添加元素Dreamweaver CS5第第2讲讲作业作业 THANKS !Dreamwea

15、ver CS5第第3 3讲讲向网页中添加元素（向网页中添加元素（2 2）1 在网页中添加文本编辑文本在网页中添加图片4 编辑图像图文混排鼠标经过更换图片特效第第3讲讲向网页中添加元素向网页中添加元素Dreamweaver CS5Dreamweaver CS5第第3 3讲讲向网页中添加元素（向网页中添加元素（2 2）1 多媒体的应用编辑文本在网页中添加图片4 插入表格图文混排鼠标经过更换图片特效第第3讲讲向网页中添加元素向网页中添加元素Dreamweaver CS5第四讲第四讲 用表格设计页面用表格设计页面 1、表格插入 2、表格的设置 3、用表格设计页面 1、表格的插入 1表格概述 2表格结构

16、 3插入表格1.1. 表格概述 表格是网页设计制作中不可缺少的元素，它不仅用于页面上的数据显示，还可以用来设计页面框架。 使用表格可以将图片、文本、数据和表单等元素有序地显示在页面上，使得页面看起来简洁明了、编排整齐。用表格设计的页面，框架布局清晰，在不同平台、不同分辨率的浏览器里都能保持其原有的布局，并且在不同的浏览器平台都具有较好的兼容性，所以表格是网页中最常用的排版方式之一。1.2. 表格结构表格是由一个或多个单元格组成的集合。表格中横向的一排称之为行，纵向的一排称之为列，中间的单个小方块称之为单元格。单元格与单元格之间的距离叫做单元格间距，单元格内容到单元格边框之间的距离叫边距。每个单

17、元格的四周称之为单元格边框，整个表格的四周称之为表格边框，下图展示了表格各部分的对应关系。1.3. 插入表格 在【常用】插入栏中单击表格按钮 ，打开【表格】对话框 ，设置【行数】、【列数】、【表格宽度】等参数后单击“确定”按钮即可 。2、表格的设置 1表格选取 2设置表格属性 3拆分表格 4. 合并表格2.1. 表格的选取 表格的选取包括整表的选取、单元格的选取、表格行与列的选取。整表的选取整表的选取：只需要将鼠标指针移到表格的边框，当鼠标指针右下角出现图标时单击鼠标左键即可选中整个表格；或者先在表格内任意处单击一次鼠标左键，然后在标签选择器上单击“”标签，也可选中这个表格。单元格的选取单元格

18、的选取：按住Ctrl键，然后单击某一单元格，即可选中该单元格；或者先在单元格内单击一次鼠标左键，然后单击状态栏上的“”标签，也可选中该单元格。表格行与列的选取表格行与列的选取：将鼠标指针移到某一行的左侧，当鼠标指针变成形状时，单击鼠标左键，即可选中该行；将鼠标指针移到某一列的顶部，当鼠标指针变成形状时，单击鼠标左键，即可选中该列。 2.2. 设置表格的属性2.3. 拆分表格 拆分拆分：单击要拆分的单元格，在【属性】面板中单击拆分单元格按钮 ，在弹出的【拆分单元格】对话框中设置拆分行或列，并设置要拆分成的行数或列数，然后单击按钮即可将单元格拆分成多行或多列 ，如下图所示。2.3. 合并表格 选中

19、需要合并的多个连续的单元格后，在【属性】面板中单击合并单元格按钮 ，将多个单元格合并，如下图所示。3、用表格设计页面 1嵌套表格 2. 表格化的页面结构 3用表格规划页面结构 4. 用表格设计页面3.1. 嵌套表格 简单地说，嵌套表格就是一个表格中含有另一个表格。引入嵌套表格有3个方面的原因。网页的排版有时会很复杂，在外部需要一个表格来控制总体布局，如果内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给排版工作带来困难。其次，浏览器在解析网页的时候，是将整个网页下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，浏览者需要等待很长时间才能看到网页内容。在嵌套表格中，可以利用表格的

20、背景图像、边框、间距和边距等属性得到漂亮的边框效果，制作出精美的网页。 创建嵌套表格的操作方法很简单，先插入总表格，然后将鼠标光标置于要插入嵌套表格的单元格中，继续插入表格即可。网页设计网页设计第第2 2讲讲在网页中添加文本在网页中添加文本13.2. 表格化的页面结构 一个页面的主要骨架结构，大体可分为如下几部分：Container（所有内容）、Logo（标志）、Header（头部）、Navigation（导航栏）、Main Content（主要内容）、Sidebar（侧栏）、Footer（页脚），如右图所示。这些部分都可以看成由一个个表格组成的。网页设计网页设计第第2 2讲讲在网页中添加文本

21、在网页中添加文本1Container：指页面包含的所有内容，所有的Web页面都用一个Container，主要为了包含一些页面元素。Header：网页的头部，严格意义上来说，Header并不是一个特定的元素，它更多用于放置Logo、导航栏等常见元素。Logo：Logo是一个专用标志，用于表明网站的身份和品牌。一般将Logo放在Header的左上角，使访问者第一眼就能看到。 Navigation：导航栏部分。页面导航是最重要的元素之一，访问者一般都使用它来访问网站中的其他内容，为了便于用户使用，容易找到，就放在顶端附近。Main Content：主要内容部分。这是网站的核心，它是Web页面的焦点。

22、Sidebar：侧栏部分。主要放置一些次要内容，如广告、站点搜索、订阅链接、联系方法等，这个内容不是必需的。一般将Sidebar放在页面右侧，也可以将其放在左侧或两边，只要不干扰主要内容的浏览就行，Sidebar往往是用纵向导航。Footer：页脚部分。Web页面的尾部总会有一个页脚，这是Web页面的结束部分。和Header一样，Footer也不是一个特定的元素。在页脚里一般包含版权、法律声明以及主要的联系方式，也可以包含一些重要的链接。在网页中添加图片在网页中添加图片3网页设计网页设计第第2 2讲讲3.3. 用表格规划页面结构 在设计页面时，为了整体把握页面结构，可以先用表格将页面的主体框架勾勒出来，然后再针对每个部分进行内容的填充，如下图所示。具体操作参考范例解析4.3.