网页设计与制作-第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 即可删除。键，即可删除。先将光标移到要删除的行或列中，先将光标移到要删除的行或列中，选择修改” 表格表格” 删除行删除行” 删除列” “修改”|“表格”|“删除行”或“删除列” 命令。命令。将光标移到要删除的行或列中，将光标移到要删除的行或列中，单击鼠标右键，在弹出的快捷菜单中选择“表右键，在弹出的快捷菜单中选择“ 删除行” 删除列”命令。格”|“删除行”或“删除列”命令。删除行

《网页设计与制作》程序代码第4章

【例4-1】网页中文字上下滚动循环显示。

<html><head><title>文字上下滚动循环显示</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script language=JavaScript>var messages=new Array()messages\[0\]="<font color=#8000FF>欢迎使用本书学习</font></a>"messages\[1\]="<font color=#FB2500>这里有织网梦工厂</font></a>"messages\[2\]="<font color=#FF0066F>是网页初学者的最佳选择</font></a>" messages\[3\]="<font color=#000000>这里有…………有精彩的内容等着你</font></a>" var scrollerwidth=320var scrollerheight=100var scrollerbgcolor=′#FFFFFF′if (messages.length>1)i=2elsei=0function move1(whichlayer){tlayer=eval(whichlayer)if (tlayer.top>0&&tlayer.top<=5){tlayer.top=0setTimeout("move1(tlayer)",3000)setTimeout("move2(document.main.document.second)",3000)return}if (tlayer.top>=tlayer.document.height*-1){tlayer.top-=5setTimeout("move1(tlayer)",100)}else{tlayer.top=scrollerheighttlayer.document.write(messages\[i\])tlayer.document.close()if (i==messages.length-1)i=0elsei++}}function move2(whichlayer){tlayer2=eval(whichlayer)if (tlayer2.top>0&&tlayer2.top<=5){tlayer2.top=0setTimeout("move2(tlayer2)",3000)setTimeout("move1(document.main.document.first)",3000)return}if (tlayer2.top>=tlayer2.document.height*-1){tlayer2.top-=5setTimeout("move2(tlayer2)",100)}else{tlayer2.top=scrollerheighttlayer2.document.write(messages\[i\])tlayer2.document.close()if (i==messages.length-1)i=0elsei++}}function move3(whichdiv){tdiv=eval(whichdiv)if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){ tdiv.style.pixelTop=0setTimeout("move3(tdiv)",3000)setTimeout("move4(second2)",3000)return}if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){tdiv.style.pixelTop-=5setTimeout("move3(tdiv)",100)}else{tdiv.style.pixelTop=scrollerheighttdiv.innerHTML=messages\[i\]if (i==messages.length-1)i=0elsei++}}function move4(whichdiv){tdiv2=eval(whichdiv)if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){ tdiv2.style.pixelTop=0setTimeout("move4(tdiv2)",3000)setTimeout("move3(first2)",3000)return}if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){tdiv2.style.pixelTop-=5setTimeout("move4(second2)",100)}else{tdiv2.style.pixelTop=scrollerheighttdiv2.innerHTML=messages\[i\]if (i==messages.length-1)i=0elsei++}}function startscroll(){if (document.all){move3(first2)second2.style.top=scrollerheight}else if (yers){move1(document.main.document.first)document.main.document.second.top=scrollerheight+5document.main.document.second.visibility='show'}}window.onload=startscroll</script><ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight};bgcolor=&{scrollerbgcolor};><layer id="first" left=0 top=1 width=&{scrollerwidth};><script language="JavaScript1.2">if (yers)document.write(messages\[0\])</script></layer><layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide><script language="JavaScript1.2">if (yers)document.write(messages\[1\])</script></layer></ilayer><script language="JavaScript1.2">if (document.all){document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;backgrou nd-color:'+scrollerbgcolor+'">')document.writeln('<divstyle="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0'+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')document.writeln('<divid="first2"style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">') document.write(messages\[0\])document.writeln('</div>')document.writeln('<divid="second2"style="position:absolute;width:'+scrollerwidth+';left:0;top:0" >')document.write(messages\[1\])document.writeln('</div>')document.writeln('</div>')document.writeln('</span>')}</script></head><body bgcolor="#FFFFFF" text="#000000"> </body></html>。

