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.com的提示信息；密码输入格式进行文本隐藏；性别是男或女单选，且默认选择；出生日期是日期格式；学历是下拉选择框，可进行选择；特长、选择岗位是多选的，是默认选择的；个人简介可输入，且框可以调整大小。
（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.document
var 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.com" /><!-- 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的应用。
通过学习，我们了解了网页设计的初步过程：
首先，要确定网页设计的内容一个优秀的风站要有一个明确的主题。整个网站围绕这个主题，也就是你在网页设计之前要明确你这个网站有什么目的，用来做什么，所有页面都是围绕着这个内容来制作，有了明确的内容对排名有很重要的作用；
其次,要了解你网站所在行业的客户，及你的网页属于哪个类别。用户是一个网站成败的关键,网站操作是否简单,页面是否清楚明了等。在完成以上的基本内容之后网页的基本框架便成形成了，然后就是优化工作，内容是整个网页的核心。在网页设计之前必须明确网页的内容安排。然后在具体的规划一个网页时，可以用树状结构先把每个页面的内容大纲列出来,需要把这个架构规划好,也要考虑到以后可能的扩充性,以免做好以后又要改整个网站的架构。
下一步,就以动手制作具体内容了，题材选定，框架选定，接下来就开始往主页里面填内容。
总体来说，通过对网页设计的学习，有收获也有遗憾。但只要我再认真努力的去学习，在今后的闲余时间学习制作网页的更多知识以实现自身技能的提高,我坚信将来设计出的网页会更加专业，更加华丽，使它最终成为自己的一项技能。
5647
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
