下载文档原格式
div+css网页标准布局实例教程（二）五、布局页面——头部和导航有了上边的基础，下面的任务就是要利用html和css制作完成一个完整的网页了。
先从头部开始，第三小节时我们已经把整体框架给搭建好了，就像盖房子一样，整体结构已经出来了，下面就需要填砖分割空间了。
先分析下头部：分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。
另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把log o做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。
如果要在logo加上链接的话，那么就不能用背景图片的方法了。
<div id="header"><div id="logo">此处显示id "logo" 的内容</div><div id="search">此处显示id "search" 的内容</div></div>先在header里插入以上两块元素。
然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下：<div id="header"><div id="logo"><img src="images/logo.gif" width="181" height="45" /></div><div id="search"><form id="form1" name="form1" method="post" action="">搜索产品<input type="text" name="textfield" id="textfield" /><input type="submit" name="button" id="button" value="查询" /></form></div></div>接下来定义css吧，在ps里测量，头部的高度是71px，logo距顶部18px，搜索产品距顶部30px，下面在css里把这些参数都给定义上，看显示的效果和效果图中的效果是不是一样呢？#logo { float:left; margin-top:18px;}#search { float:right; margin-top:30px;}这两项的位置已经差不多了。
03第3章制作图⽂混排⽹页.第3章制作图⽂混排⽹页图像也是⽹页中的主要元素之⼀，图像不但能美化⽹页，⽽且能够更直观地表达信息。
在页⾯中恰到好处地使⽤图像，能使⽹页更加⽣动、形象和美观。
【教学导航】3.1课前准备（1）在本地硬盘创建⽂件夹（2）启动Dreamweaver CS3通过Windows的【开始】菜单启动Dreamweaver CS3。
3.2课堂引导训练及评价【课堂引导训练任务描述】1、⽹页制作任务卡⽹页制作任务卡如表3-1所⽰。
表3-1⽹页制作任务卡⽹页制作任务跟踪卡如表3-2所⽰。
表3-2⽹页制作任务跟踪卡【⽹页效果展⽰】⽹页index0301.html的浏览效果如图3-1所⽰。
【任务完成过程】3.2.1应⽤“⾼级”⽅式创建站点“瀑泉游”【操作要求】应⽤【站点定义】对话框的“⾼级”⽅式创建站点“瀑泉游”。
50第3章制作图⽂混排⽹页图3-1图⽂混排⽹页的浏览效果【实施过程】（1）打开【管理站点】对话框（2）打开【站点定义】对话框（3）设置站点的“本地信息”在“分类”列表中单击选择“本地信息”选项，输⼊或选择以下各项：②在“本地根⽂件夹”⽂本框中输⼊根⽂件夹“D:\E游天下\03第3章制作图⽂混排⽹页\”。
③在“默认图像⽂件夹”⽂本框中输⼊“D:\E游天下\03第3章制作图⽂混排⽹页\task03-1\images\”。
也可以打开对话框选择⼀个⽂件夹。
④输⼊本机的HTTP地址，如http://172.16.7.26/Etour/。
（4）设置站点的“远程信息”在【管理站点】对话框中单击【完成】按钮，新建站点便完成。
3.2.2应⽤“⽂件”⾯板新建⽹页“index0301.html”【操作要求】应⽤“⽂件”⾯板在站点“瀑泉游”中新建⼀个⽹页⽂档“index0301.html”。
【实施过程】（1）打开“⽂件”⾯板如果“⽂件”⾯板处理隐藏状态，则单击菜单【窗⼝】→【⽂件】打开“⽂件”⾯板。
（2）新建⽹页⽂档在“⽂件”⾯板中站点“瀑泉游”的⽂件夹“task03-1”上单击右键，在弹出的快捷菜51Dreamweaver CS3⽹页制作案例教程单中单击【新建⽂件】菜单项，如图3-7所⽰。
网页设计中图文混排的技巧网页设计中图文混排的技巧图文混排是设计中极为重要的一项技术，同时它也极难达到完美的境界。
要在网页首屏中呈现出完美的混排效果，你需要一张完美的照片，和足够出彩的文字排版。
如果你准备接受挑战，那么请看接下来这10条技巧吧。
1、强化对比PackdogWearetelegraph首先网页首屏中的文字必须具备可读性才行，所以你需要确认文字与背景之间的色彩搭配能让用户看得清楚。
当你选择一个暗色调的背景，那么你需要使用白色或者浅色的的文字，而当背景比较素雅的时候，文字可以使用深色，这就是我所说的强化对比。
当然，对比不仅限于色彩，文字同样存在对比。
文字与图像相互配合，才能达到出人意表的效果。
例如第一个案例，Packdog网站的设计，大图作为背景，用色浓郁，文字则正好相反，轻薄而大小错落。
这些对比强烈的元素组合在一起令人印象深刻。
2、令文字成为图片的一部分meandmyselfportfoliotoast有的时候你需要让文字成为图片的一部分，甚至让文字成为图像本身来达到效果。
当然这种处理方式所需的条件比较苛刻。
要么你使用足够清爽简单的图片来和文字进行搭配，或者使用原本就包含图片的文字(当然，你也可以将文字妥妥儿地P到图片中的'主体上，文字的角度、形变和纹理一定要融入进去)。
3、沿着视觉流向排布BradhoganWorkdiary沿着视觉流向来排布信息是一项重要的技巧。
文字与图片发生逻辑关系，两者相辅相承，所以此时文字不能覆盖到图片的主体部分——比如需要展示的人物，或者产品本身。
信息按照视觉流向排布的时候，图片中的主体会引导你去观看文字信息。
这两个案例都使用了这种技巧，文字都是沿着人物的面目朝向或者眼神指向来排布的。
4、模糊背景hellonichewallmob模糊背景是一种非常简单的处理手法。
PS可以很轻易地模糊照片，而照片的模糊带来的直接效果就是让产品本身更加突出，以上的两个案例就是如此。
DIV固定宽度居中显示－超级牛最详细的Div+C SS布局案例这个例子的主要内容是居中显示，现在的显示器的宽度都比较大，并且规格不统一，所以判断一个网页是不是专业，第一眼就是这个网站是不是居中，如果不居中，一般不是一个很老的没有人维护的网站就是一个技术很差的人写的。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;}#container {margin:0 auto; width:900px; height:500px; background:#CD5C5C;}页面代码如下：<div id="container"><p>1列固定宽度居中</p></div>效果下图显示：（点击看大图）其中居中的关键是“margin:0 auto;”代码例子由“标准之路”提供，感谢！序－经验之谈－超级牛最详细的Div+CSS布局案例最近有很多晚辈问我关于网站制作方面的问题，随着SEO的普及，DIV+CSS的网站制作理念成为了流行，但在实际操作中，DIV其实是很不好控制的。
大家会碰到很多问题，例如应该在左中右的，但却没有达到这样的效果。
在写大家最关心的Div+CSS布局案例前，让我先啰嗦几句，从事互联网工作已经快6年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。
我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。
在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。
html+css+js实现⽹页拼图游戏项⽬描述使⽤ html+js+css 实现⼀个⽹页拼图游戏，可⽀持简单，中等，困难三种难度。
演⽰效果在浏览器直接打开⽹页即可运⾏，有三种难度可以选择，完成拼图会显⽰所⽤的时间和步数。
项⽬结构Puzzle├── chilian.jpg├── fifteen.css├── fifteen.html└── fifteen.js⽂件夹中只有四个⽂件，拼图所⽤的原图以及3个代码⽂件。
项⽬实现1. 显⽰拼图拼图的⼤⼩是4x4，总共16格，其中有⼀格是空的，⽤于移动。
html的主体代码如下，拼图区域只需要使⽤⼀个div，后续再在js⾥使⽤循环构建16个⼩⽅块<body><h1>拼图游戏</h1><div id="statu"><img src="chilian.jpg" id="smallPic"><br/><label>时间: </label><span id="time">00:00</span><label>步数: </label><span id="step">0</span><br/><select><option selected="selected" value="1">简单模式</option><option value="2">中等模式</option><option value="3">困难模式</option></select></div><div id="fifteen"></div><button id="restart">重新开始</button></body>使⽤js创建⼩⽅块后再插⼊到fifteen的div中，先将16个存在DocumentFragment中, 最后再⼀次性添加到html中，页⾯只需渲染⼀次, 提⾼性能// 创建 4x4 的拼图function createPuzzle() {// 先将16个⼩div存在DocumentFragment, 页⾯只需渲染⼀次, 提⾼性能var frag = document.createDocumentFragment();for (var i = 1; i <= 4; ++i) {for (var j = 1; j <= 4; ++j) {if (i == 4 && j == 4) {var empty = document.createElement("div");empty.setAttribute('id', 'empty');empty.setAttribute('class', 'row4 col4');frag.appendChild(empty);break;}var pic = document.createElement("div");pic.setAttribute("id", "pic" + ((i - 1) * 4 + j));pic.setAttribute("class", "row" + i + " col" + j);frag.appendChild(pic);}}document.getElementById("fifteen").appendChild(frag);}最后⽣成⼩⽅块的html如下：<div id="fifteen"><div id="pic1" class="row1 col1"></div><div id="pic2" class="row1 col2"></div><div id="pic3" class="row1 col3"></div><div id="pic4" class="row1 col4"></div><div id="pic5" class="row2 col1"></div><div id="pic6" class="row2 col2"></div><div id="pic7" class="row2 col3"></div><div id="pic8" class="row2 col4"></div><div id="pic9" class="row3 col1"></div><div id="pic10" class="row3 col2"></div><div id="pic11" class="row3 col3"></div><div id="pic12" class="row3 col4"></div><div id="pic13" class="row4 col1"></div><div id="pic14" class="row4 col2"></div><div id="pic15" class="row4 col3"></div><div id="empty" class="row4 col4"></div></div>有个⼩⽅块之后，怎样每格显⽰不同的图⽚，有⼀种⽅法是可以将⼤图⽚等分切割成16张⼩图篇，但这种⽅法很⿇烦，需要切图，⽽且代码⽂件夹⾥就需要使⽤到16张图⽚，这⾥使⽤css实现切图，所有的⼩图都是同⼀张图⽚，不需要切割。
单元3 制作图文混排网页【引导训练】【任务3-1】制作介绍九寨沟景区景点的图文混排网页【任务3-1-1】使用“管理站点”对话框创建站点“单元3”【任务描述】使用【管理站点】对话框创建1个名称为“单元3”的本地站点，站点文件夹为“Unit03”。
【任务实施】（1）打开【管理站点】对话框在Dreamweaver CC的主界面，选择命令【站点】→【管理站点】，打开【管理站点】对话框。
（2）打开【站点设置对象】对话框在【管理站点】对话框中单击【新建站点】按钮，打开【站点设置对象】对话框，如图3-3所示。
图3-3 【站点设置对象】对话框在【管理站点】对话框“站点名称”文本框中输入站点名称“单元3”，在“本地站点文件夹”文本框中输入完整的路径名称“D:\网页设计与制作案例\Unit03\”。
在【站点设置对象】对话框中单击【保存】按钮，保存创建的站点，返回【管理站点】对话框，如图3-4所示。
图3-4 新建站点“单元3”后的【管理站点】对话框在【管理站点】对话框中单击【完成】按钮，新建站点便完成。
【任务3-1-2】应用“文件”面板新建网页“0301.html”【任务描述】应用【文件】面板在站点“单元3”中新建1个网页文档“0301.html”。
【任务实施】（1）打开【文件】面板如果【文件】面板处理隐藏状态，则选择命令【窗口】→【文件】打开【文件】面板。
（2）新建网页文档在【文件】面板中站点“单元3”的文件夹“task03-1”上单击右键，在弹出的快捷菜单中单击【新建文件】菜单项。
然后输入新的网页文档名称“0301.html”，按回车键确认。
【任务3-1-3】设置页面的背景图像【任务描述】设置网页“0301.html”的背景图像为“bg-gray.png”。
【任务实施】（1）打开新建的网页文档“0301.html”在【文件】面板中双击网页文档名称“0301.html”，在Dreamweaver CC的文档窗口中打开该网页文档。
Example
在最底部，放置一个类为clear的层来清除浮动。
有了上面的基础开始下面的CSS编码：
整体声明：
Example Source Code
.list_title{ width:426px; padding:0 10px; border:1px solid #fff; background:#f2e9da; height:22px; line-height:22px;}
.list_title h3{ float:left; width:300px;}
.list_title span{ float:right; width:60px; text-align:right;}
图片层list_pic的样式定义：
首先觉定使用ul列表，宽度设定为433px；
需要注意的是内边距的设置：padding:15px 0 0 15px;
（右侧内边距之所以设置为0，是因为li的间距问题，这样更有力页面的表现，您也可以将它设置为：padding:15px 15px 0 15px;对比效果）
li设置图片块的大小94px，间距margin:0 14px 0 0;
鼠标悬停的情况下图片的边框颜色由蓝色变成灰色；
设置链接文字样式，
将span转换为块元素。
span内的链接同样转换为块元素，设置宽度与高度分别是94px; 20px；行距设置为20px；文字水平居中对齐。
Example Source Code
Article Article
tututhirteen tututhirteen psy5choit cachinnation fangfeng335。
本例效果如下。
将八仙过海素材图片复制粘贴到网站的image文件夹下。
站点菜单下选择新建站点命令，
并在弹出的面板的高级选项卡中输入如下图所示：
新建一个baxian.html文件输入以下文字。
点击新建CSS规则按钮，新建一个首字下沉的规则。
在名称中输入.shouzi，设置为类，仅对该文档，点击确定即可。
在类型选项卡中的大小设置为60px，粗体。
将方框选项卡中的浮动设置为左浮动方式。
选择文字中的第一个文字“八”字，在属性面板上设置样式为“shouzi”。
将光标置于文字最后，插入图像
点击确定按钮。
得到如下图所示效果：
新建一个.pic2的类CSS规则
方框选项卡中设置浮动为右对齐，边界中设置左边界为10px，下边界为5px。
选择图片，在属性面板的类中选择pic2类。
切换到代码视图，将文字代码外加上<p>标签。
注意加上结束标签。
将下图中关于图片部分代码选中剪切。
粘贴到现在的位置。
图片在前，文字在后。
预览即可
可以看到如下图所示
东海。
”文字后敲回车，输入“汉钟离”如下图所示
新建一个.title1的类规则。
在类型选项卡中设置如下：
在区块选项卡中设置如下：
对“汉钟离”文字应用该规则。
插入汉钟离的图片
新建一个.pic1的类规则
设置该规则的方框面板如下图所示：
选中汉钟离的图片，点右键，选择CSS样式中的pic1应用该规则。
选择关于汉钟离的文字介绍，复制粘贴到网页中，效果如下图所示：
选择刚才的文本，将样式设为无。
并在文字和标题之间直接敲一次回车即可。
下图所示：
设置文本为右对齐。
对文字“张果老”应用这个title2规则。
在文字后敲回车，插入图片张果老的图片。
对该图片应用pic2的规则。
敲回车，粘贴张果老的文字材料。
再次出现张果老的文字也应用了title2的规则效果，选择文字，设置规则为无即可。
再次在文字最后，敲回车，输入“韩湘子”，对“韩湘子”文字应用title1的类规则，依照汉钟离的设置方法，敲回车插入韩湘子的图片，对该图片应用pic1的类规则，敲回车，粘贴关于韩湘子的文字介绍，将介绍文字的规则设置为无即可。
剩余的其他内容比照前面的设置即可完成。
一个左一个右的规则即可完成。
最后给所有的图片加上边框，新建一个img标签规则。
设置img标签边框选项卡中的各项参赛如下图所示：
再加上一个body标签的CSS规则，设置背景属性为color:#d8c7b4 即可。
得到如下效果图。