第四讲网页设计与制作 DreamweaveCs5

图 4-21 层属性面板
在层属性面板中： • 层编号：用于指定一个名称，用于识别不同的层。 • 左和上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。 • 宽和高：指定层的宽度和高度。 • Z 轴：确定层的z轴顺序（即堆叠顺序）。 • 可见性：指定该层最初是否是可见的，有4个选项： • “默认”：不指定可见性属性，默认为“继承”。 • “继承”：使用该层父级的可见性属性。 • “可见”：显示这些层的内容。 • “隐藏”：隐藏这些层的内容。 • 背景图像：指定层的背景图像。 • 背景颜色：指定层的背景颜色。 • 溢出：控制当层的内容超过层的指定大小时如何在浏览器中显示层。 • “可见”：指示在层中显示额外的内容。 • “隐藏”：指定不在浏览器中显示额外的内容。 • “滚动”：指定浏览器应在层上添加滚动条，而不管是否需要滚动条。 • “自动”：使浏览器仅在需要时才显示层的滚动条。 • 剪辑：定义层的可见区域。指定左侧、顶部、右侧和底边坐标可在层的坐标空间中定义一个矩形。层经过“剪辑”后，只有指定的矩形区域才是可见的。
（5）如果必要，提示用户下载 Flash Player：在页面中插入代码，该代码将检测查看Flash视频所需的Flash Player版本，并在用户没有所需的版本时提示它们下载Flash Player的最新版本，设置各个选项如图4-19 所示。
图4-19 “插入Flash 视频”对话框
（6）单击“确定”按钮，插入Flash 视频操作完成，如图4-20所示。
图4-6 “对象标签辅助功能属性”对话框
（4）单击“确定”按钮，文档中效果如图4-7所示。
图4-7 文档中Flash效果
（5）选择该动画，单击Flash属性面板中的播放按钮。Flash 动画就可以在文档中直接播放了，如图4-8所示。

第四讲网页设计与制作基础

像
体积小,便于网络传制作麻烦输
支持 24 位颜色深度，不支持压缩
兼容性好
容量大
适用场合网页图片网页图片
网页动画桌面墙纸
制作工具 Photoshop Photoshop
Flash photoshop
-----精品文档------
图像标签

图像的基本语法
图像的位置
图像的宽度
图像的高度
<IMG src="images/adv_2.jpg" width="300“ height="150“
Enter表示换段 Shift+Enter表示换行
插入空格
创建列表
1、项目列表 2、编号列表
演示示例2：基本标签的使用2
-----精品文档------
内容分隔<HR>标签项目列表和编号
有序列表<OL> 无序列表<UL>
预格式文本<PRE>标签
有序列表
文字布局
水平分隔线 <HR>
无序列表
用了预先定义好的格式
</PRE>
-----精品文档------
HTML中代码格式与浏览器中显示效果一样
页面链接<A>标签
查看源代码
链接到其他页面
<HTML>
<HEAD>
链接的地址
<TITLE>链接到其他页面</TITLE>
链接内容
</HEAD>
<BODY<>A
href="register/register.html">[免费注册]</A>

《网页设计与制作》第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

网页设计与制作第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”，并单击“确定”按钮，插入插件，如右图所示。

网页设计与制作基础教程ch04简明教程PPT课件

网页设计与制作基础教程
本章知识点
CSS样式的概念在网页文档中使用CSS样式编辑CSS样式设置CSS样式

