网页设计课程设计报告.doc

网页设计与制作（2011/2012学年第一学期）课程名称 网页设计与制作 设计题目 我的独白 课程性质 公共选修课 学生专业 10级中文系新闻学专业 学生姓名 1040402009 学生姓名 胡紫烟 授课教师 刘 红 军 邵阳学院2011年 10月20日目录（一）网站设计目的和任务（二）网站主题（三）网站规划思想（四）网站页面链接总结（五）综合知识的运用情况（六）课程设计心得与体会 一、 网站设计目的和任务 一学期的网页设计理论和实践课程都结束了，根据老师的要求及指导，我设计了此网站，本网站属于小型个人网站，目的在于简单的介绍一下个人状况，可以使老师和同学们更进一步的了解我现在以及部分过去的情况，加强老师和同学们对我的认识，深化我们大家的情谊，有利于以后在学习、工作生活当中的团结协作。此外，这不仅是为了肩负学生的责任而去完成老师交给我的任务，更是对过去学习的知识的温习巩固，是一个把理论转化为实践的过程，是一个把自己的设计思想转化为实物的过程，是一个发挥自己创造力和想象力的过程。再者，这是对自己在一学期内该学习科目以来的成果的检查，这是一个自我审视的过程：检测我该学期的学习成果，衡量一期以来的收获，更为重要的是扬长避短，发现自己的问题与缺点，使自己及时改正，发觉自身的优点和长处并坚持发扬，有利于我以后的学习和发展。二、 网站主题 本网站以个人从小到现在的大概情况介绍为主题，阐述喜好，表现本人的性格特点。从而更好的进行自我剖析、自我反省、自我思考。为以后的学习工作做更好的准备，促进自身不断的进步和发展。达到学以致用的目的，发挥活到老学到老的精神。三、 网站规划思想 当今社会，靠什么成功?很多成功人士都说过这样一句话：“成功来自百分之八十的人际关系和百分之二十的自身天分和努力。”据此可以发现，扩大人际关系网是十分重要的一项活动，因此就需要一条联系两方的桥梁，这条桥梁是满载信息的大流量的通道，在这信息时代，于是网络成为了这当之无愧的桥梁。我设计这个网站的思路就来源于此。 怎样让更多人了解你？怎么使别人更了解你？怎样扩大自己的接触面？当代是繁忙的一代也是讲究高效率的一代，当今面对这些问题，这时候的内敛不会被认为是好的，最好的解决办法我认为是把自己推销出去，我想通过网络把自己的概况晾晒，方便别人更快捷更省事地得到相关信息，通过这种方式，也可以交到志同道合的朋友，可以一起研究探讨，相互促进，达到共赢。 既然这样，那么网站的风格自然是温和、高雅、柔美的，这样才能达到更高的亲和力效果，同时也应该具有喜悦性、创新性、活泼开朗性，展现个人品格及魅力。最重要的是要呈现一个真诚的自我在大家面前，树立可信性、诚实性，消除虚拟因素，获得大家的真诚对待和好感。 在内容和结构上，具体如下：整个网站分为九个页面，分别为：主页面、基本信息、个人照片、成长阶段概况（童年、中学、大学）、兴趣爱好（文学、书法、旅游）。各个页面间都是相互连接的，方便读者更快捷地找到想了解的信息。用表格表示如下：编号一级栏目二级栏目栏目内容及功能说明1基本信息陈列个人基本信息2成长阶段童年讲述童年的生活时光3中学叙述中学的坚强成长4大学细数大学的丰富多彩5个人照片展现个人形象6兴趣爱好文学阐述对文学的看法和认识7书法表达练习书法的感受8旅游介绍某些旅游景点 网站的目录结构如下：Flyfish -网站根目录Css -存放外置CSS文件Flash -存放Flash动画Images -存放图片文件Bt -存放所有标题或栏目标题的图片文件Content -存放所有与网页内容相关的图片文件Design -存放所有与网页界面设计相关图片文件Menux -存放所有与导航下拉菜单相关图片Navigation -存放导航栏目图片文件Sight -存放景点图片 Linkpages -存放图像或文本超链接的文件 Music -存放背景音乐 Nagvipages -存放导航下拉菜单连接的网页 Js -存放外置JS图片 Text -存放文本文件 Video -存放视频文件四、 网站页面链接总图主页ff2.html基本信息ff3.html成长阶段个人图片ff4.html兴趣爱好童年ff5.html中学ff1.html大学ff6.html文学ff8.html书法ff7.html旅游ff9.html返回主页五、 综合知识的运用情况1、层的使用 在这次网页设计过程中，使用了大量层，因为它灵活好用，可以随便拖动，变大变小都很方便，而框架虽然也能达到这个效果，但是，它不够灵活，不利于我所需要表达的效果的呈现，也许是不习惯的原因吧，觉得太死板了，当然一些地方仍然要用到它，体现清晰的结构。 2、运用Photoshop工具图片的插入和设置背景图像是两个不同的概念，当然可以达到相同的效果，这是很基本的知识运用，也用了很多次，但是当图像较小时在层中插入更方便些，因为作为背景时图片会重复出现造成混乱的局面，但图片过小时，用层将之拉宽大就会使图片变模糊、严重变形，不但没能美化页面反而带来了负面影响，此时最好借助Photoshop工具来编辑图片。文本的插入在层内或框架内完成较好，但不能设置为艺术字体，因此需要运用Photoshop工具来辅助完成，其实很多地方都可以用到Photoshop工具特别是一些要表现自己独特的思想和设计画面。 3、使用Flash工具 只要是动态效果都可以用Flash工具，音乐、闪动图片等。4、使用链接 为方便读者的查阅，在各页面底部都设置了页面链接。5、插入跳转菜单为了使读者能快捷的回到自己感兴趣的页面，于是在各个页面都插入了跳转菜单。6、插入滚动文字7、设置交替图像，鼠标放置停止图片切换8、制作在整个页面浮动的图片9、设置垂直循环滚动的图片10、使用弹出信息行为11、框架的使用12、背景图像的固定，让文本在图像上滚动13、插入音乐文件14、插入Flash按钮15、动态效果的使用：1）每个页面都设置了链接，有链接的地方就设置了鼠标放置时的颜色变化，还插入了Flash按钮;2)首页有上下滚动的图片，插入了背景音乐;3)基本信息页面使用了交替图像插入了音乐文件;4)书法页面使用了浮动的图片;5)旅游页面使用了上下滚动的图片;6)文学页面运用了滚动字幕；7）童年页面插入了Flash动画。六、 课程设计心得与体会 第一：我非常感谢学校给了我这次制作网页的机会，通过这次实训，我学到了很多有价值的东西。我独立的完成了网站设计的全过程，把设计中散乱的网页链接成框架体系，使平时学到的知识点有了很高的提高，并且合理的在试验中进行了实践。第二：在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，扩大了知识面，给我在以后的设计过程中能博采众长，制作出好的网页打下了基础。第三：我现在已经掌握文档排版标记的使用熟练使用及其属性设置、特殊符号；第四：我现在已经熟练使用超级链接，