网页设计"/>
Web前端 个人博客网页设计
Web前端 个人博客网页设计
一、实验题目
博客注册页面
二、实验内容简介
1、HTML常用元素
2、表单元素
3、多媒体元素
三、实验过程
1. 需求分析
顶部是一个绿色清新的图片；
菜单栏是包含首页、相册、阳光生活、校园情怀、释放梦想、留言（整体排版靠右），背景颜色是绿色；
中间部分左侧首先是一个小女孩图片；往下是两条虚线中含有一个标题；然后是标签1为活力地带，（包含个人主页、校园情缘、阳光生活、释放梦想、我的相册、给我留言六个小标签）；标签2为我的文章分类，拥有五小行；标签3为工作日志，能够显示年月日且有以星期为表头的月份日期表，标签4为记录日志，能够填写日志主题、内容（包括确定和取消两个选项）；
中间部分右侧有文章和登陆注册功能，左半部分是一篇文章，题目为快乐是一种心态。在文章右侧是登陆注册功能，内容包括1.用户名2.密码3.性别（为男女两个选项）4.出生年月5.学历6.特长（读书跑步）7.选择岗位（开发、测试、售后）8.个人简介（其中特长选项要求可以进行多选，包括提交、重置、取消三个选择）当密码用户名输入错误时能够提醒。在文章和登陆注册下面是一个小文章题目是你好！夏天，正文在标题下面。
底部是为一个绿色打底的长方形条框。
2．设计方案
（1）整体布局
博客注册页面分为顶部、菜单、中间和底部，中间分为左右两部分，左侧分为五小部分，右侧分为上、中、下三部分，上又分为左右两部分，左边是短文，右边是一个表单，中、下都是短文。
（2）菜单
包括首页、相册、阳光生活、校园情谊、释放梦想、留言这六部分，背景颜色是绿色的，菜单字体颜色是爱丽丝蓝，整体排版靠右侧。
（3）内容左侧
首先是baby.img这个图片，图片有着绿色的圆角边框，周围有红色和蓝色相接的边框阴影；下面则是两条虚线，中间是一个字体居中的小标题；然后是活力地带部分，包括个人主页、 校园情缘、阳光生活、释放梦想、我的相册、 给我留言这几部分；下面是我的文章分类，有一个无序列表；然后下面是工作日志，能够显示年月日的日期且字体居中，还有以星期为表头的月份日期表，字体居中，不包含在该月的日期字体为灰色；最后是记录日志，有主题和内容，可以填写，且有确定与取消的按钮。
（4）内容右侧
首先是标题和两篇短文，标题与短文之间用虚线分开，然后是表单，表单标题是登录与注册，内容包括用户名、密码、性别、出生年月、学历、特长、选择岗位、个人简介以及提交、重置、取消按钮组成，用户名输入格式是邮箱，有123@qq的提示信息；密码输入格式进行文本隐藏；性别是男或女单选，且默认选择；出生日期是日期格式；学历是下拉选择框，可进行选择；特长、选择岗位是多选的，是默认选择的；个人简介可输入，且框可以调整大小。
（5）底部
底部是以绿色为背景。
3. 代码
index5.html
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>我的博客</title><!-- 链接样式表 --><link rel="stylesheet" type="text/css" href="css/index5.css"/></head><!-- <style type="text/css"></style> --><body><div id="top" class="divCss"><!-- id不能重复 class可以是样式 --></div><div id="menu" class="divCss"><table border="0px" cellspacing="0" cellpadding="" width="100%"><tr><td style="width: 50%; height: 60px;"></td><td><table border="0px" cellspacing="0" cellpadding="" width="100%"><tr style="color: aliceblue;"><th style="width: 16.6%;">首页</th><th style="width: 16.6%;">相册</th><th style="width: 16.6%;">阳光生活</th><th style="width: 16.6%;">校园情谊</th><th style="width: 16.6%;">释放梦想</th><th style="width: 16.6%;">留言</th></tr></table></td></tr></table></div><div id="content" class="divCss"><table border="0px" cellspacing="0" cellpadding="" width="100%"><tr><!-- 主题左侧开始 --><td style="width: 25%;height: 1000px; vertical-align: top;"><div id="imgleft"><img src="img/baby.jpg" ></div><hr><p class="topFont">html+Css+js</p><hr><div class="leftTitle">活力地带</div><div id="iconTeb"><table border="0px" cellspacing="0" cellpadding=""><tr><td><img src="img/1.gif" alt=""><span id="">个人主页</span></td><td><img src="img/2.gif" alt=""><span id="">校园情缘</span></td></tr><tr><td><img src="img/3.gif" alt=""><span id="">阳光生活</span></td><td><img src="img/4.gif" alt=""><span id="">释放梦想</span></td></tr><tr><td><img src="img/5.gif" alt=""><span id="">我的相册</span></td><td><img src="img/6.gif" alt=""><span id="">给我留言</span></td></tr></table></div><div class="leftTitle">我的文章分类</div><div id="leftLi"><ul><!-- 无序列表 --><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div><div class="leftTitle">工作日志</div><p id="time">2020年10月16日</p><table border="1px" cellspacing="0px" cellpadding="5px" width="100%" id="ke"><tr><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th></tr><tr><td style="color: darkgrey;">28</td><td style="color: darkgrey;">29</td><td style="color: darkgrey;">30</td><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr><tr><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr><tr><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr><tr><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td style="color: darkgrey;">1</td></tr></table><div class="leftTitle">记录日志</div><iframe src="new_file.html" >< a href=" ">你的浏览器不支持iframe页面嵌套，请点击这里访问页面内容。</ a></iframe></td><!-- 主体左侧结束 --><!-- 主题右侧开始 --><td><div id="conRight"><div id="contentLeft"><table border="0px" cellspacing="20px" cellpadding=""><tr><td class="tabLeft"><h2 style="color: green;text-indent: 1em;">快乐是一种心态</h2><hr><p style="color: darkgrey;text-align: right;">sunshine@2012-2-20</p><p>快乐是一种心，无关贪欲。心怀豁达、宽容与感恩，生命永远阳光明媚。人生有得有失，聪明的人懂得放弃与选择，幸福的人懂得牺性与超越，能安于真实拥有，超脱得失苦乐，是一种至上的人生境界。</p><p>唯美的文字，能净化每一个人的心灵；哀婉缠绵的文字，能使人充满优伤与惆怅；充满鼓励性的话语，更能引起人的共鸣与奋发……但是现在的我只欣赏一句话:生气不如争气。</p><p>人生中，处处皆有"气"，事事都有"气"。没有"气"的人生，那不是生活，是幻想中的"乌托邦"。人生不如意之事十有八九，学着莫生气，就是人生的另一个境界。 就像一首打油诗写着:“人生就像一场戏，别为小事发脾气，回头想想又何必，别人生气我不气，气出病来无人替……”记得生气时也要微笑。</p><p>人生不就是要痛痛快快的活着吗?要学会知足常乐，不要总为失去而痛苦，因为失去就代表着重新拥有。聪明的人懂得放弃，真情的人懂得牺性。幸福的人懂得超越，安于一份放弃， 固守一份超脱，才是人生价值。"世上本无妒，庸人自扰之，只有愚蠢的人才会时刻与愤怒为伍!要学会拿得起放得下，刷新你的明天，忘掉你的过去……</p></td><td class="tabRight"><iframe scrolling="no" id="main" name="main" frameborder="0" src="form1.html" style="min-height:50px;width:100%;height:100%;"></iframe><script>// 计算页面的实际高度，iframe自适应会用到function calcPageHeight(doc) {var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)var height = Math.max(cHeight, sHeight)return height}//根据ID获取iframe对象var ifr = document.getElementById('main')ifr.onload = function() {//解决打开高度太高的页面后再打开高度较小页面滚动条不收缩ifr.style.height='0px';var iDoc = ifr.contentDocument || ifr.documentvar height = calcPageHeight(iDoc)if(height < 50){height = 50;}ifr.style.height = height + 'px'}</script></td></tr></table><table border="0px" cellspacing="20px" cellpadding="" id="contentMid"><tr><td><p>人生不就是要痛痛快快的活着吗?要学会知足常乐，不要总为失去而痛苦，因为失去就代表着重新拥有。聪明的人懂得放弃，真情的人懂得牺性。幸福的人懂得超越，安于一份放弃， 固守一份超脱，才是人生价值。"世上本无妒，庸人自扰之，只有愚蠢的人才会时刻与愤怒为伍!要学会拿得起放得下，刷新你的明天，忘掉你的过去……</p><p style="color: darkgrey;text-align: right;"><i>浏览/1051/评论/50/</i></p><p style="color: darkgrey;">注:文字网络</p></td></tr></table></div><h4 style="color: green;text-indent: 1em;"> 你好！夏天</h4><hr><table border="0px" cellspacing="20px" cellpadding="" id="contentBottom"><tr><td><p style="color: darkgrey;text-align: right;">sunshine@2012-2-20</p><p>送走了温暖的春天，迎来了炎热的夏天，我喜欢夏天的热，因为夏天的热可以使我们吃上冰爽的冰激凌，可以使我们在水池里欢畅游泳;可以使我们到凉爽的森林避暑。虽然天气是炎热的，可人们的心是凉爽的。</p><p>我喜欢夏天的夜，因为夏天的夜是“闹”的，池塘边，蛙声鸣噪;田地里，癞蛤蟆跳；院子里，蚂蚁乱跑;床子边，蚊子乱飞。动物们一起营造了一个“闹”的气氛。不仅动物，人也是一样，许多人铺上了凉席，不盖被子，就这样，边扇扇子，边进入梦乡。</p><!-- <p>我喜欢夏天的雨，因为夏天的雨并不是牛毛细雨，也不是雨意连绵，而是突然间雷声大作，豆大的雨滴往下掉，雨渐下渐大，中间还夹杂着电闪雷鸣，霎时间，风止雨停，地上只有暴雨过后的那大大小小的水洼。</p> --><p>夏天，它虽然不像春天那样温柔，也不似秋天那样连绵，但它是粗犷，是豪放的。来也匆匆， 去也匆匆，从不留下任何痕迹。</p><p style="color: darkgrey;text-align: right;"><i>浏览/1051/评论/50/</i></p><p style="color: darkgrey;">注:文字网络</p></td></tr></table></div></td><!-- 主题右侧结束 --></tr></table></div><div id="buttom" class="divCss"><h3>数据科学与大数据技术</h3></div></body>
</html>form1.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单</title></head><style type="text/css">#divform{width: 350px;/* height: 400px; */border: 1px solid gray;margin: auto;/* 块居中 */padding: 5px;/* 内边距 ，书距离桌边的距离*/}.formp{text-align: center;/* 文字居中 */font-family: 微软雅黑;/* 字体格式 */font-size: 16px;/* 字体大小 */background-color: lightblue;/* 背景颜色 */height: 50px;line-height: 50px;/* 标题垂直居中 */}.tdLeft{width: 10%;font-size: 12px;/* 字体大小 */}.tdMid{width: 5%;font-size: 12px;/* 字体大小 */}.tdRight{font-size: 12px;/* 字体大小 */}#sz{font-size: 12px;/* 字体大小 */}</style><body><div id="divform"><form action="" method="post"><p class="formp">登录与注册</p><table width="100%" border="1px" cellspacing="0" cellpadding=""><tr><td class="tdLeft">用户名</td><td class="tdMid"><input type="email" name="fname" placeholder="123@qq" /><!-- type邮箱输入类型,placeholder提示文本信息 --></td><td class="tdRight">*英文大小写，数字、下划线</td></tr><tr><td class="tdLeft">密码</td><td class="tdMid"><input type="password" name="psd" /><!-- password文本隐藏 --></td><td class="tdRight">*英文大小写，数字、下划线</td></tr><tr><td class="tdLeft">性别</td><td class="tdMid"><input type="radio" name="sex" id="sex1" checked="checked"/><!-- radio单选，name相同选单值，checked默认选择 --><!-- 单击男时，选中前面的单选，选字也可以选中圈 --><label for="sex1">男</label><input type="radio" name="sex" id="sex2"/><label for="sex2">女</label></td><td class="tdRight">选择性别</td></tr><tr><td class="tdLeft">出生年月</td><td class="tdMid"><input type="date" name="birth" /><!-- date日期--></td><td class="tdRight">选择出生日期</td></tr><tr><td class="tdLeft">学历</td><td class="tdMid"><select><!-- 下拉选择框，注意修改value --><optgroup label="高等教育"><option value ="ygs">研究生</option><option value ="bk">本科</option><option value ="zk">专科</option></optgroup><optgroup label="普通教育"><option value ="gz">高中</option><option value ="cz">初中</option><option value ="js">技师</option></optgroup><optgroup label="其他"><option value ="w">无</option></optgroup></select></td><td class="tdRight">最后学历</td></tr><tr><td class="tdLeft">特长</td><td class="tdMid"><input type="checkbox" name="love" id="love1" checked="checked"/><!-- checkbox可多选，checked默认选择状态--><label for="love1">读书</label><input type="checkbox" name="love" id="love2"/><label for="love2">跑步</label></td><td class="tdRight">多选</td></tr><tr><td class="tdLeft">选择岗位</td><td class="tdMid"><input type="radio" name="work" id="work1" checked="checked"/><!-- radio单选，name相同选单值，checked默认选择 --><!-- 单击男时，选中前面的单选，选字也可以选中圈 --><label for="work1">开发</label><input type="radio" name="work" id="work2"/><label for="work2">测试</label><input type="radio" name="work" id="work3"/><label for="work3">售后</label></td><td class="tdRight">选择工作，只能选一个</td></tr><tr><td colspan="3" style="text-align: center; font-size: 12px;">个人简介</td></tr><tr><td colspan="3"><!-- rows行宽，cols列宽 --><textarea rows="3" cols="45"></textarea></td></tr><!-- <tr><td style="text-align: center;"><input type="submit" name="submit" id="" value="提交"/></td><td style="text-align: center;"><input type="reset" name="reset" id="" value="重置"/></td><td style="text-align: center;"><input type="button" name="button" id="" value="取消"/></td></tr> --></table><div id="sz" > <input type="submit" name="submit" id="" value="提交"/> <input type="reset" name="reset" id="" value="重置"/> <input type="button" name="button" id="" value="取消"/></div></form></div></form></body>
</html>
new_file.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style type="text/css">#kj{width: 250px;height: 100px;/* border: 1px solid gray; */margin: auto;/* 块居中 */padding: 3px;/* 内边距 ，书距离桌边的距离*/}.tadTop{width: 3%;}.tadBottom{width: 3%;}</style><body><div id="kj"><form action="" method="post"><tr><td class="tadTop">主题：</td><td class="tadBottom"><input type="" name="name" placeholder="" /></td></tr><br><tr><td colspan="2" style="text-align: center;">内容：</td></tr><br><tr><td colspan="2"><!-- rows行宽，cols列宽 --><textarea rows="2" cols="20"></textarea></td></tr><div id=""> <input type="submit" name="submit" id="" value="确定"/> <input type="button" name="button" id="" value="取消"/></div></div></body>
</html>index5.css
.divCss{width: 90%;border: 1px solid green ;margin: auto;/* 居中对齐 */
}
#top{background: url(../img/bg.jpg) no-repeat;background-size: 100% 200px;height: 200px;
}
#menu{height: 60px;background-color: #008000;
}
#content{height: 1000px;
}
#buttom{text-align: center;height: 50px;background-color: #008000;
}
#conRight{border: 1px solid gray;height: 1000px;width: 100%;
}
#imgleft{margin: auto;/* border: 1px solid red; */width: 65%;
}
#imgleft img{border: 5px solid green;border-radius: 20px;/* 边框圆角 */box-shadow: 0px 5px 5px red, 5px 0px 5px blue;/* 边框阴影 上下 阴影宽度 颜色 分左右*/
}
hr{width: 95%;/* border: 1px dotted green; */border: 1px dashed green;/* 虚线 */
}
.topFont{text-align: center;font-family: "arial black";/* 字体样式 */color: green;font-size: 18px;/* 大小 */
}
.leftTitle{/* border: 1px solid red; */width: 80%;margin: auto;/* 外边距 居中*/ background: lightblue;/* 背景底纹颜色 */height: 40px;line-height: 40px;/* 字体垂直居中，line与height一样大; */padding-left: 50px;color: black;border-radius: 0px 10px 10px 0px;/* 左上右上右下左下 */margin-bottom: 5px;/* 外边距 每个距离 */
}
#iconTeb{/* border: 1px solid red; */width: 80%;margin: auto;
}
#iconTeb table{width: 100%;
}
#leftLi{/* border: 1px solid red; */width: 80%;margin: auto;
}
#leftLi Li{list-style: none;margin-left: -20px;border-bottom: 1px dashed green;background: url(img/icon1.gif) no-repeat;background-position: 0px 10px;/* 背景图的位置 左侧和上侧的距离 */padding-left: 10px;
}
#time{text-align: center;/* 字体居中 */
}
#ke tr td{text-align: center;/* 字体居中 */
}
/* #rightContent{line-height: 21px;text-indent: 2em;/* 首行缩进2字符 *//* text-align: justify;/* 两端对齐 */
/* } */
#contentLeft{/* border: 1px solid gray; */width: 90%;margin: auto;
}
.tabLeft{width: 50%;height: 100%;text-indent: 2em;/* 首行缩进2字符 */font-size: 10px;/* 字体大小 */line-height: 20px;
}
.tabRight{width: 50%;height: 50%;
}
#contentMid{text-indent: 2em;/* 首行缩进2字符 */font-size: 10px;/* 字体大小 */line-height: 20px;
}
#contentBottom{text-indent: 2em;/* 首行缩进2字符 */font-size: 10px;/* 字体大小 */line-height: 20px;
}4. 效果截图
5. 知识点总结及感受
基础知识点
- <!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前。
- <html>与</html>标签限定了文档的开始点和结束点，在他们之间是文档的头部和主体，文档的头部由<head>标签定义，而主体由<body>标签定义。body元素定义文档的主体，<meta charset="utf-8" />表示文档的编码方式为UTF-8，<title>定义文档的标题。<h1>-<h6>标签可定义标题。<h1>定义最大的标题。<h6>定义最小的标题。
- <p>标签定义段落。
- <br>可插入一个简单的换行符。<hr>标签在HTML页面中创建一条水平线，可以通过属性改成虚线。
- <i>定义斜体文本。
- <!--...-->注释标签用于在源代码中插入注释。注释不会显示在浏览器里。在HBuilder中可以用CTRL+？来快捷使用。
- 可用来表示空格。
表单知识点
- <form>标签用于位用户创建HTML表单。
- <input>标签用于搜集用户信息，根据不同的type值，输入字段拥有很多形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等，例如：email邮箱输入类型，radio单选，password文本隐藏，date日期类型，checkbox可多选，submit提交按钮，reset重置按钮，button取消按钮。本次实验就运用了单选按钮（radio单选男女）及按钮。<label>标签为input元素定义标注，<label>标签与for属性应当与相关元素的id属性相同，checked表示默认选择，placeholder表示提示文本信息。
- <select>元素中可创建单选或者多选菜单（选择学历），<select>元素中的<option>标签用于定义列表中的可用选项。
- <textarea> 标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体，可以通过 cols 和 rows 属性来规定 textarea 的尺寸。
图像知识点
- img元素向网页中嵌入一幅图像，是单标签，是行内元素，不单独占一行。<img>标签有两个必需的属性：src属性和alt属性，src属性用于设置图片路径，alt设置的内容在图片不存在时显示，title设置的内容在鼠标指向图片时显示。
表格知识点
- <table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
- <tr>标签定义HTML表格中的行。tr元素包含一个或多个th或td元素。
- <td> 标签定义 HTML 表格中的标准单元格。HTML 表格有两类单元格：表头单元 - 包含头部信息（由 th 元素创建）；标准单元 - 包含数据（由 td 元素创建）。
- td 元素中的文本一般显示为正常字体且左对齐。
- td标签需放在tr标签内，colspan="2"表示横向跨两列，rowlspan="3"表示纵向跨两行。
样式和语义知识点
（1）<style> 标签用于为 HTML 文档定义样式信息。type 属性是必需的，定义 style 元素的内容。style 元素位于 head 部分中。
（2）<div> 可定义文档中的分区或节，<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
（3）<ul> 定义无序列表
使用iframe进行html页面嵌套
（1）<iframe>进行html页面嵌套，src属性指的是嵌套的文件名，scrolling="no"表示不希望出现滚动条，frameborder="0"表示不希望镶嵌页面的周围出现边框，width定义宽度，height定义高度。
（2）<script> 标签用于定义客户端脚本，此次实验定义了一个函数方法，用于调整嵌套的页面，使iframe高度自适应。
其他知识点
width设置宽度，height设置高度，margin设置外边距，padding设置内边距，border设置边框属性，background设置背景，background-size背景大小，background-color设置背景颜色，background-position设置背景图的位置，text-align设置文字对齐方式，border-radius设置元素的外边框圆角，box-shadow设置元素的框架上添加阴影效果，line-height设置行间距离，color设置颜色，list-style设置设置列表项标记的类型，text-indent设置首行缩进，font-size设置字体大小，font-family设置字体格式，id不能重复 class可以是样式。
感受
现在，计算机和网络已经深入到了我们生活中的方方面面，也已经成了生活中不可缺少的一部分，网络成了我们获取知识和信息的一种便捷工具。所以，了解和学习网络知识是我们作为一名大学生迫切所需的。通过这两周对web开发的学习，对网页设计进行了初步的认识和了解，并基本掌握HBuilder X的应用。
通过学习，我们了解了网页设计的初步过程：
首先，要确定网页设计的内容一个优秀的风站要有一个明确的主题。整个网站围绕这个主题，也就是你在网页设计之前要明确你这个网站有什么目的，用来做什么，所有页面都是围绕着这个内容来制作，有了明确的内容对排名有很重要的作用；
其次,要了解你网站所在行业的客户，及你的网页属于哪个类别。用户是一个网站成败的关键,网站操作是否简单,页面是否清楚明了等。在完成以上的基本内容之后网页的基本框架便成形成了，然后就是优化工作，内容是整个网页的核心。在网页设计之前必须明确网页的内容安排。然后在具体的规划一个网页时，可以用树状结构先把每个页面的内容大纲列出来,需要把这个架构规划好,也要考虑到以后可能的扩充性,以免做好以后又要改整个网站的架构。
下一步,就以动手制作具体内容了，题材选定，框架选定，接下来就开始往主页里面填内容。
总体来说，通过对网页设计的学习，有收获也有遗憾。但只要我再认真努力的去学习，在今后的闲余时间学习制作网页的更多知识以实现自身技能的提高,我坚信将来设计出的网页会更加专业，更加华丽，使它最终成为自己的一项技能。
更多推荐
Web前端 个人博客网页设计
发布评论