网页设计与制作基础教程
4.1 CSS样式的概念
CSS样式是Cascading Style Sheets(层叠样式单)的简称，也可以称为【级联样式表】，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。
网页设计与制作基础教程
4.1.2
CSS规则
CSS规则由两部分组成：选择器和声明(大多数情况下为包含多个声明的代码块)。选择器是标识已设置格式元素的术语，例如 p、h1、类名称或ID，而声明块则用于定义样式属性。例如下面CSS规则中， h1 是选择器，大括号({})之间的所有内容都是声明块。
网页设计与制作基础教程
网页设计与制作基础教程
4.3.3
移动CSS规则
在Dreamweaver CS4中的CSS规则，可以很方便地移动到不同位置，例如将规则在文档间移动、从文档头移动到外部样式表、在外部CSS文件之间移动等等。如果移动的CSS规则与目标样式表中的规则冲突，系统会打开一个【存在同名规则】对话框，将移动的规则放在目标样式表中紧靠冲突规则的旁边。
4.3
编辑CSS样式
新建好CSS样式后，如果要对CSS样式进行编辑等操作。对CSS 样式的编辑操作主要包括修改CSS样式属性、设置CSS样式首选参数以及链接和导入CSS样式。

设置CSS样式首选参数修改CSS样式移动CSS规则链接和导入CSS样式
网页设计与制作基础教程
4.3.1
网页设计与制作基础教程
4.2.3 新建CSS规则
创建一个CSS规则后，可以用来自动完成HTML标签的格式设置或者class或ID属性所标识的文本范围的格式设置。将光标移至网页文档中，选择【格式】|【CSS样式】|【新建】命令，打开【新建CSS规则】对话框，如图所示。

中职高教版《网页设计与制作任务驱动教程》4

创建样式文件base.css，将其保存到文件夹“css”。
（1）定义标签section的属性
打开【CSS设计器】面板，在【选择器】区域单击【添加选择器】按钮，然后输入选择器名称 “ section ” ，按【 Enter 】。然后单击选择选择器 “section”，在“布局”区域“width”属性行中输入 “1200px”。在“margin”区域上方输入“10”，即设置margin-top的属性值为“10px”。
}
14 《网页设计与制作任务驱动教程（第3版）》
由于margin和padding
四个方向的属性都设置为
0px，可以将代码予以简化，
结果如下所示。
h1, h2, p {
margin: 0px;
padding: 0px;
}
15 《网页设计与制作任务驱动教程（第3版）》
2．创建样式文件base.css
图4-1 网页0401.html的浏览效果
4 《网页设计与制作任务驱动教程（第3版）》
【任务实施】
1．创建样式文件base.css来自在Dreamweaver CC主窗口的【文件】菜单中选择【新建】命令，打开【新建文档】对话框，在该对话框左侧选择“空白页”，“页面类型”选择 “CSS”。
在【新建文档】对话框中单击【创建】按钮创建一个CSS样式文件。
（2）添加选择器h1, h2, p并定义其属性
在【CSS设计器】面板的选择器列表中选择选择器 “body”，然后单击【添加选择器】按钮，然后输入新的选择器“h1,h2,p”，如图 4-8所示。
图4-8 添加新的选择器h1,h2,p
12 《网页设计与制作任务驱动教程（第3版）》

《网页设计与制作》模块4图文模板

图4-
模块4：网页切图
任务实施
学习导入学习目标任务切割图片任务描任述务任目务标任分务析实任施务评任价务总必结
9、图片格式为JPEG，它就是JPG，一样的。关键是品质的设定，我们都知道如果一张图片越大它在网上打开的速度就越慢，当我们把图片的品质设的越小，它的大小就越小，但是如果品质太差，图片会变模糊，所以一般情况下如果是网上使用的图片，品质可以设置60，既保证图片较小也不会模糊。这个数值由你自己设置，是大是小，具体看你的要求，试试就知道了。这里有个问题是你只是对其中一个切片设置品质，其他切片又要重新设置，所以存的时候最好检查一下。
模块4：网页切图
学习导入
学习导入学习目标任务切割图片任务描任述务任目务标任分务析实任施务评任价务总必结
在本模块中着重介绍切片工具、切片选择工具在切图面方面的应用，通过讲解一个简单的例子，掌握切图的方法和技巧
模块4：网页切图
学习目标
学习导入学习目标任务切割图片任务描任述务任目务标任分务析实任施务评任价务总必结
图4-10
图4-
10、前面设置好后点击存储会显示以上界面。格式选11项选择HTML和图
像，默认是图像的，这样我们就能得到网页代码了。
模块4：网页切图
任务评价
学习导入学习目标任务切割图片任务描任述务任目务标任分务析实任施务评任价务总必结备知
11、保存后得到一个图片文件夹和一个网页，你看到的网页图标可能与4-12不一样，这个没有关系，因为浏览器不一样。
日期：
60%
模块4：网页切图
任务总结
学习导入学习目标任务切割图片任务描任述务任目务标任分务析实任施务评任价务总必结

