JSP+DreamweaverCS4+CSS+Ajax动态网站开发典型案例.docx

《JSP+DreamweaverCS4+CSS+Ajax动态网站开发典型案例.docx》由会员分享，可在线阅读，更多相关《JSP+DreamweaverCS4+CSS+Ajax动态网站开发典型案例.docx（35页珍藏版）》请在冰豆网上搜索。

JSP+DreamweaverCS4+CSS+Ajax动态网站开发典型案例

设计Web标准网页

Dreamweaver是组建网站和设计网页的专业工具，以“所见即所得”的特点，使不同层次的用户都可以快速创建网页。

Dreamweaver的每一次版本更新都会带来很多新功能和新特性。

在DreamweaverCS3基础上，Adobe公司又发布了最新版的网页制作和设计软件DreamweaverCS4。

DreamweaverCS4新增了很多令人惊喜的新功能，在本章中通过个人主页、新闻查看页和博客首页3个实例详细介绍如何使用该软件设计符合Web标准的网页，以及使用CSS设计页面布局时的常用解决方案。

Ø了解网页制作流程

Ø了解DreamweaverCS4新增功能

Ø熟悉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都会为使用者提供众多的帮助工具，丰富使用者的网页创作体验。

而作为该软件的最新版本DreamweaverCS4，除了具有以前版本中的所有功能外，还增加了一些新功能，可以在可视化工作环境中可制作出更多的网页效果。

主要体现在如下方面。

支持领先Web技术在支持大多数领先Web开发技术的工具中进行设计和编码，这些技术包括HTML、XHTML、CSS、XML、JavaScript、Ajax、PHP、AdobeColdFusion软件和ASP。

CSS最佳推荐新增功能无须编写代码即可实施CSS最佳推荐。

参考CSS最佳推荐实现可视化设计，并辅以通俗易懂的实用概念说明。

用户可以在支持可访问性和最佳推荐的同时，创建基于Ajax的交互性应用。

全面的CSS支持增强功能使用DreamweaverCS4中增强的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"”为单元格设置一张背景图片，如图1-4所示。

图1-4设置表格背景图片

STEP|04在单元格中输入“我的个人主页”，然后在【属性】面板中设置【字体】为“黑体”，【大小】为28，【文本颜色】为#FDFDE0，如图1-5所示。

图1-5设置标题文字的字体属性

STEP|05接下来制作导航栏目。

单击【常用】选项卡中的【表格】按钮，创建第二个表格，设置为6列、间距为1。

选择表格，在【属性】面板中设置表格的【行】、【列】、【宽】、【间距】、【边框】，并设置【背景颜色】为#006600，如图1-6所示。

图1-6设置1行6列表格属性

STEP|06单击第二个表格，然后单击标签选中该行，在【属性】面板中，设置【高】为18、【背景颜色】为#669900、【水平】对齐方式为“居中对齐”、【垂直】为“底部”、字体【大小】为12、【文本颜色】为#EFF6D6，如图1-7所示。

图1-7设置单元格属性

STEP|07选中前5个单元格，设置它们的宽度为120，分别输入文字“我的日记”、“我的收藏”、“我的相册”、“我的朋友”和“给我留言”，如图1-8所示。

图1-8设置菜单文字

STEP|08打开【页面属性】对话框，设置页面的【背景颜色】为#FDFDE0。

单击【常用】选项卡中的【表格】按钮

，设置参数为1行2列，【边框粗细】、【单元格边距】、【单元格间距】均为0，单击【确定】按钮，创建第三个表格。

单击右边的单元格，在【属性】面板中设置它的宽度和对齐方式，如图1-9所示。

图1-9调整单元格宽度和对齐方式

STEP|09将光标置于右边的单元格中，单击【常用】选项卡中的【图像】按钮，在打开的【选择图像源文件】对话框中选择图像tree.jpg，单击【确定】按钮返回，如图1-10所示。

图1-10插入图像

