Download presentation
Presentation is loading. Please wait.
1
清华大学出版社 张晓蕾主编 主 讲：邓强 教学群： 邮
2
第4章 网页制作基础 熟悉Dreamweaver CS5的工作环境 掌握Dreamweaver CS5的基本操作 盒模型和选择符的重要概念
第4章 网页制作基础 熟悉Dreamweaver CS5的工作环境 掌握Dreamweaver CS5的基本操作 盒模型和选择符的重要概念 能够使用“DIV+CSS”模式制作网页
3
创建新的文件或 者Dreamweaver站点
4.1 初识Dreamweaver CS5 Dreamweaver CS5的工作环境 创建新的文件或 者Dreamweaver站点 打开最近 编辑的文件 前往 ADOBE功能 介绍网站 教学网站与 资源连接 官方的重要信息 是否禁用开始项
4
1.1 认识网页与网站 应用程序栏 菜单栏 工作区切换器 文档工具栏 插入面板 文档窗口 文件面板 状态栏 属性面板
5
4.1 初识Dreamweaver CS5 4.1.2 工具栏与面板介绍
工具栏与面板介绍 菜单栏：包括10个菜单，基本上能够实现Dreamweaver的所有功能。 应用程序栏：包含相应的管理按钮。 文档窗口：显示当前创建和编辑的网页文档，是用户在Dreamweaver设计网页的主要工作区。在该工作区中可以进行输入文字、插入图片等多媒体资源、设置超链接等工作，也可以对整个页面进行处理。 文档工具栏：包含3种文档窗口视图按钮、各种查看选项和一些常用的操作。
6
4.1 初识Dreamweaver CS5 通过单击这些按钮可在文档的不同视图间进行快速切换。 代码视图 代码和设计视图
设计视图，可视化视图 文档标题 刷新 选项 可视化助理 检查 预览 文件管理 通过单击这些按钮可在文档的不同视图间进行快速切换。
7
4.1 初识Dreamweaver CS5 文档代码、拆分、设计视图模式间的快速切换。
设计视图：一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境，类似于在浏览器中查看页面时看到的内容。“所见即所得” 代码视图：一个用于编写和编辑HTML、JavaScript、服务器语言（如PHP、ColdFusion标记语言CFML)以及任何其他类型语言的手工编码环境。 拆分视图：又称代码和设计视图，可以在窗口中同时看到文档的代码视图和设计视图。
8
4.1 初识Dreamweaver CS5 状态栏：位于文档窗口底部，包括3个功能区：
标签面板（又称为：标签选择器，显示和控制文档当前插入点位置的HTML源代码标签，可查看网页内容的代码标签，也可以单击标签，选中该元素。） 手形工具 标签选择器 窗口大小 缩放工具 文档大小和估计下载时间 选取工具
9
4.1 初识Dreamweaver CS5 ① 标签选择器
用来显示环绕当前选定内容的标签的层次结构。若单击该层次结构中的任何标签，则选定该标签全部内容。 如单击状态栏的<body>标签，则选定文档中整个正文。 ② 选取工具 用于启动和禁用手形工具。 ③ 手形工具 用于在文档窗口中单击并拖动文档。
10
4.1 初识Dreamweaver CS5 ④ 缩放工具
单击状态栏中的【缩放工具】，单击页面上需要放大的位置，可以放大文档页面，且每单击一次，文档页面会放大一次。也可按下鼠标左键在屏幕上需要放大的区域上拖出一个框，松开鼠标即可放大选中区域 配合[Alt]键，可以缩小当前页面显示大小。且每单击一次，页面会缩小一次。
11
4.1 初识Dreamweaver CS5 窗口大小弹出菜单：（显示页面大小，允许将文档窗口的大小调整到预定义或自定义的尺寸）
下载指示器：（估计下载时间，查看传输时间）。 编码只是器：显示当前文档的文本编码。
12
4.1 初识Dreamweaver CS5 “属性”面板：属性检查器 用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。
双击“属性”面板标题栏，可将“属性”面板折叠起来，再次双击，则可展开“属性”面板。 面板控制菜单
13
4.1 初识Dreamweaver CS5 “文件”面板：用于管理文件和文件夹，无论它们是 Dreamweaver站点的一部分还是位于远程服务器上。通过“文件”面板可以访问本地磁盘上的全部文件，类似于 Windows 资源管理器
14
4.1 初识Dreamweaver CS5 “插入”面板：包含将各种网页元素（如图像、超链接、多媒体和表格等）插入到网页文档的快捷按钮。这些按钮被分类组织到各个选项卡中。 显示“插入”面板：选择“窗口”→“插入”命令
15
4.1 初识Dreamweaver CS5 “CSS样式”面板：主要跟踪当前页面元素的CSS规则和属性。
16
4.1 初识Dreamweaver CS5 4.1.3 Dreamweaver CS5的参数设置 1．常规参数设置
选择“编辑”菜单—“首选参数”，打开“首选参数”对话框，对20个项目进行设置，使其最符合个人操作习惯。
17
4.1 初识Dreamweaver CS5 2．CSS代码格式设置
18
4.1 初识Dreamweaver CS5 3.工作区布局设置
19
4.1 初识Dreamweaver CS5 4.使用DreamweaverCS5辅助工具 标尺：选择“查看”菜单的“标尺”中的“显示”。
网格：选择“查看”菜单的“网格设置”中的“显示网格” 。 辅助线：选择“查看”菜单的“辅助线”中的“显示辅助线”。 辅助线直接从标尺栏上拖出来：从水平标尺上拖出水平辅助线，从垂直标尺上拖出垂直辅助线。
20
4.2 创建与管理站点 创建站点 1．什么是站点 站点是一个存储区，它存储了一个网站包含的所有文件，可以理解为一种文档的组织形式，Dreamweaver的使用是以站点为基础的，必须为每一个要处理的网站建立一个站点。 站点分为“本地站点”和“远程站点”。 本地站点：是用户在本地计算机硬盘中构建用来存放整个网站的本地文件夹。 远程站点：通常位于Web服务器的计算机上，具有本地文件夹相同的名称。
21
4.2 创建与管理站点 2．如何创建本地站点 启动Dreamweaver CS5 ，选择菜单“站点” “新建站点”命令，弹出如图对话框。
在此输入站点名称，指定站点路径（如果不输入就按默认创建）。
22
4.2 创建与管理站点 不连接到Web并发布，不血药进行服务器设置，如果需要，选择“服务器”选项。如下图，选择下方的“+”号，进行相应设置。
完成站点创建，在“文件”面板立即显示站点根目录，如图。
23
4.2 创建与管理站点 创建第一个网页文档 在创建完站点后就可以在其内部创建网页文档了，创建方法多样，我们这里介绍用Dreamweaver文件菜单创建。创建的文件默认保存在站点目录里。 启动Dreamweaver软件，选择“文件”菜单里的“新建”命令，打开如图对话框。
24
4.2 创建与管理站点 默认为“空白页”，从“页面类型”里选择要创建的页面类型，一般选择HTML。
从“布局”栏选择布局类型，默认为“无”就是创建空白HTML文档，选择了布局类型，文档中包含CSS布局，相当于使用了一个模版。 选择“文档类型”，我们按默认就可以，然后按“创建”按钮，创建一个HTML文档。 在文档中输入相应的文档内容（文字，图片），保存文档，修改文件名。 在工具栏点击 图标，在弹出菜单中选择浏览器，进行网页预览
25
4.2 创建与管理站点 4.2.3 站点内文件管理 1．在站点内创建文件夹
站点内文件管理 1．在站点内创建文件夹 启动Dreamweaver CS5 ，在“文件”面板中点击右键，弹出邮件菜单如图。 选择新建文件夹，在站点根目录 中增加了一个文件夹，文件夹处于 编辑状态，可以进行重命名。不如 用于保存图片的images 建议： 1、使用英文小写字母命名站点中的文件夹和文件； 2、文件名要易记，要统一命名。
26
4.2 创建与管理站点 2.在站点内创建网页文档 在站点目录点击右键，在弹出菜单中选择“新建文件”也可以创建HTML文档。
启动Dreamweaver CS5 ，新建HTML文档，保存文档，默认保存在当前站点根目录。 在站点目录点击右键，在弹出菜单中选择“新建文件”也可以创建HTML文档。
27
3.文件或文件夹的复制、删除操作 在文件属性面板中我们能看见站点内的文件及文件夹。 在文件或文件夹上点击鼠标右键，弹出菜单。
选择相应的复制、删除等操作。
28
4.2 创建与管理站点 4.2.4 站点的管理 创建好站点之后，若需要更换站点目录或进行其他修改，可以执行以下操作：
站点的管理 创建好站点之后，若需要更换站点目录或进行其他修改，可以执行以下操作： 1 新建站点； 2 编辑站点； 3 复制站点； 4 删除站点； 5 导入和导出站点。
29
4.3 CSS在Dreamweaver中的运用 4.3.1 CSS的链接类型 1.内联样式
内联样式指的是将CSS样式与(X)HTML标签混合使用，这种方法可以很简单的对某个元素单独定义样式。内联样式的使用是直接在(X)HTML标签里添加style参数，而style参数的内容就是CSS的属性和值。
30
4.3 CSS在Dreamweaver中的运用 2.内部样式
内部样式位于页面标签的<head>与</head>之间，且使用<style>标签进行包裹，下面以示例进行演示。
31
4.3 CSS在Dreamweaver中的运用 3.外部样式
外部样式是目前在实际工作中使用最为广泛的一种形式。它将CSS样式代码保存为一个样式文件，然后在页面中使用<link>标签链接到这个样式文件，以便实现多个页面调用同一个外部样式文件的目的。该类型样式使用<link>标签，放置在<head>与</head>之间。 在站点内创建空白HTML文档。 执行“文件”的“新建”命令，在“页面类型”里选择CSS，点击创建，命名CSS文件名。 切换到HTML文档，在CSS样式面板点击底部的链接图标，弹出“链接外部样式”对话框。
32
4.3 CSS在Dreamweaver中的运用 在“文件/URL”浏览，找到你创建的样式文件，选择“链接”，确定后就链接成功。
链接成功，在HTML文档界面会显示两个文件已链接，单击某个文件，可以进行切换。
33
4.3 CSS在Dreamweaver中的运用 4.3.2 盒模型概述
盒模型概述 简单的说，可以将网页中每个元素看做一个盒子，该盒子具有margin（外边距）、padding（内边距）和border（边框）三种基本属性，其示意图如图所示。
34
4.3 CSS在Dreamweaver中的运用 盒模型的宽度 盒模型的高度
盒模型的宽度=左外边距（margin-left）+左边框（border-left）+左内边距（padding-left）+内容宽度（width）+右内边距（padding-right）+右边框（border-right）+右外边距（margin-right） 盒模型的高度 盒模型的高度=上外边距（margin-top）+上边框（border-top）+上内边距（padding-top）+内容高度（height）+下内边距（padding-bottom）+下边框（border-bottom）+下外边距（margin-bottom）
35
4.3 CSS在Dreamweaver中的运用 Box_1宽=40px+30px+20px+100px+20px+30px+40px=280px Box_1高=30px+30px+30px+100px+20px+30px+40px=280px Box_2宽=30px+20px+30px+100px+30px+20px+30px=260px Box_2高=50px+20px+30px+100px+30px+20px+50px=300px Box_1和box_2高之和=30px+30px+30px+100px+20px+30px+50px+20px+30px+100px+30px+20px+50px=550px
36
4.3 CSS在Dreamweaver中的运用 4.3.3 CSS选择符 1．通配符选择符与类型选择符
通配符选择符用“*”号进行表示，其作用是定义页面所有元素的样式，而类型选择符指的是那些使用网页已有标签类型作为名称的选择符，如body、p和h1等。
37
4.3 CSS在Dreamweaver中的运用 2．ID选择符与类选择符
ID选择符以#开头，类选择符以.开头，每个文档中元素的ID属性是唯一的，所以通过唯一的值直接定位该元素，类选择符在一个文档中可以多次使用，而且可以使用在不同标签上。
38
4.3 CSS在Dreamweaver中的运用 3．包含择符与群组选择符
包含选择符又称后代选择符，因为该选择符是作用于某个元素中的子元素，例如“h1 span{color:#06F;}”规则作用的范围是h1标签内部的span标签。 群组选择符可以对一组不同的标签进行相同样式的指派，标签之间使用逗号进行分割。
39
4.4 商用案例——使用“DIV+CSS”模式制作旅行社网页
页面规划
40
4.4 商用案例——使用“DIV+CSS”模式制作旅行社网页
实现过程 创建站点 创建空白文档 创建CSS文档 将CSS文档链接到页面 搭建页面结构与CSS初始化 细化页面 主体页面的实现
Similar presentations