页面布局设计

4.3 使用表格排版
表格是由一些被线条分开的单元格组成。线条即表格的边框，被边框分开的区域被称为单元格，数据、文字、图像等网页元素均可根据需要放置在相应的单元格中。如图所示。
在网页中使用表格一般有两种情况：一种是在需要组织数据显示时用；另一种是在布局网页时用。当表格被用作布局时，需要对表格的属性进行设置。
步骤2 单击“绘制布局单元格”按钮，鼠标在页面上变为“+”形，按下鼠标左键拖动可绘制布局单元格。
4.3.4 在布局模式下插入表格和单元格
如图所示：
4.3.5 表格排版实例的制作过程
本小节讲解【例4.1】利用表格进行网页布局的制作过程。作为专业的设计者，首先利用图形制作软件如： Fireworks、Photoshop等，绘制一张网页草图，然后根据网页草图利用表格对网页进行排版。
在布局模式下，使用表格进行布局具有定位简单、容易调整等优点。例如：在布局模式中可以在页面上方便地绘制布局单元格，可将这些单元格拖动到所需的位置；还可以方便地创建固定宽度的布局或自动伸展为整个浏览器窗口宽度的布局。
4.3.4 在布局模式下插入表格和单元格
1、绘制布局表格与布局单元格首先从标准模式切换到布局模式：单击“插入”栏｜
4.4 使用层排版
除了表格以外，层是另外一种定位网页元素的方法。本节介绍层的概念和操作，并通过一个实例说明如何利用层进行页面布局的设计。
4.4.1 实例导入：层排版网页
Dreamweaver中的层是一种网页元素定位技术，它可以包含文字、图像、表格、插件甚至其它层。一个网页中可以含有多个层，层的特点在于各个层之间可以重叠，并可以决定每个层是否可见，还可以定义各个层之间的层次关系。层可以转换成表格，通过与“时间轴”及行为的结合，能够实现动态交互效果。

《网页设计与制作》第04章

无边框。无边框。
• 表格宽度控制：依次为清除列宽、将表宽度转换为像素表格宽度控制：依次为清除列宽、
单位、将表宽度转换为百分比单位。单位、将表宽度转换为百分比单位。
• 表格高度控制：依次为清除列宽、将表列度转换为像素表格高度控制：依次为清除列宽、
单位、将表列度转换为百分比单位。单位、将表列度转换为百分比单位。
拆分单元格” 弹出“拆分单元格”对话框。拆分单元格”按钮，弹出“拆分单元格”对话框。
• 步骤6：在对话框中设置行为3。单击“确定”按钮。步骤6 在对话框中设置行为3 单击“确定”按钮。 • 步骤7：保存。按F12预览。步骤7 保存。 F12预览预览。
4.2 布局视图的使用
4.2.1 绘制布局视图
属性面板。属性面板。
• 单元格属性面板参数说明：单元格属性面板参数说明： • 合并与拆分单元格：将选取的多个单元格合并，或将单元格合并与拆分单元格：将选取的多个单元格合并，
拆分为多行或多列。拆分为多行或多列。
• 水平、垂直：设置单元格内容的水平对齐与垂直对齐方式。水平、垂直：设置单元格内容的水平对齐与垂直对齐方式。 • 宽、高：设置单元格的宽度和高度。设置单元格的宽度和高度。 • 不换行：购选此项，文本超出单元格的宽度时不自动换行，不换行：购选此项，文本超出单元格的宽度时不自动换行，
《网页设计与制作》
第四章网页布局
讲解提纲
• 4.1 表格的使用 • 4.2 布局视图的使用 • 4.3 层的使用 • 4.4 框架的使用
本章教学目标：
• • • •
1．掌握新建表格编辑表格 2．熟练掌握布局视图的使用 3．掌握层的使用在页面中的应用 4．掌握框架的技术使用
4.1表格的使用 4.1表格的使用

