网页设计与制作实训报告.doc

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

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

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

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

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

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

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

8、F; /*定义字体颜色 */padding:7px 10px;/* 定义内边距 */#nav li a:hover color:#ff0; /*定义字体颜色 */background-color:red; /*定义背景颜色 */该样式表使用列表项实现导航菜单功能。效果如图所示。5. 推荐厂家1）把光标置于 DIV元素“left”中，创建新的 DIV 元素 sideBarLefta1，并定义相关样式2）在 DIV 元素“ sideBarLefta1”的内部插入推荐厂家标志及说明文字等信息，定义相关样式如图所示。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 个小DI

10、V 元素中分别插入准备好的广告图，效果如图所示 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

11、1px 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 单 独定 义为.sideBarLeftb3 。3）选中 DI

14、V 元素“ 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; /

15、*定义字体行高*/float:left; /*定义浮动位置*/width:270px; /*定义宽度*/margin:0 0 0 5px; /*定义外边距*/padding:0; /*定义内边距*/5）在列表中添加列表内容，代码如下：机械 轴承 阀门 模具 刀具夹具 泵 密封件 粉碎机 压缩机 减速机 机械加工 焊机 风机 机床 弹簧 齿轮 锅炉 更多 6）对列表内容设置相关CSS参数。在 style.css中添加的代码如下：.sideBarLeftb3 li list-style-type:none; /*定义列表类型*/float:left; /*定义浮动位置*/margin-top:2p

16、x; /*定义顶端外边距*/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-

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

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

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

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

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