网设计与制作实训报告.docx

上传人:scccc 文档编号:13424244 上传时间:2021-12-25 格式:DOCX 页数:18 大小:49.30KB
返回 下载 相关 举报
网设计与制作实训报告.docx_第1页
第1页 / 共18页
网设计与制作实训报告.docx_第2页
第2页 / 共18页
网设计与制作实训报告.docx_第3页
第3页 / 共18页
网设计与制作实训报告.docx_第4页
第4页 / 共18页
网设计与制作实训报告.docx_第5页
第5页 / 共18页
点击查看更多>>
资源描述

《网设计与制作实训报告.docx》由会员分享,可在线阅读,更多相关《网设计与制作实训报告.docx(18页珍藏版)》请在三一文库上搜索。

1、Dreamweaver网页设计与制作案例教程实训报告专 业:计算机网络技术年 级: 2013 级姓 名:学 号:辅导老师:制作电子商务类网站首页一、网站建设的前期准备工作1、网站整体需求分析网站整体需求主要包括以下几个方面:1)网站建设背景及目标2)网站建设现状分析3)网站建设目标分解4)网站建设资金及人员投入情况分析2、确定网站风格根据电子商务网站的特点,确定网站的整体风格,即网站的色彩和版 式。网站风格是在网站整体需求分析的基础上, 通过明确网站设计的 目的和用户需求、访问者的特点等得出的结论。本实例是针对一个工 业产品交易平台的网站,网站与用户交互性强,因此确定其主色调为 暖色系的橘黄色

2、给人以轻松愉快的浏览环境。 如图是电子商务网站的LOGO3、网站素材搜集明确网站主题和划分板块后,接着要为后续的网站建设搜集素材。 若 想让网站有声有色,能够吸引客户注意,就要尽量搜集文字、图片、 音频、视频、动画等多媒体素材。对于一些通用素材,可以从网上搜集得到,也可以根据需求自行制作素材,比如,通过 Photoshop图像 处理软件对图像进行优化处理,使用 Flash制作动画等。如图所示。 二、创建站点1、网站建设的第一步是创建本地站点。2、创建的站点信息将显示在“文件”面板中。如果需要对站点参数 进行修改,可以单击“站点-管理站点”对站点进行重新设置。 三、网站主页制作1 .使用Div+

3、CSS布局页面使用Div+CSS实现页面布局,具体操作如下:4)为AP Div元素设置CSS样式。由于网站首页和子页面采取相同 的布局风格,因此样式表采用外部链接样式表。5)选中创建的AP元素“container ”,在右侧的“ CSS样式”面板 中单击鼠标右键,选择“新建”命令,打开“新建CSSB则”对话框, 并作相应设置,如图所示。6)单击确定按钮,弹出“ #container的CSSB则定义”对话框,选择分类列表框下的 “背景” 选项卡, 设置文档的 “背景颜色”为 #FFF;在分类列表框中,切换到“区块”选项卡,设置“文本对齐”属性为 左对齐;在分类列表框中,切换到“方框”选项卡,设置

4、 Ap Div 的“宽”为960 px, “上边界”为1 px, “下边界”为0 px; “边框”和“列表”选项卡的属性保持默认设置;切换到“定位”选项卡,单击确定按钮,完成对 “ #container ”元素样式的定义。 设置后的“CSS样式”面板如图所示。/* = 整体布局定义开始= */#Container width:960px; /* 定义页面宽度*/visibility:visible; /* 设置可见度*/margin:1px auto 0; /* 设置外边距*/background-color: #FFF;/* 定义背景颜色*/2. 设置页面属性在 style.css 样式表文

5、件内部设置网页的页面属性。页面属性是对<body>标签属性的设置。代码如下所示:bodyfont-size:12px;/*定义字号*/color:#666;/* 定义字体颜色*/background:#FFF;/* 定义背景颜色*/text-align:center;/*定义文本位置*/margin:0;/* 定义外边距*/padding:0;/* 定义外边距*/border:0;/* 定义边框粗细*/background: transparent;/* 定义背景透明*/也可以打开index.html ,选择“修改页面属性”菜单命令,在打 开的“页面属性”对话框中进行相应设置。3.

