第十章：div+css网页标准布局实例教程

敖游
2015-12-23
来源：遨游建站

　　<!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=gb2312" />

　　<title>主页</title>

　　<link href="http://www.aa25.cn/upload/2010-09/21/css/layout.css" rel="stylesheet" type="text/css" />

　　</head>

　　<body>

　　<div id="container">

　　<div id="header">

　　<div id="logo"><img src="http://www.aa25.cn/upload/2010-09/21/images/logo.gif" alt="企业名称" 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>

　　<div></div>

　　<div id="nav">

　　<div id="nav_l"></div>

　　<div id="nav_r"></div>

　　<div>

　　<ul>

　　<li><a href="#"><span>首页</span></a></li>

　　<li><a href="#" id="nav_current"><span>企业新闻</span></a></li>

　　<li><a href="#"><span>企业简介</span></a></li>

　　<li><a href="#"><span>产品展厅</span></a></li>

　　<li><a href="#"><span>企业历史</span></a></li>

　　<li><a href="#"><span>招商加盟</span></a></li>

　　<li><a href="#"><span>网上下单</span></a></li>

　　<li><a href="#"><span>联系我们</span></a></li>

　　</ul>

　　</div>

　　<div>

　　<ul>

　　<li><a href="#">企业动态</a></li>

　　<li><a href="#">领导活动</a></li>

　　<li><a href="#">产品资讯</a></li>

　　<li><a href="#">通知公告</a></li>

　　</ul>

　　</div>

　　</div>

　　<div></div>

　　<div id="maincontent">

　　<div id="main">

　　<div id="index_top">

　　<div id="pic">

　　<script language='javascript' type="text/javascript">

　　linkarr = new Array();

　　picarr = new Array();

　　textarr = new Array();

　　var swf_width=269;

　　var swf_height=210;

　　var files = "http://www.aa25.cn/upload/2010-09/21/images/pic.jpg|http://www.aa25.cn/upload/2010-09/21/images/pic1.jpg|http://www.aa25.cn/upload/2010-09/21/images/pic2.jpg|http://www.aa25.cn/upload/2010-09/21/images/pic3.jpg";

　　var links = "#|#|#|#";

　　var texts = "";

　　for(i=1;i<picarr.length;i++){

　　if(files=="") files = picarr[i];

　　else files += "|"+picarr[i];

　　}

　　for(i=1;i<linkarr.length;i++){

　　if(links=="") links = linkarr[i];

　　else links += "|"+linkarr[i];

　　}

　　for(i=1;i<textarr.length;i++){

　　if(texts=="") texts = textarr[i];

　　else texts += "|"+textarr[i];

　　}

　　document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">');

　　document.write('<param name="movie" value="http://www.aa25.cn/upload/2010-09/21/images/indexpic.swf"><param name="quality" value="high">');

　　document.write('<param name="menu" value="false"><param name=wmode value="opaque">');

