Dreamweaver 8网页设计与实训 教学课件 ppt 作者 于虹 主编

DreamweaverDreamweaver88网页设计与实训网页设计与实训Dreamweaver 8网页设计与实训主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训DreamweaverDreamweaver 8 8网页设计与实训网页设计与实训走进走进Dreamweaver8Dreamweaver8创建本地站点创建本地站点网页基础知识和基本制作网页基础知识和基本制作文本编辑文本编辑图像与多媒体的应用图像与多媒体的应用 网站链接网站链接表格和布局表格和布局框架框架表单表单模板和库模板和库CSSCSS样式样式行为和行为和JavaScript JavaScript 层和时间轴层和时间轴 整站建设、测试与上传整站建设、测试与上传 动态网站制作动态网站制作 主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训项目一项目一 走进走进DreamweaverDreamweaver 8 8 v任务任务1.1 Dreamweaver 8概述概述v任务任务1.2 Dreamweaver 8 编辑界面编辑界面v知识1.2.1启动Dreamweaver8v知识1.2.2“插入”面板v知识1.2.3“属性”面板v知识1.2.4“浮动”面板v知识1.2.5标签选择器v【知识拓展】历史记录面板主主 菜菜 单单主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训任务任务1.1 Dreamweaver 8概述概述Dreamweaver8中文版是Macromedia公DreamweaverMx2004之后推出的新版网页设计软件，与上一版本相比，在功能上有了较大的提高，其特点如下：v可视化操作可视化操作XML数据数据v统一统一CSS面板面板vCSS布局可视化布局可视化v改进的改进的WebDAVv放大功能放大功能v代码折叠代码折叠v“编码编码”工具栏工具栏v选择性粘贴选择性粘贴v文件比较功能文件比较功能v更加方便快捷的站点管理更加方便快捷的站点管理主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训任务任务1.2 Dreamweaver 8编辑界面编辑界面知识知识1.2.1 启动启动Dreamweaver 8工作区设置对话框程序窗口及起始页主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训标题栏标题栏菜单栏菜单栏“插入插入”面板面板工具栏工具栏工作窗口工作窗口状态栏标签选择器器标签选择器器“属性属性”面板面板工具按钮浮动面板浮动面板最小化按钮最小化按钮 最大化按钮最大化按钮关闭按钮关闭按钮工作界面主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训知识知识1.2.2 “插入插入”面板面板右击任一位置右击任一位置显示为菜单显示为菜单显示为制表符显示为制表符主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训知识知识1.2.3“属性属性”面板面板Flash影片属性面板影片属性面板 图图像属性面板像属性面板主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训表格属性面板表格属性面板 层层属性面板属性面板主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训知识知识1.2.4“浮动浮动”面板面板浮浮动动面板面板组组主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训收放收放/展开浮展开浮动动面板面板收放收放按钮按钮主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训知识知识1.2.5 标签选择器标签选择器标签选择标签选择器器标签选择标签选择器器主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训项目二项目二 创建本地站点创建本地站点 任务任务2.1 网站规则网站规则 知识2.1.1站点的概念知识2.1.2网站规划 任务任务2.2 创建本地站点创建本地站点 知识2.2.1网站命名规则知识2.2.2利用向导创建站点知识2.2.3编辑站点【知识拓展】利用高级创建站点主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训知识知识2.1.1 站点的概念站点的概念一个网站中包含了多个不同的页面，而每一个页面中又包含了大量的图片、音频、视频等信息。为了使整个网站的结构清晰，为了便于查找和管理网站中的各项信息，可以将整个网站定义为一个文件夹，此文件夹称为站点。Dreamweaver中的站点包括远程站点和本地站点。主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训知识知识2.1.2 网站规划网站规划一一 确定目标群体确定目标群体在创建一个站点之前，首先要确定站点是给什么人访问的，即确定站点的用户群体，以便于确定在站点内添加的内容、为网站设计不同的视觉内格、色彩效果等。化妆品网主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训二二 确定站点功能确定站点功能确定了站点的目标群体后，就要设计网站需要为这些用户实现哪些愿望和功能，以确定网站各方面的内容及效果要求，例如如果是企业网站，就应立足于企业形象来展开，如果是购物网站，就要强化网站的在线购物等功能。童话故事网主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训三三 安排站点结构安排站点结构站点的结构设计主要是设计各页面之间的层次关系和链接跳转关系，以手机网为例对网站进行基本结构设计，其层次结构如图所示。“手机”网站基本结构示意图主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训四四 设计网页布局设计网页布局 站点的整体结构设计后，要对网站的主页及各页面的布局进行设计，常用的有“国”字型、拐角型、标题正文型、综合框架型、封面型、Flash型等，下图是手机网的布局设计。主页的布局设计其它页面的布局设计主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训知识知识2.2.1 建站规则建站规则任务任务2.2 创建本地站点创建本地站点一个站点是由一组相互链接，并具有相同设计风格或共同用途的网页文档组成的，在建立网站之前，一定要合理地规划站点，避免建站工作的盲目性，一般情况下创建一个网站应遵循的流程如下：对站点进行规划，具体知识请见知识2.1.2。准备站点中所用到的素材。创建本地站点。制作静态及动态网页。测试本地站点。上传本地站点到远程服务器。网站维护与更新。主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训还要提醒读者一点的是：网站中所有的文件夹及网页都不要用中文命名，以免在发布后不能使用，可以使用有规律可循的汉语拼音、英文原义或英文缩写来命名，下图是一个网站的文件结构，实际应用时可根据网站的大小和内容自行组织。首页图片文件夹子页面文件夹CSS文件夹库文件夹模板文件夹子页面文件夹网站结构主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训知识知识2.2.2 利用向导创建站点利用向导创建站点创建站点的操作是在站点管理器中完成的，对于初学者来说，利用向导建立站点是一个很好的选择，按照向导一步步设置，很快就可以建立好自己的站点。这主要包括三个方面：定义一个新站点、创建文件夹和创建空白文档。【知识拓展】利用高级创建站点【案例2.1】创建本地站点主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训项目三项目三 网页整体设置网页整体设置任务3.1网页基础知识知识3.1.1网页的分类知识3.1.2三种视图方式知识3.1.3网页的源代码知识3.1.4网页的颜色任务3.2网页设置知识3.2.1页面属性知识3.2.2META标记【案例3.1】网页的整体设置-旅游网知识3.1.1设置页面属性知识3.1.2定义META标记知识拓展其它页面设置【实战演练】网页设置-鲜花网主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训任务任务3.1 网页基础知识网页基础知识知识知识3.1.1 网页的分类网页的分类网页按照实现的交互功能的不同，分为静态网页和动态网页两种。动态网页实际上是指以数据库技术为基础且具有交互功能的网页。静态网页则是指不具有交互功能的传统网页，它的内容不会因为用户的访问而产生变化。知识知识3.1.2 三种视图方式三种视图方式一个网页可以理解为两种状态：一种是源代码状态，这种状态下我们看到的是网页的源代码，它由纯文本组成，是未经浏览器端和服务器端处理的原始状态；另一种是在浏览器中显示出来的状态，即我们见到的网页状态。主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训Dreamweaver提供三种视图方式，使用户可以方便地在代码和编辑状态之间转换，这三种视图方式分别为“设计视图”“代码视图”和“拆分视图”。三种视图方式主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训知识知识3.1.3 HTML源代码源代码HTML语言是一种网页制作的排版语言，而并非一种编程语言，用它编写出的HTML文件是一种纯文本格式的文件，由一系列字符串来描述文件中的信息和功能，它由标记和被标记的内容组成，标记像一个排版程序，将网页的内容排成想要的效果，它们大多成对出现，且用层层嵌套的方式组织。一一.HTML文件结构文件结构一个HTML文件由两大部分组成，即文件头部分和文件主体部分，文件主体部分是在Web浏览器窗口中显示的内容，而文件头则用来规定该文档的标题和文档的一些属性。主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训HTML标记用来描述页面中的内容，大多成对出现，格式为：受标记影响的内容例如：字体标记为，“size”为其属性，表示设置文字大小，那么：公司简介就表示设置文字“公司简介”的字号大小为3。也有的标记不成对出现，也没有属性，比如换行标记。二二.HTML标记标记主主 菜菜 单单上一页上一页下一页下一页DreamweaverDreamweaver88网页设计与实训网页设计与实训知识知识3.1.4 网页的颜色网页的颜色网页中的颜色可以用十六进制RGB值和颜色的英文名来表示。十六进制RGB值以“#”开头，但其实它的定义是有规则的：颜色是由红、绿、蓝三原色组合而成，而对于每种三原色又有256种彩度，每种颜色用2位十六进制数来定义，范围从“00FF”，三种颜色加起来一共是六位十六进制数，能混合成1600万种颜色。六位数中，前两位表示红色，中间两位表示绿色，最后两位数字表示蓝色，其中“00”表示该颜色没有，“FF”表示该颜色最亮，所以以此类推：“#FF0000”表示红色；“#00FF00”表示绿色，“#