邮件订阅
5ucms仿站,Dreamweaver技巧50问
作者: 来源: 日期:2015/3/28 17:20:56 浏览量:76(滞后) 人气:LOADING...(实时) 【

5ucms仿站,Dreamweaver技巧50问    Dreamweaver一直是不少网友钟情的网页设计工具,除了它强大的动态效果制作能力外,方便简洁的操作界面更是独具特色,下面我们将以最新版本Dreamweaver4为例,并以提问的方式系统的介绍下,在设计过程中经常遇到的一些问题和技巧性的东西。
注意:为了方便,以下我们将Dreamweaver全部减缩为DW表示。

1> 在DW中,如何输入一个空格呢?

  输入空格的问题,在DW似乎已成了一个老生常谈的问题,我们可能在许多介绍DW使用方面的书籍或文章中看到过N次。

  DW中对空格输入的限制是针对“半角”文字状态而言的,因此通过将输入法调整到全角模式就可以避免了,方法是:打开中文输入法(以人工智能ABC为例),按Shift+Space切换到全角状态,现在应该没问题了。

  此外,你还可以通过许多“变通”的方法达到录入空格的目的,比如常用的是:

  直接在源代码中加入代表空格的HTML代码“ ”;输入一定长度的文字对象后,然后调整文字的颜色与当前的背景颜色相同等等,不过注意的是后者在一些浏览器中可能显示上有点问题。(呵呵,当时俺用的那个就是让王晨昀给看出来的!)

2> 如何在浏览器地址栏前添加自定义的小图标?

  你是不是记得有时在浏览网易网站的首页时,在地163前会显示一个“易”字样的小图标。而默认情况下,这个图标是一个IE浏览器的指定图片。如图:

  其实这也不是什么高深技术,只不过在网站目录下添加了一个特定文件而已。

  这时,我们需要预先制作一个图标文件,大小为16*16像素。文件扩展名为ico,然后上传到相应目录中。在HTML源文件“<head></head>”之间添加如下代码:

<Link Rel="SHORTCUT IC>

  其中的“SHORTCUT IC >加入“Target=_blank”。

  如果你的HTML比较差的话,在DW属性面板上同样提供了这个设置,当你在Link输入框中键入网址时,后面的Target下拉框同时也被激活了。如图

  选择最上的“blank”就可以了。

10> 如何让网页载入时,象许多商业网站那样,弹出一个广告窗口

  这在不少大型商业网站中,是时常见到的。在DW中可以轻松通过Behavior行为实现。

  既然是载入时,我们可以把整个网页内容视为事件对象。在DW编辑窗口中鼠标点击左下角的“<body>”标签,这时你能注意到全部网页内容已经选中了。

  单击“快速启动板”中的“Behavior”按钮,进入行为面板,如图:

  选择“Open Browse Window”项,这时你还可以对窗口样式进行自定义,比如大小,工具按钮的保留等等。另外还有一点就是别忘了对应的事件是“>

19> 如何设置可以关闭当前窗口的功能?

  这里我们可以先输入用来标示的文字“关闭窗口”,用鼠标拖动选中它,在“Link”输入框中键入“/”,同时切入源代码窗口,在链接代码中键入该事件->内容< /a>

30>如何改变状态栏里的提示文字?

  默认情况下,当网页被载入时,在状态栏里将显示该网页的地址等信息。想不想让它变的更有魅力呢?

  在DW“Behavior”行为板中,单击“+”号选择“Set Text Set”下的“Text Of Status Bar”选项,如图

  在“Set Text of Status Bar”窗口中输入类似“欢迎你光临本网站--网管留言”等Message信息。

31> 如何建立电子邮件的表单处理方式?

  表单应该是网页交互功能中必不可少的元素,表单的功能缘于信息的交互,因此表单的处理往往涉及到网络高级编程语言的使用,你或许说,哇!我不会编程呀!没关系,其实对于一些简单的表单内容处理靠电子邮件也可以实现。

先看下面的代码:

