网页设计第二章

2.2.3 在网页中添加文字
1．添加普通文字 2．添加空格（   ）
3．添加段落换行（<p>…</p>标记 ） 4．添加换行符（<br>标记 ） 5．插入日期（单击“插入”|“日期” ） 6．插入特殊符号（单击“插入”|“HTML”|“特殊字 符” ） 7．设置文本格式（“格式”菜单和“属性”面 板）
（2）创建嵌套AP元素
嵌套AP元素是指在其他AP元素中创建的AP元素。可以继承父 AP元素的可见性并一起被移动。创建嵌套AP元素： 在某个AP元素中单击，然后单击“插入”|“布局对 象”|“AP div” 。 在代码中以<div><div>…</div></div>形式表示嵌套关系
2．AP元素的编辑
【操作实例11】使用AP元素设计网页
目标：利用AP元素技术来设计一个网页的布局，在各个AP元素中添加相应 的图像和文字，并对齐各个AP元素，使页面更整齐美观。
AP元素
AP元素的属性
AP元素与表格的转换
单击“修改”|“转换”|“将表格转换为AP Div”菜单命令 单击“修改”|“转换”|“将AP Div转换为表格来自百度文库菜单命令
【操作实例2】在“班级网站”站点中添加文件及文件夹
2.2 制作图文并茂的网页
2.2.1 在网页中添加图像 Dreamweaver支持 的图像格式： JPEG GIF PNG
方法一：单击“插入”|“图像” 方法二：单击“插入”面板中的 按钮
方法三：“资源”面板，单击 按钮，显示当前站点的所有 图像文件，选择所需图像后单击面板下方的“插入”按钮 图像 “属性”面板 设置示例
超级链接的设置
目标
welcome to use these PowerPoint templates, New 指定被链接的页面在哪个框架或窗口中打开。有 4个选项： _blank 或 _new ——将被链接文档载入到新的未命名的浏览 Content design, 10 years experience 器窗口中。 _parent——将被链接文档载入到父框架集或包含该链接的 框架窗口中。 _self——将被链接文档载入到与该链接相同的框架或窗口中 （注：本目标是默认的，所以通常无需指定）。 _top——将被链接文档载入到整个浏览器窗口并删除所有框 架。 【操作实例12】为网页xxindex.html创建文本和图像的超级 链接
2.5 超 级 链 接
超级链接由两部分组成：
2.5.1 文本和图像超级链接
超级链接源 超级链接目标
创建方法： （1）首先在编辑窗口中选取需要建立链接的图像或文字。 （2）然后在“属性”面板的“链接”文本框中填写链接地址。
对应XHTML代码为<a href="../index.html" target="_blank"><img src="pic/home.jpg" alt="回首页" width="780" height="31" /></a>
主要功能就是管理网站，它是 Content design, 10 years experience Dreamweaver中最重要的窗口； 具有管理本地站点的能力，包 括建立、复制、重命名文件或文 件夹、管理本地站点结构等操作； 还可以管理远端站点，包括文 件上传和文件更新等。
面板介绍
“历史记录”面板
2
格行、格列的添加与删除 合并、拆分单元格
1
表格的嵌套
3
2.4 CSS布局
CSS（Cascading Stylesheet）也称为层叠样式表，
用于控制Web页面的外观。他可以有效地对页面
的布局、字体、颜色、背景和其他效果实现更加 精确的控制。
CSS布局的基本构造块是<div>标签，<div>是一
个HTML标签，在大多数情况下用作文本、图像或
1．插入表格 单击“插入”面板“常用”选项卡中的“表格”按钮 welcome to use these PowerPoint templates, New
Content design, 10 years experience
或单击“插入”|“表格”菜单命令
表格、行、列、单元格的选定
（1）选择整个表格
③ 拆分视图 在这种视图状态下，编辑窗口一分为二，左边是 代码窗口，右边是设计视图的编辑区域
2.1.2 建立一个站点
建立一个网站，一般先要在本地机器上做好站点，然后 再传到网上的服务器空间里。 建立站点的主要步骤：在本地磁盘新建一个文件夹→在 Dreamweaver中把文件夹定义成站点→在站点内添加 网页→编辑网页→测试、上传网站。
要插入连续空格，通常可使用以下4种方法： 依次单击“插入”|“HTML”|“特殊字符”|“不换行的空格” 菜单命令。 按【Ctrl+Shift+Space】组合键。 单击“插入”面板“文本”选项卡中下拉菜单里的“不换 行的空格”命令。 把中文输入法切换到全角状态，按键盘上的空格键即可输 入连续的全角空格。
【操作实例5】添加字体
目标：在字体子菜单中增加“黑体”、“隶书”、“宋体”等 字体。 操作过程： ①选择“格式”| “字体” | “编辑字体列表”菜单命令。 ② 在“可用字体”列表中选择需要的字体，如：黑体。 ③ 单击“<<”按钮，黑体字体出现在“选择的字体”和“字体 列表”列表中。 ④ 单击“＋”按钮，再重复上两个步骤，可继续添加更多的 字体。 ⑤ 在“字体列表”列表中选中字体，单击 “－” 按钮可从列 表中删除字体。 ⑥ 添加完成后，单击“确定”按钮，在“字体”菜单中将出 现更新过的字体列表。
2.2.2 在网页中添加水平线
水平线 在网页中插入水平线，能够把网页分隔成几个部分，能使 welcome to use these PowerPoint templates, New
Content design, 10 years experience
网页的布局显得更加清晰。
在XHTML中是以<hr/>标记来表示水平线
第二章 Dreamweaver网页设计
学习目标
熟悉Dreamweaver CS5的工作流程 掌握网站创建与网页设计的方法 能够制作出图文并茂的网页 灵活运用表格、表单、框架以及模板等知识
2.1 初识Dreamweaver CS5
2.1.1 Dreamweaver CS5的启动与工作界面
与旧版相比的亮点： 对CMS的支持功能； 对CSS的校验； 对PHP更好的支持。
依次单击“窗口” |“历史记录” welcome to use these PowerPoint templates, New 菜单命令，打开“历史记录”面 Content design, 10 years experience 板。 这个面板保留了已操作的所有
工作流程，允许撤消任何一个操
作，包括已经存盘的。 对于初学者来说，这是个经常
welcome to use these PowerPoint templates, New 面板会根据插入对象的不同随时变化的 Content design, 10 years experience 点击“属性”面板右下角的小三角，可缩小或展开“属性”
面板
面板介绍
“文件”面板
welcome to use these PowerPoint templates, New
2．外观（HTML） 3．链接（CSS） 4．标题（CSS） 5．标题/编码 6．跟踪图像
2.3 表
格
表格的用途：一类是用于罗列数据。另一类是用
在网页定位上。
需要说明的是：传统的表格网页布局正逐渐地向
符合W3C标准的CSS网页布局过渡。表格将转变
为CSS网页布局的一种辅助定位技术。
2.3.1 表格的创建
Content design, 10 years experience
【操作实例10】使用CSS布局制作带导航的网页
目标：利用CSS布局技术和前面学习的知识来制作一个有关学习交流的网 页，包括标题部分（宽780px）、导航部分（宽172 px）、学习内容（宽 580 px）和说明部分（宽780 px）
使用的面板。
Dreamweaver CS5的工作界面介绍
标签选择器
单击该层次结构中的任何标签可以选择该标签及其全部内容
文档工具栏
方便用户在各种视图中查看当前文档的内容及其他信息
三种网页编辑视图
① 设计视图 默认的视图方式。以“所见即所得”的方式显示 被编辑网页的内容。
② 代码视图 切换为代码视图，可以看到本网页的HTML（或 XHTML）代码。
（1）创建普通AP元素
依次单击“插入”|“布局对象”|“AP div”菜单命令，在编 辑窗口将出现一个带有8个控点的AP元素。 单击 “插入”面板布局选项卡的“绘制AP div”按钮，在编 辑窗口拖动鼠标绘制AP元素。 提示：每个AP元素都带有一个AP元素标记，如果编辑窗口不 显示，请单击“编辑”|“首选参数”菜单命令，选中“不可 见元素”选项区域中的“AP元素的锚记”复选项
2.4.2 AP元素
AP元素在更早期的Dreamweaver版本中称为“层”，到了 Dreamweaver CS3版本将其更名为现名，意思是“绝对定 位元素”。 AP元素是分配有绝对位置的 <div>标签，即AP div。 使用AP元素能以像素为单位精确定位页面元素，并能将AP 元素放置在页面的任意位置。 当把文本、图像等页面元素放入AP元素中时，还能控制哪 个显示在前面、哪个显示在后面、哪个显示、 哪个隐藏
（1）选择AP元素 在AP元素内任何地方单击 按【Shift】键，在多个AP元素中单击
（2）移动AP元素 选择AP元素后，拖动选择手柄或AP元素边线； 每按一次方向键即可移动一个像素。
（3）对齐AP元素 单击“修改”|“排列顺序”子菜单
（4）在AP元素插入内容 当光标在AP元素中单击，可直接插入各种网页元素
图2-2 Dreamweaver CS5工作界面
Dreamweaver CS5工作界面
（1）菜单栏 （2）“属性”面板
（3）“插入”面板 （4）“文件”面板 （6）其他面板 （5）“历史记录”面板
（7）网页编辑主窗口 （8）标签选择器 （9）文档工具栏
面板介绍
“属性”面板 利用“属性”面板可以设置和修改对象的属性，“属性”
（2）选择表格的行
（3）选择表格的列
（4）选择单元格
（5）选择区域
【操作实例8】利用表格建立班级通信录
目标：在新建的tongxunlu.htm网页中，利用表格建立一个20行3列的带边框 的通信录，同时在表格单元中输入文字、图像等元素。
2.3.2 表格的编辑
1．表格的属性
2．单元格、行和列的属性
2.3.2 表格的编辑
其他页面元素的方框容器。
2.4.1 快速创建CSS布局
【操作实例9】第一个CSS布局网页
Dreamweaver CS5提供了10多个可以跨不同浏览器工作的预设 计布局，通过这些预设计布局可以轻松构建CSS布局页面。
【操作实例9】 解析
CSS布局
【操作实例9】建立的HTML页面中包含四个方框，一个大的 总方框 <div.container> 和里面的三个子方框，分别是标题方 welcome to use these PowerPoint templates, New 框、主内容方框和脚注方框，如图2-76所示。
【操作实例1】创建一个简单的站点 目标：在本地机器上创建一个站点，仅包含一个网页 index.html。 操作过程：略
2.1.3 文件及文件夹的添加
站点定义好后，要添加文件或文件夹充实站点内容。主 页文件是必不可少的，一般命名为index.htm、 index.html、index.asp、default.htm、default.html或 default.asp等。 同类型的文件，最好放在一个文件夹中，例如把图片文 件都放在image文件夹中。把同一栏目的所有文件放在 一个文件夹中，在链接网页和维护时，会很方便。 文件和文件夹的命名最好尽量不使用中文，可以用栏目 名称的拼音，也可以用栏目名称的英文。
【操作实例6】在index.html网页中添加文字并设置格式。 【操作实例7】设置index.html页面属性
“页面属性”对话框
welcome use 1．外观（to CSS ） these PowerPoint templates, New Content design, 10 years experience
2．添加空格
连续空格 在默认情况下，网页中的连续空格会被忽略，只显示一个空 welcome to use these PowerPoint templates, New
Content design, 10 years experience
格（在XHTML源代码中，空格是以&nbsp;来表示的）。若