【2024版】网页设计与制作-站点的规划与创建ppt课件

《网页设计与制作》装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
站点窗口的显示
站点的创建和管理主要在站点窗口中进行。显示站点窗口的方法有如下两种。
➢ 在窗口浮动面板组中，单击浮动面板组上的按钮展开“文件”面板，如图4-4所示。再单击“站点”下拉列表，打开如图4-5所示的“站点”下拉列表。
首页末页向上向下返回结束调音
《网页设计与制作》装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
《网页设计与制作》装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
第四课站点的规划与创建
➢课前导读 ➢课堂讲解 ➢上机实战 ➢课后练习
首页末页向上向下返回结束调音
《网页设计与制作》装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
在实际的制作过程中，有两种方法保存这些内容。一种方法是在整个站点中只建一个图像文件夹、一个模板文件夹、一个动画文件夹……整个站点中的相应文件都保存在相应文件夹中，如图4-1所示。另外一种方法是在每个子栏目中分别建立各自的图像、动画、模板等文件夹，各栏目中的图像、动画、模板分别保存在各自栏目的文件夹中，如图4-2所示。
创建Web站点的第一步是规划。为了达到最佳效果，在创建任何Web站点页面之前，应对站点的结构进行设计和规划，接着配置Dreamweaver 以使可以在站点的基本结构上正常工作。如果在 Web服务器上已经建有一个站点，则可以使用 Dreamweaver来编辑修改该站点。

《网页设计与制作》第04章

制布局表格。单击“布局”工具栏上的“绘制布局单元格”按钮，绘制布局单元格。
• 步骤4：拖动鼠标在页面上绘制出所需要的表格，即可完成布
局模式的创建。布局表格为浅绿色，上面带有布局表格的标签和列标题栏。在列标题栏上显示着每列的宽度，单击列标题栏可以打开列标题菜单。
• 步骤5：绘制完布局表格和单元格后，系统会自动生成表格。
• 2. 设置表格属性
如果需要查看表格的属性，可以选中表格，弹出表格属性面板。
• 表格属性面板参数说明： • 表格Id：表格名称，用于脚本语言中的引用。 • 行、列：表格的行与列。可输入数值改变表格的行数和列数。 • 宽、高：表格的宽与高。可输入数值改变表格的宽与高，单位
有百分比和像素。
• 填充：单元格边框相对于单元格内容的距离。 • 间距：表格内单元格之间的距离。 • 对齐：可以设置表格水平对齐方式，包括默认、左对齐、居中
动到适当的位置。
4.2.3 重设布局表格和单元格的大小
• 步骤1：打开buju.htm，切换到布局模式下。 • 步骤2：选中要调整的布局表格，出现控制点，用鼠标
拖动控制点，调整布局表格的大小。
• 步骤3：选中要调整的布局单元格，出现控制点，用鼠
标拖动控制点，调整布局表格的大小。
4.2.4 清除单元格高度
击“插入”按钮。
• 步骤3：在“标签编辑器-Iframe”对话框中，根据面板提示
操作。最基本的两项是“源”和“名称”。
• 步骤4：设置链接在某个iframe中打开。选中链接，在属性
面板中的“目标”项，手工输入目标iframe的名称。
• 步骤5：iframe透明。为了使iframe内容和网页背景相同，
择链接的文档应在其中显示的框架或窗口。

网页设计与制作-第4讲

</form>
输入标记<INPUT>
输入标记属性： Name : 域的名称，即输入数据所存放的变量名 Type: 域的类型
Text Password File Checkbox Radio Button Submit Reset Image
文字域密码域文件域复选框单选框普通按钮提交按钮重置按钮图像域（图像提交按钮）
下拉菜单的制作标记：<select…...> <option selected>选项一 <option>选项二 <option>选项三
TOSO官方旗舰店
…...
</select…...> 属性： name size 菜单中显示的选项条数 multiple 允许多选
例：你所熟悉的语言： <select name=yuyan size=2 multiple> <option selected>汉语 <option >英语 <option >日语 <option >德语 <option >俄语 <option >法语 </select>
制作图像提交按钮
标记：<input…...> 属性：type=“Image” 图像提交按钮 name=“f1” src=“图像文件名” 例： <input type=“image” name=“f1” src=“按钮.gif”>
设置多行文本输入框标记：<textarea …...> 预设文字 </textarea> 属性： name 输入变量名 rows 文本框的长度 cols 文本框的列数例： <textarea name=y1 rows=10 cols=50> 请留言： </textarea>

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

