教学课件第4章 网页中的基本元素.pptx

第4章 网页中的基本元素第4章 网页的基本元素 4.1 文本的基本编辑4.1.1 添加字体4.1.2 设置文本的属性 4.1.3 换行和首行缩进 4.1.4 插入符号、日期4.1.5 建立列表4.2 图像4.2.1 插入图片4.2.2 插入“鼠标经过图像”4.2.3 Dreamweaver 与fireworks4.3 超链接4.3.1 超链接路径4.3.2 建立超链接小结4.1 文本的基本编辑 互联网上大量信息的传播以文本为主。因此，对于网页制作人员来说，文本的处理是最基本而重要的技巧之一。 学习网页制作首先应掌握网页中文本的制作和编辑方法。4.1.1 添加字体执行菜单命令“文本”|“字体”|“编辑字体列表” 4.1.2 设置文本的属性图4-1 文本的“属性”面板【例4-1】设计一个只有文字的页面。对照设计界面和代码界面，熟悉文本属性的标签。学习双标签h1/h1、/p/p、span/span、pre/pre及单标签br /、hr /的使用 文本的字体、字号、风格等属性以CSS样式写在head/head中 自定义的CSS样式优先级高于网页样式body,td,th { }的优先级 4.1.3 换行和首行缩进1、设置换行 软回车：shift+enter 硬回车:enter 区别：产生的行间距不同2、设置首行缩进可以通过以下方法来实现：(1)在中文输入法下，切换到全角模式，按一下空格键可键入一个全角空格(一个汉字大小)。(2)通过组合键”Ctrl+Shift+空格键” 的方式，一次输入一个空格（半角英文字符的大小）。4.1.4 插入符号、日期特殊字符日期4.1.5 建立列表 与列表有关的标签为ul、ol、li、menu、lh、dl、dt、dd等，格式、功能和样例见表4-2。 通过文本的“属性”面板建立列表1.无序列表ul type=”符号类型”li列表项1/lili列表项2/lili列表项3/li/ul其中符号类型为：”disc”(实心●)、”circle”(空心○)，”square”(方块■)，图标文件名等。例题4-22、有序列表ol start=”开始序号” type=”序号类型”li列表项1/lili列表项2/lili列表项3/li/ol序号类型为“1”代表数字，“A”代表大写英文，“a”代表小写英文，“I”代表罗马数字等。例题4-33.菜单列表menulh菜单标题1/lhli列表项1-1/lili列表项1-2/lilh菜单标题2/lhli列表项2-1/lili列表项2-2/li/menu4、缩进列表（定义列表）dldt标题l/dtdd内容1-1/dddd内容1-2/dddt标题2/dtdd内容2-1/dddd内容2-2/dd/dl例题4-45 混合列表menulh超链接/lhol type=1li外部文档链接/li ul type=disc li知识点l/li li知识点2/li/ulli书签链接/lili无址链接/liliE-mail链接/lili脚本链接/lili指向下载文件的链接/li/ol/menu4.2 图像网页中的图像是使用最多的表现方式之一，图像除了在网页中具有传达信息的作用，还可以起到烘托主题的作用。为了在网页中显示图片，必须先准备好图片素材。在网站的具体制作过程中，首页或每个栏目通常会设置一个“images”文件夹，将准备好的图片素材存放在文件夹中，供编辑网页时使用。4.1插入图像（略）4.2插入鼠标经过图像在网页中浏览图像时，当鼠标经过该图像时，图像就变成了另外一幅图像，表现为类似于flash动画的效果，借动感增加网页的吸引力。这种特效叫做“鼠标经过图像”（Rollover Image）。创建“鼠标经过图像”，必须用两张大小相同的图片。例题4-64.3 Dreamweaver 与fireworksDreamweaver和Fireworks都是由同一家公司开发的，所以它们结合得十分完美。它们独特的结合特性使得共同应用Dreamweaver和Fireworks处理网页图像得心应手。Dreamweaver和Firework能够共享和管理网页文件中的许多内容，例如链接、图像映射、切片、网页特效等。同时应用Dreamweaver和Fireworks将大大提高网页设计和编辑的效率。在Dreamweaver中编辑图像在Dreamweaver中可以直接调用Fireworks，对Fireworks生成的图像、切片、表格进行编辑和处理，调用Fireworks前需要在Dreamweaver中将Fireworks设为主图像编辑器。在Dreamweaver中将Fireworks设置为主图像编辑器的方法是，执行“编辑”|“首选参数”命令，在弹出的窗口中选择分类为“文件类型/编辑器”，4.3 超链接 4.3.1路径