网设计与制作实训报告

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

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

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

4、 的“宽”为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 ,选择“修改宀页面属性”菜单命令，在打 开的“页面属性”对话框中进行

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

7、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,

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

9、如图所示。3） 在 style.css样式表中插入下面的代码，#left float:left; /* 定义浮动位置 */ width:640px;/* 定义宽度 */ height:832px; /* 定义高度 */.sideBarLeftb1 width:238px; /* 定义宽度 */height:240px; /* 定义高度 */border:#ebcbb4 solid 1px; /* 定义边框的颜色、粗细、样式 */6. 网页广告设计制作1）将光标置于 div 元素“ #left ”中，插入一个嵌套的 div 元素 #sideBarLefta2 ，2 ）将光标置于DIV元素“ban

10、ner”中，插入一个已经准备好的SWF元素。3）选中“ banner”下面DIV元素，并定义类为“ hot”，在4个小 DIV 元素中分别插入准备好的广告图，效果如图所示 style.css 样式表中插入的代码如下： #sideBarLefta2 float:left; /* 定义浮动位置 */width:390px; /*定义宽度 */height:268px;/* 定义高度 */overflow: hidden;/* 定义溢出效果 */#banner margin-top:5px; /* 定义顶端外边距 */border:#999 solid 1px; /* 定义边框的颜色、粗细、样式 *

11、/width:390px; /*定义宽度 */.hotdisplay:inline; /*定义区块显示效果 */border:#999 1px solid; /* 定义边框的颜色、粗细、样式 */width:91px; /* 定义宽度 */height:70px; /* 定义高度 */float:left; /* 定义浮动位置 */margin:2px; /*定义外边距 */7. 页面右侧栏目设计1）将光标置于 DIV 元素“ right ”中，插入已经准备好的图片service.jpg 。如图所示。2）在 service.jpg 下面插入两个 div ，分别定义为 .sideBarRight

12、b3 和 .sideBarRightb4 ，在新建的 div 中插入准备好的广告图像 ad1.jpg 和 ad2.jpg 并在属性面板中定义超链接，效果如图所示。在 style.css 中添加的代码如下：#right float:left; /* width:320px;/* height:832px; /* .sideBarRightb3 height:60px; /*定义浮动位置 */定义宽度 */定义高度 */定义高度 */margin-top:5px; /* 定义顶端外边距 */border:#ebcbb4 1px solid; /* 定义边框的颜色、粗细、样式*/.sideBarRi

13、ghtb4 height:93px; /* 定义高度 */margin-top:5px; /* 定义顶端外边距 */border:#ebcbb4 1px solid; /*定义边框的颜色、粗细、样式 */margin-bottom:5px; /* 定义底端外边距 */.sideBarRightb3,.sideBarRightb4 img text-align:center; /* 定义文本位置 */padding:5px; /* 定义内边距 */8. 行业栏目设计1）将光标置于 DIV 元素“ left ”中，在其下侧插入一个嵌套的 DIV 元素“ sideBarLeftb2 ”。2）选中 D

14、iv 元素“ sideBarLeftb2 ”，将光标定位在其内部，创建多 个 新 Div ， 为 了 方 便 日 后 的 维 护 我 们 将 新 建 Div 单 独 定 义 为 .sideBarLeftb3 。3）选中DIV元素“ sideBarLeftb3 ”，在style.css中添加的代码如下：定义文本位置 */定义浮动位置 */定义高度 */定义宽度 */定义内边距 */sideBarLeftb3 text-align:left; /* float:left; /* height:150px; /* width:280px; /* padding:4px; /*4）将光标移到sideB

15、arLeftb3 的DIV元素中，插入两行列表并对列表设置相关CSS参数。在style.css中添加的代码如下：.sideBarLeftb3 ul font-size:12px; /* 定义字号 */ line-height:6px; /*定义字体行高 */float:left; /* 定义浮动位置 */width:270px; /* 定义宽度 */margin:0 0 0 5px; /* 定义外边距 */ padding:0; /*定义内边距 */5）在列表中添加列表内容，代码如下：机械 轴由承 阀门 v/a模具 刀具夹具泵 密封件 粉碎机 压缩机 减速机 机械加工 焊机 风机 机床 弹簧

16、齿轮 锅炉 更多 6）对列表内容设置相关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; /*定义边框右边的宽度 */定义边框右边的样式 */定义边框左边的样式 */定义字体颜色

17、 */line-height:20px; /*定义字体行高 */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:10px 0 1px; /* 定义内边距 */ 8）选中第

18、一行的首个词组，如图中的“机械”，将其单独定义为 class=font-d,并设置相关CSS参数。UL列表设置效果如图所示。 在 style.css 中添加的代码如下：.font-d font-size:16px; /* 定义字号 */ color:#f60; /* 定义字体颜色 */font-weight:700; /* 定义字体粗细 */9）在“ sideBarLeftb2 ”包含的其它DIV元素中，分别添加不同的 列表内容，并将上面介绍的 UL列表样式添加到这些列表中。至此， 行业栏目列表制作完成，如图所示。9. 右边侧栏设计设计制作步骤：1）将光标置于元素“ sideBarRightb

19、4 ”的下方，插入 DIV元素，并 定义相关参数：“高” 129像素、“宽” 310像素，“边框”为 1 像 素的边框，将此样式命名为类 “sideBarRightb1 ”。2）在新建的DIV中插入栏目标题DIV，并设置其边距及文字对齐方 式，然后在该DIV元素中输入文字“创业加盟”。3）将光标置于栏目标题 DIV的下方，创建图片的DIV元素，并设置 其边框浮动为“左对齐”，同时对其边距进行设置。4） 在该DIV中插入准备好的图片，在右侧插入 UL列表项目，效果如 图所示。5）用同样的方法制作如图所示的“库存二手”栏目，需要修改其背景色参数，该DIV的类名定义为“ sideBarRightb2

20、 ”。代码如下：.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;/* 定义溢出效果 */ 根据上面介绍的方法，制作右边侧栏的其它内容。10. 网页