网页设计与制作实训报告

《网页设计与制作实训报告》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

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

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

4、界”为1px，“下边界”为0px；“边框”和“列表”选项卡的属性保持默认设置；切换到“定位”选项卡，单击确定按钮，完成对“#container”元素样式的定义。设置后的“CSS样式”面板如图所示。/*==整体布局定义开始==*/#Container{width:960px;/*定义页面宽度*/visibility:visible;/*设置可见度*/margin:1pxauto0;/*设置外边距*/background-color:#FFF;/*定义背景颜色*/}1.设置页面属性在style.css样式表文件内部设置网页的页面属性。页面属性是对标签属性的设置。代码如下所示：b

5、ody{font-size:12px;/*定义字号*/color:#666;/*定义字体颜色*/background:#FFF;/*定义背景颜色*/text-align:center;/*定义文本位置*/margin:0;/*定义外边距*/padding:0;/*定义外边距*/border:0;/*定义边框粗细*/background:transparent;/*定义背景透明*/}也可以打开index.html，选择“修改→页面属性”菜单命令，在打开的“页面属性”对话框中进行相应设置。1.插入图片在顶部的“top”元素中插入一幅图像。如图所示。2.添加导航条网页导航条是非常重要的网页元

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

7、ace:nowrap;/*定义区块空格*/margin:00030px;/*定义外边距*/padding:0;/*定义内边距*/}#navli{list-style-type:none;/*定义列表类型*/display:inline;/*定义区块显示效果*/}#navlia{text-decoration:none;/*定义字体修饰*/font-family:Arial,Helvetica,sans-serif;/*定义字体*/color:#