推荐阅读
精选国外非常吸引人的旅游门户网站设计欣赏
其实酒店和旅游类的网站最能体现多媒体内容和文字的搭配技巧了，这类网站通常需要营造氛围，展现美感，体现吸引力，优秀的案例比比皆是。今天我们就来看一组优秀的案例。现如今的旅游和酒店类网站设计的越来越带感了，壮美的风景和精致的界面融为一体，优质的服务和梦幻般的界面让用户在网站中流连忘返。这些网站以惊艳的图片和视频立足，配合以突出的现代网页设计技术，结合当下的设计趋势，视差滚动、全景图片、响应式布局、动态图片一个都不缺席。这些网站巧妙地将多媒体技术、文字排版和特效平衡为一体，为用户提供了身临其境的体验。>Pygmy ElephantPygmy Elephant 是一个旅游机构，网站为用户提供了逼真而难忘的视觉体验。其中涵盖的多媒体类型丰富，通过丰富的视觉体验鼓励游客踏上旅程。网站使用了视频背景，漂亮的图文混排，精致的交互细节。>Cruise Me为了让项目效果突出，设计和开发团队使用了诸多先锋的技术。当用户打开网站的时候能够看到首页上交互性极强的地图，每个地标都能够为用户提供丰富的信息以便浏览和了解。再向下，用户可以翻看不同主题不同旅游项目的卡片，有目的和针对性地了解具体信息。整个网页的设计友好而令人愉悦。>Bird Luxury Travel PR
PHOTOSHOP绘作逼真蕃茄
4.画个大椭圆，羽化20，反选，增加亮度30。 5.取消选择后，用加深和减淡工具处理周边，上面和两边减淡，底部加深。使用加深和减淡工具的时候，需要不断的尝试，这时最好给图像做个历史快照，或是复制一层来做，这样便于修改，涂抹时次数是很多的，不一会就数十次了，在历史记录中可恢复不了。 6.蕃茄有几个瓣，现在来做这几条陷下去的纹。画个椭圆，用选择-变换选区旋转和移动到适合的位置，羽化1，在凹纹的位置用减淡工具檫。 7.反选后用加深工具檫。 8.同样方法做出余下的陷纹。观察整体，再对局部作一些加深增强立体感，可加轻微杂色，数量约1。 9.给这个层命名“蕃茄”，新建一层，在上部画个小椭圆，羽化3，填充灰白性线渐变，将图层模式设为“颜色加深”，作为蒂部位下陷的暗调。向下合并到蕃茄。 10.新建一层，命名“茄蒂”，用钢笔仔细钩出蒂的形状，填充绿色（46/77/27）。 11.绘画实物时，离不开我们的好帮手――加深和减淡工具。刚接触时，我也是极为头痛的，它们不象图层样式那样，调节参数就可以得到效果的，不容易掌握。但只要经过耐心的练习和尝试，你会发觉它们实在是可爱极了。处理茄蒂时可用钢笔辅助钩出叶瓣，也需要载入茄蒂的选区，用轻移、旋转、羽化、反选等动作来得到我们需要的工作选区。完成后加杂色1.5%。
Photoshop打造斑驳压纹镂空文字效果
简 介】 利用PS可以打造出各种各样奇特的文字效果，下面我们来制作一款压纹镂空文字…… 先看一下效果： 效果图 制作工具：Photoshop CS 制作过程： 1、新建一个宽度为100像素，高度为100像素，分辨率为350像素的文件。 2、新建图层1，单击工具箱中的“自定义形状工具”，在其属性栏中单击路径按钮，并在形状下拉面板中选择五角星图案，然后在窗口中拖拽创建一个五角星路径，如图01所示。
自己动手用Dreamweaver制作活动菜单条
用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋友都想在自己的网页中加入类似的东东，经过共同摸索发现用Dreamweaer就可以实现这种效果，下面我们通过一个活动菜单条的制作来看看吧。 第1步：制作菜单外貌 图1 在Dreamweaer中新建一个文件，绘制一个层，在该层中插入一个表格(如图1)，对该表格进行修饰，然后加入菜单项并建立各项的超链接，为了去掉超链接的下划线，可以编辑超链接的CSS样式，在CSS样式面板中通过CSS选择器将“Link”和“Hover”的“Decoration(装饰)”均设置为“None(无)”，将“Hover”的“Color(颜色)”设置为红色，最后将设置好的样式应用到各个菜单条中(可按“F12”键预览效果)。 第2步：设计菜单的动态效果 1、选定层面，当鼠标变成“十”字形时按住左键将层面拖动到页面右上角(使整个菜单条完全露出但上边缘正好靠拢页面上边界)，在窗口菜单中打开时间线面板，选定层面将其拖动到时间线上，Dreamweaer会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧。然后在第15帧处单击右键，在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并将层面拖动到适当位置(如图2)。在时间线窗口中的第15帧处再次单击右键，在弹出的快捷菜单中选择“添加动作”，为该帧添加一个交互行为，Dreamweaer将自动打开行为面板。单击行为面板中的“+”按钮，从弹出的菜单中选择“Timeline/Stop Timeline”，打开“Stop Timeline”对话框，选择“Timeline1”后单击“确定”按钮关闭该对话框。交互行为的事件为“onFrame15”，动作为“Stop Timeline”，这样当时间线运行到第15帧时，动画将停止播放，这样就实现了菜单条弹回的功能。图2 2、用同样的方法在时间线的第30帧处也添加一个“Stop Timeline”的交互行为，这样就实现了菜单弹出的功能。添加了这两个交互行为后，在时间线窗口的相应帧上面都出现了一个蓝色方块，它代表一个交互行为。选择“自动播放和循环”复选框，使动画能够自动循环播放(如图3)。图3
最新发布
用CSS设计高用户体验的web文字大小
在设计网络应用时，您必须决定如何编辑字体。使用CSS时存在大量选项，每个开发者都有自己的喜好。本文主要讨论字体大小和网络应用内的操作。 字体大小 CSS2规范根据长度――水平和垂直尺寸――来定义字体。这个长度为一个数值，前面可能带一个可选的加(+)或减(-)标记符。另外，该数值后可能有一个可选的单位标识符。 另外，CSS2规范定义了两个单位类型:绝对单位和相对单位。绝对值指定单位，而相对单位指定一个与另一个值成比例的值。下面的列表列出了相对单位标识符: 下面是有效的绝对单位标识符: 测量绝对大小的另一种方法是使用衡量一个值的比例因数，应用以下关键字:最小、较小、小、中、大、较大和最小。中为基值，变小就减去一个因数，变大就增加一个因数，等等。CSS2规范定义的比例因数为1.2，这个值也可能依浏览器而变化。 还可以应用百分比值来格式化文本。百分比值是一个可选的标记符，即数字后带有一个百分比符号(%)。百分比值总是与另一个值成比例。就字体而言，它与网页的基本字体大小成一定比例。 如您所见，有许多方法可完成呈现文本这个看似简单的任务。下面的HTML格式文本(在段落元素中)应用了各种单位标识符。其中所有的值都相等，并假定以72dpi进行显示。 您可以在这个列表中增加像素值，但它的值要依环境而定。例如，我的分辨率为1280X1024的手提电脑将显示与在上表中使用50像素值一致的文本。
对css滑动门技术的一些总结和归纳
其中有个人说"如果你是高手,那你就详细介绍一下css滑动门技术",这句话把我刺激了,于是我连夜从网上搜罗了一些关于css滑动门技术的东西,并且自己做了一个滑动门,事实上在学习css滑动门技术之前,我发现我已经做过很多类似的菜单效果,最有代表性的就是搜狗网址导航的搜索框,后来这个效果被广泛运用到搜狗的搜索引擎当中,我在这里总结一下一些css滑动门的知识,希望能给大家对css的学习起到一个帮助作用,另外结合javascript,css可以制作出更多炫目的效果. 背景: 从我的理解来讲,css滑动门是被刺激出来的,因为很多人认为css并不能做出漂亮的网页,但是事实上恰恰相反,css不仅能做出相当漂亮的网页,还可以很好得把内容和表现分开,给设计师和开发人员更大的空间去发挥; 定义: 滑动门技术就是:当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化，从而区别于该组的其他导航按钮，提示给操作者，当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容。这种效果的一大好处在于，在多导航的页面上能够清晰地反映当前浏览内容隶属于哪个栏目或者哪个类，同时给人以美观、清晰、明了的视觉感受。滑动门技术的主角是被操作的对象，也就是这里被点击的对象，其CSS特性主要是指该导航按钮包括其中的其它元素的属性发生变化，当然，这个按钮的形式可以是BUTTON、A、TD甚至可以是P或者DIV这样的闭合元素，它们的属性主要是指这个元素的边框、背景、字体的颜色、大小、粗细以及外间距和内间距等等，总之，其一切可以把自身的“地位”区别于其它属主的属性都可以被应用起来使用在滑动门技术上。 应用范围: 网站导航菜单 技术要点: 1.用无序列表ul和li组成菜单结构 2.给li设置背景(如果有圆角,则设置为右置或左置,背景图片远远超过该子菜单的长度)
网站重构 CSS样式表的优化与技巧
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。 二.明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。 三.区分大小写 当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。 class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。 四.取消class和id前的元素限定 当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，clas s可以在页面中多次使用。你限定某个元素毫无意义。例如:
使用图片和CSS结合制作动画按钮
很多时候大家可以看到FLASH里面的按钮可以是动画的,而大部分HTML作出来的按钮都是单帧切换的.其实做成动画也是可行的.先看看下面的预览图片鼠标移动上去,鼠标点击,鼠标移开下面是实际效果，亲自体验一下 .temp1 a{display:block;height:31px;width:88px;background-image:url(http://www.syku.net/web/UploadFiles_5065/200612/20061209091641612.gif)} .temp1 a:hover{background-image:url(http://www.syku.net/web/UploadFiles_5065/200612/20061209091641694.gif)} .temp1 a:active{background-image:url(http://www.syku.net/web/UploadFiles_5065/200612/20061209091642451.gif)} .temp2 a{display:block;height:31px;width:88px;background-image:url(/design/UploadFiles_design/200806/2008062023300288.gif)} .temp2 a:hover{background-image:url(/design/UploadFiles_design/200806/2008062023300299.gif)} .temp2 a:active{background-image:url(/design/UploadFiles_design/200806/2008062023300241.gif)} a{display:block;height:31px;width:88px;background-image:url(图1)}a:hover{background-image:url(图2)}a:active{background-image:url(图3)}其实最重要的是在动画图片本身首先看看这个图片,似曾相识把.原理是一样的
导航上用CSS标志当前页效果的实现
当前页面--比如说现在的页面是首页，那么在导航栏上首页的色彩等和其他栏目有所不 同，用以给浏览者一个明显的指示。下面来说下具体的做法，菜单的基本实现和一般的CSS菜单没多大区别，着重说下如何 实现当前页。设菜单有5个栏目：home、about、products、services、contact，分别给每个栏目一 个ID，m1-m5，CSS可写成如下： #home #nav li#m1 a, #about #nav li#m2 a, #products #nav li#m3 a, #services #nav li#m4 a, #contact #nav li#m5 a{ color: #FFF; background: #DC4E1B url(navbg.gif) no-repeat; } xhtml：<ul id="nav"> <li id="m1"><a href="index.html">Home</a></li> <li id="m2"><a href="about.html">About</a></li> <li id="m3"><a href="products.html">Products</a></li> <li id="m4"><a href="services.html">Services</a></li> <li id="m5"><a href="contact.html">Contact</a></li> </ul> 然后分别给每个页面的bady标签一个独立的ID，例如给首页的ID是home，其余的类推 。 这样做法的好处是每个页面的菜单都是一样的，方便修改，动态页包含也容易。
通过Dreamweaver设计网页时组织CSS的建议
代码式（Inline）：写入到代码中的一次性的样式。 内嵌式（Embedded）：可控制一个页面中所有元素的样式表 外联式（External）：可控制许多页面中的元素的样式表 事实上，许多站点都根据需要把这三种方式结合起来使用。 在使用CSS时一个需要重点考虑的事实是不同的浏览器以及同一浏览器的不同版本以不同的方式来解析CSS。除了网络浏览器的差异之外，你还要意识到还有很多其他的浏览器，比如听力浏览器，基于电视的浏览器以及Palm pilot和TTY（teletypewriter，远程打字机）一类的手持设备。 最佳习惯是指什么？ 大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范，但按照现有标准来使用CSS却还是不无裨益的。一般来说，开发人员应尽可能将内容与报告分离开来。这样做的好处在于： 1：增加站点的寿命 不规范的样式表可能在当时觉得很方便，但新版本的浏览器出来以后，很可能就会出现兼容性问题。到时逐页修改站点就是一项非常费时的工作同时也使使用CSS失去了意义。 2：让你的站点对所有的用户以及浏览器都适用。 有些地方的*已经立法要求网站必须让残障人士也同样可以浏览。为残障认识设计的浏览设备，比如听力浏览器，对CSS规范性要求极其严格。 3：让站点更新和维护更加轻松。
引入样式表(css)的四种方式
一、使用STYLE属性： 将STYLE属性直接加在个别的元件标签里。 <元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}例如： <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。二、使用STYLE标签： 将样式规则写在<STYLE>...</STYLE>标签之中。 <STYLE TYPE="text/css"><!--样式规则表--> </STYLE>例如： <STYLE TYPE="text/css"><!--BODY { color: BLUE; background: #FFFFCC; font-size: 9pt}TD, P { COLOR: GREEN; font-size: 9pt}--></STYLE>通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。三、使用 LINK标签： 将样式规则写在.css的样式档案中，再以<LINK>标签引入。 假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的<head></head>部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。 四、使用@import引入： 跟LINK用法很像，但必 放在<STYLE>...</STYLE> 中。 <STYLE TYPE="text/css"><!-- @import url(引入的样式表的位址、路径与档名);--></STYLE> 例如： <STYLE TYPE="text/css"><!-- @import url(http://yourweb/ example.css);--></STYLE>要注意的是，行末的分号是绝对不可少的！
修饰之美：CSS在表格边框上的美学应用
具体内容包括：上边框宽度、右边框宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样式、上边框、下边框、左边框、右边框、边框、宽度、高度、有关标签等。 1.上边框宽度 语法: border-top-width: <值> 允许值: thin | medium | thick | <长度> 初始值: medium 适用于: 所有对象 向下兼容: 否 上边框宽度属性用于指定一个元素上边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在上边框、边框的宽度或边框的属性略写。 2.右边框宽度 语法: border-right-width: <值>
20 个优秀 CSS 网站
从这些 CSS Gallery 网站中精选了 20 个比较漂亮的 XHTML＋CSS 布局网站。推荐给喜欢网页设计的人，无论是做博客模板还是做网站设计，在设计理念、色调、导航条、按钮、排版布局方面，都有一些值得借鉴的地方。1、www.apple.comminmax_bound="true">刚刚改版的苹果官网，配合即将上市的 Leopard 风格。2、www.youtilize.comminmax_bound="true">这种布局和色彩搭配很适合我的口味。3、www.pingdom.comminmax_bound="true">一个测试网站连接和内容 (包括 HTML, CSS, JS 和图片) 加载时间的服务。4、www.workhabit.orgminmax_bound="true">5、www.web2themes.comminmax_bound="true">这是一个 WordPress 主题，特别之处就是加入一些人的剪影作为网页元素。6、www.zik.frminmax_bound="true">7、www.ashwebmedia.comminmax_bound="true">8、maczone.skminmax_bound="true">9、www.joshuadunaway.netminmax_bound="true">
CSS:标准的 语义的 非侵入的页签切换
自从Yahoo!的首页引进页签（tab, 见下图）之后，这种可用性极佳的方式越来越受欢迎，用户也逐步习惯和喜欢上它，因为它可以在原有的空间上增加更多的可用信息，而且只需切换，不需刷新整个页面，浏览更舒畅。很多网站接受并使用，如新浪等。 页签的标记结构 那么，让我们来看看这些页签后的代码。 新浪完全不考虑什么标准，就是表格嵌套，我们略过不提。Yahoo!的XHTML形式是这样的：<div> <ul> <li>页签1</li> <li>页签2</li> ... </ul> </div> <div> <div>内容1</div><!--它们可能由Ajax载入--> <div>内容1</div> ... </div> ... 符合标准，但却没有语义。页签和相应内容没有任何关联。也就是说，在没有CSS展现的情况下，用户并不晓得页签究竟对应哪一块内容。而且就JavaScript实现来说，必须对元素定义更多的id或者class作为调用钩子（hook），容易造成代码冗余。有人对此作出改良，使用连接元素的hash（即#号后的字段）跟内容进行关联，即下面这种形式：<div> <ul> <li><a href="#content1">页签1</a></li> <li><a href="#content2">页签2</a></li> ... </ul> </div> <div> <div id="content1">内容1</div><!--它们可能由Ajax载入--> <div id="content2">内容1</div> ... </div> ... 这种方式对于机器来说，确实找到了关联点，而且用户点击的时候，也能在hash的作用下（传统说法中的“锚点”）调到相应的内容区块。有进步，但还是不够语义。 语义，语义，语义！