STEP|10将光标置于左边的单元格中，在【属性】面板中设置它的【垂直】对齐方式为“顶端”。

单击【常用】选项卡中的【表格】按钮

，设置参数为4行1列，【表格宽度】为90%，【边框粗细】、【单元格边距】、【单元格间距】均为0，单击【确定】按钮，创建第四个表格。

在【属性】面板中设置表格的【对齐】方式为“居中对齐”，如图1-11所示。

STEP|11将光标置于第一个单元格中，输入文章标题，在【属性】面板中设置文字的大小、颜色、对齐方式以及单元格的高度、对齐方式等参数，如图1-12所示。

图1-11设置表格对齐方式

图1-12设置文章标题属性

STEP|12在第二个单元格中输入文章的正文，在【属性】面板中设置文字的大小和颜色，如图1-13所示。

图1-13设置正文内容属性

STEP|13将光标置于第三个单元格中，设置它的高度为50。

单击【常用】选项卡中的【表格】按钮

，设置参数为1行7列，【边框粗细】、【单元格边距】、【单元格间距】均为0，单击【确定】按钮，创建一个嵌套表格。

在前7个单元格中分别输入“友情链接”、“XX”、“谷歌”、“新浪”、“网易”、“搜狐”“计算机教程网”，按照上一步骤的方法设置字体的大小和颜色，并拖动表格边框调整到合适宽度，如图1-14所示。

图1-14设置表格属性

STEP|14将光标置于第四个单元格中，设置它的高度为50，输入版权信息。

选中版权信息，在【属性】面板中设置【文本大小】为12，【文本颜色】为#999999，如图1-15所示。

图1-15设置版权文字格式

STEP|15至此个人网站的首页制作完成，按Ctrl＋S组合键保存文档，再按F12键就可以在IE窗口中预览网页效果了。

最终效果如图1-16所示。

图1-16个人主页效果

1.2

设计CSS

CSS（CascadingStyleSheets，层叠样式表）是一种应用于网页的标记语言，其作用是为HTML、XHTML以及XML等标记语言提供样式描述。

当IE浏览器读取HTML、XHTML或XML文档时，同时将加载相对应的CSS样式，即将按照样式描述的格式显示网页内容。

CSS文件用于控制网页的布局格式和网页内容的样式，所以用户仅需要修改CSS文件内容即可改变网页显示的效果。

使用CSS后可以大大降低网页设计者的工作量，提高网页设计的效率。

1.2.1CSS概述

使用CSS可以非常灵活并更好地控制页面的确切外观。

例如，控制许多文本属性，包括特定字体和字号大小，粗体、斜体、下划线和文本阴影，文本颜色和背景颜色，链接颜色和链接下划线等。

通过使用CSS控制字体，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。

除设置文本格式外，还可以使用CSS控制Web页面中块级别元素的格式和定位。

可以对块级元素执行的操作有：

设置边距和边框、将它们放置在特定位置、添加背景颜色、在周围设置浮动文本等。

对块级元素进行操作的方法实际上就是使用CSS进行页面布局设置的方法。

CSS技术的最大优势有如下几点。

样式重用编写好的样式（CSS）文档，可以被用于多个HTML文档，样式就达到了重用的目的，节省了编写代码的时间，统一了多个HTML文档的样式。

轻松地增加网页的特殊效果使用CSS标记，可以非常简单地对图片、文本信息进行修饰，设置相关属性。

使元素更加准确定位使显示的信息按设计人员的意愿出现在指定的位置上。

1.2.2CSS语法

CSS在设计领域中是一个突破，仅仅通过CSS样式表就能够使网页开发人员控制所有出现在网页中的外观及布局，并且可以为每种标记语言的元素和应用该元素的每个页面定义所需要的样式。

简单地改变样式，所有与之相关的元素都会自动更新。

CSS样式表由多条样式规则组成，每种样式规则都设置一种样式。

一种样式规则，就是针对HTML标记对象所设定的显示样式。

