动态网页设计与实现

动态网页设计与实现

摘要：网页的设计对于网络的发展至关重要，而其中的动态网页更能做到人性化，让我们获取更多的有用信息，通过网络实现更多的功能。通过使用PHP制作论坛，实现对动态网页设计的理解。对网站管理进行了探讨，并对网站优化进行了阐述。

关键词：动态网页；PHP技术；论坛；网站管理；网站优化

1动态网页发展

动态网页是相对静态网页而言的一种网页编程技术。静态网页的内容和显示效果基本上不会发生变化，可通过修改html代码实现更改，静态网页的后缀名通常为htm、html、shtml、xml等常见形式。而动态网页则可通过页面代码不变，显示的内容随着时间、环境或数据库操作的结果而发生改变，动态网页的后缀名通常为aspx、asp、jsp、php、perl、cgi等形式，在动态网页网址中还有一个标志性的符号——“？”。

早期的动态网页主要采用公用网关接口CGI技术实现互动性，但由于编程困难、效率低下、修改复杂，所以有逐渐被新技术取代的趋势。而新技术的诞生，让动态网页的设计与制作变得更加简单与灵活。这些新技术主要有ASP技术、PHP技术、JSP技术等，本文主要讲解PHP技术。

PHP（Hypertext Preprocessor）技术：超文本预处理器，运行效率比CGI高，完全免费，在Unix 平台、GUN/Linux 和微软 Windows 平台上均可运行。PHP是一种易于学习和使用的服务器端脚本语言，只需要很少的编程知识就能使用PHP建立一个真正交互的Web站点。

2动态网页设计

2.1网页设计原则

网页设计的目的是成功抓住用户“眼球”，并最终为企业带来经济效益，所以网页的设计也遵守设计的3C原则：简洁、一致性、好的对比度。网页要能简洁明了地表达网站的主题；一致性表现在网站中的各链接网页的布局、色彩和风格上要一致；好的对比度则体现在网站的内容上要有着重点。只有坚持这3个原则才能制作出优秀的网站。

2.2网站设计构思

在制作网站之前，应先进行构思。

第一步先明确网站主题。如本文是一个论坛，可以以个人的爱好为主题，或以学习PHP技术为主题，只有先定主题，才能确定接下来的内容。

第二步是明确首页上链接的目录，如本论坛网站里共有“首页、冰点论坛、在线聊天、新闻频道、下载频道、开心笑话、上传文件、关于我们、设为首页、站点管理 ”共10个主链接目录，要将其放在突出的位置，可根据需求放在左边、顶部、右边等较明显的地方。

第三步是明确网页的主图，主图的选择要根据本网页的主题而定，主图可大于网页上的其它图片，主要是为了突出主题，吸引用户。

通过以上3个步骤，首页的基本风格也就确定了，也可根据实际情况再进行调整，或增加一些其它元素，如背景、小动画等。

2.3网站风格

2.3.1版面设计

版面设计不仅要注意到形式的美观、和谐，还要考虑到实用性，所以可在传统设计的构图下，进行个性化创新，可使用如图1的几种构图。

现很多网站的首页设计采用c型，因为它简洁明了，顶部为主图，左边为导航栏，下边为版权信息等内容，中间作为各导航目录对应的内容展示区。本论坛设计使用d型架构，并做了创新：延用了上下边框的设计，把左边框的导航栏整合在了上边框中节省了空间，使网页显得更简洁。在内容区使用的是传统的左右对称作法，并且使用了共享边框，使每层网页具有相同的上下边框，统一了风格，导航栏的上嵌共享有效地解决了导航栏深层网页的路径修改问题，实现链接路径完全自动化层次修改。

2.3.2网站内容层次

网页中的每一个栏目都使用了独立的文件夹目录，不同栏目中调用的图片都放在了各自文件目录中的专用文件夹下，而不是全部都堆在一起，这样可使网站结构更清晰。

图2网站结构示意

2.3.3首页

首页是一个网站的门户，用户首先看到的就是首页，所以，首页的制作非常关键。首先，首页要体现出网站的主题，能让用户一目了然；其次，首页要做的美观，吸引用户继续浏览网站。本论坛的首页效果如图3。

图3首页

如图3所示的首页里，最上面是两个图片，主要是为了突出主题和让网页能够更加好看 。在图片下面是导航条。在页面的中间栏主要有“战争新闻”、“娱乐新闻”、“体育新闻”、“笑话两则”等。这几项内容都是存放在数据库里，内容都是“新闻频道”、“开心笑话”页面里面最新更新的内容。在点击之后链接到相应的页面。

从数据库里调出数据的代码如下：

<？php $connect = mysql_pconnect（"localhost"，""，""）；

mysql_select_db（"news"， $connect）；

$sql = "SELECT * FROM war"；

$result = mysql_query（$sql）；

$rows = @mysql_num_rows（$result）；

$a_row=@mysql_affected_rows（$result）；

$i=$rows-1；

@mysql_data_seek（$result，$i）；

$data=@mysql_fetch_array（$result）；

