版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
制作电子商务类网站首页
网站整体需求主要包括以下几个方面：1)
网站建设背景及目标2)
网站建设现状分析3)
网站建设目标分解4)
网站建设资金及人员投入情况分析LOGO。想让网站有声有色，能够吸引客户注意，就要尽量搜集文字、图片、音频、视频、动画等多媒体素材。对于一些通用素材，可以从网上搜
图像处理软件对图像进行优化处理，使用
Flash
制作动画等。如图所示。
1、 网站建设的第一步是创建本地站点。2、创建的站点信息将显示在“文件”面板中。如果需要对站点参数进行修改，可以单击“站点→管理站点”对站点进行重新设置。
使用
Div+CSS
实现页面布局，具体操作如下：为
AP
Div
元素设置
CSS
样式。由于网站首页和子页面采取相同的
布
局
风
格
，
因
此
样
式
表
采
用
外
部
链
接
样
式
表
。5）选中创建的
AP
元素“container”，在右侧的“CSS
样式”面板
CSS
并作相应设置，如图所示。
的
CSS
规则定义”对话框，选在分类列表框中，切换到“区块”选项卡，设置“文本对齐”属性为左对齐；在分类列表框中，切换到“方框”选项卡，设置
Ap
Div
的“宽”为960
px，“上边界”为1
px，“下边界”为0
px；“边框”和“列表”选项卡的属性保持默认设置；切换到“定位”选项卡，单样式”面板如图所示。/*
==整体布局定义开始==
*/#Container
{width:960px;
visibility:visible;
margin:1px
auto
0;
background-color:
}
在
style.css
样式表文件内部设置网页的页面属性。页面属性是对<body>标签属性的设置。代码如下所示：body{font-size:12px;/*定义字号*/color:#666;/*定义字体颜色*/background:#FFF;/*定义背景颜色*/text-align:center;/*定义文本位置*/margin:0;/*定义外边距*/padding:0;/*定义外边距*/border:0;/*定义边框粗细*/background:
}也可以打开
index.html，选择“修改→页面属性”菜单命令，在打开的“页面属性”对话框中进行相应设置。
在顶部的“top”元素中插入一幅图像。如图所示。
来完成。1）将光标定位在“nav”
Div
元素中，在其内部输入列表项，并为列表项的各个单元设置超链接。设置情况如图所示。2）添加
CSS
样式，需要在
style.css
文件中输入相关代码。#nav
{height:30px;
width:100%;
background-color:#c00;/*定义背景颜色*/overflow:
}#nav
ul
{font-size:12px;
color:#FFF;
line-height:30px;
white-space:nowrap;
margin:0
0
0
30px;
padding:0;
}#nav
li
{list-style-type:none;
display:inline; }#nav
li
a
{text-decoration:none;
font-family:Arial,
Helvetica,
sans-serif;
color:#FFF;
padding:7px
}#nav
li
a:hover
{color:#ff0;
background-color:red;
该样式表使用列表项实现导航菜单功能。效果如图所示。
DIVDIV元素
sideBarLefta1，并定义相关样式
DIV
元素“sideBarLefta1”的内部插入推荐厂家标志及说明文字等信息，定义相关样式如图所示。3）在
style.css
样式表中插入下面的代码，#left
{float:left;
/*定义浮动位置
*/width:640px;/*定义宽度
*/height:832px;
*/}.sideBarLeftb1
{width:238px;
*/height:240px;
border:#ebcbb4
solid
1px;
/*
定义边框的颜色、粗细、样式*/}
1）将光标置于
div
元素“#left”中，插入一个嵌套的
div
元素#sideBarLefta2，2）将光标置于DIV
元素“banner”中，插入一个已经准备好的SWF元素。3）选中“banner”下面
DIV
元素，并定义类为“hot”，在
4
个小DIV
元素中分别插入准备好的广告图，效果如图所示style.css
样式表中插入的代码如下：#sideBarLefta2
{float:left;
/*定义浮动位置
*/width:390px;
*/height:268px;/*定义高度*/overflow:
}#banner
{margin-top:5px;
border:#999
solid
1px;
width:390px;
*/}.hot{display:inline;
border:#999
1px
solid;
width:91px;
*/height:70px;
float:left;
/*定义浮动位置
*/margin:2px;
}
1
）将光标置于 DIV
元素“right”中，插入已经准备好的图片service.jpg。如图所示。2）在service.jpg
下面插入两个
div中插入准备好的广告图像ad1.jpg和
ad2.jpg
并在属性面板中定义超链接，效果如图所示。在
style.css
中添加的代码如下：#right
{float:left;
/*定义浮动位置
*/width:320px;/*定义宽度
*/height:832px;
*/}.sideBarRightb3
{height:60px;
margin-top:5px;
border:#ebcbb4
1px
solid;
/*定义边框的颜色、粗细、样式*/}.sideBarRightb4
{height:93px;
margin-top:5px;
border:#ebcbb4
1px
solid;
margin-bottom:5px;
}.sideBarRightb3,.sideBarRightb4
img
{text-align:center;
*/padding:5px;
}
1）将光标置于
DIV
元素“left”中，在其下侧插入一个嵌套的
DIV元素“sideBarLeftb2”。2）选中Div
元素“sideBarLeftb2”，将光标定位在其内部，创建多个新
Div，为了方便日后的维护我们将新建
Div
单独定义为.sideBarLeftb3。3）选中DIV
元素“sideBarLeftb3”，在style.css
中添加的代码如下：sideBarLeftb3
{text-align:left;
/*定义文本位置
*/float:left;
/*定义浮动位置
*/height:150px;
width:280px;
*/padding:4px;
}4）将光标移到
sideBarLeftb3
的
DIV
元素中，插入两行列表并对列表设置相关
CSS
参数。在
style.css
中添加的代码如下：.sideBarLeftb3
ul
{font-size:12px;
line-height:6px;
float:left;
/*定义浮动位置
*/width:270px;
*/margin:0
0
0
5px;
padding:0;
}5）在列表中添加列表内容，代码如下：<div
class="sideBarLeftb3"><ul
class="font-c"><a
class="font-d">机械</a><a>轴承</a><a>阀门</a><a>模具</a><a>刀具夹具</a><a>泵</a></ul><ul
class="font-b"><li>密封件</li><li>粉碎机</li><li>压缩机</li><li>减速机</li><li>机械加工</li></ul><ul
class="font-b"><li>焊机
</li><li>风机</li><li>机床</li><li>弹簧</li><li>齿轮</li><li>锅炉</li><li>更多</li></ul></div>CSS参数。在style.css中添加的代码如下：.sideBarLeftb3
li
{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"，第二行整体设置为
CSS
style.css
中添加的代码如下：.font-c
{font-size:14px;
font-weight:700;
color:#03C;
}.font-b
{font-size:12px;
color:#666;
padding:10px
0
1px;
}8）选中第一行的首个词组，如图中的“机械”，将其单独定义为
CSS
列表设置效果如图所示。在
style.css
中添加的代码如下：.font-d
{font-size:16px;
color:#f60;
font-weight:700;
line-height:20px;
}９）在“sideBarLeftb2”包含的其它
DIV
元素中，分别添加不同的列表内容，并将上面介绍的
UL
列表样式添加到这些列表中。至此，行业栏目列表制作完成，如图所示。
设计制作步骤：1）将光标置于元素“sideBarRightb4”的下方，插入DIV
元素，并定义相关参数：“高”129
像素、“宽”310
像素，“边框”为1
像素的边框，将此样式命名为类
“sideBarRightb1”。2）在新建的
DIV
中插入栏目标题
DIV，并设置其边距及文字对齐方式，然后在该
DIV
元素中输入文字“创业加盟”。3）将光标置于栏目标题DIV
的下方，创建图片的DIV
元素，并设置其边框浮动为“左对齐”，同时对其边距进行设置。4）在该DIV
中插入准备好的图片，在右侧插入UL
列表项目，效果如图所示。5）用同样的方法制作如图所示的“库存二手”栏目，需要修改其背景色参数，该
DIV
的类名定义为“sideBarRightb2”。代码如下：.sideBarRightb1
{height:129px;
width:310px;
*/border:#ebcbb4
1px
solid;
/*定义边框的颜色、粗细、样式*/margin-top:5px;
}.sideBarRightb2
{height:129px;
width:310px;
/*定义宽度
*/border:#ebcbb4
1px
solid;
background:#E8E8E8;
margin-top:3px;/*定义溢出效果*/}根据上面介绍的方法，制作右边侧栏的其它内容。 1）选中
DIV
元素“foot”，为该元素添加版权信息、联系方式等信息。至此，网站首页设计完毕。2）保存网页文档，最终效果如图所示了解及更好的应用。的，第一步是做网站需求分析，我们这次做的是电子商务类网站，所以网站整体需求包括：网站建设背景及目标、网站建设现状分析、网站建设目标分解、网站建
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026年黔东南民族职业技术学院单招职业技能考试题库必考题
- 2026年内蒙古电子信息职业技术学院单招职业倾向性测试必刷测试卷附答案
- 2026年山东外事职业大学单招职业适应性考试题库附答案
- 2026年安徽审计职业学院单招职业适应性考试必刷测试卷附答案
- 2026年福州英华职业学院单招职业倾向性测试题库附答案
- 2026年温州大学单招职业技能考试题库及答案1套
- 2026年资阳环境科技职业学院单招职业适应性考试必刷测试卷及答案1套
- 2026年海口经济学院单招职业技能考试必刷测试卷及答案1套
- 2026年四川财经职业学院单招职业技能考试题库必考题
- 2026年武汉信息传播职业技术学院单招职业适应性测试必刷测试卷及答案1套
- DB32T3748-2020 35kV及以下客户端变电所建设标准
- 职业暴露应急预案及处理流程
- 鄂尔多斯市普通住小区物业管理服务等级标准和收费指导价格
- 六年级数学上册第一单元测试卷及答案
- 附录C.1 陆上风电、光伏建设项目质量验收范围划分1
- 国开电大《当代中国政治制度》形考任务1-4答案
- 增值服务承诺书
- 郭德纲于谦经典相声《我要穿越》台词
- 深圳市龙岗区2023年九年级上学期《数学》期中试题与参考答案
- 无违法犯罪记录证明申请表（个人）
- 四川省绵阳市绵阳中学英才学校2022-2023学年小升初数学自主招生备考卷含答案
评论
0/150
提交评论