网页设计与制作

张泉 老师

目录

  • 1 《网页设计与制作》概要
    • 1.1 课程标准
    • 1.2 课程考核方案
    • 1.3 课程任务汇总
  • 2 项目一  HTML语言
    • 2.1 网站和网页
    • 2.2 网站策划书
    • 2.3 HTML标识语言1--标签格式
    • 2.4 HTML标识语言2--属性和标题
    • 2.5 HTML标识语言3-段落排版和图片
    • 2.6 HTML标识语言4--链接和表格
    • 2.7 HTML标识语言5--样式和css
    • 2.8 HTML标识制作页面-简单排版
    • 2.9 HTML标识制作页面-链接及多页面
    • 2.10 HTML复习题
  • 3 项目二 DM软件制作页面和站点
    • 3.1 Dreamweaver  工作流程和工作区
    • 3.2 Dreamweaver  工作区2 --工具栏
    • 3.3 Dreamweaver  站点
    • 3.4 Dreamweaver  创建页面
    • 3.5 Dreamweaver  管理资源库
    • 3.6 Dreamweaver  CSS样式
    • 3.7 Dreamweaver  表格
Dreamweaver  工作区2 --工具栏

标准工具栏概述

“ 标准 ” 工具栏包含一些按钮,可执行 “ 文件 ” 和 “ 编辑 ” 菜单中的常见操作: “ 新建 ” 、 “ 打开 ” 、 “ 在 Bridge  中浏览 ” 、 “ 保存 ” 、 “ 全部保存 ” 、 “ 打印代码 ” 、 “ 剪切 ” 、 “ 复制 ” 、 “ 粘贴 ” 、 “ 撤消 ” 和 “ 重做 ” 。可像使用等效的菜单命令一样使用这些按钮。


样式呈现工具栏概述

“ 样式呈现 ” 工具栏 (默认情况下隐藏)包含一些按钮,如果使用依赖于媒体的样式表,这些按钮使您能够查看设计在不同媒体类型中的呈现方式。它还包含一个允许您启用或禁用 CSS  样式的按钮。若要显示该工具栏,请选择 “ 查看 ”>“ 工具栏 ”>“ 样式呈现 ” 。



默认情况下, Dreamweaver  会显示屏幕媒体类型的设计 (该类型显示页面在计算机屏幕上的呈现方式)。您可以在 “ 样式呈

现 ” 工具栏中单击相应的按钮来查看下列媒体类型的呈现。

呈现屏幕媒体类型 显示页面在计算机屏幕上的显示方式。

呈现打印媒体类型 显示页面在打印纸张上的显示方式。

呈现手持型媒体类型 显示页面在手持设备 (如手机或 BlackBerry  设备)上的显示方式。

呈现投影媒体类型 显示页面在投影设备上的显示方式。

呈现 TTY  媒体类型 显示页面在电传打字机上的显示方式。

呈现 TV  媒体类型 显示页面在电视屏幕上的显示方式。

切换 CSS  样式的显示 用于启用或禁用 CSS  样式。此按钮可独立于其它媒体按钮之外工作。

设计时样式表 可用于指定设计时样式表

状态栏概述

“ 文档 ” 窗口底部的状态栏提供与您正创建的文档有关的其它信息


A.  标签选择器 B.  选取工具 C.  手形工具 D.  缩放工具 E.  设置缩放比率 F.  窗口大小弹出菜单 G.  文档大小和估计的下载时间 H.  编码指示器

标签选择器 显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击<body> 可以选择文档的整个正文。若要在标签选择器中设置某个标签的 class 或 ID 属性,请右键单击 (Windows)  或按住Control  键并单击 (Macintosh)  该标签,然后从上下文菜单中选择一个类或 ID 。

选取工具 启用和禁用手形工具。

手形工具 用于在 “ 文档 ” 窗口中单击并拖动文档。

缩放工具和 “ 设置缩放比率 ” 弹出菜单 使您可以为文档设置缩放比率。

窗口大小弹出菜单 (在 “ 代码 ” 视图中不可用。)用于将 “ 文档 ” 窗口的大小调整到预定义或自定义的尺寸。

文档大小和下载时间 显示页面 (包括所有相关文件,如图像和其它媒体文件)的预计文档大小和预计下载时间。

编码指示器 显示当前文档的文本编码

属性检查器概述

“ 属性 ” 检查器使您可以检查和编辑当前选定页面元素 (如文本和插入的对象)的最常用属性。 “ 属性 ” 检查器中的内容根据

选定的元素会有所不同。例如,如果您选择页面上的一个图像,则 “ 属性 ” 检查器将改为显示该图像的属性 (如图像的文件路

径、图像的宽度和高度、图像周围的边框 (如果有),等等)。



文件面板概述

使用 “ 文件 ” 面板可查看和管理 Dreamweaver  站点中的文件。

在 “ 文件 ” 面板中查看站点、文件或文件夹时,您可以更改查看区域的大小,还可以展开或折叠 “ 文件 ” 面板。当折叠 “ 文件” 面板时,它以文件列表的形式显示本地站点、远程站点、测试服务器或 SVN  库的内容。在展开时,它会显示本地站点和远程站点、测试服务器或 SVN  库中的其中一个。

对于 Dreamweaver  站点,您还可以通过更改折叠面板中默认显示的视图 (本地站点视图或远程站点)来对 “ 文件 ” 面板进行自定义。












CSS  样式面板概述

使用 “CSS  样式 ” 面板可以跟踪影响当前所选页面元素的 CSS  规则和属性 ( “ 正在 ” 模式),或影响整个文档的规则和属性( “ 全部 ” )。使用 “CSS  样式 ” 面板顶部的切换按钮可以在两种模式之间切换。使用 “CSS  样式 ” 面板还可以在 “ 全部 ” 和 “正在 ” 模式下修改 CSS  属性。


可以通过拖放窗格之间的边框来调整任一窗格的大小。

在 “ 正在 ” 模式下, “CSS  样式 ” 面板将显示三个面板: “ 所选内容的摘要 ” 窗格,其中显示文档中当前所选内容的 CSS  属性

; “ 规则 ” 窗格,其中显示所选属性的位置 (或所选标签的一组层叠的规则,具体取决于您的选择);以及 “ 属性 ” 窗格,它

允许您编辑定义所选内容的规则的 CSS  属性。

在 “ 全部 ” 模式下, “CSS  样式 ” 面板显示两个窗格: “ 所有规则 ” 窗格 (顶部)和 “ 属性 ” 窗格 (底部)。 “ 所有规则 ” 窗格

显示当前文档中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表。使用 “ 属性 ” 窗格可以编辑 “ 所有规则 ”

窗格中任何所选规则的 CSS  属性。

对 “ 属性 ” 窗格所做的任何更改都将立即应用,这使您可以在操作的同时预览效果。