9.0+ No
Firefox 3.5+
No 4.0+
Opera 10.5+
No 10.6+
Chrome 5.0+
5.0+ 6.0+
Safari No
3.0+ No
Ogg
MPEG 4 WebM
项目四为网页设置音视频和超链接
16
二、为网页设置背景音乐
步骤 01 步骤 02 步骤 03
打开要添加背景音乐的网页，此处打开“blog”站点中的“bowen1.html”。将插入点定位在网页最下方，单击“插入”面板“HTML”类别中的“HTML 5 Audio”，插
接对象的相对路径；也可以通过单击“链接”编辑框右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择链接对象。
步骤 01
打开站点“blog”根目录下的网页文档 “index.html”，选中导航栏中的文本
“乐曲欣赏”，单击“属性”面板上
“链接”编辑框右侧的“浏览文件”按钮，如右图所示。
项目Байду номын сангаас 为网页设置音视频和超链接
IE 9 Ogg Vorbis MP3 Wav √
Firefox 3.5 √
Opera 10.5 √
Chrome 3.0 √ √
Safari 3.0
√ √
√
√
项目四为网页设置音视频和超链接
15
HTML 5提供了展示视频的标准，当前Video元素支持的视频格式及其适用的浏览器如下表所示。
格式
IE 9 No
如右图所示。
项目四为网页设置音视频和超链接 29
步骤 03
单击其中的“矩形热点工具” ，然后移动鼠标到所选图像上“more>>”所在区域，单击鼠标左键并拖动，绘制一个矩形区域，如下图所示。

新编Dreamweaver CS3动态网页设计与制作教程图文 (4)

第4章文字和图像的应用图4.5 【换行符】命令
第4章文字和图像的应用
3. 插入水平线为了区分网页中插入的不同内容，可以通过添加水平线在不完全分隔界面的情况下来区分上下区域。具体操作步骤如下： (1) 打开文本并定位插入点。 (2) 执行【插入记录】→【HTML】→【水平线】命令，插入与单元格宽度相等的水平线。 (3) 单击插入的水平线，打开水平线【属性】面板，如图4.6所示。可在【水平线】文本框中输入水平线名称(只能以英文或数字命名)，并设置水平线宽度及高度，从而制作出所需的水平线。
(8) 删除不需要的行/列。选中刚插入的新行，单击鼠标右键，选择【表格】→【删除行】命令，删除该行，如图 4.16所示。
(9) 保存文档。
第4章文字和图像的应用图4.14 【插入行或列】命令
第4章文字和图像的应用图4.15 【插入行或列】对话框
第4章文字和图像的应用图4.16 【删除行】命令
第4章文字和图像的应用图4.23 图像【属性】面板
第4章文字和图像的应用
(2) 在【属性】面板的【替换】下拉栏中，输入提示文字“话说懒羊羊还是很可爱的呐”，如图4.24所示。
(3) 保存更改，在浏览器中预览该图像。当指向这个图像时，便会出现文字提示。
第4章文字和图像的应用图4.24 【替换】下拉菜单
第4章文字和图像的应用图4.9 【表格】按钮
第4章文字和图像的应用图4.10 【表格】对话框
第4章文字和图像的应用
(3) 如果要在表格的第一列中插入400 × 240像素的图像，则先要增大列宽，即将光标移动到第一列和第二列之间的边界处，光标变成双箭头形状，如图4.11所示。
(4) 单击光标并向右拖动，在左侧列下方的宽度值达到 400像素后，停止拖动光标，如图4.12所示。

网页设计与制第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 所示。