《Dreamweaver CS4网页设计与制作 教学课件 ppt 作者 何富贵 课件第三章网页基本元素实现》由会员分享，可在线阅读，更多相关《Dreamweaver CS4网页设计与制作 教学课件 ppt 作者 何富贵 课件第三章网页基本元素实现（50页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver CS4 网页设计与制作,第三章网页基本元素实现,文本操作 在网页插入图像 设置超级链接 页面的整体控制,主要内容,掌握网页基本元素的使用 掌握页面的整体控制方法,本章目标,在网页创作中，网页上的信息大多是通过文字来表达的，文字是最基本的元素之一，它具有准确快捷地传递信息、存储空间小、易复制、易保存、易打印等优点，其优势很难被其他元素所取代。增加文字的易读性，让浏览者在短时间内阅读更多、理解更多信息，并达到视觉艺术及传达的功能是网页创作者追求的目标。,3.1 文本操作,3.1.1 输入文本,图3-1 建立“实例1.html”,图3-2编辑区域的光标,图3-3在页面输入一行
2、文字,通过按键盘上的空格键（SpaceBar）实现输入文本空格，这与很多文字处理软件是一样的。但是在Dreamweaver CS4中输入空格的数量在字符输入的半角和全角状态是不一样的。 输入法切换到半角状态时，按空格键只能输入一个空格，而无法连续输入多个空格，即第一次按空格键会输入一个空格，第二次按空格键则不会在输入空格。如果需要输入里连续的空格，可以通过下面两种方法实现。,输入文本空格,实现文本换行,图3-4 常规选项窗口,图3-5 文本空格与文本换行,插入相关文本要素,图3-6 “文本”插入工具栏,图3-7“插入其他字符”对话框,文本换行,图3-8 文本换行效果,插入列表,图 3-9 项目
3、列表,图3-10“列表属性”对话框,图3-11 正方形的项目符号,插入水平线,图3-12“插入”工具栏的水平线按钮,图3-13 水平线“属性”面板,插入日期,图3-14“插入”工具栏的日期按钮,图3-15“插入日期”对话框,插入注释,图3-16“插入”工具栏的注释按钮,文本的格式化,图3-17 “文本”插入工具栏,图3-18“格式”菜单,3.2.1网页图像的基础知识 图像在网页中通常起到画龙点睛的作用，它能装饰网页，表达个人的情趣和风格。但在网页上加入的图片过多，就会影响浏览的速度，导致用户失去耐心而离开页面。网页常用的图像格式有JPEG（Joint Photographic Experts
4、Group）、GIF（Graphics Interchange Format）和PNG（Portable Network Graphic）三种。其中，JPEG和GIF两种格式的图片文件由于文件比较小，适合于网络上的传输，而且能够被大多数浏览器完全支持，所以是网页制作中最为常用的图像格式。 JPEG是特别为照片图像设计的文件格式。JPEG支持数百万种色彩。JPEG是质量有损的格式，其压缩技术十分先进，使用有损压缩的方式去除冗余的图像和彩色数据，在获取极高压缩率的同时能展现十分丰富生动的图像。图像数据被抛弃得很少，不会在质量上有非常明显的不同。特别适合在网上发布照片。,3.2 在网页插入图像,下面
5、是一些图像的素材网站： 中国素材网http:/ 高品质经典素材http:/ 映象中国：http:/ 素材精品屋： http:/，提供设计素材、动画、矢量图片、特色图标。 百万图库：http:/ 中华贴图网： http:/ LOGO： http:/www.logotypes.ru/，提供各种logo。 多媒体的搜索引擎： http:/ 图片下载：http:/ 闪盟矢量图库：http:/ 好的国外头像网站：http:/webgrafx- gif动画库：http:/ “图像标签辅助功能属性”对话框,3.2.3图像操作,图3-22 插入图像的页面,设置图像属性,图3-23 图像“属性”面板,1插入“鼠
6、标经过图像”,3.2.4 插入相关图像元素,图3-25 参数设置完成后的“插入鼠标经过图像”对话框,2插入导航条,图3-27 “插入导航条”对话框,3插入图像占位符,图3-29 “图像占位符”对话框,超级链接（Hyperlink）是指页面对象之间的链接关系，它网页的灵魂，能合理、协调地把网站中的各个元素、页面通过超级链接构成了一个有机整体，使浏览者能快速地访问到想要访问的页面。超级链接就是从一个网页指向一个目标的连接关系，目标可以是另外一个网页，也可以是相同的网页中的不同的位置，还可以是一幅图片、一个文件或是一个应用程序。 一个网站中通常包含有许多内容，这些内容不可能全部显示在一个网页上，这时
7、就可以制作超级链接，通过超级链接可以方便的访问其他的网页。通常情况下，超级链接可以是文字、图像，通过这些文字或者图像即可链接到相关的内容上。在一个网站中，链接路径通常有三种路径方法：绝对路径、文档目录相对路径、根目录相对路径,3.3设置超级链接,3.3.2创建文本超级链接,图3-30 绘制AP Div和设置链接属性,创建图片超链接的步骤如下： （1）选中所需建立超链接的图片，此时属性面板为图片的属性面板； （2）在图片属性面板中，为图片“链接”添加链接，具体方法可参考为文本添加超链接的操作； （3）按“F12”预览网页。 图像连接不像文本链接那样，会发生许多提示，图像本身不会发生改变，只是在预
8、览网页时，当鼠标指针经过带链接的图像时，指针的形状变为“手”的形状。点击图像就会打开所链接的文档。,3.3.3创建图片超级链接,图片上的超级链接也可以实现一张图片上实现多个局部区域指向不同的网页链接。比如一张中国地图的图片，单击了不同的省跳转到不同的网页。可点的区域就是热点。 操作步骤： （1）首先选中图片，在“属性”面板上的绘图工具在画面上绘制热点。在“地图”文本框下的有三种热点工具 ：矩形、圆形、多边形，根据热区选择合适的热点工具，进入热点绘制状态。 （2）绘制热点。当鼠标指针变成“”字形状时，在需要设置热点的位置拖动形成一个热点。 （3）在绘制好热点后，设置热点的“属性”面板中的“链接”
9、属性，,3.3.3创建图片超级链接,1建立文本电子邮件超链接 （1） 在“文档”窗口的“设计”视图中，将插入点放在希望出现电子邮件链接的位置，或者选择要作为电子邮件链接出现的文本或图像。 （2）执行下列操作之一，插入该链接： 选择“插入”“电子邮件链接” 在“插入”面板的“常用” 类别中，单击“电子邮件链接”按钮。 （3）在“文本” 框中，键入或编辑电子邮件的正文。 （4）在“E-mail”框中，键入电子邮件地址，然后单击“确定”。,3.3.4创建电子邮件超链接,2 建立图片文本电子邮件超链接 在图片的“链接”属性中，输入： “mailto：邮件地址,3.3.4创建电子邮件超链接,图3-35
10、设置图片“6.jpeg”的链接属性,创建空链接如下： 在“文档”窗口的“设计”视图中选择文本、图像或对象。 在属性面板中，在“链接” 框中键入 javascript:; （javascript 一词后依次接一个冒号和一个分号）。 脚本链接执行 JavaScript 代码或调用 JavaScript 函数。它非常有用，能够在不离开当前 Web 页面的情况下为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时，执行计算、验证表单和完成其它处理任务,3.3.5创建空链接和脚本链接,如果想让网站提供文件下载的功能，就必须建立下载文件超链接。如果超级链接指向的不是一个网页文件，而是其他文
11、件例如zip、exe文件等等，单击链接的时候就会下载文件。实现文件下载的功能很简单，只需在属性面板的“链接”框中加入下载的文件就可以了。 超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。,3.3.6 创建下载文件超链接,3.3.7 链接检查,图3-36“链接检查器”选项卡,典型的导航栏有： 横向导航栏 纵向导航栏 浮动导航栏 下拉菜单式导航栏 下拉菜单导航栏和浮动导航栏都是比较新颖的导航方式，可以使用行为、JavaScript脚本、Spry等技术实现，后面的章节将介绍。下拉菜单也可以使用Flash设计,3.3.7导航栏简介,3.4.1 参数设置,3.4页面的整体控制
12、,图3-40 “首选参数”对话框,3.4页面的整体控制,图3-41设置“新建文档”的参数,3.4.2 设置页面属性,图3-43 “页面属性”对话框,设置“外观 (CSS)”,图 3-44 “页面属性”对话框的“外观 (CSS)”类别,设置“ 外观 (HTML)”,图 3-45“页面属性”对话框的“外观 (HTML)”类别,设置“链接（CSS）”,图 3-46“页面属性”对话框的“链接（CSS）”类别,设置“标题（CSS）”,图 3-47“页面属性”对话框的“标题（CSS）”类别,设置“标题/编码”,图 3-48“页面属性”对话框的“标题/编码”类别,设置“跟踪图像”,图 3-49“页面属性”对话框的“跟踪图像”类别,1显示“文件头内容”菜单,3.4.3 设置文件头内容,图3-50 “文件头内容”菜单,2设置Meta属性,图3-52“META”对话框,3设置关键字,图3-53“关键字”对话框,4设置链接,图3-55“链接”对话框,1.配置窗口的大小,3.4.4 辅助工具的使用,图 3-56 网页编辑窗口的状态栏 图3-57 添加窗口大小选项,2使用标尺、网格、辅助线,图3-58 标尺菜单 图3-59标尺原点移动,网格,图3-60 网格设置菜单 图3-61“网格设置”对话框,辅助线,图3-62 辅助线菜单,本部分结束,
