网页设计与制作实训报告_网页设计与制作实训
网页设计与制作实训报告由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“网页设计与制作实训”。
《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.c样式表文件内部设置网页的页面属性。页面属性是对标签属性的设置。代码如下所示： body{ font-size:12px;/*定义字号*/ color:#666;/*定义字体颜色*/ background:#FFF;/*定义背景颜色*/ text-align:center;/*定义文本位置*/ margin:0;/*定义外边距*/ padding:0;/*定义外边距*/ border:0;/*定义边框粗细*/ background: transparent;/*定义背景透明*/ } 也可以打开index.html，选择“修改→页面属性”菜单命令，在打开的“页面属性”对话框中进行相应设置。
3.插入图片
在顶部的“top”元素中插入一幅图像。如图所示。
4.添加导航条
网页导航条是非常重要的网页元素，网页间的跳转，需要通过导航条来完成。
1）将光标定位在“nav” Div元素中，在其内部输入列表项，并为列表项的各个单元设置超链接。设置情况如图所示。
2）添加CSS样式，需要在style.c文件中输入相关代码。#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 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:#FFF;/*定义字体颜色*/ padding:7px 10px;/*定义内边距*/ } #nav li a:hover { color:#ff0;/*定义字体颜色*/ background-color:red;/*定义背景颜色*/ 该样式表使用列表项实现导航菜单功能。效果如图所示。
5.推荐厂家
1）把光标置于DIV元素“left”中，创建新的DIV元素 sideBarLefta1，并定义相关样式
2）在DIV元素“sideBarLefta1”的内部插入推荐厂家标志及说明文字等信息，定义相关样式如图所示。
3）在style.c样式表中插入下面的代码，#left { float:left;/*定义浮动位置 */ 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个小DIV元素中分别插入准备好的广告图，效果如图所示
style.c样式表中插入的代码如下： #sideBarLefta2 {
float:left;/*定义浮动位置 */ width:390px;/*定义宽度 */ height:268px;/*定义高度*/ overflow: hidden;/*定义溢出效果*/ } #banner { margin-top:5px;/*定义顶端外边距*/ border:#999 solid 1px;/*定义边框的颜色、粗细、样式*/ width:390px;/*定义宽度 */ }.hot{ display:inline;/*定义区块显示效果*/ border:#999 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并在属性面板中定义超链接，效果如图所示。
在style.c中添加的代码如下： #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;/*定义边框的颜色、粗细、样式*/ margin-bottom:5px;/*定义底端外边距*/ }.sideBarRightb3,.sideBarRightb4 img { text-align:center;/*定义文本位置 */ padding:5px;/*定义内边距*/ } 8.行业栏目设计
1）将光标置于DIV元素“left”中，在其下侧插入一个嵌套的DIV元素“sideBarLeftb2”。
2）选中Div元素“sideBarLeftb2”，将光标定位在其内部，创建多个新Div，为了方便日后的维护我们将新建Div单独定义为.sideBarLeftb3。
3）选中DIV元素“sideBarLeftb3”，在style.c中添加的代码如下：
sideBarLeftb3 { text-align:left;/*定义文本位置 */ float:left;/*定义浮动位置 */ height:150px;/*定义高度*/ width:280px;/*定义宽度 */ padding:4px;/*定义内边距*/ } 4）将光标移到sideBarLeftb3的DIV元素中，插入两行列表并对列表设置相关CSS参数。在style.c中添加的代码如下：.sideBarLeftb3 ul { font-size:12px;/*定义字号*/ line-height:6px;/*定义字体行高*/ float:left;/*定义浮动位置 */ width:270px;/*定义宽度 */ margin:0 0 0 5px;/*定义外边距*/ padding:0;/*定义内边距*/ } 5）在列表中添加列表内容，代码如下： 机械 轴承 阀门 模具 刀具夹具 泵 密封件 粉碎机 压缩机 减速机 机械加工 焊机 风机 机床 弹簧 齿轮 锅炉 更多
《网页设计与制作》实习报告指导老师：实习地点：实习时间：实习班级：学生姓名：一、实习目的① 学会制作新闻发布系统。② 学会制作在线调查系统。③ 熟悉购物网站的主要功能和栏目......
《网页设计与制作》课程设计报告书设计题目：起止日期： 工作室或公司网站设计2013.12.23-2013.12.27目录一、关于网站 ··························......
学生姓名：实习班级：指导老师：实习地点：实习时间：一、实习目的1． 掌握企业网站主要功能栏目2． 掌握企业网站色彩搭配和风格创意3． 掌握网站设计的首页4． 掌握模板的创建5． 熟悉系统设计......
《网页设计与制作》实训报告要求一、实训报告写作内容（一）实训题目（二）实训目的：说明这门课程实训的目的是什么（三）实训思想：静态网站设计制作中用了哪些所学的知识点（四）网站设计体会......
静态网页设计与制作实训报告这一周我们进行了为期一周的静态网页设计与制作的实训。在这一个星期中我感触很多，无论是从网站的刚开始的主题的确定设计还是后期的网站的发布与......
