推荐阅读
Photoshop处理照片背景教程
1、复制图层。 2、滤镜→模糊→高斯模糊。 3、设置模糊半径(可点开“预览”选择合适的参数) 4、将复制图层的不透明度设置为80%左右。 5、用橡皮擦工具将想要保留的主体擦出来。这个过程需要耐心,细微之处要把橡皮擦设得很小。 6、慢慢地把主体都擦完了,再把复制图层的不透明度设置成100%。(也可以是其他数字,要根据具体情况确定) 7、最后,把图层合并,OK…… 如果图片的背景与主体反差较大、主体比较单一时,处理起来就简单多了。打开图片后,可以直接用魔棒工具(或套索工具)选取背景(或者选取主体后再反选),然后用模糊工具的“镜头模糊”或“高斯模糊”处理即可。
平面设计中标志LOGO的设计思路讨论
说到设计,我们就不得不谈一下LOGO的传统设计:LOGO传统设计,重在传达一定的形象与信息,真正吸引我们目光的,不是LOGO标志,而是其背后的图象信息。举个例子,一本时尚杂志的封面,相信你首先注意到的是其上漂亮的女士或得体的服装,如果你感兴趣才会进一步去了解相关的其他信息。网站LOGO的设计,跟传统设计有着很多的相通性,但由于网络本身的限制以及浏览习惯的不同,它还带有许多与之相异的特点。比如网站LOGO一般要求简单醒目,在少量的方寸之地,除了表达出一定的形象与信息外,还得兼顾美观与协调。因此,一位优秀的传统设计大师,不一定胜任网站设计;而一位网站美术设计大师,也许只是传统设计中的菜鸟…… 其实,就在我们大谈LOGO设计的时候,感到文字的苍白无力,因为在我们的实际制作之中,很多东西都是难于用语言表达出来的,有时候是种灵感,有时候是种仿效,而更多的时候是通过繁琐的工作与多次的尝试完成的。在实际的设计中没有你非得做什么的限制,更没有放之四海皆准的真理,但也有一些比较普遍存在的问题值得注意,而本文就将围绕这些问题剖析我们的LOGO设计思路。 为了让大家清楚明白地掌握我们的意图,我们将用一个LOGO的实际制作过程进行阐述。 一、形体 1、原理 我们周围的世界首先是一个形体的世界,即使缺少了颜色,光亮,质地等元素,大多数物体还是可以凭其形体辩认出来。因此,我们把它作为我们LOGO设计的第一步。 通常地,当我们开始进行LOGO设计时都会有一些由真实形体引发的线索:农产品公司可能会在它们的LOGO中放置农作物形体;出版社也许会在LOGO中放置书本形体;电脑公司也许会在其LOGO中放置电脑形体,等等。但在创作过程中少有直接了当进行放置的,艺术创作常常将自然形体与幻想设计集中在一块,LOGO创作则往往通过技术提取与朴素制作来完成。 所谓"技术提取",就是在LOGO设计中,把实际形体与网站内容相结合,用会意体现内容,用轮廓体现形体。而"朴素制作",则是摒弃不相关的元素信息,力图用最简单的方式表达最丰富的内涵。一个好的LOGO,可以让访问者清楚地知道它的制作原理,但与此同时又能让他感到很难做出同样的效果。如图一,我们可以清楚地看到它是由字母与线条制成,但如何实现它却需要一些精细的工作,如层的运用,字体的镂空,等等。
接触Dreamweaver 4的Flash按钮制作
Dreamweaver 4在对象面板的“Common”组中增加了一个“Flash Button”对象图标,点击这个图标,就可以利用这个对象的功能制作出各种各样的按钮,并自动插入到网页中。至于你是否懂“Flash”则无关紧要,因为在整个过程中你只是点点鼠标而已。请看下面这个Flash按钮: 上面这个按钮当鼠移到按钮上面时,那个五角星会转动,单击按钮可链接到一个网页,另外,由于采用了矢量图形和文字,任意放大或缩小均不失真。下面我们就以上面这个按钮的制作为例来说明Dreamweaver4 的“Flash Button”对象的使用方法: 1、在需插入按钮的地方用鼠标点一下,然后点击对象面板上那个“Flash Button”图标,就是下图用红线圈起来的那个: Dreamweaver4 对象面板 当你点击对象面板上那个“Flash Button”图标后,立即弹出一个“Insert Flash Button”对话框,如下图所示: Insert Flash Button对话框 2、我们来仔细看看这个对话框,看懂了它,Flash按钮也就会做了。Sample:示例,就是当你在下面的按钮类型中选择一种按钮类型时,在这个窗口中显示出来,鼠标在上面移动可以看到Flash效果;style :按钮类型选择,你可在它右面那个选择窗口中选择一种你喜欢的按钮;Button Text:输入按钮上的文字,也就是把按钮上的“Button Text”文字换掉;Font :按钮上文字的字体;Size :按钮上文字的大小;Link :按钮对应的链接文件。就像超级链接一样可以使用相对地址也可以使用绝对地址。Target:和超级链接的Target相同,即指定链接的网页在那个窗口中打开。BgColor:设置按钮的背景颜色。这点很重要。按钮默认的是白色背景,必须把按钮的背景色设置成与插入按钮地方的背景色相同,才可以使你的按钮无缝嵌入页面。Save As:按钮的Flash文件保存的文件名,输出为Swf格式,你也要以按“Browse...”按钮打开文件夹选择保存按钮文件的路径。Apply按钮:它与OK按钮不同的是,按下它后,将按对话框的设置形成按钮文件并插入到网页指定的位置,但并不退出对话框,你可以继续插入按钮;Get More Styles...按钮,若你感到对话框的“Style”选择框中没有你合适的按钮,则可以上网通过按钮GetMore Styles查找更多的样式。 3、全部按钮插入结束,按OK返回网页编辑窗口。 Dreamweaver4的“Flash Button”对象,简单易用,但有一点非常遗憾:它现在不支持中文。我想在不久应该会解决,否则就太令人失望了。
3ds max6快捷键全收录
主界面快捷键 1.菜单快捷键File_New Scene(新场景) 【Ctrl+N】File_0pen File(打开文件) 【Ctrl+O】File_Save File(保存文件) 【Ctrl+S】Edit_Undo Scene 0peration(撤销场景操作) 【Ctrl+Z】Edit_Redo Scene 0peration(重做场景操作) 【Ctrl+Y】Edit_Hold(存放) 【A1t+Ctrl+H】Edit_Fetch(取回) 【A1t+Ctrl+F】Edit_Delete 0bjects(删除对象) 【Delete】Edit_Clone(克隆) 【Ctrl+V】Edit_Select A1l(全选) 【Ctrl+A】Edit_Select None(不选) 【Ctrl+D】Edit_Select Invert(反选) 【Ctrl+I】Edit_Select by Name(按名称选取) 【H】Tool_Transform Type―In(变换输入) 【F12】Tool_A1ign(对齐) 【Alt+A】Tool_Spacing Tool(间隔工具) 【Shift+I】Tool_Normal Align(法线对齐) 【Alt+N】Tool_Place Highlight(放置高光) 【Ctrl+H】Tool_Isolate Selection(孤立选择) 【Alt+Q】Views-Undo View Change(撤销视图更改) 【Shift+Z】Views_Redo View Change(重做视图更改) 【Shift+Y】Views_V1ewport Background(视口背景) 【Alt+B】Views_Update Background Image(更新背景图像) 【Alt+Shift+Ctrl+B】Views_Match Camera To View(摄影机与视图匹配) 【Ctrl+C】Views_Redraw All Views(重绘所有视图) 【`】Views_Adaptive Degradation Toggle(自适应降级开关) 【O】 Views_Expert Mode Toggle(专家模式开关) 【Ctrl+X】Graph Editors_Particle View(粒子视图) 【6】Rendering_Render Scene(渲染场景) 【F10】Rendering_Environment(环境) 【8】Rendering_Render to Texture(渲染纹理) 【0(零)】Rendering_Material Editor(材质编辑器) 【M】Customize_Show/Hide Main Toolbar(显示或隐藏主工具栏) 【Alt+6】Customize_Lock User Interface(锁定用户界面) 【Alt+0(零)】MAXScript_MAXScript Listener(MAXScript监听器) 【Fll】File Menu(文件菜单) 【Alt+F】Edit Menu(编辑菜单) 【Alt+E】Tools Menu(工具菜单) 【Alt+T】Group Menu(群组菜单) 【Alt+G】Views Menu(视图菜单) 【Alt+V】Create Menu(创建菜单) 【Alt+C】Modifiers Menu(编辑修改器菜单) 【Alt+O】Character Menu(角色菜单) 【Alt+H】Animation Menu(动画菜单) 【Alt+A】Graph Editors Menu(图形编辑器菜单) 【Alt+D】Rendering Menu(渲染菜单) 【Alt+R】Customize Menu(自定义菜单) 【Alt+U】MAXScript Menu(MAXScript菜单) 【Alt+M】Help Menu(帮助菜单) 【Alt+H】2.主工具栏和浮动工具栏快捷键Undo(撤销) 【Ctrl+Z】Redo(重做) 【Ctrl+Y】Select 0bject(选定对象) 【Q】Select by Name(按名称选择) 【H】Rectangle(矩形),Circle(圆形),Fence(篱笆),Lasso Selection Cycle(套索)选择循环 【Ctrl+F或Q】Select and Move(选定并移动) 【W】Select and Rotate(选定并旋转) 【E】本新闻共7页,当前在第1页 1 2 3 4 5 6 7 Select and Scale(选定并按比例变换) 【R】Scale Cycle(按比例变换循环) 【R或Ctrl+E】Snap Toggle(捕捉开关) 【S】Angle Snap Toggle(角度捕捉开关) 【A】Snap Percent(捕捉百分比) 【Shift+Ctrl+P】Align(对齐) 【Alt+A】Normal Align(法线对齐) 【Alt+N】Place Highlight(放置高光) 【Ctrl+H】Material Editor(材质编辑器) 【M】Render Scene(渲染场景) 【F10】Quick Render(迅速渲染) 【Shift+Q】Restrict to X(约束到X) 【F5】Restrict to Y(约束到Y) 【F6】Restrict to Z(约束到Z) 【F7】Restrict Plane Cycle(约束平面循环) 【F8】3.视口快捷键Front View(正视图) 【F】Top View(俯视图) 【T】Bottom View(仰视图) 【B】Left View(左视图) 【L】Perspective View(透视图) 【P】Isometric User View(等轴用户视图) 【U】Camera View(摄影机视图) 【C】Light View(灯光视图) 【Shift+4($)】Disable Viewport(禁用视口) 【D】Viewport Pop-up Menu(视口弹出菜单) 【V】Dynamic Resizing(动态重定大小) 【拖曳视口边界】Transform G1zmo Toggle(变换线框开关) 【X】Transform Gizmo Size Down(变换线框变小) 【-】Transform Gizmo Size Up(变换线框变大) 【=】Shade Selected Subobject Faces(给选定次对象面加阴影) 【F2】Wireframe/Smooth+Highlights Toggle (线框或平滑+高光开关) 【F3】View Edged Faces(查看边界面) 【F4】Polygon Counter(多边形计数器) 【7】Sound Toggle(声音开关) 【\】Show Safeframes(显示安全框) 【Shift+F】Default Lighting(默认光照) 【Ctrl+L】See-Through Display(穿透显示) 【Alt+X】Redraw All Views(重绘所有视图) 【`】Offset Snap(偏移捕捉) 【A1t+Ctrl+空格】Show/Hide Cameras(显示或隐藏摄影机) 【Shift+C】Show/Hide Geometry(显示或隐藏几何体) 【Shift+G】Show/Hide Grids(显示或隐藏栅格) 【G】Show/Hide Helpers(显示或隐藏辅助对象) 【Shift+H】Show/Hide Lights(显示或隐藏灯光) 【Shift+L】Show/Hide Particle Systems(显示或隐藏粒子系统) 【Shift+P】Show/Hide Shapes(显示或隐藏形状) 【Shift+S】Show/Hide Space Warps(显示或隐藏空间扭曲) 【Shift+W】4.关键点和时间控制项快捷键Selection Lock Toggle(选择集锁定开关) 【空格】Auto Key Mode(自动关键点模式) 【N】Set Key Mode(设置关键点模式) 【 ‘】Set Keys(设置关键点) 【K】Play/Stop Animation(播放或停止动画) 【/】Backup Time One Unit(回退一个时间单位) 【,】Forward Time One Unit(前进一个时间单位) 【.】Go to Start Frame(转到起始帧) 【Home】Go to End Frame(转到结束帧) 【End】5.视口导航控制项快捷键Zoom Mode(缩放模式) 【A1t+Z】Zoom Extents(缩放扩展) 【Alt+Ctrl+Z】本新闻共7页,当前在第2页 1 2 3 4 5 6 7
最新发布
用Dreamweaver MX建立一个简单的图书查询系统
最近公司为了充分利用图书资源,方便员工查询,决定在公司内部网上建立一个图书查询系统。考虑到公司图书不多,只有1千多册,且专业书居多的特点,我决定做两个查询条件:一个是根据图书类别来查询, 用户只要选择相应的类别就可以显示出该类别的所有图书,这主要是面对对公司图书不熟悉的人;第二个是根据图书名称来查询,用户只要输入图书名,就可以快速的搜索到符合条件的所有图书。 方案已定,接下来就是用什么软件做及如何做的问题了。在这里,我选用了网页的形式,这样同事们只要打开浏览器,输入相应的地址就可以查询了。因此,我使用网页制作利器 dreamweaver 软件(下面简称dw),数据库用acess,环境为win98,pws(编者注:关于PWS的使用教程可以查阅《深入了解微软个人服务器PWS之一》《深入了解微软个人服务器PWS之二》《深入了解微软个人服务器PWS之三》《深入了解微软个人服务器PWS之四》)。下面就正式开工锣。 点击这里下载本教程的源代码 首先,建立数据库: (2)新建一网页,因为查询是动态页面,因此在弹出的面板中选择Dynamic page和Asp VBScript,如图2。按create按钮回到页面。 (3)连接数据库。展开右边的Application 面板,选择Databases标签,按"+"按钮,选择Data Source Name (DSN),如图3。
Dreamweaver MX 2004 打造细线表格
如果仅仅是定义表格的边框为1(border="1")和边框颜色值(如borderColor="#000000"),表格线其实是2px的,要做细线表格,有三种方法: 1.在Dreamweaver中按Ctrl+Alt+T,弹出插入表格的对话框,参数设置如图(带红框项为固定值,否则无效果): 完成后效果如图: 2.利用表格的暗边框(bordercolordark)和亮边框(bordercolorlight)属性做的细线表格:还是按Ctrl+Alt+T插入表格,在对话框中设置如图(带红框项为固定植,否则无效果) 选中表格后按F9,展开"Tag Inspector"面板组,在"Attributes"面板中设置如图:
Dreamweaver MX技巧汇粹
前面我们讲了一些DWMX的基本操作,相信大家看了后都会觉得比较简单,的确,这是个工具软件,操作方便应该是他的宗旨。其实网络后台最基本的就应该是抓取数据库了,只有掌握好这方面的东西你才可以更加深入的学习。当然,我们只学习了DWMX的很少一部分,还有很多的行为(Server Behaviors)就要你自己去慢慢摸索了,我们所能做的就是带你进入MX的世界,要掌握更加深层的东西,就要看你的耐心和意志了。学习是快乐的,但也是痛苦的,尤其在你碰到问题没有办法解决的时候。 从今天开始,我们要一起探讨一些技巧方面的东西,我们的技巧不是在操作上的,而是在后台应用上的,也就是asp的技巧。MX能够自动生成代码,相信大家已经觉得是一大飞跃了,尤其是对那些设计人员来说再也不是什么遥不可及的事情了。但是任何事物都有他的负面性,DWMX也不例外。 首先:他生成的代码太多了,不是那么容易让初学者理解。很多时候我们完全可以用比较少的代码来替代他自动生成的代码。其次:他需要管理的页面也太多了,也就是说给web维护人员带来了比较大的麻烦,我们经常可以看到在行为对话框中有一个after **** go to ,就是手当我们完成此操作后跳转(小技巧:跳转也可以说是定向,asp代码是:Response.Redircet "newpage.asp" )到一个新的页面。其实他完全可以做到一个页面上,这样的好处是我们要维护的页面就少了,你可不要小看他,如果你能够很好的掌握这个技巧,那么你将可以少建30%的页面,的确是这样的,你不要吃惊。 今天我们就来说说这方面的技巧:这里我们主要用到一个if…endif语句,这个我想大家都明白,具体怎么实现了? 比如:我们要建立一个登录系统,用传统的DWMX做我们要两个页面,这是个很简单的东西,只要几行的代码?所以我决定把他并在一个页面里。 编程思路:我们要建立登录系统,肯定要用到表单
下拉菜单全攻略之Dreamweaver篇
下拉菜单是网上最常见到的效果之一,用鼠标轻轻一点或是移过去,就出现一个更加详细的菜单,它不仅节省了网页排版上的空间、使网页布局简洁有序,而且一个新颖美观的下拉菜单,更是为您的网页增色不少。 制作下拉菜单的方法多种多样,本期专栏将为您介绍四种常用的制作方法,让您随心打造自己的下拉菜单。■ 用Dreamweaver制作下拉菜单Dreamweaver是制作下拉菜单最常用的工具,方法简单,控制自由,可以最大限度地随心打造菜单样式,是制作下拄菜单的必修课。用Dreamweaver制作下拉菜单的原理很简单,它利用了Behaviors(行为)面板中的内置方法Show-Hide Layers(隐藏-显示层)方法,并用onMouseOver(鼠标移至)和onMouseOut(鼠标移开)来触发层的隐藏和显示,而将要出现的菜单就在层中。因此,我们可以分四步来制作下拉菜单,首先我们需要一个导航条,它用来放置首先出现在浏览者眼前的主菜单;然后再制作开始隐藏着而将会出现的下拉选单;接着,进行最关键的一步,为主菜单和下拉选单添加上隐藏和显示层的效果;最后,我们进行菜单的美化修饰。最终看到的效果如图,您也可以访问以下地址:menu.htm相信你已经等不急了,那就让我们马上开始吧! 一、 导航条的制作 首先进行一些必要的前期工作,按CTRL+J,打开Page Properties(页面属性)窗口,参数设置如图二,这一设置对菜单的位置将有影响,所以请如图设置。
Dreamwaver MX与ASP.NET六
6.创建记录修改页面相关介绍(注意:为了能显示代码,以下所有代码都在“<”之后和“>”之前加了空格,不便之处请多原谅!):对数据的添加,修改,删除是对数据库的三个基本操作。本节介绍修改记录部分。STEP 1 设计修改流程一般来说,只需要对指定的记录进行更新,所以需要建立搜索页面进行查询,并将查询结果显示在结果页中,并让用户对其进行修改。最后通过提交操作完成更新任务。首先,建立查询页面。在建立dataset的过程中,我们可以通过数据过滤器Filter选择所需的数据。由于我们将会点击DataList中的链接来到达此页面,所以选择URL Parameter并利用关键字CODE来筛选出所需的页面。[图 6-1筛选数据]为此,在站点中新建modify.aspx文件,并添加DataSet如上图。Step2 建立细节页面为了产生链接,首先应建立导航页面。可以对在第3节中建立的DataGrid页面修改达到这样的导航效果。DataGrid的样式是修改的,数据项同样可以设置为显示有链接的文字。同样在DataList和Repeater中也可以实现同样的功能,都是设置一个超级链接到细节页面。打开原来的location2.aspx文件,修改原来的DataList样式。选择DataListm单击Edit Columns(如图6-2)。在弹出的DataGrid样式设计对话框(图6-3)中,可以将Location_name的类型设置为Hyperlink。选中Location_name,单击Change Column Type按钮更改为Hyperlink。[图 6-2 Edit Columns..][图 6-3 设置hyperlink]对于Hyperlink设置如下图,[图 6-4 设置链接关键字]显示的数据域Location_name,连接关键字为code,需要跳转到的页面就是modify.aspx页面。点击链接后具体的网址链接将会为http://yoursite/modify.aspx?CODE=所点击的纪录的code的值而modify.aspx页面也将会通过传来的code的值从数据库中查询所需的纪录。为了在modify.aspx页面中更新数据,就需要用到表单。这就需要将数据记录和输入框绑定。在Dreamweaver MX中绑定数据的方式和Dreamweaver UltraDev中类似。将页面设置如图6-5。新建6个Text Field,1个hiddenField,1个submit按钮,放到适当的位置。其中hiddernField用于保存此记录的CODE值。因为code值为关键字,所以不需改变。[图 6-5 modify.aspx页面]单击Binding标签,将具体数据项拖到与之对应的text field。同时在Format中可以设置数据的显示类型。而同样可以将text field的所有属性和数据源绑定。选择记录的第一个下拉[图6-6 Binding] [图 6-7 数据类型选择] [图6-8 绑定属性]列表,设置被数据源绑定的text Field属性。STEP 3数据更新至于数据更新可以点击Application面板中的Server Behaviors中的”+”按钮,选择Update Record。[图 6-9 选择Update Record][图6-10 设置关联]在弹出的对话框中,需将输入框和相对应更新的数据源关联起来,并设置数据类型。其中CODE应为关键字即Primary Key。类似于Insert Record的页面,还要设置成功添加和添加失败跳转到的页面。现在可以预览一下做好的页面。输入网址http://yoursite/location3.aspx,可以看到如图6-11的页面。[图6-11 location3.aspx页面浏览]Location_name的一项是可以点击的,并将跳到细节页面modify.aspx。[图6-12 更新页面预览]通过modify.aspx页面就可以修改现有数据,并可以通过表单提交事件来更新数据。其更新的主要代码如下:< MM:Updaterunat="server"CommandText='< %# "UPDATE LOCATIONS SET CITY=?, STATE_COUNTRY=?, FAX=?, TELEPHONE=?, ADDRESS=? WHERE CODE=?" % >'ConnectionString='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_STRING_location") % >'DatabaseType='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_DATABASETYPE_location") % >'EXPression='< %# Request.Form("MM_update") = "form1" % >'CreateDataSet="false"SUCcessURL='< %# "location3.aspx" % >'Debug="true"> < Parameters > < Parameter Name="@CITY" Value='< %# IIf((Request.Form("city") < > Nothing), Request.Form("city"), "") % >' Type="WChar" / > < Parameter Name="@STATE_COUNTRY" Value='< %# IIf((Request.Form("state") < > Nothing), Request.Form("state"), "") % >' Type="WChar" / > < Parameter Name="@FAX" Value='< %# IIf((Request.Form("fax") < > Nothing), Request.Form("fax"), "") % >' Type="WChar" / > < Parameter Name="@TELEPHONE" Value='< %# IIf((Request.Form("tele") < > Nothing), Request.Form("tele"), "") % >' Type="WChar" / > < Parameter Name="@ADDRESS" Value='< %# IIf((Request.Form("address") < > Nothing), Request.Form("address"), "") % >' Type="WChar" / > < Parameter Name="@CODE" Value='< %# IIf((Request.Form("hiddenField") < > Nothing), Request.Form("hiddenField"), "") % >' Type="WChar" / > < /Parameters >< /MM:Update >Dreamweaver MX是通过mm:update来表识更新的代码的。其格式和MM:Insert类似。
DreamwaverMX与ASP.NET一
自从微软提出.NET战略之后,编程爱好者对其趋之若鹜。不过,.NET也的确令人惊讶,新的语言C#,新的web服务----web service,当然少不了广大编网爱好者的挚爱---ASP的下一代------ASP.net。然而,ASP.NET并未普及,只是因为没有一个好的编辑器。人们经历了手写板,VisualStudio.NET等编辑器,直到Dreamwaver MX的出现才真正达到了不用手写代码的程度了。DreamweaverMX将数据库和网页完美的结合在一起,对新的网页编程的支持更是没话说,他支持ASP.NET(C#),ASP.NET(VB),ColdFusion,JSP,ASP,XML,PHP,HTML,简直是无所不能。下面就是小编在试用Dreamwaver MX中的体验,供大家研究研究机器的软件要求操作系统:Windows 2000或Windows XP professional(98是时候淘汰了^_^)需装软件:.NET Framework Redistributable(下载地址:http://asp.net/download.aspx) Dreamwaver MX(下载地址:http://www.macromedia.com/software/trial_download/)装好后就让我们开始我们的ASP.NET之旅。1.建立ASP.NET站点STEP 1 准备:运行ASP.net页面,计算机必须安装服务器程序(IIS),以提供对ASP.net的支持。所以我们必须安装IIS,在添加删除程序中的添加windows组件可以进行安装。用Internet管理器(控制面板│管理工具│Internet管理器)新建一个web站点指向你想摆所生成的页面的文件夹。[图1-1 Internet管理器设置]将Dreamwaver MX安装目录下的Sample\GettingStarted\Tutorial和\Samples\Database下的所有文件copy到刚刚所设置的文件夹当中[图1-2 页面内容]这个例子是一个出租汽车的服务中心,其中一部分需要将各个地区出租车公司的联系电话,FAX等信息在网页上发布。下面的工作就是用Dreamwaver MX来完成了。STEP 2 建立web site:打开Dreamwaver MX,点击Site,选择New Site.[图1-3 新建site]Dreamwaver MX支持两种新建站点模式:(1)Basic:利用向导建立,方便简单,首选。(2)Advanced:比较麻烦但设置的选项比较多,小编推荐先用Basic模式建立,再用Advanced模式来修改下面用Basic模式来新建站点:第一步填写站点名,而后单击next[图1-4 新建站点 basic step1]第二步 选择站点类型。确定是否用服务器端技术。由于本实例用到ASP.NET所以要选择第二个选项,并在下拉框中选择ASP.NET 。[图1-5 选择是否采用服务器端技术]第三步 设置测试站点的属性。选择测试的方式以及放文件的目录, 单击next。[图1-6 测试站点属性设置]第四步 设定站点的URL, 单击next。[图1-7 站点的URL设定]第五步设定共享文件,由于本实例在本级调试,选择第二项,单击next。[图1-8 共享文件设定]剩下的就是站点总结了,单击Done.[图1-9 站点总结]
活用DW的数据导入、排序与美化
有的时候,我们经常需要把客户信息等一些资料发布到网上以便联系,但是随着客户资料的越来越多,你的网上更新是不是也觉得越来越力不从心了呢?这该怎么办?其实,除了用asp、php等这些后台语言来实现快捷更新外,dreamweaver本身就提供了数据导入与排序的方法,这对不懂后台的朋友绝对是个大大的福音。dw也从版本3到最新的mx一直都保留了该功能,可见它的实用之处。下面我们就来见识一下它的功效究竟如何。注:本文以dreameaver MX为例1、 例如我们现在手头有个kehu.txt文件,里面是**公司客户联系单,详细信息如下所示:姓名,性别,职位,电话李明,男,A公司技术人员,87185900李岩,男,B公司经理,80226888王强,男,C公司总工程师,83546790苏林,女,D公司营销人员,87556341陈东东,男,E公司项目主任,87436588
占位图形在DW MX中的应用
“占位图形”顾名思义是在准备好将最终图形添加到 Web 页之前使用的临时图形。使用它可以在没有理想的图形的情况下先行制作Web页面――在需要使用图形的地方插入一个占位图形先“占领”着“地盘”。 (一)插入占位图形 将光标定在需要插入图形的地方;选择:插入>图像占位符即出现图像占位符对话框,如图: 设定好各项参数后点击“确定”即将占位图形插入到了页面中,如图:图: 上面显示了名称和大小。察看源代码发现增加了一个包含空 src 属性的图像标签。 (二)替换占位图形 1.当页面设计好以后,我们就需要使用正确的图形来替换到占位图形。在用DreamweaverMX(简称DWMX)中选中占位图形并打开属性面板,点击“创建”按钮。则DWMX就会启动FireworksMX(简称FWMX)并自动建立好一个和占位图形同样大小的空白画布等待图形设计师的“操刀制作”。 2.在FWMX中制作好所需的图形并且优化过后,点击画布上边的“完成”按钮。 在出现的“另存为”对话框中给存档的png文件取一个文件名然后保存(这样便于以后修改);在随后弹出的“导出”对话框中做好相关设定后“保存”该文件。 3.切换至DWMX,我们发现占位图形已经被替换了。察看代码,发现已经自动插入了src的地址,其余的大小,alt等参数均保持原状,如图: 呵呵,是不是很方便呀?从这里我们也可以体会到“三剑客”的配合真的是无与伦比! (三)需要注意的 如果在FWMX中绘制了热区并添加了链接,FWMX将不会删除已经在DWMX中添加到图像占位符的链接;但是如果在FWMX中的图像上绘制了一个切片,则将在替换占位图形时删除DWMX文档中的链接。
打造超酷网页右键菜单二法
在一般的网页中,IE浏览器的默认右键菜单是一成不变的固定模式,大部分网友浏览网页时对它的利用率不高。对专业的网页设计师来说,如果能将右键菜单设计成个性化的内容,样式该是多么的酷和方便。 试想一下,用户在你的网站上一点右键,就是你精心组织的“链接”、“发信”,甚至包含了缤纷的交互式Flash动画!如图1――别流口水了,下面咱们就解解馋,看看如何制作吧:)。 右键菜单的改造,我有两种途径(其实,本质是一样的,都是JavaScript的东西)。 第一种方法是较早的,把下列源代码复制到网页中HTML文件的中即可。 < style> < !-- .skin0 { position:absolute; text-align:left; width:200px; border:2px solid black; background-color:menu; font-family:Verdana; line-height:20px; cursor:default; visibility:hidden; } .skin1 { cursor:default; font:menutext; position:absolute; text-align:left; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; width:120px; background-color:menu; border:1 solid buttonface; visibility:hidden; border:2 outset buttonhighlight; } .menuitems { padding-left:15px; padding-right:10px; } --> < /style> < SCRIPT LANGUAGE="JavaScript1.2"> < !-- Web Site: http://www.painting-effects.co.uk --> < !-- This script and many more are available free online at --> < !-- The JavaScript Source!! http://javascript.internet.com --> < !-- Begin var menuskin = "skin1"; // skin0, or skin1 var display_url = 0; // Show URLs in status bar? function showmenuie5() { var rightedge = document.body.clientWidth-event.clientX; var bottomedge = document.body.clientHeight-event.clientY; if (rightedge < ie5menu.offsetWidth) ie5menu.style.left = document.body.scrollLeft + event.clientX -ie5menu.offsetWidth; else ie5menu.style.left = document.body.scrollLeft + event.clientX; if (bottomedge < ie5menu.offsetHeight) ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight; else ie5menu.style.top = document.body.scrollTop + event.clientY; ie5menu.style.visibility = "visible"; return false; } function hidemenuie5() { ie5menu.style.visibility = "hidden"; } function highlightie5() { if (event.srcElement.className == "menuitems") { event.srcElement.style.backgroundColor = "highlight"; event.srcElement.style.color = "white"; if (display_url) window.status = event.srcElement.url; } } function lowlightie5() { if (event.srcElement.className == "menuitems") { event.srcElement.style.backgroundColor = ""; event.srcElement.style.color = "black"; window.status = ""; } } function jumptoie5() { if (event.srcElement.className == "menuitems") { if (event.srcElement.getAttribute("target") != null) window.open(event.srcElement.url, event.srcElement.getAttribute("target")); else window.location = event.srcElement.url; } } // End --> < /script> < div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();"> < div class="menuitems" url="javascript:history.back();">返回< /div> < div class="menuitems" url="http://javacool.3322.net">回首页< /div> < hr> < div class="menuitems" url="http://www.163.com">网易< /div> < div class="menuitems" url="http://www.sohu.com">搜狐< /div> < hr> < div class="menuitems" url="http://www.sina.com.cn">新浪< /div> < div class="menuitems" url="http://www.yahoo.com.cn">雅虎< /div> < /div> < script language="JavaScript1.2"> if (document.all && window.print) { ie5menu.className = menuskin; document.oncontextmenu = showmenuie5; document.body.onclick = hidemenuie5; } < /script> 其效果如下图: 第二种方法是利用Dreamweaver的一个插件――Right_Click_Menu_Buil-der,可以在http://www.macromedia.com下载得到。安装后,可在Dreamweaver的“Command”菜单的下面找到“Right Click Menu Builder”命令。 点击该命令,便出现了一个如图3所示的设置框。主要有两部分内容:“Menu”和“Styles”。 Menu是设置功能的,超级链接、发信链接都在这里设置,在这里最多可以设10项连接。此选择框中“Menu Text”是你右键中将显示的文字(换成中文吧);在“URL”中写入相应的链接路径;“Target”决定是否是新窗口或是用现在的窗口展示链接的内容,填入“Blank”就是在新窗口显示,和Dreamweaver的“Target”设置是一样的。 Styles是负责设置菜单外形的,有两种选择:img src="http://tech.china.com/zh_cn/netschool/homepage/167718/20020521/images/11257823_63732.jpg"> “Windows Type Menu(Default)” 是默认项――最朴实的样子,熟悉的Windows风格; “Custom Menu” 自定意菜单,如果你选择了这一项,还要对下面的内容进行设置: “Menu Width”,菜单的宽度; “Font”,字体; “Font Color”,字体颜色; “Font Side”,字体大小; “Background Color”、“Background Image”,背景色及背景图; 还有“Cursor”,是用来选择鼠标样式的。 以上的这些设定好了,就可以点“Add”生成效果了。预览一下,不错吧? 那怎样加入Flash呢?是这样做的:在网页中加一个“Table”,它的“W”宽建议设为:“100%”,这样会方便你下面添加的各种元素的定位。好,在该“Table”中插入Flash的SWF文件,位置设成“居中”(主要是方便定位,当然具体问题具体分析,自己多尝试一下会有心得的)。 小技巧:Flash动画不妨做成有交互链接的那种,为什么呢?这样你就可以加任意数量的超级链接。插件自身有最多10条的限制,用了Flash可就全解决啦!^_^
DreamwaverMX与ASP.NET四
4.利用DataList组件显示数据集相关介绍:DataList是功能强化的Repeater控件,除了有Repeater原有的功能外,还可以设定单行显示数据的笔数(RepeatColumn),被选项样板(SelectedItemTemple),编辑项样板(EditTemplate)。但是DataList会将输出的数据安排在表格中输出,而Repeater则更忠于样板的定义,不会添加任何HTML标记。(注意:为了能显示代码,以下所有代码都在“<”之后和“>”之前加了空格,不便之处请多原谅!)STEP 1建立页面我们要建立的页面就如下图所示。当我们点击Detail的超级链接时就会弹出详细资料,正如第一项中所示。点击Close时,详细资料就会关闭,恢复原来的样子。[图 1-1 页面演示]先选择要显示的数据。为了显示欧洲的数据(即Region_ID=3),我们可以在Dataset设定中选定筛选Region_ID=3的数据。[图 1-2数据筛选]用Datalist控件做一个数据简要显示的页面。我们先建立一个无数据的页面。然后选择Application面板中的Server behavior。单击”+”,选择DataList。[图1-3 DataList选择页面]在弹出来的对话框中,我们可以根据需要对应的地方加入页面模板。u Header: 表头模板u Item: 数据项模板u Alternating Item: 交叉显示模板u Edit Item: 修改模板((默认是没有显示出来的,必须通过事件响应才可以显示)u Selected Item: 选中后的显示的模板(同样须通过事件响应才可以显示)u Separator: 分隔模板u Footer: 表底模板[图 1-4 编辑DataList对话框]我们可以通过往Contents中添加HTML代码制作所需的模板,同时也可以通过单击 按钮来添加数据项。单击次按钮后,就会弹出数据项对话框让你选择所需的数据。并在Contents输入框中加入< %# DataBinder.Eval(Container.DataItem, "数据项") % >的代码用于显示数据。[图1-5 添加数据项]为了达到预览的效果,首先在Header中加入代码:Location Name。用以显示标题。在Item中加入代码: < %# DataSet1.FieldValue("LOCATION_NAME", Container) % >,用Location_name来做每一项的标题。在Alternating Item中加入代码< fontcolor="#0000FF" >< %#DataSet1.FieldValue("LOCATION_NAME",Container)% >< /font >以不同的字体颜色来显示数据。虽然Selected Item并不能马上显示,但是我们还应写下代码,以备以后调用。如下:Address:< %# DataSet1.FieldValue("ADDRESS", Container) % >< BR >City:< %# DataSet1.FieldValue("CITY", Container) % >< BR >Telephone:< %# DataSet1.FieldValue("TELEPHONE", Container) % >< BR >单击OK,接着预览页面,下图就是以上代码的效果了。我们等一下会去实现显示出Selected Item项的效果的。[图1-6 最初预览]DataList区别Repeater的一个不同点就是可以设置单行显示多笔数据,在DataList编辑窗口中可以进行设置。[图 1-7 设置单行显示多笔数据]选择Use Line Breaks项就只是有一个< BR >标记进行分开数据。选择Use a Table则是以表格的形式输出,而且可以通过设置Table Columns来确定单行显示数据的笔数。STEP2 编写代码Selected Item时需要通过事件来显示的,所以我们需要建立按钮以启动事件。j添加LinkButton,用以产生事件。将光标移到源代码窗口的< ItemTemplate >与< /ItemTemplate >中,单击more tags ,在弹出的对话框中选择asp:LinkButton控件。[图2-1 Tag Chooser对话框]在编辑LinkButton对话框中,设置LinkButton的属性。在ID输入框中输入名称:Detail,在Command Name中输入”Detail”用于产生事件的命令,在Text对话框中输入Detail(将会显示出来) [图 2-2 LinkButton编辑框]然后再Layout中选择所需的颜色,单击OK,即可生成代码。< asp:LinkButton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:LinkButton >为了在交叉显示中也具有这样的效果,我们需要在< AlternatingItemTemplate >与< /AlternatingItemTemplate >中也插入相同的代码。同时为了关闭弹出来的选择后样板,同样需要产生命令,所以要添加多一个Linkbutton。这样就需要在< SelectedItemTemplate >< /SelectedItemTemplate >中插入代码:< asp:LinkButton BackColor="#FFFFFF" CommandName="Close" ForeColor="#000000" ID="Close" runat="server" Text="Close" >< /asp:LinkButton >k有了命令,我们还需要使用程序来解释这个命令。其实过程并不复杂,只需要加入一小部分代码。在< head >< /head >中添加如下代码:< script language="VB" runat="server" >Sub DataList_ItemCommand(sender as Object,e as DataListCommandEventArgs)If e.CommandSource.CommandName="Detail" ThenDataList1.SelectedIndex=e.Item.ItemIndex ElseIf e.CommandSource.CommandName="Close" ThenDataList1.SelectedIndex=-1End IfDataList1.DataBind()End sub< /script >程序可以取得你点击LinkButton的命令(CommandName)来判断要执行的程序。当DataList的SelectedIndex属性设定为e.Item.ItemIndex,就会打开SelectedItemTemplate页。如果命令为Close则DataList的SelectedIndex属性设定为-1(即没有数据项被选中),则DataList会用ItemTemplate项样板显示此一项数据。在< asp:DataList >中还要添加代码段OnItemCommand="DataList_ItemCommand"以声明与程序段DataList_ItemCommand的关系。按”F12”预览,页面就会显示预想的效果。[图 2-3 最终预览版]附上主要程序段的源代码:Sub DataList_ItemCommand(sender as Object,e as DataListCommandEventArgs)If e.CommandSource.CommandName="Detail" ThenDataList1.SelectedIndex=e.Item.ItemIndex ElseIf e.CommandSource.CommandName="Close" ThenDataList1.SelectedIndex=-1End IfDataList1.DataBind()End sub < form runat="server" >< asp:DataList id="DataList1" runat="server" RepeatColumns="1" RepeatDirection="Vertical" RepeatLayout="Flow" DataSource="< %# DataSet1.DefaultView % >"OnItemCommand="DataList_ItemCommand" >< HeaderTemplate >Location Name < /HeaderTemplate >< ItemTemplate >< %# DataSet1.FieldValue("LOCATION_NAME", Container) % > < asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >< /ItemTemplate >< AlternatingItemTemplate >< font color="#0000FF" >< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >< /font >< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >< /AlternatingItemTemplate >< SelectedItemTemplate >Address: < %# DataSet1.FieldValue("ADDRESS", Container) % >< BR >City: < %# DataSet1.FieldValue("CITY", Container) % >< BR >Telephone: < %# DataSet1.FieldValue("TELEPHONE", Container) % >< BR >< asp:LinkButton BackColor="#FFFFFF" CommandName="Close" ForeColor="#000000" ID="Close" runat="server" Text="Close" >< /asp:LinkButton >< /SelectedItemTemplate >< /asp:DataList > < /form >DataList还有Edit Item的样板,主要用于数据更新。此书会在后面的部分介绍到。