echo "$data[list]"；//} ？>在页面左栏是一个能快捷进入论坛的登录页面和一个友情链接。论坛登录可以方便用户更快地进入论坛。页面的右栏是一个通知栏，可以通过这个通知栏在网站里发布各种即时信息。因为通知栏要经常更新，所以对通知栏的管理要很方便。本论坛网站中单独做了一项通知的管理。

为了和用户能够进行更好的交流，在论坛首页的左栏做了一个投票系统，可以直观反映用户对本网站的评价。构思过程见图4。

图4投票系统

2.3.4新闻频道，开心笑话

因为“新闻频道”、“开心笑话”制作的方法都是相同的，所以在这里只讲述“新闻频道”的制作过程。新闻频道的主体界面沿用了首页的风格，页面的效果如图5。

图5新闻频道

页面的两面是图片新闻，中间栏是新闻标题。这样的好处是能使读者很快了解新闻的主要内容。并且新闻做成了分页显示，这样更有利于读者的阅读。这些数据、图片都是用PHP通过数据库管理的，所以更换信息也比较方便。

对于新闻的标题都已经做成超链接的形式，如果点击即会连接到新闻的详细内容。值得一提的是图片管理，这里的图片都是通过上传组件把图片上传到指定的文件夹里，在上传图片的同时把图片的路径、名称以及相关的信息都存储到相应的数据库里，然后，再通过数据库里的图片信息把图片调出显示。

2.3.5上传文件，下载频道

“上传文件”、“下载频道”是两个相互关联的页面，主要实现的功能是：网络用户如果有什么好的软件想和其他网络用户共享，那么就可以从“上传文件”的页面通过上传组件把软件上传，这样就可以在“下载频道”里发现这个软件，并且可以下载。

3网站管理

现在所有的软件都越来越容易使用，各行各业都在提倡以人为本的服务，这就要求一个好的网站应该很方便去管理。本论坛提供了一个“网站管理”页面，使得网络的管理者使用起来非常方便。具体作法如下：

对管理员要设置密码，这样才能保证网站的安全性，并且管理员还应该对密码有修改的权力。

修改密码的代码如下：

<？ $connect = mysql_pconnect（"localhost"，""，""）；

mysql_select_db（"pwd"， $connect）；

$sql="select * from pwd"；

$result = mysql_query（$sql）；

$data= mysql_fetch_array（$result）；

if（$data[user]==$_POST["user1"] and

$data[pwd]==$_POST["pwd1"]）

{

$query = "update pwd set user='".$_POST["user2"]."'，pwd='".$_POST["pwd2"]."'"；

$result = mysql_query（$query）；

$txt="修改成功！"； echo "$txt 返回管理首页"；

}

else

{

$txt="你的用户名或者密码错误！"；

echo "$txt 重新修改请返回" ；

}

？>

4网站优化设计

追求上网的速度，大家通常会选择快的网速，但有时也会发现，虽然网速很快，但所下载的页面速度却很慢，这很大程度上是因为网站设计不合理，所以要去优化网站，通过采取一些简单的技术加快网站的下载速度。

4.1打散表格

很多网站的页面设计是使用“表格”进行布局的，因为表格可方便地进行复杂的版面设计，但由于网页中的所有元素都包含在一张大表中，所以浏览器会将整张表格的内容都下载下来才开始显示相关内容。为了缩短显示时间，可将一张大表格打散成若干个独立的表格来实现，但同时也要注意不要放置无实用价值的表格，特别是使用一些所见即所得工具，如FrontpPage，这样会产生一些多余的单元格、行和列，会使网页下载的速度变得更慢，因为浏览器要对这些多余的内容进行解释并显示。 4.2杜绝表格嵌套

使用表格嵌套进行网页版面设计的好处是能够设计出具有创意的版面来，所以这一点一直吸引着设计人员，但嵌套层数越多的表格，浏览器进行解释与显示的时间就越长，所以在不放弃表格嵌套设计带来的创意优势外，建议表格嵌套层数不超过3层，这样既能充分利用表格嵌套设计版面的优势，又能很好地避免过多嵌套带来的浏览器显示速度缓慢的问题。

4.3合理运用HTML代码

很多网页设计者会运用HTML代码来代替一些用图标工具制作的效果，从而总体减少网站的代码，提高网站的运行速度，但有时适当的选择图标工具会比使用HTML代码运行的速度要快，比如：有时使用适当的图片比用HTML代码要来的快。

4.4优化脚本运行

很多网页设计者会将脚本语言PHP、JavaScript或Vbscript等放在代码的中，以便于所有的网页在下载前先启动脚本语言。但是，如在中放置大量的脚本代码会导致整个页面的下载及显示速度变慢。为了减少过量脚本代码在中带来的显示速度缓慢问题，可把那些用户触发事件时才执行的脚本程序放到触发事件之前，也可写到一个外部文件中，等使用时，再加以调用。

5结语

动态网页设计，不仅要具备网页制作的基本知识，还需要熟练掌握网络编程知识。动态网页设计不是一门单纯的艺术，它是多种艺术