浪度九州城---首页到产品内容页面的制作过程
1、首页制作包含top,foot,以及内容展示的各项列表(list)
首先top部分:打开vs2010之后,找到我们需要制作的index.html页面,然后Ctrl+K+D 调整页面代码格式。
然后找到<body>上面的class=“top”这个<div> ,再点击左边 -收缩到<!--/slider --> 这个位置之后把导航条里面和其他地方的英文字体、全部修改过来。
然后到风讯后台里面添加样式把复制到的top到<!--/slider --> 中间的这段代码放进去,添加样式就OK了,第一步完成。
2、添加标签:点击标签管理首先我们添加分类,方便管理,然后再我们的分类中就可以添加我们需要的标签了。
点击新建标签---输入标签名称(注意标签名称后面的分类)---插入内容中选择浏览类(因为top一般是不会改变的)
然后选择我们前面添加进去的样式,然后第二部就完成了。
3、将我们的添加的标签加入到我们的index.html页面里面将我们之前复制进来的那段代码全部替换成我们的{Fs_top}标签,这样我们的top就完成了。
一定要记住保存!!!
今天回忆一下内容页面制作方法
1、首先我们需要明白新闻页面它会存在列表页面和内容页面2个方面,然后首先我们先制作列表页面, new_List。
现在我们需要明白list就是我们的列表,通常的网站都是读取<li></li>或者<DIV></DIV>这个标签里面的内容进行数据交互。
那我们来尝试一下
<div class="col_1_of_3 span_1_of_3">
<a href="{#URL}">
<div class="inner_content clearfix">
<div class="product_image">
<img src="{#Picture}" alt="" />
</div>
<div class="sale-box">
<span class="on_sale title_shop">New</span></div>
<div class="price">
<div class="cart-left">
<p class="title">
{#uTitle}</p>
<div class="price1">
<span class="actual">热销</span>
</div>
</div>
<div class="cart-right">
</div>
<div class="clear">
</div>
</div>
</div>
</a>
</div>
我们就提取的是DIV中的元素来做list列表样式在这个DIV中我们看到它包含了 标题 图片 链接 副标题 这些标签参数,我们就把这些地方的数据进行更替、换成我们CMS里面的参数标签。
再下面 我们看下读取<li></li>中的参数
<li><a href="{#URL}">{#uTitle}</a></li>
这个就更加简单了、 我们只需要截取一个链接和一个副标题信息就完成了。