博客文章发表页面的静态网页设计

第五课博客文章发表页面的静态网页设计第1页共21页第五课博客文章发表页面的静态网页设计练习目标运用div+css实现博客文章发表页面的静态网页设计练习内容1、博客文章发表的内容和操作分析数据分析：①博客文章信息描述表。②博客文章内容表。操作分析：①编辑博客文章基本信息，保存该信息到表中。②编辑博客文章的内容，保存内容到表中。2、博客文章发表的操作设计设计四个页面实现文章的发表3、文章信息编辑页面newarticle.html的布局设计文章信息编辑页面newarticle.html文章发布页面publisharticle.html文本编辑页面addarticlecontent.html下一步编辑添加内容第五课博客文章发表页面的静态网页设计第2页共21页newarticle.html源代码!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/linkhref=newarticle.cssrel=stylesheettype=text/css/title编辑博文/title/headbodydivid=leftimg/divdivid=”main”divid=”topic”5行2列的表格第五课博客文章发表页面的静态网页设计第3页共21页divid=rightimg/divdivid=maindivid=topicspan博文编辑/span/divformmethod=postname=newarticleformaction=publisharticle.htmltablewidth=90%trtdcolspan=2class=menuahref=bloger.html《返回博客空间主页/a/td/trtrtdcolspan=2class=topic填写要发表文章的基本信息/td/trtrtdclass=label文章标题：/tdtdclass=controlboxtextareaname=txtarticletopiccols=80rows=2/textarea/td/trtrtdclass=label文章系列：/tdtdclass=controlboxinputname=txtarticletypetype=textsize=50//td/trtrtdcolspan=2style=height:40px;text-align:centerinputname=submittype=submitvalue=保存更新//td/tr/table/form/div第五课博客文章发表页面的静态网页设计第4页共21页divclass=copyrightpCopyright©2014-SoftwareTechnologyfromahref==云南工商学院target=_blank云南工商学院/a/p/div/body/htmlnewarticle.css源代码@charsetutf-8;/*CSSDocument*/body{background-image:url(bg2.png);}#leftimg{position:absolute;background-image:url(bgleft.png);z-index:-1;width:140px;height:400px;top:20px;left:0px;}#rightimg{position:absolute;background-image:url(bgright5.png);z-index:-1;width:185px;height:500px;top:20px;right:0px;}#main{background-color:#F2F2F2;width:70%;min-width:850px;height:350px;margin:80pxauto10pxauto;text-align:right;第五课博客文章发表页面的静态网页设计第5页共21页border:#CCCsolid1px;/*层内所有字体设置*/font-family:'微软雅黑';font-size:14px;/*font-weight:bold;*/}#topic{width:100%;height:30px;padding:10px0px10px0px;text-align:center;border-bottom:#666solid1px;background-color:#CCC;}#topicspan{height:30px;line-height:30px;font-family:'微软雅黑';font-size:16px;}#maintabletd.menu{height:40px;padding-left:20px;text-align:left;}#maina{font-family:'微软雅黑';font-size:12px;}#maina:link,maina:visited{color:#666;text-decoration:none;}#maina:hover{color:#F60;text-decoration:none;}第五课博客文章发表页面的静态网页设计第6页共21页#maintable{margin:20pxauto20pxauto;background-color:#F2F2F2;}#maintabletd{font-family:'微软雅黑';font-size:12px;border-bottom:#CCCdashed1px;}#maintabletd.topic{height:60px;font-family:'微软雅黑';font-size:12px;text-align:left;padding-left:20px;}.label{width:200px;height:40px;text-align:left;padding-right:5px;}.controlbox{width:78%;height:40px;text-align:left;padding-left:5px;}#maininput{font-family:'微软雅黑';font-size:12px;}.copyright{text-align:center;margin-top:5px;background:fff;padding:10px0px;color:#ddd;}.copyrighta{text-decoration:underline;color:#06F;font-size:12px;}第五课博客文章发表页面的静态网页设计第7页共21页4、文章内容编辑预览页面publisharticle.html页面布局设计publisharticle.html源代码!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==”main”divid=”director”表格divid=”editor”表格1博客文章信息表格2博客文章内容预览第五课博客文章发表页面的静态网页设计第8页共21页headmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/linkhref=publisharticle.cssrel=stylesheettype=text/css/title博文编辑/title/headbodydivid=leftimg/divdivid=rightimg/divdivid=maindivid=directorytablewidth=80%style=margin:20pxauto;text-align:center;vertical-align:middletrtdcolspan=2height=20pxstyle=background-color:#CCC博主信息/td/trtrtdcolspan=2imgsrc=me.jpgwidth=160pxheight=150pxalt=我的照片//td/trtrtdclass=title博客等级：/tdtdclass=content1级/td/trtrtdclass=title博客积分：/tdtdclass=content56分/td/trtrtdclass=title博客昵称：/tdtdclass=content微风山谷/td/trtrtdclass=title性别：/tdtdclass=content男/td/trtrtdclass=title出生日期：/tdtdclass=content2007-08-07/td/tr/table/div第五课博客文章发表页面的静态网页设计第9页共21页!--右边的文章内容编辑区--divid=editorformmethod=postname=publisharticleformaction=bloger.htmltablewidth=100%trtdcolspan=3class=menuahref=bloger.html《返回博客空间主页/a/td/trtrclass=articledescribetdcolspan=3class=topic博客文章编辑/td/trtrclass=articledescribetdclass=label文章标题：/tdtdclass=content冒着大雨奔向丽江的暑期生活/tdtdclass=process/td/trtrclass=articledescribetdclass=label文章系列：/tdtdclass=content云南.丽江/tdtdclass=processahref=newarticle.html编辑/a/td/tr/table!--文章内容区表格--tablewidth=100%trtdcolspan=5style=height:30px/td/trtr!--以下为文章的具体内容，含图片和内容--tdclass=sortid序号/tdtd/tdtd/tdtd/tdtd/td/trtrtdclass=sortid1/tdtdclass=imagecontentimgsrc=DSC_0642.JPGwidth=100height=66//tdtdclass=textcontent1）昨天白天和晚上下了一整天的鱼，早上昆明已经成为一片泽国，锦苑花园的车库已经淹了，许多豪车直接报废了，早上和小舅正在商