《Dreamweaver CS5网页设计与制作实例教程》课件-第4章 网页中的基本元素_第1页
《Dreamweaver CS5网页设计与制作实例教程》课件-第4章 网页中的基本元素_第2页
《Dreamweaver CS5网页设计与制作实例教程》课件-第4章 网页中的基本元素_第3页
《Dreamweaver CS5网页设计与制作实例教程》课件-第4章 网页中的基本元素_第4页
《Dreamweaver CS5网页设计与制作实例教程》课件-第4章 网页中的基本元素_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第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.3Dreamweaver与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.无序列表<ultype=”符号类型”><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>其中符号类型为：”disc”(实心●)、”circle”(空心○)，”square”(方块■)，图标文件名等。例题4-22、有序列表<olstart=”开始序号”type=”序号类型”><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol>序号类型为“1”代表数字，“A”代表大写英文，“a”代表小写英文，“I”代表罗马数字等。例题4-33.菜单列表<menu><lh>菜单标题1</lh><li>列表项1-1</li><li>列表项1-2</li><lh>菜单标题2</lh><li>列表项2-1</li><li>列表项2-2</li></menu>4、缩进列表（定义列表）<dl><dt>标题l</dt><dd>内容1-1</dd><dd>内容1-2</dd><dt>标题2</dt><dd>内容2-1</dd><dd>内容2-2</dd></dl>例题4-45混合列表<menu><lh>超链接</lh><oltype="1"><li>外部文档链接</li><ultype="disc"><li>知识点l</li><li>知识点2</li></ul><li>书签链接</li><li>无址链接</li><li>E-mail链接</li><li>脚本链接</li><li>指向下载文件的链接</li></ol></menu>4.2图像网页中的图像是使用最多的表现方式之一，图像除了在网页中具有传达信息的作用，还可以起到烘托主题的作用。为了在网页中显示图片，必须先准备好图片素材。在网站的具体制作过程中，首页或每个栏目通常会设置一个“images”文件夹，将准备好的图片素材存放在文件夹中，供编辑网页时使用。4.1插入图像（略）

4.2插入鼠标经过图像在网页中浏览图像时，当鼠标经过该图像时，图像就变成了另外一幅图像，表现为类似于flash动画的效果，借动感增加网页的吸引力。这种特效叫做“鼠标经过图像”（RolloverImage）。创建“鼠标经过图像”，必须用两张大小相同的图片。例题4-64.3Dreamweaver与fireworksDreamweaver和Fireworks都是由同一家公司开发的，所以它们结合得十分完美。它们独特的结合特性使得共同应用Dreamweaver和Fireworks处理网页图像得心应手。Dreamweaver和Firework能够共享和管理网页文件中的许多内容，例如链接、图像映射、切片、网页特效等。同时应用Dreamweaver和Fireworks将大大提高网页设计和编辑的效率。在Dreamweaver中编辑图像

在Dreamweaver中可以直接调用Fireworks，对Fireworks生成的图像、切片、表格进行编辑和处理，调用Fireworks前需要在Dreamweaver中将Fireworks设为主图像编辑器。在Dreamweaver中将Fireworks设置为主图像编辑器的方法是，执行“编辑”|“首选参数”命令，在弹出的窗口中选择分类为“文件类型/编辑器”，4.3超链接

4.3.1路径绝对路径：是Internet上资源的完整地址。包括3部分：协议种类、放有所须文件的计算机地址（计算机域名）、具体文件的路径及文件名。协议://计算机域名/文件路径及文件名

创建对站点以外的链接必须用绝对路径。根相对路径：从站点根文件夹到文档所经过的路程，以斜杠/开始，如/html/*.htm。浏览器不能像服务器那样识别站点根目录，故与根目录相对的路径必须放在远程服务器上才能浏览。文档相对路径：相对当前文档的路径。4.3.2建立超链接建立超链接由锚点（anchor）标签<a></a>定义：<ahref="地址"target="打开窗口方式">热点</a>属性href指定超链接的目标网页地址，包括路径和文件名属性target指定超链接文件被打开的目标窗口，有如下4个选项：_blank：将链接的文件载入到新的无标题浏览器窗口中。_parent：将链接的文件载入到父框架，若该框架非嵌入式框架，则链接到整个浏览器窗口。_self（默认值）：将链接的文件载入到自身框架或自身窗口中。_top：将链接的文件载入到整个浏览器窗口中，并删除所有框架。在Dreamweaver中提供了6种常用的链接：外部文档链接、书签链接、E-mail链接、无址链接、脚本链接和指向下载文件的链接。4.3.2建立超链接1．外部文档链接指链接到本文档之外的文档，包括站内和站外的网页。在热字“属性”面板的“链接”框中填入超链接的外部文档地址（属性href的值)；在“目标”下拉列表框中设置超链接的目标窗口(属性target的值)。2．书签链接

<ahref="地址#书签名"target="打开窗口方式">热点</a>

建立书签：“插入”面板的“命名锚记”按钮链接书签：#书签名。【例4-7】3．无址链接

返回页面顶端，形成手形光标

<ahref="#">热点</a>不返回页面顶端，形成手形光标

<ahref="javascript:;">热点</a>4.3.2建立超链接4．E-mail链接（电子邮件链接）

<ahref="mailto:邮件地址">热点</a>“插入”面板中的“电子邮件链

人人文库> 全部分类> 专业文献 > IT计算机

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论