1、1网站设计与管理课程设计报告课程:网站设计与管理学号:1354652466 姓名: wanghaiyan 班级: dgbg 教师: nishishei 江苏师范大学计算机科学与技术学院2目 录网站设计与管理实训任务书 3(一)课程设计名称 5(二)课程设计时间 5(三) 课程设计目的 .5(四) 网站设计材料准备 .5(五) 网站设计要求 .6(六) 网站开发工具的介绍 .6(七) 网站设计主题及其意义 .8(八) 网站设计理念 .8(九) 站点的规划 .9(十) 网站页面主要链接图 10(十一) 网站栏目介绍 11(十二) 网站设计过程 131. 网页包括的元素 132. 素材的选择与处理
2、13(1) 图片素材: .13(2) 音视频素材: .133. 页面的设计 13(1) 主页页面设计 .13(2)个人简介页面设计 16(3) 个人爱好页面设计 .19(4)个人日志页面设计 20(5)文学天地页面设计 23(6) 我的班级页面设计 .25(7) 时事新闻页面设计 .28(8) 时事新闻页面设计 .31(十四) 课程设计心得与体会 33(十五) 参考文献 333网站设计与管理实训任务书一、概述:要求设计并制作一个表达某个主题的个人网站,通过网站的制作,综合运用本课程各单元所学的知识。网站的内容不能是一些素材如图片、音乐等的堆积,必须有鲜明的主题。可以从网上下载部分资料,但不能超
3、过整个内容的 30%,更不要指望从网上下一个完整的网站应付老师。总的页数应超过 8 页(一个包含主题内容的 html 文件算一页)。请同学们注意不要下载相同的资料,如果出现网页内容雷同,双方都要扣分,严重的必须重做。二、网站内容:直接使用 HTML 代码编制网页、 个人静态网页制作、利用 Dreamweaver 进行网页制作、网页图像制作与处理、多媒体动态网页制作,建成完整的个人网站。整个网站要信息分类合理,导航清晰。要求必须有自己创作的内容,这些原创内容可以是文字、图片、动画等。三、版面及格式:l、要求图文并茂,颜色搭配合理,但是图片及声音文件不要太大。如果能加入自己创作的动态元素(如 Fl
4、ash,Gif 动画等)将获得加分。希望充分发挥自己的创作能力。2、要求每个网页都使用表格或框架布局。3、要求网页中实现滚动字幕效果和计数器,在网页中添加横幅广告条等。4、导航设计简洁明了,不能有“死链接”,要保证能够在网络上浏览。5、自创内容越多越好,得分越高。四、递交方式:1、以自己的学号建一个文件夹作为个人网站的站点,上交时间为 10 周末。2、所做网页的首页文件名必须为 index.html。 3、所有文件名和目录名全部使用英文字母(最好用小写)和数字,不得使用汉字或全角符号,否则,网络将出现死链接。 4、递交时必须把网页中所有用到的图片 、声音、动画等都一起上传到服务器。5、建议将网
5、页中的素材分类,建立不同的子目录存放。五、网页评分标准:整个网页的评分强调“自己的创意”,有自己鲜明的个性、观点,得分较高。41、 自行设计布局模式,创建一个新网站,设计的主页中至少要有 3 个栏目,主页文件名为:index.html 。2、 网页布局合理,构思新颖、界面美观、层次清楚、色彩协调,具有一定的艺术性和趣味性。网页中创建超级链接,建立电子邮箱地址的超链接,使用书签,网页中要求有文字、图片、声音、动画等素材, 技术含量(使用了各种效果、技术等)。3、 创建表单使网页具有一定的交互性。4、 在网页中实现滚动字幕效果和计数器,在网页中添加横幅广告条。5、 在主页中嵌入一个动态的 FLAS
6、H 动画,FLASH 动画要求“以自己的姓名为内容制作文字动画”。6、 其他内容如友情链接、相关资料等。7、 实训报告。六、网页制作特别注意事项: 1、网页文件名最好全部用英文字母或数字(不能包含汉字);2、整理图片和其他素材;3、在与网页主文件( index.htm)同级的目录中建立子目录 image(图片)、wave(声音)、 等,将取得的素材按类保存好,在制作网页(即编辑 HTM文件)时,必须从这些目录中插入素材,以保证显示正确,不能从其他目录插入,提示另外保存图片时,不要改变保存目录,直接按确定 即可。同学们要改变那种在编辑网页时到处找图片,找到了就往 HTML 文件中插的坏习惯(也不
7、管这个文件在哪里);4、作好笔记将对后期调试非常有利,从开始规划起就记录目录名、文件名的分配,以便调试时节省时间。5(一)、课程设计名称网站设计与管理(二)、课程设计时间2014 年 11 月 3 日至 2014 年 11 月 7 日(三)、课程设计目的1. 通过综合实训进一步巩固,深化和加强学生的理论知识于 专业技能。(1) 掌握规划网站的内容结构,目录结构,链接结构的方法。(2) 熟练掌握网页制作软件 Dreamweaver8 和基本操作和使用能。(3) 掌握页面的整体控制和头部内容设置的方法。(4) 熟练掌握网页页面布局的各种方法。(5) 熟练掌握在网页中输入,设置标题和正文文字的方法。
8、(6) 熟练掌握在网页中插入图像,Flash 动画和背景音乐的方法。(7) 熟练建立各种形式的超级链接的方法。(8) 掌握表单网页制作方法。(9) 掌握网页特效制作方法。(10)掌握网站测试的方法。2. 训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集6所需的文字资料、图像资料、Flash 动画和网页特效等。3. 培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。4. 培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。(四)、网站设计材料准备网站材料主要在网站上搜集
9、所要的网页信息,包括图片、 文字、相关的资料。同时,查询相关的书籍、百度和素材光盘等方式收集所需的文字资料,图像资料,Flash 动画和网页特效等,并且自己动手制作 Firework 和 Flash 素材用以得来更加具有说服力的页面。想要做好自己的网站,就要尽量搜集材料,搜集材料越多,以后制作网站就越容易。精选自己收集的材料,作为自己制作网页的素材,这样就可以做好一个好的网站。(五)、网站设计要求l、要求图文并茂,颜色搭配合理,但是图片及声音文件不要太大。如果能加入自己创作的动态元素(如 Flash,Gif 动画等)将获得加分。希望充分发挥自己的创作能力。2、要求每个网页都使用表格或框架布局。
10、3、要求网页中实现滚动字幕效果和计数器,在网页中添加横幅广告条等。4、导航设计简洁明了,不能有“死链接”,要保证能够在网络上浏览。5、自创内容越多越好,得分越高。7(六)、网站开发工具的介绍Adobe Dreamweaver,简称“DW”,中文名称 “梦想编织者“,是美国 MACROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,DW 是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Adobe Dreamweaver 使用所见即所得的接口,亦有 HTML(标准通用标记语言下的一个应用)编辑的
11、功能。它有 Mac 和 Windows 系统的版本。随 Macromedia 被 Adobe 收购后,Adobe 也开始计划开发Linux 版本的 Dreamweaver 了。 Dreamweaver 自 MX 版本开始,使用了 Opera 的排版引擎“Presto“ 作为网页预览。Adobe Fireworks 是 Adobe 推出的一款网页作图软件,软件可以加速 Web 设计与开发, 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks 不仅具备编辑矢量图形与位图图像的灵活性, 还提供了一个预先构建资源的公用库, 并可与 Adobe Photosh
12、op、 Adobe Illustrator、 Adobe Dreamweaver 和 Adobe Flash 软件省时集成。 在 Fireworks 中将设计迅速转变为模型, 或利用来自 Illustrator、Photoshop 和Flash 的其它资源。 然后直接置入 Dreamweaver 中轻松地进行开发与部署。Adobe Flash(原称 Macromedia Flash,简称 Flash;前身8FutureSplash),是美国 Macromedia 公司(现在已被 Adobe 公司收购)所设计的一种二维动画软件。通常包括 Adobe Flash,用于设计和编辑 Flash 文档,
13、以及 Adobe Flash Player,用于播放 Flash文档。Adobe Flash Player 能够播放简短快速的多媒体动画、交互式动画以及飞行标志等各类图像文件,广泛应用于操作系统中的 IE浏览器和一些移动设备上。(七)、网站设计主题及其意义我的网站共有 6 个主页面:首页、个人爱好、个人简介、文学天地、时事新闻、我的班级、个人日志和给我留言。每一个页面用充满活力的的背景,以保证网站统一的鲜活,充实。如下图:网站整体色为浅色,突出主题,颜色没有过多,过杂,用以避免给人一种杂乱的感觉。版面设计十分灵活,根据各部分内容的不同适当的自由设计。网页布局主要用框架和表格,用框架定位内容的大
14、体结构,再用表格具体定位。位置的设计也是重要的一个部分,根据具体内容决定大体结构,相同的风格调用 CSS 设计一个样式,以保证随时、准确的调用。另外,为了网页布局的协调,我加入适当的 Flash 动态图Index9片,用以达到更好的浏览效果。(八)、网站设计理念我首先做一个小计划,准备在主页上告诉人家什么?比如介绍七个方面:个人爱好、个人简介、文学天地、时事新闻、我的班级、个人日志和给我留言。因此我就先起一个总目录 mywebsite,来放我的所有文件,然后再在这个目录建立三个子目录:img,flash,Scripts 的文件名 。这里要注意的一点是文件名字你可以随意命名,但是最好全部小写,因
15、为有的主机要认大小写。然后将我的材料复制进相应的子目录。比如我要在我的主页里展示我的靓照,那就将我的照片扫描成 JPG 格式的文件,放在 myself 的目录下的 img 里。要注意,网上只能使用 JPG 和 GIF 两种图像格式,其他诸如 BMP和 TIF 等很通用的格式都不能用在网上,因为它们太大了,但你可以用图像软件进行转换,比如 Office 97 的照片编辑器。把你准备在你主页上出现的图像放进相应的目录里后,你就可以开始制作了(九)、站点的规划素材、风格、模版都设计好以后,下一步就是具体的制作网页。制作网站时,首先要做到站点的规划,建立一个本地站点“mywebsite”,建立的各个页
16、面都应该放在本地站点中,在网页制10作时所需的各个元素都进行统一的管理,建立统一的文件夹放同一类型的文件,我在制作时建立了“img”文件夹存放图片专用的,网页中的 flashy 也存放在相应的文件夹下,做到有条理,我设计的网站首页和站点管理如下图:(10)、网站页面主要链接图1、网站主题 建立站点我的主页11我的网站的主旨在于从各个方面全面的介绍我自己,展示自己,包括我的个人资料、个人爱好和我的班级等。另外,网站里还包括文学天地和时事新闻,建立一个展示自我形象的平台。同时,网站里的每一个网页都有不同的风格,每一个网页的主题色彩都是浅色,用以展示自己性格的效果。最重要的是做出自己的风格,给浏览者
17、好的欣赏感受。 2、网站材料 主要在网站上搜集所要的网页信息,包括图片、文字、相关的新闻。同时,查询相关的书籍、百度和素材光盘等方式收集所需的文字资料,图象资料,flash 动画和网页特效等,用以得来更加具有说服力的页面。要想做好自己的网站,能够给浏览者好的欣赏感受,就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。精选自己收集的材料,作为自己制作网页的素材,这样就可以做好一个好的网站。3、网站规划 我的网站共有 8 个主页面:首页、个人简介、个人爱好、时事新闻、文学天地、给我留言和我的班级。每一个页面用不同的背景图片,以保证网站的页面充满活力。如下图:(十一)、网站栏目介绍网页结构12
18、 我的主页:介绍我的主要网页信息,主要连接,主要内容,让大家对我的网站内容一目了然。 个人简介:介绍版主的一些基本信息和我的个人登陆界面,并提供了一些友情连接,插入了一个很有趣的 Flash,希望各位访客能够认识我。 个人爱好:介绍了我的个人喜好,并插入了一个 Flash,希望大家能够进一步了解我。 个人日志:在这里我设置了一个登陆界面,和一个欢迎光临的 Flash,希望朋友们根据自己的喜好选择登陆。 文学天地:在这个板块可以看到一幅有关努力的图片和文章,还将一些我认为很不错的书籍介绍给大家。 我的班级:里面是我对整个班级的介绍,有同学,班主任,专业等的介绍。 时事新闻:里面有一些视频,微博,
19、新闻等的时事要点,大家可以根据自13己的喜欢点击选择观看。 给我留言:这是每位访客针对我的网站情况给我留言,这些留言会直接保存到数据库里面,并且能够轻松的读取。 查看时间:各位访客可以通过页面查看时间: 链接百度等:如果访客想在互联网上查找东西,可以直接点击这里。(十二)、网站设计过程1. 网页包括的元素我的网站里主要有图片,文档,Flash,表单,表格,按钮,文本域等等。2.素材的选择与处理图片采用的格式主要是 gif ,Flash 主要是 swf, 音乐主要是div 格式。(1) 图片素材:我的图片全部都是按照要求的 gif 格式。(2) 音视频素材:音频,视频主要是 div,Flash
20、等格式。3. 页面的设计(1) 主页面设计(index.html)代码部分:14我的主页背景图片:.tu1 background-attachment: scroll;background-image: url(img/ni.jpg);background-repeat: no-repeat;设置字:.zi1 font-family: Arial, Helvetica, sans-serif;color: #00F;背景图片:.tu3 background-attachment: scroll;background-image: url(img/jik.jpg);background-repe
21、at: no-repeat;滑动文字:欢迎光临孙爱华的个人网页!编辑页面:设置网页主题:我的主页个人简介个人爱好个人日志文学天地我的班级16时事新闻给我留言人生哲理:设置版权:版权所有江苏师范大学科文学院 孙爱华 主页图片展示:(2) 个人简介页面设计代码部分:个人简介CSS 设置背景、文字:17.tu background-attachment: scroll;background-image: url(img/fbf.gif);background-repeat: no-repeat;background-repeat: no-repeat;表单、文本域、按钮设置:用户名:密 码: 18插
22、入 Flash:友情链接:天猫 19百度 前程无忧个人介绍的编制:我的简介姓名:孙爱华星座: 摩 羯生日: 6-23血型: A网名:飘渺网页图片:(3) 个人爱好页面设计代码部分:个人爱好20图片编辑:.sd background-attachment: scroll;background-image: url(img/fsdv.jpg);background-repeat: no-repeat;爱好编辑:最爱吃肉最想呆的地方是家最喜欢的运动是羽毛球制作返回链接:td align=“center“返回图片展示:21(4) 个人日志页面设计代码部分:个人日志CSS 背景文字的设置:.ASF ba
23、ckground-image: url(img/LUfki.jpg);.的事 background-attachment: scroll;background-image: url(img/LUfki.jpg);background-repeat: no-repeat;日志登陆界面的设置:个人日22志日志登录:密 码:友情链接的设置:友情链接:QQ 空间 微博23Flash 的设置:文学天地24CSS 文字及图片的设置:.啊 background-image: url(img/yk.jpg);background-repeat: no-repeat;.饿 background-image: u
24、rl(img/hfjj.jpg);background-repeat: no-repeat;.如果 background-image: url(img/dvfvf.jpg);background-repeat: no-repeat;文字内容:没有狂暴的风沙,就没有壮观的沙漠;没有汹涌的波浪,就没有没有宏伟的大海;没有努力地奋斗,就没有绚丽的人生。 常言道不经历风雨怎能看见彩虹,在我们生活中也同样如此不经历奋斗怎能尝到25快乐;面对困难,我们不能蜷缩在墙角瑟瑟发抖,而应该站起来,拍拍身上的泥土,努力地奋斗。 世上无难事,只怕有心人。风雨之后,便是彩虹;付出之后,便是收获;奋斗之后,便是绚丽的人生
25、!现在就行动起来吧,不要再犹豫,别到了白发鬓鬓时,才垂头低叹,低叹这逝去的青春! 推荐书籍:推荐书籍:1、张爱玲:倾城之恋2、马格利特杜拉斯:情人3、考林麦卡洛:荆棘鸟4、村上春树:挪威的森林5、渡边淳一:失乐园男人这东西友情链接:友情链接:百度新浪26图片展示:(6) 我的班级页面设计代码部分:我的班级CSS 设置:body background-attachment: scroll;background-image: url(img/c.jpg);background-repeat: no-repeat;background-position: center center;网页内容设置:我
26、的班级Flash 的设置:28天气预报:徐州天气:夜间 多云转阴 明天 晴 温度适宜焦点链接:今日焦点: 广州红会救命钱存银行吃利息图片设计:29(7) 时事新闻页面设计代码设计:时事新闻CSS 设计:.tu background-image: url(img/dvfvf.jpg);background-repeat: no-repeat;链接视频:视频:日外相出尔反尔 质疑中日四点共识约束力视频:独家!160 秒带你看遍珠海航展飞行表演陈志龙:资本市场不能成为人性堕30落的大阴沟1919 年外蒙古撤治始末 龚鹏程:以儒家思路开太平 链接新闻: target=“_blank“习近平与奥巴马瀛台谈话部分内容首度曝光访大洋洲李克强:将向东盟提供100 亿美元优惠贷款图片展示: