《网页设计与制作案例教程》第11章 综合实例-制作电子商务类网站首页_第1页
《网页设计与制作案例教程》第11章 综合实例-制作电子商务类网站首页_第2页
《网页设计与制作案例教程》第11章 综合实例-制作电子商务类网站首页_第3页
《网页设计与制作案例教程》第11章 综合实例-制作电子商务类网站首页_第4页
《网页设计与制作案例教程》第11章 综合实例-制作电子商务类网站首页_第5页
已阅读5页，还剩39页未读， 继续免费阅读

下载本文档

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

文档简介

第11章综合实例—制作电子商务类网站首页11.1网站建设的前期准备工作11.2创建站点11.3网站主页制作11.1网站建设的前期准备工作11.1.1网站整体需求分析11.1.2确定网站风格11.1.3网站素材搜集11.1.1网站整体需求分析在建设网站之前，需要对网站进行需求分析。网站需求分析要立足实际，对网站的背景、发展历史、网站现状等等内在因素和客户特点进行详细调查分析，然后根据网站和客户特点对网站进行总体规划。对于网站需求分析，有条件的话，可以针对公司领导层、管理层、作业层和潜在客户进行问卷调查，通过对调查问卷的分析，得出科学的结论，最后以需求分析报告的形式呈现，供相关人员参阅。网站整体需求主要包括以下几个方面：1．网站建设背景及目标主要涵盖网站的经营范围等，以及通过网站建设要达到的目标，比如吸引更多的客户来网站交易购物。2．网站建设现状分析通过调查研究，分析同领域网站建设现状，并进行归类总结，找出同类网站建设的优点和不足，在后期建设过程中弥补不足，发挥优势。3．网站建设目标分解通过调查分析，明确网站建设目标，并将目标划分为若干子模块，确定建站所使用的技术，是采用静态网页技术还是动态网页技术，采用何种数据库。4．网站建设资金及人员投入情况分析确定网站建设规模，申请域名，确定是购置服务器还是租用空间；通过建站需求、模块划分确定建站资金和人员投入情况；核算建站所需时间；针对网站的规模及特点，分析由专门人员维护网站还是由网络公司对网站进行后期维护。11.1.2确定网站风格根据电子商务网站的特点，确定网站的整体风格，即网站的色彩和版式。网站风格是在网站整体需求分析的基础上，通过明确网站设计的目的和用户需求、访问者的特点等得出的结论。本实例是针对一个工业产品交易平台的网站，网站与用户交互性强，因此确定其主色调为暖色系的橘黄色给人以轻松愉快的浏览环境。图11-1是电子商务网站的LOGO。11.1.3网站素材搜集明确网站主题和划分板块后，接着要为后续的网站建设搜集素材。若想让网站有声有色，能够吸引客户注意，就要尽量搜集文字、图片、音频、视频、动画等多媒体素材。对于一些通用素材，可以从网上搜集得到，也可以根据需求自行制作素材，比如，通过Photoshop图像处理软件对图像进行优化处理，使用Flash制作动画等。如图11-2所示。图11-1网站LOGO图11-2Adobe公司的Photoshop和Flash11.2创建站点网站建设的第一步是创建本地站点。在Dreamweaver中，选择“站点→新建站点”命令，弹出“工业产品交易平台”的站点定义为对话框，输入站点名称“工业产品交易平台”，然后单击【下一步】按钮，继续在打开的下一个对话框中进行设置，直到完成站点的创建操作。有关创建站点的具体操作在第1章中已经详细介绍，这里不再赘述，请用户参考第1章的介绍完成站点的创建。创建的站点信息将显示在“文件”面板中。如果需要对站点参数进行修改，可以单击“站点→管理站点”对站点进行重新设置。11.3网站主页制作11.3.1使用Div+CSS布局页面11.3.2设置页面属性11.3.3插入图片11.3.4添加导航条11.3.5推荐厂家11.3.6网页广告设计制作11.3.7页面右侧栏目设计11.3.8行业栏目设计11.3.9右边侧栏设计11.3.10网页底部设计11.3.11案例小结11.3.1使用Div+CSS布局页面使用Div+CSS实现页面布局，具体操作如下：1）在Dreamweaver中，选择“窗口→文件”命令，打开“文件”面板，在面板中单击鼠标右键，新建一个网页文件，并将其以“index.html”为文件名保存在创建的站点中。2）在站点内新建一个文件夹，命名为“img”，将收集好的图片素材存放到该文件夹中，如图11-3所示。3）双击“文件”面板中的“index.html”将其打开，为其标题命名为“工业产品交易平台”。选择“插入→布局→绘制APDiv”命令，在文档中绘制多个APDiv，设置它们的嵌套关系。页面结构布局如图11-4所示。4）为APDiv元素设置CSS样式。由于网站首页和子页面采取相同的布局风格，因此样式表采用外部链接样式表。选择“文本→CSS样式→附加样式表”菜单命令，打开“链接外部样式表”对话框，设置“文件/URL”值为style.css，如图11-5所示，单击【确定】按钮。图11-3新建的文档和文件夹图11-5

