Download
1 / 18
180 likes | 342 Views
电子商务平台建设. 任务十 网站前台首页设计. 首页 (index.asp) 结构. 显示结构 : 头部文件 head.asp 为前台所有页共用部分 本页显示部分 第一区 : 滚动新闻区 第二区 : 栏目显示 1 及轮播及阅读排行等区 第三区 : 图片新闻区 第四区 : 栏目显示 2 第五区 : 友情链接区 脚部文件 foot.asp 为前台所有页共用部分. 1. 2. 3. 4. Head.asp 结构. 1. 欢迎及日期等显示区 2.LOGO 及站内搜索、广告区 3. 菜单区 4. 宽幅广告区
E N D
电子商务平台建设 任务十网站前台首页设计
首页(index.asp)结构 • 显示结构: • 头部文件head.asp 为前台所有页共用部分 • 本页显示部分 • 第一区:滚动新闻区 • 第二区:栏目显示1及轮播及阅读排行等区 • 第三区:图片新闻区 • 第四区:栏目显示2 • 第五区:友情链接区 • 脚部文件foot.asp 为前台所有页共用部分
1 2 3 4 Head.asp结构 • 1.欢迎及日期等显示区 • 2.LOGO及站内搜索、广告区 • 3.菜单区 • 4.宽幅广告区 • 以上每区用表格表示，表格宽970像素，背景的为默认色（白色）；每表中套有宽度为960且居中的表格，这样做的目的是让显示区两边有5像素的白色边框。
子任务1：修改head.asp • 目标：将head.asp修改成示范站的效果。 • 操作： • 1.删除第二区（logo区）内嵌表中间单元格内代码（含FROM语句）、又侧单元格广告代码。详细删除信息如下： 广告代码1
2.选中第二区内表格（960像素宽的）,设置表格属性,将表格设置为2行.2.选中第二区内表格（960像素宽的）,设置表格属性,将表格设置为2行. • 3.设置第二区内表格（960像素宽的）背景图片为提供的bg.jpg. • 4.删除第二区第一行左侧LOGO图，更换提供的LOGO图logo.gif。 • 5.在第二区第一行中间单元格插入003.gif,并右对齐,单元格高度设置为90像素. • 6.复制第一区中的”会员注册- 会员登陆- 设为首页- 加入收藏”到第二区第一行右侧单元格,并按照示例设置换行. • 7.调整第二区各单元格宽度到合适位置 • 8.合并第二区第二行为一单元格,插入index.swf,宽度960像素,高度261像素. • 9.删除第一区整个表格 • 10.删除第四区整个表格
Foot.asp结构 • 1.说明频道显示区(表一) • 2.版权等信息显示区(表二) 1 2
子任务2:修改foot.asp • 目标:修改成示例站的foot显示格式 • 操作: • 1.改”在线QQ ”后的换行代码”<br />”为” - ” • 2.改”版权所有”后的换行代码”<br />”为” - ”
子任务3 在foot中显示站点统计链接 • 目的:使站点具有统计分析功能 • 说明:目前网上有专门提供站点统计分析的平台,网站只要注册成为用户,并获得统计代码后嵌入自己的网页即可. • 提供统计服务的网站与样式:
操作: • 1.登陆http://www.linezing.com/或者http://www.51.la • 2.注册成为用户,记住帐户名及密码 • 3.添加站点,选择式样,然后生成统计代码 • 4.进入自己的网站后台”站点信息配置”中,将统计代码存入站点配置数据库. • 或将统计代码直接替换foot.asp中的”<%Call Ok3w_Site_Tongji()%>”代码 • 5.上传修改页,显示效果.
index.asp代码分析 第一表格：显示滚动新闻 • <table width="970" border="0" align="center" cellpadding="0" cellspacing="0"> • <tr><td bgcolor="#FFFFFF"> • <table width="960" border="0" align="center" cellpadding="0" cellspacing="0" style="margin:5px 0px;"> • <tr><td width="7%"><strong>站内公告：</strong></td> • <td width="93%"> • <%Call Ok3w_Article_Gundong("",10,880,12,120)%> 说明：参数1为栏目id号；参数2为显示信息条数；参数3为滚动新闻显示宽度；参数4为显示高度；参数5为滚动速度. • </td></tr> • </table></td> • </tr> • </table>
第二表格: • 分三列 • 第一列内放了上下两个显示栏目标题和信息列表的表格 • 第二列放了一个轮播图,一个显示栏目标题和信息列表的表格 • 第三列放了一个有二行的表格,显示”最近更新”和”点击排行”的内容.标题在第一行,内容在第二行. • 栏目显示: 用一2行1列的表格存放,第一行显示栏目名及更多的链接,第二行显示栏目中最新发布的信息标题链接。
首页栏目显示代码 代码如下： <table width="313" border="0" cellpadding="0" cellspacing="0" class="box"> <tr> //行1 <td class="box_title"><h3> <%=GetClassName(1)%> </h3 <span><a href=“ <%=Page_URL(ChannelID,1,"")%> ">更多>></a></span></td> </tr> <tr> //行2 <td> <%Call Ok3w_Article_IndexClassImg(1,72,72,1,12)%> <div class="box_list"> <%Call Ok3w_Article_List(1,5,1,17,False,False,False,"",False,"")%> </div></td> </tr> </table>
<%=GetClassName(1)%> 显示栏目名称，参数为栏目ID <%=Page_URL(ChannelID,1,"")%> 显示“更多”的栏目列表页地址list.asp，带栏目ID。参数1为频道号,参数2为栏目2 <%Call Ok3w_Article_IndexClassImg(1,72,72,1,12)%> 显示栏目中分类略图.参数1为栏目ID,参数2为略图高,参数3为略图宽,参数4为打开略图记录的个数,参数5为每行显示文字数. <%Call Ok3w_Article_List(1,5,1,17,False,False,False,"",False,"")%> 显示栏目中最近发布的信息标题(带信息显示链接show.asp)。参数1为栏目ID；参数2为文章显示行数；参数3为列数；参数4为每个文章标题的字数；参数5为推荐新闻标记；参数6为栏目名显示标记；参数7为文章发布日期显示标记；参数8为显示日期格式（0,1,2,3,4,5）；参数9为显示阅读数标记;参数10为排序类型(hot, rnd, new,其它) 注意:栏目区显示栏目变化时,必须调整上述四段代码中的栏目ID，其它根据需要设置，具体程序请参阅VBS.ASP。
图片新闻显示代码： <table width="970" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#FFFFFF"> <table width="960" border="0" align="center" cellpadding="0" cellspacing="0" class="box"> <tr> <td align="center"> <%Call Ok3w_Article_ImgGD("",1,12,940,135,142,100,False,"new",120)%> //参数1为显示的栏目ID，空为所有栏目；参数2为图片新闻显示行数；参数3为每条新闻标题显示的字数；参数4为整个图片区域宽度；参数5为图片区域高度；参数6为每个图片的宽度；参数7为每个图片的高度；参数8为推荐新闻标记；参数9为排序类型（new为按照发布时间排序）；参数10为图片推动的速度。 </td> </tr> </table></td> </tr> </table>
友情链接代码 <table width="970" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#FFFFFF"> <table width="960" border="0" align="center" cellpadding="0" cellspacing="0" class="box"> <tr> <td class=“box_title”> <h3> <a href=“http://www.ok3w.net/” target=“_blank”>友情连接</a> </h3></td> //紫色部分建议删除 </tr> <tr> <td class=“link”> <%Call Ok3w_Site_Link(27,9,1,1)%> //显示图文链接，参数1为显示链接数；参数2为链接标题字数；参数3为链接类型，1为图文，0为文字；参数4为频道类型，1为新闻频道，2为软件频道 <%Call Ok3w_Site_Link(27,8,0,1)%> //显示文字链接 </td> </tr> </table>
友情链接显示程序Ok3w_Site_Link代码 • Private Sub Ok3w_Site_Link(TopN,LeftN,oT,cT) • StrTmp = "" • If oT = 1 Then • Sql = "select top " & TopN & " * from Ok3w_Link where Ltype=1 and Ctype=" & cT & " order by Lorder,Lid" • Rs.Open Sql,Conn,0,1 • Do While Not Rs.Eof • StrTmp = StrTmp & "<a href=""" & Rs("Lurl") & """ target=""_blank""><img src=""" & Rs("Lpic") & """ alt=""" & Rs("Lname") & """ width=""88"" height=""31“ " border=""0"" /></a> " • Rs.MoveNext • Loop • Rs.Close • End If • If oT=0 Then • Sql = "select top " & TopN & " * from Ok3w_Link where Ltype=0 and Ctype=" & cT & " order by Lorder,Lid" • Rs.Open Sql,Conn,0,1 • Do While Not Rs.Eof • StrTmp = StrTmp & "<a href=""" & Rs("Lurl") & """ target=""_blank"">" & Rs("Lname") & "</a>" • Rs.MoveNext • If Not Rs.Eof Then StrTmp = StrTmp & "<span>|</span>" • Loop • Rs.Close • End If • Response.Write(StrTmp) • End Sub
子任务4 修改INDEX.ASP • 目标：将index.asp修改成示例站index.asp样式 • 操作： • 1.在第1行第1列中删除第2个表格，并将第1个表格高度设置成248像素；表内栏目标题行高28像素（单元格高度）;栏目内容单元格高度220像素，内容顶端对齐；将该表中栏目标题、栏目更多链接、栏目缩略图显示及栏目文章标题显示程序中的ID改为站点“公司新闻”的ID 号，显示文章行数为5。 • 2.删除第1行第2列轮播图下面的栏目显示表格； • 选中第1行第3列中的表格，切换到代码中，将整个表代码删除； • 3.将第2列中的代码移到第3列中 • 4.将第1列中的代码复制1份到第2列，并修改栏目ID为“行业动态”栏目的ID号，显示文章行数为5。
5.选择第4行的内部表格（960宽度的），将属性中的列数改为4列（每列240） ，表格高度为220 。 • 6.分别修改第4行的前3列中表的宽度为236；高度为228；第1行单元格高28；第2行单元格高200，顶端左对齐；同时修改栏目ID，栏目内容列表区每行显示16个字。 • 7.复制前3列中任意1格中的栏目显示表格到第4列，并修改栏目ID 号。 • 8.选中第4行表格全部内容（包括表格本身），然后复制选种的代码，粘贴到图片新闻显示区表格的前面。 • 9.修改复制代码中每列的栏目ID。 • 10.保存并上传文件，显示修改效果。 • 11.修改VBS.ASP中的Ok3w_Site_Link程序，使友情链接图高宽为145，高为60像素。
