第3章 用Dreamweaver CS4创建根本网页.pptVIP

网页设计与制作教程(第4版）;一 Dreamweaver CS4入门 二 制作简单网页 制作图文并茂网页 四 网页结构语言XHTML;3.1.1 Dreamweaver CS4工作环境 1．Dreamweaver CS4的启动 安装好Dreamweaver CS4后，单击“开始”→“程序”→“Adobe Dreamweaver CS4”命令。首先显示“工作区设置”对话框，如图3-1所示。由于要采用可视化方式设计网页，选中“设计者”单选钮，单击“确定”按钮。接下来显示起始页对话框，如图3-2所示。在起始页对话框中可以选择“打开最近的项目”、“新建”或“主要功能”。;3.1.1 Dreamweaver CS4工作环境 2．Dreamweaver CS4的主工作区 Dreamweaver CS4的主工作区由文档工具栏、文档窗口、属性面板、插入面板和组合面板等部分组成，如图3-3所示。;3.1.1 Dreamweaver CS4工作环境 （1）文档工具栏 文档工具栏中的按钮使用户可以在文档的不同视图间快速切换：代码视图、设计视图、和拆分视图。文档工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图3-4所示。 ;3.1.1 Dreamweaver CS4工作环境 （2）面板 Dreamweaver的三个重要功能分别是网页设计、代码编写和应用程序开发，相应的面板也是这样分类的。 ① 设计类面板组 ② 文件类面板组 ③ 应用程序类面板组;3.1.2 Dreamweaver CS4的参数设置 一般设置的参数有常规参数、新建文档参数和站点参数，这些都是开始创建站点、设计网页前需要考虑的因素。 1．常规参数设置 2．新建文档参数设置;3.2.1 创建网站站点 【案例综述】建立一个本地站点，定义站点名称和站点使用的本地根文件夹及默认的图像文件夹。 【案例展示】本实例定义站点的名称为Sample，使用的本地文件夹为D:\web\dawn，默认的图像文件夹为D:\web\dawn\images。站点的设置如图3-16所示，站点结构如图3-17所示。;3.2.2 新建与保存网页 Dreamweaver CS4为创建新文档提供了若干选项，用户可以创建以下任意文档。 ? 新的空白文档或模板； ? 基于Dreamweaver附带的预设计页面布局文档； ? 基于现有模板的文档。 1．创建新文档 2．保存新文档 ;3.2.3 页面属性设置 页面属性的设置包括页面的布局和格式设置。 1．设置网页标???;3.2.3 页面属性设置 2．设置网页外观 ;3.2.3 页面属性设置 3．设置网页链接 ;3.2.3 页面属性设置 4．设置网页跟踪图像 ;3.2.4 网页的基本排版 在通常情况下，网页上一般都包含文本、日期、特殊符号及水平线等基本元素。 1．网页基本元素 2．页面的简单排版 （1）设置文本的大小 （2）设置文本的字体 （3）设置文本的颜色 （4）设置文本对齐方式 ;3.2.5 插入图像 Web上常用的图像格式包括以下3种：GIF、JPEG和PNG。 Dreamweaver能够使用GIF、JPEG或PNG格式打开或预览任何图像。使用Dreamweaver将一个图像插入到网页中有3种方法： ? 在插入面板的“常用”分类中选择“图像”按钮； ? 执行“插入”→“图像”命令； ? 使用〈Ctrl〉+〈Alt〉+〈I〉组合键。 ;3.2.6 案例一：创建曙光大学学校概况页面 【案例综述】制作曙光大学学校概况页面，通过简单的页面制作展示学校的基本情况。 【案例展示】本例中的素材包括4幅校园图片，实例效果如图3-42所示。;3.3.1 图文混排 图文混排技术是指设置图像与同一行中的文本、图像、插件或其它元素的对齐方式，方法是： 在设计视图中选择图像，在属性面板中使用“对齐”弹出菜单设置该图像的对齐属性。;3.3.2 案例二：设计曙光大学校园风采网页 【案例综述】制作曙光大学校园风采页面，通过图文混排技术展示学校的文化。 【案例展示】本例中的素材包括3幅校园文化图片，实例效果如图3-55所示。;3.4.1 XHTML简介 HTML是Hypertext Markup Language（超文本标记语言）的缩写，是一种为普通文件中某些字句加上标识的语言，其目的在于运用标记（tag）对文件达到预期的效果。它是构成Web页面（Page），用来表示Web页面的符号标记语言。 HTML语言是建立网页的规范或标准，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，