81设计Web标准网页

011设计Web标准网页Dreamweaver是组建网站和设计网页的专业工具，以“所见即所得”的特点，使不同层次的用户都可以快速创建网页。Dreamweaver的每一次版本更新都会带来很多新功能和新特性。在DreamweaverCS3基础上，Adobe公司又发布了最新版的网页制作和设计软件DreamweaverCS4。DreamweaverCS4新增了很多令人惊喜的新功能，在本章中通过个人主页、新闻查看页和博客首页3个实例详细介绍如何使用该软件设计符合Web标准的网页，以及使用CSS设计页面布局时的常用解决方案。了解网页制作流程了解DreamweaverCS4新增功能熟悉CSS的基本语法和应用方法掌握CSS样式的创建方法掌握CSS样式的定义和基本作用掌握使用CSS进行简单页面布局熟悉CSS兼容性的解决方法了解常用的CSS技巧1.1设计个人主页个人网页如同个人简历或者个人的记事本一样，它可以显示用户的一些个人信息，也可以帮用户记录一些琐事。个人网页与企业类、门户类网页相比，比较随意、独特。它主要展现与个人相关的个性，如网上可看到很多名人的个人站点。1.1.1网页制作流程为了加快网站建设的速度和减少失误，应该采用一定的制作流程来策划、设计、制作和发布网站。使用制作流程确定制作步骤，以确保每一步顺利完成，而不影响下一步的进行。理想的制作流程能帮助设计者解决策划网站的繁琐性问题，降低项目失败的风险。制作流程的第一阶段是规划项目和采集信息，接着是网站规划和设计网页阶段，最后是上传和维护网站阶段。每个阶段都有独特的步骤，但相连的各阶段的界限并不明显。也就是说，每一阶段并不总是有一个固定的目标。有时候，某一阶段可能会因为项目中未曾预料的改变而更改。步骤的实际数目和名称因人而异，但是总体制作流程如图1-1所示。JSP+DreamweaverCS4+CSS+Ajax动态网站开发典型案例JSP+DreamweaverCS4+CSS+Ajax动态网站开发典型案例2图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源文件等。01第1章设计Web标准网页31.1.3制作个人主页在设计个人站点时，可以使用表格来控制页面的版式，再使用图文混排的方式进行布局。除此之外，还可以通过设置文本的大小、颜色、对齐方式等属性，使网页更加美观，并对一些文本可以突出显示。STEP|01新建文档，在【标题】文本框中输入“欢迎光临我的主页”，按Ctrl＋S组合键保存文档。在空白页面中右击，选择【页面属性】命令，在打开的【页面属性】对话框中设置【左边距】、【右边距】、【上边距】和【下边距】都为0，单击【确定】按钮，如图1-2所示。设置边距为0后的显示效果图1-2设置页面属性和标题STEP|02单击【常用】选项卡中的【表格】按钮，打开【表格】对话框，设置【行数】和【列数】均为1，【表格宽度】为100%，【边框粗细】为0像素，单击【确定】按钮创建第一个表格，如图1-3所示。插入一个1行1列的表格图1-3插入1行1列表格STEP|03单击选中这个单元格，在【属性】面板上设置单元格的高度为100。进入【拆分】视图，输入代码“background=images/header.gif”为单元格设置一张背景图片，如图1-4所示。输入背景图片代码设置后效果图1-4设置表格背景图片注意利用表格可以控制文本、图像和Flash在页面上出现的位置，不必担心页面的整体结构遭到破坏，或者在浏览时无法正常显示。STEP|04在单元格中输入“我的个人主页”，然后在【属性】面板中设置【字体】为“黑体”，【大小】为28，【文本颜色】为#FDFDE0，如图1-5所示。设置字体的大小和颜色图1-5设置标题文字的字体属性STEP|05接下来制作导航栏目。单击【常用】选项卡中的【表格】按钮，创建第二个表格，设置为6列、间距为1。选择表格，在【属性】面板中设置表格的【行】、【列】、【宽】、【间距】、【边框】，并设置【背景颜色】为#006600，如图1-6所示。注意当用户打开【表格】对话框时，看到上面的默认设置是上一次设置的参数。每次对【表格】对话框进行更改后，由于Dream-weaver具有自动记忆功能，会记住用户这次的设置。JSP+DreamweaverCS4+CSS+Ajax动态网站开发典型案例JSP+DreamweaverCS4+CSS+Ajax动态网站开发典型案例4设置表格属性图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所示。01第1章设计Web标准网页5设置表格的对齐方式图1-11设置表格对齐方式图1-12设置文章标题属性STEP|12在第二个单元格中输入文章的正文，在【属性】面板中设置文字的大小和颜色，如图1-13所示。输入正文内容图1-13设置正文内容属性STEP|13将光标置于第三个单元格中，设置它的高度为50。单击【常用】选项卡中的【表格】按钮，设置参数为1行7列，【边框粗细】、【单元格边距】、【单元格间距】均为0，单击【确定】按钮，创建一个嵌套表格。在前7个单元格中分别输入“友情链接”、“百度”、“谷歌”、“新浪”、“网易”、“搜狐”“计算机教程网”，按照上一步骤的方法设置字体的大小和颜色，并拖动表格边框调整到合适宽度，如图1-14所示。设置字体颜色图1-14设置表格属性STEP|14将光标置于第四个单元格中，设置它的高度为50，输入版权信息。选中版权信息，在【属性】面板中设置【文本大小】为12，【文本颜色】为#999999，如图1-15所示。设置版权文字格式图1-15设置版权文字格式STEP|15至此个人网站的首页制作完成，按Ctrl＋S组合键保存文档，再按F12键就可以在IE窗口中预览网页效果了。最终效果如图1-16所示。图1-16个人主页效果JSP+DreamweaverCS4+CSS+Ajax动态网站开发典型案例JSP+DreamweaverCS4+CSS+Ajax动态网站开发典型案例61.2设计CSSCSS（CascadingStyleSheets，层叠样式表）是一种应用于网页的标记语言，其作用是为HTML、XHTML以及XML等标记语言提供样式描述。当IE浏览器读取HTML、XHTML或XML文档时，同时将加载相对应的CSS样式，即将按照样式描述的格式显示网页内容。CSS文件用于控制网页的布局格式和网页内容的样式，所以用户仅需要修改CSS文件内容即可改变网页显示的效果。使用CSS后可以大大降低网页设计者的工作量，提高网页设计的效率。1.2.1CSS概述使用CSS可以非常灵活并更好地控制页面的确切外观。例如，控制许多文本属性，包括特定字体和字号大小，粗体、斜体、下划线和文本阴影，文本颜色和背景颜色，链接颜色和链接下划线等。通过使用CSS控制字体，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。除设置文本格式外，还可以使用CSS控制Web页面中块级别元素的格式和定位。可以对块级元素执行的操作有：设置边距和边框、将它们放置在特定位置、添加背景颜色、在周围设置浮动文本等。对块级元素进行操作的方法实际上就是使用CSS进行页面布局设置的方法。提示块级元素是一段独立的内容，在HTML中通常由一个新行分隔，并在视觉上设置为块的格式。例如，h1标签、p标签和div标签都在网页上生成块级元素。CSS技术的最大优势有如下几点。样式重用编写好的样式（CSS）文档，可以被用于多个HTML文档，样式就达到了重用的目的，节省了编写代码的时间，统一了多个HTML文档的样式。轻松地增加网页的特殊效果使用CSS标记，可以非常简单地对图片、文本信息进行修饰，设置相关属性。使元素更加准确定位使显示的信息按设计人员的意愿出现在指定的位置上。提示在传统的Web应用中，样式表提供一种很有用的方法，可以在一个独立文件中定义样式，在多个页面中重用该样式。在Ajax应用中，不再将应用思考为快速切换的一系列页面，但是样式表仍然是很有帮助的，它可以用最少的代码动态地为元素设置预先定义的外观。1.2.2CSS语法CSS在设计领域中是一个突破，仅仅通过CSS样式表就能够使网页开发人员控制所有出现在网页中的外观及布局，并且可以为每种标记语言的元素和应用该元素的每个页面定义所需要的样式。简单地改变样式，所有与之相关的元素都会自动更新。CSS样式表由多条样式规则组成，每种样式规则都设置一种样式。一种样式规则，就是针对HTML标记对象所设定的显示样式。CSS样式规则的定义语法非常简单，都是由一些属性标记组成的。1．语法格式CSS样式表是由若干条样式规则组成的