网页元素的应用.ppt

第4章 网页元素的应用,学习在网页中添加文本、图像、超级链接等元素,本章提纲,本章内容4.1 网页文本的应用4.2 网页图像和Flash对象4.3 超级链接4.4 综合实例本章重点与难点文本图像创建超级链接,4.1 网页文本的应用,文本的插入设置文本属性文本滚动特效水平线的插入日期和版权的插入,一、文本的插入,1.插入普通文本1)方法直接插入复制粘贴导入：文件|导入2）文本的换行：Shift+Enter（HTML标记）3）文本的分段：按Enter键 2.插入特殊字符方法1：在“插入工具栏”的“文本”选项卡中选择方法2：单击“插入”|“HTML”|“特殊字符”方法3：复制/粘贴不换行空格:在文档中若要输入多个连续的空格效果,可单击”不换行空格”按钮；在全角输入法下连续按空格键；Ctrl+Shift+Space键；在代码 视图中输入多个&nbsp,二、设置文本属性,文本属性即文字的大小、字形、颜色、段落等格式1.标题标题1标题6（从大到小）HTML标记为2.字体设置字体：先添加字体才能选择字体设置粗体/斜体3.字体大小4.字体颜色5.段落段落：按Enter（HTML标记/P）对齐方式缩进与凸出项目符号,三、文本滚动特效,文本滚动即让文本在页面中上下或左右运动的效果1.滚动标记码 2.说明:文字滚动的标记省略号处为滚动的文本Behavior:文字滚动的方式值如下Alternate:来回运动Scroll:向一个方向运动Slide：文字到字幕边框时停止运动,滚动字幕代码说明,Direction：滚动方向，值如下Down:由上往下Left:由右往左Right:由左往右Up:由下往上width，height:文本运动范围的宽度与高度Onmouseover：鼠标移到滚动文本的事件，this.stop()停止Onmouseout：鼠标移出滚动文本的事件，this.start()开始Loop：滚动次数，n数字，-1表示无限次Scrolldelay:滚动文本停留的时间,单位”毫秒”,x数字Scrollamount:运动速度，v数字（0静止）3.设置方法,滚动文本的设置,切换为代码视图定位光标到滚动文本的第一个字符前输入滚动标记代码注意：滚动标记代码可以根据需要选择使用，不一定全部输入。,四、水平线和日期版权的插入,1.水平线的插入水平线用来分隔网页标题和正文定位光标，插入面板|HTML|设置属性2.日期对象打开”插入日期对话框“：“插入”|“日期”选择日期时间格式确定3.插入版权定位光标输入 版权信息：Copyright年月日公司名称All Rights Reserved如:Copyright 2009创意工作室 All Rights Reserved,4.2 网页图像和Flash对象,一、图像文件的类型二、图像的插入三、设置对象属性1.选中图像2.在属性面板中设置各属性 属性面板中的属性四、Flash对象的插入,10,一、网页中图像文件的类型,1GIF格式采用无损压缩，图像不失真体积（文件容量）小，下载速度快,最多可用256色适合制作徽标、图标、按钮和其他颜色风格比较单一的图片支持动态图2JPEG格式采用有损压缩，相当于GIF文件的1/4大适合制作照片可用上百万种颜色压缩比例可调整不支持隔行、透明显示和动态图3PNG格式有两种类型：PNG-8和PNG-24 支持Alpha通道，透明度可任意更改,可呈现半透明效果PNG-8有256色，PNG-24有1600万种颜色浏览器版本要求高,不支持动画,二、图像的插入,1.网页图像新建一HTML文档，定位光标到插入点打开“选择图像源”对话框菜单命令：“插入”|“图像”命令单击图像按钮拖动图像文件到页面的指定位置选择图像的路径名，单击“确定”按钮在询问“是否”将图片复制到当前站点文件夹中时单击“是”按钮2.插入图像占位符定位光标单击：“插入”|“图像”|“图像占位符”命令设置图像占位符的名称、宽度、高度、颜色输入替换文本,3.插入鼠标经过图像4.插入导航条,三、图像属性,图像：显示和修改图像的名称，脚本中引用图像用宽与高:改变页面中图像的大小尺寸（外观上改变，存储空间并不会变小）源文件:显示、选择图像文件的路径和文件名链接：显示指定超链接的目的地址（路径名）替换：浏览网页时当鼠标指向图片，打开一说明框编辑：打开外部编辑软件编辑图像垂直边距与水平边距：图像四周的空白低解析度源：设置主图像下载前显示的图像边框、文本对齐方式：图像边框的粗细，文本的左、中、右对齐地图：显示创建热点的名称热点工具：在图像上创建的热点（多个超级链接点）对齐：图像在当前行与文本的对齐方式目标：目标页面打开的窗口位置类：CSS类,图像大小的处理,利用【宽】与【高】文本框或拖动方式将图像调小，图像的容量并未改变，仍然会影响下载时间。因此，在加入图像之前，要利用Fireworks等图像处理软件将图像的尺寸设置好。地图名称和热点工具：一个图像中设置多个超级链接点重设大小：复位图像到原始大小编辑：对图像进行编辑操作类：将CSS中所建立的样式应用到图像中图像占位符：在网页给图片预留位置在图像占位处插入图像：双击占位符，选择图像源插入选中占位符，利用“源文件”按钮插入,图像的对齐方式,【默认值】：使用浏览器的默认对齐方式。【基线】：与默认值相同。【顶端】：图像的顶端与文本或图像的顶端对齐。【文本上方】：将文本行的最高字母和图像对齐。【居中】：将文本行的基线和图像的中间对齐。【绝对居中】：将图像的中间与文本行的中间对齐。【底部】：将文本行的基线与图像的底部对齐。【绝对底部】：将文本行中字母最底端的部位与图像对齐。【左对齐】：将所选图像放置在页面左侧，文字在图像的右侧。【右对齐】：将图像放置在右边，文本在对象的左侧。提 示：若要实现图文绕排，可选择【左对齐】或【右对齐】,3.鼠标经过图像,(1)特点:当浏者将鼠标移动到某图象上时,图象变为另一幅,鼠标移开时恢复原状(2)插入鼠标经过图像的步骤准备两个图象打开插入鼠标经过图象对话框菜单法:“插入”|“图象对象”|“鼠标经过图像”按钮法：“常用”选项卡中“图像”|“鼠标经过图像”按钮在对话框中设置原始和鼠标经过图像预载鼠标经过图像：预先载入内存替换文本：指向图象时的提示文字按下时，前往的URL:设置超级连接的目标地址预览,4.导航条,一、导航条的作用页面中的导航按钮,每个按钮能链接到目标文档上二、创建步骤1.准备图像集：一个按钮由4幅图片组成一般状态鼠标经过鼠标按下按下时鼠标经过2.打开插入导航条对话框菜单法：插入|图像对象|导航条按钮法：单击“图像”按钮下的“导航条”命令3.设置导航条：选择各状态图像，设置超链接4.修改导航条：“修改”菜单中的导航条命令注意：一个网页只允许一组导航条,导航条由若干个按钮组成，每个按钮由24个状态图片组成,四、Flash对象的插入,1.Flash电影（动画)1)打开“选择文件”对话框：方法1：单击“插入”|“媒体”|“Flash”方法2：单击“常用”工具栏中的“媒体”按钮，选择“Flash”2)选择电影（动画）文件3)浏览注意：Flash的文件格式：.fla、.swf、.swt、.exe网页使用的Flash文件：.swf、.swt的动画文件3.Flash文本4.Flash按钮,3.Flash文本,插入|媒体|Flash文本输入文本选择字体设置大小、粗细、对齐方式设置超级链接设置背景色输入保存文件名,4.Flash按钮,插入|媒体|Flash按钮选择样式输入按钮文本选择字体设置字体大小设置超级链接设置背景色保存,4.3 超链接,4.3.1 超链接概述4.3.2 创建超链接4.3.3 管理超链接,4.3.1 超链接概述,一、超级链接1.链接：就是由源端点指向目标端点的一种跳转2.超级链接：是指站点内不同网页间、网页与文档间、站点与Web之间的链接关系。3.超级链接的载体和种类二、路径,超级链接的载体和种类,1.链接的载体文字、图片、图片热区、鼠标经过图像、导航条等2.链接的目标端点网页、图像、音乐、Flash动画、Word、Excel文档3.超级链接的种类按链接的目标分为：内部链接：目标端点是本站点中的文档外部链接：目标端点是本站点以外的文档E-mail链接：通过Outlook打开E-mail窗口锚记链接：与本网页或其他网页中的特定位置链接虚拟链接及脚本链接：没有目标端点的链接，以便用户附加行为至对象，或创建一个JavaScrip执行脚本,路径,绝对路径：提供完整的URL地址，链接到其他服务器的网页时采用。路径包括所使用的协议、文档所在文件夹的上级各文件夹、文档名称（链接其他服务器网页时采用）如：http:/相对路径：表述源端点到目标端点之间的相对位置，本地连接时常采用此种方法 源端点与目标端点在同一个目录下:文档名 如:flower.htm 目标文档在当前目录的子级目录中:目录名/文档名,如:在首页中链接到mother.html family/mother.html目标文档在当前目录之外的其他目录中:./目录名/文档名、././目录名/文档名，.表示当前路径的父级目录，如：在mother.html中链接到首页中共./index.html,URL（Uniform Resource Locator）：统一资源定位符,例假设在所建的站点结构中建立如下链接：在myself/flash/play.html中创建指向family/mother.html的链接，路径为：././family/mother.html,站点结构,创建超链接,普通链接锚记链接E-mail链接空链接脚本链接,普通链接,1.选择链接载体2.方法在属性面板的文本框中输入路径或完整URL地址单击“链接”文本框右侧的“浏览文件”按钮，然后选择链接目标文件按住链接按钮并拖到文件面板中的目标文件上,锚记链接,1.锚记：用来作为链接目标2.锚记链接的创建1）创建锚记定位光标打开命名锚记对话框菜单法：“插入”中的“命名锚记”命令按钮法：单击“插入面板”的“常用”选项卡的命名锚记按钮在对话框中输入锚记名称，确定2）锚记和源端点在一个网页中的链接选择链接载体在属性面板的链接文本框中输入#锚记名称将“指向文件”图标拖至锚记（或Shift+拖动鼠标）3）锚记和源端点不在一个网页的链接在源端点所在的页面中选择载体在文本框中输入：目标网页的路径名#锚记名,E-mail链接,1.E-mail链接当浏览者单击该链接时，系统将自动启动计算机中的邮件发送程序（Outlook Express），并将链接设置的E-mail地址放在“收件人”一栏中2.E-mail链接的创建方法一：以文字作为链接载体打开电子邮件链接对话框：插入|电子邮件链接或单击“电子邮件按钮”在对话框中输入文本（如果选择了文本）就不再输入在对话框中输入E-mail地址，确定方法二：以文本、图片、鼠标经过对像、导航条等为链接载体选择链接载体在“属性”面板的“链接”文本框中输入“mailto:邮件地址”,虚拟链接和脚本链接,一、虚拟链接1.虚拟链接的方法：选择对象，在“链接”文本框中输入#；2.虚拟链接的作用：可以为虚拟链接附加行为（播放声音、弹出信息、交换图片等），当激活链接载体时，将会按照预先设置的行为进行操作。二、脚本链接1.脚本链接：是指执行JavaScript代码或调用JavaScript 函数的链接2.链接方法：选择对象，在“链接”文本框中输入代码或函数,如:javascript:alert(要显示的字符串)3.脚本链接的作用：为脚本链接添加代码或函数，当激活链接载体时，将会按照预先设置的代码或函数执行操作。,方法：选择载体在链接文本框内输入：javascript:alert(网站正在建设中）,4.3.3 管理超级链接,1.设置链接文档打开的位置选择链接载体_blank，用新窗口显示链接网页或文档_self，在本窗口或链接所在的框架中中打开链接的网页或文档_parent，在父窗口中打开链接网页或文档，主要用于框架结构的页面_top，将链接的文件载入整个浏览器窗口，删除所有框架，主要用于框架结构的页面2.修改链接同创建3.检查链接4.设置自动更新选项5.改变站点的链接范围,自动更新与改变链接范围,4.自动更新单击“编辑”|“首选参数”（Ctrl+U)对话框的“常规”选项设置更新链接的方法：总是从不提示确定 5.改变链接范围即将指向首页的链接全部修改为指向另一个文件的超链接单击“站点”|“改变站点范围的链接”对话框中设置新的链接确定,实践任务,1.制作一个含有超级链接的主页要求：1）至少有普通链接、图像链接、锚点链接、邮件链接、热点链接等类型，2）每种链接的载体自己根据实际链接类型自己设计2.制作第1题各链接对应的网页放到站点的pages文件夹中，各网页中的内容自己设计制作，可以用文本、图像、Flash媒体等，每个子网页中要能返回到主页中（在页面中设置“主页”“返回”等超级链接。3.浏览主页，点击每种链接，观查各目标网页的效果,综合实训,制作一个如图所示的主页：要求：1）在页面中插入一幅淡雅的背景图像，其它内容见图所示。2）页面中的“欢迎光临”一行设置滚动效果3）“请单击下面的项目进入”下边的文字，设置超级链接，其中的“联系我们”行设置Email链接，“资料下载”行，设置下载链接4）友情链接：处的两个链接，设置完整的URL地址5）点击“国内景点介绍”打开站点中的“jingdian1.html网页，网页内容及格式见下图（下一张幻灯片中）,其文本和图片见素材,注意：页面中第一行的“主页”两个字设置超链接，单击该处要能返回到主页,4.4 综合实例,制作旅游网站首页制作旅游网站简单主页,