第一节 作品简介································································································ 3 第二节 首页制作
一、网站首页整体布局·············································································· 4 二、网站首页细节制作·············································································· 5 三、版权信息制作······················································································ 6 四、背景音乐的添加·················································································· 6 第三节 分页“班级新帖”制作
一、本页布局···························································································· 12 二、本页特效制作···················································································· 13 第四节 制作站点和超链接
一、制作站点···························································································· 15 二、制作超链接························································································ 15 第五节 设计心得······························································································ 17 第六节 改进方案······························································································ 18
第一节 作品简介
本网站制作的内容是0942班主页网站，网页设计以简明、活泼的风格为主，图片和文字的搭配力求恰当。但为了全面展现自己在一个学期内所学习的网页设计知识，本人综合使用Photoshop应用、表格布局；适当添加了多媒体设备，包括背景音乐。超链接的运用也力求简洁，达到让人一目了然的效果。下面在这里先展示网站首页效果：
文字滚动 链接到分页
自制Flash
2
第二节 网站首页制作
一、网站首页整体布局（表格布局）
1、打开dreamweaver软件，新建html文件，命名为index，存入“新建文件夹”。如图所示1：
2、设置“页面属性”中“网页标题”为“班级主页”，背景色为白色，上、下、左、右边距为0像素。
3、用Dreamweaver创建CSS文件，然后书写通用td的样式，以及通用超级链接的样式。代码如下：
这一段代码确定了网页居中布局，以及网页中添加的背景音乐还有一些标题栏的字体以及大小等等。
4、制作首页页眉图片。（PS技术运用）
（1）打开photoshop软件，新建psd文件，宽和高分别为1029像素和73像素，如右图所示。
（2）打开素材文件“无标题”，添加图层模版和渐变效果。 （4）将其添加入dreamweaver即可。
color: #666666;
font-family: \"华文隶书\"; font-size: 18px;
二、网站首页的细节制作
1、主体栏目的设置。
（1）制作位于网站首页左侧的栏目“班级动态”，做好后效果如下图所示：
5
2、打开素材文件，将一切图片添加入各栏目的小格子中，起到美化栏目的效果。 3、加入“班级新帖”和“新闻百度搜索”这两个栏目。 4、将文字添加到各栏目之中，对空余的地方进行删减调整。
三、版权信息的制作
1、在首页底部添加1行1列的表格，居中对齐输入字体“版权所有©20094214 马志远 网站维护：北京电子科技学院0942班 【系统管理】”
四、背景音乐的添加
1、给首页添加背景音乐
第三节 分页“班级新帖”制作 一、本页布局 1、根据已经设计成的主页，对该分页的布局进行初步调整。 2、在每一个已制作好整体框架的网页中添加图片以及作者资料。 3、添图: 加素材文件和图片，如 6 第四节 制作站点和超链接 一、制作站点 1、单击“站点”中的“新建站点”。设置如下： 网站名：http://www.0942.com/ 2、单击“下一步”，在是否使用多媒体技术中选择“否”。 3、定义站点的储存路径，将其保存在“静态网页”目录下。 4、在如何连接到远程服务器选项中选择“无”。 5、站点定义总结如下： 7 二、添加超链接 1、首页添加超链接 （1）在首页班级新帖栏目中分别选中“用生命换来的”、“心理测试”、“那些惊艳的歌词”、“重逢”等字，在属性栏中选择连接路径，即之前制作完毕的分页。 （2）以同样的方法为“新闻百度搜索”栏目中的新闻添加超链接。 第五节 设计心得 做好网页，并不是一件容易的事，它包括个人的选题、内容的采集整理、图片的处理、页面的排版设置、动画的制作、多媒体设备的应用、背景及其整套网页的基调等很多方面的内容。在此分别加以论述： 1、标题。在网页设计中标题起着很重要的作用，它在很大程度上决定了整套网页的定位。一个好的标题必须有概括性、简短，有特色、容易记，还要符合自己主页的主题和风格。 2、内容的采集。选好标题后，开始采集内容，内容必须与标题相符，在采集内容的过程中，应注重特色，所谓特色应该是有一些自己的东西。网页制作应该突出自己的个性，把自己的兴趣、爱好尽情地发挥出来。 3、网页排版。网页页面整体的排版设计也是不可忽略的，原则是合理地运用空间，让自己的网页井井有条，留下必要的空白，让人觉得很轻松。 4、在设计上，应当学会运用一些代码。我们没必要花太多的时间去记那些代码，能看的懂并且能够熟练运用即可。代码一开始比较难懂，需要我们多多实践，慢慢就明白了。 8 第六节 改进方案 1、网页的版面比较简单，在内容上可添加更多的内容 2、网页的排版形式比较单一。这是制作方法的问题，以后可以先用photoshop软件进行布局，完成整个版面之后进行切片，则会得到更加美观的效果。 3、没有DIV+CSS知识的应用，以后应当多加练习 4、同一种问题可以用不同的方法解决。比如说，flsah动画无法对其整体添加超链接。 9 因篇幅问题不能全部显示，请点此查看更多更全内容