• [织梦吧]唯一域名:www.upgvv.com,织梦DedeCMS学习平台.

当前位置: > 网页制作 > DIV&CSS >

《十天学会web标准div+css》10:div+css网页标准布局案例三

来源: www.upgvv.com 编辑:织梦吧 时间:2011-01-03点击:

前边两节学完后,前台工作基本上完成了,下边的任务该程序员添加程序了。为什么说是基本完成呢?因为要做的工作还很多,不但要把首页做出来,其它的 列表页详细页等页面也得做。还要配合程序员把整个网站完成,这样才能呈现给用户。应部分同学的要求,讲解一下程序怎么添加的,这样和程序员配合起来也更默 契,还有怎么连接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的界面,其它版本略有不同)。

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

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

完了之后打开浏览器,在地址栏中输入, 就可以访问,或者直接在dw中点击地球图标,也可以直接打开浏览器预览。如果能正常打开页面,说明本地和服务器连接成功,修改完文件后,把文件上传到服务 器上就可以了。如果是协同办公,修改文件之前一定要先下载,这样才能保证本地的文件为最新,如果你上次修改完之后,别人又修改了,你没下载,直接修改本地 的文件又上传了,那么别人的修改将被覆盖掉,所以一定要养成好习惯,修改前先下载。

四、php读取数据

以上的工作都完成后,下面就该用程序读取数据了。首先需要创建一个数据库连接文件,让php程序可以访问数据库,这样才能读取里边的数据,在根目录下创建一个inc文件夹,并创建一个conn.php文件,然后打开文件,在源代码里插入如下代码:

<?
$conn = mysql_connect ("localhost","root","") or die ("数据库连接出错" . mysql_error());
mysql_select_db ("jiaocheng",$conn);
mysql_query("set names 'gbk'");
?>
 

之所以单独创建一下文件,是因为后边很多页面都要用,这样只需包含这个页面即可,不用每个页面再写这段代码了。数据库连接文件创建好后,下面就该在 index.html调用了。注意:这里要将后缀改为php才行,如果还是html的话,那么它将直接输出,不会经过服务器加工。接下来打开 index.php,在源代码的最顶部插入如下代码,把conn.php文件包含进来:

<?
include("inc/conn.php");
?>

记得要把inc文件夹上传到服务器上哟。下面就先做“热门新闻”列表吧,把原来做的#news_list下的ul列表改为如下形式: