网站设计课程设计报告

《网站设计课程设计报告》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、目录1、设计任务与要求11.1课设目的11.2设计内容11.3具体要求11.4设计环境22、设计过程12.1效果图的制作12.1.1首页的制作12.1.2二级子网页的制作32.1.3三级子网页的制作112.2切片的制作152.3Dreamweaver的制作163、调试过程173.1运行效果173.2出现的问题183.3解决方法184、课设总结185、参考资料211、设计任务与要求1.1课设目的1、复习巩固网站设计与制作的基础知识：HTML、CSS和JS，进一步加深对Photoshop制作网页效果图、Dreamweaver布局网页等技术的理解和掌握，培养学生策划和

2、制作商业网站的实践能力。2、训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、音视频资料、flash动画和网页特效等，提高学生的美工设计能力。3、课程设计为学生提供了一个既动手又动脑，独立实践的机会，将课本上的理论知识和实际有机的结合起来，锻炼学生的分析解决实际问题的能力。1.2设计内容针对目前互联网上的网站制作背景和需求，策划、设计与制作一个完整的商业网站。1、图书销售网站；2、学校网站；3、旅游网站；4、摄影网站；5、公司宣传网站；6、驾校网站；7、精品课程网站；8、婚庆网站

3、；9、团购网站；10、政府网站…………1.3具体要求1、动手制作网页之前：必须认真做好网站的需求分析，包括市场调查，定位网站目的，策划好网站的主题及功能定位，创意出网站的风格和亮点，确定网页色彩基调。规划好网站的风格和结构，网站主要内容及板块，各板块的具体内容及功能。分析出“网站层次结构图”、“网页版面设计”，以及“网站策划方案”。2、创建完善的目录结构：站点文件夹采用英文单词命名，站点文件夹中所包含文件夹：images（存放图片文件），flash（存放动画文件），css（存放CSS样式表文件），js（存放JS脚本文件），other（存放其它文件），源文件20（

4、存放自己设计的PS源文件、Flash源文件），首页命名为index.html，其余文件全部用英文命名。3、制作网页前，收集好所需的文字资料、图像资料、网页特效。用Photoshop制作和处理网页效果图、用Flash制作网页所需的动画。网页效果图和动画为原创（保存有源文件），主页标题图片（动画）必须为原创。4、所创建的网站至少包括8个以上页面，分为三层，第一层为首页，第二层为4个二级子页，第三层为2-3个内容页。网页中必须要用到CSS以及DIV技术实现网页元素的修饰及布局。各个页面根据需要插入合适的Falsh动画。所有页面要求内容充实、布局合理、颜色搭配协调、美观

5、大方。各个页面之间导航清晰、链接准确无误。5、网页的版面尺寸应用符合网页设计的规范，网站中所有文件、文件夹的命名应规范，尽量做到字母数量少，见名知意、容易理解。6、课设过程中要充分发挥主观能动性、独立思考、努力钻研、勤于实践、勇于创新。在设计过程中，要严格要求自己，树立严密、严谨的科学态度，必须按时、保质、保量完成课设任务。要求独立完成规定的课设内容，不得弄虚作假，不准抄袭或拷贝他人的网页或其他内容。课设期间，严格遵守学校的规章制度，不得迟到、早退、旷课。缺课节数达三分之一以上者，课设成绩按不及格处理。1.4设计环境WindowsXP操作系统Photoshop、

6、Dreamweaver202、设计过程2.1效果图的制作2.1.1首页的制作1）新建画布，并填充背景色。在中间部位绘制矩形，填充下载素材，并拉入素材图片，添加蒙版，如图2-1所示。图2-1背景的制作2）对网上下载的分层PSD素材进行智能图像转换，如图2-2所示，选中需要修改的图层，进行修改，并删除不需要的图层，只留下LOGO需要的部分，达到需要效果，如图2-3所示，进行保存。接着，将LOGO拖入首页需要的位置。20图2-2LOGO素材原图图2-3LOGO制作完成3）从网上下载了8款导航，转化为只能模式，如图2-4所示，选中自己需要的一个，将其他删除。将导航上的内

7、容改为自己的导航需要的内容。如图2-5所示，保存并拖入首页中需要的位置。图2-4导航素材原图图2-5导航制作完成204）将其他素材像上面的方式一样，制作完成并拖入相应合适的位置，并对页面进行布局，如图2-6所示。5)添加需要的文字，以及底部的网页信息。如图2-7所示，首页制作完成并保存。图2-6素材排版图2-7首页完成2.1.2二级子网页的制作1）新建新的画布大小，填充背景，并将首页中的可用素材拖入，然后进行大致的布局，如图2-8所示。202）从网上寻找一张风格与网页风格统一的图片，加入台头处。所有二级页面均采用此效果，如图2-9所示，以保持页面的整齐和一致性。

8、图2-8素材利用图2-9