动态网站开发典型案例

《动态网站开发典型案例》由会员分享，可在线阅读，更多相关《动态网站开发典型案例（20页珍藏版）》请在金锄头文库上搜索。

1、011设计 Web 标准网页Dreamweaver 是组建网站和设计网页的专业工具，以“所见即所得”的特点，使不同层次的用户都可以快速创建网页。Dreamweaver 的每一次版本更新都会带来很多新功能和新特性。在 Dreamweaver CS3 基础上，Adobe 公司又发布了最新版的网页制作和设计软件 Dreamweaver CS4。Dreamweaver CS4新增了很多令人惊喜的新功能，在本章中通过个人主页、新闻查看页和博客首页 3 个实例详细介绍如何使用该软件设计符合 Web 标准的网页，以及使用 CSS 设计页面布局时的常用解决方案。 了解网页制作流程 了解 Dreamweaver

2、 CS4 新增功能 熟悉 CSS 的基本语法和应用方法 掌握 CSS 样式的创建方法 掌握 CSS 样式的定义和基本作用 掌握使用 CSS 进行简单页面布局 熟悉 CSS 兼容性的解决方法 了解常用的 CSS 技巧 1.1设计个人主页个人网页如同个人简历或者个人的记事本一样，它可以显示用户的一些个人信息，也可以帮用户记录一些琐事。个人网页与企业类、门户类网页相比，比较随意、独特。它主要展现与个人相关的个性，如网上可看到很多名人的个人站点。1.1.1 网页制作流程为了加快网站建设的速度和减少失误，应该采用一定的制作流程来策划、设计、制作和发布网站。使用制作流程确定制作步骤，以确保每一步顺利完成，

3、而不影响下一步的进行。理想的制作流程能帮助设计者解决策划网站的繁琐性问题，降低项目失败的风险。制作流程的第一阶段是规划项目和采集信息，接着是网站规划和设计网页阶段，最后是上传和维护网站阶段。每个阶段都有独特的步骤，但相连的各阶段的界限并不明显。也就是说，每一阶段并不总是有一个固定的目标。有时候，某一阶段可能会因为项目中未曾预料的改变而更改。步骤的实际数目和名称因人而异，但是总体制作流程如图 1-1 所示。JSP+Dreamweaver CS4+CSS+Ajax 动态网站开发典型案例JSP+Dreamweaver CS4+CSS+Ajax 动态网站开发典型案例2图 1-1 网站开发流程1.1.2

4、 网页制作工具Dreamweaver 是一个专业的 HTML 编辑器，用于对 Web 站点、Web 网页和 Web 应用程序进行设计、编码与开发。无论使用者喜欢直接编写HTML 代码，还是偏爱在可视化编辑环境中工作，Dreamweaver 都会为使用者提供众多的帮助工具，丰富使用者的网页创作体验。而作为该软件的最新版本 Dreamweaver CS4，除了具有以前版本中的所有功能外，还增加了一些新功能，可以在可视化工作环境中可制作出更多的网页效果。主要体现在如下方面。 支持领先 Web 技术 在支持大多数领先Web 开发技术的工具中进行设计和编码，这些技术包括HTML、XHTML、CSS、XM

5、L、JavaScript、Ajax、PHP、Adobe ColdFusion 软件和 ASP。CSS 最佳推荐新增功能 无须编写代码即可实施 CSS 最佳推荐。参考 CSS 最佳推荐实现可视化设计，并辅以通俗易懂的实用概念说明。用户可以在支持可访问性和最佳推荐的同时，创建基于 Ajax 的交互性 应用。全面的 CSS 支持增强功能 使用Dreamweaver CS4 中增强的 CSS 实施工具可使用户的网站脱颖而出。借助“设计”和“实时视图”中的即时可视反馈，在“属性”面板中可快速定义和修改 CSS规则。使用新增的“相关文件”和“代码导航器”功能可找到定义特定 CSS 规则的位置。HTML 数