链接样式表图11-4页面结构布局5）选中创建的AP元素“container”，在右侧的“CSS样式”面板中单击鼠标右键，选择“新建”命令，打开“新建CSS规则”对话框，并作相应设置，如图11-6所示。6）单击【确定】按钮，弹出“#container的CSS规则定义”对话框，选择分类列表框下的“背景”选项卡，设置文档的“背景颜色”为#FFF；在分类列表框中，切换到“区块”选项卡，设置“文本对齐”属性为左对齐；在分类列表框中，切换到“方框”选项卡，设置ApDiv的“宽”为960px，“上边界”为1px，“下边界”为0px；“边框”和“列表”选项卡的属性保持默认设置；切换到“定位”选项卡，单击【确定】按钮，完成对“#container”元素样式的定义。设置后的“CSS样式”面板如图11-7所示。图11-6新建CSS规则

图11-7“CSS样式”面板/*==整体布局定义开始==*/#Container{width:960px;/*定义页面宽度*/visibility:visible;/*设置可见度*/margin:1pxauto0;/*设置外边距*/ background-color:#FFF;/*定义背景颜色*/}注意，在“/*”和“*/”之间的是注释部分，该部分内容只对代码起注释作用。11.3.2设置页面属性在style.css样式表文件内部设置网页的页面属性。页面属性是对<body>标签属性的设置。代码如下所示：body{font-size:12px;/*定义字号*/color:#666;/*定义字体颜色*/background:#FFF;/*定义背景颜色*/text-align:center;/*定义文本位置*/margin:0;/*定义外边距*/padding:0;/*定义外边距*/border:0;/*定义边框粗细*/background:transparent;/*定义背景透明*/}也可以打开index.html，选择“修改→页面属性”菜单命令，在打开的“页面属性”对话框中进行相应设置。11.3.3插入图片在顶部的“top”元素中插入一幅图像。具体步骤：选中页面顶部AP元素“top”，并将光标定位在其内部。单击“插入→图像”命令，打开“选择图像源文件”对话框，从中选择一幅已经准备好的图片素材，单击【确定】按钮。在AP元素“top”中添加了一幅图片，如图11-8所示。图像、动画、音频、视频等多媒体元素，可以直观的展示信息，在多媒体网页设计中占有很重要的地位。由于篇幅所限，不再介绍在该网页中添加其他多媒体元素的方法。请用户根据前面章节的相关内容，尝试使用各种多媒体元素，使页面更加丰富多彩。图11-8添加图片后的文档11.3.4添加导航条网页导航条是非常重要的网页元素，网页间的跳转，需要通过导航条来完成。导航条的设计要尽量颜色突出、美观。该网站通过列表项的形式为网页设计导航条，并为列表项添加CSS样式。具体设置步骤如下：1）将光标定位在“nav”Div元素中，在其内部输入列表项，并为列表项的各个单元设置超链接。设置情况如图11-9所示。图11-9导航栏设计2）选中该列表项，为其添加CSS样式，由于该样式比较复杂，需要在style.css文件中输入相关代码。#nav{height:30px;/*定义高度*/width:100%;/*定义宽度*/background-color:#c00;/*定义背景颜色*/overflow:hidden;/*定义溢出效果*/}#navul{font-size:12px;/*定义字号*/color:#FFF;/*定义字体颜色*/line-height:30px;/*定义字体行高*/white-space:nowrap;/*定义区块空格*/margin:00030px;/*定义外边距*/padding:0;/*定义内边距*/}#navli{list-style-type:none;/*定义列表类型*/display:inline;/*定义区块显示效果*/}#navlia{text-decoration:none;/*定义字体修饰*/font-family:Arial,Helvetica,sans-serif;/*定义字体*/color:#FFF;/*定义字体颜色*/padding:7px10px;/*定义内边距*/}#navlia:hover{color:#ff0;/*定义字体颜色*/background-color:red;/*定义背景颜色*/该样式表使用列表项实现导航菜单功能。当鼠标处于不同状态时，导航菜单出现不同的特效。选择“文件→保存”命令保存index.html页面，按〈F12〉键在浏览器中浏览网页，效果如图11-10所示。图11-10鼠标悬停在导航栏上效果11.3.5

