网页制作课程设计报告完整版.doc

网站制作课程设计系别：信息技术系专业：班级：姓名：学号：指导老师：李枫完成日期：2015年07月 9日目 录网站制作课程设计1目 录2一、设计任务与要求3课设目的3课设内容3具体要求3设计环境3二、设计方案3三实现过程3四、心得体会19五、参考资料20六、附录201、网站效果图202、网站中各网页屏幕截图21一、设计任务与要求课设目的1、复习巩固网站设计与制作的基础知识：HTML、CSS和JS，进一步加深对Photoshop制作网页效果图、Dreamweaver布局网页等技术的理解和掌握，培养学生策划和制作商业网站的实践能力。2、训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、音视频资料、flash动画和网页特效等，提高学生的美工设计能力。3、课程设计为学生提供了一个既动手又动脑，独立实践的机会，将课本上的理论知识和实际有机的结合起来，锻炼学生的分析解决实际问题的能力。课设内容针对目前互联网上的网站制作背景和需求，策划、设计与制作一个完整的商业网站。具体网页的内容自拟，但以下网站主题可供参考、选择：221、图书销售网站2、学校网站3、旅游网站4、摄影网站5、公司宣传网站6、驾校网站7、精品课程网站8、婚庆网站9、团购网站10、政府网站具体要求1、动手制作网页之前：必须认真做好网站的需求分析，包括市场调查，定位网站目的，策划好网站的主题及功能定位，创意出网站的风格和亮点，确定网页色彩基调。规划好网站的风格和结构，网站主要内容及板块，各板块的具体内容及功能。分析出“网站层次结构图”、 “网页版面设计”，以及“网站策划方案”。2、创建完善的目录结构：站点文件夹采用英文单词命名，站点文件夹中所包含文件夹：limages （存放图片文件）lflash（存放动画文件）lcss（存放CSS样式表文件）ljs（存放JS脚本文件）lother（存放其它文件）l源文件 （存放自己设计的PS源文件、Flash源文件）l首页命名为index.html，其余文件全部用英文命名3、制作网页前，收集好所需的文字资料、图像资料、网页特效。用Photoshop制作和处理网页效果图、用Flash制作网页所需的动画。网页效果图和动画为原创（保存有源文件），主页标题图片（动画）必须为原创。图1 网站结构图4、所创建的网站至少包括8个以上页面，分为三层，第一层为首页，第二层为4个二级子页，第三层为2-3个内容页，网站的整体体系结构如图1所示。网页中必须要用到CSS以及DIV技术实现网页元素的修饰及布局。各个页面根据需要插入合适的Falsh动画。所有页面要求内容充实、布局合理、颜色搭配协调、美观大方。各个页面之间导航清晰、链接准确无误。5、网页的版面尺寸应用符合网页设计的规范，网站中所有文件、文件夹的命名应规范，尽量做到字母数量少，见名知意、容易理解。6、课设过程中要充分发挥主观能动性、独立思考、努力钻研、勤于实践、勇于创新。在设计过程中，要严格要求自己，树立严密、严谨的科学态度，必须按时、保质、保量完成课设任务。要求独立完成规定的课设内容，不得弄虚作假，不准抄袭或拷贝他人的网页或其他内容。设计环境l 操作系统：WindowsXP / Windows Vista / Windows 7l 设计工具：Photoshop、Dreamweaver、Flash二、设计方案首先，确定选做的网站主题，我选择了制作学校网站。确定了网站主题，我决定做中原工学院信息商务学校的网站。我选择蓝色作为网站的基本色调，网站的风格简洁、清新、大气恢宏。在PS软件中为中原工学院信息商务学院Logo制作特效，并且制作出校训效果图，在制作的过程中要保持中原工学院信息商务学院Logo和校训效果图和网页的整体风格保持一致。网站层次结构图如下2.1：图2.1网页版面设计：确定了网页的整体风格之后来确定网页的结构。首页设有新闻中心、学院概况、学院风采、资料下载四个栏目。新闻中心设有14个栏目，总共有14个链接，每个链接对应一则新闻。学员风采栏目下展示了积极、乐观、向上的信息商务学院学子风貌的图片。资料下载设有19个栏目，每个栏目设有一个链接，一共19个链接网站策划方案：学校阐述中原工学院信息商务学院成立于2003年4月，是首批经国家教育部批准具有全日制普通本科学历教育办学资格的独立学院。学院由中原工学院和嘉宏控股集团共同举办，实行董事会领导下的院长负责制管理模式，具有独立法人资格。经过十多年的发展，学院办学规模不断扩大，师资队伍建设不断加强，办学条件日益改善，学科专业建设成效显著，办学成效和人才培养质量稳步提高，赢得了上级主管部门和社会各界的一致好评。先后被授予“全国先进独立学院”、“中国民办高等教育优秀院校”、“中国影响力独立学院”、“ 河南省优秀民办学校”、“河南发展（成长）最快的院校”、“河南最具就业竞争力示范院校”、“河南最具综合实力民办高校”、“河南省民办教育办学先进单位”、“河南高等教育质量社会满意十佳院校”、“河南省阳光高考信息平台工作先进单位”、“值得推荐的10张河南教育名片”等荣誉称号。 学院坚持“以质量求生存，以特色创品牌，以管理促效益，以就业谋发展”的办学理念，不断深化教学改革，不断强化教学管理和加强学风建设，积极探索应用技术型人才培养模式，尊重个人选择，鼓励个性发展，不拘一格培养人才，在传授知识和技术的同时，注重培养学生的创新及创业能力、社会与行业适应能力和就业能力。 学院现设有商学系、会计系、政法与传媒系、外语系、机械工程系、电气工程系、信息技术系、建筑工程系、艺术设计系、基础学科部等10个教学单位。现有学科、专业涵盖管理学、艺术学、工学、经济学、文学、法学等6大学科门类，设有会计学、机械设计及其自动化、环境设计、英语、法学、计算机科学与技术、土木工程等39个本科专业和会计、工程造价等14个专科专业。其中，机械设计制造及其自动化为省重点建设学科，建筑环境与能源应用工程和服装与服饰设计为省民办高校品牌专业，会计学、信息管理与信息系统、英语为省专业综合改革试点专业。学院积极实施“人才强校”战略，坚持引进与培养并举，建成了一支数量适当、专兼结合、结构合理的优秀教师队伍。目前，拥有专任教师690人。其中，具有高级职称的教师233人，中级职称教师272人。师资队伍中，具有硕士及以上学位教师占教师总数的81.7%。 学院现有全日制在校生16000余人，拥有两个校区，占地面积1100亩。其中总投资10亿多元的主校区位于河南省郑州市南龙湖宜居教育园区双湖大道2号，毗邻郑州航空港区，与中部地区最大商贸城华南城相离仅300米；北校区位于郑州市中原中路41号。两区已建成校舍建筑面积计42万平方米，其中教学行政用房建筑面积22万平方米。学院育人环境优美，教学资源丰富，建有空乘实训中心及机电创新工作室、工业设计创新工作室、PLC控制创新实验室、物理实验室、电工实验室、电子实验室、会计手工账实验室、会计电算化实验室、信息管理综合实验室、电子商务实验室、国际贸易实验室、物流管理综合实验室、ERP沙盘模拟实验室、同声传译实验室、摄影实验室、服装实验室等设备先进的实验室和多功能表演厅、标准田径运动场、篮球场、网球场、排球场及健美操房等各种体育教学设施，教学仪器设备值6520万元，纸质图书174.5万册 ，电子图书85.1万册。学院还共享中原工学院的实验室、图书资讯等优质教学资源。 在十几年的教学实践中，会计学院形成了“高素质、应用型的人才培养模式”与“国际化、市场化办学方向”相结合的本科办学特色。 学院现有全日制在校生16000余人，拥有两个校区，占地面积1100亩。其中总投资10亿多元的主校区位于河南省郑州市南龙湖宜居教育园区双湖大道2号，毗邻郑州航空港区，与中部地区最大商贸城华南城相离仅300米；北校区位于郑州市中原中路41号。两区已建成校舍建筑面积计42万平方米，其中教学行政用房建筑面积22万平方米。学院育人环境优美，教学资源丰富，建有空乘实训中心及机电创新工作室、工业设计创新工作室、PLC控制创新实验室、物理实验室、电工实验室、电子实验室、会计手工账实验室、会计电算化实验室、信息管理综合实验室、电子商务实验室、国际贸易实验室、物流管理综合实验室、ERP沙盘模拟实验室、同声传译实验室、摄影实验室、服装实验室等设备先进的实验室和多功能表演厅、标准田径运动场、篮球场、网球场、排球场及健美操房等各种体育教学设施，教学仪器设备值6520万元，纸质图书174.5万册 ，电子图书85.1万册。学院还共享中原工学院的实验室、图书资讯等优质教学资源。 网站目标：网络凭借其卓越的互动性与便捷的交流手段正在成为最有发展潜力的与有前途的发展媒体，成为众商家为企业做宣传的重要手段。现代的企业都已经采用互联网技术，为客户和合作伙伴在网上提供信息服务，并借助互联网敏锐的捕捉商机。 中原工学院信息商务学院作为从事教育行业的学校，更需要建好网站，将其作为对外宣传、服务和交流的载体，配合学校的迅速发展，使网站具有鲜明的行业特色，使更多的企业和个人以及学生们更好的通过网络来了解中原工学院信息商务学院。 网站设计风格：精美与高效兼容。网站页面设计体现中原工学院信息商务学院的校园教育形象，在框架编排、配色以及图片的搭配都恰到好处，具有和谐美并且简洁、大方，使整个网站在保证其功能的前提下给浏览者带来良好的视觉效果和时代的气息。三实现过程3.1首页部分 整个网页使用蓝色作为主基调，配色主要是以蓝色为主。网页的顶部上设置了中原工学院信息商务学院标题以及Logo,黑色字体的厚德博学 求是创新是中原工学院信息商务学院的校训，采用黑色字体更显沉着稳重。实现代码如下：网站首页新闻中心学院概况资料下载 顶部导航效果图如下3.1： 图3.1 通过CSS定义ul进行布局具体CSS代码如下：#headerheight:155px;#topbackground:#06295E; height:120px;#top .innerwidth:900px; margin:0 auto;#logowidth:371px; float:left; margin-top:35px;#bannerwidth:520px; float:right;#banner imgwidth:520px; height:79px; margin-top:20px;#menuheight:35px; background:#6F9CC9;#menu ulheight:35px; width:900px; margin:0 auto; 设置左侧边栏并编写相关链接的代码，主要代码如下：中原工学院信息商务学院网站武汉大学中青在线中国知网中原工学院中国财经信息网侧边栏效果图如图3.2：图3.2 网页底部实现代码如下：版权所有：中原工学院信息商务学院 站长邮箱 网页底部效果图如3.3：图3.3 通过CSS定义布局使网站首页整体带到简洁美观的效果，首页采用了空程专业的蓝色制服图片、学院操场、学校大门广场喷泉图和毕业生奔跑的图片，展示了中原工学院信息商务学院校园的美丽和学生们的意气风发。效果图如3.4。图3.43.2分页部分 学院新闻页面采用链接的方式将页面导航到具体的每一条新闻，首先要制作14则新闻的单独页面，具体的实现代码如下：我院荣获“河南高等教育就业质量十佳示范院校”荣誉称号我院荣获“中国影响力独立学院”荣誉称号我院荣获“人民满意的民办高校”称号我院荣获“全国先进独立学院”荣誉称号我院2015届毕业晚会话题阅读量和毕业生纪念片点击量累计超过63万院团委举办“毕业季，母校情”系列文体娱乐活动欢送我院2015届毕业生青春不逝，放飞梦想2015届毕业晚会我院2015届毕业生毕业典礼暨学位授予仪式隆重举行 学院新闻页面效果图如3.5：图3.5学院风采页面插入了同学们意气风发的校园生活图片，空程专业同学的蓝色制服照与整个网页的蓝色布局相交辉映，整个页面既沉着稳重也大气恢弘。实现代码如下： 学院风采页面效果图如图3.6：图3.6 学院概况网页实现代码如下：学院概况中原工学院信息商务学院成立于2003年4月，是首批经国家教育部批准具有全日制普通本科学历教育办学资格的独立学院。学院由中原工学院和嘉宏控股集团共同举办，实行董事会领导下的院长负责制管理模式，具有独立法人资格。经过十多年的发展，学院办学规模不断扩大，师资队伍建设不断加强，办学条件日益改善，学科专业建设成效显著，办学成效和人才培养质量稳步提高，赢得了上级主管部门和社会各界的一致好评。先后被授予“全国先进独立学院”、“中国民办高等教育优秀院校”、“中国影响力独立学院”、“ 河南省优秀民办学校”、“河南发展（成长）最快的院校”、“河南最具就业竞争力示范院校”、“河南最具综合实力民办高校”、“河南省民办教育办学先进单位”、“河南高等教育质量社会满意十佳院校”、“河南省阳光高考信息平台工作先进单位”、“值得推荐的10张河南教育名片”等荣誉称号。 学院概况效果图如图3.7：图3.7 采用设置链接的方法制作资料下载页面。资料下载页面实现代码如下:本站图片素材打包下载本站图片素材打包下载本站图片素材打包下载 资料下载页面效果图如图3.8：图3.8四、心得体会本次课程设计的激发了我对于网页制作的极大学习兴趣。自己动脑、自己动手，运用网络资源，结和教材，充分调动了学习的自觉性和自主性。三周的努力，创作出沉着稳重风格的网站。总体来说，整个学习的过程充满了乐趣和挑战。通过这次网站制作课程设计我成功制作了自己喜欢的网站，收获颇多，也很有成就感。在这次的网页设计制作课程设计中，我全心全意的投入到制作的乐趣和挑战中，通过不断的学习，遇到问题及时的处理和解决，不断的探索，我对于网页的制作有了全新的认识，同时自己在制作网站方面有了新的突破。 做好一个网页，首先要做好前期准备工作，包括前期策划以及确立网站的风格和基调，然后在寻找符合要求的素材和资料。好的开始是成功的一半，一个好的网站创意和设计可以为你制作的网站增光添彩。做网站之前做好准备工作是十分必要的。市场调查，定位网站目的，策划好网站的主题及功能定位，创意出网站的风格和亮点，确定网页色彩基调。同时也要规划好网站的风格和结构，网站主要内容及板块，各板块的具体内容及功能。同时制作出网站层次结构图、网页版面设计，以及网站策划方案。然后通过PS软件设计和制作出网页的效果图。在网站制作的过程中一定要细心耐心，才能减少代码的编写过程中的错误，避免一些不必要的麻烦。代码的编写是有一定的层次结构的，有规律可循，所以良好的操作习惯在这时就体现出来了。所以在以后的学习和制作网站的过程中一定要养成良好的操作习惯，这样会使自己做网站的效率提升很多。在开始做网站的时候我参考了几个高校的网站，我也从中借鉴了一些方面。每看到一些东西我都会先想一下这个效果是如何实现、这个定位是如何做到的。在图书馆查阅资料的时候刚好看到了一本CSS设计彻底研究，里面有一章就专门讲到了导航菜单制作，而且有几种实现方式。选择了自己要使用的效果，按照书上的代码，利用Dreamweaver进行属性的设置修改。对书上提供的代码进行修改，使之适应自己的网站搭配。在制作的过程中也遇到了不少的问题，但是大多还都解决了。看到别人网站做的好的地方自己做的时候却怎么也做不出来。但是通过本次课程设计，对于网页制作我确实有了很大的进步。在首页插入音乐文件，一直无法正常播放，但是一直不想放弃，经过耐心的修改还是成功的加入了音乐文件。了关于网站的制作我还有很多需要学习和完善的地方，希望自己可以活到老学到老，紧跟时代的进步和发展。五、参考资料新一代ASP网络编程入门与实践徐宁 清华大学出版社精通JAVASCRIPT动态网页编程王俊杰 人民邮电出版社 ASP网络编程学习笔记柯华坤电子工业出版社 Dreamweaver 8+ASP动态网页制作实用教程 陈建伟清华大学出版社ASP+Access+Dreamweaver 动态网站开发从入门到实践陆黎明机械工业出版社 新手学ASP动态网页开发孔鹏 电子工业出版社CSS设计彻底研究六、附录1、网站效果图网站首页效果图： 整个网页使用蓝色作为主基调，配色主要是以蓝色为主。网页的顶部上设置了中原工学院信息商务学院标题以及Logo,黑色字体