首先，先要准备好这个静态网页的源文件，如图
bs里面是一些css和js的文件，img则是放图片的，文件中的index是网页的首页
运行一下，看看
然后打开phpcms文件，上篇博客中有提到，把首页的文件index要放到指定的文件夹下
放到这个路径下
然后运行一下，看看效果
网页中没有了图片和样式表，接下来就是把它的图片和样式表放到指定的文件夹中，把图片放到images文件夹里，如图
bs里面有js文件也有css文件，所以，把它放在css和js文件任何一个都可以。如图
&第一步做的就完成了，复制文件到指定文件夹中
运行一下index首页，还是没有变，如图
然后用Dw打开index首页
一些文件的路径都是原来的，所以找不到，包括图片也是
所以我们要做的第二步就是替换目录
ctrl f& 直接查找，如图
第一个要替换的是bs，看看要替换成什么
打开phpcms的后台管理
设置安全配置中基本配置那一项
看看各项对应着什么路径
Dw中查找，填写内容
{JS_PATH}就代表着，这个路径，如图
替换的话，只要含有bs的就全部替换成那个路径，万一其中有单词含有bs那也会被替换，所以还要改
在前面加上双引号就可以了，基本上bs打头的，前面都是双引号
&点击替换全部，一共找到了三项
已成功被替换
接下来就是替换img
查找一下img 看看有什么规律
也是双引号打头的可以操作
替换全部看一下，有没有完全替换成功
有class名也是双引号打头的被替换掉了，所以这种替换方式不行，撤销一下
前面的标志重复不行，那就看后面的
然后替换全部
查看一下，替换的都没有错
两个路径都更换完了，网页应该就可以正常运行了
phpcms后台管理更新一下缓存
更新完成后，再点击生成首页
查看站点首页
这个静态页面就可以在phpcms中显示出来了
然后就可以对这个静态页面进行操作了
可以通过phpcms提供的一些标签，来把静态网页变成动态网页
换个标准点的静态网页来重新操作，如图
运行后是这样的一个静态网页
还是重复上面说的那些步骤，复制文件
复制完成后，再就是把index里面的内容更改替换
然后在phpcms后台管理中更新缓存，生成首页，查看站点首页
和第一个静态页面的操作步骤一样
接下要把index首页，分出两个部分，头部和尾部
导航栏的部分是头部，来看一下审查元素
&把header1和往上的内容剪切掉
新建一个文件，把内容复制，起的名字也是固定的，为header然后保存到和index同一路径里去
头部操作好了，再把尾部拆出来
再来看底部
同样的方法，剪切复制到一个新的文件里去，名字也是固定的，footer
然后点击保存
更新缓存，生成首页，看一下站点首页变成什么样子了
头部没有了，可以在里面把头部再放进去
使用的是phpcms里面的标签，如图
把尾部也引入进去
然后更新缓存看一下效果
头部被成功引入
尾部也是被成功引入
头部和尾部被拆出来的原因就是，到时候可以重复使用，每个页面都需要头部和尾部，如果 有需要的话可以引入就好
下一步做的就是，把header变成动态的
可以看一下
这里面的header是怎么做的
有这样一句话
标题，可以在后台管理操作的，不能写死了，可以复制粘贴一下
&把这个改了
还要再加这样两句话
phpcms里的标签都是带花括号的，这两句话不加也行，加上最好，网络优化用的
再往下看是logo，logo在企业网站上很少会更换，所以这里就不做动态了
再往下看是栏目，栏目肯定是要改成动态的
只留这两项，然后其他的都删掉
然后用phpcms的标签把栏目循环遍历出来
可以参照phpcms v9手册，去找标签
花括号里面内容的意思就是&& pc标签，是phpcms的一个简写，content代表的是内容，代表取的是栏目写0的话找的是一级栏目，5是代表的数量，最多只能调5个出来，是站点
根据栏目添加的顺序来升序排，相当于王里面填一些参数
查到的数据怎么来显示？loop标签。是用来循环遍历数组的，data代表查到的数据，r代表的小数组
loop中间的内容会循环输出，把刚才的产品放进去，把产品改为动态的，所以就不能写产品了
写这样显示的就是名称了，先运行一下，看看
&出现的是phpcms后台管理里面的内容
还有一个网页介绍
改成是，它就会在导航栏上出现
&栏目已经改好了，每个栏目的连接是#，现在把每个栏目的href地址改一下
&网页跳转相对应的地方
点击关于我们
也是跳转到相应的地方去
由于ceshi文件里面只有三个文件，并没有相对应的list列表，所以它会找默认的内容
首页跳转的部分还需要改
保存运行一下
点击首页，网址后面不会带有#
&点击这里的首页
也会回到首页
导航的内容和连接都改完了
看一下首页是怎么变黄的&&
首页比其他的多了一下class名
&在上面加一个判断语句，判断一下它是不是首页
删掉这一部分
在写下面的判断语句
写在loop标签里面
然后再把，这一块，删掉它
可以指到那一项，选中哪一项，这样头部部分已经改完了，可以直接从后台管理去操作它，接下来操作footer部分
footer部分和头部的一样，logo不用改，电话地址等也不用，下面有个导航栏，把这一块换掉
修改完成后，运行
再来看index部分
因为这个页面，导航下面就是一个大图，为了以后方便换，也换成动态的，需要在后台管理那里的栏目再加一行栏目
&然后给它添加内容
点击保存，看一下
这里就有这张图片了
把首页的大图换成这张图片，看看怎么换
把原来的代码改成这样的
然后保存，刷新看一下
图片已经被成功的替换了
在后台管理再修改另一张图片
点击保存，然后刷新页面
图片被成功替换
到管理栏目那里，删除没有用的，然后再添加栏目
导航已经被改变了
第一个是承接，承接在管理栏目是13
第二个是人才，人才在管理栏目上是11
第三个是资源，资源在管理栏目上是12
操作的是首页大图上的三张小图
点击人才，达到的是人才页面
其他部分，明天再发
阅读(...) 评论()13944人阅读
html5（48）
教程视频：http://edu.csdn.net/course/detail/535
制作的网页：
整体思路：
先布局再CSS控制
骨架搭好了，初始化样式，
后再弄CSS样式。注意：将CSS的样式导入到外部样式表时，要注意图片的位置，以及
对外部样式表的引入
1、头部的背景图片的高度128px来自素材的图片高，容器的宽度大小也来自图片
的宽，那么这里背景图片设置的有意思吗？不设置效果一样呀！！
2、图片的位置：当你在编写index.html页面代码时，出现一些图片路径时，那么
先分清楚哪些是同级目录文件
我现在在操作首页实战.html，里面有图片1的路径，从上面可以看出首页实战.html和img文件夹为同级的目录，则路径应该写为:img/1.jpg
charset="UTF-8"&
&title&&/title&
type="text/css"&
#container{
width:1002px;
background-color:
height:120px;
background-color:
height: 600px;
background:
height: 120px;
background:
#main-left{
float: left;
background:
width: 700px;
height: 100%;
#main-right{
float: right;
background:
width: 302px;
height:100% ;
id="container"&
id="header"&&/div&
id="main"&
id="main-left"&&/div&
id="main-right"&&/div&
id="footer"&&/div&
注意：这里对id为main的div里面的子div
main-left和main-right设置浮动样式时，要设置宽和高不然不起作用(起单独一个宽或者高也不起作用，这里的背景颜色只是父div的背景颜色)。可能的原因是div里面没内容，没长和宽，自然不会显示背景颜色
3、当一个div包含两个左右浮动的div并且后面接个普通的div时
&div id="main"&
&div id="lside"&
&div id="rside"&
&div id=”footer” &
因为两个浮动的div浮在水面上，但是父div(即id为main的div)没有高度所以没把父div撑开。Footer的div会在水平面上，所以加背景颜色和height后可以看到此div在这两个浮动div下面，要使footer的div呈现在下面并且不被覆盖，
第一种方法：给main的div加height：800px；让他撑开
第二种方法：在两个浮动div后面加上一个class为cl的div，样式为clear：both；
网页制作的初步完成：
Html代码：
charset="UTF-8"&
&title&&/title&
rel="stylesheet"
type="text/css"
href="css/reset.css"/&
rel="stylesheet"
href="css/首页实战-2.css"
id="container"&
&!--div#container--&
id="header"&
&!--div#header+div#main+div#footer--&
src="img/logo.jpg"
id="logo"/&
href="#"&导航1&/a&&/li&
&!--li*7&a&{导航$}--&
href="#"&导航2&/a&&/li&
href="#"&导航3&/a&&/li&
href="#"&导航4&/a&&/li&
href="#"&导航5&/a&&/li&
href="#"&导航6&/a&&/li&
href="#"&导航7&/a&&/li&
src="img/about_banner.jpg"
id="banner"
id="main"&
id="lside"&
class="subtitle"&
src="img/circle.gif"/&
&h1&核心业务&/h1&
href=""&MORE&&&/a&
class="four"&
&h2&电子商务类网站建设&/h2&
src="img/eshop_service.jpg"
&!--ul&li*5&{方便的货物管理$}--&
href="#"&方便的货物管理&/a&&/li&
href="#"&自定义会员类型&/a&&/li&
href="#"&在线支付功能&/a&&/li&
href="#"&丰富的订单统计&/a&&/li&
href="#"&财务报表生成&/a&&/li&
class="four"&
&h2&电子商务类网站建设&/h2&
src="img/eshop_service.jpg"
&!--ul&li*5&{方便的货物管理$}--&
href="#"&方便的货物管理&/a&&/li&
href="#"&自定义会员类型&/a&&/li&
href="#"&在线支付功能&/a&&/li&
href="#"&丰富的订单统计&/a&&/li&
href="#"&财务报表生成&/a&&/li&
class="four"&
&h2&电子商务类网站建设&/h2&
src="img/eshop_service.jpg"
&!--ul&li*5&{方便的货物管理$}--&
href="#"&方便的货物管理&/a&&/li&
href="#"&自定义会员类型&/a&&/li&
href="#"&在线支付功能&/a&&/li&
href="#"&丰富的订单统计&/a&&/li&
href="#"&财务报表生成&/a&&/li&
class="four"&
&h2&电子商务类网站建设&/h2&
src="img/eshop_service.jpg"
&!--ul&li*5&{方便的货物管理$}--&
href="#"&方便的货物管理&/a&&/li&
href="#"&自定义会员类型&/a&&/li&
href="#"&在线支付功能&/a&&/li&
href="#"&丰富的订单统计&/a&&/li&
href="#"&财务报表生成&/a&&/li&
id="rside"&
class="subtitle"&
src="img/circle.gif"/&
&h1&文章观点&/h1&
href=""&MORE&&&/a&
&!--ul#nav&li*7&{文章$}--&
href="#"&这是一篇好文章1&/a&&/li&
&!--li*5&a&{这是一篇好文章$}--&
href="#"&这是一篇好文章2&/a&&/li&
href="#"&这是一篇好文章3&/a&&/li&
href="#"&这是一篇好文章4&/a&&/li&
href="#"&这是一篇好文章5&/a&&/li&
class="subtitle"&
src="img/circle.gif"/&
&h1&联系我们&/h1&
href=""&MORE&&&/a&
id="contact"&
id="footer"&
&!--ul&li*7&a&{联系我们} --&
href="#"&联系我们&/a&&/li&
href="#"&联系我们&/a&&/li&
href="#"&联系我们&/a&&/li&
href="#"&联系我们&/a&&/li&
href="#"&联系我们&/a&&/li&
href="#"&联系我们&/a&&/li&
href="#"&联系我们&/a&&/li&
&address&(C) 北京市灵犀慧通科技有限公司版权所有
http://www.lionhit.com 京ICP备号 W3C Valid CSS W3C Valid XHTML 1.0 Strict&/address&
样式代码：
#container {
margin: 0 auto;
width: 1002px;
height: 128px;
background: gray url(../img/top_bg.jpg)
no-repeat;
float: left;
/*1、让导航横向*/
/*background:
/*2、将导航撑开*/
width: 90px;
margin-right: 1px;
font-size: 16px;
font-family: "微软雅黑";
color: #363636;
/*8、文字颜色*/
display: block;
/*5、鼠标移动上去后背景颜色局限在a标签内容中*/
height: 37px;
/*6、这些高度都有规定的*/
width: 90px;
text-align: center;
/*7 、让文字居中*/
#nav a:hover {
/*3、鼠标放上来后变的样式*/
background: url(../img/nav_on.gif);
/*4、鼠标移动后的背景颜色*/
margin: 10px 0;
/*height: 800 */
.subtitle{
height: 37px;
background: url(../img/index_main_top_bg.gif);
/*14对原先设置的背景颜色进行更改*/
.subtitle img{
float: left;
/*10将初始化的图片左浮动*/
margin: 5px 0 0 10px;
/*11对图片进行微调*/
.subtitle h1{
float:left;
font-size: 16px;
/*12对标题中字体进行设置*/
font-family: "微软雅黑",simhei,sans-serif;
margin-left:10px;
.subtitle a{
float: right;
font-size: 12px;
/*13对超链接进行微调*/
width: 326px;
height: 200px;
background: #EEE;
/*这里将原先的背景改成其他的颜色(用QQ截图下面有显示RGB的颜色,这里只是转换成16进制)*/
float: left;
margin: 10px;
font-size: 16px;
font-family: "微软雅黑";
margin: 6px 0 6px 10px;
/*16将h2标题做做修改*/
.four img{
float: left;
/*11、让class为four标签的img左浮动*/
margin-left: 10px;
/*15图片背后有背景颜色为白色*/
padding: 6px;
background:
float: left;
margin-left: 10px;
background: url(../img/service_intro_bg.gif)
no-repeat;
/*16标签前面的小黑点*/
padding-left: 10px;
/*17小黑点在字的下面*/
height: 20px;
/*18a标签的颜色*/
height: 480px;
width: 694px;
border: 1px solid #EEE;
float: left;
/*8、让左右两个div并列一起*/
/*background:*/
/*这里设置是来区分9*/
/*19删除背景图*/
border-top: none;
/*height: 600*/
width: 294px;
/*border:1*/
float: right;
/*让左右两个div并列一起*/
/*background: */
/*这是一整个大的div到后面设置的话这个要去掉了*/
background: #EEE;
margin-top: 1px;
padding-top:10px;
display: block;
background: url(../img/article_head.gif)
no-repeat;
height: 29px;
padding-left: 30px;
#art a:hover{
background: url(../img/article_on_bg.gif);
/*鼠标移动到文章标题后的背景*/
margin-top: 1px;
height: 250px;
background: #EEE;
height: 120px;
/*background:*/
clear:both;
/* 9、撑开*/
margin-top: 20px;
#footer ul{
height: 40px;
background: #EEE;
#footer li{
float: left;
margin-top: 15px;
margin-right: 10px;
#footer address{
font-family: "微软雅黑",sans-serif;
font-size:10px;
margin-top: 15px;
最后完美的：
HTML代码：
charset="UTF-8"&
&title&&/title&
rel="stylesheet"
type="text/css"
href="css/reset.css"/&
rel="stylesheet"
href="css/首页实战-2.css"
id="container"&
&!--div#container--&
id="header"&
&!--div#header+div#main+div#footer--&
src="img/logo.jpg"
id="logo"/&
href="#"&导航1&/a&&/li&
&!--li*7&a&{导航$}--&
href="#"&导航2&/a&&/li&
href="#"&导航3&/a&&/li&
href="#"&导航4&/a&&/li&
href="#"&导航5&/a&&/li&
href="#"&导航6&/a&&/li&
href="#"&导航7&/a&&/li&
src="img/about_banner.jpg"
id="banner"
id="main"&
id="lside"&
class="subtitle"&
src="img/circle.gif"/&
&h1&核心业务&/h1&
href=""&MORE&&&/a&
class="four"&
&h2&电子商务类网站建设&/h2&
src="img/eshop_service.jpg"
&!--ul&li*5&{方便的货物管理$}--&
href="#"&方便的货物管理&/a&&/li&
href="#"&自定义会员类型&/a&&/li&
href="#"&在线支付功能&/a&&/li&
href="#"&丰富的订单统计&/a&&/li&
href="#"&财务报表生成&/a&&/li&
class="four"&
&h2&电子商务类网站建设&/h2&
src="img/eshop_service.jpg"
&!--ul&li*5&{方便的货物管理$}--&
href="#"&方便的货物管理&/a&&/li&
href="#"&自定义会员类型&/a&&/li&
href="#"&在线支付功能&/a&&/li&
href="#"&丰富的订单统计&/a&&/li&
href="#"&财务报表生成&/a&&/li&
class="four"&
&h2&电子商务类网站建设&/h2&
src="img/eshop_service.jpg"
&!--ul&li*5&{方便的货物管理$}--&
href="#"&方便的货物管理&/a&&/li&
href="#"&自定义会员类型&/a&&/li&
href="#"&在线支付功能&/a&&/li&
href="#"&丰富的订单统计&/a&&/li&
href="#"&财务报表生成&/a&&/li&
class="four"&
&h2&电子商务类网站建设&/h2&
src="img/eshop_service.jpg"
&!--ul&li*5&{方便的货物管理$}--&
href="#"&方便的货物管理&/a&&/li&
href="#"&自定义会员类型&/a&&/li&
href="#"&在线支付功能&/a&&/li&
href="#"&丰富的订单统计&/a&&/li&
href="#"&财务报表生成&/a&&/li&
id="rside"&
class="subtitle"&
src="img/circle.gif"/&
&h1&文章观点&/h1&
href=""&MORE&&&/a&
&!--ul#nav&li*7&{文章$}--&
href="#"&这是一篇好文章1&/a&&/li&
&!--li*5&a&{这是一篇好文章$}--&
href="#"&这是一篇好文章2&/a&&/li&
href="#"&这是一篇好文章3&/a&&/li&
href="#"&这是一篇好文章4&/a&&/li&
href="#"&这是一篇好文章5&/a&&/li&
class="subtitle"&
src="img/circle.gif"/&
&h1&联系我们&/h1&
href=""&MORE&&&/a&
id="contact"&
id="footer"&
&!--ul&li*7&a&{联系我们} --&
href="#"&联系我们&/a&&/li&
href="#"&联系我们&/a&&/li&
href="#"&联系我们&/a&&/li&
href="#"&联系我们&/a&&/li&
href="#"&联系我们&/a&&/li&
href="#"&联系我们&/a&&/li&
href="#"&联系我们&/a&&/li&
&address&(C) 北京市灵犀慧通科技有限公司版权所有
http://www.lionhit.com 京ICP备号 W3C Valid CSS W3C Valid XHTML 1.0 Strict&/address&
#container {
margin: 0 auto;
width: 1002px;
height: 128px;
background: gray url(../img/top_bg.jpg)
no-repeat;
float: left;
/*1、让导航横向*/
/*background:
/*2、将导航撑开*/
width: 90px;
margin-right: 1px;
/*font-size: 16
font-family: "微软雅黑";
line-height:37
/*让导航内容居中*/
font:16px/37px "微软雅黑",'黑体',sans-serif;
/*可以简写为下面的,可以少写，但要有顺序*/
color: #363636;
/*8、文字颜色*/
display: block;
/*5、鼠标移动上去后背景颜色局限在a标签内容中*/
height: 37px;
/*6、这些高度都有规定的*/
width: 90px;
text-align: center;
/*7 、让文字居中*/
#nav a:hover {
/*3、鼠标放上来后变的样式*/
background: url(../img/nav_on.gif);
/*4、鼠标移动后的背景颜色*/
margin: 10px 0;
/*height: 800 */
.subtitle{
height: 37px;
background: url(../img/index_main_top_bg.gif);
/*14对原先设置的背景颜色进行更改*/
line-height: 37px;
.subtitle img{
float: left;
/*10将初始化的图片左浮动*/
margin: 5px 0 0 10px;
/*11对图片进行微调*/
.subtitle h1{
float:left;
font-size: 16px;
/*12对标题中字体进行设置*/
font-family: "微软雅黑",simhei,sans-serif;
margin-left:10px;
.subtitle a{
display: block;
float: right;
font-size: 12px;
/*13对超链接进行微调*/
color: #888;
line-height: 37px;
width: 326px;
height: 200px;
background: #EEE;
/*这里将原先的背景改成其他的颜色(用QQ截图下面有显示RGB的颜色,这里只是转换成16进制)*/
float: left;
margin: 10px;
color: #A0A0A0;
/*字体颜色微调*/
font-size: 16px;
font-family: "微软雅黑";
margin: 6px 0 6px 10px;
/*16将h2标题做做修改*/
.four img{
float: left;
/*11、让class为four标签的img左浮动*/
margin-left: 10px;
/*15图片背后有背景颜色为白色*/
padding: 6px;
background:
float: left;
margin-left: 10px;
background: url(../img/service_intro_bg.gif)
no-repeat;
/*16标签前面的小黑点*/
padding-left: 10px;
/*17小黑点在字的下面*/
height: 20px;
color: #888;
/*18a标签的颜色*/
.four a:visited{
color: #808080;
.four a:hover{
color: #FF832C;
height: 480px;
width: 694px;
border: 1px solid #EEE;
float: left;
/*8、让左右两个div并列一起*/
/*background:*/
/*这里设置是来区分9*/
/*19删除背景图*/
border-top: none;
/*height: 600*/
width: 294px;
/*border:1*/
float: right;
/*让左右两个div并列一起*/
/*background: */
/*这是一整个大的div到后面设置的话这个要去掉了*/
background: #EEE;
margin-top: 1px;
padding-top:10px;
color: #888;
display: block;
background: url(../img/article_head.gif)
no-repeat;
height: 29px;
line-height:29px ;
padding-left: 30px;
#art a:hover{
color:#FF832C;
background: url(../img/article_on_bg.gif);
/*鼠标移动到文章标题后的背景*/
margin-top: 1px;
height: 250px;
background: #EEE;
height: 120px;
/*background:*/
clear:both;
/* 9、撑开*/
margin-top: 20px;
#footer ul{
height: 40px;
background: #EEE;
#footer li{
float: left;
margin-top: 15px;
margin-right: 10px;
#footer address{
font-family: "微软雅黑",sans-serif;
font-size:10px;
margin-top: 15px;
#footer a:visited{
color: #808080;
#footer a:hover{
color: #FF832C;热门下载资料排行
(window.slotbydup=window.slotbydup || []).push({
id: '2371210',
container: s,
size: '300,250',
display: 'inlay-fix'当前位置 :
使用邮箱登录17素材
已连续签到1天,签到3天将获得积分VIP1天很抱歉，此页面内部错误！
正在殴打程序猿，将尽快恢复.}