我想设计个自己的个人网站,请问我
1。首先学会网页制作软件frontpage,dreamweaver等。
2。设计网站要多看别人的网站形式,颜色搭配、框架分割等,或者你也可以用现成的网站模板。
老兄有自己的网站吗?有!?让我看看,呵呵——不敢恭维。 不是我说你,你这网站真好像六十年代的老古董一般死气沉沉,颜色配得更是不搭调,花花绿绿眼都花了。好不容易做个网站,给别人留下这种印象,唉……真是出力不讨好!
喂,别灰心嘛!看在都是同行的份上,介绍我的三件法宝给你。 它们身出一家,都是由大名鼎鼎的Macromedia公司开发的网页制作工具,虽然工种不同,却是相辅相成。如若熟练掌握了它们,再加上你自己独特的设计思路,可以...全部
1。首先学会网页制作软件frontpage,dreamweaver等。
2。设计网站要多看别人的网站形式,颜色搭配、框架分割等,或者你也可以用现成的网站模板。
老兄有自己的网站吗?有!?让我看看,呵呵——不敢恭维。
不是我说你,你这网站真好像六十年代的老古董一般死气沉沉,颜色配得更是不搭调,花花绿绿眼都花了。好不容易做个网站,给别人留下这种印象,唉……真是出力不讨好!
喂,别灰心嘛!看在都是同行的份上,介绍我的三件法宝给你。
它们身出一家,都是由大名鼎鼎的Macromedia公司开发的网页制作工具,虽然工种不同,却是相辅相成。如若熟练掌握了它们,再加上你自己独特的设计思路,可以说没有做不出来的网页。什么?你问它们的名字,站好了,听我告诉你,它们就是大名鼎鼎的网页制作三剑客:Dreamweaver、Flash和Fireworks。
好了,废话少说,现在就让你看看如何实现它们的强大功能吧!
一、Dreamweaver 2。0
评价 ★★★★★
1。真正的所见即所得功能
用FrontPage98做网站的人常有这样的体会:辛辛苦苦做的网页,在编辑页面时明明是好好的,可浏览时却常会出现问题,不是表格间行列宽度完全不对就是拚接出的图像对不齐,有时甚至会面目全非。
而在Dreamweaver 2。0中,这种担心是完全没有必要的,准确产生的HTML代码,有时使你自己都分不清哪个是编辑页哪个是浏览页,具体效果你一试便知。
2。功能强大的Dreamweaver 2。
0站点管理工具
提起站点管理工具,算起来应该是FrontPage带的头,可自从用了Dreamweaver 2。0以后,我觉得它一点不比FrontPage老大哥差。它同样提供了死链查询、网站地图生成、自动改换链接、FTP上传等诸多功能,并且FTP上传一样支持鼠标拖曳,网站地图也可以另行保存。
现在让我们来看看如何生成一个新的网站。点击File菜单下的New Site选项,出现站点选择菜单。Site Name代表新建网站的名称,Local Root是指网站所存储的本机目录,Http Address指的当然是网站的域名地址,Cache复选框问你是否加载本机缓存以提高浏览及制作速度。
在左边的Category复选框中点选Web Server Info项会出现Server Access的选择栏,一般都选择FTP站点管理,在以下菜单中填好FTP站点的登录地址、用户名、密码以及初始地址,然后点击OK按钮,便会在网站管理工具中出现网站的基本结构目录,在目录上点击鼠标右键选择New File以增加新的页面。
制作完成后,点击Connect按钮连接到因特网上的FTP站点,就可以进行上传下载的维护了。其它一些功能大部分都能通过拖曳方式来完成,比如你将一个制作好的HTML网页从一个目录拖至另一个新的目录,它便会询问你是否扫描整个网站而改变与其相关的所有链接。
点击Scan按钮,经过少许时间的扫描,它会列出所有相关的文件问你是否更改,选择OK,所有的改链过程就在瞬间完成了。其它功能就请你自己摸索吧。
3。操控自如的CSS样式管理器
CSS样式表的出现已经有两年了,但一直未被重视,直到现在它才得到真正意义上的认可和应用。
利用CSS技术你可以用像素的单位来控制页面中的一切元素,比如你一定和我一样都厌烦了浏览器常见的3号字或2号字,不但粗糙而且难看,现在你就可以用磅值来控制页面中字体的大小了。当然CSS有更多的用途,但CSS和HTML一样,那众多的属性、烦琐的定义过程使你很难单靠手工编辑来掌握它。
现在在Dreamweaver 2。0的CSS样式管理器的帮助下,你终于可以自由地使用CSS,而不用再受它的限制了。
在Dreamweaver 2。0的页面编辑器中按下F7,便会出现styles窗口,你可以按下style sheet。
。。按钮或在桌面上按鼠标右键选择custom style,调出edit style sheet菜单来添加各种特殊效果。我们以字体调整为例,在edit style sheet菜单中选择new,确认type选择的是make custom style(class),在name中任意填写一个名称s9,然后在style definition for。
。。菜单中的font下拉菜单内选择宋体(如果找不到,就点击edit font list。。。选择),在size中选择9磅字,点击OK。退到主界面后,任意输入几个字并选择它,在选择的字体上按鼠标右键选择custom style中的s9,你会发现字体变成了宋体9磅字。
本页的字体以后都可以用这种方法来选择,你还可以添加多种字体效果,这样使得字体的控制变得得心应手。当你制作了长长的页面,却需要将所有宋体9磅字改变成宋体12磅字时,只须在edit style sheet菜单中选择s9,再点选Edit将Size中的9改为12,点选OK。
看看吧,所有的9磅字全部变成了12磅字!是不是很方便呀?当然,除了字体选择之外,表格样式、段落样式、背景样式以及border等等都可以用这种方法来控制。
4。极其方便的Layer制作工具
创建动态DHTML页面一般都是以插入Layer开始的,你可以用Objects工具条Common集合中的按钮插入Layer。
点选上述按钮后,会出现类似于选取框一样的图标。你也可以在页面上画一个矩形框,此矩形框左上角含有一个层框选取器和六个大小调整钮,这便是真正意义上的层了。
点选层框选取器,在Properties工具条上会显示关于Layer的信息。
你可在Layer ID中填写容易记忆的名字,在Tag中选取Layer的类型。需要说明的是Dreamweaver把、、和都当作有效的Layer对象,要编辑Layer的大小和位置,可以通过拖曳层框选取器和大小调整钮或在Properties工具条内改变其数值来完成。
想在Layer中插入文字、图像以及表格都和在普通的页面中相同,你不妨试试。
说了这么多,你不禁要问:Layer具体有什么作用呢?通俗地说你可以通过Layer来实现重叠及动态效果。比如以前附图是根本不可能在一段表格文字上漂浮移动的,可现在只要你能想得到,Dreamweaver2。
0就能做出来!
5。创建网页交互效果的Behaviors工具
网页的交互效果一般是通过两种方式来实现的,一是基于server端的server-side script或database interaction,二是客户端的JavaScript语言。
基于server端的方式由于技术问题,我们这里暂且不提(其实也是怕出丑,呵呵)。而客户端的JavaScript语言可能大家早有耳闻,它是一种功能强大且比较易学的语言,但实际上,实在很少有人仅仅为了实现一段交互效果,而闷头去编写一大串冗长的代码。
而且语言毕竟是语言,就算易学也不是一下两下就能学好的,更何况只是为了点儿交互效果而去学一门语言,好像也太夸张了点。如果你和我一样比较懒,可又天天想着做出漂亮的网站,那么你有福了。有了Dreamweaver 2。
0,你可以做出能想到的几乎各种效果,如下拉式菜单、新开窗口、跳转页面、监测插件、改变状态条、弹出消息框等等。Dreamweaver 2。0会通过Behaviors工具在你的HTML代码中自动插入JavaScript语言,这使你 省去了很大的麻烦。
在不同的浏览器中,JavaScript的兼容性有所不同,对此Dreamweaver 2。0提供了贴心的设计,你可以选择希望正确浏览的浏览器,Dreamweaver 2。0会自动屏蔽掉其它选项,这样就可以放心大胆地制作各种交互效果了。
6。让网页动起来的Timeline工具
Timeline可算是继承了Macromedia公司的老传统,乍看起来象是在用Director做多媒体软件,它的功能强大,可以针对每一个层控制不同对象在规定的时间按任意轨迹运动。
现在我们就来试试,首先按第3小节的方法制作一个Layer层,点选层框选取器选择此层,按F9调出Timeline工具,点击右键选择Record Patch of Layer,之后任意移动层,保存后浏览,怎么样,它是不是按照你的设想在运动?不过也要提醒你,千万别让所有物件都运动起来,否则浏览的人非眼花了不可!
好了,说了这么多,难道Dreamweaver就没有缺点吗?在我看来它的缺点真是少而又少,只是有时会在死链查询中出现非法操作,那么它的另外两个兄弟又怎么样呢?
二、Flash 4。
0
评价 ★★★★★
记得以前看别人做多媒体光盘常常会羡慕不已,他们又是加动画又是添声音,让我心里总是痒痒的。再看看自己的网站:简简单单的表格,稀稀拉拉的几行字,呆板的两三幅图片……心都凉了。
可自从用了Flash 4。0后,可以说现在技术不再是难题,重要的只是创意。
1。什么是Flash 4。0
Flash 4。0是用于制作动态及交互网站的全新工具。它集声音、图像和动态效果于一身,生成一种后缀名为swf的文件,因压缩率极高故产生的文件很小,并支持边下载边浏览,所以特别适合制作多媒体交互网站。
它还有一个既是缺点又是优点的特性,就是必须下载插件才能正确浏览。虽然这样影响了它的广泛使用,但同时又避免了不同浏览器之间的差异。
2。Flash 4。0的设计思路
Flash 4。0继承了Director多媒体制作软件的设计思路:它将制作平台当作一个大剧场,所有的声音、文字、图片等都是剧场里的演员,我们可以通过CTRL+F8组合键来调出单个演员的制作平台(演员的制作方法见下文),当所有的演员都制作完成后,你就可以让它们在不同的时间、不同的位置甚至用不同的事件触发而出现并表演。
3。如何制作单个演员
按CTRL+M设定动画大小及背景色,然后按CTRL+F8调出Symbol Properties菜单,在Name中输入便于记忆的名称——也就是演员的名字。在Behaviors复选框中有三个选项,分别是Graphic(图像)、Button(按钮)、Movie Clip(电影片段),我们选择Graphic(图像)点击OK。
在单个演员的编辑平台上任意输入几个文字,选好字体、大小、颜色后点击按钮关闭演员编辑平台。按CTRL+L出现Library菜单,选择刚才输入的名字,便会出现刚刚制作好的单个演员。所有的演员都是通过这种方法产生的,你可以试试点选Button(按钮)、Movie Clip(电影片段)来制作更为复杂的演员。
4。制作简单的动画
将刚才制作好的演员在Library菜单中选定,在预览框中拖取演员至平台,如图9所示,在时间线上点击第25帧,按F6复制演员到第25帧处,然后将场上演员拖至你想移动的位置,在第一帧上点击鼠标右键选取Properties调出Frame Properties菜单,点击Tweening,在Tweening内选定Motion,点击OK。
这时时间线上会出现一个红色的箭头,按回车你便可浏览到刚才制作的简单动画。
5。如何制作动态按钮
按CTRL+F8调出Symbol Properties菜单,选择Button(按钮),点击OK。
与Graphic(图像)不同的是:在时间线上方显示了按钮的四种状态:UP(最初状态)、OVER(鼠标移动至按钮上的状态)、DOWN(点击按钮的状态)、HIT(???)。选取UP帧,任意画一个图形,之后点击OVER帧,按F6键复制UP帧至OVER帧,用同样方法再复制到DOWN帧,用Paint Ducket——颜色填充工具分别添充三种颜色。
退至主平台,在Library菜单中将按钮演员拖到主平台上并点击鼠标右键,选择Properties—Actions—按钮(2-4)—Get URL,在URL中填写链接地址,点击OK,这样一个简单的动态按钮便完成了。
Flash 4。0的功能极其强大,它不但能制作出精美的交互动画,甚至还能做出一些简单的网络游戏,由于篇幅的关系这里只能介绍一些简单的入门技巧。当你熟练掌握了它的制作方法之后,再配合Dreamweaver 2。
0,便能真正体会到交互网站的神奇了。
三、Fireworks
评价 ★★★★
诞生于1998年的Fireworks虽然年少,但可以说开辟了一个几乎崭新的软件门类。如果说Photoshop、Painter赋予图形以活力,那么Fireworks 2。
0等于是给图形赋予了生命!
在做网页图形时常常会碰到这样的事,先用Freehand作图,再拿Photoshop编辑,如果要做动画还要再用Gifanimator,马上快完了吧,却又想起Gif图像还没压缩,又需要Smartsaver的帮助。
在这么多图像工具间相互切换,头不晕才怪!兴冲冲做完客户一句话:“这幅动画需要改一下”,完了,又要重做。想想这些可怕吗?反正我是不寒而栗。
传统的平面设计制作软件主要是针对静态复杂的高清晰度图像而设计的,可在网上制作一个小小的图标就要动用硕大的专业设计软件,你不觉得有点华而不实吗?如果你是单纯的网页设计制作人员,我劝你试试Fireworks 2。
0!
说了这么多它到底有多好呢,别急别急,听我慢慢道来。。。。。。
Fireworks是一款功能强大的web图像创作工具,不需借助任何外挂软件就能制作矢量图形和位图,并独立完成所有设计过程,它的主要特点如下:
1。
比较专业的矢量图形制作工具,支持矢量图形切换至位图编辑状态,不再有软件之间相互切换导入的麻烦,可以在对象模式与图像模式之间相互转换,提供了更大的制作空间。
2。支持很多Photoshop的位图编辑方式,如渐变、阴影、外发光、纹理等等效果,还内建了很多已经做好比较成熟的风格和特效。
更值得一提的是它同样支持Photoshop的各种插件,使它的发挥空间更为广阔。
3。目前为止最最专业的动画制作软件,支持层和帧,支持“洋葱皮”(onion skinning)功能和帧间过渡(tweening)。
选择Gif图像优化可针对每一帧做出不同的优化,使Gif图小巧而完美。
4。值得一提的是Macromedia公司为Fireworks独创的PNG图像压缩格式,不但压缩比率极高而且属于无损压缩,并能保存编辑时的所有信息,在任何时间都可以进行修改和编辑以便于更新。
5。既然是一家人,Fireworks与Dreamweaver当然属于无缝集成,这样你就可以边做网页边修改图形,使得所有工作在一个平台上完成,这在以前是想也不敢想的。
6。听说过用作图工具生成HTML和Javascript吗?Fireworksc 2。
0就可以,这就是我前边为什么说Fireworks开辟了一个几乎崭新的软件门类的原因。它可以将分割后的图形自动用HTML代码再拼合起来,还可以制作图像映射(Image map),更厉害的是它能制作复杂的鼠标经过(rollover),自动生成Javascript。
由于篇幅关系这里就不再举例说明使用方法了,不过要告诉你的是学习Fireworks 2。0其实很容易,只要认真看看它的HELP再花上一天时间练练就可以了。什么?HELP当然是E文了,(啊。。
。谁放的香蕉皮!!!)
上边说了那么多,大家感觉怎么样?这三个软件身出一家,都有着共同的优点,易学易用、小巧玲珑、功能强大、技术新颖……俗话说 得好:宝剑衬英雄!只要熟练掌握了这三件利器,你的网站会做得让别人目瞪口呆(夸张点……呵呵)。
好了,别在这儿发呆了,回去好好练练吧,下一次见了你可别让我瞧扁了哦…瓆。收起