6、据集新增功能 无须掌握数据库或 XML 编码即可将动态数据的强大功能融入网页中。Spry 数据集可以将简单的 HTML 表中的内容识别为交互式数据源。代码导航器新增功能 新增的“代码导航器”功能可显示影响当前选定内容的所有0 1第 1 章 设计 Web 标准网页3代码源，如 CSS 规则、服务器端包括、外部 JavaScript 功能、Dreamweaver 模板、iframe 源文件等。1.1.3 制作个人主页在设计个人站点时，可以使用表格来控制页面的版式，再使用图文混排的方式进行布局。除此之外，还可以通过设置文本的大小、颜色、对齐方式等属性，使网页更加美观，并对一些文本可以突出显示。 ST

7、EP|01 新建文档，在【标题】文本框中输入“欢迎光临我的主页” ，按 CtrlS 组合键保存文档。在空白页面中右击，选择【页面属性】命令，在打开的【页面属性】对话框中设置【左边距】 、【右边距】 、 【上边距】和【下边距】都为 0，单击【确定】按钮，如图 1-2 所示。设置边距为 0 后的显示效果 图 1-2 设置页面属性和标题STEP|02 单击【常用】选项卡中的【表格】按钮，打开【表格】对话框，设置【行数】和【列数】均为 1， 【表格宽度】为 100%， 【边框粗细】为 0 像素，单击【确定】按钮创建第一个表格，如图 1-3 所示。插入一个 1 行 1 列的表格 图 1-3 插入 1 行

8、 1 列表格STEP|03 单击选中这个单元格，在【属性】面板上设置单元格的高度为 100。进入【拆分】视图，输入代码“background=“images/header.gif“”为单元格设置一张背景图片，如图 1-4 所示。输入背景图片代码 设置后效果 图 1-4 设置表格背景图片注意 利用表格可以控制文本、图像和 Flash 在页 面上出现的位置，不必担心页面的整体结构 遭到破坏，或者在浏览时无法正常显示。 STEP|04 在单元格中输入“我的个人主页” ，然后在【属性】面板中设置【字体】为“黑体” ，【大小】为 28， 【文本颜色】为#FDFDE0，如图1-5 所示。设置字体的 大小和

9、颜色 图 1-5 设置标题文字的字体属性STEP|05 接下来制作导航栏目。单击【常用】选项卡中的【表格】按钮，创建第二个表格，设置为 6 列、间距为 1。选择表格，在【属性】面板中设置表格的【行】 、 【列】 、 【宽】 、 【间距】 、【边框】 ，并设置【背景颜色】为#006600，如图1-6 所示。JSP+Dreamweaver CS4+CSS+Ajax 动态网站开发典型案例JSP+Dreamweaver CS4+CSS+Ajax 动态网站开发典型案例4注意 当用户打开【表格】对话框时，看到上面 的默认设置是上一次设置的参数。每次对 【表格】对话框进行更改后，由于Dream- weave

10、r 具有自动记忆功能，会记住用户这次的设置。 设置表格属性 图 1-6 设置 1 行 6 列表格属性STEP|06 单击第二个表格，然后单击标签选中该行，在【属性】面板中，设置【高】为18、 【背景颜色】为#669900、 【水平】对齐方式为“居中对齐” 、 【垂直】为“底部” 、字体【大小】为 12、 【文本颜色】为#EFF6D6，如图 1-7 所示。设置单元格的属性 图 1-7 设置单元格属性STEP|07 选中前 5 个单元格，设置它们的宽度为120，分别输入文字“我的日记” 、 “我的收藏” 、“我的相册” 、 “我的朋友”和“给我留言” ，如图1-8 所示。设置单元格宽度 图 1-8

11、 设置菜单文字STEP|08 打开【页面属性】对话框，设置页面的【背景颜色】为#FDFDE0。单击【常用】选项卡中的【表格】按钮，设置参数为 1 行 2 列，【边框粗细】 、 【单元格边距】 、 【单元格间距】均为 0，单击【确定】按钮，创建第三个表格。单击右边的单元格，在【属性】面板中设置它的宽度和对齐方式，如图 1-9 所示。设置单元格的宽 度和对齐方式 图 1-9 调整单元格宽度和对齐方式STEP|09 将光标置于右边的单元格中，单击【常用】选项卡中的【图像】按钮，在打开的【选择图像源文件】对话框中选择图像 tree.jpg，单击【确定】按钮返回，如图 1-10 所示。插入图像之后 0

