网页设计与制作实训报告材料Word文件下载.docx
《网页设计与制作实训报告材料Word文件下载.docx》由会员分享，可在线阅读，更多相关《网页设计与制作实训报告材料Word文件下载.docx（17页珍藏版）》请在冰豆网上搜索。
如图是电子商务的LOGO。
3、素材搜集
明确主题和划分板块后，接着要为后续的建设搜集素材。
若想让有声有色，能够吸引客户注意，就要尽量搜集文字、图片、音频、视频、动画等多媒体素材。
对于一些通用素材，可以从网上搜集得到，也可以根据需求自行制作素材，比如，通过Photoshop图像处理软件对图像进行优化处理，使用Flash制作动画等。
如图所示。
二、创建站点
1、建设的第一步是创建本地站点。
2、创建的站点信息将显示在“文件”面板中。
如果需要对站点参数进行修改，可以单击“站点→管理站点”对站点进行重新设置。
三、主页制作
1.使用Div+CSS布局页面
使用Div+CSS实现页面布局，具体操作如下：
4）为APDiv元素设置CSS样式。
由于首页和子页面采取相同的布局风格，因此样式表采用外部样式表。
5）选中创建的AP元素“container”，在右侧的“CSS样式”面板中单击鼠标右键，选择“新建”命令，打开“新建CSS规则”对话框，并作相应设置，如图所示。
6）单击确定按钮，弹出“#container的CSS规则定义”对话框，选择分类列表框下的“背景”选项卡，设置文档的“背景颜色”为#FFF；
在分类列表框中，切换到“区块”选项卡，设置“文本对齐”属性为左对齐；
在分类列表框中，切换到“方框”选项卡，设置ApDiv的“宽”为960px，“上边界”为1px，“下边界”为0px；
“边框”和“列表”选项卡的属性保持默认设置；
切换到“定位”选项卡，单击确定按钮，完成对“#container”元素样式的定义。
设置后的“CSS样式”面板如图所示。
/*==整体布局定义开始==*/
#Container{
width:
960px;
/*定义页面宽度*/
visibility:
visible;
/*设置可见度*/
margin:
1pxauto0;
/*设置外边距*/
background-color:
#FFF;
/*定义背景颜色*/
}
2.设置页面属性
在style.css样式表文件部设置网页的页面属性。
页面属性是对<
body>
标签属性的设置。
代码如下所示：
body{
font-size:
12px;
/*定义字号*/
color:
#666;
/*定义字体颜色*/
background:
#FFF;
text-align:
center;
/*定义文本位置*/
0;
/*定义外边距*/
padding:
border:
/*定义边框粗细*/
transparent;
/*定义背景透明*/
也可以打开index.html，选择“修改→页面属性”菜单命令，在打开的“页面属性”对话框中进行相应设置。
3.插入图片
在顶部的“top”元素中插入一幅图像。
4.添加导航条
网页导航条是非常重要的网页元素，网页间的跳转，需要通过导航条来完成。
1）将光标定位在“nav”Div元素中，在其部输入列表项，并为列表项的各个单元设置超。
设置情况如图所示。
2）添加CSS样式，需要在style.css文件中输入相关代码。
#nav{
height:
30px;
/*定义高度*/
100%;
/*定义宽度*/
#c00;
overflow:
hidden;
/*定义溢出效果*/
}
#navul{
/*定义字号*/
/*定义字体颜色*/
line-height:
/*定义字体行高*/
white-space:
nowrap;
/*定义区块空格*/
00030px;
/*定义外边距*/
/*定义边距*/
#navli{
list-style-type:
none;
/*定义列表类型*/
display:
inline;
/*定义区块显示效果*/
#navlia{
text-decoration:
/*定义字体修饰*/
font-family:
Arial,Helvetica,sans-serif;
/*定义字体*/
7px10px;
/*定义边距*/
#navlia:
hover{
#ff0;
red;
/*定义背景颜色*/
该样式表使用列表项实现导航菜单功能。
效果如图所示。
5.推荐厂家
1）把光标置于DIV元素“left”中，创建新的DIV元素sideBarLefta1，并定义相关样式
2）在DIV元素“sideBarLefta1”的部插入推荐厂家标志及说明文字等信息，定义相关样式如图所示。
3）在style.css样式表中插入下面的代码，
#left{
float:
left;
/*定义浮动位置*/
640px;
/*定义宽度*/
height:
832px;
/*定义高度*/
}
.sideBarLeftb1{
width:
238px;
/*定义宽度*/
240px;
border:
#ebcbb4solid1px;
/*定义边框的颜色、粗细、样式*/
6.网页广告设计制作
1）将光标置于div元素“#left”中，插入一个嵌套的div元素#sideBarLefta2，
2）将光标置于DIV元素“banner”中，插入一个已经准备好的SWF元素。
3）选中“banner”下面DIV元素，并定义类为“hot”，在4个小DIV元素中分别插入准备好的广告图，效果如图所示
style.css样式表中插入的代码如下：
#sideBarLefta2{
float:
390px;
268px;
/*定义高度*/
#banner{
margin-top:
5px;
/*定义顶端外边距*/
#999solid1px;
.hot{
display:
#9991pxsolid;
91px;
70px;
margin:
2px;
7.页面右侧栏目设计
1）将光标置于DIV元素“right”中，插入已经准备好的图片service.jpg。
2）在service.jpg下面插入两个div，分别定义为.sideBarRightb3和.sideBarRightb4，在新建的div中插入准备好的广告图像ad1.jpg和ad2.jpg并在属性面板中定义超，效果如图所示。
在style.css中添加的代码如下：
#right{
320px;
.sideBarRightb3{
60px;
#ebcbb41pxsolid;
.sideBarRightb4{
93px;
margin-top:
margin-bottom:
/*定义底端外边距*/
.sideBarRightb3,.sideBarRightb4img{
text-align:
/*定义文本位置*/
padding:
8.行业栏目设计
1）将光标置于DIV元素“left”中，在其下侧插入一个嵌套的DIV元素“sideBarLeftb2”。
2）选中Div元素“sideBarLeftb2”，将光标定位在其部，创建多个新Div，为了方便日后的维护我们将新建Div单独定义为.sideBarLeftb3。
3）选中DIV元素“sideBarLeftb3”，在style.css中添加的代码如下：
sideBarLeftb3{
150px;
280px;
4px;
4）将光标移到sideBarLeftb3的DIV元素中，插入两行列表并对列表设置相关CSS参数。
.sideBarLeftb3ul{
font-size:
line-height:
6px;
270px;
0005px;
5）在列表中添加列表容，代码如下：
<
divclass="
sideBarLeftb3"
>
ulclass="
font-c"
aclass="
font-d"
机械<
/a>
a>
轴承<
阀门<
模具<
刀具夹具<
泵<
/ul>
font-b"
li>
密封件<
/li>
粉碎机<
压缩机<
减速机<
机械加工<
焊机<
风机<
机床<
弹簧<
齿轮<
锅炉<
更多<
/di
升级会员 