个人博客设计网页报告.doc

目录1前言. . .12设计要求. . . .13开发工具的选用及介绍.14个人博客设计.24.1 css+div布局.24.2 首页布局. .94.3 日志布局.124.4 博友布局.134.5 相册布局.154.6 留言布局.165总结.171：前言博客最初的名称是weblog，由web和log两个单词组成，按字面意思就为网络日记，后来喜欢新名词的人把这个词的发音故意改了一下，读成we blog，由此，blog这个词被创造出来。中文意思即网志或网络日志，不过，在中国大陆有人往往也将 blog 本身和 blogger（即博客作者）均音译为“博客”。“博客”有较深的涵义：“博”为“广博”；“客”不单是“blogger”更有“好客”之意。看blog的人都是“客”。而在台湾，则分别音译成“部落格”（或“部落阁”）及“部落客”，认为blog本身有社群群组的意含在内，借由blog可以将网络上网友集结成一个大博客，成为另一个具有影响力的自由媒体。 一个blog其实就是一个网页，它通常是由简短且经常更新的帖子所构成，这些张贴的文章都按照年份和日期倒序排列。blog的内容和目的有很大的不同，从 对其他网站的超级链接和评论，有关公司、个人构想到日记、照片、诗歌、散文，甚至科幻小说的发表或张贴都有。许多blogs是个人心中所想之事情的发表， 其它blogs则是一群人基于某个特定主题或共同利益领域的集体创作2：设计要求要求：1除个人首页外，要求至少包含：自我介绍，图片收藏，网页布局技术，我的爱好，给我留言等栏目，亦可自行增加其他栏目。2整个网站至少包含10个html页（网站素材自行搜集整理，内容积极向上）。3个人首页中设定的每个超级链接，必须能够链接到相应页面。4其中“给我留言”栏目只要采用表单实验html页面部分即可，不需实现对留言内容的后台数据库保存。5要求综合应用css+div技术，对个人博客系统进行整体布局以及内容样式控制。最后效果： 1）界面美观、布局设计独到；2）版面简洁，文本，图案整齐美观；3）整体色彩和谐，符合美感，贴近主题；4）网页内各个元素搭配合理；5）人机交互方便，结构清晰。3：开发工具的选用及介绍本次个人博客的设计主要是在macromedia dreamweaver的环境下完成的。dreamweaver这款专业的网页设计软件在代码模式下对html,css,和javascript等代码有着非常好的语法着色以及语法提示功能，并且自带很多实例，对css的学习很有帮助。macromedia dreamweaver 是建立 web 站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于 css 的设计的领先支持到手工编码功能，dreamweaver 提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用 dreamweaver 及所选择的服务器技术来创建功能强大的 internet 应用程序，从而使用户能连接到数据库、web 服务和旧式系统。 flash是交互式矢量图和web动画的标准。网页设计者使用flash能创建漂亮的、可改变尺寸的、以及极其紧密的导航界面、技术说明以及其他奇特的效果。 软件详细信息 借助于 macromedia fireworks 8，您可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。fireworks 业界领先的优化工具可帮助您在最佳图像品质和最小压缩大小之间达到平衡。它与 macromedia dreamweaver 和 macromedia flash 共同构成的集成工作流程可以让您创建并优化图像，同时又能避免由于进行 roundtrip 编辑而丢失信息或浪费时间。利用可视化工具，无需学习代码即可创建具有专业品质的网页图形和动画，如变换图像和弹出菜单等。phtotshop cs4photoshop是adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。4：个人博客设计 4.1 css+div布局 style层叠样式表:.head width:1004px; height:281px; margin:auto; overflow:hidden; border:0px solid #666; .banner width:1000px; height:45px; margin:auto; overflow:hidden; border:0px solid #666; margin-top:10px; .main width:1000px; height:1000px; margin:auto; overflow:hidden; border:0px solid #666; margin-top:10px; .main .left width:299px; height:300px; border-right:0px solid #666; float:left; main .left .mt width:349px; height:50px; border-bottom:0px solid #666;.main .center .mb .main .center width:349px; height:300px; border-right:0px solid #666; float:left; .main .center .mt width:349px; height:50px; border-bottom:0px solid #666;.main .center .mb .main .right width:350px; height:300px; float:left; .footer width:1000px; height:80px; margin:auto; overflow:hidden; border:0px solid #666; margin-top:10px;body background-color: #030102;.style3 color: #000000!-function mm_preloadimages() /v3.0 var d=document; if(d.images) if(!d.mm_p) d.mm_p=new array(); var i,j=d.mm_p.length,a=mm_preloadimages.arguments; for(i=0; i0&parent.frames.length) d=parent.framesn.substring(p+1).document; n=n.substring(0,p); if(!(x=dn)&d.all) x=d.alln; for (i=0;!x&id.forms.length;i+) x=d.formsin; for(i=0;!x&d.layers&i 2) if (img = mm_findobj(args2) != null & !img.mm_init) img.mm_init = true; img.mm_up = args3; img.mm_dn = img.src; if (nbarr = documentgrpname) = null) nbarr = documentgrpname = new array(); nbarrnbarr.length = img; for (i=4; i args.length-1; i+=2) if (img = mm_findobj(argsi) != null) if (!img.mm_up) img.mm_up = img.src; img.src = img.mm_dn = argsi+1; nbarrnbarr.length = img; else if (event = over) document.mm_nbover = nbarr = new array(); for (i=1; i args.length-1; i+=3) if (img = mm_findobj(argsi) != null) if (!img.mm_up) img.mm_up = img.src; img.src = (img.mm_dn & argsi+2) ? argsi+2 : (argsi+1)? argsi+1 : img.mm_up); nbarrnbarr.length = img; else if (event = out ) for (i=0; i document.mm_nbover.length; i+) img = document.mm_nboveri; img.src = (img.mm_dn) ? img.mm_dn : img.mm_up; else if (event = down) nbarr = documentgrpname; if (nbarr) for (i=0; i nbarr.length; i+) img=nbarri; img.src = img.mm_up; img.mm_dn = 0; documentgrpname = nbarr = new array(); for (i=2; i 4.2 首页布局.head width:1004px; height:281px; margin:auto; overflow:hidden; border:0px solid #666; .banner width:1000px; height:45px; margin:auto; overflow:hidden; border:0px solid #666; margin-top:10px; .main width:1000px; height:1000px; margin:auto; overflow:hidden; border:0px solid #666; margin-top:10px; .main .left width:299px; height:300px; border-right:0px solid #666; float:left; main .left .mt width:349px; height:50px; border-bottom:0px solid #666;.main .center .mb .main .center width:349px; height:300px; border-right:0px solid #666; float:left; .main .center .mt width:349px; height:50px; border-bottom:0px solid #666;.main .center .mb .main .right width:350px; height:300px; float:left; .footer width:1000px; height:80px; margin:auto; overflow:hidden; border:0px solid #666; margin-top:10px;body background-color: #030102;.style3 color: #000000!-function mm_preloadimages() /v3.0 var d=document; if(d.images) if(!d.mm_p) d.mm_p=new array(); var i,j=d.mm_p.length,a=mm_preloadimages.arguments; for(i=0; i0&parent.frames.length) d=parent.framesn.substring(p+1).document; n=n.substring(0,p); if(!(x=dn)&d.all) x=d.alln; for (i=0;!x&id.forms.length;i+) x=d.formsin; for(i=0;!x&d.layers&i 2) if (img = mm_findobj(args2) != null & !img.mm_init) img.mm_init = true; img.mm_up = args3; img.mm_dn = img.src; if (nbarr = documentgrpname) = null) nbarr = documentgrpname = new array(); nbarrnbarr.length = img; for (i=4; i args.length-1; i+=2) if (img = mm_findobj(argsi) != null) if (!img.mm_up) img.mm_up = img.src; img.src = img.mm_dn = argsi+1; nbarrnbarr.length = img; else if (event = over) document.mm_nbover = nbarr = new array(); for (i=1; i args.length-1; i+=3) if (img = mm_findobj(argsi) != null) if (!img.mm_up) img.mm_up = img.src; img.src = (img.mm_dn & argsi+2) ? argsi+2 : (argsi+1)? argsi+1 : img.mm_up); nbarrnbarr.length = img; else if (event = out ) for (i=0; i document.mm_nbover.length; i+) img = document.mm_nboveri; img.src = (img.mm_dn) ? img.mm_dn : img.mm_up; else if (event = down) nbarr = documentgrpname; if (nbarr) for (i=0; i nbarr.length; i+) img=nbarri; img.src = img.mm_up; img.mm_dn = 0; documentgrpname = nbarr = new array(); for (i=2; i       miki_喵女,?22岁上次登录：2小时前 给她留言 1.8 远方的烟花绽放，消逝。入耳的音乐也随着车子的远去，而荡漾在冰冷的空气中。一切，好似都在一瞬。 我的梦想宣言 to be i wanna be ? writemylink1("","says","我始终在保持着自己的棱角不被无情的水流磨灭"); says 我始终在保持着自己的棱角不被无情的水流磨灭 你的手，握住了我们所有人 梦里花落知多少 这个世上永远存在着一些无奈，而这些无奈，你永远无法改变。 不朽 我唯一会觉得难过的，是自己还不足够强，不足够强到让你们在支持我时无所畏惧。 如果声音不记得 我是这样记得你。在忘却的立场上。用我的声音记得你 老男孩 梦想这东西和经典一样，永远不会因为时间而褪色，反而更显珍贵。 生活之路 为了做我们希望的事，常常只需要放下我们手里正做的事。 2011年01月01日 星期六 19:22 类别：流水年华 |评论