静态网站设计报告模板.docVIP

网页设计报告 学 部： 课程名称： 网页设计基础 专 业： 学 号： 姓 名： 指导老师： 目录 一、 网站简介 1 1.1网站介绍 1 1.2制作工具 2 1.3站点介绍 3 1.4文件夹摆放简介 3 二、 布局简介 4 2.1首页布局 4 2.2个人中心布局工具 4 2.3朋友布局 5 2.4作品布局 5 2.5学校布局 5 2.6相册布局 6 三、 网站内容介绍 8 四、 制作心得 11 五、 参考文献 12 网站简介 1.1网站介绍 我的网站是介绍自己的个人网站，总共15个页面，其中导航上有6个链接，包括首页、个人中心、朋友、作品、学校、相册。 首页部分：介绍了自己的一些简单的资料，其中有一份电子杂志，是平时的时候为了留作纪念做的，很想与老师和同学们分享。 个人中心：关于自己的一些详细的信息，以及在大学的一些变化，里面有两个子网页，通过图片链接进入，包括我的家乡和我的专业；我的家乡是介绍荆州和荆州公安的一些信息，而专业就是介绍的电子商务方面的一些信息。 朋友：包括三个子网页，介绍我的三个好朋友，李梦雪、陈丽婷和何立芝；好朋友有很多，只是因为时间原因，没有多余的时间做更多的页面去介绍，在后期的完善过程，会一一加上，因为网站做好不仅仅是因为它是作业、是考试，还是自己在大学的知识的积累和美好的回忆。 作品：运用SPAY放置了自己的五篇随便，平时很喜欢写随便，一段时间不写，就觉得少了写什么。当然，还包括自己喜欢的一些作家，很喜欢张小娴，喜欢她的文字，很真实，因此也用了一个页面专门介绍张小娴。 学校：这一部分我仅仅介绍了大学和高中，因为资源有限，没有一些关于小学和初中的照片，也就没办法详细介绍。相册这页，是花了最多心思去做的一个页面，其中的一个“鼠标经过图片移动”是在平时自学CSS的时候学到的知识，因为对制造网站有很大的兴趣，所以，在平时有时间的时候，会在网上下载一些视频和资料，用来自学。 相册：包含两个子网页，分别是班级相册和家人相册。在下面的介绍中，会仔细介绍。 1.2制作工具 Dreamweaver 8.0 1.3站点介绍 1.4文件夹摆放简介 在文件夹200810178140刘琴里面分为6个子文件夹，命名如下图所示，为了让读者更快捷的进入我的网站，我将index页放在了外面。 布局简介 我的网站包括15个页面，八种布局，最主要的运用上下、左右布局，再细分。 2.1首页布局：首页布局采用的是左右结构，其中左分为上、中、下三部分，分别添加下拉式、图片链接、日期三部分。右边是简单的背景加文字组成。大致布局如图1.1 图1.1 2.2个人中心布局：个人中心主要是上下结构，其中上部分包括左中右，下部分包括四块，分别以左上、左下、右上、右下命名，这样的布局在感觉上很复杂，其实很简单，比如下部分的四个块状，它的代码是共同的。大致布局如图2.1 图2.1 2.3朋友布局：朋友部分的布局很简单，简单的上下结构，简单的利用图片的固定位置来构造成上部分的左右结构。在我的家乡页面简介中，也是运用的相同布局。其布局如3.1 图3.1 2.4作品布局：作品部分运用的是上下结构，其中下部分分为左右两块，如下图4.1 图4.1 2．5学校简介：学校部分的布局和三个朋友简介页面的布局是采用的相同布局，都是运用的上下结构，其中上部分包括左右，这种布局与上面的作品布局很像，其大致结构如下图5.1 图5.1 2.6相册布局：相册布局采用的是左右结构，再对左部分划分，划分为上中下三部分，对右部分划分为上下结构。这样的布局在是视觉上可能较为凌乱，但是只要运用较为搭配的色彩，就不会有这种感觉。布局简图如6.1所示 图6.1 另外的两种布局较为简单，即对center部分进行划分，划分为三到四部分。上6图即为我的网站大致布局模式。为了能在不同的浏览器中显示的效果比较统一，在布局的时候，所以的布局都采用了上中下三部分的模式，其中在对center部分加以扩展，这样的布局使所以的内容伴随着header 、center、footer一起移动，这样一来，就能达到预期的效果。 书本上介绍的布局模式包括肯多，像一列宽度居中、两列固定宽度、三列自适应、高度自适应等，这些布局模式在网站中都有用到。 网站内容介绍 3.1 首页 网站首页简单明了，让读者可以很直接的找到自己所需的分类 其中，导航栏加入了弹出式菜单 在鼠标滑过菜单时会有变化 。同时在主页中多处加入了超链接，用来方便浏览者来查找资料还有等。 3.2吉他入门 在吉他入门这一栏中采用