《 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. 设置页面属性在 样式表文件内部设置网页的页面属性。页面属性是对<body> 标签属性的设置。代码如下所示: body{ font-size:12px;/* 定义字号*/ color:#666;/* 定义字体颜色*/ background:#FFF;/* 定义背景颜色*/ text-align:center;/* 定义文本位置*/ margin:0;/* 定义外边距*/ padding:0;/* 定义外边距*/ border:0;/* 定义边框粗细*/ background: transparent;/* 定义背景透明*/ } 也可以打开 ,选择“修改→页面属性”菜单命令,在打开的“页面属性”对话框中进行相应设置。 3. 插入图片在顶部的“ top ”元素中插入一幅图像。如图所示。 4. 添加导航条网页导航条是非常重要的网页元素, 网页间的跳转, 需要通过导航条来完成。 1 )将光标定位在“ nav ” Div 元素中,在其内部输入列表项,并为列表项的各个单元设置超链接。设置情况如图所示。 2 )添加 CSS 样式,需要在 文件中输入相关代码。#nav { height:30px; /* 定义高度*/ width:100%; /* 定义宽度*/ background-color:#c00;/* 定义背景颜色*/ overflow: hidden;/* 定义溢出效果*/ } #nav ul{ font-size:12px; /* 定义字号*/ color:#FFF; /* 定义字体颜色*/ line-height:30px; /* 定义字体行高*/ white-space:nowrap; /* 定义区块空格*/ margin:0 00 30px; /* 定
网页设计与制作实训报告 来自淘豆网m.daumloan.com转载请标明出处.
