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

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

第 1 页共 21 页
第五课博客文章发表页面的静态网页设计
<div id=”main”> <div id=”topic”>
5 行 2 列的表格
newarticle.html 源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="newarticle.css" rel="stylesheet" type="text/css" /> <title>编辑博文</title> </head> <body> <div id = "leftimg"></div>
}
#main a{ font-family:'微软雅黑'; font-size:12px;
}
#main a:link, main a:visited{ color:#666; text-decoration:none;
}
#main a:hover{ color:#F60; text-decoration:none;
</tr>
</table>
</div>
第 8 页共 21 页
第五课博客文章发表页面的静态网页设计

<div id = "editor">
<form
method="post"
name="publisharticleform"
action="bloger.html">
</tr>
<tr class = "articledescribe">
<td class="label">文章标题：</td>
<td class="content"> 冒着大雨奔向丽江的暑期生活 </td>
}
#topic span{ height:30px; line-height:30px; font-family:'微软雅黑'; font-size:16px;
}
#main table td.menu{ height:40px; padding-left:20px; text-align:left;
2、博客文章发表的操作设计设计四个页面实现文章的发表
文章信息编辑页面 newarticle.html
下一步编辑
文章发布页面 publisharticle.html
添加内容
文本编辑页面 addarticlecontent.h tml
3、文章信息编辑页面 newarticБайду номын сангаасe.html 的布局设计
}
#main table td.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;
信息</td>
</tr>
<tr>
<td class="label">文章标题：</td> <td class="controlbox">
<textarea name="txtarticletopic" cols="80"
rows="2"></textarea>
</td>
</tr>
<tr>
<td class="label">文章系列：</td> <td class="controlbox">
<body>
<div id = "leftimg"></div>
<div id = "rightimg"></div>
<div id = "main">
<div id="directory">
<table width="80%" style="margin:20px auto; text-align:center;
padding:10px 0px;color:#ddd; }
.copyright
a{text-decoration:underline;
font-size:12px; }
background:fff; color:#06F;
第 6 页共 21 页
第五课博客文章发表页面的静态网页设计
4、文章内容编辑预览页面 publisharticle.html 页面布局设计
<td class="content">微风山谷</td>
</tr>
<tr>
<td class="title">性别：</td>
<td class="content">男</td> </tr>
<tr >
<td class="title">出生日期：</td>
<td class="content">2007-08-07</td>
第 7 页共 21 页
第五课博客文章发表页面的静态网页设计
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="publisharticle.css" rel="stylesheet" type="text/css" /> <title>博文编辑</title> </head>
action="publisharticle.html">
<table width="90%">
<tr >
<td
colspan="2"
class
=
"menu"><a
href="bloger.html">《返回博客空间主页</a></td> </tr>
<tr>
<td colspan = "2" class = "topic">填写要发表文章的基本
newarticle.css 源代码 @charset "utf-8"; /* CSS Document */
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;
更新" />
</td>
</tr>
</table>
</form>
</div>
第 3 页共 21 页
第五课博客文章发表页面的静态网页设计
<div class="copyright"> <p>Copyright © 2014 - Software Technology from <a
href="http://www.yngsxy.net/" title="云南工商学院" target="_blank"> 云南工商学院</a></p> </div> </body> </html>
<table width="100%">
<tr>
<td colspan = "3" class = "menu"><a href="bloger.html">
《返回博客空间主页</a></td>
</tr>
<tr class = "articledescribe">
<td colspan = "3" class = "topic">博客文章编辑</td>
}
.controlbox{ width:78%; height:40px; text-align:left; padding-left:5px;
}
#main input{ font-family:'微软雅黑'; font-size:12px;
}
.copyright{text-align:center; margin-top:5px;
第 4 页共 21 页
第五课博客文章发表页面的静态网页设计
border:#CCC solid 1px; /*层内所有字体设置*/ font-family:'微软雅黑'; font-size:14px; /*font-weight:bold;*/ }
#topic{ width:100%; height:30px; padding:10px 0px 10px 0px; text-align:center; border-bottom:#666 solid 1px; background-color:#CCC;
}
#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:80px auto 10px auto; text-align:right;
<div id=”director”>
表格
<div id=”main”> <div id=”editor”>
表格 1 博客文章信息
表格 2 博客文章内容预览
publisharticle.html 源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
}
第 5 页共 21 页
第五课博客文章发表页面的静态网页设计
#main table{ margin:20px auto 20px auto; background-color:#F2F2F2;
}
#main table td{ font-family:'微软雅黑'; font-size:12px; border-bottom:#CCC dashed 1px;
第 2 页共 21 页
第五课博客文章发表页面的静态网页设计
<div id = "rightimg"></div>
<div id = "main"> <div id= "topic"> <span>博文编辑</span> </div>
<form
method="post"
name="newarticleform"
<input name="txtarticletype" type="text"
size="50" />
</td>
</tr>
<tr>
<td
colspan="2"
style="height:40px;
text-align:center">
<input name="submit" type="submit" value="保存
</tr>
<tr>
<td class="title">博客等级：</td>
<td class="content">1 级</td>
</tr>
<tr>
<td class="title">博客积分：</td>
<td class="content">56 分</td>
</tr>
<tr >
<td class="title">博客昵称：</td>
第五课博客文章发表页面的静态网页设计
第五课博客文章发表页面的静态网页设计
练习目标
运用 div+css 实现博客文章发表页面的静态网页设计
练习内容
1、博客文章发表的内容和操作分析数据分析：①博客文章信息描述表。
②博客文章内容表。操作分析：①编辑博客文章基本信息，保存该信息到表中。
②编辑博客文章的内容，保存内容到表中。
vertical-align:middle">
<tr >
<td
colspan="2"
height="20px"
style="background-color:#CCC">博主信息</td> </tr>
<tr>
<td
colspan="2"><img
src="me.jpg"
width="160px"
height="150px" alt="我的照片" /></td>