JSPDreamweaver_CS4CSSAjax动态网站开发典型案例.doc

设计Web标准网页 Dreamweaver是组建网站和设计网页的专业工具，以“所见即所得”的特点，使不同层次的用户都可以快速创建网页。Dreamweaver的每一次版本更新都会带来很多新功能和新特性。在Dreamweaver CS3基础上，Adobe公司又发布了最新版的网页制作和设计软件Dreamweaver CS4。Dreamweaver CS4新增了很多令人惊喜的新功能，在本章中通过个人主页、新闻查看页和博客首页3个实例详细介绍如何使用该软件设计符合Web标准的网页，以及使用CSS设计页面布局时的常用解决方案。 了解网页制作流程 了解Dreamweaver CS4新增功能 熟悉CSS的基本语法和应用方法 掌握CSS样式的创建方法 掌握CSS样式的定义和基本作用 掌握使用CSS进行简单页面布局 熟悉CSS兼容性的解决方法 了解常用的CSS技巧 1.1 设计个人主页 个人网页如同个人简历或者个人的记事本一样，它可以显示用户的一些个人信息，也可以帮用户记录一些琐事。个人网页与企业类、门户类网页相比，比较随意、独特。它主要展现与个人相关的个性，如网上可看到很多名人的个人站点。 1.1.1 网页制作流程 为了加快网站建设的速度和减少失误，应该采用一定的制作流程来策划、设计、制作和发布网站。使用制作流程确定制作步骤，以确保每一步顺利完成，而不影响下一步的进行。理想的制作流程能帮助设计者解决策划网站的繁琐性问题，降低项目失败的风险。制作流程的第一阶段是规划项目和采集信息，接着是网站规划和设计网页阶段，最后是上传和维护网站阶段。 每个阶段都有独特的步骤，但相连的各阶段的界限并不明显。也就是说，每一阶段并不总是有一个固定的目标。有时候，某一阶段可能会因为项目中未曾预料的改变而更改。步骤的实际数目和名称因人而异，但是总体制作流程如图1-1所示。 图1-1 网站开发流程 1.1.2 网页制作工具 Dreamweaver是一个专业的HTML编辑器，用于对Web站点、Web网页和Web应用程序进行设计、编码与开发。无论使用者喜欢直接编写HTML代码，还是偏爱在可视化编辑环境中工作，Dreamweaver都会为使用者提供众多的帮助工具，丰富使用者的网页创作体验。 而作为该软件的最新版本Dreamweaver CS4，除了具有以前版本中的所有功能外，还增加了一些新功能，可以在可视化工作环境中可制作出更多的网页效果。主要体现在如下方面。 支持领先Web技术 在支持大多数领先Web开发技术的工具中进行设计和编码，这些技术包括HTML、XHTML、CSS、XML、JavaScript、Ajax、PHP、Adobe ColdFusion软件和ASP。 CSS最佳推荐新增功能 无须编写代码即可实施CSS最佳推荐。参考CSS最佳推荐实现可视化设计，并辅以通俗易懂的实用概念说明。用户可以在支持可访问性和最佳推荐的同时，创建基于Ajax的交互性 应用。 全面的CSS支持增强功能 使用Dreamweaver CS4中增强的CSS实施工具可使用户的网站脱颖而出。借助“设计”和“实时视图”中的即时可视反馈，在“属性”面板中可快速定义和修改CSS规则。使用新增的“相关文件”和“代码导航器”功能可找到定义特定CSS规则的位置。 HTML数据集新增功能 无须掌握数据库或XML编码即可将动态数据的强大功能融入网页中。Spry数据集可以将简单的HTML表中的内容识别为交互式数据源。 代码导航器新增功能 新增的“代码导航器”功能可显示影响当前选定内容的所有代码源，如CSS规则、服务器端包括、外部JavaScript功能、Dreamweaver模板、iframe源文件等。 1.1.3 制作个人主页 在设计个人站点时，可以使用表格来控制页面的版式，再使用图文混排的方式进行布局。除此之外，还可以通过设置文本的大小、颜色、对齐方式等属性，使网页更加美观，并对一些文本可以突出显示。 STEP|01 新建文档，在【标题】文本框中输入“欢迎光临我的主页”，按Ctrl＋S组合键保存文档。在空白页面中右击，选择【页面属性】命令，在打开的【页面属性】对话框中设置【左边距】、【右边距】、【上边距】和【下边距】都为0，单击【确定】按钮，如图1-2所示。 图1-2 设置页面属性和标题 STEP|02 单击【常用】选项卡中的【表格】按钮，打开【表格】对话框，设置【行数】和【列数】均为1，【表格宽度】为100%，【边框粗细】为0像素，单击【确定】按钮创建第一个表格，如图1-3所示。 图1-3 插入1行1列表格 STEP|03 单击选中这个单元格，在【属性】面板上设置单元格的高度为100。进入【拆分】视图，输入代码“background=images/header.gif”为单元格设置