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

目 录 1、设计任务与要求 1 1.1课设目的 1 1.2设计内容 1 1.3具体要求 1 1.4设计环境 2 2、设计过程 1 2.1效果图的制作 1 2.1.1首页的制作 1 2.1.2二级子网页的制作 3 2.1.3三级子网页的制作 11 2.2切片的制作 15 2.3 Dreamweaver的制作 16 3、调试过程 17 3.1运行效果 17 3.2出现的问题 18 3.3解决方法 18 4、课设总结 18 5、参考资料 21 1、设计任务与要求 1.1课设目的 1、复习巩固网站设计与制作的基础知识：HTML、CSS和JS，进一步加深对Photoshop制作网页效果图、Dreamweaver布局网页等技术的理解和掌握，培养学生策划和制作商业网站的实践能力。 2、训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、音视频资料、flash动画和网页特效等，提高学生的美工设计能力。 3、课程设计为学生提供了一个既动手又动脑，独立实践的机会，将课本上的理论知识和实际有机的结合起来，锻炼学生的分析解决实际问题的能力。 1.2设计内容 针对目前互联网上的网站制作背景和需求，策划、设计与制作一个完整的商业网站。 1、图书销售网站；2、学校网站；3、旅游网站；4、摄影网站；5、公司宣传网站；6、驾校网站；7、精品课程网站；8、婚庆网站；9、团购网站；10、政府网站………… 1.3具体要求 1、动手制作网页之前： 必须认真做好网站的需求分析，包括市场调查，定位网站目的，策划好网站的主题及功能定位，创意出网站的风格和亮点，确定网页色彩基调。 规划好网站的风格和结构，网站主要内容及板块，各板块的具体内容及功能。分析出“网站层次结构图”、 “网页版面设计”，以及“网站策划方案”。 2、创建完善的目录结构： 站点文件夹采用英文单词命名， 站点文件夹中所包含文件夹：images （存放图片文件），flash（存放动画文件），css（存放CSS样式表文件），js（存放JS脚本文件），other（存放其它文件），源文件 （存放自己设计的PS源文件、Flash源文件），首页命名为index.html，其余文件全部用英文命名。 3、制作网页前，收集好所需的文字资料、图像资料、网页特效。用Photoshop制作和处理网页效果图、用Flash制作网页所需的动画。网页效果图和动画为原创（保存有源文件），主页标题图片（动画）必须为原创。 4、所创建的网站至少包括8个以上页面，分为三层，第一层为首页，第二层为4个二级子页，第三层为2-3个内容页。网页中必须要用到CSS以及DIV技术实现网页元素的修饰及布局。各个页面根据需要插入合适的Falsh动画。所有页面要求内容充实、布局合理、颜色搭配协调、美观大方。各个页面之间导航清晰、链接准确无误。 5、网页的版面尺寸应用符合网页设计的规范，网站中所有文件、文件夹的命名应规范，尽量做到字母数量少，见名知意、容易理解。 6、课设过程中要充分发挥主观能动性、独立思考、努力钻研、勤于实践、勇于创新。在设计过程中，要严格要求自己，树立严密、严谨的科学态度，必须按时、保质、保量完成课设任务。要求独立完成规定的课设内容，不得弄虚作假，不准抄袭或拷贝他人的网页或其他内容。课设期间，严格遵守学校的规章制度，不得迟到、早退、旷课。缺课节数达三分之一以上者，课设成绩按不及格处理。 1.4设计环境 WindowsXP操作系统 Photoshop、Dreamweaver 2、设计过程 2.1效果图的制作 2.1.1首页的制作 1）新建画布，并填充背景色。在中间部位绘制矩形，填充下载素材，并拉入素材图片，添加蒙版，如图2-1所示。 图2-1背景的制作 2）对网上下载的分层PSD素材进行智能图像转换，如图2-2所示，选中需要修改的图层，进行修改，并删除不需要的图层，只留下LOGO需要的部分，达到需要效果，如图2-3所示，进行保存。接着，将LOGO拖入首页需要的位置。 图2-2 LOGO素材原图 图2-3 LOGO制作完成 3）从网上下载了8款导航，转化为只能模式，如图2-4所示，选中自己需要的一个，将其他删除。将导航上的内容改为自己的导航需要的内容。如图2-5所示，保存并拖入首页中需要的位置。 图2-4 导航素材原图 图2-5 导航制作完成 4）将其他素材像上面的方式一样，制作完成并拖入相应合适的位置，并对页面进行布局，如图2-6所示。 5)添加需要的文字，以及底部的网页信息。如图2-7所示，首页制作完成并保存。 图2-6 素材排版 图2-7 首页完成 2.