推荐阅读
9个设计要素技巧制作出完美的搜索框
搜索框是我们最常用到的UI控件之一,它几乎存在于所有的网站和APP当中。许多人认为搜索框不需要设计,因为它似乎就是由两个最简单的元素构成的。在以内容为导向的网站中,搜索框的重要性会相对更明显,用户需要快速又无痛地找到他们想要的内容。而对于设计相对负责的网站而言,这个需求尤其明显。搜索框的可用性设计,是整个设计的关键。今天的文章我们来聊聊搜索框的设计,如何让用户尽量节省时间,搜到他们想要的内容。1、使用放大镜图标时至今日,搜索的概念和放大镜图标之间的关系已经深入人心,根深蒂固了。在日常最常用、最易于识别的几个图标当中,放大镜所带代表的搜索图标就是其中之一。即使在没有文本标签标识的情况下,用户也能轻松地识别图标的含义。小贴士:使用最简略直观的放大镜图标,细节越少,越容易识别。2、显眼的搜索输入框如果搜索是你的网站或者APP的重要功能的话,你应当让搜索框足够显眼,这样的能设计让用户最快发现它的存在。
phtotoshop给偏暗的荷花少女打造清新蓝天照片
原图效果图1、打开素材原图,复制背景图层。图层样式设置为“滤色”不透明度为50%2、创建可选颜色图层,对红、黄、绿、青、白 进行设置。参数设置如下图6、拖进天空素材,如下图
基础(23)如何快速在Dreamweaver CS3中编辑网页标签
图上画红框的地方,就是我们今天的主角了。我们先看一下“环绕标签”。在页面上随便打入几个字,选中它们,在右键菜单中选择“环绕标签”,在弹出的环绕标签对话框中输入“<strong>”(不包括引号),然后回车。之前被选中的文字是不是已经变成粗体了,到源代码看一下,我们所选中的文字是不是已经被<strong>标签包围了?大家可以试着再加入其它的一些标签,如:<a>,<p>。这里也可以直接输入属性。如:<p style="color:#CC0000">。这里仅大概说明一下,如有疑问,请查看Dreamweaver CS3的帮助。下面说一下标签选择器的应用方法。我们将光标移动到刚才加粗的文字里,会发现在<body>的后面多了个<strong>。这就是说光标所在处的这些文字的外面有<strong>的标签,在<strong>标签外有<body>标签。下面大家再添加一个表格,把光标移动到表格内,看看标签的结构。相信对HTML有些基础的朋友都应该很轻易理解的。假设我们现在要插入一个表格,并将这个表格用CSS来将它下移10个象素。先插入一个表格,然后交光标移动到表格内。这时在标签选择器上应该可以看到这样的字样<body><table><tr><td>。然后在table标签上点鼠标右键,会看到有四个选项。删除标签、编辑标签、设置类、设置ID。删除标签:即是将标签删除。(有一些非凡的标签是不能删除的。例如:<table>、<tr>、<td>、<body>...) 编辑标签:给标签附加属性、修改属性等。 设置类:给这个标签附予一个类。(即CSS的类别) 设置ID:给这个标签附予一个ID。(即CSS的ID)在这里,我们选择编辑标签,然后在后面加上属性style="margin-top:10px"和正常书写源代码的方式是一样的。然后按下回车。就完成了编辑。假如在Dreamweaver CS3里看不到效果,请用浏览器预览。还有另外一种方法,也许你会喜欢。选择窗口→标签检查器当你选择某一个标签后,这里会显示出当前选择标签的所有属性。也可以很快地在这里进行编辑。在这里输入的属性不用包括引号,编辑后按回车确定。这里我们只将方法告诉大家,希望大家能够从中受益。
Photoshop合成“蛋壳里的小鸡”
这个Photoshop实例主要运用了通道和套索工具,合成了一个蛋壳里的小鸡,先看下完成图吧:图:完成图 制作步骤: 1、打开一张素材图片。图:打开素材图片 2、抠出鸡蛋。打开通道面板,比较之后发现蓝通道中鸡蛋的边缘最明显,所以选择蓝通道,然后用磁性套索工具勾出鸡蛋的轮廓,平滑2个像素。图:抠出鸡蛋 3、Ctrl+J将鸡蛋复制出来,命名为蛋。图:将鸡蛋复制出来
最新发布
在FrontPage 2000中插入Flash动画
尽管FrontPage 2000和Flash同属于网页设计软件,但两者的兼容性不是很好。使用FrontPage 2000中的“插入”菜单,无论是图片,还是文件,或者不能直接插入SWF文件,或者插入后无法正常显示,笔者通过探索、尝试,找到了以下4种办法,可以在FrontPage 2000中使用Flash动画:图1设置动画输出的属性 1、在Flash动画制作结束时,输出为GIF动画。如果要透明,必须在“EXPort GIF”对话框中,选中“Transparent”(如图1),优点是在FrontPage 2000中可以使用“插入/图片/来自文件”的方式,方便、快捷,缺点是对于直接获取的Flash动画文件,则无法做这种改变。 2、在FrontPage 2000中,使用“插入/高级/插件/浏览”,选定文件,确定。优点是可以直接插入SWF文件,无需转换,缺点是保留了背景,图像在拉大或缩小时,动画背景和图形不能完全按比例缩放。 3、在Flash动画制作结束时,先“Save”后“Publish”,“Save”的目的是给文件取名,便于使用同名“Publish”。进入FrontPage 2000后,点击“插入/文件”,选中保存的HTML文件,打开,右击或双击插入对象,进入“ActiveX控件属性”窗口,在“Movie URL(链接地址)”栏中输入SWF文件的绝对路径或链接地址,在“Quality(播放质量)”栏中选“Best”,在“Scale(显示比例)”栏选“ShowAll”,如要透明,在“Windows Mode(窗口模式)”栏选中“Transparent”,其余选项默认即可。预览,即可看到透明的显示效果。优点是对于直接获取的Flash动画,或通过输入绝对路径或输入链接地址的办法,可以插入和控制效果,缺点是无法使用浏览查找,要输入绝对路径,对使用者的要求较高。 4、直接使用“插入/高级/ActiveX控件”,弹出“插入ActiveX控件”窗口,其中仅显示了安装到电脑的部分控件。点击“自定义”按钮,打开“自定义ActiveX控件列表”列表框,其中显示了电脑上所有安装的ActiveX控件,选中“Shockwave Flash Object”控件,确定。回到“插入ActiveX控件”窗口中,会看到“Shockwave Flash Object”控件已在列表中。选中“Shockwave Flash Object”控件后确定,这时网页中会出现一块白色矩形区域,双击它,在弹出的“ActiveX控件属性”窗口中输入或选择相关的参数即可。前提条件是安装了Flash软件或“Shockwave Flash Object”控件。
用FrontPage制作鼠标光照特殊效果
我们知道,利用Flash动画制作软件可以制作出生动的鼠标光照效果。其实,我们利用FrontPage同样可以在网页中实现鼠标的光照效果,而且制作出来的文件存储容量还要比Flash小。其中,用FrontPage制作鼠标光照效果的具体编码如下: 〈body bgcolor="Black"〉 〈div id="myLightObject" style="position: relative; height: 500px; width: 500px; top: 10px; left: 0px;color: White; filter: light"〉 〈p〉我们知道,利用Flash动画制作软件可以制作出生动的鼠标光照效果。〈br〉 〈br〉其实,我们利用FrontPage同样可以在网页中实现鼠标的光照效果,而且制作出来的文件存储容量还要比Flash要小。〈br〉 〈br〉其中,用FrontPage制作鼠标光照效果的具体编码如下: 〈/p〉 〈/div〉 〈script language="VBScript"〉
网页制作软件FrontPage XP的使用技巧
最近笔者学会了用FrontPage XP做网页,心理特高兴,非常想把我在制作主页过程中的一些经验和大家交流交流、切磋切磋,我们一起来看看吧。 用表格做按钮 很多人为了做出按钮效果,不得不去动用一些图像或动画制作工具,非常麻烦,事实上,利用FrontPage XP的表格功能,你可以轻松地做出按钮效果来。方法是:插入一个一行一列的表格,然后设置它的表格属性,将单元格边距和单元格间距均设为“0”,亮边框设为白色,暗边框设为黑色,然后把边框的粗细设置为一个较大的数值就行了,比如设为“9”,你可以根据需要灵活调整。 用表格拼接图像 对于一些较大的图像,如果直接使用,当然我们在设置时省了很多事,但是下载的人却要受苦了,为了解决这个问题,我们可以把它切分成几部分,然后再利用表格把它们拼接到一起,这样就可以加快图像的下载速度。先把图片分成几块,然后在网页中插入一个表格,其行列数与切分的图像相同,再把切分后的图像按照原来的位置关系插进相应的单元格中就行了。效果和我们用原来的图片没有什么区别,但是下载速度明显地加快了。 定时开关 代码如下: 〈!--定时关闭页面,其中5000即等于5秒--〉 〈body bgcolor="#fef4d9" onLoad="setTimeout(window.close, 5000)"〉
利用FrontPage 2003制作网络申请系统
1. 打开FrontPage 2003,点击“文件→新建→新建网站→其他网站模板”,然后选择“数据库界面向导”,给定网站路径后,单击[确定]按钮即可(图1)。 2. 可以选择是以ASP为平台还是ASP.net为平台,一般选默认的ASP,数据库建议使用第一项“在网站中创建新的Microsoft Access”数据库,选这一项不一定要求你的机器安装了Access,只是此数据库是按其格式建库而已。不改变选项的话可以直接单击[下一步]按钮(图2)。 3. 指定所要连接的数据库名称,也可以默认,建议不要用中文。 4. 这一步非常关键,你的数据库有哪一些字段,其数据类型是什么,在网页中表现为文本框还是下接菜单之类的,都在这里设置。首先选择某一列名称,点击“修改”即可,进行各项内容的修改。 其中“名称”为字段名,“列类型”为字段数据类型,“表单域类型”为用户在进行数据记录时的输入界面,用户可以根据需要进行选择。选择完成后,则全部设置完毕(图3)。 5. 系统自动建立数据库,点击[下一步]按钮即可。
FrontPage2003 教程 轻松布局网页
很多朋友对FrontPage2003中增加的网页布局功能很感兴趣,现在我们一起来深入了解这一实用功能。 用FrontPage2003的“布局表格和单元格”功能布局网页时,需要通过两部分来完成。 首先通过“布局表格”功能来为网页布局创建一个框架,然后通过“布局单元格”功能为该框架填充包含有网页内容(包括文本、图像、Web部件和其他元素)的区域,也就是单元格。 下面我们就以设置一个单位网站首页为例来了解一下用布局表格给网页布局的过程。 一、创建布局表格 1.创建布局表格 打开一个空白网页,并切换到“设计”视图下,单击“表格”菜单中的“布局表格和单元格”命令,随后在右侧弹出一个任务窗口(图1),在该任务窗口下面程序提供了多种表格布局模板,在此单击其中需要的模板即可将该模板添加到网页中。 2.绘制布局表格 如果你对模板中提供的布局表格不太满意,还可以用手工绘制的方法创建一个布局表格。创建时首先在“新建表格和单元格”项中单击“绘制布局表格”,随后将指针移到操作窗口最左端,然后拖动鼠标即可绘制表格。 3.设置表格属性
FrontPage2003 教程 九大新功能
FrontPage 2003在功能上增强了不少,下面我们一起来看看新版本中比较突出的9个新功能。 1.自定义浏览器分辨率预览检查 在设计网页时,可实时调节当前页面为在客户端显示的分辨率,以便预览当前效果。大家查看FrontPage 2003界面右下端状态上显示网页大小的区域,默认为792×533,右键单击后,弹出如图1所示菜单,在此可设置任意分辨率方便进行预览。 2.描摹图像 大家在学习书法的时候,都接触过临摹吧,描摹图像的功用与其类似,就是通过创建一个图像(一般为网页的效果图)为参照物,以便于网页的设计制作。在Dreamweaver软件的各个版本中基本上都有这个功能,现在高傲的微软也开始学习这个优点了。点击菜单栏上的“视图→描摹图像→设置”,在弹出对话框中,选择指定图像,再设置其坐标(即在设计页面上显示的位置)。最后,设置透明度,再确认即可。这个描摹图像只是显示在FrontPage 2003的设计视图中,不会在你制作完毕的页面中显示出来。 3.层功能 过去,FrontPage最欠缺的功能之一就是无法像Macromedia Dreamweaver那样使用层。而层的应用在网页制作中已经是不可或缺了。好在FrontPage 2003终于支持了此项功能。
FrontPage2003 教程 新功能(开发网站部分)
开发网站1.“拆分”视图2.改进的图形支持3.多编辑器配置4.Macromedia Flash 支持5.行为6.交互式按钮7.快速标记工具8.智能感知9.键入帮助10.代码段
frontpage 2003教程 插入媒体插件
十八、插入媒体插件 1、插入“WEB组件”到高级控件到插件 此主题相关图片如下: 2、找到数据源,编辑相关, 此主题相关图片如下: 此主题相关图片如下: 此主题相关图片如下: 3、注:会自动识别媒体的,有两种RM和微软的 此主题相关图片如下: 此主题相关图片如下:
frontpage 2003教程 共享边框
十五、共享边框 1、启用 》“工具”》“网页选项”》“创作”》选中“共享边框” 此主题相关图片如下: 2、“格式”中选中“共享边框”在对话框中(注:若想损事,选:所有网页)设置选项“上、左、右、下”(可以自定) 此主题相关图片如下: 3、在自动出现的共享边框中编辑链接栏属性 此主题相关图片如下: 5、和上一讲的链接栏配合使用,当你每添加一个网页在链接栏中会自动生成上面的效果
frontpage 2003教程 新建自定义链接
十四、新建自定义链接 默认链接有时不够用,可以建自定义链接,独立于默认。在插入链接时有两个选项:一个是默认,另一个是自定义链接。 自定义链接可以放在主页下面,也可以放在独立的地方。下图一中的“娱乐”就是放在主页下的。图二中的新建成链接栏是独立的。 此主题相关图片如下: 此主题相关图片如下: 当然你还可以在自定义下面添加下层链接。