动态网站开发典型案例Word格式.docx

动态网站开发典型案例Word格式.docx

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

了解常用的CSS技巧

设计个人主页

个人网页如同个人简历或者个人的记事本一样，它可以显示用户的一些个人信息，也可以帮用户记录一些琐事。

个人网页与企业类、门户类网页相比，比较随意、独特。

它主要展现与个人相关的个性，如网上可看到很多名人的个人站点。

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单击第二个表格，然后单击标签<

tr>

选中该行，在【属性】面板中，设置【高】为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个人主页效果

设计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标记，例如“<

body>

”、“<

table>

”和“<

p>

”等。

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

value指定了属性的值。

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

）隔开。

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

div>

提供样式，color为指定文字颜色的属性，red为属性值，表示标记<

中的文字使用红色。

div{color:

red}

2．类选择符定义样式

除了可以为多个标记指定相同样式外，还可以使用类选择符来定义一个样式，这种方法同样可以使用到不同的标记上。

定义类选择符的方法是在自定义样式的名称前面加一个句点（.）。

例如，如下代码使用类选择符定义了一个名为“.Title”的样式。