一、任务目的
博客网站页面设计使学生熟练掌握网页编辑过程,综合应用所学的知识,熟练使用HTML标记和HTML5新增元素，进行网页制作。
二、任务要求
博客网页制作要合理布局页面，使用相应的页面标记添加页面内容，使页面内容丰富，结构合理，布局美观。
三、任务内容
设计博客页面，页面中结构要完整，布局合理，具体要求如下：
1.页面布局
使用DIV对页面进行整体布局。本网站包括：“我的主页(index.html)”、“我的日志(diary.html)”、“我的相册(photo.html)”、“我的资料(information.html)”，共4个页面。
2.四个页面的头部、导航及底部样式相同，网页头部放置自己的头像，文字添加“XXX的博客”（XXX为自己的姓名），表头右侧写自己喜欢的格言或个性签名。导航栏均设置下拉菜单，如图1所示，每个页面的导航需正确链接到相应的页面。网页的正文部分自由设置各个板块。网页底部书写版权信息，文字为“班级+学号+姓名”，如图2所示。
图1导航栏样式
3.“我的主页”(index.html)页面正文部分自由添加板块，内容及样式不指定
4.“我的日志”(diary.html)网页中自由设置日志板块并添加相应内容。内容及样式不指定。
5.“我的相册”(photo.html)页面中至少添加四张自己的照片，合理设置照片的尺寸及间距，实现鼠标放到照片上显示照片信息。
6.“我的资料”(information.html)页面中的核心是一个表单，用于填写个人信息。表单包含单选按钮、复选框、菜单、文件域、提交按钮等控件。实现对姓名、性别、我的爱好、我的家乡、上传头像的信息收集。表单的发送地址为邮
箱：abc@163.com。
7.其他要求
（1）首先创建站点文件夹，然后再创建每一个网页。站点文件夹以“学号+姓名”命名。
（2）站点中用的所有文件，包括网页、图像、音乐、动画等都必须放置在站点文件夹中。
（3）网站的首页文件名应保存为“index.html”或“index.htm”，这是一般服务器默认搜索的站点首页文件名。
（4）博客网站文件应包含CSS样式表，可以设置一个或多个CSS文件。
（5）所给博客网页效果图为范例，网页中除以上具体要求外，所有的文字内容、背景颜色、背景图片、文字颜色、字体、按钮等样式自己任意指定，并实现鼠标悬浮在导航栏及表单上的效果变化。
（6）要求整体结构布局合理，颜色统一美观
