DREAMWEAVER网页制作和css实例Word格式文档下载.docx
《DREAMWEAVER网页制作和css实例Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《DREAMWEAVER网页制作和css实例Word格式文档下载.docx（24页珍藏版）》请在冰豆网上搜索。
选择你的色彩体系
事实上色系的选择会表达专门多个人因素，如何说每个人都会有各自的色彩偏好，你的选择也会彰显你的个人风格。
没人能建议你〝必须选择什么颜色〞，那个地点我也只能提供一些个人认为比较有用的意见：
1.使用至少一种高饱和度、高辨识度的色彩，并以其色调定义站点的整体基调。
把那个色彩运用在文本链接上，能使其更加显眼、引人关注；
2.谨记不要在一张页面中使用过多的颜色，如此只会让你的网页看起来专门花哨纷杂。
我的建议是最好保持在三种之内：
一个强调色和两个辅色；
在颜色的搭配上，不论是主色依旧辅助色，都要善于通过它们明度变化来衍生更多的色彩，假如只是反复的使用三种以下的颜色未免会让人感受单调，因此这也不是意味着颜色变化越多你的页面看起来就会越杰出，仍旧要视乎网站的整体风格和设计者对颜色的驾驭能力：
在PS中我们能够通过在色相/饱和度〔Ctrl+U〕面板中调整参数来调配颜色。
事实上图中的几组颜色确实是通过这种方法调制出来的，因此在那个面板中能够变化出专门多颜色，具体哪个参数应该什么缘故值都没有硬性的规定，网络上有专门多举荐的色彩组合并明确给出了RGB值，大伙儿在利用这种方法配色的时候也能够参考那些文章教程。
假如你看了上面的讲解之后仍旧不明白如何着手，这段关于颜色的影片或许会对你有所关心。
事实上我觉得每个人都应该去看一下那个影片，不仅因为它本身设计得相当有味，更重要的是关于认识和了解大众化的色彩体验和感知从而运用到网页设计中，它差不多上一个专门好的引导和巩固。
是时候开始绘制背景图案了
现在我们开始讨论网页的背景图案。
当我们在PS等软件中创作背景图案时，往往要精细到像素，专门是那些平铺填充的背景。
第一我们在PS中新建一个30x像素的空白文档，填充适当的颜色，并用铅笔工具在其上绘制一些单像素小点，下面是一些例子：
如第一讲中导航按钮上的小点一样，在那个地点你也能够尽量的发挥自己的创意，然而依旧有几个需要注意的地点，比如小点的颜色，不能跟背景色反差太大，不然平铺以后它们会变得专门耀眼。
假如要利用小点来组合出一些图案或线条，我通常会采纳复制图层并通过方向键调整其位置的方法，适当的时候还会变化其图层模式或透亮度等。
制作这些背景图案的一个难点确实是，如何保证图案平铺时能实现无缝接合，如何说背景的面积往往比较大，它上面假设有割裂就会专门显眼。
我通常采纳的方法是利用PS中的矩形选框工具，比如以下图中，正方形选区左上角标识出的像素必须与其它三个标识区一致，那么当我们把如此一块区域截取下来进行平铺的时候就可不能有问题：
因此那个问题是否容易解决，也是视乎你最初设计的背景图案，假如我们动手的时候就把可能遇到的一些问题考虑在内，那么到解决的时候也可不能太费劲甚至返工了。
CSS混沌初开III:
顶部图片视觉修饰
这节是关于素材设计的最后一部分了，设计工作完成后将会开始讲解如何切片以及在CSS和XHTML中构建最终页面。
第一看一下这节设计的成效图：
在制作按钮时，我用了粉红和暗绿两种色调，可能看起来有点怪，但个人专门钟意那个组合。
在设计网页整体界面的过程中，我会给出一些意见和建议，重点是顶部的图片，如何增加一些细节，让它看起来更加的美观、精巧。
顶部图片的视觉处理
在教程的前两部分中，提到过导航按钮的颜色选择，现在我们来看一下如何处理一张花卉图像的色调，使其与页面的风格达到统一。
在用到的花卉图像素材中，大伙儿能够发觉它上面也有红和绿两种色调，我要做的情况确实是把其中的颜色调制成粉红和暗绿，就看起来导航菜单中使用的色调一样：
第一来看一以下图片中花朵的颜色，它的色调偏向于大红，依旧使用PS中的色相/饱和度命令来对它进行调整。
利用快捷键按Ctrl+U调杰出相/饱和度面板，在〝编辑〞项的下拉列表中选择〝红色〔Ctrl+1〕〞，如此我们就能只针对图像中的红色进行调整了。
拖动色相滑块调制出我们需要的红色，具体的数值依据实际情形，比如我那个地点是大致是-30左右：
下一步确实是通过修饰细节增加一些辅助色调来增进视觉成效，为接下来的滤镜处理作一些预处理。
顶部图片的处理对创意有一定的要求，假如有相关的体会的话也就不是件难事，因此素材处理能力以及个人的美工基础都会对设计过程、设计结果产生阻碍：
在之前的步骤中图片的尺寸和体积无疑差不多进行了调整，然而假如有比较多的细节要处理的话，建议依旧在原始尺寸上操作，像例如中的图片我刚开始也是在16001200的原始大小下进行处理的。
我为图像添加了个人比较偏爱的绘画涂抹滤镜〔滤镜菜单—艺术成效〕，成效如以下图。
在PS中，滤镜的运用是专门有味的一件情况，调剂其中的参数就能够达到专门多意想不到的成效，加之在CS版本中提供了可用滤镜成效的缩略图预览，让那个有用的工具用起来更加方便：
接着我们添加一些波浪线条来营造虚幻的意境，能够用笔刷或者钢笔绘制一些曲线，因此也能够用渐变工具制作，只要达到以下图中渐隐成效即可。
事实上我们只需要做出其中一条就能够了，然后复制图层调整其透亮度、角度、扭曲制作出其它的线条。
那个地点使用的颜色依旧举荐使用粉红，为了区别于花朵的颜色，能够把线条的粉红明度调大一点。
在图片的右边，我利用Tamuz字体添加了一个修饰符号，成效如下：
假如对以上操作有疑问，能够下载QuickTime演示影片观看！
在图片上添加BLOG标题
Blog的标题反映了你网站的内容主题，其文字组织因人而异，一样还会加上一个图标或LOGO，如何说每个人都想自己的Blog与众不同，有一些标志性的元素，在那个地点我就简单的选用一个仙人掌标志：
下面是一些关于字体或修饰符号的资源链接：
∙Minion修饰符和Tamuz字体
∙Adobe提供的修饰性字体
∙一系列免费的Dingbats字体
最终的界面设计成效
至今为止，不论是在导航按钮依旧顶部图片的制作，我们都还没有遇到什么棘手的难题。
现在让我们把做出来的素材整合在一起，拼合成一张最终的界面成效。
这差不多是界面设计的最后一个时期了，所有假设还有什么可添加的修饰元素，最好都在界面成效图中表达出来。
在我的例如页面中，文章标题和友情链接的前面我都用精巧的图标进行修饰，成效看起来还能够，因此你们能够选择自己喜爱的素材替换，最好也能在设计过程中体会到乐趣！
CSS混沌初开V：
侧边栏导航菜单的实现
第一对教程的第四部分作一点补充。
有人建议Blog的标题最好使用H1标签，以文本的形式表现标题内容，缘故是不论是在CSS关闭的情形下，依旧关于搜索引擎的抓取，H1标签结合文本的形式都具有更好的可访问性。
那个提议专门有道理，专门多人也是这么做的，因此我也建议大伙儿对之前的代码进行调整。
假设使用H1标签来实现Blog标题，又想保持原先标题位置的图片的话，那么就有必要了解一下CSS中专门经典的图像替换文本技术。
简单点说确实是在XHTML中包含了文本，并为其设置背景图片，然而要通过CSS〝隐藏〞文本而仅仅显示背景图片。
图像替换文本技术
那个技术有时候我们也称之为文本替换或图像替换，其强调的核心是在HTML代码中我们使用文本，然后通过一些方法将文本〝隐藏〞，而仅显示背景或其它形式的图片，如此在保证可访问性的同时，也使得页面因图像的应用而更加美观。
比如我们能够将图片设置为背景，让后利用text-indent使文本有足够的缩进实现隐藏，代码如下：
h1{
width:
692px;
height:
90px;
text-indent:
-9999px;
background:
url（images/header.jpg）;
margin:
0;
padding:
}
其中的width和height是必须定义的，且需和背景图片的尺寸保持一致。
text-align:
center被转移到了body标签中，如此页面中所有的内容都被定义为居中显示，而那些不需要居中的内容，如文章正文，我们能够再添加text-align:
left进行覆盖。
因此关于外围容器而言，我们利用margin:
0pxauto使其在水平方向上保持在页面的中部。
导航菜单的实现
第一定义导航外围容器的样式：
#left{
178px;
}
现在外围容器我们只要简单的定义其宽度，并给予left的id名。
在left容器中，我们添加一个名为navcontainer的子容器来放置导航菜单。
实现导航的标签举荐使用无序列表ul，通过CSS我们能够改变其外观和形式。
HTML结构如下：
<
divid="
navcontainer"
>
ul>
<
li>
ahref="
#"
Home<
/a>
/li>
Aboutme<
ximicc<
Articles<
Photoroll<
/ul>
/div>
ul和li标签构建了一个简单的项目列表，其项目符号默认为小圆点，这是我们不需要的。
利用CSS能够去掉那些小圆点，并用背景图片的形式替换以我们制作好的图标：
#navcontainer{
#navcontainerul{
list-style-type:
none;
font:
bold12px/22pxVerdana,Arial,Helvetica,sans-serif;
20px;
letter-spacing:
1px;
border-bottom:
1pxsolid#fff;
第一段代码依旧定义导航容器的宽度，其值与left容器相同。
第二段代码要紧用于改变列表的外观，margin和padding确保导航项目的周围没有间隙，并去除了列表项默认的缩进，list-style-type那么定义了列表的项目符号为无。
text-indent使文本左边空出一定的空间，以便在之后的步骤中定义背景图片，并保证背景图可不能被文本遮盖。
最后一行代码在每个导航项目的底部生成一条白线，兼具美化和分界的功能。
接下来是链接外观的定义：
#navcontainera{
display:
block;
22px;
以上代码是对导航内a标签的CSS定义，作用于导航中的每个链接元素。
display:
block将链接对象转换为块级元素，然后再定义其宽和高，使得链接能具有类似按钮一样矩形的触发区域，同时让我们能够利用伪类a:
hover来定义鼠标通过链接时的翻转成效，如在第二段代码中展现的简单的改变背景色或背景图片：
#navcontainera:
link,#navcontainera:
visited{
url（images/bg_navbutton.gif）;
color:
#5C604D;
text-decoration:
hover{
url（images/bg_navbutton_over.gif）;
#A5003B;
第一段代码定义了链接文本的颜色，并设置text-decoration属性为none来去除链接默认的下划线。
导航的设计往往要求简洁、明了，同时具有专门强的指示性，因此我在那个地点定义了一个额外的样式#current来表现当前页面处于导航中的哪个项目：
#navcontainerlia#current{
名为current的样式针对的是列表项目li中的链接元素，其属性的定义与链接的hover状态样式是一样的，现在我们要做的情况确实是把那个样式应用到HTML中：
id="
current"
Contactme<
现在的current样式是应用在第一个li上，也确实是扫瞄器解析后〝Home〞菜单较之其它的菜单项目有其专门的外观，说明当前的页面是属于〝Home〞那个地点栏目的。
因此页面变化了，current样式应用的li对象也就不一样了。
CSS混沌初开IV：
页面DIV布局解构
在前三讲的教程中我们差不多完成了网页界面设计的工作，从本节开始，我们将关注如何对成效图进行解构，并初步拟定网页文件的DIV结构。
第一我们必须明确几个问题，比如设计好的界面应该划分成几块？
每块对应网页中的哪部分内容？
只有对这些问题有了概念之后，我们才能开始进行切片和导出的操作。
假如对页面构建的整个流程专门熟悉，那么以上几个问题并没有太大的难度，可能你在PS中设计素材的时候就差不多开始考虑之后的DIV划分了。
因此，我们是要有一定的应变能力，合理的组织CSS和XHTML，让最终出炉的网页具有更好的灵活性和可访问性。
本例中页面模块划分的规划
1.页面顶部〔theheader〕；
2.左侧边栏〔theleft〕；
3.主体内容〔thecontent〕；
4.页脚〔thefooter〕；
必须进行切片并导出JPF或GIF的几块区域
1.顶部图片〔header〕；
2.默认导航图片〔bg_navbutton〕
3.翻转导航图片〔bg_navbutton_over〕
4.友情链接图标〔bullet_extlink〕
5.文章标题图标〔bullet_title〕
也许你会想：
〝那背景图片呢?
〞我没有把它排列在其中，因为背景图片比较专门，不论在何种辨论率下我们都要保持主体内容的居中，因此我们需要一种更聪慧的方法。
这是我们要导出的背景图片，它的尺寸是1600X5px，应该够用了，除非你拥有Apple公司30英寸的超宽屏显示器。
利用CSS定义页面的背景
下面的CSS代码能够让我们的页面背景保持居中显示：
body{
#F7F7F6url（images/background.gif）repeat-y50%0;
background-attachment:
fixed;
背景图片只有5px高度，因此我们将其设置为纵向平铺，然后利用参数50%使其水平居中，参数fixed的用处是让背景不随内容的滚动而滚动，它是〝凝固〞的。
那个地点的选择符我们使用body，因为背景成效是针对整张页面而言的。
构建页面的DIV结构
第一来看一下顶部版块的CSS定义：
#header{
text-align:
center;
顶部版块的样式我们使用id选择符，注意在同一个文档中id选择符必须是唯独的。
网页的顶部也需要居中，这也是我们什么缘故定义text-align的缘故。
下面这段代码我们要添加在body标签之间：
header"
imgsrc="
images/header.jpg"
alt="
ximicc"
width="
692"
height="
90"
/>
你可能也注意到了，当顶部图片应用到网页中的时候，其上边缘和扫瞄器边界之间有一定的间隙，因此在那个地点我们要用margin和padding进行完善：
假如你对以上涉及的CSS还不是专门熟悉的话，那个入门教程〔英文的，节哀...〕建议你去看一下，相信会有专门大的关心。
CSS混沌初开VI：
正文与图片的混排
现在我们能够开始在网页中添加内容了，在后续教程中将会介绍友情链接版块以及页脚的制作。
第一在CSS中添加一个id选择符，在其中定义一个宽度值514px（692-178）：
#content{
514px;
float:
left;
因为导航菜单浮动在页面主体的左边，因此我们要在#left中添加一条float:
left语句，#content中的左浮动是针对其外围容器的，解析之后它将显示在导航右边的正文版块：
接下来在XHTML中添加如下代码：
content"
thisistheright<
假如你对上面的CSS和XHTML组织感到疑问，下面的教程可能会对你有所关心：
∙CSS中的Float属性入门
∙浮动属性Float的应用
你会发觉正文的内容跟导航菜单贴得专门紧，我们能够利用padding来增加一点间隙：
479px;
padding-top:
15px;
padding-right:
padding-bottom:
10px;
padding-left:
也能够将代码简化成：
[/code]#content{
15px010px20px;
[/code]
不论是padding依旧margin，假设其后跟着四个数值，对应的边缘顺序是上右下左，即顺时针方向。
大伙儿会发觉现在#container中定义的宽度由原先的514变成了479，因为我们为了让正文文本与左右边框空出一点距离，左边缘用padding实现，而右边缘因为整个DIV是左浮动的，因此我们直截了当将DIV的宽度缩减15px，因此width的值就变成了514-20-15=479px。
你可能会疑问：
〝什么缘故不直截了当使用"
width:
494px"
和"
padding-right:
15px"
呢？
〞刚开始的时候我也是这么做的，出来的成效在Safari,FireFox和Mozilla还算正常，但在IE中就不行了，正文版块跳到了导航的下面，看起来右边没有足够的空间容纳下正文DIV，具体问题出在哪里我也说不清晰，可能也是IE的一个Bug吧。
添加正文的文章标题
先来看一下主内容版块的结构：
我们把文章的标题放在H2标签中：
h2>
Thisisthetitle<
/h2>
针对文章标题的CSS定义如下：
#contenth2{
normal18pxGeorgia,TimesNewRoman,Times,serif;
#80866A;
transparenturl（images/bullet_title.gif）no-repeat;
454px;
00030px;
那个地点我们使用#contenth2的选择符组合，因此也能够直截了当对H2标签进行定义，然而会对页面中所有的H2元素都起作用。
那个CSS样式的定义中，除了
升级会员 