推荐阅读
(6-9):制作网页翻转按钮
大家经常在一些网页中看到一种会随着鼠标的接触而变色的按钮，参见范例网页。这称之为鼠标翻转效果，这是根据英文rollover翻译而来的，其实不是很符合中文的语境。其原理是利用两张图片，平时显示一幅，当鼠标接触后换成另外一幅图片。如下图。这样看起来好像是鼠标接触的时候按钮变亮了。现在我们来动手制作，首先在Photoshop中将它们制作成图片，然后再做成网页。首先新建一个400×300的白底图像，新建一层，利用形状工具椭圆〖U/SHIFTU〗，在公共栏选择第3种绘图方式(填充像素)，调出信息调板〖F8〗观看数值，用任意颜色在新建层中间位置画一个直径40左右的正圆(按住SHIFT保持正圆)。如下左图。0614【窗口>样式】调出样式调板，点击右上角圆三角按钮，选择“替换样式”，在出来的样式列表目录中选择“Web翻转样式”，确认目前选择的是新建层，然后使用“选中状态的蓝色胶体按钮”样式。如下中图红色箭头处。大家也可以自己选择其他颜色的。0615将新建层与背景层合并，然后【图像>修整】，如下右图所示。确定操作后图像将被裁剪为和所画的圆同等大小。这个命令的作用是根据左上角第一个像素处，或右下角最后一个像素处的颜色，在我们这幅图像中这两个地方都是白色。然后就将画面中连续的白色部分裁剪掉。这就好像现实中打印图像之后将纸张的边缘裁剪掉一样。接着将背景图层复制一层，对复制出来的图层使用曲线工具，合并高光和暗调区域(高光点229,255；暗调点60,0)，形成加亮按钮的效果。如下左图。完成后我们得到两个图层，分别是暗色按钮的背景层，和亮色按钮的背景复制层。如果以上步骤无法完成，点此下载范例文件0616使用【文件>在ImageReady中编辑】〖CTRLSHIFTM〗，或点击工具栏最下方按钮，将会跳转到ImageReady中，这是Photoshop附带的一个软件，用来制作动画和网页。我们找到Web内容和图层两个调板，如下右图。后面的操作就是由这两个调板配合完成。 在完成以上5个步骤后，我们就可以开始制作鼠标翻转效果了。开始之前我们先简要介绍一下制作的原理。范例网页大家也看过，是随着鼠标的接触而发生的。这里涉及一种概念，叫事件和方法。我们的日常生活就是由许多事件和方法组成的，比如口渴是事件，喝水就是解决这个事件的方法。肚子饿是事件，吃东西就是方法。想学习是事件，看《大师之路》就是方法等等。这其实就是一种编程的思想，和人一样，电脑也是由事件和方法组成的一套逻辑系统。所以下面我们也要按照这种思路，去创建一个事件和解决方法。这个事件就是鼠标接触事件。平时鼠标不接触，我们只显示暗色按钮层(背景层)。而在鼠标接触的事件发生后，显示亮色按钮层(背景副本层)。
AutoCAD 2007 入门教程-CAD图形的输入输出
AutoCAD 2007 提供了图形输入与输出接口。不仅可以将其他应用程序中处理好的数据 传送给 AutoCAD ，以显示其图形，还可以将在 AutoCAD 中绘制好的图形打印出来，或者 把它们的信息传送给其他应用程序。此外，为适应互联网络的快速发展，使用户能够快速有效地共享设计信息， AutoCAD 2007 强化了其 Internet 功能，使其与互联网相关的操作更加方便、高效，可以 创建 Web 格式的文件 (DWF) ，以及发布 AutoCAD 图形文件到 Web 页。 AutoCAD 2007 除了可以打开和保存 DWG 格式的图形文件外，还可以导入或导出其他格式的图形。 导入图形 在 AutoCAD 2007 的 “ 插入点 ” 工具栏中，单击 “ 输入 ” 按钮将打开 “ 输入文件 ” 对话框。在其中的 “ 文件类型 ” 下拉列表框中可以看到，系统允许输入 “ 图元文件 ” 、 ACIS 及 3D Studio 图形格式的 文件。 在 AutoCAD 2007 的菜单命令中没有 “ 输入 ” 命令，但是可以使用 “ 插入 ” | 3D Studio 命令、 “ 插入 ” | “ ACIS 文件 ” 命令及 “ 插入 ” | “ Windows 图元文件 ” 命令，分别输入上述 3 种格式的图形文件。 插入 OLE 对象 选择 “ 插入 ” | “ OLE 对象 ” 命令，打开 “ 插入对象 ” 对话框，可以插入对象链接或者嵌入对象。 输出图形 选择 “ 文件 ” | “ 输出 ” 命令，打开 “ 输出数据 ” 对话框。可以在 “ 保存于 ” 下拉列表框中设置文件输出的路径，在 “ 文件 ” 文本框中输入文件名称，在 “ 文件类型 ” 下拉列表框中选择文件的输出类 型，如图元文件、 ACIS 、平板印刷、封装 PS 、 DXX 提取、位图、 3D Studio 及块等。
自己动手制作活动菜单条
用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋友都想在自己的网页中加入类似的东东，经过共同摸索发现用Dreamweaer 就可以实现这种效果，下面我们通过一个活动菜单条的制作来看看吧。 第1步：制作菜单外貌 在Dreamweaer 中新建一个文件，绘制一个层，在该层中插入一个表格（如图1），对该表格进行修饰，然后加入菜单项并建立各项的超链接，为了去掉超链接的下划线，可以编辑超链接的Css样式，在CSS样式面板中通过CSS选择器将“Link”和“Hover”的“Decoration（装饰）”均设置为“None（无）”，将“Hover”的“Color（颜色）”设置为红色，最后将设置好的样式应用到各个菜单条中（可按“F12”键预览效果）。 第2步：设计菜单的动态效果 1、选定层面，当鼠标变成“十”字形时按住左键将层面拖动到页面右上角（使整个菜单条完全露出但上边缘正好靠拢页面上边界），在窗口菜单中打开时间线面板，选定层面将其拖动到时间线上，Dreamweaer会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧。然后在第15帧处单击右键，在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并将层面拖动到适当位置（如图2）。
数码摄影10个技巧
以前一定听过这种话：数码相机(以下用DC)无所不能。你只要按下按钮，一张伟大的照片就会变魔术般展现在你面前。相机越好，照出来的照片越好。果真如此吗?见鬼，当然不是了! 事实是你可以用一个简单的消费级傻瓜DC拍出一张伟大的照片，也可以用最贵的DC拍出一张垃圾照片。漂亮的照片不是相机搞出来的，而是摄影师搞出来的。只要有一些拍摄方面的知识，再加上不断改进的愿望，你可以用你的小DC拍出能登上时代周刊的大照片。 为了帮助你在成为伟大摄影师的道路上快步前行，这里送给你10个技巧，它们会让你即使不花大价钱买昂贵的设备也能像专业人士一样拍照。 1.暖化你的照片 你注意过有些时候你拍的照片有一种冷冷的感觉吗?如果答案是肯定的，那你并不是孤独呵呵。DC的默认白平衡设置是“自动(auto)”，虽然在大部分情况下都是适用的，但有时候却会让景物太“冷”了。 当你拍户外景物的时候，特别是当阳光充足时，试着把你的白平衡调到“多云(cloudy)”那一档。对，就是“多云”那一档，这个变化跟在你的镜头前加一个暖色滤镜的效果是一样的。它使得照片中红色和黄色的更加丰满，从而暖化了这张照片 图1a是在一个山区拍摄的，白平衡设置在“自动(auto)” 图1b 同一个场景，我把白平衡换成了“多云(cloudy)”，同时把一副Costa Del Mar太阳镜放在了镜头前(佳能PowerShot S200,程序模式program mode) 如果你不相信我，那就试试吧。在户外分别用自动白平衡和多云白平衡拍两组照片，然后在你的电脑上对比着看，我猜你一定会喜欢看上去暖洋洋的那一组的 2.用太阳镜做偏振镜
最新发布
在 Dreamweaver CS5中折叠和展开面板图标
您可以将面板折叠为图标以避免工作区出现混乱。在某些情况下，在默认工作区中将面板折叠为图标。 折叠为图标的面板 从图标展开的面板 若要折叠或展开列中的所有面板图标，请单击停放区顶部的双箭头。若要展开单个面板图标，请单击它。若要调整面板图标大小以便仅能看到图标（看不到标签），请调整停放的宽度直到文本消失。若要再次显示图标文本，请加大停放的宽度。若要将展开的面板重新折叠为其图标，请单击其选项卡、其图标或面板标题栏中的双箭头。若要将浮动面板或面板组添加到图标停放中，请将其选项卡或标题栏拖动到其中。（添加到图标停放中后，面板将自动折叠为图标。）
DreamWeaver CS5下载安装使用体验
官方说的是五月发布，果不其然，已经有试用版下载了。由于新租房的带宽4.5M，当前自己一人独享，下载挺快的。估计还有三十分钟完成的时候，出去解决温饱，回来时已经下载好了。赶忙解压，安装。取消一些不常用的组件：安装过程中.......安装完成：第一次运行时出来的：
在 Dreamweaver 文档窗口中的视图之间切换
您可以在“文档”窗口中通过“代码”视图、“拆分代码”视图、“设计”视图、“代码”视图和“设计”视图（拆分视图）或“实时”视图查看文档。您还可以选择水平或垂直查看拆分“代码”视图或代码和“设计”视图。（默认是水平显示。） 选择“查看”>“代码”。在“文档”工具栏中，单击“显示“代码”视图”按钮。 拆分“代码”视图将文档拆分为两部分，以便您可以同时对代码的这两部分进行操作。选择“查看”>“设计”。在“文档”工具栏中，单击“显示“设计”视图”按钮。 选择“查看”>“代码和设计”。在“文档”工具栏中，单击“显示“代码”视图和“设计”视图”按钮。
在Dreamweaver 中设置 FTP 连接的选项
如果使用 FTP 连接到 Web 服务器，请使用此设置。 单击“添加新服务器”按钮，添加一个新服务器选择一个现有的服务器，然后单击“编辑现有服务器”按钮下图显示了已填充文本字段的“服务器”类别的“基本”屏幕。 “站点设置”对话框的“服务器”类别的“基本”屏幕。 FTP 地址是计算机系统的完整 Internet 名称，如 ftp.mindspring.com。请输入完整的地址，并且不要附带其它任何文本。特别是不要在地址前面加上协议名。如果不知道 FTP 地址，请与 Web 托管服务商联系。如果不能确定应输入哪些内容作为根目录，请与服务器管理员联系或将文本框保留为空白。在有些服务器上，根目录就是您首次使用 FTP 连接到的目录。若要确定这一点，请连接到服务器。如果出现在“文件”面板“远程文件”视图中的文件夹具有像 public_html、www 或您的用户名这样的名称，它可能就是您应该在“根目录”文本框中输入的目录。
特殊输入框效果
这也算是输入框一个小小的特殊效果吧。。。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>*{padding:0px;margin:0px;}p{background:#fff; border: 1px solid #000;padding:2px;height:21px; overflow:hidden;}input{float:left;background:#ddd;border:0px; height:21px; width:100%;}</style></head><body><div style=" width:500px;"> <p> <input type="text" name="textfield" /> </p></div></html>
五款符合WEB标准的纯div+css弹出菜单
一、最基本的：二级dropdown弹出菜单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>二级dropdown弹出菜单--A CROSS BROWSER Drop DOWN CASCADING VALIDATING MENU</title> <style type="text/css"> /* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { font-family: arial, sans-serif; width:750px; margin:0; margin:50px 0; } /* remove the bullets and set the margin and padding to zero for the unordered list */ .menu ul { padding:0; margin:0; list-style-type: none; } /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */ .menu ul li { float:left; position:relative; } /* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */ .menu ul li a, .menu ul li a:visited { display:block; text-align:center; text-decoration:none; width:104px; height:30px; color:#000; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; line-height:30px; font-size:11px; } /* make the dropdown ul invisible */ .menu ul li ul { display: none; } /* specific to non IE browsers */ /* set the background and foreground color of the main menu li on hover */ .menu ul li:hover a { color:#fff; background:#b3ab79; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li:hover ul { display:block; position:absolute; top:31px; left:0; width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li:hover ul li a { display:block; background:#faeec7; color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li:hover ul li a:hover { background:#dfc184; color:#000; } </style> <!--[if lte IE 6]> <style type="text/css"> /* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */ /* Get rid of any default table style */ table { border-collapse:collapse; margin:0; padding:0; } /* ignore the link used by 'other browsers' */ .menu ul li a.hide, .menu ul li a:visited.hide { display:none; } /* set the background and foreground color of the main menu link on hover */ .menu ul li a:hover { color:#fff; background:#b3ab79; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li a:hover ul { display:block; position:absolute; top:32px; left:0; width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li a:hover ul li a { background:#faeec7; color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li a:hover ul li a:hover { background:#dfc184; color:#000; } </style> <![endif]--> </head> <body> <div class="menu"> <ul> <li><a class="hide" href="../menu/index.html">DEMOS</a> <!--[if lte IE 6]> <a href="../menu/index.html">DEMOS <table><tr><td> <![endif]--> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li> <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="index.html">MENUS</a> <!--[if lte IE 6]> <a href="index.html">MENUS <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../layouts/index.html">LAYOUTS</a> <!--[if lte IE 6]> <a href="../layouts/index.html">LAYOUTS <table><tr><td> <![endif]--> <ul> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../boxes/index.html">BOXES</a> <!--[if lte IE 6]> <a href="../boxes/index.html">BOXES <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../mozilla/index.html">MOZILLA</a> <!--[if lte IE 6]> <a href="../mozilla/index.html">MOZILLA <table><tr><td> <![endif]--> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../ie/index.html">EXPLORER</a> <!--[if lte IE 6]> <a href="../ie/index.html">EXPLORER <table><tr><td> <![endif]--> <ul> <li><a href="../ie/exampleone.html" title="Example one">example one</a></li> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../opacity/index.html">OPACITY</a> <!--[if lte IE 6]> <a href="../opacity/index.html">OPACITY <table><tr><td> <![endif]--> <ul> <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> <!-- clear the floats if required --> <div class="clear"> </div> </div> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 二、三级dropdown弹出菜单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三级dropdown弹出菜单</title> <style type="text/css"> /* common styling */ .menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#36f;} .menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#ddd; color:#000;} .menu ul li:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} .menu ul li:hover ul li:hover ul.left {left:-105px;} </style> <!--[if lte IE 6]> <style type="text/css"> .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a:hover {color:#fff; background:#36f;} .menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} .menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} .menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;} .menu ul li a:hover ul li a:hover ul.left {left:-105px;} </style> <![endif]--> </head> <body> <div class="menu"> <ul> <li><a class="hide" href="../menu/index.html">DEMOS</a> <!--[if lte IE 6]> <a href="../menu/index.html">DEMOS <table><tr><td> <![endif]--> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a> <!--[if lte IE 6]> <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK > <table><tr><td> <![endif]--> <ul> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li> <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="index.html">MENUS</a> <!--[if lte IE 6]> <a href="index.html">MENUS <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../layouts/index.html">LAYOUTS</a> <!--[if lte IE 6]> <a href="../layouts/index.html">LAYOUTS <table><tr><td> <![endif]--> <ul> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../boxes/index.html">BOXES</a> <!--[if lte IE 6]> <a href="../boxes/index.html">BOXES <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../mozilla/index.html">MOZILLA</a> <!--[if lte IE 6]> <a href="../mozilla/index.html">MOZILLA <table><tr><td> <![endif]--> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../ie/index.html">EXPLORER</a> <!--[if lte IE 6]> <a href="../ie/index.html">EXPLORER <table><tr><td> <![endif]--> <ul> <li><a href="../ie/exampleone.html" title="Example one">example one</a></li> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../opacity/index.html">OPACITY</a> <!--[if lte IE 6]> <a href="../opacity/index.html">OPACITY <table><tr><td> <![endif]--> <ul> <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a> <!--[if lte IE 6]> <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK <table><tr><td> <![endif]--> <ul class="left"> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> </div> </body> </html>
CSS3新增background-clip及background-origin属性简介
CSS代码： 不足之处：此效果在 Opera 下无法实现。当然这只是一种对 HTML 代码有洁癖的解决方法（限于对 background-clip 和 background-origin 属性的学习和理解），当然也可尝试其他方法，也许会使 CSS 更简洁，至于各种方法的优缺点由您自己衡量。
第二章：配置IIS虚拟目录
12.改名后我们用记事本打开这个名为“index.asp”的文件，然后在文件中输入下面的代码。 这个代码的意思是取得当前系统的时间。这是一段简单的ASP代码。 输入后我们保存好该文件。 如下图 15.然后我们再到IIS中单击刚才建立的虚拟目录“GuestBook”你将会看到目录下已经存在了名为“index.asp”的文件。如下图 16.选中“index.asp”文件，单击右键，选择浏览。如下图 17.你将会看到如下图的运行结果。 到此你的IIS虚拟目录就完美成功了。
基础（1）Adobe Dreamweaver CS3 工作区简介
A. “插入”栏 B. 文档工具栏 C. “文档”窗口 D. 面板组 E. 标签选择器 F. “属性”检查器 G. “文件”面板A. 显示代码视图 B. 显示代码视图和设计视图 C. 显示设计视图 D. 文档标题 E. 文件管理 F. 在浏览器中预览/调试 G. 刷新设计视图 H. 视图选项 I. 可视化助理 J. 验证标记 K. 检查浏览器兼容性A. 标签选择器 B. 选取工具 C. 手形工具 D. 缩放工具 E. 设置缩放比率 F. 窗口大小弹出菜单 G. 文档大小和估计的下载时间常用类别 用于创建和插入最常用的对象，例如图像和表格。 布局类别 用于插入表格、div 标签、框架和 Spry 构件。您还可以选择表格的两种视图：标准（默认）表格和扩展表格。 表单类别 包含一些按钮，用于创建表单和插入表单元素（包括 Spry 验证构件）。 数据类别 使您可以插入 Spry 数据对象和其它动态元素，例如记录集、重复区域以及插入记录表单和更新记录表单。 Spry 类别 包含一些用于构建 Spry 页面的按钮，包括 Spry 数据对象和构件。 文本类别 用于插入各种文本格式和列表格式的标签，如 b、em、p、h1 和 ul。 收藏夹类别 用于将“插入”栏中最常用的按钮分组和组织到某一公共位置。 服务器代码类别 仅适用于使用特定服务器语言的页面，这些服务器语言包括 ASP、ASP.NET、CFML Basic、CFML Flow、CFML Advanced、JSP 和 PHP。这些类别中的每一个都提供了服务器代码对象，您可以将这些对象插入“代码”视图中。编码工具栏概述 “编码”工具栏包含可用于执行多种标准编码操作的按钮，例如折叠和展开所选代码、高亮显示无效代码、应用和删除注释、缩进代码、插入最近使用过的代码片断，等等。“编码”工具栏仅在“代码”视图中才是可见的，它垂直显示在“文档”窗口的左侧。 样式呈现工具栏概述 “样式呈现”工具栏（默认情况下隐藏）包含一些按钮，如果使用依赖于媒体的样式表，这些按钮使您能够查看设计在不同媒体类型中的呈现方式。它还包含一个允许您启用或禁用 CSS 样式的按钮。若要显示该工具栏，请选择“查看”>“工具栏”>“样式呈现”。
Dreamweaver CS4实例教程―新特性应用之菜单制作
拿到Dreamweaver CS4，迫不及待想尝尝鲜，看看她倒地能给我们带来什么样的体验。本教程适合于网页设计初学者，通过本教程，你可以制作出当前流行的网页特效，并且，他们都符合w3c xhtml1.0 Transitional规范。偷个懒，我们这次采用Dreamweaver CS4的模板来布局，省去了不少功夫。模板预览图中的弹簧表示这个页面是可以根据浏览器的设置显示改变大小的，比如将字体大小设置为大，那么页面会相应的增加，保持比例，我们可以看到，源码中css的定义，width的单位为em,说明宽度是字体高度的x备，这里，我们把模板改成了适合1024以上分辨率的宽度――60em. .thrColElsHdr #container { width: 60em; /* 当文本保持浏览器的默认字体大小时，此宽度将创建一个适合 800px 浏览器窗口的容器 */ background: #FFFFFF; /* 自动边距（与宽度一起）会将页面居中 */ border: 1px solid #000000; text-align: left; /* 这将覆盖 body 元素上的“text-align: center”。 */ margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;} 不知道怎么修改网页宽度吗？看看下图，在css面板中，点击选项卡，全部，双击.thrColElsHdr #container，按下图设置非常好！瞬间一个完美的布局已经创建好，接下来要做的就是按自己的意愿，来让网页变得更漂亮我们使用dreamweaver cs4的一项新功能来创建导航条，Spry (Spry 框架是一套包含JavaScript,CSS,和一些图片文件的客户端JavaScript库。支持XML数据集，动态区域，组件，动画效果。)怎么做？在菜单栏中选择“插入”-“SPRY”-“SPRY菜单栏”，插入的位置选择在布局sidebar1中，当然要先删掉原来的文字内容。修改设置：点击插入的导航条区域上面蓝色的柄，可以在属性栏中对导航条进行设置，操作方法很简单，可以通过+-来增减项目，然后可以在右边编辑文本、连接等信息，右侧还可以设置是否有子菜单、三级菜单。是不是很方便？最重要的是这个弹出菜单和dw8相比，有很多优势，可以说是现在的主流。