网页开发设计是在面试创新实验室时面试官给的二面试题，让自己设计实现一个简单的网页。网页开发工具有很多，我使用的是对新手较为友好的Dreamweaver，其优点在于简便、直观、功能丰富，简称为“傻瓜化”。按钮的实质是文本链接，单击后跳转到某个URL。而此次使用的就是通用区块<div>。这是因为图片分辨率和浏览器的显示分辨率不同，因此要使图片根据浏览器的分辨率进行缩放。这就需要设置background属性在横向和纵向上的属性，使其充满全屏。
网页开发设计是在面试创新实验室时面试官给的二面试题，让自己设计实现一个简单的网页。所以我决定来做一个邀请函网页，并将开发过程写在博客上供有需要的朋友们查看。
网页开发工具有很多，我使用的是对新手较为友好的Dreamweaver，其优点在于简便、直观、功能丰富，简称为“傻瓜化”。下载请点击这里。
1.1 创建首个HTML5页面
在准备好的开发工具中，首先输入第一行HTML代码，如下：
<!doctype html>
接下来，我们需要为页面构建最基本的结构框架。首先要建立最外侧的围“围墙”，来囊括整个页面，这需要使用到< html >标签，后续所有页面内容都卸载这对标签之内。而围墙之内又分为“头”和“身体”两部分，分别用< head >和< body >标签来指定。
<html> <head> </head> <body> </body></html>
< head >类似“身份证”，里面需要两项基本信息，一项是“名字”和“语言”。
正如每个人都有一个名字，< head >中唯一必须的元素就是< title >，即页面的标题。此外，还需要标注“语言”来使浏览器正确解读我们的页面而不会出现乱码
<head><meta charset="UTF-8"><title>HTML5学习邀请函</title></head>
< body >标签中则包含了所有要呈现给浏览者的内容信息。
<head>Let's Learn HTML5</head>
.
1.2 增加必要的页面元素
为了对页面内容加以充实，我们使用标题标签。在HTML的各种标签中，标题标签有六个，按从大到小的层次结构为< h1 >到< h6 >。在这里我们就用< h1 >。
<body> <h1>Let's Learn HTML5</h1></body>
接着要添加说明文字。说明文字放在段落标签< p >里。
<body> <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开发的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p></body>
最后是添加按钮。按钮的实质是文本链接，单击后跳转到某个URL。链接的标签为< a >，跳转的URL可以用该标签的href属性来指定，单击跳转到href所指”界面。
<body> <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开发的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p> <a href="invite.php">邀您参加</a></body>
1.3 页面中看不见的代码
页面中加入区块，可以将各种标签放入不同的内容区域中，可以是页面结构变得井井有条，便于后续的页面美化。而此次使用的就是通用区块< div >。修改代码如下：
<body> <div> <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开发的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p> <a href="invite.php">邀您参加</a> </div></body>
此外，区块还可以进行命名，我们以便直接对应到这个区块。添加一个id属性，命名为container：
<div > <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开发的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p> <a href="invite.php">邀您参加</a> </div>
2.1 添加页面背景
背景图片要放置在和 index.html相同的路径下。css样式代码可以指定各种页面元素的呈现形式，但是在创建css样式代码之前，还需要在头部创建style元素来作为样式的容器。
<head><meta charset="utf-8"><title>HTML5学习邀请函</title><style type="text/css"></style></head>
添加背景需要创建background样式：
<style type="text/css"> body{background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)} </style>
这是网页的预览图，有没有发现什么问题？网页背景图片没有和网页的大小相匹配，出现了两张或好多张图片一起填充网页背景的情况。这是因为图片分辨率和浏览器的显示分辨率不同，因此要使图片根据浏览器的分辨率进行缩放。这就需要设置background属性在横向和纵向上的属性，使其充满全屏。
<style type="text/css"> html,body{height: 100%;} body{ background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)center center; background-size:cover; } </style>
想要改变字体颜色的话，需要使用color属性：
html,body{ height: 100%; color: #ffffff; }
2.2 调整区域位置
调整区域位置在网页设计中很重要，就想写微信推文，一个好的排版总能让人心情愉悦想要继续读下去，网页也一样，不能总是把东西都堆在一块，或者所有页面千篇一律。
在这个页面上，我想让内容居中显示，于是通过设置container这个容器（就是前面的id为container的div），使其宽度为100%，即横向充满整个屏幕，然后设置其中的文字居中：
#container{ width: 100%; text-align: center; }
*在创建css样式时，id类型的选择器需要使用“#”来定义。
之后需要变成垂直居中，先对container的父级，即页面的body做些属性定义，然后通过改变top属性来实现：
body{ background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)center center; background-size:cover; margin: 0; padding: 0; position: relative; } #container{ width: 100%; text-align: center; position: absolute; top: 50%; }
要控制container的top属性，就要使container的定位方式为“绝对定位”，而这又需要body（container的父级）为“相对定位”。
top: 50%;使得container的顶部位于整个页面的50%位置。
不过要使得内容区块整体居中，还要使container向上移动其高度的一半。但问题在于container的高度是随着后续的字体、按钮样式而不断动态变化的值，所以不可以直接设置确定值，需要设置transform属性，设置其translateY的数值，使其在Y轴上移动-50%，即向上移动其高度的一半而无需声明container具体多高。代码如下：
#container{ width: 100%; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transfrom:translateY(-50%); }
这里多次重复定义是因为，不同浏览器对于transform属性的支持并不相同，为了使得页面在各种浏览器下都能够正常显示不得不这么做。
2.3 调整字体和字号
考虑到不同电脑上字体库的问题，可能同一个字在不同电脑上显示不同或生僻字不能显示，需要设置font-family属性为sans-serif，即系统默认的无衬线字体;
html,body{ height: 100%; color: #ffffff; font-family: sans-serif; }
接下来要调整文字大小，将h1标题的字号设置为了更大的54像素，并且小写变大写：
h1{ font-size: 54px; text-transform: uppercase; margin-bottom: 20px; }
设置说明文字的样式，使段落文字字号更大，且拉开距离，代码如下：
p{ font-size: 21px; margin-bottom: 40px; }
后记：对于大部分转行的人来说，找机会把自己的基础知识补齐，边工作边补基础知识，真心很重要。"我们相信人人都可以成为一个IT大神，现在开始，选择一条阳光大道，助你入门，学习的路上不再迷茫。这里是北京尚学堂，初学者转行到IT行业的聚集地。"
