网页设计与制作第4章 文本和样式

合集下载

网页设计与制作4

网页设计与制作4
№ 17
网页设计艺术
(2)在现有的表格中插入单元列 将光标移到在插入单元列的右边一列, 将光标移到在插入单元列的右边一列,选 修改” 表格 表格” 插入列 命令。 插入列” 择“修改”|“表格”|“插入列”命令。 将光标移到要插入单元列的右边一列, 将光标移到要插入单元列的右边一列,按 组合键“Ctrl+Shift+A”。 组合键“Ctrl+Shift+A 。 将光标移到要插入单元列的右边一列, 将光标移到要插入单元列的右边一列,单 击鼠标右键, 击鼠标右键,在弹出的快捷菜单中选择 表格” 插入列 命令。 插入列” “表格”|“插入列”命令。
网页设计艺术 第四章 网页表格的处理
表格是控制网页页面布局最有力的工具。 使用表格可以对列表数据进行布局,布局 网页文本、图像、媒体等。 通过本章学习应该掌握以下内容: 利用HTML创建和编辑网页表格 利用Dreamweaver MX处理表格
№1
网页设计艺术
4.1 利用Dreamweaver MX处理网页表格 4.2 利用HTML创建和编辑网页表格
№ 14
网页设计艺术
(3)选择多个单元格 选择多个单元格 按住Ctrl键 单击所要选择的所有单元格。 按住Ctrl键,单击所要选择的所有单元格。 Ctrl 将光标置于单元格中,拖动鼠标, 将光标置于单元格中,拖动鼠标,选择多 个单元格。 个单元格。 如果要选择整行, 如果要选择整行,将光标置于该行的左边 图标时单击鼠标左键。 缘,当光标变成 图标时单击鼠标左键。 如果要选择整列, 如果要选择整列,将光标置于该列的上边 图标时单击鼠标左键。 缘,当光标变成 图标时单击鼠标左键。
№ 19
网页设计艺术
删除整行/ (4)删除整行/整列 先选择欲删除的整行或整列,直接按Del 先选择欲删除的整行或整列,直接按Del 即可删除。 键,即可删除。 先将光标移到要删除的行或列中, 先将光标移到要删除的行或列中,选择 修改” 表格 表格” 删除行 删除行” 删除列” “修改”|“表格”|“删除行”或“删除列” 命令。 命令。 将光标移到要删除的行或列中, 将光标移到要删除的行或列中,单击鼠标 右键,在弹出的快捷菜单中选择“表 右键,在弹出的快捷菜单中选择“ 删除行” 删除列”命令。 格”|“删除行”或“删除列”命令。 删除行

《网页设计与制作》习题及答案

《网页设计与制作》习题及答案

第1章网页设计基础1.网页文件不包括 ( D )A HTML文件 B多媒体文件 C图像文件 D Dos文件2.网页构成元素按照元素划分为(ABCD )A 文本B 图像 C超链接 D音频和视频3. HTML文档结构中表示头部信息的( B)A < body > < /body > B<head></head> c <html></html> D<title></title>4.在HTML文档中,使文本内容强制换行的标签是(B)A<hr> B<br> C<pre> D<hn>5.以下哪个标签语言符合HTML的语法规范(D)A<img src=pic.jpg width=150 height=200/>B<p><div>文字加粗</p></div>C<p align=center>D<hr width=”400” color=”#000000”>6.不属于HTML标记的是( C )A.<html>B.<head>C.<color>D.<body>7.为了标记一个HTML文件,应该使用的HTML标记是( C )A.<p></p>B.<body></body>C.<html></html >D.<title></ title>二填空1.网页分为(静态网页)和(动态网页)两种类型。

2.HTML中的所有标签都是有一对(<>)围住。

3.HTML网页的标题是通过(<title></title>)标签显示的。

4.(<hr>)是水平线标签,可以在页面生成一条水平线。

网页设计与制作第四章

网页设计与制作第四章

