网页设计与制作实训报告.docx
- 文档编号:27697766
- 上传时间:2023-07-04
- 格式:DOCX
- 页数:13
- 大小:48.76KB
网页设计与制作实训报告.docx
《网页设计与制作实训报告.docx》由会员分享,可在线阅读,更多相关《网页设计与制作实训报告.docx(13页珍藏版)》请在冰豆网上搜索。
网页设计与制作实训报告
《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)在列表中添加列表内容,代码如下:
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)选中第一行的首个词组,如图中的“机械”,将其单独定义为class="font-d",并设置相关CSS参数。
UL列表设置效果如图所示。
在style.css中添加的代码如下:
.font-d{
font-size:
16px;/*定义字号*/
color:
#f60;/*定义字体颜色*/
font-weight:
700;/*定义字体粗细*/
line-height:
20px;/*定义字体行高*/
}
9)在“sideBarLeftb2”包含的其它DIV元素中,分别添加不同的列表内容,并将上面介绍的UL列表样式添加到这些列表中。
至此,行业栏目列表制作完成,如图所示。
9.右边侧栏设计
设计制作步骤:
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:
#ebcbb41pxsolid;/*定义边框的颜色、粗细、样式*/
margin-top:
5px;/*定义顶端外边距*/
}
.sideBarRightb2{
height:
129px;/*定义高度*/
width:
310px;/*定义宽度*/
border:
#ebcbb41pxsolid;/*定义边框的颜色、粗细、样式*/
background:
#E8E8E8;/*定义背景颜色*/
margin-top:
3px;/*定义溢出效果*/
}
根据上面介绍的方法,制作右边侧栏的其它内容。
10.网页底部设计
1)选中DIV元素“foot”,为该元素添加版权信息、联系方式等信息。
至此,网站首页设计完毕。
2)保存网页文档,最终效果如图所示
实训心得
经过两周的网页制作实训,我对网站搭建、网页设计有了更深的了解及更好的应用。
首先,在做实训期间,我深刻的体会到做一个网站不是那么简单的,第一步是做网站需求分析,我们这次做的是电子商务类网站,所以网站整体需求包括:
网站建设背景及目标、网站建设现状分析、网站建设目标分解、网站建设资金及人员投入情况分析。
其实,我认为无论做什么事都也应该考虑这些问题,都应该有所评估及计划,为开头做好准备,同时,我个人也相信,任何成功都是需要做准备的。
其次,便是网站素材搜集,一个好的网页,里面的图文绝对是吸引眼球、简单大方的,所以素材准备非常重要,这次实训老师给了我们素材,所以方便多了不用其他修图软件,但是呢为了创新还是需要自己在网上找一些图片、文字、音频、视频等。
然后,创建站点,网站建设第一步是创建本地站点。
在实训中,我个人认为建站点比较难,不过对照书上还是学会了。
最后,网站主页制作了,是工程量最大的一个阶段,对此我从几个方面入手,分别是:
使用Div+CSS布局页面、设置页面属性、插入图片、添加导航条、推荐厂家、页面广告设计制作、页面右侧栏目设计、行业栏目设计、右边侧栏设计、网页底部设计。
我把整个网页分成了几块,分别进行制作,这样不仅有条理,还加快了网站制作效率。
以上便是我的实训心得,我很喜欢这种操作性的课程,希望未来这样的课程更加丰富。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 报告