设为首页
加入收藏
站点地图
首页 | 网站建设 | 杭州FPGA培训班,浙江FPGA培训班,苏州FPGA培训班,昆山FPGA培训班,常州FPGA培训班优化 | 网站推广 | 网络营销 | 网站运营 | 网站策划 | 在线讨论 | 下载中心
您当前的位置:WebSite -> 网站建设 -> 文章内容正文->细化和完善网页
 子栏目导航
 热门文章
 相关文章
 

细化和完善网页

作者:佚名  来源:转载  发布时间:2008-7-9 15:57:02  

  如果你觉得这个主页面还太简单了,我们就将其进一步细化,使用其功能更完善些。

(1)插入Flash动画

  在Dreamweaver中,可以很方便地插入Flash动画、Shockwave电影、Java小程序等,增加网页的动感,让你做出来的网页更吸引人。

  下面我们在网页中插入一个Flash动画。将光标置于页面底部,单击“Object面板”中的“Flash”图标,在弹出的对话框中选择一个swf文件,插入的Flash动画显示为一个灰色的方框,里面有Flash标志。

  在属性面板中可以设置它的高度(H)和宽度(W)。如果想看一下效果,就点一下属性面板上的播放按钮(图1)

图1 选择链接文件

  进入浏览器,可以看到Flash动画的效果(图2)

点击可看到浏览效果

图2 点击可看到浏览效果

  不过我们发现当前Flash为白背景,看起来不太谐调,这时我们可以设置Flash动画的背景为透明。选中这个Flash,按下Ctrl+Tab切换到源代码,在前加入代码: <param name="WMODE" value="transparent">(图3)

本教程由洪恩在线提供

图3 选择链接文件

  关闭HTML源代码编辑器,浏览页面,这回Flash 是透明的了。有了Flash动画,真的为页面增色不少!(index5.htm) (图4)

点击可看到浏览效果

图4 点击可看到浏览效果

(2)项目列表的使用

  现在需要在主页中添加一些内容,比如在简介下面列出个人主页中的主要内容。

  为了使用输入的内容整齐有序,我们使用项目列表功能。先输入项目列表的第一行,然后选择“Text”(文本)菜单中的“List”(列表)项,弹出相应的子菜单。我们选择“Unordered List”(无序列表,也称作项目符号)命令,可以看到此行前面加了一个小圆点,这就是项目符号(图1)。更便捷的方法是点属性面板上的“Unordered List”按钮。

项目列表的使用

图1 项目列表的使用

  在第一行后面回车,下一行中也出现在一个项目符号,我们可以继续输入项目中的其他内容。内容都输入了,想要结束项目列表,就在最后一行后连续按两下回车。

  现在的列表叫无序列表,各个列表项之间没有顺序级别之分,用一个项目符号作为每条列表项的前缀。如果你觉得用项目符号不能表示列表每项的顺序,可以将其转化为有序列表,也就是每项有序列号。

  将这几行选中,打开属性面板,这里提供了有序列表和无序列表的快捷方式(图2)

带项目列表的属性面板

图2 选择链接文件

  点一下“Ordered List”(有序列表,也称作项目编号)按钮,选中段落就以编号方式排列了(图3)

选择链接文件

图3 带项目列表的属性面板

  注意:如果想取消项目列表,就再点一下属性面板上的“Ordered List”按钮。

  如果我们想列出第二条中的细项,就可以使用多级项目列表。我们先在第二条下面添加其细项内容,一共有两条。将这两行其选中,单击属性面板中的“Indent”(缩进)按钮,这两项就变为下一级内容了。 (图4)

多级项目列表

图4 多级项目列表

(3)设置项目列表属性

  可以看到,下一级项目编号自动为数字形式,能不能改为其他形式呢?

  当然可以了,通过设置项目列表的属性,可以改变项目符号或编号的类型。

  将光标插入点放在第二级项目中的任意位置,然后单击“Text”菜单下的“List”项,再选择“Properties”(属性)命令,打开列表属性对话框。

  在“List Type”(列表类型)下拉列表框中选择列表类型,我们选择“Numbered List”(编号列表);在“Style”(样式)下拉列表框中,可以选择相应的项目列表样式。这里选择该选择“Roman Large”(大写罗马数字)(图1)

项目列表属性对话框本教程由洪恩在线提供

