个人博客设计说明书.docx
- 文档编号:18547231
- 上传时间:2023-08-19
- 格式:DOCX
- 页数:12
- 大小:63.96KB
个人博客设计说明书.docx
《个人博客设计说明书.docx》由会员分享,可在线阅读,更多相关《个人博客设计说明书.docx(12页珍藏版)》请在冰点文库上搜索。
个人博客设计说明书
攀枝花学院网页设计课程设计
课程设计报告书
网站主题:
个人博客
学生姓名:
卢涛
学生学号:
院(系):
机械工程学院
年级专业:
2010级工业设计
指导教师:
温燕讲师
二〇一三年十二月
本科课程设计(论文)任务书
题 目
个人博客设计
1、课程设计(论文)应达到的目的:
通过该实训综合应用本学期所学的网页制作知识,全面帮助学生建立对网站的认知;建立网页制作与网站设计的基本思想;学会网页制作和网站设计的基本方法,掌握网页制作与网站设计相关软件的使用方法,包括AdobePhotoshop,MacromediaDreamWeaverMX,MacromediaFlashMX,MacromediaFireWorksMX等;亲自实践网页制作与网站设计的基本方法。
能够运用网页制作与网站设计的基本方法制作作品;解决一些实际应用的问题并以此为基础进一步扩展到相关的学科上;通过本课程提高网页的审美意识,注重日常经验积累。
2、课程设计(论文)的内容和要求(包括原始数据、技术要求、工作要求等):
(一)课程设计报告主要内容(见附件)
内容:
自定义主题、自选素材进行站点设计.
对于本课程设计,应该包括以下几个主要部分:
1.确定的网站主题应大小适中、内容健康、具有时代气息;网站提供的信息应与网站主题相符合,主题突出、内容丰富;
2各页面设计合理、美观,有创意,适用于各种显示器的分辨率和颜色;
3.网站结构应层次分明,风格统一,网站结构不少于3层,总网页文件数不少于6个,各个页面之间的链接要合理有效。
(文件名称使用规范:
首页一律使用index.htm或index.html,站点内文件夹和文件不用中文命名)
4.作品中不允许出现广告、链接错误、图片不显示、网页打开超慢等错误。
5.网站中需要运用表格、框架、模版、行为等技术;必须包含一页类似留言板功能的表单技术;使用一个flash动画;利用CSS来定义网站的样式表;
6.站点设计合理、管理有序、无多余文件和文件夹、大小合适;作品总文件大小不超过5MB,图片网站不超过10MB。
7.对课程设计进行总结,撰写课程设计报告;
3、对课程设计(论文)成果的要求〔包括图表、实物等硬件要求〕
1.每个学员必须独立完成课程设计报告;
2.课程设计报告书写规范、文字通顺、图表清晰、数据完整、结论明确;
3.课程设计报告后附参考文献;
4.要求课程设计报告文字、有关网页打印,装订成册。
5.电子文档统一交班长处并刻录光盘1张,作品全部放在由学号,姓名命名的文件夹中
本科课程设计(论文)任务书
4、主要参考文献
1、《静态网页制作与素材加工处理》乔文彪编写山西工程职业技术学院
2、《多媒体技术基础》赵子江主编机械工业出版社
3、《完美网页设计》[美]JasonBeaird熊平译
5、课程设计(论文)工作进度计划:
序号
设计(论文)工作进度
日期(起止周数)
1
主题确定
2
资料收集整理
3
整体框架及风格确定
4
软件制作
5
测试
6
撰写设计报告
指导教师(签字)
日期
年月日
教研室意见:
年月日
学生(签字):
接受任务时间:
年月日
注:
任务书由指导教师填写。
摘要………………………………………………………………………………………1
1设计前期准备…………………………………………………………2
1.1开发工具介绍………………………………………………………………………2
1.1.1Dreameaver…………………………………………………………………………21.1.2Flash…………………………………………………………………………2
1.2网站主题和风格……………………………………………………………………………3
1.2.1网站的选题……………………………………………………………………………3
1.2.2网站说明\网站主要栏目介绍…………………………………………………………3
1.3网站布局……………………………………………………………………………………3
2网站实施步骤………………………………………………………………………………4
2.1首页制作…………………………………………………………………………4
2.2就是我网页制作…………………………………………………………………5
2.3在大学网页制作…………………………………………………………………………5
2.4注册登录网页制作…………………………………………………………………………5
2.5舌尖上的你网页制作…………………………………………………………5
2.6行者无疆网页制作…………………………………………………6
3心得体会……………………………………………………………………………………7
参考文献……………………………………………………………………………9
附页…………………………………………………………………………………………10
摘要
随着社会的发展,网络已经逐渐德成为人类日常生活中不可分割的一部分。
现在人们越来越追求潮流,而一个时尚的潮人就需要拥有一个能彰显自己个性的个人博客。
个人博客可以增加自己在朋友圈的知名度和人气,一个好的个人博客更可以增加自己的粉丝。
通过一学期的网页设计理论和实践学习,我设计一个关于自己的个人博客。
本网站属于小型个人网站,其中介绍了自己的过去生活,对生活的向往。
个人博客中还有个人的照片,影集和好友留言功能。
此次课程设计主要运用的开发工具为Dreameaver和Flash以及photoshop。
只要是面向工业设计初学,便于与工业设计学习者一起探讨工业设计有关课程的知识、技术、经验和看法。
这是对自己在一学期内该学习科目以来的成果的检查,这是一个自我审视的过程:
检测我该学期的学习成果,衡量一期以来的收获,更为重要的是扬长避短,发现自己的问题与缺点,使自己及时改正,发觉自身的优点和长处并坚持发扬,有利于我以后的学习和发展。
1设计前期准备
1.1开发工具介绍
主要的使用工具有:
Dreanweavercs5、Photoshop、Flash而在此次设计中主要用到Dreameaver设置首页,编辑功能,排版功能,设计模版功能,还要能够正确的创建超链接和插入文本。
我在模板中插入了Flash文件,在自己的影集中也插入了自己制作的Flash。
Photoshop主要是辅助网页排版设计的,对网页中的图片进行细处理。
1.1.1Dreameaver
DreamweaverCS5是由Adobe公司在并购Macromedia之后推出的最新版本,它是一款专业的Web站点开发软件,可用于Web站点、Web页和Web应用程序的设计、编码和开发工作。
将各种网页制作的相关工具紧密联系起来是Dreamweaver系列的一大亮点,同时良好的插件体系,使DreamweaverCS5可通过第三方插件进行补充。
另外,DreamweaverCS5还为开发人员提供了动态语言支持与丰富的模板。
DreamweaverCS5在功能强大与易用性之间具有很好的平衡,使用DreamweaverCS5可以有效地提高Web开发的工作效率。
所以在这次网站中主要设计工具就是DreamweaverCS5。
1.1.2Flash
Flash是FlashMacromedia公司开发的动画编辑工具。
1997年推出业内最先进的互动内容创作环境,用于交互网站、交互数字体验和高冲击力的移动内容的创作。
Flash由macromedia公司推出的交互式矢量图和Web动画的标准。
网页设计者使用Flash创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。
其中flash的档案格式是“swf”这是一个完整的影片档,无法被编辑。
有时会被念做“swiff”。
Swf在发布时可以选择保护功能,如果没有选择,很容易被别人输入到他的原始档中使用。
然而保护功能依然阻挡不了为数众多的破解软件,有不少闪客专门以此来学习别人的程序代码和设计方式。
“fla”是Flash的原始档,只能用MacromediaFlash打开编辑或AdobeFlashCS3及更高版本打开编辑。
Actionscript是一种程序语言的简单文本文件.FLASH档案能够直接包含Actionscript,但是也可以把它存成AS档做为外部连结档案(如定义ActionScript类则必须在写在as文件里,再通过import加入类),以方便共同工作和更进阶的程序修改。
1.2网站主题和风格
1.2.1网站的选题
一个好的网站应该有自己的风格,要体现自己的风格就要有一个明确的主题。
这里我制作的网站是“个人博客”,以展示自己为主,通过自己设计的网站展现自己的个性。
在网站中我选择了绿色景物为主体背景,网站看上去就给人清新的感觉。
这样与网站的内容相符合。
1.2.2网站说明\网站主要栏目介绍
网站的主页中我留下了个人的简单介绍,主要简单介绍了自己过去的经历。
在首页中的主要栏目有:
主页、日志、相册、影集、留言板。
而各部分是相互链接在一起的。
网站的布局是在模板中运用嵌套表格的方法,后期子网页的制作和链接都是通过模板的功能来实现的。
网站的制作过程还用到了css样式、APDiv、表单等功能。
图片的是自己用素材通过ps处理得到的,flash是自己制作的简单动画。
通过以上手段制作了一个简单的个人博客网站。
1.3网站布局
网站设计功能模块图
l
2网站实施步骤
2.1模板制作
首先要明确自己的制作目标,自己要什么样的风格,要达到什么样的效果。
然后根据需要收集素材,可能大部分素材不能直接达到自己的设计目的,这就需要运用辅助软件对素材进行细处理。
1、选好自己需要的素材在ps中进行修改、切割将需要的部分导出成图片,并将图片保存到自己规定的images文件夹中,这时修改的图片是展示页面主体的风格。
2、在dreamweaver建立好站点后,选择新建css样式并保存到相应文件夹,然后选择新建空模板,并附加先前新建的css样式。
3、利用表格和嵌套表格对模板页进行布局,将格局布置成自己需要的样式。
4、在表格的第一行插入先前处理好的图片,表格的大小要调整到和图片相同大小。
在表格的左侧插入一个自己制作的flash,同样将大小调整到与表格一致。
在表格的最底行写上版权信息,调整字体大小、颜色,并将信息居中放置。
5、制作一个开场动画:
新建一个html网页,命名为Index1.html页面背景设为黑色,插入一个宽为100%的1行1列的表格,将高度调制合适位置;插入开场flash动画kaichang.swf,调至合适大小居中、顶端对其;插入APDiv为apdiv1,其大小与表格相同,给apdiv1添加“转到URL”行为:
当时表点击apdiv1时网站转到Index.html页面。
保存并预览。
这时网页的主体布局已经完成了,然后需要在其他部分创建可编辑区域。
选中先前没有进行编辑的表格,然后选择插入模板对象中的可编辑区域,保存模板。
6、模板制作完成。
2.2主页制作
1、新建,模板中的页,创建。
2、这时的网页和先前的模板页相同,图片和文字区域都是不可编辑的,只能在可编辑区域进行编辑。
3、选择一张自己喜欢的照片插入到可编辑区域的表格中,在写上自己的个人简介。
在文字的格式改变上用css实现,改变或创建新的css样式要及时的保存。
4、保存为grzl,主页制作完成。
2.3影集网页制作
1、同样的,新建模板中的页,创建。
2、在可编辑区域插入一个2行2列的表格,在4个单元格中插入图片。
保存为gryj。
3、再新建一个页面在可编辑区域插入准备好的影片。
保存为gryj1。
4、影集网页制作完成。
2.4相册网页制作
1、同样的,新建模板中的页,创建。
2、在可编辑区域插入一个2行3列的表格,分别在6个单元格插入6张图代表相册的封面,保存为grxc。
3、在新建一个网页,插入一个多单元表格。
在每个单元格放上自己的相片。
保存为grxc1,相册多的话还可以用同样的方法建立grxc2、grxc3…
5、保存文件,相册网页制作完成。
2.5留言板网页制作
1、还是,新建模板中的页,创建。
2、插入宽度为80%的7行2列的表格。
3、在表格第一列的每个单元中分别输入姓名、性别、地址、爱好、留言等文字信息。
4、在姓名后的单元格插入一个文本字段表单,性别后的单元格插入两个单选按钮并在每个按钮后分别输入男女文字,地址的后插入选择列表表单,留言后插入文本区域表单。
5、保存文件,留言板网页制作完成。
2.6制作链接
1、在模板页中进行链接可以很方便的将所有链接应用到每个子网页。
2、在模板中创建了2级网页的链接。
3级网页的链接需要到每个2级网页中进行一一链接。
3、保存,网站的制作就完成了。
3心得体会
本次课程设计我完成了自己的个人博客制作,这种感觉很好。
在制作过程中我遇到了很多自己不能独立解决的问题,然后自己通过向同学请教,查阅资料最后将这些难题一一化解。
这个过程是辛苦的,但也是收获最多的。
我感觉通过这种方式获得的知识我会永远把它们记住。
在网页初步完成后,自己会去看一下同学的做的怎么样了。
在这个过程中我发现了自己在网页的制作中所欠缺的东西,通过观察之后的领悟再对网页进行修改。
看着自己的作品逐渐变得完美,这种喜悦也是一种收获。
我们都想追求完美,但是不是所有人都会去追求完美。
所以这次课程设计不仅让我完成了一个作业,还锻炼了我的心性。
一定要追求卓越才会走向成功。
自己在制作的过程中会遇到问题,那么同样的同学也会遇到问题。
当同学有问题不会解决的时候会向自己求助,自己通过自己的知识帮助同学解决难题,这样我会发现在不知不觉中我们的知识又巩固了一些,而且在帮助了同学之后我们也会很高兴,因为我们在这里发现了自己价值。
所以在学习中我们更应该努力学习,现在想想,如果我再对网页的制作精通一点,那么我做的又会更好一些更快一些。
自己也能更好的帮助其他人解决问题了。
参考文献
[1]乔文彪.静态网页制作与素材加工处理[M],山西:
山西工程职业技术学院,2010
[2]赵子江,多媒体技术基础[M],北京,机械工业出版社,2009.5
[3]杨海,动态网页设计与制作实用教程[M],北京,中国水利水电出版社,2007.7
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 个人 博客 设计 说明书