12、1第 1 章 设计 Web 标准网页5图 1-10 插入图像STEP|10 将光标置于左边的单元格中，在【属性】面板中设置它的【垂直】对齐方式为“顶端” 。单击【常用】选项卡中的【表格】按钮，设置参 数为 4 行 1 列， 【表格宽度】为 90%， 【边框粗 细】 、 【单元格边距】 、 【单元格间距】均为 0，单击【确定】按钮，创建第四个表格。在【属性】面板中设置表格的【对齐】方式为“居中对齐” ，如图 1-11 所示。 STEP|11 将光标置于第一个单元格中，输入文章标题，在【属性】面板中设置文字的大小、颜色、对齐方式以及单元格的高度、对齐方式等参数，如图 1-12 所示。设置表格的 对

13、齐方式 图 1-11 设置表格对齐方式图 1-12 设置文章标题属性STEP|12 在第二个单元格中输入文章的正文，在【属性】面板中设置文字的大小和颜色，如图 1-13 所示。输入正文内容 图 1-13 设置正文内容属性STEP|13 将光标置于第三个单元格中，设置它的高度为 50。单击【常用】选项卡中的【表格】按钮，设置参数为 1 行 7 列， 【边框粗细】 、 【单元格边距】 、 【单元格间距】均为 0，单击【确定】按钮，创建一个嵌套表格。在前 7 个单元格中分别输入“友情链接” 、 “百度” 、 “谷歌” 、 “新浪” 、“网易” 、 “搜狐” “计算机教程网” ，按照上一步骤的方法设置

14、字体的大小和颜色，并拖动表格边框调整到合适宽度，如图 1-14 所示。设置字体颜色 图 1-14 设置表格属性STEP|14 将光标置于第四个单元格中，设置它的高度为 50，输入版权信息。选中版权信息，在【属性】面板中设置【文本大小】为 12， 【文本颜色】为#999999，如图 1-15 所示。设置版权文字格式 JSP+Dreamweaver CS4+CSS+Ajax 动态网站开发典型案例JSP+Dreamweaver CS4+CSS+Ajax 动态网站开发典型案例6图 1-15 设置版权文字格式STEP|15 至此个人网站的首页制作完成，按CtrlS 组合键保存文档，再按 F12 键就可以

15、在 IE窗口中预览网页效果了。最终效果如图 1-16 所示。图 1-16 个人主页效果1.2设计 CSSCSS（Cascading Style Sheets，层叠样式表）是一种应用于网页的标记语言，其作用是为HTML、XHTML 以及 XML 等标记语言提供样式描述。当 IE 浏览器读取 HTML、XHTML 或XML 文档时，同时将加载相对应的 CSS 样式，即将按照样式描述的格式显示网页内容。CSS 文件用于控制网页的布局格式和网页内容的样式，所以用户仅需要修改 CSS 文件内容即可改变网页显示的效果。使用 CSS 后可以大大降低网页设计者的工作量，提高网页设计的效率。1.2.1 CSS

16、概述使用 CSS 可以非常灵活并更好地控制页面的确切外观。例如，控制许多文本属性，包括特定字体和字号大小，粗体、斜体、下划线和文本阴影，文本颜色和背景颜色，链接颜色和链接下划线等。通过使用 CSS 控制字体，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。除设置文本格式外，还可以使用 CSS 控制Web 页面中块级别元素的格式和定位。可以对块级元素执行的操作有：设置边距和边框、将它们放置在特定位置、添加背景颜色、在周围设置浮动文本等。对块级元素进行操作的方法实际上就是使用 CSS 进行页面布局设置的方法。提示 块级元素是一段独立的内容，在HTML 中通 常由一个新行分隔，并在视觉上设置为块的 格式。例如，h1 标签、p 标签和 div 标签都 在网页上生成块级元素。 CSS 技术的最大优势有如下几点。 样式重用 编写好的样式（CSS）文档，可以被用于多个 HTML 文档，样式就达到了重用的目的，节省了编写代码的时间，统一了多个 H