图1 项目列表属性对话框

  设置完毕,单击“OK”按钮,看,第二级项目编号变为大写罗马数字了(图2)

改变项目列表的形式

图2 改变项目列表的形式

  注意:我们也可以通过单击属性面板上的“List Item”(列表项)按钮来打开该列表属性对话框,要注意的是,必须展开属性面板,才可以看到此按钮。

  最后我们浏览一下有了项目列表的页面(图3)

点击可看到浏览效果

图3 点击可看到浏览效果

(4)插入水平线和版权符

  我们在页面的下部,Flash动画的上面,加上版权方面的说明文字。 先插入一条水平线,用以分隔文档内容,使文档结构清晰明白。

  将光标定位在最后一行,敲回车换到下一段。

  单击Object面板中的“Insert Horizontal Rule”按钮,就插入了一条水平线。 在属性面板中,设置水平线的宽度W为400像素,对齐方式Align为居中对齐(Center)(图1)

水平线属性面板

图1 水平线属性面板

  按下Shift+Enter键换行,输入相应的文字。

  文字中需要一个版权符,输入方法为:单击Object面板上的“Common”下拉箭头,选择“Characters”,切换到字符面板,这里提供了一些经常使用的字符和符号。单击第一个图标,版权符就插进来了,在页面上显示为“©”,在浏览器中会显示为“©”。

插入的水平线和版权符

图2 插入的水平线和版权符

  浏览一下页面(图3),美观多了吧!

点击可看到浏览效果

图3 点击可看到浏览效果

(5)创建电子邮件链接

  接下来在网页上添加一个E-mail链接,方便用户意见反馈。

  把光标置于文档窗口要显示电子邮件链接的地方,选择“Insert->E-Mail Link”命令。在“Insert E-Mail Link”对话框的Text框中输入链接显示文本“给我来信”,在下面的E-Mail框中输入E-mail地址(图1)

插入电子邮件的链接

图1 插入电子邮件的链接

  浏览此页面(图2),单击“给我来信”的链接,打开浏览器默认的电子邮件程序处理程序,收件人邮件地址被电子邮件链接中指定的地址自动更新,无需浏览者手工输入。

点击可看到浏览效果

图2 点击可看到浏览效果

(7)设置链接字体的颜色

  在浏览别人网页时,我们会发现超链接的颜色很丰富,鼠标放上去是一种颜色,点过之后又是一种颜色,能不能让我们的页面也有这样的属性呢?

  在文档窗口中单击鼠标右键,从快捷菜单中选择“Page Properties”,又弹出了“页面属性”对话框,老朋友了,你还认识它吧!我们曾在里面设置过标题、背景和页边距。

在页面属性对话框中设置链接字体的颜色本教程由洪恩在线提供

图1 设置链接字体的颜色

  我们看对话中间的选项(图1)
  Text(文本),用于设置文档中文字的颜色,我们可以不作设置;
  Links(链接)用于设置未访问过的超链接文字颜色,我们点一下旁边的颜色板,选择深蓝色;
  Visited Links(访问过的链接)用于设置文档中已经访问过的超级链接的文字颜色,我们将其设置为紫色;
  Active Links(正在访问的链接)用于设置文档页面中正在访问的超级链接的文字颜色,将其设置为红色。

  点“OK”,超链接文字的颜色设置完毕。

  按F12进入浏览器中,可以看到超链接字显示为深蓝色,将鼠标放在超链接字体上时显示为红色,点一下,再回到当前页面,可以看到当超链接变为紫色了(图2)

点击可看到浏览效果

图2 点击可看到浏览效果

  好了,经过我们的细化,当前页面功能更完善了,相信你也学会了很多东西。不过别骄傲哟,这一章只是入门,要想做更复杂的页面,就要用到表格、层或框架等内容,还要创建一些表单,以便于和用户交流。这些内容我们将在下面的教程中一一讲到,你可要认真学呀!好,不见不散!

 [返回上一页] [打 印] [收 藏]
百度中查看“细化和完善网页”相关文章

版权申明:本站网站建设资源来源网络,如有侵犯您的版权,请来Q告知 我们会在24小时内删除!

下一篇文章:用表格做网页
Copyright © 2008-2010 www.mepeixun.com All Rights Reserved
服务QQ:52466268 邮箱:meipeixun@163.com
备案号:苏ICP备07200130号