<FORM name="c acti ></FORM>

  上面是一个典型的表单的HTML源代码,其中METHOD决定采用方式,包括POST和GET两种。ACTION也就是咱们上面说的处理程序,一般可通过ASP/PHP/CGI实现。

  那么用电子邮件怎么实现呢?action=mailto:bjbenben@sohu,这样当点击提交按钮后,就会弹出一个提示窗口,如下:

  单击“确定”表单内容会发送到指定的邮箱中。

32> 怎样制作规范的电子邮件链接?

  所谓的“电子邮件链接”即是当我们点击它时,浏览器会自动调用默认使用的邮件客户端程序发送电子邮件。

  输入“有问题MAIL ME”字样,鼠标拖拉选中,切换到属性面板,在LINK输入框中键入如下命令:

Mailto: bjbenben@sohu?Subject=网友来信&bc=其他电子邮件地址&bcc=其他电子邮件地址。如图:

  其中Mailto为邮件链接的协议,Subject 为邮件的标题,bc是同时抄送的邮件地址,bcc代表的也就是暗送了。

33> 如何制作“空链接”?

  空链接也就是,没有链接对象的链接,在空链接中,目标URL是用“#”来表示的。也就是说制作链接时,只要在属性板的LINK输入框中录入#标记,它就是个空链接了。

  空链接的出现涉及到多方面的因素,比如一些没有定期完成的页面,又为了保持页面显示上的一致(链接样式与普通文字样式的不同),就可以使用它了。

34> 点击空链接时,页面往往重置到页首端,如何处理?

  在浏览器里,当我们点击空链接时,它会自动将当前页面重置到首端,从而影响用户正常的阅读内容,我们当然希望它能保持不动了。

  这时,你能够用代码“javas cript:void(null)”代替原来的“#”标记,回头看看,这个问题已经解决了。

35> 如何定制可自由在页面内跳转的链接?

  如果你经常在网上订阅一些免费的电子杂志,一定对这种“标签链接”不陌生了,通过一个类似目录的列表,可方便的跳转到页面内的任何部分,无疑它的使用是专门为“超长内容”网页设计的。

  先确定链接指向的位置,即屏幕跳转后停留的位置。进入“Object”面板的“Invisibles”部分,选中目标文本,单击“Insert Named Anchor”按钮,窗口如下


  在“Anchor Name”中键入标签名称,OK,这时在文本下面会自动出现红色虚线以区别开普通的文本内容,注意它们在浏览器中不会出现。

  然后就可以制作链接了,在属性板的LINK输入框录入“#nchor Name(刚才的名字)”。当然如果你想指向另外一页中的某个位置,也是可以的,把这个小尾巴放过去就行了。

36> 同时在一个图片上,作很多个链接,怎么办?

  这个问题也就是我们平常说的“图片热点”(Image HOT)了,当然在DW里还有另外一个名字叫“图象热区域”。

  选中图片,这时在属性面板左下的位置,有一个“Map”工具栏,其右边是三个用来圈定不同区域的按钮,如图

  以其中的矩形工具为例,选中后,鼠标停留在图片上会以一种“+”的形状显示出来,代表可以左右拖拉,完成后如图:

  依次你可以完成多个热点区域的链接制作。注意各区域不可重叠。

37> 怎样制作可以响应鼠标事件的翻转图片?

  在许多网页中,我们经常会看到一些栏目标题,当鼠标滑过时,能变成另外的样子。其实它们中很多是通过两张不同的图片来实现的,也就是所谓的“翻转图片”效果。

  当然首先你要提前准备两张大小完全一样的图片,以确保翻转时不会有什么视觉上的不适,单击“Object”面板上的“Rollover Image”

  弹出“翻转图片设置”窗口,如下:

  分别单击“Browse”按钮确定“Original image”和“Rollover image”的地址,注意一定要选中下面的“Preload Rollover image”复选框,否则在鼠标滑过的瞬间,会产生一定的下载延迟而影响效果。

38> 如何制作“漫天飞舞”的图片?

  在许多大型商业网站的首页中,你经常会看到不少来回飘来飘去的广告图片,点击后可以链接到指定的地址,在DW中这点是通过Timelines来实现的。

首先在网页中插入目标图片,同时选中它,单击快速启动板中的“Timelins”按钮进入“时间线”窗口,如图:

