9项目九 应用DIV+CSS设计商业网站_第1页
9项目九 应用DIV+CSS设计商业网站_第2页
9项目九 应用DIV+CSS设计商业网站_第3页
9项目九 应用DIV+CSS设计商业网站_第4页
9项目九 应用DIV+CSS设计商业网站_第5页
已阅读5页，还剩31页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5+CSS3网页设计与布局应用DIV+CSS设计商业网站01

网上书城网站制作02

学习强国网站制作01.网上书城网站制作站点建立与结构分析框架搭建和页面布局网站头部及导航制作网站主体制作网站底部制作相对路径和相对与根目录路径9.1.1站点建立与结构分析

要做一个网站，首先需要建立一个站点。那么什么是站点？为什么要建立一个站点呢？因为网站不同于其他文件，比如一个图片，放到哪个盘哪个目录下都可以访问，而网站是许多文件相互关联的，所以需要专门建一个目录把它们分门别类存储起来。下面我们选择HBuilerX作为网站开发工具为例，为网上书店创建一个站点，具体的操作步骤如下：【1】选择菜单“文件--》新建--》项目”。站点建立与结构分析【2】在弹出对话框中分别进行项目类型，项目名称，项目位置，项目模板的设置。9.1.1站点建立与结构分析【3】点击第二步中的创建按钮，完成项目的创建，项目目录如下：其中CSS文件夹存放样式表文件，img文件夹存放图片素材文件，js文件夹存放JavaScript文件，index.html文件为网站的首页文件。9.1.1站点建立与结构分析创建完成站点后，就需要对页面结构进行分析了。根据效果图，分析页面分为几个板块，该怎么布局更加合理，下图则是一个网上书店的首页效果图，我们可以通过此网上书店的效果图来进行分析。9.1.1站点建立与结构分析从上图进行分析，可以看出整个页面分为头部区域、导航区域、Banner区域、新书上架区域，计算机与互联网区域和底部区域，其中Banner区域又分为左中右区域，整个页面居中显示。如果按照上述的描述作为网页的基本布局，整体效果如下：9.1.1框架搭建与页面布局【1】将图书配套资源文件夹中的图片素材复制粘贴到相对应的img文件夹中，将所有的图书照片放置到新建的uploadfile文件夹中。【2】打开项目根目录中的index.html文件，代码如下：<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title>网上书店首页</title> </head> <body> </body></html>9.1.2框架搭建与页面布局【3】按照分析的布局结构，进行盒子容器的设计。9.1.2<divid="topMember">

登录注册提示</div><divid="search">

头部搜索框</div><divid="daohang">

导航部分</div><divid="bodyBanner"> <divid="slaeTop">banner左边</div> <divid="adPPT">banner中间</div> <divid="discountTop">banner右边</div></div><divid="newBook">

新书上架</div><divid="typeBook">

计算机与互联网分类书籍</div><divid="foot">

