搜索
第章电脑商城网站专业的数码网上购物商城,产品包括服务器、电脑、电脑配件、网络产品等数万种商品直销,便捷，诚信的服务,为您提供愉悦的网上商城购物体验。在这个章节里，我们将分析一个电脑商城网站的设计方式，这个网站里，我们将给出“首页”、“台式机”和“服务器”三个页面，由于篇幅的关系，章节里将只详细讲述前两个页面。1.1电脑商城网站效果图分析这个交友网站的风格是新颖时尚，所以其中不仅需要通过缤纷的色彩体现网站的特色，而且需要通过比较多的照片来吸引访问者的眼球。在本章里，将着重分析“首页”和“台式机页面”的设计样式，而“服务器”页面的代码由于风格和前两个页面非常相似，就不再叙述，这部分的代码请大家自行从光盘里阅读。1.1.1首页效果分析电脑商城网站的首页效果如下图1所示，它是一个“三行”的布局样式，在第一行里，放置了网站的logo图片和站点导航信息，在第二行里，分别用三行来表示“网站导航”、“网站正文”和“有关商家”元素，而在最后一行里，放置网站页脚部分的导航信息。在第二行框架里，包容了电脑商城网站的主体部分，这部分其实也是个三行的效果，第一行包括网站导航模块和搜索模块，第二行包括“最近行情”、“最新商品”两部分内容，第三行则是网站合作商家模块。ASP.NET简明教程•2•第1章ASP.NET概述•3•图1首页的效果图1.1.2电脑商城网站台式机页面的效果分析这个页面大致上也采用了三行的样式，第一第三行的样式和首页是相同的，在第二行里，包含了两个大列，第一列容纳了“导购分类”、“业内动态”和“联系客服”这三大块内容，而第二列则是由“推荐商品”和“新品推荐”组成的。“推荐商品”是本网站的一大特色，所以在这个页面里，将用JS+CSS的方式构建“动态地显示推荐的商品”这个效果。在下图2里，我们将分析这个页面的效果，和首页完全相同的部分我们就不再讲述。ASP.NET简明教程•4•图2电脑商城网站的效果图1.1.3网站文件综述在这个网站里，除了上文里提到的首页和活动展示页面外，还需要包含“服务器”页面，而这些页面里所用到图片，css文件和js代码，将分别放置在img，css和js目录里。文件及其功能如表1-1所示：表1-1交友网站文件和目录一览表模块名文件名功能描述页面文件index.html首页Shop-Design.html台式机页面Shop-Service.html服务器页面css目录之下所有扩展名为css的文件本网站的样式表文件Js目录之下所有扩展名为js的文件本网站的javascirpt脚本文件img之下所有的图片本网站需要用到的图片第1章ASP.NET概述•5•1.2规划首页的布局在前文里，我们已经介绍了切图的方法，所以这里我们直接进入到设计步骤，设计的时候还是按照老规矩：先用DIV构建总体框架，随后再细分，最后用CSS和Js绘制动态的效果。1.2.1搭建首页头的DIV页头小图片，导航信息和购物车三部分组成，下图3里包含了页头DIV的设计。图3首页页头的DIV设计分析图实现页头部分的关键代码如下所示：1.divid=pageBorderTop2.imgsrc=img/star.gifid=staralt=/3.ahref=#imgsrc=img/spacer.gifalt=style=width:240px;height:90px;position:absolute;margin:30px0020px;z-index:2000;//a4.divid=quickLinks5.ul6.liahref=index.html首页/a/li7.liahref=#注册/a/li8.liahref=#strong登入/strong/a/li9.liahref=#帮助/a/li10./ul11./div12.divid=cartLinkimgsrc=img/cart.gifalt=0/ahref=#购物车strong(0)/strong/a/div13./div在上述代码的第2第3行的代码，放置的是一简单的的DIV，真正的页头是从第4行开始定义。从第4行到第11行，我们定义了导航工具条，比如定义“首页”、“注册”和“登录”等字样，在第12行里，我们定义了购物车。1.2.2搭建首页主体部分的DIV按照前文的思路，我们还是用DIV的方式构建首页到主体部分的DIV，正文部分的DIV包含了3个部分，其中第一个不分时由网站Logo，网站导航和网站搜索组成的，其效果如下图4所示。ASP.NET简明教程•6•图4主体部分第一列DIV效果图第一部分关键布局代码如下：1.div2.divid=topNavi3.ulid=kwicks4.liaclass=kwickmodulehref=Shop-Design.htmlspan台式机br/5.品牌机，兼容机/span/a/li6.……7./ul8./div9.divid=breadCrumbahref=#class=headerNavigation首>>/a10.divid=searchContainer11.divclass=sdSeitedurchsuchen/div12.inputtype=textname=keywordsid=txtSearchstyle=color:#999999onkeyup=searchSuggest();value=输入查找内容/13.divid=search_suggest/div14.inputtype=imagesrc=img/searchContainerButton.pngalt=搜索title=搜索id=go/15./div16./div17./div在上述代码中，我们同构第2行到第8行定义了网站的导航部分，第9行道第16行定义了网站页面导航和网站搜索部分，其中第10行的ID定义一个背景图片，这个背景图片和搜索栏结合，所以出现了如图4所示的一个与众不同的搜素栏。第二部分，开发主体部分的正文部分，在正文部分主要分为两列，在第一列是业内最新信息，第二列是最新商品，而在这两列中，都是分为上部分和下部分两部的，现在我们就来一一叙述。首先介绍的是第一列的上部分，如下图5所示：第1章ASP.NET概述•7•图5第一列上部分DIV效果图上图中，每个商家的最新报价都是由一个DIV组成的，因为这部分代码没有什么特点就不再最详细的解释了，其代码如下：1.ahref=#imgsrc=img/indexModule.pngalt=//a2.div3.h4AM3平台主板技嘉M720-ES3售价469元4.spanstyle=font-size:12px;ahref=#[查看]/a/span/h45.p 技嘉为我们带来一……/p6./div7.……8./div第一列下部分和上部分是一样的，只是改了字体颜色而已，如下图6所示：ASP.NET简明教程•8•图6第一列下部分DIV效果图由于下部分DIV和上部分DIV的效果是相同的，代码就不写了，如有需要可自行从光盘中读取。第二列搭建的是“商品快讯”和“电脑设备/组网设备”两个部分，而这两个部分的布局是一样的，所以这里就只介绍一个“商品快讯”部分，其效果如下图7所示：第1章ASP.NET概述•9•图7第二列上部分DIV效果图上图中每个商品都是由一个DIV组成的，并用虚线划分开来，其代码如下：1.divstyle=width:296px;float:right;2.divclass=alignRightstyle=text-align:center;background-color:#F2F2F2;color:#A836003.h4商品快讯/h4/div4.!--title--5.divclass=newProductsDefault6.divclass=showsimgsrc=img/pc/001.bmp//div7.divclass=content8.ahref=#class=productLink联想G455A-M320(H)/abr/9.特价strong3900.00元/strongbr/10.del原价4199.00元/delbr/11.ahref=#small查看详细/small/a12./div13./div14.…….15./div16./div在上述代码中，第5行到第12行就是一个商品展示，这里要注意的就是第5行引用的CSS“newProductsDefault”，在这里定义了一个背景图片，这个背景图片就是虚线。第三部分是网站的一些合作商家，它就是由一个简单的DIV组成的，其效果如下图ASP.NET简明教程•10•8所示：图8第三部分DIV效果图上图的关键代码如下：1.divstyle=padding:00px;margin-top:30px;2.imgsrc=img/beliebtesteSuchbegriffe.gifalt=beliebtesteSuchbegriffe/br/3.spanclass=tCCTag1ahref=#IBM/a/span4.spanclass=tCCTag3ahref=#DELL(戴尔)/a/span5.……6./div由于这里的DIV比较简单这里就不做细致的描述了，要注意的就是字体颜色的不同，那是因为每个span里都引用了不同的CSS。1.2.3搭建首页里页脚部分的DIV这个网站的页脚部分是比较有创意的，以一种竖列的方式来排列的导航部分，效果如下图9所示：图9首页里页脚部分的DIV设计实现这部分的代码如下所示：1.divid=pageFooter2.divid=footerLinksclass=float3.divclass=footerContainer4.ul5.liahref=#首页/a/li6.……7./ul8./div9.divclass=footerContainer10.ul11.liahref=#数码相机/a/li12.……13./ul14./div15.divclass=footerContainer第1章ASP.NET概述•11•16.ul17.liahref=#imgsrc=img/socialIcons/rss.gifalt=RSS-Feed/订阅免费新闻/a/li18.…….19./ul20./div21.divclass=footerContainerCopyrightCopyright©2008-2010byahref=#全面攒机网/a|保留一切版权.22.divclass=footerContainerSocial23.arel=nofollowstyle=text-decoration:none;href=#24.imgsrc=img/socialIcons/digg.png//a25.…..26./div27./div28./div29./div在上述代码中，第3行到第8行，第9行到第14行，第15行到第20行的三个DIV分别定义了三列的导航栏，而第21行到第27行定义了网站的友情链接的小图片。1.2.4首页CSS效果分析在前面描述DIV的时候，我们已经讲述了部分CSS的代码，在这里，我们将用表格的形式描述首页里其他CSS效果。表1-2首页DIV和CSS对应关系一览表DIV代码CSS描述和关键