文章列表
 
您正在查看 "网页设计与平面设计软件" 分类下的文章

2007年01月26日 星期五 13:23

有的时候,我们经常需要把客户信息等一些资料发布到网上以便联系,但是随着客户资料的越来越多,网上更新是越来越力不从心,这该怎么办?其实,除了用asp、php等这些后台语言来实现快捷更新外,Dreamweaver本身就提供了数据导入与排序的方法,这对不懂后台的朋友来说绝对是个大大的福音,Dreamweaver从版本3到最新的MX一直都保留了该功能,可见它的实用之处。下面我们就来见识一下它的功效究竟如何。 

    注:本文以Dreamweaver MX为例

    1、例如我们现在手头有个kehu.txt文件,里面是**公司客户联系单,详细信息如下所示:

    姓名,性别,职位,电话
    李明,男,A公司技术人员,87185900
    李岩,男,B公司经理,80226888
    王强,男,C公司总工程师,83546790
    苏林,女,D公司营销人员,87556341
    陈东东,男,E公司项目主任,87436588

    可以看到,这里面的每项都用逗号进行了分离。

    2、(1)打开DW MX,新建一个html页面,选择菜单栏insert/table objects/import tabular data这项。

按此在新窗口浏览图片
图1

    (2)出现import tabular data窗口,单击“Browse…”按钮,选择存放数据的文本文件,在Delimiter该项中要和文本文件里的分隔符相对应,因为kehu.txt文件里用的是逗号,所以选择了Comma,其它各项可根据各位需要进行选择修改。

按此在新窗口浏览图片
图2

    (3)最后点击“OK”,一张包含文本文件数据的表格就呈现在了你的面前。

按此在新窗口浏览图片
图3

    3、(1)虽然表格是做出来了,不过有时我们需要对表格中的数据进行排序,这DW当然也想到了,先选中表格,然后选择菜单栏commands/sort table。

按此在新窗口浏览图片
图4

    (2)出现sort table窗口,sort by项选择column 1,order项选择按字母排序Alphabetically和升序排列Ascending,其它各项各位可参照图5根据需要进行选择。

按此在新窗口浏览图片
图5

    (3)单击“OK”,这样就完成了对表格中列1的排序,列1中的姓名均以拼音字母大小来进行了升序排列。

按此在新窗口浏览图片
图6

    4、(1)现在,我们效果和排序都出来了,最后要做的就是对表格的美化,爱美之心人皆有之,表格也不例外呀,除了自己手动美化外,DW也专门提供了十七种样式供你选择。与sort table类似,先选中表格,再选择commands/format table项。

按此在新窗口浏览图片
图7

    (2)出现format table窗口,左上角有各样式,可根据你的喜好来选择,因为其余各项都是傻瓜式的操作,在这里就不一一介绍了,只是对最后一项强调一下,该项是询问你是否把各样式代码添加到TD标记里而非默认添加到TR标记中,在这里笔者建议你不要勾选,否则会生成比默认设置多得多的代码。

按此在新窗口浏览图片
图8

    (3)单击“OK”,大功告成,最后生成的效果图如下,怎么样?简简单单的几步就能做成这样,原本需要用后台编程才能实现的功能,用DW就轻松搞定了,它的强大之处也正是在于此。 

 
2007年01月26日 星期五 13:22
一、从外部文档中粘贴时,如果只要文字而不想要其格式,可以使用“Edit→paste as text”命令,不要直接用Ctrl+V。 

  二、当有浏览者使用Netscape浏览页面时,在改变窗口大小的时候页面会花掉。在制作网页时就应该考虑到这个问题,可以通过点击“Command→Add/Remove Netscape resize fix”来加以解决,它可以使在Netscape中浏览页面时,改变窗口大小的时候页面不会花掉。 

  三、仅仅拷贝文字。当我们从Dreamweaver中拷贝文字到另一个应用程序的时候,HTML代码和文字一起被拷贝过去了。一般我们都用快捷键Ctrl+C来拷贝, 如果在拷贝的时候多按一个“C”键则只拷贝选中的文字。 

  四、在Dreamweaver中输入空格是一件令人很头痛的事。如果你按下面的方法操作就会简单多了:先将“中文输入法”转换成全角状态,然后同时按下键盘上的Shift+Ctrl+space就可以插入一个空格(可以连续输入)。 

  五、library组件和template模板不用上传服务器,就可以正确预览使用了该组件或模板的页面。 

  六、不要在同一个页面同时使用表格和层来布置,在Netscape中会导致混乱,从属关系除外。 

  七、一次链接到两个网页。我们都知道超级链接一次只能连到一个页面。如果你要想一次在不同的框架页中打开文档,可以使用“Go To URL”JavaScript 行为。打开一个有框架的网页,选择文字或图像,然后从行为面板中选择“Go To URL”。你会注意到Dreamweaver会在“Go To URL”对话框中显示所有可用的框架。选择其中一个你想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。 

 
