跟我学做网页(装修篇).doc

跟我学做网页（装修篇）发布时间：2005-11-08跟我学做网页（装修篇）上篇说完，你一定回去试了吧，是不是很简单？没错，做普通网页就那么简单，可你又要说了，这种网页怎么也做不出“馨香小憩”那样的页面呀，别急，今天咱们就谈谈这个问题。如果你对于制作一般网页己经能够掌握的话，应该会自己定义排版的样式了，这个经验是教不来的，只有靠你自己多试，多体味才能有收获。让我们来看看馨香小憩的首页都使用了什么技术，用了HTML的框架使首页分为三个页面，表单的选用使首页可以做到留言。用了CSS技术使表格定位及固定了文字的样式，用了JAVA语言所写的一些源程式实现动态按钮及日期显示还有FLASH做的标题动画及广告条。那这些技术是不是非常难呢？NONONO！一点也不难，看完本文你就应该能做到在几天内使你的主页实现其全部效果！是不是不信？别急，看完了你就知道怎么回事了。一、框架关于框架我不想从什么HTML语言的角度上说，太难而且也太烦，告诉你一个好方法在FRONTPAGE的菜单条“文件”里选“新建”（如果菜单里没有，在文件菜单最下面找一找有个向下箭头，点一下就能看到了！）会有个新建向导，从中选择你想要生成的“框架网页”，样式有许多种，就拿馨香小憩来说，是选了带横幅和导航栏的那一类，所谓横幅就是上面的那一块，导航栏就是左边那一条。剩下的则是主页面。那各个页面是什么关系呢？详细的说是这样的。横幅横幅通常是放置网站的标题（或标志）图的，一般应该有个广告条或宣传的动画，还有若干项目链接，注意是“项目”，和栏目不一样，项目要求生成的网页为新建网面，就是辟出的一个大类，如什么写信给我呀，留言本呀，我的介绍呀，服务指南之类，不信你看看那些大网站都是这么做的，不过你要说你想另类，那也管不了你。呵呵，最好是别让访问者不知所措。导航栏左边的一个网页称作导航栏，作用自然是通过这个页面点击使之进入相应的页面，在导航栏里设定超级链接时可以选超级链接对话框右下角的网页类型 ，通过它你可以指定链接事的页面在什么地方显示。默认自然是主页面了。主页面一般称为Main页，当然是放你的每个栏目的页面用的，你可以随心所欲的在上面创作，文字，图形、声音、动画都行。页面通过导航栏使之切换。页面管理方面框架是个不错的主意。不框架也有它的不足，就是访问者可读面积变小了，一个页面本来就不大，再东一裁西一切就没多少地方了，也算是鱼和熊掌不能兼得吧。相比而言，用了框架可以使本来每页必设的链接做在导航栏里，使访问者打开新的页面时访问速度快了，而且通过框架也更容易设置一些较大的图片，因为当该框架图片打不开时，别的框架正在显示页面，访问者不会眼前看起来半天一片白，那就会有点耐心等你的页面打开了。所以框架还是利大于弊的。二、定义字体和链接样式定义字体和链接样式并不是那么一两句话就能说清的，不过我有个好办法可以使你很快实现，你将下面两段横线中的这段话插入到你的网页的HTML里 与 之间最好是紧跟着 后一行插入。BODY FONT-FAMILY: 宋体; FONT-SIZE:9pttable FONT-FAMILY: 宋体; FONT-SIZE: 9ptA:link COLOR: #ff0000; TEXT-DECORATION:noneA:visited COLOR: #ff0000; TEXT-DECORATION: noneA:hover COLOR: #00ff00; TEXT-DECORATION: none这一段话是页面定义的关键，其中第一行的 “9pt”是指你的页面的默认字体大小。当然你可以把它改为你喜欢的大小，如 10pt,15pt都行，试试吧。第四行的 “color: #ff0000;“是指链接文字的颜色， “#ff0000”是红色，其它颜色码你自己查一查，不懂的话可以自己胡填几个试试，反正 ff0000这几位数字 每一位 都可以填入 0-9 和 A-F 这些数，比方说： #153fa3、#aaddee、 #ed44a3 你试试吧。（我不想教你学十六进制，太烦，咱们是学做主页，可不是学编程） 然后同一行的那个 “none 代表不加划线，你要加下划线就把它改成 “underline”就成了。多试试组合这几句语句的组合，你会发现你可以轻松的改变页面的默认文字，默认链接的样式！三、加入特殊的滚动字幕在其它网站经常你会发现那样滚动的字幕，这可是非常吸引人的，所以不少朋友肯定也希望 自己的主页也能有这样一个小效果，当然作为软件业老大的微软不会视而不见，所以象这种简单的特效完全己经做在软件里了，你只要试着看看“菜单插入组件字幕”就明白了。不明白么？很简单的，选中滚动字幕后会出现个对话框，这个框里包含了所有滚动字幕的属性，你其实只要往文本框输入你想要滚动的话就行了，嘻嘻，就这么简单。想要给字幕换点不同的效果，你可以试着改一下字幕的各个数值，改错了不怕，慢慢试，直到你满意为止！四、关于超级链接的书签有的时候我们的页面比较大，而你又想让访问者立即就能看到所想看到的当前页面的内容，怎么办呢，有个好办法就是插入书签。其实在网页上也就可以看作是一本书，我们的时候会很需要这样的书签的。怎么做呢，听我一一讲来：首先你当然要选好将书签放在什么地方，比方说我们的页面有一个标题名叫“今日趣事”，那么如果你将这个标题选中（就是拖动鼠标使之反色显示），然后选取“菜单插入书签”会让你给书签起个名字，当然你最好将名字取得好记点，确定后一个书签就做成了。当然光有书签还不能达到书签的效果，你还得做一个超级链接指象这个书签呀，对了，插入超级链接，不要填写链接的地址，在对话框左下角的书签栏里拉下文本下拉条，你会看到你刚建立的书签正在那里呢，选中它，OK！一个书签做好了！五、插入JAVA特效其实滚动字幕效果就是一种JAVA特效，虽说只是一种简单的特效，那么有朋友问我想实现一些跟随鼠标的效果该怎么做呢？就象馨得小憩页面封面的那种嘘！别让人听见了，我来悄悄告诉你一个好的东东，使用它你可以不费半分力就做到这些效果，什么东东呢？就东东就是JAVA特效生成软件，这种软件可以自己插入JAVA语言在你想插入的网页里，不不必看到一句真正的JAVA语言，就能轻松实现这些特效啦这类软件有很多，不过大多是外国人编的，国产的我有一款比较好用的名为 JAVA GIRL的小工具，功能虽不是很全，但也足够使用了！想下载么？到馨得小憩首页上的“我的留言”栏里找链接吧，我早就放在主页里请大家和我一同分享这款软件了！还不赶紧行动？六、插入FLASH动画关于动画方面，可以实现调用FLASH（一种高效的网络矢量动画制作工具）的动画网页谁不想试试呢？那么我们该怎么才能在主页上实现在这样的FLASH动画呢？方法有两种：（1）将一个新页面完全制作成FLASH动画页面。这种方法适宜可单个的动画播放，比方说我的网站的“开心动画”栏目就是这么做的。方法是将点击进入的链接目的地址写为 SWF文件，SWF文件就是FALSH的动画生成文件，这样如果访总裁者的浏览器里可以放FLASH动画的话，就能轻松的看到FLASH动画了。不过这种方法太简单，没有什么可改变的，纯粹只能为了看动画而做。（2）插入一个FLASH动在你的普通页面，如果你手头在FLASH动画制作软件就好办法了，因为FLASH动画软件自己就能生成动画网页。那时你只需将网页用FORNTPAGE打开，然后复制粘贴就成了，和操作图像上一个道貌岸然理，如果你没有FLASH制作工具，也不要紧，你只需将如下面的一段话复制下来，存成了个“.htm”文件就可以了。FLASH 怎么存呀。拜托！你用记事本来将下面的一段话复制并保存，然后选取另存为，记住，请在起文件名时给它叫个1.htm文件，连同双引号一起打，不然会存成 1.htm.txe 文件，只有你加了双引号它才会存为真正的网页文件。然后就简单啦，你把这个文件用FRONTPAGE打开，你就会发现上面有一个方框，这就是你的FLASH文件的大小。当然，你真正要插入的时候，还请你填入相应的链接，例如说你的SWF文件是在你的网页上的IMAGE文件里的1.swf文件，你就在第六行的 src=里填入这样的地址。如果地址有不同当然也可以改，这你多试啦。后面的 bgcolor=代表的是背景的颜色，WIDTH=100 HEIGHT=100代表的是宽度和高度。七、提供网站服务网站可以提供多种服务，不管是商业网站，还是个人网站，都想通过服务来达到吸引访问者的目的。一般可提供的服务是如下几种：1、搜索引擎2、电子信箱链接3、网站聊天室4、热门链接5、网络杂志订阅6、自动更新的文摘以上是一些常见的个人网站提供的服务，这些一般都是通过申请服务后得到一段源代码，然后粘贴到自己的页面实现的。如果说你有兴趣让你的网站提供这类服务的话，你不妨多到一些大网站找找有无申请的项目，就和计数器、聊天室申请一般，很容易的。八、让网站帮你赚钱我并不想过多的宣传这一项服务，实际作为个人主来说达到点击广告付费的可能性并不太大。以8848网站为例，很多网站都申请了它的广告条，加在页面上，并盼望着能拿到广告费用，因为8848宣称访问者点击一次将有二角钱给斑竹，其实这是要在浏览20次的前提下才能给你，而如果一个月累计付费量达到二十元才能给你，不然就算白忙。细想想如果要达到二十元的付费标准，你的网站必须达到点击100次/月才能得到钱，而点击100次必须是在至少你的网站访问量在2000以上，而一般来说，个人网站一个月的访问量是不会有这么高的，除非你很会炒作，很会拉人来，但你很快就会发现，你用在炒作上的网费己大大超过了你得到的广告费，所以为了换取广告费而拚命拉人来是不现实的。最重要的是你将你的小站办得有声有色，让它的内容吸引更多的人主动来看，对于广告收入就不要过分在意啦。申请广告很简单，同样是申请用户名和密码，与申请主页差不多，你会得到一串代码，将之放在你的网站上就可以达到点击付费的可能了，祝你能成功吧。九、展望至此，你己基本学会一个普通个人网站的所有建站方法，当然，学无止境，主页的制作技术也是日新月异的，真正的制作好的主页需要系统的学习HTML、CSS、JAVA、ASP、FLASH、CGI、SQL等许许多的内容。我们学的网页制作仅仅是最普通的静态网页，这样的网面只能成为个人主页，而如果你要想学会真正的商业网页制作的话，就必须下工夫学习从 HTML语言开始的一系列网络编者按程工具，而不是仅仅靠哔众取宠的效果来成为.com时代的先锋者。朋友，愿我这个小小的教材带你走入网页制作的大门，最终成为一个网络上的成功者。祝你好运。很多朋友留言想通过QQ与我交个朋友，我的QQ号是 1621038 有共同兴趣的朋友请加我对于个人站长来说，如何能使自己的网站与众不同、充满个性，一直是不懈努力的目标。除了尽量提高页面的视觉效果、互动功能以外，如果能在打开网页的同时，听到一曲优美动人的音乐，相信这会使你的网站增色不少。一、学会添加音乐文件为网页添加背景音乐的方法一般有两种，第一种是通过普通的标签来添加，另一种是通过标签来添加。(一)使用标签用Dreamweaver打开需要添加背景音乐的页面，点击“代码”打开代码编辑视图，在之间输入“ ”在弹出的代码提示框中选择bgsound。Dreamweaver自动输入“ bgsound”代码后按空格键，代码提示框会自动将bgsound标签的属性列出来供你选择使用。bgsound标签共有五个属性，其中balance是设置音乐的左右均衡，delay是进行播放延时的设置，loop是循环次数的控制，src则是我们音乐文件的路径，volume是音量设置。一般在添加背景音乐时，我们并不需要对音乐进行左右均衡以及延时等设置，所以仅需要几个主要的参数就可以了。最后的代码如下：其中，loop=-1表示音乐无限循环播放，如果你要设置播放次数，则改为相应的数字即可。这种添加背景音乐的方法是最基本的方法，也是最为常用的一种方法，对于背景音乐的格式支持现在大多的主流音乐格式，如WAV、MID、MP3等。如果要顾及到网速较低的浏览者，则可以使用MID音效作为网页的背景音乐，因为MID音乐文件小，这样在网页打开的过程中能很快加载并播放，但是MID也有不足的地方，它只能存放音乐的旋律，没有好听的和声以及唱词。如果你的网速较快，或是觉得MID音乐有些单调，也可以添加MP3的音乐。只要将上述代码中的happy.mid改为happy.mp3即可。提示：在FrontPage中加入背景音乐要比Dreamweaver相对方便一些，只要在“背景”对话框中进行相关设置即可。(二)使用标签使用标签来添加音乐的方法并不是很常见，但是它的功能非常强大，如果结合一些播放控件就可以打造出一个Web播放器。它的使用方法与第一种基本一样，只是第一步的代码提示框里不要选择gbsound，改而选择embed即可。然后再选择它的属性进行相应的设置，从图中可看出embed的属性比gbsound的五个属性多许多。最后的代码如下：。其中autostart用来设置打开页面时音乐是否自动播放，而hidden设置是否隐藏媒体播放器。因为embed实际上类似一个Web页面的音乐播放器，所以如果没有隐藏，则会显示出你系统默认的媒体插件的。对于这两种方法，笔者认为二者之间都各有优缺点：第一种方法当页面打开时音乐播放，如果将页面最小化以后播放音乐会自动暂停，如果使用第二种方法则不会出现这种情况，只要不将窗口关闭，它会一直播放。所以希望大家在运用过程中根据自己的情况来选择添加音乐的方法。学会了简单的添加网页音乐方法后，就应该在界面和功能上下点功夫了。我们可以利用网页音乐播放器打造一个时尚的音乐播放器。 二、打造时尚音乐播放器学会了简单的添加网页音乐方法后，就应该在界面和功能上下点功夫了。我们可以利用网页音乐播放器打造一个时尚的音乐播放器。提示：网页音乐播放器是一个网页插件，运行制作好的页面后，它会调用系统自带的WindowsMedia播放器来播放事先设定好的MP3歌曲。(一)简单设置首先下载播放插件(下载地址：http//soft/music.rar)，解压后进入目录，其中music.htm就是我们要在主页上加载的播放条页面，list.htm是浏览者用于查看播放列表的弹出页面，js文件夹里存放的是几个播放控制文件，img里则是一些播放界面的图片文件。使用网页编辑软件打开music.htm，找到以下代码： varblnAutoStart=truevarblnRndPlay=falsevarblnStatusBar=falsevarblnShowVolCtrl=truevarblnShowPlist=truevarblnUseSmi=falsevarblnLoopTrk=truevarblnShowMmInfo=false在这里可以对播放器进行基本的设置。以上各句依次含义是：