HTML 项目.pptVIP

个人网站——博客 问题描述 问题分析-1 阶段划分 第一阶段（60分钟）：网站首页：index.html 第二阶段（60分钟）：会员登录及网站综合信息显示：main.html 第三阶段（60分钟）：日志分类页面：article.html 第四阶段（30分钟）：相册分类页面：photo.html 第五阶段（30分钟）：个人档案页面：personalData.html 第六阶段（40分钟）：留言板页面：msg.html 第七阶段（80分钟）：网站用户注册页面：reg.html 难点分析 难点：如何使内容过多时，用“…”显示？ 难点分析 登录模块关键代码分析 最新日志模块代码分析 难点分析 难点分析 难点1：文字底部如何使用虚线显示？（类似个人档案） 难点2：如何验证文本框不为空？ 难点分析 难点1：如何显示所有留言信息？ 难点2：如何实现留言？ 难点分析 难点：虚线如何制作？ 项目效果演示 第一阶段 第一阶段（60分钟）： 实现网站首页：index.html 首页分为：顶部、导航条、底部 网页结构图： 难点分析 第二阶段 第二阶段（60分钟）： 实现会员登录和综合信息页面：main.html 实现登录模块、最新日志、最新相册 难点分析 登录模块关键代码分析 最新日志模块代码分析 第三阶段 第三阶段（60分钟）： 实现日志分类页面： article.html 难点分析 难点：如何使内容过多时，用“…”显示？ 第四阶段 第四阶段（30分钟）： 实现相册分类页面：photo.html 第五阶段 第五阶段（30分钟）： 实现个人档案页面：personalData.html 难点分析 难点：虚线如何制作？ 第六阶段 第六阶段（40分钟）： 实现留言板页面：msg.html 难点分析 难点1：如何显示所有留言信息？ 难点2：如何实现留言？ 第七阶段 第四阶段（80分钟）： 实现网站用户注册页面：reg.html 难点分析 难点1：文字底部如何使用虚线显示？（类似个人档案） 难点2：如何验证文本框不为空？ 阶段检查 针对几个阶段抽查学员的编码结果 抽查学员编写的完整代码，要求学员上台讲解，并演示运行结果 教员给出点评 总结 本项目通过运用HTML课程中的知识，制作了一个完整的个人网站项目。通过本项目的学习能进一步巩固理论课中学过的知识，并且进一步熟悉网站制作的流程。通过该项目我们得出如下几点结论： 通过CSS能够实现丰富多彩的页面效果。 CSS+DIV布局可以实现复杂的页面结构。 Javascript能帮助我们实现复杂的表单验证和表单元素的赋值。 * 互联网在我国普及的前期，由于当时很多大型网站提供免费空间及域名，个人网站成为了很多人展示自我的选择。其实，当前网络流行的个人博客、QQ空间都是另外一种新式的个人网站，不过用户只需考虑内容的填充，而不考虑技术的实现。我们可以运用HTML课程中学过的表格布局、表单验证及CSS样式等，完成一个漂亮的个人网站。 所需技术：HTML基本标签，表格标签布局 Javascript表单验证，CSS层叠样式表 项目功能：用户注册、用户登录、首页、日志展示 相册展示、个人信息展示、留言板展示 。 所需页面： 用户注册页面：reg.html网站首页：index.html用户登录及综合展示：main.html日志页面：article.html相册页面：photo.html个人档案：personalData.html留言板页面：msg.html 日志分类关键代码： div id=right h4|日志列表/h4 h5a href=javascript:void(0);Internet技术的应用/a/h5 span class=date2009年05月08 23:35/span br / p在信息技术发达的今天，读者每天都可以感受到Internet技术在生活中的巨大作用。通过Internet，读者可以每天浏览到最新的新闻，可以参与论坛各种话题火热的讨论，可以和世界各地的朋友一起玩游戏等。/p hr / /div 日志分类关键代码（CSS）： #right a { color:#333; } #right a:visited { color:#333; } #right a:hover { color:#d9d7cb; } #right p { width:700px; height:20px; background:#f4f4f0; border:1px solid #999; text-indent:2em; line-height:1.5em; white-space:nowra