在时间轴1frame的位置鼠标右击,选择“Add Object”,这时时间轴上会出现一兰色色条(默认1-15frame),将镜头停在15frame处,同时移动页面内图片到运动的终点位置。

现在一个简单的运动动画已经完成了,你可以通过在中间添加keyframe的方法调整路径的曲折度。单击上方的右箭头按钮预览效果。

39> 怎样制作在页面中“静态悬浮”的图片?

所谓的“静态悬浮”也就是图片总是试图停留在网页中的某个位置,因此在视觉上有种跟着页面“走”的感觉,象悬浮着一样。

该效果的实现是通过javas cript来完成的,一般要求有一定的编程能力。好在DW提供了制作该效果的固定插件,因此就显得简单多了。

首先你必须先下载stav插件,http://51step/download/dwplugbe/stav.zip,解压缩将里面的两个文件(其中包括图片文件Cross Browser Static Division.gif和网页文件Cross Browser Static Division.htm)都拷贝到DW安装目录Configuration\Objects\Common下。

重新启动DW,在Object(对象)面板中,你会看到最底部已经多了SI项,选中它在弹出的窗口中设定浮动层到上边和左边的距离,然后在图层中插入指定的内容(这里为图片)即可。

40> 如何使文字和图片内容共处?

  我们都知道,在DW中,图片对象往往是独占一行的,那么文字内容只能在与其平行的一行的位置上,怎么样才可以让文字围绕着图片显示呢?

  选中图片,在属性面板的右上方你能看到一个“Align”的属性选单,如图

  选择“Left”,这时你会发现文字已经均匀的排列在图片的右边了。

41> 实现多个窗口的连接?

  面板设计一直是DW的一大特色,到了DW4版本,所用到的面板已经相当多了,那么我们如何才能更高效的利用它呢?

  “窗口连接”就是一种方便大家自定义的技术功能,简单的说,就是可以根据需要将两个或更多个面板放到一个窗口中来。

鼠标点击拖动一个面板的Tab栏到两一个面板上,当你看到一个黑色边框时,松开鼠标,这时两个面板已经合二为一了,操作如图:

42> 如何在网页中隐藏一些内容?

  在网页设计中,有时我们需要在里面插入一些不要求显示出来的内容,比如流量统计系统,用户访问分析系统等等,这时就要考虑如何把他们隐藏起来,当然还有个前提就是,它们的存在不会影响其他网页元素的布局。

  单击“Object”面板中的“Layers”按钮,鼠标拖动创建一个新的图层,将需要隐藏的内容全部放进去,如图:

  单击图层左上的小方框,标定它为选中状态,同时切换到属性面板,将Vis值设定为“Hidden”,如图:

  哇!所有的内容真的已经不见了

43> 怎样创建一个简单下拉菜单?

  下拉菜单是网页中再常见不过的了,由于它可以极大的节省网页空间,因而主要应用在需要进行多对象罗列的场合,比如友情连接列表,合作网站地址等等。

  DW中提供了一个再简单不过的制作方法,这样我们就不用写那些枯燥的代码啦!

进入“Object”面板的“FORM”部分,如图:

  单击“Insert Jump Menu”按钮,弹出“下拉菜单”设置窗口:

  在“Text”中输入菜单项的名称;“Go To URL”中键入网址或使用“浏览”按钮选择。单击最上的“+”号可进行新菜单项的录入,所有项目都将在“Menu Items”中显示出来。

44> 如何制作一条宽度为1的细线?

  在DW中,尽管水平线是以“Line”形式出现的,但在制作细线时,它表现的并不尽如人意,主要是过粗,没有需要的细腻感!

  那么我们可以采取变通的方法以表格的应用来实现。

  在网页中插入一个1行1列的表格,将表格的“cellpadding”“cellspacing”都设置为“0”,同时将单元格的“bgcolor”设定为红色,当然你也可以使用其他的颜色来代替,“Height”设定高度为1。

  还有最关键的一步,查看源代码,将<td></td>中的“ ”去掉即可。

