html静态网页制作个人主页(html静态页面成品)
如何制作个人主页？
你想不想在网络上拥有一片属于你自己的空间呢？做一个个人主页吧！在这儿，你可以把自己介绍给大家，发表自己的文章和见解，认识更多的朋友。制作主页并不难，现在我们就来一起学习。
一、准备材料
首先要计划好准备在主页上放哪些内容，比如可以将自我介绍(包括家庭成员、爱好、联系方式等)、自己认为写得很好的文章、画得很好的画、拍得不错的照片放到个人主页上。把这些内容准备好后，再建一个文件夹，并在这个文件夹下建立几个子文件夹，把各方面的文件放入相应的文件夹里，便于管理文件。文件名最好用自己便于识别的字符。图像最好使用ＪＰＧ和ＧＩＦ格式的。如果是其他格式的图像，可以用图像处理软件进行转换，比如Ｏｆｆｉｃｅ９７的照片编辑器。
二、开始制作
材料准备好了，应该怎样制作呢？初学者可以使用Ｆｒｏｎｔ-ｐａｇｅ９８的汉化版本，它的用法与Ｗｏｒｄ９７很相似，就省去学习复杂的ＨＴＭＬ语言了。基本的网页就是文字和图片的组合，再加上一些ＨＴＭＬ文件、图片及音乐文件的链接、调用等。在特定的文字或图片上加入链接的方法是，先选定一段文字或一幅图片，然后点击菜单中的“插入／超级链接”命令在地址栏中填入链接要调用的地址就可以了。一般将首页保存为ｉｎｄｅｘ.ｈｔｍ(有的主机要求为ｉｎｄｅｘ.ｈｔｍｌ)，然后再做二级页面。
三、上传到网上
最后要做的是把主页放到网络上，别人就可以访问你的主页了。这就需要先申请一个主页空间。网络上有很多免费提供个人主页空间的站点，如ｗｗｗ.９６３.ｎｅｔ，ｈｔｔｐ：／／ｆｊｎｅｔ.ｎｅｔ.ｃｎ，ｗｗｗ.ｚｇ１６９.ｎｅｔ，ｗｗｗ.ｏｎｌｉｎｅ.ｘａ.ｓｎ.ｃｎ／ｐａｇｅ，ｈｔｔｐ：／／ｍｅｍｂｅｒ.ｚｚ.ｈａ.ｃｎ，ｗｗｗ.ｓｉｎａ.ｃｏｍ.ｃｎ等。点击该链接后，按要求填写好申请表格。该站点的管理员会将用户名、密码、上传主页的方法、目录、起始页的文件名规定等发送到你指定的电子信箱。这样，免费主页空间就申请好了。只要用ＦＴＰ向指定的位置上传主页就可以了。
怎样用HTML制作个人介绍网页？
你无须去记复杂的HTML语言，你可以用Netscape4.0或者WORD7.0,我用的是Frontpage.打开Netscape,在file菜单里选Edit
Page,便可以制作了.文字的处理基本跟Word没什么两样,关键是插入图片和产生链接.我们先做关于你自我介绍的一页，你先写上“大家好，我是superboy，下面是我的照片：”这时要放图片了，只须点击Insert菜单，选取Image,在Choosefile里选取你的图象文件即可，然后把这个文件保存为myself.html文件，放在myself的目录下。好，现在必须做封面了，你在封面写：“欢迎来到superboy的主页”以下是“自我介绍，我的爱好，我的工作”。你的自我介绍要链接到下一页去，你只须用鼠标选“自我介绍”后按鼠标右键
，再选create
link，然后再选你myself目录下的myself.html，就将“自我介绍”链接到下一页了，以后在浏览器中一按，就可以跳到镶有你靓照的页面啦。
在你的封面做好了所有链接和图片后，记住你必须将这一页保存为index.htm(有的主机要求必须为index.html),因为网页默认的主页名称是index.制作主页其实很简单，只要多实际制作，工多艺熟。还可以拿来主义，在网上看到什么好的主页，用另存为功能保存为.html格式的文件，细细研究人家是如何做的。还可以借用网页模版来搞，我的就是~~~~~~
网页制作网址大全
参考资料：
参考资料：
怎么用html5制作个人主页
总体把页面一分为二，header是包含在article里面的，页脚部分是单独的一块儿。大致结构获悉了后再从局部入手，header部分，有主标题、副标题、还有作者署名，前面我们讲过，如果除了主标题，还有一个副标题，那可以把这两个标题写在一个hgroup元素中。如果除了主标题之外，还有其他内容，比如内容摘要、发表时间、作者、图片或者小标题链接等，那就应该把他们放在一个 header元素中。
header
hgroup
h1给个人博客增加色彩元素提升网站用户体验/h1
h2网页的色彩——决定用户是否驻足停留的关键/h2
/hgroup
p class="Byline"design by DanceSmile/p
/header
接下来是文章正文部分：
部分代码：
div class="Content"
p第一眼看到杨青个人博客网站的时候，如果你喜欢.../p
...
/div
正文当中还有一幅插图，html5新增加了插图这个figure语义元素，figcaption不是只能包含文本，任何html元素都可以，比如链接、小图标。figcaption包含了对图片的完整说明，所以alt文本就显得多于了，这种情况下，可以把img元素中的alt属性删除：
figure
img src="/d/file/jstt/bj/2013-06-19/200e781ddaa1d92cc3996637d06c38b2.jpg"
figcaption图片来源：腾讯CDC《浅析网页色彩应用》/figcaption
/figure
最后在把上面的代码写在article里面。
footer部分只是一些简单的页脚信息。
