网页设计与制作实训报告材料

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

实训报告

专业：计算机网络技术

年级： 2013级

姓名：

学号：

辅导老师：

制作电子商务类首页

一、建设的前期准备工作

1、整体需求分析

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

1)建设背景及目标

2)建设现状分析

3)建设目标分解

4)建设资金及人员投入情况分析

2、确定风格

根据电子商务的特点，确定的整体风格，即的色彩和版式。风格是在整体需求分析的基础上，通过明确设计的目的和用户需求、访问者的特点等得出的结论。本实例是针对一个工业产品交易平台的，与用户交互性强，因此确定其主色调为暖色系的橘黄色给人以轻松愉快的浏览环境。如图是电子商务的LOGO。

3、素材搜集

明确主题和划分板块后，接着要为后续的建设搜集素材。若想让有声有色，能够吸引客户注意，就要尽量搜集文字、图片、音频、视频、动画等多媒体素材。对于一些通用素材，可以从网上搜集得到，也可

以根据需求自行制作素材，比如，通过Photoshop图像处理软件对图像进行优化处理，使用Flash制作动画等。如图所示。

二、创建站点

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

2、创建的站点信息将显示在“文件”面板中。如果需要对站点参数进行修改，可以单击“站点→管理站点”对站点进行重新设置。

三、主页制作

1.使用Div+CSS布局页面

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

4）为AP Div元素设置CSS样式。由于首页和子页面采取相同的布

局风格，因此样式表采用外部样式表。

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

6）单击确定按钮，弹出“#container的CSS规则定义”对话框，选择分类列表框下的“背景”选项卡，设置文档的“背景颜色”为#FFF；在分类列表框中，切换到“区块”选项卡，设置“文本对齐”属性为左对齐；在分类列表框中，切换到“方框”选项卡，设置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样式表文件部设置网页的页面属性。页面属性是对标签属性的设置。代码如下所示：

body{

font-size:12px;/*定义字号*/

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

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

text-align:center;/*定义文本位置*/

margin:0;/*定义外边距*/

padding:0;/*定义外边距*/

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