给网页文字加上即时提示.doc

给网页文字加上即时提示提交者: gipsky 日期: 2009年05月08日 05:47:09 阅读: 6 摘要:（略）即时提示是Windows应用软件的一种富有人情味的特色设计。当用户不知道一个文字或图片按钮的功能时，只要把鼠标移动到这个按钮，就会出现一个即时提示短语。在制作网页时,同样可以借助HTML语言给网络文档加上即时提示功能。我们在开发英语网络教材时，就利用了即时提示功能给每个生词加上中文注释。在本例中，对初三英语课文中的“Christmas is an important festival in Britain and many other parts of the world.”一句中的生词Christmas、festival、Britain分别加上注释功能，当用户将鼠标移动到这些单词上面时，就会在鼠标的旁边显示相应注释。那么，在网页中如何实现这种即时提示功能呢？下面介绍两种实现方法：在鼠标旁边显示即时提示信息这种方法是巧妙地利用HTML语言提供的标题元素TITLE./TITLE。在新的HTML 4.0规范中，TITLE./TITLE可以支持几乎所有的元素，在本例中是将它与行内元素SPAN./SPAN配合使用。SPAN./SPAN元素是HTML 4.0规范新增加的通用行内容元素，在本例中利用它将要设置提示信息的单词隔离开并分别设置各单词的TITLE属性。实现的源代码如下：!DOCTYPE HTML PUBLIC -/W3C/DTD HTML 4.0/ENHTMLHEADTITLE网页即时提示演示 /TITLE!STYLE元素定义顶级元素BODY与行内元素SPAN的样式STYLEBODY cursor:defaultSPAN background-color:yellow/STYLE/HEADBODYH3Unit 14 Lesson 54/H3P!用行内元素SPAN将各个要设置提示的单词单独括起来并用TITLE元素设置提示信息!本例中要设置提示信息的单词分别为Christmas、festival、BritainSPAN TITLE=Christmas-n.圣诞节Christmas /SPAN is an importantSPAN TITLE=festival-n.&adj.节日(的);喜庆(的)festival /SPANin SPAN TITLE=Britain-n.英国;不列颠Britain /SPAN and many otherparts of the world./P/BODY/HTML在窗口状态行显示提示信息在上例中，提示信息是出现在鼠标旁边。但如果要将提示信息都显示在浏览窗口的状态行，那该怎样实现呢？在本例中实现的方法是将各个要设置提示信息的单词都用超链接元素A./A设置成超链形式，并在各个链接的onMouseMove与onMouseOut事件中相应设置窗口WINDOW的STATUS属性值（表示状态行）。实现的源代码如下：!DOCTYPE HTML PUBLIC -/W3C/DTD HTML 4.0/ENHTMLHEADTITLE网页即时提示演示 /TITLESTYLEBODY cursor:default/STYLE/HEADBODYH3Unit 14 Lesson 54/H3P!用超链元素A./A将要设置提示信息的单词分别设成超链形式!HREF元素的值设置为javascript:void(null)表示该链接为空链接,不链接到其他地方!onMouseMove事件设置鼠标移动到该链接时的提示信息!onMouseOut事件设置鼠标离开该链接时的提示信息为空白，即将提示信息清除!window.status=某个字符串表示在状态行设置提示信息A HREF=javascript:void(null)onMouseMove=window.status=Christmas-n.圣诞节onMouseOut=window.status= Christmas /A is an importantA HREF=javascript:void(null)onMouseMove=window.status=festival-n.&adj.节日(的);喜庆(的)onMouseOut=window.status= festival /A inA HREF=javascript:void(null)onMouseMove=window.status=Britain-n.英国;不列颠onMouseOut=window.status= Britain /A and many otherparts of the world./P/BODY/HTML笔者拿到Fireworks MX 2004试用版的时候，我粗劣的看了看新功能，让我惊奇的发现在Effects（效果）面版上增加Motion Blur（动态模糊）和Add Noise（添加杂质）两种滤镜。今天，我们将熟悉这两种新增加滤镜做一个下雨效果。首先，用Fireworks MX 2004打开该图片，图片层上新建一个和图片一样大小的矩形，fill填充为黑色，stroke为Nonescreen.width-333) this.width=screen.width-333 border=0 twffan=donescreen.width-333) this.width=screen.width-333 border=0 twffan=done第2步选中填充后的矩形层，打开Properties属性面版，然后我们在Effects（效果）面版增加Add Noise（添加杂质）。Amount设置为55 ，勾掉Color选项。screen.width-333) this.width=screen.width-333 border=0 twffan=done在添加Motion Blur（动态模糊）滤镜，Angle角度为120，Distance距离为10左右。这里主要是调整下雨时雨的方向和大小。screen.width-333) this.width=screen.width-333 border=0 twffan=done第3步，在矩形层上的模式，我们设为Screen就完成这个简单的实例了，我们赶快看看做好的效果吧！screen.width-333) this.width=screen.width-333 border=0 twffan=donescreen.width-333) this.width=screen.width-333 border=0 twffan=done_e:dosutilsrawriteEnter disk images source file name: imagesboot.imgEnter target diskette drive: a:please insert a formatted diskette into drive A and press Enter或者# dd if=boot.img of=/dev/fd0 bs=1440K另注：boot.img基于光盘安装，bootnet.img基于网络安装，pcmcia.img和pcmciaadd.img基于PCMCIA引导盘的安装。rawrite工具只接受8.3类（短文件名.三扩展名）！在安装的时候我错过了制作启动盘，制作bootdisk方法。命令uname -a可以让你看到你的系统内核版本是多少，一般表示为kernel 2.x.xx-xx，然后你可以把一张空白的（当然，有数据资料的也可以，呵）软盘放到软驱里去，千万不要习惯地mount上软驱哟！直接打命令 mkbootdisk ?device /dev/fd0 2.x.xx-xx 就可以了。Linux操作系统下安装Perl脚本语言的方法提交者: overflow 日期: 2008年06月23日 22:45:17 阅读: 30 摘要:/Linux和perl都属于自由软件，将二者结合真是妙不可言。 遵循以下步骤一般就可安装好 perl ，perl 就能在 linux 下欢唱。 1 取得最新版本的 perl，当前版本为 5.6.0,即 stable.tar.gz。 2 解文件包： gunzip stable.tar.gztar xvf stable.tar得到目录 perl-5.6.0 3 在目录 perl-5.6.0 下安装 perl： rm -f config.sh Policy.shsh Configure -demakemake testmake installconfig.sh Policy.sh 为以前安装时的配置文件，新安装或升级安装时需要将其删除。 sh Configure -de 安装使用默认配置，一般而言将会 ok 。 安装完成后 perl 所在目录为 /usr/local/lib/perl5, perl 执行文件在 /usr/local/bin 中。 4 关于 .html 文件 安装 perl 时不能自动安装 .html 文件， 在 perl-5.6.0 目录中有一个installhtml 文件， 执行 perl installhtml -help 可得到使用帮助，使用installhtml可将 .pod 及 .pm 文件编译得到相应的 .html 文件文件， 它的具体使用请自己看。 下面是我所写的一个具有类似功能的程序。 simple_find(5.6.0);# 含 .pm 文件的源目录use Pod:Html;sub simple_find$sourth=/usr/local/lib/perl5/5.6.0html/; #含 .html的目标目录my ($input)=_;my $file;$ddir=$sourth.$input;$cont=file $ddir;if ($cont !/$ddir:sdirectory/)mkdir $ddir;opendir(md,$input);my file=readdir(md);closedir(md);pfile= grep(m/.pm/,file);mydfile= grep(!m/.pm/,file);dfile=grep(!m/./,dfile);foreach $pfile(pfile)$pfile=/.pm/;$dfile=$;$sfile=$input./.$pfile;$dfile=$sourth.$input./.$dfile.html;pod2html(-infile=$sfile,-outfile=$dfile);foreach $file(dfile)$vale=$input./.$file;$cont=file $vale;if ($cont=/$vale:sdirectory/)simple_find($vale);使用以上程序得到一个与源目录结构一致的目标目录，包含相应的. html文件。 注：使用以上两种方法都会产生不能转化某行类错误，其实它无关大局，可以忽略。 5 模块安装 gunzip Module.tar.gztar xvf Moudle.tar转到相应目录 perl Makefile.PLmakemake testmake install安装完成后模块在 /usr/local/lib/perl5/site_perl 目录中， . html文件不能自动安装，需使用前面介绍方法进行安装Dreamweaver技巧十二招提交者: 巴连加因 日期: 2009年05月08日 05:43:53 阅读: 6 摘要:（略）对想要在可视化的环境下制作复杂网页的专业网页制作者来说，Dreamweaver 已经渐渐在网页编辑工具市场中展露头角，成为专业人士编写网页的最佳选择。以目前的情况来说，Dreamweaver 内建的功能可说是越作越多、越作越丰富、齐备。在这里我要向大家介绍的4.0版本中的一些应用小技巧。1. 让网页页面更有弹性有些网页开发者称以下要介绍的这种技巧为 liquid，我在这儿则把这种技巧叫做是 stretchy（弹性延伸的技巧）。这是一种技巧，可在访客浏览器窗口大小改变时也随之调整网页页面大小，因此若是窗口过大就不会有空白处、窗口过小边缘就不会跑出上下移动的拉Bar.其实大多数简单的网页会自己随着浏览器窗口大小来调整页面大小，但是若是网页里用到很多不同的框框及表格，网页页面大小就很难自动弹性地调整。通常网页设计者会用混合运用固定栏宽的框框，和 GIF 图档作为间隔， 来设计网页页面，这样一来不论是用 Internet Explorer 或是用，页面大小都会固定而不会跑掉。用 Dreamweaver 4.0 可以轻而易举的设计出会自动弹性调整的网页。要怎么做呢？用工具面版（Object palette）上的按钮开启网页，并且转换到 格式检视（ Layout vIEw）。这时可以看到文字方块的列宽， 每一列的方框上方中间还有一个小小的下拉式箭头 ，选择想要设定弹性显示的列上方的小箭头，接着选择将列设为弹性显示（ Make Column Autostretch）。 （设定自动调整列宽以一列为限）这时该列方框上方就会出现一条波浪形的线，而不是原本表示列宽的数字。 Dreamweaver 会自动制作出固定版面的空格图文件，这个空白图文件是以列上方的两个长条形的空白表格表示，如此版面会自动被填充，才会完成弹性版面设定。（在第一次增加空白图文件时会跳出一个对话框问你是否要使用内建图档，为求效果，我建议你让 Dreamweaver 自动产生一个，不然就不用使用空白图文件来填充版面。）2. 创造个性化调色盘Dreamweaver 4.0 新的 Assets panel（属性控制面板）是一种可以在编辑网站时根据档案型态，例如图片、样板等来管理档案的新工具，当你定义新站台时（选择Site . New Site），所有类型的组件会自动增加到 Asset panel 里的适当表框中。这个加入新的Assets panel属性控制面版里也有颜色框，储存你网站里所用到的所有色彩，包含文字的颜色、背景的颜色，以及连结的颜色等。这是一个为使用者量身定做的网站导向颜色盘。只要激活 Assets panel （先选择 Window . 再选择 Assets），接着选择左方那个小小的色彩滚动条，就可以看到你网站里各式各样的颜色选项。当然你可以将这些颜色拉到某些特定选取的文字中。甚至当你选择某种颜色时，画面上会出现这种颜色的十六进制值的色彩浓淡度，和三色对应码（RGB）。如果想将调色盘工具列缩小一点，甚至可以仅加入某些颜色到调色盘的收藏夹里。只需将选取的颜色反白、选择窗口里一个叫做添加到我的收藏夹按钮（最下方靠右的按钮），就完成了。3. 制作弹出式选单导览系统原本要制作弹出式选单导览系统（Pop-up Menu Navigation System）要用到好一些 JavaScript 的语法技巧，但是若你装了Dreamweaver/Fireworks Studio，轻轻松松即可快速办到。首先在 Fireworks 里开始，选择某个图片， 然后在 Set Pop-Up Menu的对话框里选择 Insert. Pop-Up Menu，你可以输入项目（items）的名称并选择 Plus （加入）按钮，来新增该项目。你可以继续在跳出来的讯息框里进行细项设定，例如设定该项目所要用的文字及连结，当然也可以新增子选单、并重新安排下一层的设定。完成时，选择 Next （下一步），继续设定偏好值，例如颜色、字体等等。这时选单完成后，可以预览 HTML 语法，也可预览影像。再选择 Finish （完成）。这时当鼠标移动到原来的图案时，会出现选单系统的内容一览。 接着将制作好的档案汇出时， Fireworks 会自动生产出所有 Dreamweaver 需要用到的 HTML、JavaScript，以及影像档案。4. 让图档动起来！如果你同时安装有 Dreamweaver/Fireworks Studio，这两种产品搭配的完美程度将使你赞不绝口。即使你不是专业的图档设计者，在设计网页时也多多少少想把一些 GIF 图片文件修改得活灵活现。Dreamweaver 可以让你制作动画不求人喔！在标准窗口里选择要进行修改的图片，然后在 Property Inspector 里选择编辑钮（Edit）。如果你安装的 Dreamweaver里附有 Fireworks， Fireworks 就是 Dreamweaver 预设图片编辑器，这时图片就会自动加载到 Fireworks.（若仔细看，各位会发现 Fireworks 的画面会出现 Editing From Dreamweaver 这样的文字和图样，指示你可以由Dreamweaver 里进行图片编辑。） 好了，现在在 Fireworks 里选择要编辑的图片，选择 Modify .Animate .Animate Selection. 接下来完成 Animate dialog box 里的设定，选定动画的框架数，动画移动的方向、透明度等等设定。你也可以选择 Frames 工具列设定移动速度，选择 Object 面版来改变设定。要汇出档案时，只要选择 Optimize 工具列，在档案类型的地方选择 Animated GIF.完成以后，Fireworks 就会自动将图片以最佳化设定汇出，并且自动将 GIF 图档更新，还会在 Dreamweaver 里将更新过的图档秀出来。选择 File .Preview in Browser，这样就可以在浏览器里预览刚刚制作完成的可爱图档！5. 让按钮有闪动效果在 Dreamweaver中，不用有 Flash 程序，也可以制作有闪动效果的 Flash 按钮对象。 4.0 版内建有好几个 Flash 按钮对象，可以制作好几个不同形式的按钮。选择 Insert .Interactive Images .Flash Button 就可看到有哪些内建按钮。在对话框内甚至可以用鼠标指到想要使用的按钮形式，然后看看在浏览器里的效果如何。用鼠标光标把要用的按钮形式选起来，再依序输入参数，例如按钮上的文字、字形、颜色、连结等，或是自定文件名称。按 下OK.接下来就会有一个 SWF 档产生，档案并会自动置入你的网页中。按一下这个做好的档案，会看到 Property Inspector （属性明细）中会秀出档案的属性。将档案属性秀出来时，如果扩展档案属性明细表，会出现 Play （播放）钮，选择之后可以不用开启浏览器来预视按钮的闪动效果。6. 制作流动文字在网页中增加 流动文字就像增加我刚刚介绍的 Flash 按钮一样简单。相同地，不用安装 Flash，用 Dreamweaver 4.0 提供的新功能就可以轻松办到。常用 HTML 语法写网页、没有交互式媒体经验的网页制作者也可以轻松制作出小巧的 Flash 形式的流动文字。根据 Macromedia 表示，有97%的网络使用者可以观看有 Flash 效果的网页，因此这项新功能可以在不添加兼容性麻烦的情况下为网页增添一些浏览上与读者的互动性。选择Insert .Interactive Images .Flash Text，再将偏好设定一一填入（例如要变更效果的文字、字形、字体颜色及字体大小等等）。7. 更改键盘快速键Dreamweaver 可让使用者自定使用接口，这项设计十分有弹性。举例来说，使用者可以通过撰写程序（programming）或自行增加对象（object）的方式来更改选单。不必功力高深，你就可以更改键盘快速键，因为 Dreamweaver 有一项叫做Keyboard Shortcut Editor的图形接口，只要选择 Edit .Keyboard Shortcuts，对话框将加载并列出可以更动的快速键一览表，让你把快速键改成自己习惯用的设定值。要更动快速键，只要使用现行设定（Current Set）和指令列（Command）的下拉选单，在现有的指令中找到想要更改的指令，接着选取目前的快速键，就会出现在快速键的列表中。另外，若要增加快速键设定，可以选择 Plus 钮、在键盘上敲入你想使用的新快速代表键，选择变更（Change）即可。同时你也可以选取某快速键、选择移除键（Minus ），就可以移除某个快速键。8. 重新设定网站窗口（Site window）列宽只要从 Site window 中选择View .File View Columns ，就可以自定检视网站 （Site view）时列宽的大小及呈现方式。选取一列宽的名称，使用上下箭头重新调整，或不要勾选显示字段（Show field）以隐藏该列。另外，选择 Plus 钮也可以新增列，并自创列名。此外，你也可以借着在下拉式选单中选择现有的 note 来将列和 Design Note 产生关连。9. 阅读网页原始档当你开启 OReilly Code Reference（Window .Reference）来检查属性或是浏览器的兼容性时，预设的窗口会以细小的字型显示出参考设定值。但是若你按下窗口右上方的右键钮（就在关闭按钮的下方），就会出现一排下拉式选单，可以在这边选择原始文件字体的大小（小型字，到中型字体以及大型字体）。选择大型字体比较不会虐待眼睛，因为这样你看 HTML 原始档时就不用拿着放大镜看屏幕了！10. 新增 Flash 按钮在上面我已经教你如何用20种预设的按钮类型，来制作 Dreamweaver 里的 Flash 按钮。这是不用另外安装任何档案或程序的方法。底下有另一种方法，就是安装Fireworks buttons，这种扩充功能和技巧五有相同效果。到 Exchange for Dreamweaver（Dreamweaver 扩充功能交换中心） ，输入InstaGraphics Extensions for Dreamweaver 的关键词搜寻，然后再下载这个 577K 的档案。转换到 Dreamweaver，选择 Commands .Manage Extensions，再选择 File .Install Extension，就可以开始安装。一旦重新激活 Dreamweaver，就有六个新奇有趣的按钮型态，包括 Surfboard 及 Bulletbar 在内， 这时只要使用 Insert .Interactive Images .Fireworks Button 指令，就可以制作出一个酷炫的按钮。你也可以用 commands .Convert Bullets To Images 及 Commands .Convert Text To Images，上述两种方法都可以自动执行 Fireworks.11. 在网页中加入设定成收藏夹功能在 Exchange里搜寻，你就可以发现 Add To Favorites的扩充功能。这个小小的档案才占 3K ，下载时间不会等太久，接着循相同步骤，由 Extension Manager加载 （Commands .Manage Extensions， File .Install Extension）。接着重新激活 Dreamweaver，这个新加载的扩充档案会在 Dreamweaver 里新增一项功能。如果你的中网页加入这个加入收藏夹的功能，这样一来网络使用者逛到你的网站时，轻轻一按，就可以轻易地将你的网站加入他使用浏览器的收藏夹（或是个人书签）。此外，你也可以自定收藏夹快捷方式名称，以及收藏夹快捷方式名称前中会出现的小图标（一般 IE 中收藏夹的快捷方式前面的小图标都是 IE 的默认值，若你有自己设计的小图标，那就酷多了。注意啦，这项功能只支持用 IE 4.0以及更高版本的浏览器。只要选择 Windows 选单里的Behavior 面版，再到 IE 功能下拉选单那儿选择此项功能，即可轻松激活此酷炫功能。12. 超酷的图表如果你想制作表格，还要自己花时间再逐字敲打网页原始码吗？不需要了，已经有现成的啦！到 Exchange下载 Form Builder extension，就有现成的表格，可让你马上复制包含像国家、性别、婚姻状况、年龄层及其它目录等的字段表格。到 Exchange下载这个小巧（只有11K） 的档案，然后经由 Extension Manager 安装进来（Commands .Manage Extensions， File .Install Extension）。然接着只要重新激活 Dreamweaver，选择Insert .FormBuilder，就会在（Insert. FormBuilder ）中发现扩充档。选择了之后这时会有一个对话框出现，会秀出所有可以套用的格式选单。怎样设计首页？(解答)提交者: overflow 日期: 2009年05月08日 05:43:40 阅读: 5 摘要:（略）设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现640*480像素，800*600像素，1024*768像素等不同尺寸。布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。你可能注意到：“最适合”是一个不确定的形容词，什么才是最适合的呢？抱歉的是阿捷不能也不可能给您一个完整的正确的答案。就好比有人希望知道成功的秘诀是什么，成功者只能建议您用什么方法，什么途径才能最容易获得成功，而不可能有一步成功的秘诀告诉您。我们在设计思考系列文章第四篇讲过站点整体的创意，版面布局也是一个创意的问题，但要比站点整体的创意容易，有规律的多。让我们先来了解一下版面布局的步骤：一。草案新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，你可以尽可能的发挥你的想象力，将你想到的景象画上去（我们建议您用一张白纸和一支铅笔，当然用作图软件Photoshop等也可以）。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，最后选定一个满意的作为继续创作的脚本。二。粗略布局在草案的基础上，将你确定需要放置的功能模块安排到页面上。（注：功能模块我们在首页设计-引子中提过，主要包含网站标志，主菜单，新闻，搜索，友情链接，广告条，邮件列表，计数器，版权信息等）。注意，这里我们必须遵循突出重点、平衡谐调的原则，将网站标志，主菜单等最重要的模块放在最显眼，最突出的位置，然后在考虑次要模块的排放。三。定案将粗略布局精细化，具体化。（靠你的智慧和经验，旁敲侧击多方联想，才能作出具有创意的布局。）在布局过程中，我们可以遵循的原则有：1、正常平衡亦称匀称.多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。2、异常平衡即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。3、对比所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧、贫与富等对比。4、凝视所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。5、空白空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体显网页的格调十分有效。6、尽量用图片解说此法对不能用语言说服、或用语言无法表达的情感，特别有效。图片解说的内容，可以传达给浏览者的更多的心理因素。-(转载自广告大师樊志育广告制作)以上的设计原则，虽然枯燥，但是我们如果能领会并活用到页面布局里，效果就大不一样了。比如，网页的白色背景太虚，则可以加些色快；版面零散，可以用线条和符号串联；左面文字过多，右面则可以插一张图片保持平衡；表格太规矩，可以改用导角试试。经过不断的尝试和推敲，你的网页一定会亮丽起来的哦：）看看我们经常用到的版面布局形式：1.T结构布局。所谓T结构。就是指页面顶部为横条网站标志 广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母T，所以我们称之为T形布局。这是网页设计中用的最广返的一种布局方式。（图略）这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味.2.口型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。（图略）这种布局的优点是充分利用版面，信息量大（我的主页首页即属于这种布局）。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。3.三型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。5.