底部内容</div>框架搭建与页面布局【4】HTML框架代码写完后，就该设置CSS样式表了，其中整个网页的宽度为1200PX,并且是居中显示的，BANNER部分分成左中右结构，CSS样式如下。定义全局样式：#topMember{height:30px;background-color:#f9f9f9;border-bottom:solid1px#f2f2f2}定义头部登录注册提示区域样式：*{margin:0px;padding:0px;height:auto;list-style-type:none;font-size:12px;}定义头部搜索框样式：#search{width:1200px;margin:0pxauto;height:120px;}9.1.2框架搭建与页面布局定义导航区域样式：#daohang{width:1200px;margin:0pxauto;height:42px;}定义BANNER部分样式：#bodyBanner{width:1200px;margin:6pxauto;clear:both;height:auto;overflow:hidden;}#slaeTop,#discountTop{width:230px;float:left;margin-right:5px;padding:5px;border:solid1px#eaeaea;}#adPPT{width:706px;height:304px;float:left;}定义新书上架和计算机和互联网分类书籍模块样式：#newBook,#typeBook{width:1200px;margin:10pxauto;clear:both;height:auto;overflow:hidden;}定义底部区域样式#foot{margin-top:30px;}9.1.2框架搭建与页面布局有了上面的基础，下面的任务就是通过HTML和CSS制作一个完整的网页。在本小节我们已经把整体框架搭建好了，就像盖房子一样，整体结构已经出来了，下面就需要分割空间了。9.1.2网站头部及导航制作先分析一下头部:头部分为两部分，一个是登录注册提示部分，一个是条件搜索部分，一个是导航部分。其中登录注册提示部分为一个宽度全屏灰色区域，区域内包含欢迎，登录，注册等欢迎信息，HTML结构及CSS样式如下：<divid="topMember"> <divid="topMemberInner"> <spanid="spanLogin"runat="server"runat="server">欢迎光临书城,请<ahref="Login.html">登录</a>成为会员</span> <span><ahref="Member/OrderList.html">我的书城</a></span> </div></div>#topMember{height:30px;background-color:#f9f9f9;border-bottom:solid1px#f2f2f2}#topMemberInner{height:30px;line-height:30px;width:1200px;margin:0pxauto;text-align:right;color:#646464;}#topMemberInnera{text-decoration:none;color:Red;}9.1.3网站头部及导航制作其中条件搜索区域分为三个部分，为左中右结构，分别用于显示网站LOGO,网站条件搜索表单，网站购物车和订单的按钮。

其中导航部分为横向的超级链接，第一个超级链接为分类链接，样式和其他超级链接有所区别详细代码请参加代码源文件9.1.3网站主体制作网站主体部分主要用列表形式进行图书信息的展示，主要分为三块内容，一块是网站广告，销售排行及优惠信息；一块是新书上架；一块是图书分类展示。其中第一块内容，主要分成左中右结构，分别表示图书销售排行，图书图片广告，及图书的打折优惠信息，其HTML基本结构为一个DIV包含三个DIV，被包含的三个DIV进行浮动，HTML基本结构代码如下：<divid="bodyBanner"> <divid="slaeTop">销售排行</div> <divid="adPPT">banner广告</div> <divid="discountTop">打折优惠</div></div>9.1.4网站主体制作其中销售排行以图片加文字混合的形式展示了销售排行的前两名。其中图片广告区域以图片幻灯片播放的形式，进行广告的展示，如果没有Js,Jquery基础，此处可以用一个静态的图片进行替换。打折优惠信息模块和销售排行模块非常相似，也是以图片加文字混合的方式展示打折销售的前两本图书信息。