CSS样式规则的定义语法非常简单，都是由一些属性标记组成的。

1．语法格式

CSS样式表是由若干条样式规则组成的，这些样式规则可以应用到不同的元素或者文档来定义显示的外观。

每一条样式规则由3部分构成：

选择符（selector）、属性（property）和属性的取值（value），基本格式如下：

selector{property:

value}

selector选择符可以采用多种形式，但一般为文档中的HTML标记，例如“”、“

”等。

property属性则是选择符指定的标记所包含的属性。

value指定了属性的值。

如果定义选择符的多个属性，则属性和属性值为一组，组与组之间用分号（;）隔开。

下面就定义了一条样式规则，该样式规则是为块标记

6．样式表注释

可以在CSS中插入注释来说明代码的意思，注释可以提高代码的可读性。

在浏览器中注释不显示。

CSS注释以"/*"开头，以"*/"结尾，代码如下所示：

txt{

text-align:

center;/* 文本居中排列*/

color:

red;/*文字为红色*/

font-family:

"华文行楷"/*字体为华文行

楷*/

}

1.2.3CSS与HTML结合

在CSS中可以使用4种不同的方法，将CSS规则应用到网页中。

方法包括：

直接定义元素的style属性、定义内部样式表、嵌入外部样式表和链接外部样式表。

上述4种方法将样式表分为内部样式表和外部样式表。

1．链入外部样式表

链入外部样式表是指在外部定义CSS样式表并形成以.css为扩展名的文件，然后在页面中通过链接标记链接到页面中，而且该链接语句必须放在页面的标记区，代码如下所示：

css"href="skin.css"/>

标记的属性rel指定链接到样式表，type表示样式表类型为CSS样式表，href指定了CSS样式表所在位置，这里使用的是相对路径。

如果HTML文档与CSS样式表没有在同一路径下，则需要指定样式表的绝对路径或者引用位置。

2．内部样式表

内部样式表是指将CSS样式表直接在HTML页面代码的标记区定义，样式表由“”标记开始至“”结束。

代码如下所示：

body{background:

#FFF;text-align:

center;}

div,ul,li,dl,dt,dd,table,td,input