　　document.write('<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'">');

　　document.write('<embed src="http://www.aa25.cn/upload/2010-09/21/images/indexpic.swf" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>');

　　</script>

　　<div id="login"><span><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/btn_login1.gif" alt="个人用户登录" width="131" height="39" /></a></span><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/btn_login.gif" alt="经销商登录" width="131" height="39" /></a></div>

　　</div>

　　<div id="hot_news">

　　<div id="news_top">

　　<h1>苹果iphone 4手机将于9月25日在中国上市</h1>

　　<p>日前中国联通正式宣布将于9月25日9时在中国大陆市场全面推出iPhone4，并为iPhone4用户量身定制了合约计划。</p>

　　</div>

　　<div id="news_list">

　　<ul>

　　<li><span>9-22</span><a href="#">纯CSS实现三列DIV等高布局</a></li>

　　<li><span>9-22</span><a href="#">HTML元素的ID和Name属性的区别</a></li>

　　<li><span>9-22</span><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>

　　<li><span>9-22</span><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>

　　<li><span>9-22</span><a href="#">javascript为FF设置首页</a></li>

　　<li><span>9-22</span><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>

　　</ul>

　　</div>

　　</div>

　　</div>

　　<div id="index_pic">

　　<h2><span></span></h2>

　　<ul>

　　<li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

　　<li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

　　<li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

　　<li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

　　<li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

　　<li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

　　<li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

　　<li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

　　<li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

　　<li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

　　</ul>

　　</div>

　　<div id="index_box">

　　<div>

　　<h2><a href="#">更多..</a><span>企业历史</span></h2>

　　<div>

　　<dl>

　　<dt><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic5.gif" alt="多角度对比 苹果iPod系列真机" width="91" height="70" /></a></dt>

　　<dd><a href="#"><strong>多角度对比 苹果iPod系列真机</strong></a>

　　导言：北京时间9月2日凌晨1点苹果在旧金山举行新品发布会，数码特派记者在美国现场直播&hellip;</dd>

　　</dl>

　　<ul>

　　<li><a href="#">纯CSS实现三列DIV等高布局</a></li>

　　<li><a href="#">HTML元素的ID和Name属性的区别</a></li>

　　<li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>

　　<li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>

　　<li><a href="#">javascript为FF设置首页</a></li>

　　<li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>

　　<li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>

　　</ul>

　　</div>

　　</div>

　　<div class="box box1">

　　<h2><a href="#">更多..</a><span>企业历史</span></h2>

　　<div>

　　<dl>

　　<dt><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic5.gif" alt="多角度对比 苹果iPod系列真机" width="91" height="70" /></a></dt>

　　<dd><a href="#"><strong>多角度对比 苹果iPod系列真机</strong></a>

　　导言：北京时间9月2日凌晨1点苹果在旧金山举行新品发布会，数码特派记者在美国现场直播&hellip;</dd>

　　</dl>

　　<ul>

　　<li><a href="#">纯CSS实现三列DIV等高布局</a></li>

　　<li><a href="#">HTML元素的ID和Name属性的区别</a></li>

　　<li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>

　　<li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>

　　<li><a href="#">javascript为FF设置首页</a></li>

　　<li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>

　　<li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>

　　</ul>

　　</div>

　　</div>

　　</div>

　　</div>

　　<div id="side">

　　<div>

　　<h2><strong>产品</strong>导购</h2>

　　<div class="side_con product">

　　<ul>

　　<li><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>

　　<li><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>

　　<li><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>

　　</ul>

　　</div>

　　</div>

　　<div>

　　<h2><strong>使用</strong>问答</h2>

　　<div class="side_con ask">

　　<dl>

　　<dt><a href="#">最新出的这个产品如何使用？</a></dt>

　　<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</dd>

　　</dl>

　　<dl>

　　<dt><a href="#">最新出的这个产品如何使用？</a></dt>

　　<dd>该产品采用全新的技术，较上一...</dd>

　　</dl>

　　<dl>

　　<dt><a href="#">最新出的这个产品如何使用？</a></dt>

　　<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了...</dd>

　　</dl>

　　<dl>

　　<dt><a href="#">最新出的这个产品如何使用？</a></dt>

　　<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强...</dd>

　　</dl>

　　<dl>

　　<dt><a href="#">最新出的这个产品如何使用？</a></dt>

　　<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</dd>

　　</dl>

　　</div>

　　</div>

　　<div>

　　<h2><strong>联系</strong>我们</h2>

　　<div class="side_con contact"><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/tel.gif" alt="联系我们" width="222" height="112" /></a></div>

　　</div>

　　</div>

　　</div>

　　<div></div>

　　<div id="footer">

　　<dl>

　　<dt><a href="#">关于我们</a> || <a href="#">产品目录</a> || <a href="#">联系我们</a> || <a href="#">友情链接</a> || <a href="#">反馈问题</a> || <a href="#">广告合作</a></dt>

　　<dd>Copyright &copy; 2007 - 2010 aa25.cn All Rights Reserved<br />

　　标准之路 版权所有 京ICP备10007159号</dd>

　　</dl>

　　</div>

　　</div>

　　</body>

　　</html>

　　提示：可以先修改部分代码后再运行

　　点击此处下载实例源代码及psd源文件

　　九、相对路径和相对于根目录路径

　　上边的例子学完后，你会发现在html中插入的图片路径是images/pic4.gif，而在css中插入的图片路径是这样的../images/nav_bg.gif，后者比前者多出了../，这是什么意思呢？

　　这就是相对路径和绝对路径，../表示返回上一级，因为css文件在css文件夹里，图片在images文件夹下，那么layout.css就需要返回上一级找到images文件夹才能找到相应的图片。直接文件夹名或是./开头表示和当前平级，因为index.html和images文件夹平级。不管是带../还是不带，这种写法都叫相对路径；另一种叫相对于根目录路径，它的写法必须以/开始，意思是从根目录开始一级一级向下查找，不管在哪里，要使用pic4.gif这个图片，路径都必须是/images/pic4.gif；还有一种写法叫绝对路径，是以http://加域名开始的，这个不多多说了。

　　使用相对路径时，当根目录放到一个二级目录下时，文件仍然可以正常访问，而使用相对于根目录路径时，其中一个页面放到其它位置时，照样能关联么相关的图片和其它文件，比如：本例如果用相对于根目录路径的话，把index.html放到一个文件夹下后，还是可以正常访问的。总之两种方法各有优劣，根据你的需要采用一种合适的方法。相对路径和相对于根目录路径是可以相互更改的，在站点管理——编辑——高级设置的本地信息里有链接相对于，如下图，默认为文档（就是所说的相对路径），也可以改为站点根目录，相对路径一般为直接目录名，需要返回上级时用../，向上返回两级时用../../；相对于根目录路径始终以/开头，不管该文件现在在哪一级，它都是以根目录开始向下找。

　　

　　div+css网页标准布局实例教程（三）

　　前边两节学完后，前台工作基本上完成了，下边的任务该程序员添加程序了。为什么说是基本完成呢？因为要做的工作还很多，不但要把首页做出来，其它的列表页详细页等页面也得做。还要配合程序员把整个网站完成，这样才能呈现给用户。应部分同学的要求，讲解一下程序怎么添加的，这样和程序员配合起来也更默契，还有怎么连接FTP上传下载，后期出现问题怎么调试等等。添加程序部分只需要了解就行了，连接ftp上传下载，页面调试查找问题这部分一定要掌握哟。

　　§ 创建服务器环境

　　§ 建立数据库

　　§ 本地和远程服务器连接

　　§ php读取数据

　　§ 页面调试及浏览器兼容

　　一、创建服务器环境

　　程序语言有多种，常用的有asp、php、jsp等，之前做的html页面，可以直接在浏览器上运行，因为html是客户端语言，而这些是服务器端语言，也就说你所看到的页面是经过服务器加工之后传输过来的，不管使用哪种语言环境，最终目的就是把数据库的数据读取出来展示到网页上。不同的语言有不同的运行环境，要想运行这些语言，首先要创建一个适应他们的环境，下边以php为例，讲解一下php环境的搭建。

　　

　　点击下载：WampServer 5 集成环境

　　下载wamp安装完成后，php运行所需的 Apache、 MySQL、PHP 5等都具备了，安装完成后需要启动WampSeaver，启动后会在托盘区显示一图标（如上图），当它正常运行后，说明服务器环境已经创建成功了。接下来打开如上图中的php.ini文件，找到short_open_tag，把值改为On，作用是开启短标签支持，以免后边教程中使用短标签时报错。有关软件的安装，及服务器环境问题本站不做过多介绍，如想详细了解，请百度相关文章，asp环境的搭建更简单了，如想知道，也请百度。

　　二、建立数据库

　　php的作用是从数据库读取数据，下面我们就先创建一个数据库，并录入部分数据。点击如上图的phpMyAdmin，然后会在浏览器中打开数据库。创建一个名为：jiaocheng的数据库和news的表

　　

　　

　　设置表结构如下：

　　

　　注意将ID字段设置为主键并在额外中选择auto_increment选项。表结构创建完后，选择插入，插入一条数据：

　　

　　

　　依次插入更多条数据，为后面程序调用做准备，选择性将某些数据插入形象图片，以便在幻灯处调用。

　　

　　三、本地和远程服务器连接

　　只有本地和远程服务器连接后，才能把我们做的页面上传到服务器上来运行。连接的前提是你知道服务器的地址及网管给你分配的用户名和密码，有了这些后，在dw的站点——管理站点中，选中jiaocheng，然后编辑，在弹出的对话框中选择服务器选项，然后填写ftp地址，用户名和密码，如果一切正常应该可以顺利连接了，点击测试按钮一下吧，如果无法连接，就需要查找问题了（下面的截图是dw cs5的界面，其它版本略有不同）。

　　

　　刚才我们在自己电脑上创建了服务器环境，那么这里的连接就用本地网络了。

　　

　　设置完后，在文件面板站点上点击右键，选择上传，将文件上传到服务器文件夹中。

4  /  5
网页设计基础教程
阅读原文
阅读593
分享
写评论...