6、 插入图片在顶部的“top ”元素中插入一幅图像。如图所示。4. 添加导航条网页导航条是非常重要的网页元素,网页间的跳转,需要通过导航条1)将光标定位在“nav” Div 元素中,在其内部输入列表项,并为列表项的各个单元设置超链接。设置情况如图所示。2)添加CSS羊式,需要在style.css文件中输入相关代码。#nav height:30px; /* 定义高度*/width:100%; /* 定义宽度*/background-color:#c00;/* 定义背景颜色*/overflow: hidden;/* 定义溢出效果*/#nav ul font-size:12px; /* 定义字号*/c

7、olor:#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

8、:#FFF; /* 定义字体颜色*/padding:7px 10px;/* 定义内边距*/#nav li a:hover color:#ff0; /* 定义字体颜色*/background-color:red; /* 定义背景颜色*/该样式表使用列表项实现导航菜单功能。效果如图所示。5. 推荐厂家1)把光标置于DIV元素“left ”中,创建新的DIV元素sideBarLeftal 并定义相关样式2)在DIV元素“sideBarLeftal ”的内部插入推荐厂家标志及说明文字等信息,定义相关样式如图所示。3)在style.css 样式表中插入下面的代码,#left float:left; /*

9、 定义浮动位置*/width:640px;/* 定义宽度*/height:832px; /* 定义高度*/.sideBarLeftb1 width:238px; /* 定义宽度*/height:240px; /* 定义高度*/border:#ebcbb4 solid 1px; /* 定义边框的颜色、粗细、样式*/6. 网页广告设计制作1)将光标置于div 元素“ #left ”中,插入一个嵌套的 div 元素#sideBarLefta2 ,2)将光标置于DIV元素“banner”中,插入一个已经准备好的 SWF 元素。3)选中 banner”DIV 元素,并定义类为“hot ”,在 4 个小D

10、IV元素中分别插入准备好的广告图,效果如图所示style.css 样式表中插入的代码如下:#sideBarLefta2 float:left; /* 定义浮动位置*/width:390px; /* 定义宽度*/height:268px;/* 定义高度*/overflow: hidden;/* 定义溢出效果*/#banner margin-top:5px; /* 定义顶端外边距*/border:#999 solid 1px; /* 定义边框的颜色、粗细、样式*/width:390px; /* 定义宽度*/.hotdisplay:inline; /* 定义区块显示效果*/border:#999 1

11、px solid; /* 定义边框的颜色、粗细、样式*/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 并在属性面板中定义超链接,效果如图所

12、示。在 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;

13、/* 定义边框的颜色、粗细、样式*/margin-bottom:5px; /* 定义底端外边距*/.sideBarRightb3,.sideBarRightb4 img text-align:center; /* 定义文本位置*/padding:5px; /* 定义内边距*/8. 行业栏目设计1)将光标置于DIV 元素“ left ”中,在其下侧插入一个嵌套的 DIV元素“ sideBarLeftb2 ”。2)选中Div 元素“ sideBarLeftb2 ”,将光标定位在其内部,创建多个 新 Div , 为 了 方 便 日 后 的 维 护 我 们 将 新 建 Div 单 独 定 义为 .si

14、deBarLeftb3 。3)选中DIV元素“ sideBarLeftb3 ",在style.css中添加的代码如下:sideBarLeftb3 text-align:left; /*定义文本位置*/float:left; /* 定义浮动位置*/height:150px; /* 定义高度*/width:280px; /* 定义宽度*/padding:4px; /* 定义内边距*/4)将光标移到sideBarLeftb3 的DIV元素中,插入两行列表并对列表设置相关CS哙数。在style.css 中添加的代码如下:.sideBarLeftb3 ul font-size: 12px; /

15、*定义字号 */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"> 机械 v/a>va嘴由承v/a>va> 阀门 </a&

16、gt;va>模具 </a>刀具夹具</a>v/a></ul><ul class="font-b"><li>密封件v/|><li>粉碎机v/|><li>压缩机v/|>< li> 减速机 </li>< li> 机械加工</li></ul><ul class="font-b">< li> 焊机 </li>< li> 风机</li>

17、< li> 机床</li>< li>弹簧</li>< li>齿轮</li>< li>锅炉</li>< li>更多</li></ul></div>6)对列表内容设置相关CSS数。在style.css中添加的代码如下:.sideBarLeftb3 li list-style-type:none; /*定义列表类型*/float:left; /* 定义浮动位置*/margin-top:2px; /* 定义顶端外边距*/border-right-width:1