2007年01月26日 星期五 13:20
经常在网上冲浪的朋友是否曾注意到有些网站的鼠标不是规则的斜向上箭头的形状,而是十字形,或者是向左的箭头,或者是个问号等等。当你想在网页的不同位置让鼠标显示不同形状,以体现不同的功能区;当你想让你的网站体现与众不同的风格时,考虑一下在鼠标样式上下功夫吧。其实鼠标样式的用途还是极为广泛的,那么怎样才能实现鼠标的不同样式呢? 启动Dreamweaver,打开你要应用鼠标样式的网页,在主窗口中选择Text下拉菜单,再选择CSS Style子菜单中的New Style命令新建样式表。(注:如果你的网页中已经存在样式表,可以选择CSS Styles Edit Style Sheet编辑样式表。) 此时弹出New Style对话框。其中Type项有三个单选按钮:Make Custom Style、Redefine HTML Tag、Use CSS Selector。其中Make Custom Style 是自定义样式,样式名以圆点开头;Use CSS Selector是使用CSS选择器,里边包含四个超链接样式a:active/a:hover/a:link/a:visited;Redefine HTML Tag是定义HTML系统标签的样式,如abodybr等等。假设我们只对该页面的超链接设置鼠标样式,这里选择Redefine HTML Tag选项中的a标签。下面的Define项选择This Document Only。单击OK按钮。 弹出Style definition for 对话框,进入超链接样式设置。左边的Category是样式类别,这里对其它项不作解释,我们选择Extentions项。可以看到右边Visual Effect中的Cursor项,这就是设置鼠标样式的关键项。单击右边的下拉菜单,选择你所需要的鼠标样式,单击OK按钮就可以了。 下面讲一下各样式的大致含义。

  hand:是大家所熟悉的手型。
  crosshair:是十字型,就是小乌龟首页所用的样式。
  text:是平时鼠标移动到文本上的样式。
  wait:是等待的效果。
  default:是默认的那种效果。
  help:是带问号的鼠标样式。
  e-resize:是向右的箭头。
  ne-resize:是向右上方的箭头。
  n-resize:是向上的箭头。
  nw-resize:是向左上方的箭头。
  w-resize:是向左的箭关。
  sw-resize:是向左下的箭头。
  s-resize:是向下的箭头。
  se-resize:是向右下方的箭头。
  auto:是系统自动的效果。

  当然根据需要你也可以将样式应用于其它标签,或者单纯的只应用于某一段文本。如果读者对CSS代码不陌生的话,或许直接手写代码更方便。特别是,如果你想在不同的位置运用不同的鼠标样式,或者不同的标签使用不同的鼠标样式。直接将样式写在某个具体的标签里边就可以了。

  方法是:< tag style=cursor:mouse_style>。其中tag是标签名,mouse_style就是鼠标样式,如hand/crosshair/text/wait等等。

  下面举个具体的实例以加深大家对鼠标样式设置的理解。

  <span style=cursor:hand> hand:是大家所熟悉的手型。< /span>

  < span style=cursor:crosshair>crosshair:是十字型,就是小乌龟首页所用的样式。< /span>

  < span style=cursor:text>text:是平时鼠标移动到文本上的样式。< /span>

  < span style=cursor:wait>wait:是等待的效果。< /span>

  < span style=cursor:default>default:是默认的那种效果。< /span>

  < span style=cursor:help>help:是带问号的鼠标样式。< /span>

  < span style=cursor:e-resize>e-resize:是向右的箭头。< /span>

  < span style=cursor:ne-resize>ne-resize:是向右上方的箭头。< /span>

  < span style=cursor:n-resize>n-resize:是向上的箭头。< /span>

  < span style=cursor:nw-resize>nw-resize:是向左上方的箭头。< /span>

  < span style=cursor:w-resize>w-resize:是向左的箭关。< /span>

  < span style=cursor:sw-resize>sw-resize:是向左下的箭头。< /span>

  < span style=cursor:s-resize>s-resize:是向下的箭头。< /span>

  < span style=cursor:se-resize>se-resize:是向右下方的箭头。< /span>

  < span style=cursor:auto>auto:是系统自动的效果。< /span> 

  将上面这段代码拷到你的网页中,按F12预览。将你的鼠标移到相应的文本上方,看看鼠标有什么变化?是不是以相应的样式显现了?

 
