设计web标准网页

《设计web标准网页》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

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

3、网站建设的速度和减少失误，应该采用一定的制作流程来策划、设计、制作和发布网站。使用制作流程确定制作步骤，以确保每一步顺利完成，而不影响下一步的进行。理想的制作流程能帮助设计者解决策划网站的繁琐性问题，降低项目失败的风险。制作流程的第一阶段是规划项目和采集信息，接着是网站规划和设计网页阶段，最后是上传和维护网站阶段。每个阶段都有独特的步骤，但相连的各阶段的界限并不明显。也就是说，每一阶段并不总是有一个固定的目标。有时候，某一阶段可能会因为项目中未曾预料的改变而更改。步骤的实际数目和名称因人而异，但

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

5、方面。支持领先Web技术在支持大多数领先Web开发技术的工具中进行设计和编码，这些技术包括HTML、XHTML、CSS、XML、JavaScript、Ajax、PHP、AdobeColdFusion软件和ASP。CSS最佳推荐新增功能无须编写代码即可实施CSS最佳推荐。参考CSS最佳推荐实现可视化设计，并辅以通俗易懂的实用概念说明。用户可以在支持可访问性和最佳推荐的同时，创建基于Ajax的交互性应用。全面的CSS支持增强功能使用DreamweaverCS4中增强的CSS实施工具可使用户的网站脱颖

6、而出。借助“设计”和“实时视图”中的即时可视反馈，在“属性”面板中可快速定义和修改CSS规则。使用新增的“相关文件”和“代码导航器”功能可找到定义特定CSS规则的位置。HTML数据集新增功能无须掌握数据库或XML编码即可将动态数据的强大功能融入网页中。Spry数据集可以将简单的HTML表中的内容识别为交互式数据源。代码导航器新增功能新增的“代码导航器”功能可显示影响当前选定内容的所有代码源，如CSS规则、服务器端包括、外部JavaScript功能、Dreamweaver模板、iframe源文件等

7、。1.1.3制作个人主页在设计个人站点时，可以使用表格来控制页面的版式，再使用图文混排的方式进行布局。除此之外，还可以通过设置文本的大小、颜色、对齐方式等属性，使网页更加美观，并对一些文本可以突出显示。STEP

8、01新建文档，在【标题】文本框中输入“欢迎光临我的主页”，按Ctrl＋S组合键保存文档。在空白页面中右击，选择【页面属性】命令，在打开的【页面属性】对话框中设置【左边距】、【右边距】、【上边距】和【下边距】都为0，单击【确定】按钮，如图1-2所示。图1-2设置页面属性和标题STEP

9、02

10、单击【常用】选项卡中的【表格】按钮，打开【表格】对话框，设置【行数】和【列数】均为1，【表格宽度】为100%，【边框粗细】为0像素，单击【确定】按钮创建第一个表格，如图1-3所示。图1-3插入1行1列表格STEP

11、03单击选中这个单元格，在【属性】面板上设置单元格的高度为100。进入【拆分】视图，输入代码“background="images/header.gif"”为单元格设置一张背景图片，如图1-4所示。图1-4设置表格背景图片STEP

12、04在单元格中输入“我的个人主页”，然后在【属性】面板