18、px; /* 定义边框右边的宽度*/border-right-style:solid; /*定义边框右边的样式*/border-left-style:none; /*定义边框左边的样式*/padding:6px; /* 定义内边距*/7)对列表的第一行整体设置为class="font-c" ,第二行整体设置为class="font-b",并设置相关CS哙数。在style.css 中添加的代码如下:.font-c font-size:14px; /* 定义字号*/font-weight:700; /* 定义字体粗细*/color:#03C; /* 定义字体

19、颜色*/.font-b font-size:12px; /* 定义字号*/color:#666; /* 定义字体颜色*/padding:10px 0 1px; /* 定义内边距*/8)选中第一行的首个词组,如图中的“机械”,将其单独定义为class="font-d",并设置相关CS哙数。UL列表设置效果如图所示。在 style.css 中添加的代码如下:.font-d font-size:16px; /* 定义字号*/color:#f60; /* 定义字体颜色*/font-weight:700; /* 定义字体粗细*/line-height:20px; /*定义字体行高*/

20、9)在“ sideBarLeftb2 ”包含的其它DIV元素中,分别添加不同的 列表内容,并将上面介绍的UL列表样式添加到这些列表中。至此,行业栏目列表制作完成,如图所示。9. 右边侧栏设计设计制作步骤:1)将光标置于元素“ sideBarRightb4 ”的下方,插入 DIV元素,并 定义相关参数:“高”129像素、“宽”310像素,“边框”为 1 像素的边框,将此样式命名为类“ sideBarRightb1 ”。2)在新建的DIV中插入栏目标题DIV,并设置其边距及文字对齐方 式,然后在该DIV元素中输入文字“创业加盟”。3)将光标置于栏目标题 DIV的下方,创建图片的DIV元素,并设置

21、其边框浮动为“左对齐”,同时对其边距进行设置。4)在该DIV中插入准备好的图片,在右侧插入 UL列表项目,效果如 图所示。5)用同样的方法制作如图所示的“库存二手”栏目,需要修改其背景色参数,该DIV的类名定义为“ sideBarRightb2 ”。代码如下:.sideBarRightb1 height:129px; /* 定义高度*/width:310px; /* 定义宽度*/border:#ebcbb4 1px solid; /*定义边框的颜色、粗细、样式 */margin-top:5px; /* 定义顶端外边距*/.sideBarRightb2 height:129px; /* 定义高度

22、*/width:310px; /* 定义宽度*/border:#ebcbb4 1px solid; /* 定义边框的颜色、粗细、样式*/background:#E8E8E8; /* 定义背景颜色*/margin-top:3px;/* 定义溢出效果*/根据上面介绍的方法,制作右边侧栏的其它内容。10. 网页底部设计1)选中DIV元素“foot ”,为该元素添加版权信息、联系方式等信息。至此,网站首页设计完毕。2)保存网页文档,最终效果如图所示实训心得经过两周的网页制作实训,我对网站搭建、网页设计有了更深的了解及更好的应用。首先, 在做实训期间,我深刻的体会到做一个网站不是那么简单的,第一步是做网

23、站需求分析,我们这次做的是电子商务类网站,所以网站整体需求包括:网站建设背景及目标、网站建设现状分析、网站建设目标分解、网站建设资金及人员投入情况分析。其实,我认为无论做什么事都也应该考虑这些问题,都应该有所评估及计划,为开头做好准备,同时,我个人也相信,任何成功都是需要做准备的。其次, 便是网站素材搜集,一个好的网页,里面的图文绝对是吸引眼球、简单大方的,所以素材准备非常重要,这次实训老师给了我们素材, 所以方便多了不用其他修图软件,但是呢为了创新还是需要自己在网上找一些图片、文字、音频、视频等。然后,创建站点,网站建设第一步是创建本地站点。在实训中,我个人认为建站点比较难,不过对照书上还是学会了。最后, 网站主页制作了,是工程量最大的一个阶段,对此我从几个方面入手,分别是:使用Div+CSS局页面、设置页面属性、插入图片、添加导航条、推荐厂家、页面广告设计制作、页面右侧栏目设计、行业栏目设计、右边侧栏设计、网页底部设计。我把整个网页分成了几块,分别进行制作,这样不仅有条理,还加快了网站制作效率。以上便是我的实训心得,我很喜欢这种操作性的课程,希望未来 这样的课程更加丰富。

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 社会民生


经营许可证编号:宁ICP备18001539号-1