2007年01月26日 星期五 13:20
在旧版的Dreamweaver我们在网页上只能插入Flash动画和按钮,而且动画本身与所在页面并没有什么直接关系,要使动画具有交互性也必须在制作动画时就做好,还需要有一定的编程经验以及XML语言知识。而现在在DW MX 2004中就不同了,你只需设置一些参数就可以实现动态交互的Flash动画效果! 

  采用默认安装的DW MX 2004只提供了一种Flash Element效果,选择工具栏快捷菜单中的Flash Element(图1)即可调出新的Flash Element工具(图2)。

  按此在新窗口浏览图片

  按此在新窗口浏览图片

  图1     图2

  首先点击图片浏览按钮在页面中插入Flash Element并保存,选中插入页面中的动画元素,这时在原来的标记对话框基础上会跳出来Flash Element元素的属性(图3)。

  按此在新窗口浏览图片

  图3

  从上到下的各种属性依次为:图片播放界面背景色、图片标题色彩、图片标题字体、图片标题字体大小、动画框架色彩、是否显示框架、框架厚度、图片标题、图片链接地址、窗口打开方式、图片地址、是否显示控制条、是否自动播放、图片间隔延时、是否循环播放、标题、标题色彩、标题字体、标题字体尺寸以及转变类型。

  现在我们可以对各选项进行一下设置。需要注意的是imageCaptions、imageLinks以及imageURLs处的各项之间需用逗号分开,并将你的图片地址以及点击后的链接地址填入相应框内,对于色彩的设置以及其它处理大家可根据自己需要来设置,同时对于最后一项图片间的转换效果,大家可以根据自己的喜好来选择,类似制作Power Point中幻灯片间的切换效果(图4)。

  按此在新窗口浏览图片

  图4

  现在我们采用如图5的设置,得到最终的效果如图6。

  按此在新窗口浏览图片

  图5

  按此在新窗口浏览图片

  图6

  通过简单几步,一个具有个性播放界面、有交互效果的网页动画组成元素就制作完成了,相当简单。如果你对Flash有一定的了解的话,还可以自己开发一个Flash Element插件出来,同时还可以到Macromedia网站上下载更多Flash Element插件,让你的主页更加富于变化和个性!

 
2007年01月26日 星期五 13:19
设计页面时,经常会从一个页面打开一个子窗口以供浏览者查看。通常,这种子窗口中的内容一经浏览者看过,对于浏览者而言就不再需要,而他们常常会忘记关掉这些小窗口,致使许多的浏览器窗口打开着,耗用大量的资源。因此我们可以将子窗口设计成经过一段时间后可以自动关闭的形式。 

  本例中制作了两个页面,如图1所示, Index.html是显示于子窗口中的页面,而在名为firstpage.html的页面中,包含在子窗口中打开Index.html的链接。单击链接时,将在子窗口中打开index.html。可以直接单击子窗口中的“关闭”链接关闭子窗口,也可以不去理睬它,在15秒之后,子窗口也会自动关闭。

  按此在新窗口浏览图片

  图1 浏览器的弹出页面

  具体操作如下:

  1. 在本地站点中生成一个Smlple文件夹。

  2. 在Smlple文件夹中,生成名为Index.html以及名为firstpage.html的文件。

  3. 双击Index.html,打开该文档,进入到文档的设计视图窗口中。

  4. 单击菜单View/Head Content,显示文档的头部区域。

  5. 单击设计视图窗口中的文档头部窗格。选择菜单Insert/Invisible Tags/Script,打开Inset Script对话框。如图2所示,在Language下拉列表框中选择JavaScript选项,并在Coctento文本框中输入“setTimeout("self.close()",15000)”。单击OK按钮,完成在文档头部插入15秒后自动关闭子窗口的脚本。在代码中,15000表示15000毫秒,也即15秒,也可以根据需要将之修改为自己需要的时间毫秒数。

  按此在新窗口浏览图片

  图2 设置时间

  6. 在文档窗口中输入“关闭”字样,在属性面板上的Link文本框中输入“###”,将其设置为一个空链接。

  7. 在状态栏左端的快速标记编辑器上,单击标记按钮。选中“关闭”链接,然后按下Ctrl+T组合键,打开快速标记编辑器,进入到快速标记编辑器的编辑标记模式。然后在“>”前输入“onclick="selfclose()"”。 如图3所示,设置完毕,单击OK按钮,确认操作。这样在Index.html被作为子窗口打开后,单击该链接就可以立刻关闭该子窗口。

  按此在新窗口浏览图片

  图3 设置时间

  8. 保存Index.html文件,并退出index.html的Dremweaver窗口。

  9. 现在开始设计fristpage.html页面。在本地站点的Smlple文件夹中,双击 fristpage.html,打开该文档,进入到文档的设计视图窗口中。

  10. 在文档中输入“单击这里打开会自动关闭的子窗口”字样。然后在属性面板上的 Link文本框中输入“###”,将之设置为空链接。

  11. 可以通过为该链接应用Open Browser Window行为来设置单击链接时打开Index.html窗口,不过更方便的方法是利用快速标识编辑器。方法是首先将插入点放置到链接中,然后在状态栏左端的标识选择器上,单击标识按钮,选中整个链接。然后按下Ctrl+T组合键,打开快速标记编辑器,进入到快速标记编辑器的 编辑标识模式。再在“>”前输入“onclick="window.open('index.html',null','width=200px,height=200px')"”(如图4所示)。设置完毕,按下回车键,确认操作。

  按此在新窗口浏览图片

  图4 设置单击链接时打开

  12.上述操作就完成了本例的设置。可以单击菜单用File/save,保存所做的工作。然后按下F12键,在浏览器中预览页面效果。

 
   
 
 
文章分类
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
设计(98)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
苹果(55)
 
   
 
文章存档
 
     
 
最新文章评论
  

哇!!这么多好心人呀!
 

很有用,谢了!
 

[表情]
 

你好,请问 40.0.100.0是什么颜色?
 

说的好!
   
帮助中心 | 空间客服 | 投诉中心 | 空间协议
©2012 Baidu