45>如何制作一个边框为1的方格?

  很明显,我们现在还是要通过表格的设置来完成。

  或许你会说,这还不简单嘛!建立一个1行1列的表格,然后将它的“Border”值设为1不就可以了。实际上,用这种方法制作的表格根本不是所说的边框为1的方格,而是要“粗”的多!

  同样先插入一个1行1列的表格,将表格的“border”、“cellpadding”设置为“0”,“cellspacing”设置为“1”。设定表格的“bgcolor”为红色(即为边框的颜色),同时设定单元格的“bgcolor”为白色(即同背景色),OK了。效果如下:

46> 怎样设置根据不同的浏览器,返回不同的页面?

  浏览器不同,它所支持的技术和效果也不同。因而我们所设计的网页并不是在所有的浏览器中都能正常显示或最佳显示。这时一个判断浏览器的跳转就很必要了。

当用户用不同类型或版本的浏览器打开时,可以返回不同的页面,以保证用户的正常浏览。

  单击快速启动板中的“Behavior”按钮,点“+”号,在下拉列表中选择“Check Browse”,窗口如下:

  按照不同的类型依次设置即可。

47> 网页中可以随便拖动的对象是怎么建立的?

  访问网站时,经常能见到不少可以用鼠标拖动的元素,其中以图片居多,比如,一张广告图片挡住了你想浏览的内容,你完全可以用鼠标选中把它扔到一边去!

  制作这种效果是通过图层的“Drag Layer”行为实现的,单击Behavior面板中“+”号,选择“Drag Layer”,当然之前你必要保证目标图层处于选中状态,进行简单设置后就OK了。

48> 如何为网页添加一个外部的风格样式表(CSS)

  风格样式表有内部,外部之分,前面我们对网页元素进行直接修饰的设定都属内部之列。外部CSS引用是通过<LINK>标签实现的。

  <LINK>标签包括HREF;TYPE;REL属性设定。其中HREF:用来标定风格页文件的地址URL;REL:标示CSS的可选性:stylesheet/altermate;TYPE:用于标示风格语言类型:text/css。

49> 设定网页的Base(基地址)有什么用途?

  在“Object”面板的“Head”部分里有一个叫做“Base”的按钮,它就是用来设定网站基地址的,那么所谓的“基地址”究竟有什么作用呢?

  大家都知道,在DW中我们使用的链接方式都是相对的,而不是绝对的,也就是说只要改变了根地址,所有的指向也将跟着自动变化,这样的好处就是可移植性强。

  然而,有些时候我们恰恰需要它不变化,即强制它使用固定的地址,单击“Base”按钮,如图:

  在“Href”中键入基地址的URL,单击“确定”有效。

50> 如何精确的定位网页中的内容?

  这是一个说明性的技巧问题,因此我们把它放在了50问的最后来讲。以目前而言,DW网页内容定位主要是通过表格和图层两者实现的。

  表格主要是通过各个单元格来完成不同内容的布局,由于在网页中,我们可以完全把表格“虚化”(调整为浏览下不可见),因此使用起来很方便,另外一个优点就是表格不论对什么浏览器都是通用的,没有技术支持上诟病。

  相对而言,图层用起来就更加随意了,你可以根据需要任意的拖拽它。唯一的一点就是层只有在新版本的浏览器中才支持,不过依目前来看,应该也没什么障碍了!


无忧CMS,5ucms.org建站仿站首选!

本站推荐: 5ucms模板下载 5ucms插件下载 仿站联系Q3876307       [复制给好友] [打印] [关闭] [返回] [顶部]
上一篇:5ucms培训,不要跳转或刷新 实现网页区域选择显示
下一篇:5ucms插件,Dreamweaver技巧十二招
本站声明:本网站所载文章等内容,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权及其它问题,请在30日内与本网联系(Email:3876307#qq.com),我们将在第一时间删除内容。若原创内容转载请注明出处。
5ucms仿站,Dreamweaver技巧50问的关键词:
评论信息
相关分类
本周热门
本月热门
关于我们 - 版权/免责 申明 - 建站服务 - 网站地图 - 稿件投递 - 联系我们 - 5ucms
Copyright © 2008-2015 www.5ucms.org