HTML项目.ppt

个人网站 博客 2 问题描述 互联网在我国普及的前期 由于当时很多大型网站提供免费空间及域名 个人网站成为了很多人展示自我的选择 其实 当前网络流行的个人博客 qq空间都是另外一种新式的个人网站 不过用户只需考虑内容的填充 而不考虑技术的实现 我们可以运用html课程中学过的表格布局 表单验证及css样式等 完成一个漂亮的个人网站 所需技术 html基本标签 表格标签布局javascript表单验证 css层叠样式表项目功能 用户注册 用户登录 首页 日志展示相册展示 个人信息展示 留言板展示 3 问题分析 1 所需页面 用户注册页面 reg html网站首页 index html用户登录及综合展示 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 5 难点分析 日志分类关键代码 日志列表internet技术的应用2009年05月0823 35在信息技术发达的今天 读者每天都可以感受到internet技术在生活中的巨大作用 通过internet 读者可以每天浏览到最新的新闻 可以参与论坛各种话题火热的讨论 可以和世界各地的朋友一起玩游戏等 日志分类关键代码 css righta color 333 righta visited color 333 righta hover color d9d7cb rightp width 700px height 20px background f4f4f0 border 1pxsolid 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 1pxsolid d9d7cb margin 10px margin bottom 0px float left clear left left toptable text align center width auto height 75 margin 5px left topinput border 1pxsolid width 100px 登录模块关键代码分析最新日志模块代码分析 7 难点分析 导航条关键代码 首页 日志 相册 个人档案 留言 导航条关键代码样式 nav height 35px background e6e4dburl img nav bg jpg navul margin left 30px navulli float left navula 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 教员解释关键代码 8 难点分析 注册页面关键代码 用户名 真实姓名 注册页面关键代码 javascript functionsubmit1 if document registerform username value length 0 alert 请填写用户名 returnfalse if document registerform username value length20 alert 用户名的长度在6 20位字符之间 returnfalse if document registerform realname value length 0 alert 请填写真实姓名 returnfalse 难点1 文字底部如何使用虚线显示 类似个人档案 难点2 如何验证文本框不为空 注册成功关键代码 javascript 获取用户输入的值varlxdz document registerform lxdz value 使用javascript输出html页面document write document write document write document write document write 注册成功 document write document write 请认真保管你的注册信息 document write 用 教员解释关键代码 9 难点分析 留言板关键代码 张三留言说 多拍点相片啊 大家分享一下 2009 5 812 22 28李四留言说 相片很好看 真的 不骗你 2009 5 812 22 28王五留言说 能否放一点北京奥运会的内容啊 2009 5 812 22 28搜里留言说 还行了 虽然简单了一点 2009 5 812 22 28周六留言说 嗯 不错 看来学习网站制作并不困难 2009 5 812 22 28 留言关键代码 javasciprt functionsubmsg document myform showmsg value r n匿名用户留言说 document myform msg value t 2009 5 813 34 50 r n 难点1 如何显示所有留言信息 难点2 如何实现留言 显示留言信息框名 留言框名 10 难点分析 个人档案关键代码 基本资料用户名 张三昵日 1988年1月5日 日志分类关键代码 css list width 80 list style none listli height 22px line height 22px border bottom 1pxdashed 6cf 底部使用虚线显示 难点 虚线如何制作 11 项目效果演示 首页 日志 相册 个人档案 留言 12 第一阶段 第一阶段 60分钟 实现网站首页 index html首页分为 顶部 导航条 底部网页结构图 网站头部 页面导航条 网页主体 内嵌框架页面 iframe 首页中iframe内嵌的main html页面 13 难点分析 导航条关键代码 首页 日志 相册 个人档案 留言 导航条关键代码样式 nav height 35px background e6e4dburl img nav bg jpg navul margin left 30px navulli float left navula 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分钟 实现会员登录和综合信息页面 main html实现登录模块 最新日志 最新相册 15 难点分析 登录关键代码 用户登陆用户名 密册 登录关键代码 css left top width 180px height 150px border 1pxsolid d9d7cb margin 10px margin bottom 0px float left clear left left toptable text align center width auto height 75 margin 5px left topinput border 1pxsolid width 100px 登录模块关键代码分析最新日志模块代码分析 16 第三阶段 第三阶段 60分钟 实现日志分类页面 article html 17 难点分析 日志分类关键代码 日志列表internet技术的应用2009年05月0823 35在信息技术发达的今天 读者每天都可以感受到internet技术在生活中的巨大作用 通过internet 读者可以每天浏览到最新的新闻 可以参与论坛各种话题火热的讨论 可以和世界各地的朋友一起玩游戏等 日志分类关键代码 css righta color 333 righta visited color 333 righta hover color d9d7cb rightp width 700px height 20px background f4f4f0 border 1pxsolid 999 text indent 2em line height 1 5em white space nowrap overflow hidden text overflow ellipsis 以 显示内容 难点 如何使内容过多时 用 显示 18 第四阶段 第四阶段 30分钟 实现相册分类页面 photo html 教员解释关键代码 19 第五阶段 第五阶段 30分钟 实现个人档案页面 personaldata html 虚线如何制作 20 难点分析 个人档案关键代码 基本资料用户名 张三昵日 1988年1月5日 日志分类关键代码 css list width 80 list style none listli height 22px line height 22px border bottom 1pxdashed 6cf 底部使用虚线显示 难点 虚线如何制作 21 第六阶段 第六阶段 40分钟 实现留言板页面 msg html 如何显示所有留言信息 如何实现留言 22 难点分析 留言板关键代码 张三留言说 多拍点相片啊 大家分享一下 2009 5 812 22 28李四留言说 相片很好看 真的 不骗你 2009 5 812 22 28王五留言说 能否放一点北京奥运会的内容啊 2009 5 812 22 28搜里留言说 还行了 虽然简单了一点 2009 5 812 22 28周六留言说 嗯 不错 看来学习网站制作并不困难 2009 5 812 22 28 留言关键代码 javasciprt functionsubmsg document myform showmsg value r n匿名用户留言说 document myform msg value t 2009 5 813 34 50 r n 难点1 如何显示所有留言信息 难点2 如何实现留言 显示留言信息框名 留言框名 23 第七阶段 第四阶段 80分钟 实现网站用户注册页面 reg html 表示必填 如何使用虚线显示 如何显示注册成功页面 24 难点分析 注册页面关键代码 用户名 真实姓名 注册页面关键代码 javascript functionsubmit1 if document registerform username value length 0 alert 请填写用户名 returnfalse if document registerform username value length20 alert 用户名的长度在6 20位字符之间 returnfalse if document registerform realname value length 0 alert 请填写真实姓名 returnfalse 难点1 文字底部如何使用虚线显示 类似个人档案 难点2 如何验证文本框不为空 注册成功关键代码 javascript 获取用户输入的值varlxdz document registerform lxdz value 使用javascript输出html页面document write document write document write document write document write 注册成功 document write document