推荐厂家1）把光标置于DIV元素“left”中，创建新的DIV元素

sideBarLefta1，并定义相关样式：在打开的“sideBarLefta1的CSS规则定义”对话框中，选中“方框”选项卡，从中设置Div的“宽”为238px，“高”为240px。2）在DIV元素“sideBarLefta1”的内部插入推荐厂家标志及说明文字等信息，定义相关样式如图11-11所示。图11-11文字样式编辑3）在style.css样式表中插入下面的代码，得出推荐厂家效果如图11-12。#left{float:left;/*定义浮动位置*/width:640px;/*定义宽度*/height:832px;/*定义高度*/}.sideBarLeftb1{width:238px;/*定义宽度*/height:240px;/*定义高度*/border:#ebcbb4solid1px;/*定义边框的颜色、粗细、样式*/}11.3.6

网页广告设计制作1）将光标置于div元素“#left”中，插入一个嵌套的div元素#sideBarLefta2，其布局如图11-13所示。2）将光标置于DIV元素“banner”中，插入一个已经准备好的SWF元素。3）选中“banner”下面DIV元素，并定义类为“hot”，在4个小DIV元素中分别插入准备好的广告图，效果如图11-14所示。图11-12推荐厂家效果图11-13banner区域布局图11-14广告效果style.css样式表中插入的代码如下：#sideBarLefta2{float:left;/*定义浮动位置*/width:390px;/*定义宽度*/height:268px;/*定义高度*/overflow:hidden;/*定义溢出效果*/}#banner{margin-top:5px;/*定义顶端外边距*/border:#999solid1px;/*定义边框的颜色、粗细、样式*/width:390px;/*定义宽度*/}.hot{display:inline;/*定义区块显示效果*/border:#9991pxsolid;/*定义边框的颜色、粗细、样式*/width:91px;/*定义宽度*/height:70px;/*定义高度*/float:left;/*定义浮动位置*/margin:2px;/*定义外边距*/}11.3.7

页面右侧栏目设计1）将光标置于DIV元素“right”中，插入已经准备好的图片service.jpg。如图11-15所示。用户可以在图片“属性”面板中，使用矩形热点工具创建地图链接。2）在service.jpg下面插入两个div，分别定义为.sideBarRightb3和.sideBarRightb4，在新建的div中插入准备好的广告图像ad1.jpg和ad2.jpg并在属性面板中定义超链接，效果如图11-16所示。图11-15插入的图片

图11-16页面右侧栏目效果在style.css中添加的代码如下：#right{float:left;/*定义浮动位置*/width:320px;/*定义宽度*/height:832px;/*定义高度*/}.sideBarRightb3{height:60px;/*定义高度*/margin-top:5px;/*定义顶端外边距*/border:#ebcbb41pxsolid;/*定义边框的颜色、粗细、样式*/}.sideBarRightb4{height:93px;/*定义高度*/margin-top:5px;/*定义顶端外边距*/border:#ebcbb41pxsolid;/*定义边框的颜色、粗细、样式*/margin-bottom:5px;/*定义底端外边距*/

}.sideBarRightb3,.sideBarRightb4img{text-align:center;/*定义文本位置*/padding:5px;/*定义内边距*/}11.3.8

