精选网页设计与制作实训报告资料.docx

精选网页设计与制作实训报告资料.docx

《精选网页设计与制作实训报告资料.docx》由会员分享，可在线阅读，更多相关《精选网页设计与制作实训报告资料.docx（18页珍藏版）》请在冰豆网上搜索。

精选网页设计与制作实训报告资料

《Dreamweaver网页设计与制作案例教程》

实训报告

专业：

　计算机网络技术

年级：

2013级

姓名：

学号：

辅导老师：

制作电子商务类网站首页

一、网站建设的前期准备工作

1、网站整体需求分析

网站整体需求主要包括以下几个方面：

1）网站建设背景及目标

2）网站建设现状分析

3）网站建设目标分解

4）网站建设资金及人员投入情况分析

2、确定网站风格

根据电子商务网站的特点，确定网站的整体风格，即网站的色彩和版式。

网站风格是在网站整体需求分析的基础上，通过明确网站设计的目的和用户需求、访问者的特点等得出的结论。

本实例是针对一个工业产品交易平台的网站，网站与用户交互性强，因此确定其主色调为暖色系的橘黄色给人以轻松愉快的浏览环境。

如图是电子商务网站的LOGO。

3、网站素材搜集

明确网站主题和划分板块后，接着要为后续的网站建设搜集素材。

若想让网站有声有色，能够吸引客户注意，就要尽量搜集文字、图片、音频、视频、动画等多媒体素材。

对于一些通用素材，可以从网上搜集得到，也可以根据需求自行制作素材，比如，通过Photoshop图像处理软件对图像进行优化处理，使用Flash制作动画等。

如图所示。

二、创建站点

1、网站建设的第一步是创建本地站点。

2、创建的站点信息将显示在“文件”面板中。

如果需要对站点参数进行修改，可以单击“站点→管理站点”对站点进行重新设置。

三、网站主页制作

1.使用Div+CSS布局页面

使用Div+CSS实现页面布局，具体操作如下：

4）为APDiv元素设置CSS样式。

由于网站首页和子页面采取相同的布局风格，因此样式表采用外部链接样式表。

5）选中创建的AP元素“container”，在右侧的“CSS样式”面板中单击鼠标右键，选择“新建”命令，打开“新建CSS规则”对话框，并作相应设置，如图所示。

6）单击确定按钮，弹出“#container的CSS规则定义”对话框，选择分类列表框下的“背景”选项卡，设置文档的“背景颜色”为#FFF；在分类列表框中，切换到“区块”选项卡，设置“文本对齐”属性为左对齐；在分类列表框中，切换到“方框”选项卡，设置ApDiv的“宽”为960px，“上边界”为1px，“下边界”为0px；“边框”和“列表”选项卡的属性保持默认设置；切换到“定位”选项卡，单击确定按钮，完成对“#container”元素样式的定义。

设置后的“CSS样式”面板如图所示。

/*==整体布局定义开始==*/

#Container{

width:

960px;/*定义页面宽度*/

visibility:

visible;/*设置可见度*/

margin:

1pxauto0;/*设置外边距*/

background-color:

#FFF;/*定义背景颜色*/

}

2.设置页面属性

在style.css样式表文件内部设置网页的页面属性。

页面属性是对标签属性的设置。

代码如下所示：

body{

font-size:

12px;/*定义字号*/

color:

#666;/*定义字体颜色*/

background:

#FFF;/*定义背景颜色*/

text-align:

center;/*定义文本位置*/

margin:

0;/*定义外边距*/

padding:

0;/*定义外边距*/

border:

0;/*定义边框粗细*/

background:

transparent;/*定义背景透明*/

}

也可以打开index.html，选择“修改→页面属性”菜单命令，在打开的“页面属性”对话框中进行相应设置。

3.插入图片

在顶部的“top”元素中插入一幅图像。

如图所示。

4.添加导航条

网页导航条是非常重要的网页元素，网页间的跳转，需要通过导航条来完成。

1）将光标定位在“nav”Div元素中，在其内部输入列表项，并为列表项的各个单元设置超链接。

设置情况如图所示。

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;/*定义背景颜色*/

该样式表使用列表项实现导航菜单功能。

效果如图所示。

5.推荐厂家

1）把光标置于DIV元素“left”中，创建新的DIV元素sideBarLefta1，并定义相关样式

2）在DIV元素“sideBarLefta1”的内部插入推荐厂家标志及说明文字等信息，定义相关样式如图所示。

3）在style.css样式表中插入下面的代码，

#left{

float:

left;/*定义浮动位置*/

width:

640px;/*定义宽度*/

height:

832px;/*定义高度*/

}

.sideBarLeftb1{

width:

238px;/*定义宽度*/

height:

240px;/*定义高度*/

border:

#ebcbb4solid1px;/*定义边框的颜色、粗细、样式*/

}

6.网页广告设计制作

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:

hidden;/*定义溢出效果*/

}

#banner{

margin-top:

5px;/*定义顶端外边距*/

border:

#999solid1px;/*定义边框的颜色、粗细、样式*/

width:

390px;/*定义宽度*/

}

.hot{

display:

inline;/*定义区块显示效果*/

border:

#9991pxsolid;/*定义边框的颜色、粗细、样式*/

width:

91px;/*定义宽度*/

height:

70px;/*定义高度*/

float:

left;/*定义浮动位置*/

margin:

2px;/*定义外边距*/

}

7.页面右侧栏目设计

1）将光标置于DIV元素“right”中，插入已经准备好的图片service.jpg。

如图所示。

2）在service.jpg下面插入两个div，分别定义为.sideBarRightb3和.sideBarRightb4，在新建的div中插入准备好的广告图像ad1.jpg和ad2.jpg并在属性面板中定义超链接，效果如图所示。

在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;/*定义内边距*/

}

8.行业栏目设计

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中添加的代码如下：

.sideBarLeftb3ul{

font-size:

12px;/*定义字号*/

line-height:

6px;/*定义字体行高*/

float:

left;/*定义浮动位置*/

width:

270px;/*定义宽度*/

margin:

0005px;/*定义外边距*/

padding:

0;/*定义内边距*/

}

5）在列表中添加列表内容，代码如下：

机械

轴承

阀门

模具

刀具夹具

泵