(3)定义CSS样式的区块属性
在CSS样式定义对话框中的“分类”列表中选择 “区块”选项,设置CSS样式的“区块”属性, 包括单词间距、字母间距、对齐方式、文字缩进 等内容。
(4)定义CSS样式的方框属性
在CSS样式定义对话框中的“分类”列表中选择 “方框”选项,设置CSS样式的“方框”属性 。
4.1 CSS样式 样式
一.使用CSS样式面板 使用CSS样式面板 CSS
使用Dreamweaver MX 2004的CSS样式面板可以创建和管 理CSS样式。用下面的方法之一可以打开CSS样式面板: (1)选择命令“窗口”→“CSS样式”。 (2)单击“设计”面板上的小三 角形将 “设计”面板展开,选择 样 面板上的“CSS样式”标签。 式 面 (3)使用快捷键“Shift+F11” 板
二.模板的编辑 模板的编辑
1.编辑页面共用部分
(1)打开模板面板,然后 在模板面板的列表中选中 要修改的模板,单击“编 辑”按钮,或双击已有模 板名将模板打开; (2)编辑页面共用部分
2.定义可编辑区域
(1)将光标放在表格右边单元格中,单击鼠标右键 选择“模板”→“新建可编辑区域”,出现新建 可编辑区域对话框,为该区域输入一个名称;
4.2 模板
模板的创建 模板的编辑
模板
在一个网站中,有大量的网页具有相同的格式, 我们可以创建一个网页样本,在此样本中包含有 可编辑区域和不可编辑区域。不可编辑区域的内
模板 容是固定的,通常为标记、图标、导航栏目,而
可编辑区域内容是可变的,这就是模板。使用模 板可以大大提高制作网页的效率。
一、模板的创建
CSS 图
二.新建和编辑CSS样式 新建和编辑CSS样式 CSS 1.新建CSS样式 2.设置CSS样式定义对话框参数 3.编辑CSS样式表

网页设计与制第4章图文

