网页制作实训报告
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《网页设计》实训报告
网站名称：乐器
学号：**********
*名：**
指导老师：**
日期：2011-7-4
一、网站名称：乐器
二、设计工具：Dreamweaver8、Photoshop cs5
三、站点构思
制作该网站的目的如下：
(1) 帮助更多的人了解乐器
(2) 提供其他与乐器相关的网站链接
(3) 提供搜索乐器相关信息的便利途径
计划提供如下服务：
(1) 共享一些精彩的乐器活动照片
(2) 将即将开始的有关乐器活动通知大家
(3) 提供与特定集会相关的信息
(4) 阅读乐器文章和介绍
四、网站规划及实现过程
(1) 实现方式：使用HTML构建网页结构，外部样式表ssc.css设置页面样式。
(2) 总体规划：
网站包含8个页面，分为三层，第一层为首页，第二层为6个二级子页，第三层为1个内容页。其中，首页采用div+css布局并加入表格制作，并包含导航栏；6个二级子页分别为表单网页、利用模板制作的网页、利用div+css布局的网页；并在各网页中添加了JavaScript动态效果。
五、页面设计说明
(1)：使用div+css布局，首页(index.html)使用div+css布局，将整个页面设置为1整体4大块，如图：
#header 头部内容和#main1 主体1 内容
#main2 此为主体2 内容
#footer 为底部内容
代码：
#content {margin:0 auto; width:1150px;} 此为整体定义
#header {width="1150"; height="120"; } 头部定义
#main1 {margin-top:5px; width:1150px; } 主体1 定义
#main2 {margin-top:5px; margin-left:120px; width:910px;
border:1px solid #CCC;} 主体2 定义
#footer {margin-left:120px; width:910px; border-left:1px solid #CCC;
border-right:1px solid #CCC; } 底部定义
(2) 模板网页：以“模板”(moban.html)为例，说明具体实现方法，如图：
(moban.html)
其中“新闻中心”(xinwenzhong.html) “经典回顾”(jingdianhuigu.html) “关于我们”(guangyuwomen.html) “钢琴介绍”(chanping.html) “乐器活动”(huodong.html)
5张网页采用此张模板。
(3) 表格和表单：“注册”position:absolute;中插入了一个表单和内嵌入一张表格，
如图：
(zhuce.html)
(4)FLASH：以主页(index.html)为例，如图：
(index.html)
代码：
(xinwenzhongxin.html)
代码：
(huodong.html)
代码：
(5) JavaScript交互效果：首页(index.html)采用了两组特效，如图：
(index.html)
代码：
雅歌琴行...
(index.html)
代码：
