第7章 网页设计.pptVIP

HTML不是一种“所见即所得”的文本标志语言，它只是标记了一个对象如何显示，剩余的全部工作包括翻译、显示等都留给了浏览器。任何人都可以用纯文本编辑器（如记事本、写字板）创建网页文件，也可采用“所见即所得”的编辑工具来创建，但要保存为“.htm”格式，最终用户通过浏览器来读取这些网页文件。 使用文本编辑器编写以下效果网页： ⑴ HTML的元素与标记 HTML 语言中的 之间的内容就称为元素或标记。 标记分为两大类：一类用于确定超文本在浏览器中显示的方式；另一类用于确定超文本在浏览器中显示的内容。 HTML标记用来安排文字、图像、链接，HTML标记遵循以下基本原则： ⑵ HTML文档的结构 HTML四个页面的结构标记是： ⑶ 几个常用的标记 ①换行和分段 ·换行BR 该标记用于一段文本中的强制换行，BR标记除了用来标识一个换行动作外，在HTML文件中还可以用它来调整行间距。 ·分段P P标记打断行并插入一个空行，把段落区分开，其后的文本另起一个段落。 ② 超链接的设置 HTML超文本的功能体现在链接功能上 · 链接到某一个目标 · 链接到某一个网站的主页 · 链接电子邮件 · 用图片作链接指针 ⒉ XML语言 XML（可扩展的标记语言）借鉴了HTML与数据库、程序语言的优点，将内容与表现分开，不仅使检索更为方便。更主要的是用户之间数据的交换更加方便，数据可重用性更强 但XML在更多的时候只是一种数据文件，要把它变成日常所看到的HTML格式那样的文件，还需要借助XSL模式化查询语言。 ⒊ 脚本语言 脚本语言是介于HTML和Java、C++和Visual Basic等编程语言之间的语言。脚本语言弥补了HTML不能解决动态和交互的缺点，是一种面向对象的解释性程序语言，有客户端脚本和服务器端脚本两种。 ⑴ 客户端脚本语言 客户端的脚本语言是在客户端执行的脚本。常用客户端的脚本语言有两种：JavaScript与VBScript ⑵ 服务器端脚本语言 服务器端的脚本语言是在服务器端执行 的脚本，通过执行服务器端的脚本 和后台数据库的查询可完成与客户 的交互功能。服务器端常用的脚本 有ASP、JSP、PHP、Perl和.Net等 7.1.2 网页制作工具 被称为网页制作三剑客的Flash、Fireworks和Dreamweaver，使用最为广泛。几种常用的网页编辑工具： ⒈ FrontPage 易学易用，适合于网页设计的初学者。 ⒉ Dreamweaver 一个“所见即所得”的可视化网站开发工具，众多 专业网站和个人主页将其作为建站的首选工具。 ⒊ Adobe Pagemill 使用起来很方便，非常适合初学者。 ⒋ HotDog HotDog是初学者较容易上手的网页制作工具。 7．2 网站的概念与网站设计步骤 ⒈ 网站设计与网站制作。网站“设计”与网站“制作”的区别在于：设计是一个思考的过程，而制作只是将思考的结果表现出来。一个成功的网站首先需要一个优秀的设计，然后辅之优秀的制作。所以，设计是网站的核心和灵魂，一个相同的设计可以有多种制作表现的方式。 ⒉ “网站”是指有确定主题和明确目的 的实用性站点，不包括纯表现类 或者纯文字类网站。 7.2.1 网站与网页 网页通常成组出现，每一个网页存放在一个单独的文本文件中，通过浏览器窗口的滚动条可以浏览各种尺寸的网页。当进入某个站点的第一个页面，该页面称“主页”（homepage），主页通常用index.html或index.htm命名。其他页面称“详细页”（minute page），扩展名为.html或.htm。 Web 站点遵循文件管理原则，对网页 文件进行相应的组织与管理。 下图给出了一个企业普通Web网站 的网页组织与管理的简单示例 某企业普通Web网站的网页组织与管理结构图 7.2.2 网站设计步骤 建立一个网站是具有鲜明周期性的过程。不管是什么类型的网站，建立网站大体都可分为以下几个步骤： ⒈ 定位网站主题 ⒉ 规划网站 ⒊ 组织素材 ⒋ 布局 ⒌ 制作网页 ⒍ 测试与发布网站信息 7．3 Dreamweaver 8.0窗口和站点管理 Dreamweaver 8.0是一个专业的可视化网页制作工具，用于Web站点、Web页、网页应用程序设计和开发。利用Dreamweaver 8.0中的可视化编辑功能，可以快速地创建站点和制作网页代码，无需编写任何代码（代码能自动生成）。 7.3.1 Dreamweaver 8.0 工作界面 ⒈ “插入列表”栏用于插入各种类型的对象（如表单、文本和应用程序等）。 ⒉ “文档工具栏”包含按钮和弹出式菜单，它提供各种“文档”窗口视图（如“设计”视图和“代码”视图）、各种查看选项和一