{font:

12px/20px"宋体";color:

#333;}

3．导入外部样式表

导入外部样式表是指在内部样式表的

示例中，使用@import导入了样式表skin.css。

需要注意的是，使用时导入外部样式表的路径。

导入方法与链入外部样式表的方法一样。

导入外部样式表相当于将样式表导入到内部样式表中，其输入方式更有优势。

4．内嵌样式表

内嵌样式表是混合在XHTML标记里使用。

通过这种方法，可以很简单地对某个元素单独定义样式。

使用内嵌样式表的方法是直接在XHTML标记中使用style属性，该属性的内容就是CSS的属性和值，代码如下所示：

url

（"flower.jpg"）;background-position:

center">

black">使用CSS内

嵌样式

上述介绍的4种引用CSS样式表的方法可以混合使用，但根据优先权原则，方法中引入的样式表的样式应用也不同。

其中，内嵌样式表的优先权最高，接着是链入外部样式表、内部样式表和导入外部样式表。

1.2.4创建CSS文件

在DreamweaverCS4中，可以通过CSS样式面板学习、了解和使用以可视化方式应用于页面的CSS样式，还可以更加轻松、更有效率地使用CSS样式。

在【CSS样式】面板中可以更方便地看到应用于具体元素的样式层叠，从而能够轻松地确定在何处定义了属性。

1．CSS样式面板

在DreamweaverCS4中，可以在【属性】面板中单击【CSS面板】按钮，或者从折叠面板组中单击【CSS样式】按钮

，打开【CSS样式】面板，如图1-17所示。

图1-17【CSS样式】面板

使用【CSS样式】面板可以跟踪影响当前所选页面元素的CSS规则和属性（【正在】模式），也可以跟踪文档可用的所有规则和属性（【全部】模式）。

使用面板顶部的切换按钮可以在两种模式之间切换。

使用【CSS样式】面板还可以在【全部】和【正在】模式下修改CSS属性。

【正在】模式

在这种模式下，【CSS样式】面板将显示3个窗格：

【所选内容的摘要】窗格、【规则】窗格和【属性】窗格。

【全部】模式

在这种模式下，【CSS样式】面板显示两个窗格：

【所有规则】窗格（顶部）和【属性】窗格（底部）。

无论在哪种模式下编辑CSS样式，在【CSS样式】面板的底部总是会显示7个常用操作按钮，它们的作用如表1-1所示。

2．新建CSS规则

在网页中新建CSS规则的方法很多，而且非常简单。

其中最常用的是，用户在网页中对文本进行简单的属性设置时，DreamweaverCS4会自动弹出【新建CSS规则】对话框，在这里定义一个CSS规则，再设置CSS样式，如图1-18所示。

表1-1【CSS样式】面板常用操作按钮

按钮

说明

类别视图，将支持的CSS属性分为8个类别：

字体、背景、区块、边框、方框、列表、定位和扩展名。

每个类别的属性都包含在一个列表中，可以单击类别名称旁边的加号（+）按钮展开或折叠它

列表视图，会按字母顺序显示支持的所有CSS属性

设置属性视图，仅显示那些已进行设置的属性。

“设置属性”视图为默认视图

附加样式表，打开“链接外部样式表”对话框，选择要链接到或导入到当前文档中的外部样式表

新建CSS规则，打开一个对话框，可在其中选择要创建的样式类型（例如，创建类样式、重新定义HTML标签或定义CSS选择器）

编辑样式，打开一个对话框，可在其中编辑当前文档或外部样式表中的样式

删除CSS规则，删除【CSS样式】面板中的选定规则或属性，并从它所应用于的所有元素中删除格式设置

图1-18【新建CSS规则】对话框

在【选择器类型】下拉列表框中提供了4种类型。

如果要创建一个可作为class属性应用于任何HTML元素的自定义样式，可以选择“类”选项，然后在【选择器名称】文本框中输入样式的名称。

如果要定义包含特定ID属性的标签格式，则可以选择ID选项，然后在【选择器名称】文本框中输入唯一ID（例如NewsTitleDIV）。

该ID必须以"#"特殊符号开头，并且可以包含任何字母和数字组合（例如，#myID1）。

如果没有输入特殊符号，Dreamweaver将自动为输入补充。

如果要重新定义特定HTML标签的默认格式，可选择【标签】选项，然后在【选择器名称】文本框中输入HTML标签或从弹出菜单中选择一个标签。

另外，如果要定义同时影响两个或多个标签、类或ID的复合规则，应该选择【复合内容】选项并输入用于复合规则的选择器。

例如，如果输入“divp”，则DIV标签内的所有p元素都将受此规则影响。

在下方说明文本区域中，会准确说明要添加或删除选择器时该规则将影响哪些元素。

从【规则定义】下拉列表中选择要定义规则的位置，共包括如下几项。

将规则放置到已附加到文档的样式表中，选择相应的样式表名称。

创建外部样式表，选择“新建样式表文件”选项。

在当前文档中嵌入样式，选择“仅限该文档”选项。

最后，在【CSS规则定义】对话框中选择要为新的CSS规则设置的样式选项，完成后单击【确定】按钮。

也可以不设置任何样式直接单击【确定】按钮新建一个空白规则。

3．直接创建具有CSS规则的网页

在DreamweaverCS4中，除了可以在空白网页中创建CSS规则外，还可以直接创建具有CSS样式的网页。

执行【文件】|【新建】命令，可以创建一个已包含CSS布局的页面。

Dreamweaver附带了30多个可供选择的不同CSS布局，其中各种类型选项及相关说明如表1-2所示。

表1-2CSS布局

• 登录
• 首页
• 资源分类
• 升级会员
• 通知公告
• 帮助中心