网页艺术的设计课程的设计的报告书.docVIP

计算机科学系 课程设计报告书 课 程 名 称： 　　　网页艺术设计 　　 课程设计题目：　　　 爱心希望小学网站　　 课程设计目的： 《网页设计与制作课程设计》是在我们学习《网页设计与制作》课程后，结合HTML语言、Photoshop图像处理、Flash动画制作以及Dreamwaver网页制作等进行的实践性教学，通过课程设计，可以帮助我们巩固所学的知识，加强HTML语言的基本概念和网页的设计与实现，还可以让我们对布局、表格、以及AP DIV的使用。从而进一步提高我们的网页设计与制作能力，熟悉图像的处理、动画制作的设计和实现，为以后的课设的学习和实践打下了基础。 课程设计内容 此网站主要体现希望网站的特色，网站的网名为：“爱心希望小学”主要体现小学的特色，颜色以绿色为背景，象征着朝气蓬勃，健康快乐的孩子，网站的设计主要以有文字，图片。以及Flash动画相结合，使网站更加的大方、协调。整个网站的模块分为：“学校首页”、“学校概况”“校园动态”、“师生互动”、“教学教研”、“后勤情况”、“教学课程”、“学生报刊”、“学生园地”从而是整个网站更加的合理和美观！更能体现出希望小学的特色。 网站的艺术设计及特色 1.该网站主要以两大板块构成，上部分为校园动态和校园活动相结合，体现出校园的特色。第二个板块主要以教务公开和经验交流为主题。在两个板块之间插入一个flash动画使其不矢单调，能为整体的网站增加大方美观的效果。 2.学校的logo设计以爱心为主，两个人用手围成一个爱心，颜色为主要以白和黄色为主，象征着孩子们的纯真的笑脸和纯洁的心灵。更能为主题增添色彩力和感染力。 3.网站主要采用绿色布局，更能体现出孩子们朝气蓬勃向上的一面，并用常用的宋体字，使网站看起来比较正规。 4.网站插入的flash动画中跳动的字分别以红色和绿色为其校训，目的是让孩子们善于思考，善于动脑，开发他们的想象力，让他们更加的优秀，坚持不懈的精神。更加的努力和做一个诚实的孩子，让他们不仅在学习上优秀，在做人这方面更加的优秀！ 四、网站结构和整体布局 1、网站结构图 2、页面布局图 页面布局图 3、网站文件夹目录 网站的文件夹目录 五、主页制作步骤 1.新建HTML网页，命名为“index”并打开 打开常用工具栏，选择“表格”对话框，在表格大小中选择行数为15，列数为1，表格宽度为800Px,边框粗细为0像素，单元格边距为0，单元格间距为0。 3.选择表格对话框，绘制宽和高分别为：800x100的像素，选择插入—flash，在flash文件夹中找到“Banner” 文件，如图: 4.在在表格中，输入“学校首页”、“学校概况”、“校园动态”、“师生互动”“教学教研”、“后勤情况”、“教学课程”、“学校报刊?”、“学生园地 ”。分别设置链接颜色，变换图像链接、已访问后的链接。如图所示： 在公告栏的右边设置一个宽和高分别为：320x350px，选择插入--媒体—图像查看器，在对话框中保存该文件，在右面flash元素中进行相关设置，插入图片。 紧接着在后面绘制一个校园新闻，宽和高分别为：248x350px，如图： 再在下面插入一个Flash动画，绘制宽和高分别为：800x100px，在插入—Flash，打开Flash文件夹下所在的位置，然后选择“flash1”（选择导出的文件，后缀名为：Swf的类型的），如图： 下一步在下面绘制三个分别为“政务公开”、“经验交流”、“平安校园”三个框架。 下一步就是绘制一个用户名注册登陆界面，然后再在后面绘制一个滚动的图片，紧接着就是友情链接及版权商标等，对它们进行链接即可！ 六、子页制作步骤 一、学校首页 1.新建xxgk页面，利用表格分别插入Banner和导航条，在绘制一个宽和高分别为：800x400px，插入背景，然后把对应的文字输入进去，然后选中学校首页，将其链接到新建的xxgk的页面中即可，并对其保存运行，运行后的界面如图： 二、校园动态 新建一个xydt的页面，利用表格分别插入导航条和Banner，在绘制一个宽和高：800x400px，插入背景，然后把对应的文字输入进去，再选中校园动态，将其链接到新建的xydt的页面中，对其保存bong运行，其结果如图所示： 师生互动 同理依次重复上面的步骤，新建一个新的页面为ssdt，然后插入相应的背景图，并将其相应的文字输入进去，然后选中师生互动，将其链接到新的ssdtd的页面，保存并运行，其结果为： 教学教研 同理分别重复上述步骤，分别新建hqqk、jxkc、xxbk、xsyd分别在表格中插入800x400的背景图，并将其相应的文字输入进去，保存并运行，（都要保存在主页中index.html）其运行的结果如