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

网页设计课程设计 计算机科学系课程设计报告书课 程 名 称： 网页艺术设计 课程设计题目： 爱心希望小学网站1、 课程设计目的：网页设计与制作课程设计是在我们学习网页设计与制作课程后，结合HTML语言、Photoshop图像处理、Flash动画制作以及Dreamwaver网页制作等进行的实践性教学，通过课程设计，可以帮助我们巩固所学的知识，加强HTML语言的基本概念和网页的设计与实现，还可以让我们对布局、表格、以及AP DIV的使用。从而进一步提高我们的网页设计与制作能力，熟悉图像的处理、动画制作的设计和实现，为以后的课设的学习和实践打下了基础。2、 课程设计内容 此网站主要体现希望网站的特色，网站的网名为：“爱心希望小学”主要体现小学的特色，颜色以绿色为背景，象征着朝气蓬勃，健康快乐的孩子，网站的设计主要以有文字，图片。以及Flash动画相结合，使网站更加的大方、协调。整个网站的模块分为：“学校首页”、“学校概况”“校园动态”、“师生互动”、“教学教研”、“后勤情况”、“教学课程”、“学生报刊”、“学生园地”从而是整个网站更加的合理和美观！更能体现出希望小学的特色。3、 网站的艺术设计及特色 1.该网站主要以两大板块构成，上部分为校园动态和校园活动相结合，体现出校园的特色。第二个板块主要以教务公开和经验交流为主题。在两个板块之间插入一个flash动画使其不矢单调，能为整体的网站增加大方美观的效果。2.学校的logo设计以爱心为主，两个人用手围成一个爱心，颜色为主要以白和黄色为主，象征着孩子们的纯真的笑脸和纯洁的心灵。更能为主题增添色彩力和感染力。3.网站主要采用绿色布局，更能体现出孩子们朝气蓬勃向上的一面，并用常用的宋体字，使网站看起来比较正规。4.网站插入的flash动画中跳动的字分别以红色和绿色为其校训，目的是让孩子们善于思考，善于动脑，开发他们的想象力，让他们更加的优秀，坚持不懈的精神。更加的努力和做一个诚实的孩子，让他们不仅在学习上优秀，在做人这方面更加的优秀！四、网站结构和整体布局1、网站结构图BannerFlash动画Logo学校首页浏览者学校概况校园动态教学教研页面排版后勤情况教学课程学校报刊学生园地2、页面布局图 Logo Banner 导航条 网页内容 （各子页内容）页面布局图3、网站文件夹目录网站的文件夹目录五、主页制作步骤1.新建HTML网页，命名为“index”并打开2. 打开常用工具栏，选择“表格”对话框，在表格大小中选择行数为15，列数为1，表格宽度为800Px,边框粗细为0像素，单元格边距为0，单元格间距为0。3.选择表格对话框，绘制宽和高分别为：800x100的像素，选择插入flash，在flash文件夹中找到“Banner”文件，如图:4.在在表格中，输入“学校首页”、“学校概况”、“校园动态”、“师生互动”“教学教研”、“后勤情况”、“教学课程”、“学校报刊”、“学生园地 ”。分别设置链接颜色，变换图像链接、已访问后的链接。如图所示：5. 在公告栏的右边设置一个宽和高分别为：320x350px，选择插入-媒体图像查看器，在对话框中保存该文件，在右面flash元素中进行相关设置，插入图片。 6. 紧接着在后面绘制一个校园新闻，宽和高分别为：248x350px，如图：7. 再在下面插入一个Flash动画，绘制宽和高分别为：800x100px，在插入Flash，打开Flash文件夹下所在的位置，然后选择“flash1”（选择导出的文件，后缀名为：Swf的类型的），如图：8. 下一步在下面绘制三个分别为“政务公开”、“经验交流”、“平安校园”三个框架。9. 下一步就是绘制一个用户名注册登陆界面，然后再在后面绘制一个滚动的图片，紧接着就是友情链接及版权商标等，对它们进行链接即可！ 六、子页制作步骤一、学校首页 1.新建xxgk页面，利用表格分别插入Banner和导航条，在绘制一个宽和高分别为：800x400px，插入背景，然后把对应的文字输入进去，然后选中学校首页，将其链接到新建的xxgk的页面中即可，并对其保存运行，运行后的界面如图：二、校园动态1. 新建一个xydt的页面，利用表格分别插入导航条和Banner，在绘制一个宽和高：800x400px，插入背景，然后把对应的文字输入进去，再选中校园动态，将其链接到新建的xydt的页面中，对其保存bong运行，其结果如图所示：3、 师生互动2. 同理依次重复上面的步骤，新建一个新的页面为ssdt，然后插入相应的背景图，并将其相应的文字输入进去，然后选中师生互动，将其链接到新的ssdtd的页面，保存并运行，其结果为：4、 教学教研3. 同理分别重复上述步骤，分别新建hqqk、jxkc、xxbk、xsyd分别在表格中插入800x400的背景图，并将其相应的文字输入进去，保存并运行，（都要保存在主页中index.html）其运行的结果如图：后勤情况教学课程学校报刊学生园地5、 注册表4. 在表单内插入表格为14行一列，利用表格在左上方绘制单元格，输入文字，在表格内输入标题，另外利用表单菜单选项分别插入按钮，文本域等元件，选中表格，插入背景为“zc”，具体设置如图所示：2.完成作品。最终，整个网页设计页面制作成功，运行结果如图所示：最终效果图七、网站推广与心得现在，计算机网络已经渗入到我们生活的个个方面，也已经成为我们生活中不可缺少的一部分，网络成为我们获取知识和信息的便捷工具和重要的渠道！随着计算机的普及，现在的网民也不断地增多，因此讲，了解和学习网页的制作是我们当代大学生的必修课，同时也让我们更好的掌握Dreamweaverde的应用！说实话，当老师把这个课程设计布置下来的时候，我真的是不知该如何制作，大脑完全处于停滞状态，后来，通过上网查询有关此网站的设计模板，就照此制作，又经过反复的思考及修改，不断地学习，借鉴，查阅等，才把主页面给做好了，同时，又让我对网页设计以及用到的Flash和Ps有了更深一步的了解，并能很好的运用此软件。可以说是又是一个新的提高吧！我觉得做网页首先给浏览人一种整体很舒服的感觉，无论是从视觉上还是色彩搭配上，都要合理，布局更要合理，要能准确明朗的突显出你设计的主页面。切记链接时不会出现乱码或是图片不能正常显示，这在网页中都是不能出现的错误，不管你的布局及色彩搭配是多么的完美，如果出现这样的错误，都会影响你整个网页的!总体来说，通过这段时间对网页设计的设计及学习，有收获也有遗憾，虽然我做的