网页设计与制第4章图文
3.图层 图层就像透明的胶片,每个层都包含一个显示在舞台中 的不同图像,在舞台上一层层地向上叠加,每一张又都保持 独立。在一个图层上绘制和编辑对象,不会影响其他图层上 的对象。当有很多图层时,可以组合出各种复杂的动画效果。 Flash中的图层位于时间轴左侧,如图4-17所示。
第4章 Flash 8入门 图4-17 图层
第4章 Flash 8入门 图4-26 设置“声音”属性
第4章 Flash 8入门
(4) 测试和保存影片。 ① 保存文档,文件名为“奔驰的骏马”。 ② 按组合键Ctrl+Enter测试影片,观看效果。 ③ 制作完成的动画场景如图4-27所示。
4.2 制作Flash动画
本节知识点
逐帧动画 形状补间动画 动作补间动画 引导层动画 遮罩动画
第4章 Flash 8入门
4.2.1 逐帧动画
逐帧动画是一种常见的动画形式,其原理是在“连续的 关键帧”中分解动画动作,也就是在时间轴的每个关键帧上 逐帧绘制不同的内容,连续播放形成动画。
案例1:制作“文字流光效果”动画 制作如图4-21所示的“文字流光效果”动画。
③ 选择“工具”面板上的“椭圆工具”,在“属性”面 板上设置笔触颜色为“没有颜色”,设置填充颜色为蓝色 (#0000FF)。移动鼠标到舞台的中间,按住键盘上的Shift键的 同时按住鼠标左键拖动,绘制出一个任意大小的正圆,如图 4-5所示。
第4章 Flash 8入门 图4-5 绘制出的小球
第4章 Flash 8入门
(5) 保存和测试动画。 ① 执行“文件”→“保存”命令(快捷键为Ctrl+S),弹 出“另存为”对话框,指定文件保存的路径,输入文件名 “小球运动”,保存类型为“Flash 8文档(*.fla)”,如图4-13 所示。

网页设计与制作第四章讲稿

网页设计与制作第四章讲稿

4.6.1 创建框架集与框架


HTML语言用标签<FRAMESET>表示框架集, 属性rows表示水平分割几个窗口,属性值可以是 数值、百分数,其中“*”表示分配剩余空间。 属性值的个数代表分割窗口数,并用逗号隔开。 例如,rows=“60,30%,*”表示将窗口水平分割 成三个子窗口,第一个窗口宽度为60像素,为绝 对高度,第二个窗口占整个窗口的50%,为相对 高度,第三个窗口分配剩余部分;属性cols表示 将窗口垂直分割,属性值表达方式与rows相似;
4.6.1 创建框架集与框架




属性frameborder表示框架是否显示边框, 其值只有0和1,0表示不显示边框,1表示 显示边框; 属性border表示框架的边框宽度,以像素 为单位; 属性bordercolor表示框架的边框颜色;属 性framespacing表示框架与框架间的间距。
4.6.1 创建框架集与框架
4.1.3 插入其它常见对象
插入图像 使用Dreamweaver插入图像,点击菜单栏的 【插入】→【图像】,弹出图像选择对话框,选 择图像所在路径,确定添加图像。 图像选择对话框上【URL】文本框会显示添加图 像的路径,图像的路径表达方式可以通过对话框 上【相对于】下拉菜单选择。默认值是【文档】 选项,表示路径表达方式是相对路径,而选项 【站点根目录】表示路径表达方式是根相对路径。
4.6.1 创建框架集与框架


属性scrolling表示窗口滚动条设置,其中 yes 表示一定显示滚动条,no表示从不显 示滚动条,auto表示根据页面大小决定是 否显示滚动条; 属性noresize表示使用者不可以改变这个 窗口边框的位置,如果没有设定noresize 属性,使用者可以随意地调整窗口边框的 位置;

《网页设计与制作》第4章课件

《网页设计与制作》第4章课件

如何实现窗口间的关联3-1
如何实现左列导 航,在右面显示 相关页面?
使用<a>标签的target目标窗口属性
如何实现窗口间的关联3-2
实现窗口间关联的步骤 1、设置窗口名(框架主页)
设置右窗口名为: rightFrame
…… <frameset rows="20%,*" frameborder="0"> ... ... <frame src="subframe/right.html" name="rightFrame"> ... ... </frameset> ……
操作演示:iframe常用属性
练习——引用google主页
需求说明:
根据提供的素材实现
引用Google主页
练习——<iframe>实现页面复用
需求说明:
根据提供的素材实现
总结2-1
框架的基本语法? 如何实现2行2列的典型框架?
如何实现窗口间关联?
内嵌框架的语法?
……
<body> <iframe src="" width="400px" height="236px" frameborder="1" scrolling="no" > <iframe/>
引用站内页面 <iframe src="subframe/the_second.html" width="400px" height="236px" scrolling="no" > <iframe/> </body> …… 引用站外页面: sohu

《网页设计与制作—第四章》:页面设计(免费下载)

《网页设计与制作—第四章》:页面设计(免费下载)

10
返回
网页布局实例3 网页布局实例3
11
标题正文型结构的顶端是网站标识和标题 ,下面是网页正文。内容非常简单。
返回
网页布局实例4 网页布局实例4
12
返回
网页布局实例5 网页布局实例5
13
返回
网页布局实例6 网页布局实例6
14
返回
15
网页的版面布局
1.确定显示分辨率 确定显示分辨率
(1)T型结构布局
返回
多个层的大小调整
46
• 选择需调整大小的多个层,然后选择“修 改/对齐”菜单中的“设成宽度相同”或 “设成高度相同”命令,则所有选择的层 将设置为最后选择层的宽度或高度,也可 在“属性”面板的“宽”、“高”文本框 中输入所需的宽度和高度值,再按Enter键, 选择的所有层将调整为设定的大小。
返回
在一个已有的层中描绘新层时按住[Alt]键可绘制 现有层的嵌套层,如果不按住[Alt]键绘制的是连个 重叠的层。 在层面板中按住[Ctrl]键将一个层拖动到层列表的 另一个层上,可将其变为后者的子层。
返回
层与表格的互相转换
1. 将层转换成表格
选中要转换的层,使用菜单“修改”→“转 换”→“层到表格”打开转换层为表格对话框。
50
返回
使用层实现图文混排2 使用层实现图文混排2
重复上述操作,再次插入两个新层。这样 在该单元格中共插入三个层,我们将图片移到 在左上方的层中,文字移到右上方和下面的层 中。 单击该标记可以选中其所对应的层。单击层 的外围框线,选中层。将鼠标指针移动到框线 上,拖动鼠标,更改层的大小为图像大小。 调整文字的字 号和字体 ,以 及层的位置, 实现图文混排 。
返回

网页设计与制作第4章PPT课件

网页设计与制作第4章PPT课件
ID:用于设置HTML 5音频的标题。 源:用于设置HTML 5音频源文件。 Controls:选中该属性,表示显示音频播放控件。 Autoplay:选中该属性,则音频在加载完成后自动播放。 Loop:选中该属性,则音频将循环播放。 Muted:设置音频是否静音。 Preload:选中该属性,则音频在页面加载的同时进行加载,并预备播放。如果已选中 “Autoplay”,则忽略该属性。 “Alt源1”和“Alt源2”:用于设置当“源”编辑框中设置的音频格式不被当前浏览器支持 时,打开的第2种和第3种音频格式。
一、网页、网站和主页
15
拓展知识
HTML 5 Audio和Video所支持的音频和视频格式
HTML 5 Audio元素能够播放声音文件和音频流,下表列出了当前Audio元素支持的3种音频格式及其所适用 的浏览器。
IE 9
Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
4
相关知识
一、插入HTML 5 Audio
步骤 01 将本书附赠的“素材与实例\ch04”目录下的“blog”文件夹拷贝至本地磁盘,并以“blog”为站 点文件夹,在Dreamweaver CC中创建站点“blog”。
步骤 02 启动Dreamweaver CC,在“文件”面板中双击打开站点“blog”中的“music.html”文档。
“W”和“H”:用于设置视频对象的宽度和高度,默认单位为像素。 Flash回退:用于设置在不支持HTML 5视频的浏览器中显示的SWF文件。
9
三、插入并编辑插件
步骤 01 步骤 02
步骤 03
在“blog”站点中新建文档“chj.html”,并将其在文档编辑窗口中打开。 将插入点置于文档编辑窗口中,单击“插入”面板“HTML”类别中的“插件”按钮,打 开“选择文件”对话框。 在对话框的文件列表中选择要 插入的文件“cj.mp3”,并单 击“确定”按钮,插入插件, 如右图所示。
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

文本的应用
1. 文本的输入
所见即所得 将光标定位到要 输入文字的空白区 域 输入文字 换行回车
文本的应用
2. 编辑区域的设置
可编辑区域,即文字 或图片与网页的边距。 在网页任意位置,单 击鼠标右键 打开“页面属性”对 话框
文本的应用
3. 字符格式化
字符格式化主要是设置字体,字体大小, 文字的粗细、倾斜及文字的颜色等。 字符格式的设置主要是使用“文本”菜单 中的各种命令或者使用“属性面板”中的 各种快捷方式
文本的应用——段落格式化
(3) 选择不同的标题进行设置,其效果如图所示。
文本的应用——段落格式化

段落对齐有四种方式
左以齐 居中对齐 右对齐 两端对齐
CSS样式
CSS是 Cascading Style Sheet 的缩写,译 为“层叠样式表单” 作用:设置网页中文字的样式 与字符格式化区别

相同格式的文字设置 大量相同格式的文字样式的设置特别有效
CSS样式
样式分为三种,即类样式,标签样式, 高级样式 类样式 标签样式 高级样式 样式的两种保存方式:

在网页内部 在外部文件中(.css)
CSS样式

CSS样式的基本操作
自动创建样式 使用“CSS样式面板”创建样式

CSS样式的应用
建立新网页
1. 建立新网页的方 法
在Dreamweaver的 开始画面 执行“文件” →“新建”菜单 命令
建立 新网页
2. 保存网页
新网页的在 没有保存前的 默认名称是: Untitled-n 执行“文 件”→”保存 “菜单命令
建立新网页
3. 设置网页标题
网页的工具栏 上”标题”选项 输入标题
实训指导4
Step3:输入文字。 (1) 打开Dreamweaver,执行”文件” →”新建 “菜单命令,弹出“新建文档”窗口。 (2) 在“新建文档”窗口中选择“基本页”中的 “HTML”,再单击【创建】按钮,创建一个新网 页。 (3) 在网页中输入“静夜诗”的内容,并执行 “文件”→“保存”菜单命令。
CSS样式

CSS样式的应用 创建样式 样式的设置 应用到网页中的 文字
总结
新建网页的两种方式 文本格式化的内容:字体,字体大小,颜 色,粗体,倾斜 段落格式化的内容:左对齐,居中对齐, 右对齐,两端对齐 CSS样式的种类:类样式,标签样式,高 级样式

实训指导4
【实训项目1】某诗词鉴赏网站要制作一些古诗欣赏页 面,供广大读者欣赏,要求如下:页面内容可以是五言 绝句,七言绝句,宋词,元曲等。页面格式要求如下: (1) 每首诗、词、曲用一张网页显示,内容全部居中显 示。 (2) 要有标题,标题使用宋体,36号字,粗体,黑色。 (3) 内容使用楷书,使用28号字,蓝色。 (4) 因为要内容格式统一,要求使用CSS样式进行上述 格式的设置。
文本的应用——字符格式化
(1) 编辑字体
“编辑字体列表” 对话框中编辑网页 可用字体
文本的应用——字符格式化
(2) 设置字符格式
字体 字体大小 颜色 粗体 斜体
文本的应用——段落格式化
1.设置段落与标题 选中文字,可以将此文字设置为段落或标题,将一段独 立的台词设置为段落或标题,可以让整个网页显的有层 次感,网页标题分为6级。其操作步骤如下: (1) 在网页中选中相应的文字。 (2) 在“属性面板”中选择“格式”下拉列表,如图所 示。
实训指导4
操作步骤参考如下: Step1:建立站点SX9 (1) 启动Dreamweaver,执行“站点”→“新建站点”菜 单命令。 (2) 在打开的“未命名站点1的站点定义为“对话框中输 入站点名称sx9。 (3) 选择合适的位置放置站点文件。 Step2:建立网页,设置其属性 (1) 在Dreamweaver中执行“文件”→“新建”,打开 “新建文档”对话框。 (2) 选择“基本页”中的“HTML”部分,创建HTML网 页。 (3) 设置网页的标题。
实训指导4
Step4: 建立样式,并应用到网页中。 (1) 执行“窗口”→“CSS样式”,打开“CSS样式面 板”,设置标题的样式,样式名称为JinTitle。 (2) 在“CSS样式面板”上单击鼠标右键,在弹出的快捷 菜单中选择“新建”菜单命令,建立样式,并命名为 JinContent。 (3) 在编辑区域选中“静夜诗”,并在“属性面板”中选 择样式JinTitle。 (4) 在编辑区域选中其它文字 ,并在“属性面板”中选择 样式JinContent。
上一章回顾

Dreamweaver工作环境 站点创建与管理 制作一个简单的网页
制作网页标题 设置导航栏 设置网页内容 图像和文字的链接 设置页面属性 保存网页 浏览网页 设置首页及应用站点地图
本章目标
建立 新网页 文本的应用

文本的输入 文本的格式化 段落格式化
综合练习4
2. 填空题 (1) 为网页设置可编辑区域时,在”页面属性“对话框 中设置_______、_______、_______、________。 (2)对字符格式化时,可以设置字符的字体、颜色、字体 大小、________、_________。 3. 简答题 (1) 简述使用CSS样式的过程? (2) 简述CSS的种类?
综合练习4
综合练习4 1. 选择题 (1) 在网页的设计中,对其中的文字进行格式化设置时,下列哪些不是对文字 格式化( )。 A. 粗体 B. 倾斜 C. 大小 D. 左对齐 (2) 在网页的设计中,设置段落格式时,可以将段落设置为( )。 A. 左对齐 B. 居中对齐 C. 两端对齐 D. 倾斜 (3) 新建网页时,在“新建文档”对话框中选择”基本页”中的( )来创建一 个HTML网页。 A. HTML模板 B. HTML C. CSS D. XSLT片段
实训指导4
Step5:浏览网页,查看效果。 (1) 保存网页,并按下快捷键F12,浏览网页内容,其效 果如图所示。
实训指导4
【实训项ห้องสมุดไป่ตู้2】设计一张网页,内容为个人简介 信息,要求对其中的文字进行格式化,使用宋体 12号字,加粗,颜色为蓝色,要写三段文字,分别 使用居中,左对齐,右对齐的方式显示。 【实训项目3】设计两张网页,内容为个人简介 信息和班级简介,要求对其中的文字进行格式化, 使用楷体14号字,斜体,颜色为蓝色,但要求使用 CSS样式。
相关文档
最新文档