新书上架部门由标题和图文列表组成。图书分类展示模块与新书上架模块类似，由图书类型标题和图书信息列表组成详细代码请参加代码源文件9.1.4网站底部制作此模块分为两个部分，即网站的底部和网站快捷操作部分，两个模块的HTML基本结构代码如下：<divid="bodyBanner"> <divid="slaeTop">销售排行</div> <divid="adPPT">banner广告</div> <divid="discountTop">打折优惠</div></div>CSS代码如下：#foot{margin-top:30px;}#footHr{height:2px;background-color:#ff2832;}#footImg{height:80px;background-color:#fafafa;border-bottom:solid1px#ebebeb;}#footLink{width:1200px;margin:0pxauto;margin-top:10px;}9.1.5网站底部制作其中网站底部由四块区域组成，使用浮动定位进行横向排列。其中网站快捷操作部分由一系列的超级链接经过整齐的排列而成。详细代码请参加代码源文件9.1.5相对路径和相对于根目录路径在相对路径和绝对路径中，../表示返回上一级，因为css文件在css文件夹里，图片在img文件夹下，那么样式表文件就需要返回上一级找到img文件夹才能找到相应的图片。直接文件夹名或是./开头表示和当前平级。不管是带../还是不带，这种写法都叫相对路径；另一种叫相对于根目录路径，它的写法必须以/开始，意思是从根目录开始一级一级向下查找，不管在哪里，要使用x.png这个图片，路径都必须是/img/x.png；还有一种写法叫做绝对路径，是以http://域名开始的。两种方法各有优劣，可以根据需要采用一种合适的方法。9.1.602.学习强国网站制作站点建立与结构分析框架搭建与页面布局网站Banner与导航菜单网站专业查询及图片展示网站编辑推荐网站友情链接和底部站点建立与结构分析建立站点的步骤和9.1项目中建立站点的步骤相同。下面我们选择HBuilerX作为网站开发工具为例，为学习强国网站创建一个站点，具体的操作步骤如下：【1】选择菜单“文件--》新建--》项目”。9.2.1站点建立与结构分析9.2.1【2】在弹出对话框中分别进行项目类型，项目名称，项目位置，项目模板的设置。站点建立与结构分析9.2.1【3】点击第二步中的创建按钮，完成项目的创建，项目目录如下：其中CSS文件夹存放样式表文件，img文件夹存放图片素材文件，js文件夹存放JavaScript文件，index.html文件为网站的首页文件。站点建立与结构分析9.2.1创建完成站点后，就需要对页面结构进行分析了。根据效果图，分析页面分为几个板块，该怎么布局更加合理，下图则是一个网上书店的首页效果图，我们可以通过此网上书店的效果图来进行分析。站点建立与结构分析9.2.1从上图进行分析，可以看出整个页面分为网站Banner、导航菜单、学科专业查询、编辑推荐、友情链接和网页底部，整个页面banner部分和导航菜单部分为全屏效果，其余部分为固定宽度居中效果。如果按照上述的描述作为网页的基本布局，整体效果如下：框架搭建与页面布局【1】将图书配套资源文件夹中的图片素材复制粘贴到相对应的img文件夹中。【2】打开项目根目录中的index.html文件，代码如下：9.2.2<divid="bodyBanner"> <divid="slaeTop">销售排行</div> <divid="adPPT">banner广告</div> <divid="discountTop">打折优惠</div></div>框架搭建与页面布局【3】按照分析的布局结构，进行盒子容器的设计。9.2.2<divid="banner">banner部分</div><divid="menu">导航菜单</div><divid="container"> <divid="prosel"> <divid="prolist">学科门类及专业查询</div> <divid="proimg">图片宣传</div> </div> <divid="recommend">编辑推荐</div> <divid="friendlink">友情链接</div> <divid="foot"></div></div>框架搭建与页面布局【4】HTML框架代码写完后，就该设置CSS样式表了，其中banner部分和导航菜单为全屏,其余部分使用container容器包装，宽度为1000PX居中，并且学科专业查询和图片宣传为左右结构，CSS样式如下。定义全局样式：9.2.2*{margin:0px;padding:0px;height:auto;list-style-type:none;font-size:14px;}Container容器：#container{width:1000px;margin:10pxauto;overflow:hidden;}学科专业查询和图片宣传：#prolist{width:320px;float:left;}#proimg{width:660px;float:left;}网站Banner与导航菜单网站最上面部分为网站banner部分及导航菜单部分，这两部分的背景颜色都是全屏效果，但具体的网页内容为固定宽度居中效果，所以应该为全屏DIV中嵌套固定宽度DIV来实现上述效果。其中网站banner部分的HTML结构如下：9.2.3<divid="banner"> <divid="content"> </div></div>CSS样式如下：#banner{height:250px;background-color:#d40202;}#banner#content{height:250px;width:1000px;margin:0pxauto;background-image:url(../img/banner.png);}网站Banner与导航菜单其中网站导航菜单部分的HTML结构如下：9.2.3<divid="menu"> <divid="content"> <ul> <li><ahref="#">学习新思想</a></li> <li><ahref="#">十九大时间</a></li> …… <li><ahref="#"><imgsrc="img/search.png"/></

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论