《HTML_项目.ppt》由会员分享，可在线阅读，更多相关《HTML_项目.ppt（27页珍藏版）》请在三一办公上搜索。
1、个人网站博客,2,问题描述,互联网在我国普及的前期，由于当时很多大型网站提供免费空间及域名，个人网站成为了很多人展示自我的选择。其实，当前网络流行的个人博客、QQ空间都是另外一种新式的个人网站，不过用户只需考虑内容的填充，而不考虑技术的实现。我们可以运用HTML课程中学过的表格布局、表单验证及CSS样式等，完成一个漂亮的个人网站。所需技术：HTML基本标签，表格标签布局 Javascript表单验证，CSS层叠样式表项目功能：用户注册、用户登录、首页、日志展示 相册展示、个人信息展示、留言板展示,。,3,问题分析-1,所需页面：,用户注册页面：reg.html网站首页：index.html用户
2、登录及综合展示：main.html日志页面：article.html相册页面：photo.html个人档案：personalData.html留言板页面：msg.html,4,阶段划分,第一阶段（60分钟）：网站首页：index.html 第二阶段（60分钟）：会员登录及网站综合信息显示：main.html第三阶段（60分钟）：日志分类页面：article.html第四阶段（30分钟）：相册分类页面：photo.html第五阶段（30分钟）：个人档案页面：personalData.html第六阶段（40分钟）：留言板页面：msg.html第七阶段（80分钟）：网站用户注册页面：reg.html
3、,5,难点分析,日志分类关键代码：|日志列表 Internet技术的应用 2009年05月08 23:35 在信息技术发达的今天，读者每天都可以感受到Internet技术在生活中的巨大作用。通过Internet，读者可以每天浏览到最新的新闻，可以参与论坛各种话题火热的讨论，可以和世界各地的朋友一起玩游戏等。,日志分类关键代码（CSS）：#right a color:#333;#right a:visited color:#333;#right a:hover color:#d9d7cb;#right p width:700px;height:20px;background:#f4f4f0;bo
4、rder:1px solid#999;text-indent:2em;line-height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-以“”显示内容,难点：如何使内容过多时，用“”显示？,6,难点分析,登录关键代码：|用户登陆 用户名：密册,登录关键代码（CSS）：#left-top width:180px;height:150px;border:1px solid#d9d7cb;margin:10px;margin-bottom:0px;float:left;clear:left;#left-top t
5、abletext-align:center;width:auto;height:75%;margin:5px;#left-top inputborder:1px solid;width:100px;,登录模块关键代码分析最新日志模块代码分析,7,难点分析,导航条关键代码：首页|日志|相册|个人档案|留言,导航条关键代码样式：#nav height:35px;background:#e6e4db url(./img/nav_bg.jpg);#nav ul margin-left:30px;#nav ul li float:left;#nav ul a display:block;width:85
6、px;height:25px;padding-top:10px;text-decoration:none;letter-spacing:15px;text-align:center;color:#000;font-size:15px;font-weight:bold;,教员解释关键代码,8,难点分析,注册页面关键代码：用 户 名：*真实姓名：*.,注册页面关键代码（Javascript）：function submit1()if(document.registerForm.username.value.length=0)alert(请填写用户名!);return false;if(docume
7、nt.registerForm.username.value.length 20)alert(用户名的长度在6-20位字符之间!);return false;if(document.registerForm.realname.value.length=0)alert(请填写真实姓名!);return false;.,难点1：文字底部如何使用虚线显示？（类似个人档案）难点2：如何验证文本框不为空？,注册成功关键代码（Javascript）：获取用户输入的值var lxdz=document.registerForm.lxdz.value;.使用Javascript输出HTML页面 documen
8、t.write();document.write();document.write();document.write();document.write(|注册成功);document.write();document.write(请认真保管你的注册信息);document.write(用,教员解释关键代码,9,难点分析,留言板关键代码：张三 留言说：多拍点相片啊，大家分享一下。-2009-5-8 12:22:28李四 留言说：相片很好看，真的，不骗你。-2009-5-8 12:22:28王五 留言说：能否放一点北京奥运会的内容啊。-2009-5-8 12:22:28搜里 留言说：还行了，虽然简
9、单了一点。-2009-5-8 12:22:28周六 留言说：嗯，不错，看来学习网站制作并不困难。-2009-5-8 12:22:28,留言关键代码（Javasciprt）：function subMsg()document.myform.showmsg.value+=rn匿名用户 留言说：+document.myform.msg.value+t-2009-5-8 13:34:50rn;,难点1：如何显示所有留言信息？难点2：如何实现留言？,显示留言信息框名,留言框名,10,难点分析,个人档案关键代码：基本资料 用 户 名：张三 昵日：1988年1月5日,日志分类关键代码（CSS）：.list
10、width:80%;list-style:none;.list li height:22px;line-height:22px;border-bottom:1px dashed#6CF;-底部使用虚线显示,难点：虚线如何制作？,11,项目效果演示,首页,日志,相册,个人档案,留言,12,第一阶段,第一阶段（60分钟）：实现网站首页：index.html首页分为：顶部、导航条、底部网页结构图：,网站头部,页面导航条,网页主体,内嵌框架页面（iframe）,首页中iframe内嵌的main.html页面,13,难点分析,导航条关键代码：首页|日志|相册|个人档案|留言,导航条关键代码样式：#nav
11、 height:35px;background:#e6e4db url(./img/nav_bg.jpg);#nav ul margin-left:30px;#nav ul li float:left;#nav ul a display:block;width:85px;height:25px;padding-top:10px;text-decoration:none;letter-spacing:15px;text-align:center;color:#000;font-size:15px;font-weight:bold;,教员解释关键代码,14,第二阶段,第二阶段（60分钟）：实现会员
12、登录和综合信息页面：main.html实现登录模块、最新日志、最新相册,15,难点分析,登录关键代码：|用户登陆 用户名：密册,登录关键代码（CSS）：#left-top width:180px;height:150px;border:1px solid#d9d7cb;margin:10px;margin-bottom:0px;float:left;clear:left;#left-top tabletext-align:center;width:auto;height:75%;margin:5px;#left-top inputborder:1px solid;width:100px;,登录
13、模块关键代码分析最新日志模块代码分析,16,第三阶段,第三阶段（60分钟）：实现日志分类页面：article.html,17,难点分析,日志分类关键代码：|日志列表 Internet技术的应用 2009年05月08 23:35 在信息技术发达的今天，读者每天都可以感受到Internet技术在生活中的巨大作用。通过Internet，读者可以每天浏览到最新的新闻，可以参与论坛各种话题火热的讨论，可以和世界各地的朋友一起玩游戏等。,日志分类关键代码（CSS）：#right a color:#333;#right a:visited color:#333;#right a:hover color:#d
14、9d7cb;#right p width:700px;height:20px;background:#f4f4f0;border:1px solid#999;text-indent:2em;line-height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-以“”显示内容,难点：如何使内容过多时，用“”显示？,18,第四阶段,第四阶段（30分钟）：实现相册分类页面：photo.html,教员解释关键代码,19,第五阶段,第五阶段（30分钟）：实现个人档案页面：personalData.html,虚线如何制作,
15、20,难点分析,个人档案关键代码：基本资料 用 户 名：张三 昵日：1988年1月5日,日志分类关键代码（CSS）：.list width:80%;list-style:none;.list li height:22px;line-height:22px;border-bottom:1px dashed#6CF;-底部使用虚线显示,难点：虚线如何制作？,21,第六阶段,第六阶段（40分钟）：实现留言板页面：msg.html,如何显示所有留言信息,如何实现留言,22,难点分析,留言板关键代码：张三 留言说：多拍点相片啊，大家分享一下。-2009-5-8 12:22:28李四 留言说：相片很好看，
16、真的，不骗你。-2009-5-8 12:22:28王五 留言说：能否放一点北京奥运会的内容啊。-2009-5-8 12:22:28搜里 留言说：还行了，虽然简单了一点。-2009-5-8 12:22:28周六 留言说：嗯，不错，看来学习网站制作并不困难。-2009-5-8 12:22:28,留言关键代码（Javasciprt）：function subMsg()document.myform.showmsg.value+=rn匿名用户 留言说：+document.myform.msg.value+t-2009-5-8 13:34:50rn;,难点1：如何显示所有留言信息？难点2：如何实现留言？
17、,显示留言信息框名,留言框名,23,第七阶段,第四阶段（80分钟）：实现网站用户注册页面：reg.html,*表示必填,如何使用虚线显示,如何显示注册成功页面,24,难点分析,注册页面关键代码：用 户 名：*真实姓名：*.,注册页面关键代码（Javascript）：function submit1()if(document.registerForm.username.value.length=0)alert(请填写用户名!);return false;if(document.registerForm.username.value.length 20)alert(用户名的长度在6-20位字符之间
18、!);return false;if(document.registerForm.realname.value.length=0)alert(请填写真实姓名!);return false;.,难点1：文字底部如何使用虚线显示？（类似个人档案）难点2：如何验证文本框不为空？,注册成功关键代码（Javascript）：获取用户输入的值var lxdz=document.registerForm.lxdz.value;.使用Javascript输出HTML页面 document.write();document.write();document.write();document.write();do
19、cument.write(|注册成功);document.write();document.write(请认真保管你的注册信息);document.write(用,教员解释关键代码,25,阶段检查,针对几个阶段抽查学员的编码结果抽查学员编写的完整代码，要求学员上台讲解，并演示运行结果教员给出点评,26,总结,本项目通过运用HTML课程中的知识，制作了一个完整的个人网站项目。通过本项目的学习能进一步巩固理论课中学过的知识，并且进一步熟悉网站制作的流程。通过该项目我们得出如下几点结论：通过CSS能够实现丰富多彩的页面效果。CSS+DIV布局可以实现复杂的页面结构。Javascript能帮助我们实现复杂的表单验证和表单元素的赋值。,27,