行业栏目设计1）将光标置于DIV元素“left”中，在其下侧插入一个嵌套的DIV元素“sideBarLeftb2”。2）选中Div元素“sideBarLeftb2”，将光标定位在其内部，创建多个新Div，为了方便日后的维护我们将新建Div单独定义为.sideBarLeftb3，如图11-17所示。3）选中DIV元素“sideBarLeftb3”，在“.sideBarLeftb3的CSS规则定义”对话框中，设置“宽”为280像、“高”为150像素，“浮动”为左对齐等。在style.css中添加的代码如下：sideBarLeftb3{text-align:left;/*定义文本位置*/float:left;/*定义浮动位置*/height:150px;/*定义高度*/width:280px;/*定义宽度*/padding:4px;/*定义内边距*/}4）将光标移到sideBarLeftb3的DIV元素中，插入两行列表并对列表设置相关CSS参数。在style.css中添加的代码如下：.sideBarLeftb3ul{font-size:12px;/*定义字号*/line-height:6px;/*定义字体行高*/float:left;/*定义浮动位置*/width:270px;/*定义宽度*/margin:0005px;/*定义外边距*/padding:0;/*定义内边距*/}

5）在列表中添加列表内容，代码如下：<divclass="sideBarLeftb3"><ulclass="font-c"><aclass="font-d">机械</a><a>轴承</a><a>阀门</a><a>模具</a><a>刀具夹具</a><a>泵</a></ul><ulclass="font-b"><li>密封件</li><li>粉碎机</li><li>压缩机</li><li>减速机</li><li>机械加工</li></ul><ulclass="font-b"><li>焊机

</li><li>风机</li><li>机床</li><li>弹簧</li><li>齿轮</li><li>锅炉</li><li>更多</li></ul></div>6）对列表内容设置相关CSS参数。在style.css中添加的代码如下：.sideBarLeftb3li{list-style-type:none;/*定义列表类型*/float:left;/*定义浮动位置*/margin-top:2px;/*定义顶端外边距*/border-right-width:1px;/*定义边框右边的宽度*/border-right-style:solid;/*定义边框右边的样式*/border-left-style:none;/*定义边框左边的样式*/border-right-color:#999;/*定义字体颜色*/padding:6px;/*定义内边距*/}7）对列表的第一行整体设置为class="font-c"，第二行整体设置为class="font-b"，并设置相关CSS参数。在style.css中添加的代码如下：.font-c{font-size:14px;/*定义字号*/font-weight:700;/*定义字体粗细*/color:#03C;/*定义字体颜色*/}.font-b{font-size:12px;/*定义字号*/color:#666;/*定义字体颜色*/padding:10px01px;/*定义内边距*/}8）选中第一行的首个词组，如图11-18中的“机械”，将其单独定义为class="font-d"，并设置相关CSS参数。UL列表设置效果如图11-18所示。在style.css中添加的代码如下：.font-d{font-size:16px;/*定义字号*/color:#f60;/*定义字体颜色*/font-weight:700;/*定义字体粗细*/line-height:20px;/*定义字体行高*/}

图11-17行业栏目列表布局图11-18输入的列表内容９）在“sideBarLeftb2”包含的其它DIV元素中，分别添加不同的列表内容，并将上面介绍的UL列表样式添加到这些列表中。至此，行业栏目列表制作完成，如图11-19所示。图11-20行业栏目列表效果11.3.9

右边侧栏设计设计制作步骤：1）将光标置于元素“sideBarRightb4”的下方，插入DIV元素，并定义相关参数：“高”129像素、“宽”310像素，“边框”为1像素的边框，将此样式命名为类“sideBarRightb1”。2）在新建的DIV中插入栏目标题DIV，并设置其边距及文字对齐方式，然后在该DIV元素中输入文字“创业加盟”。3）将光标置于栏目标题DIV的下方，创建图片的DIV元素，并设置其边框浮动为“左对齐”，同时对其边距进行设置。4）在该DIV中插入准备好的图片，在右侧插入UL列表项目，效果如图11-21所示。5）用同样的方法制作如图11-22所示的“库存二手”栏目，需要修改其背景色参数，该DIV的类名定义为“sideBarRightb2”。代码如下：.sideBarRightb1{height:129px;/*定义高度*/width:310px;/*定义宽度*/border:#ebcbb41pxsolid;/*定义边框的颜色、粗细、样式*/图11-21右边侧栏效果一

图11-22右边侧栏效果二margin-top:5px;/*定义顶端外边距*/}.sideBarRightb2{ height:129px;/*定义高度*/ width:310px;/*定义宽度*/ border:#ebcbb41pxsolid;/*定义边框的颜色、粗细、样式*/ background:#E8E8E8;/*定义背景颜色*/ margin-top:3px;/*定义溢出效果*/}根据上面介绍的方法，制作右边

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

温馨提示

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

最新文档

评论

0/150

提交评论