|
网页入门第四讲（7月6日更新，讲FLASH、背景音乐和CSS）
好久没更新课程了，主要是这段时间自已事太多，以后我们会及时更新的，也请大家不要太依赖教程，因为教程只是给初学的朋友启个蒙，要想做出比较专业的主页肯定得花时间多参考一些其它资料，多看DW中的帮助文件也是非常有用的。
本来我一直想在这一讲中讲表格的深入应用，也说是利用表格来排版，但是感觉难度太大，还是先讲解其它一些相对比较容易一些的，所以这一讲我们来讲解一下如果插入Flash和在主页中放置背景音乐，另外还要讲解一下CSS的简单应用。放置背景音乐需要讲到使用“代码”编辑功能来插入代码，这一点就会引出一个大问题，就是如何插入一些网页特效的问题，上次有人提问说如何提问实现一些网页特效，其实方法就是使用代码编辑功能，然后把特效代码插入到网页中就行，这个问题以后我们会单独开一点来讲的。另外CSS是一个操作相对比较复杂的内容，我们只讲最基本的内容，以后大家再深入了解。
一、在主页中插入FLASH动画：
FLASH动画的扩展名为.swf，这是矢量动画,画面放大而不会失真，文件相对小巧，所以在网上使用很广。在http://flash.0733.com这个网站有很多FLASH音乐作品，大家可以试一下，我们不必把这些FLASH下载下来，因为FLASH音乐文件都比较大，如果都下载下来的话很占用空间的，那个50M空间肯定放不下这么多东西（网易的10M空间就更放不下这些东西了），而且有些空间是不允许你在线播放音乐文件的，当然如果文件小或者你有足够的空间的话可以flash文件先保存到home或者home下面的子目录下，再插入这些文件。我们分别讲解插入本地文件和调用网上文件这两种方法。
1、插入站点管理器中已存在的FLASH文件：先在DW中打开index.htm，再用鼠标定位好要插入FLASH的位置，再在DW菜单中点击“插入”－－“媒体”－－“FLASH”（快捷键是Ctrl+Alt+F），然后选择好FLASH文件就可插入在DW网页中了。插入后不能直接在DW中播放，但是不要紧，只要我们F12预览时就可以播放了。
2、插入其它网站上的FLASH作品，网上有很多精彩的FLASH作品，如果你找不到的话，可以来这个株洲信息港
http://flash.0733.com来找一下，这里的FLASH MTV作品很多，而且没有做防盗链处理，调用网上的FLASH作品时最关键的就是要找到FLASH的绝对地址，我们在http://flash.0733.com网站中随便播放一首歌曲时，在最下面有一个“全屏欣赏”，我们在“全屏欣赏”中右击鼠标，在弹出的菜单中选择“复制快捷方式”，这时候就把FLASH的绝对地址复制下来了，然后我们在DW中点击菜单“插入”－－“媒体”－－“FLASH”，注意这时候无法直接选择FLASH文件，因为我们是调用其它网站的FLASH文件，在这个“选择图像源文件”的对话框的最下面一排有一个“URL：”，后面已经有一串字符了，我们先把URL后面的这串字符清除掉，然后点右击鼠标“粘贴”，把我们开始复制下来的这串FLASH地址就粘贴进来了，如图1所示，然后点击“确定”就可插入进来了。（我们粘贴的FLASH歌曲《太委屈》的网址为http://flash.0733.com//swf/elses/200476154030.swf，你可以选择你喜欢的FLASH作品。另外再顺便讲一个如何把网上的FLASH作品保存到自己电脑上的方法，其实在IE的临时文件夹中就保存了你播放过的FLASH文件，但这种查找方法一下子不太讲得清楚，大家可用另外一种方法，也就是上面我们讲在“全屏欣赏”中右击鼠标会弹出一个菜单，这时候我们不选择“复制快捷方式”而选择“另存为”就可把FLASH作品保存到自己电脑上慢慢欣赏了）
（图1）
通过调用网址插入的FLASH动画不像第一种方式会自动设置好大小，这种方式插入后只会把动画的大小设成32*32的，这太小啦，我们得改大一些，方法就是在DW中点击这个FLASH，然后在下面的属性面板中把文件的宽度和高度设置成合适的大小，我们可以设置成480*320，当然你可以设成其它的大小。如图2所示，如果操作正确的话我们预览时就可看到效果了。
（图2）
二、在主页中插入背景
我们这次不选择在index.htm中播放背景音乐，为什么呢？因为我们在index.htm播放了flash音乐作品，如果这里也放了背景音乐的话就会有同时播放两种音乐了，所以我们在DW中打开图片集网页，即打开photo.htm文件，播放背景音乐的非常简单的，最主要的是我们要讲解一下如何使用DW中的“代码”编辑功能，这里的代码就是指HTML代码，我们不强求大家都搞懂HTML语言，在教程未开始前我们就讲过了不会在教程中讲解如何HTML语言，但“代码”编辑方式可实现非常多的功能，我们不要求自已学会编HTML代码，但起码也要知道如何插入别人已编辑好了的现成的代码，这个背景音乐就是现成的代码，格式是固定的，只要把代码中的背景音乐网址换成自已想要的就行了，下面我们来讲操作步骤。
1、如何选择自已喜欢的背景音乐：
这些基础知识我们也穿插在教程中讲解，我们不会单独地讲解某一种方法，因为如果没有充分利用网上丰富的资源的话实在是太可惜，背景音乐格式可以是mp3、wma等等文件格式，但这种音乐文件实在是太大，一般都是好几M大，如果别人用小猫来访问你的主页，也许会等上老半天才听到过声音呢，所以我们推荐背景音乐使用midi格式，这种音乐文件相当小巧，一般也就10K左右，大家可在碧海银沙MIDI站找到大量的MIDI音乐http://talk3.silversand.net/midi/new.htm，选择自已喜欢的音乐，然后把MIDI的网址复制下来，同样可在MIDI音乐链接中右击鼠标选择“复制快捷方式”就复制网址了。比如我们选择了一首王杰的《祈祷》的网址为http://www.yinsha.com/midi/7/pray.mid
2、把背景音乐播放网页中
详细介绍可见http://smileflyjob.go.nease.net/xiazai/zai6.htm，我们只讲方法一：也就是用在<head></head>之间插入以下代码<bgsound src=http://www.yinsha.com/midi/7/pray.mid loop="-1"> 就可实现，其中的“http://www.yinsha.com/midi/7/pray.mid
是我们在上一步中已复制好的背景音乐的网址，你可以换成自已喜欢的，也可为其它格式，比如说mp3格式等等。大家启动DW后默认的界面是“设计”方式，我们必需点击DW上面一排中的最左边一个铵钮“代码”（关于“代码”和“设计”怎么切换我们在前面教程讲申请网易免费空间并去掉广告那一节中已讲过了），我们可以在这些代码中仔细寻找<head>这几个字，一般<head>都是在代码的很靠前的部分，找到后我们在<head>的最后面按一下回车，目的就是要空出一个空行出来，这样便于插入背景音乐代码，然后我们在下面的空行中粘贴这串代码<bgsound src=http://www.yinsha.com/midi/7/pray.mid loop="-1"> ，如图3所示。注意代码loop="-1"中的－1表示反复循环播放，如果为具体的数值则指播放几次，比如说loop="2"就指播放两次后就停止。
（图3）
三、使用CSS
CSS是简称，中文翻译为“串接样式表”，也有人只翻译为“样式表”，我们不管它是什么，主要是想使用它能作网页中的字体不受对方浏览器查看字体大小的影响，说实话，我自已对CSS样式表的应用也就只知道这么多，了解得非常浅显，但发现这个功能很好用，就把自已知道的这一点说说出，大家千万不要以为CSS就只能实现这一点功能，CSS的功能非常强大，只是我们还没掌握它罢了：）
开始讲解CSS之前我们是否注意到自已网页文件中的字体大小是不是很难控制呢？有时候在家查看主页时发现字体大小比如合适，但一到办公室电脑中再去查看却发现字体变得非常大或者非常小了，呵呵，这就是因为我们没有使用CSS样式表的，你只要在IE的“查看”菜单中的“文字大小”选择“最大”、“最小”等看一下，字体一下就变大变小了，有时候我们编排得好好的主页当字体变大或者变小后会显得惨不忍睹，特别是以后就用表格制作了导航条后这种感觉会非常明显，有时候字体变大时会把表格“撑破”严重影响美观，我们怎么样来让字体乖乖地听我们的话，不受IE“查看”菜单中的字体设置大小的影响呢？我们先给大家看一个演示页面，这就是我前段时间花了几天时间才编辑好的《墨韵飘香坛友文集》http://lzk.icpcn.com/00/，在这里面不管你的字体怎么设置，网页中的字体都是固定大小。
1、新建一个CSS文件
在DW中打开index.htm文件，然后我们选择菜单“文本”－－“CSS样式表”－－“新建”，如图4所示
（图4）
在弹出的对话框中的名称中默认为.unnamed1，我们不改它也可以，点击“确定”，然后会弹出一个“保存样式表文件为”对话框，我们给样式表命一个文件名，我们就取名为my，然后会弹出一个如图5所示的对方框，我们可以把默认的CSS字体设置为14，当然你也可以设大一点或者设小一点，完全取决于你的个人喜好了，再点确定。如果你不想让超文本链接出现下线线的话可以在“修饰”的最下面一个选项“无”的前面打上勾就可以了。
（图5）
2、应用CSS样式
新建了CSS样式文件后，我们就可以应用CSS样式了，我们如果要对整个页面使用了“默认文字”大小的页面进行CSS样式设置的话这样来操作：点击顶部“修改”菜单中的“页面属性”（快捷键是Ctrl+J），在“大小”后面选择16或者其它你喜欢的大小，如图6所示，这样整个网页中没有对文字大小做过设置的字体就全部变成16像素大小了，不会受IE查看菜单中的字体大小的影响。
（图6）
如果要对部分的字体大小再做单独的设置的话我们可以先选择这些要设置的内容，示例中我们想把网页中最后面的日期设置成14像素大小，我们先选择这一排字，然后在下面的属性面板要样式中选择.unnamed1，这样字体就可变为14像素大小了，当然设置后也可以在属性面板下面的“大小”中重新选择字体大小。如图7所示。
（图7）
另外已设置好的样式表文件也可以重新编辑的，这里我们不详细说明了，通过点击菜单“文本”－－“CSS样式表”－－“新建”进入。
最后要注意的问题是我们新建了样式表文件后，就会多出来一个my.css文件，所以在上传网页时也必须把这个文件也上传才能使字体大小固定为自己设置的大小的。
四、前几课相关内容的补充：
大家普遍反应的一个问题是上传主页后图片无法显示，这是因为我们没有把对应的图片也上传至网站上引起的，大家要注意到一个常识问题：就是你在网页文件中调用了任何一个硬盘上的文件，把必须把这个对应的文件FTP上传至网上，因为别人访问网站时无法访问到你硬盘上的文件的，只能访问已上传的文件，有些朋友一直不明白为什么自己能看到而别人却看不到，问题就在这里，你自已肯定能访问到自己硬盘上的内容，而别人是不行的。还有一点反应比较多的是FTP无法连接，其实很多情况是FTP因为空间提供商的服务器本来就无法连接，因为我们申请的是免费主页空间，并不十分稳定，所以无法连通时大家就不要性急，先把网页在自己电脑上搞漂亮了，然后能上传的时候再上传，当然发现连续几天都无法连通肯定是有问题了，这还是要及时反应出来的，大家再一起来解决这个问题。
另外还发现了一个大家在制作网页时的一个问题，就是以前讲过的内容有时候不能应用到后面的页面中来，比如说我们在第一讲时就讲过了如何更改主页的标题，记得我们第一讲的标题是“欢迎光临‘织梦之旅’之XXX的家”，上家详细地讲解了设置标题的方法，但是我访问过大家的一些演示页面，在后来制作的其它页面中没有设置一个有意义的标题，还是使用那个“无标题文档”默认标题，建议大家再返过头来看看课程，也许有用得着的地方。
另外还要补充讲解一个内容关于链接的打开方式：
详细内容可参考http://www.webshu.com/agile/tor/7cid=0418.htm，这里已讲解得非常详细了，我们再用通俗的语言来说明一下用得最多的默认方式和在新窗口中打开方式。
比如说我们要求访问者点击“图片集”时是在新窗口中打开photo.htm网页，因为有时候是有这样的需要的，你希望现有的网页窗口保持不变，其它的内容要新开窗口显示，我们就可这样操作，先在index.htm中用鼠标点击“图片集”这几个字，在下面的目标中选择“_blank”，这样当浏览网页时点击链接就会在新建窗口中打开。如图8所示，大家可通过一下设置为“_blank”和不改变默认打开方式（即“目标”为空）的区别。
（图8）
本课内容演示页面为http://soft666.com/home
共4页: 上一页 [1] [2] [3] 4 下一页
|
