网站制作课程设计系别：信息技术系专业：班级：姓名：学号：指导老师：李枫完成日期：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;