1、1、 网站建设的第一步是创建本地站点。2、创建的站点信息将显示在“文件”面板中。如果需要对站点参数进行修改，可以单击“站点管理站点”对站点进行重新设置。三、 网站主页制作1. 使用Div+CSS布局页面使用Div+CSS实现页面布局，具体操作如下：4）为AP Div元素设置CSS样式。由于网站首页和子页面采取相同的布局风格，因此样式表采用外部链接样式表。5）选中创建的AP元素“container”，在右侧的“CSS样式”面板中单击鼠标右键，选择“新建”命令，打开“新建CSS规则”对话框，并作相应设置，如图所示。6）单击确定按钮，弹出“#container的CSS规则定义”对话框，选择分类列表框
2、下的“背景”选项卡，设置文档的“背景颜色”为#FFF；在分类列表框中，切换到“区块”选项卡，设置“文本对齐”属性为左对齐；在分类列表框中，切换到“方框”选项卡，设置Ap Div的“宽”为960 px，“上边界”为1 px，“下边界”为0 px；“边框”和“列表”选项卡的属性保持默认设置；切换到“定位”选项卡，单击确定按钮，完成对“#container”元素样式的定义。设置后的“CSS样式”面板如图所示。/* =整体布局定义开始= */#Container width:960px; /*定义页面宽度*/visibility:visible; /*设置可见度*/margin:1px auto 0;
3、 /*设置外边距*/background-color: #FFF;/*定义背景颜色*/2. 设置页面属性在style.css样式表文件内部设置网页的页面属性。页面属性是对标签属性的设置。代码如下所示：bodyfont-size:12px;/*定义字号*/color:#666;/*定义字体颜色*/background:#FFF;text-align:center;/*定义文本位置*/0;/*定义外边距*/padding:border:/*定义边框粗细*/ transparent;/*定义背景透明*/也可以打开index.html，选择“修改页面属性”菜单命令，在打开的“页面属性”对话框中进行相应
4、设置。3. 插入图片在顶部的“top”元素中插入一幅图像。4. 添加导航条网页导航条是非常重要的网页元素，网页间的跳转，需要通过导航条来完成。1）将光标定位在“nav” Div元素中，在其内部输入列表项，并为列表项的各个单元设置超链接。设置情况如图所示。2）添加CSS样式，需要在style.css文件中输入相关代码。#nav height:30px; /*定义高度*/100%; /*定义宽度*/#c00;overflow: hidden;/*定义溢出效果*/ #nav ul /*定义字号*/ /*定义字体颜色*/line-height: /*定义字体行高*/white-space:nowrap
5、; /*定义区块空格*/0 0 0 30px; /*定义外边距*/ /*定义内边距*/#nav li list-style-type:none; /*定义列表类型*/display:inline; /*定义区块显示效果*/#nav li a text-decoration: /*定义字体修饰*/font-family:Arial, Helvetica, sans-serif; /*定义字体*/7px 10px;/*定义内边距*/#nav li a:hover #ff0;red; /*定义背景颜色*/该样式表使用列表项实现导航菜单功能。效果如图所示。5. 推荐厂家1）把光标置于DIV元素“lef
6、t”中，创建新的DIV元素 sideBarLefta1，并定义相关样式2）在DIV元素“sideBarLefta1”的内部插入推荐厂家标志及说明文字等信息，定义相关样式如图所示。3）在style.css样式表中插入下面的代码， #left float:left; /*定义浮动位置 */640px;/*定义宽度 */ height:832px; /*定义高度 */ .sideBarLeftb1 width:238px; /*定义宽度 */240px; border:#ebcbb4 solid 1px; /*定义边框的颜色、粗细、样式*/6. 网页广告设计制作1）将光标置于div元素“#left”
7、中，插入一个嵌套的div元素#sideBarLefta2， 2）将光标置于DIV元素“banner”中，插入一个已经准备好的SWF元素。3）选中“banner”下面DIV元素，并定义类为“hot”，在4个小DIV元素中分别插入准备好的广告图，效果如图所示style.css样式表中插入的代码如下：#sideBarLefta2 float:390px;268px;/*定义高度*/#banner margin-top:5px; /*定义顶端外边距*/ border:#999 solid 1px; .hot display:#999 1px solid;91px;70px; margin:2px;7.
8、 页面右侧栏目设计1）将光标置于DIV元素“right”中，插入已经准备好的图片service.jpg。2）在service.jpg下面插入两个div，分别定义为.sideBarRightb3和.sideBarRightb4，在新建的div中插入准备好的广告图像ad1.jpg和ad2.jpg并在属性面板中定义超链接，效果如图所示。在style.css中添加的代码如下：#right 320px;.sideBarRightb3 60px;#ebcbb4 1px solid;.sideBarRightb4 93px;margin-top: margin-bottom: /*定义底端外边距*/.sid
9、eBarRightb3,.sideBarRightb4 img 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
10、的DIV元素中，插入两行列表并对列表设置相关CSS参数。.sideBarLeftb3 ul font-size: line-height:6px;270px;0 0 0 5px;5）在列表中添加列表内容，代码如下：ul class=font-ca class=font-d机械a轴承阀门模具刀具夹具泵font-bli密封件粉碎机压缩机减速机机械加工焊机 风机机床弹簧齿轮锅炉更多6）对列表内容设置相关CSS参数。.sideBarLeftb3 li list-style-type:border-right-width:1px; /*定义边框右边的宽度*/ border-right-style:sol
11、id; /*定义边框右边的样式*/ border-left-style: /*定义边框左边的样式*/ border-right-color:#999;7）对列表的第一行整体设置为class=，第二行整体设置为class=，并设置相关CSS参数。.font-c 14px; font-weight:700; /*定义字体粗细*/#03C;.font-b color:10px 0 1px;8）选中第一行的首个词组，如图中的“机械”，将其单独定义为class=UL列表设置效果如图所示。.font-d 16px;#f60;font-weight:20px;）在“sideBarLeftb2”包含的其它DI
12、V元素中，分别添加不同的列表内容，并将上面介绍的UL列表样式添加到这些列表中。至此，行业栏目列表制作完成，如图所示。9. 右边侧栏设计设计制作步骤：1）将光标置于元素“sideBarRightb4”的下方，插入DIV元素，并定义相关参数：“高”129像素、“宽”310像素，“边框”为1像素的边框，将此样式命名为类 “sideBarRightb1”。2）在新建的DIV中插入栏目标题DIV，并设置其边距及文字对齐方式，然后在该DIV元素中输入文字“创业加盟”。3）将光标置于栏目标题DIV的下方，创建图片的DIV元素，并设置其边框浮动为“左对齐”，同时对其边距进行设置。4）在该DIV中插入准备好的图
13、片，在右侧插入UL列表项目，效果如图所示。5）用同样的方法制作如图所示的“库存二手”栏目，需要修改其背景色参数，该DIV的类名定义为“sideBarRightb2”。代码如下：.sideBarRightb1 129px;310px;.sideBarRightb2 background:#E8E8E8;3px;根据上面介绍的方法，制作右边侧栏的其它内容。10. 网页底部设计1）选中DIV元素“foot”，为该元素添加版权信息、联系方式等信息。至此，网站首页设计完毕。2）保存网页文档，最终效果如图所示实训心得经过两周的网页制作实训，我对网站搭建、网页设计有了更深的了解及更好的应用。首先，在做实训期
14、间，我深刻的体会到做一个网站不是那么简单的，第一步是做网站需求分析，我们这次做的是电子商务类网站，所以网站整体需求包括：网站建设背景及目标、网站建设现状分析、网站建设目标分解、网站建设资金及人员投入情况分析。其实，我认为无论做什么事都也应该考虑这些问题，都应该有所评估及计划，为开头做好准备，同时，我个人也相信，任何成功都是需要做准备的。其次，便是网站素材搜集，一个好的网页，里面的图文绝对是吸引眼球、简单大方的，所以素材准备非常重要，这次实训老师给了我们素材，所以方便多了不用其他修图软件，但是呢为了创新还是需要自己在网上找一些图片、文字、音频、视频等。然后，创建站点，网站建设第一步是创建本地站点。在实训中，我个人认为建站点比较难，不过对照书上还是学会了。最后，网站主页制作了，是工程量最大的一个阶段，对此我从几个方面入手，分别是：使用Div+CSS布局页面、设置页面属性、插入图片、添加导航条、推荐厂家、页面广告设计制作、页面右侧栏目设计、行业栏目设计、右边侧栏设计、网页底部设计。我把整个网页分成了几块，分别进行制作，这样不仅有条理，还加快了网站制作效率。以上便是我的实训心得，我很喜欢这种操作性的课程，希望未来这样的课程更加丰富。
