版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、1CSS样式样式链接链接框架网页框架网页多媒体多媒体2 2q教师:董云朝q电子信箱: dongyzh_q办公室:博识楼110q电话: 67703886q答疑:周一3-6节,周二5-8节q答疑地点:博识楼1103q打开站点q打开“站点”菜单,选择“管理站点”中“新建/站点”,在“本地根文件夹”中选择该站点对应的本地根文件夹。q删除站点q通过“文件/站点”,选择“管理站点”中选择要删除的站点,点击“删除”q导入站点q打开“站点”菜单,选择“管理站点”中的“导入”,选择ste文件,可以自动导 入站点名称,并指定根文 件夹。4q创建本地站点和创建网页q页面颜色及背景图片:q可以通过页面属性进行设置q页
2、面属性-外观(HTML)q页面标题和编码:q页面属性-标题和编码q创建表格和编辑表格q选择“插入/表格”菜单命令q设置表格参数(也可以在表格属性中修改):行数、列数、宽度、边框、单元格边距、单元格间距q插入行、插入列、插入行或列q单元格合并、拆分q表格嵌套:在单元格中插入表格插入嵌套表格的方法与插入表格的方法相同5q表格背景色及背景图片:q修改标签内的代码(注意不同参数用空格分开):q颜色:q图片:q单元格背景:q修改单元格属性6q网页中添加文本q直接输入q通过拷贝/粘贴的方式从其他文档素材中向网页添加文本q注意有些格式在复制后会失效q添加特殊字符:插入/文本/字符q添加空格和空行(参照第9讲
3、,第26页)q文本格式设置:q格式、对齐、列表q列表符号设置 选择“格式/列表/属性”菜单命令,打开“列表属性”对话框,设置列表属性7q网页中添加图片q替换文本的作用q创建网页存放的位置q网页一旦创建,修改位置时,要注意其中调用的资源是否仍然可用q在Dreamweaver环境下,本地根文件夹中调整位置,根据提示更新链接q水平线颜色设置q选中水平线-右键编辑标签-浏览器特定的-颜色q在网页中加入日期q插入-常用-日期89q掌握CSS样式的创建和运用方法q掌握各种链接的创建方法q掌握框架网页的制作方法q掌握利用框架网页来组织由多个网页组成的画面q掌握框架网页中链接设置q网页中多媒体设置与应用qCS
4、S是一种用来进行网页风格设计的样式表技术,使用CSS样式可以对页面的布局、字体、颜色、背景和其他图文效果实现更加精确地控制,并且同一个样式可以应用于多个不同的对象,提高制作效率。qCSS样式是Cascading Style Sheets(层叠样式单)的简称,也可以称为“级联样式表”,它是一种网页制作的新技术,利用它可以对网页中的文本进行精确的格式化控制。q要管理一个系统的网站,使用CSS样式,可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且,CSS样式可以实现多种不能用HTML样式实现的功能。10qCSS,是用来控制一个网页文档中的某文本区域外观的一组格式属性。q使用CSS
5、能够简化网页代码,加快下载速度,减少上传的代码数量,从而可以避免重复操作。qCSS样式表是对HTML语法的一次革新,它位于文档的区,作用范围由CLASS或其他任何符合CSS规范的文本来设置。q对于其他现有的文档,只要其中的CSS样式符合规范,Dreamweaver就能识别它们。11q通过CSS样式面板q点击“新建CSS规则”按钮,打开“新建CSS规则”对话框q通过属性面板q点击“CSS”按钮,“目标规则”选择“新CSS规则”,点击“编辑规则”按钮q选择“格式/CSS样式/新建”菜单命令12新建CSS规则q设置选择器类型q选择器名称(以点开始)q规则定义范围13qCSS规则分类q类型:主要用于设
6、置文字格式q背景:主要用于设置文字、表格等背景q方框:主要用于设置图形、表格等大小q边框:主要用于设置表格边框q列表:主要用于设置项目符号q定位:确定对象位置q扩展:主要用于设置特殊光标14q新建CSS规则样式后,就可以利用该样式快速设置页面上的网页元素样式,使网站具有统一的风格了。q应用CSS样式规则方法q在“属性”面板进行设定q通过快捷菜单设定15q对于创建的CSS样式,可以进行编辑操作,主要包括修改CSS样式属性、设置CSS样式首选参数以及链接和导入CSS样式等。q编辑CSS样式规则方法q在“属性”面板中进行修改q在“CSS样式”面板中进行修改16q打开 “tk.html”网页q在网页顶
7、端插入1行4列表格,表格宽450像素,边框为0,居中对齐q在表格中插入图片(图片在SC2文件夹中),图片居中对齐q创建CSS规则“.ys1”(边框)q样式:groove;宽度:medium;颜色:#ccffccq将该CSS规则运用到表格中的图片上q创建CSS规则“.ys2”(类型/区块)q字体:华文新魏;大小:36像素;粗体;颜色:#003300;居中对齐 注意:字体设置在“类型”标签下;对齐设置在“区块”标签下q将该CSS规则运用到正文标题上q创建CSS规则“.ys3”(列表)q项目符号图像:zp.gif(SC2文件夹中);位置:外q将该CSS规则运用到“成员行为”中编号上1718q超链接是
8、网页中最重要的组成部分。超链接的应用范围很广,利用它不仅可以链接到其他网页,还可以链接到其他图像文件、多媒体文件及下载程序,也可以利用它在网页内部进行链接或是发送E-mail等。q在Dreamweaver CS4中,可以将文档中的任何文字及任意位置的图片设置为超链接。19q在Dreamweaver CS4中,可以随时随地在所需的位置创建各种超级链接,并且可以通过多种方法来创建超链接q可以在“属性”面板中创建q使用“插入”菜单创建q使用“常用”工具栏中“超级链接”来创建q超级链接的分类q文本超链接q图像超链接q锚记链接qE-mail链接q图形热点链接2021q创建文本和图像链接方法q选择需要创建
9、链接的对象q按右键选择“创建链接”(或者在属性面板上设置)q打开“选择文件”对话框,选择链接对象q注意:链接对象可以是网页、应用程序、各种媒体q创建电子邮件的方法q选择需要创建电子邮件链接的对象q打开“插入”菜单,选择 “电子邮件链接”q打开“电子邮件链接”对话框,输入邮件地址q或者在“属性”的“链接”文本框中输入“mailto :邮件地址”2223q打开站点Mysite,在网页main.html中创建链接q建立下部导航栏中“隐私条例”的文本链接,链接到tk.html网页q建立下部导航栏中“联系我们”的文本链接,链接到自己的邮箱24q确定插入点位置q命名锚记q打开“插入”菜单,选择“命名锚记”
10、q打开“命名锚记”对话框,输入“*” q创建锚记链接q选择需要创建锚记链接的对象q在“属性”面板,“链接”栏输入“#*”25q打开网页“tk.html”q在标题前插入锚记,名称为“fanhui”q在网页末尾文字“返回页首”,创建锚记链接q图像地图也是一种超链接,适用于较大的图像。q创建图像地图,可以在图像上创建不规则区域的链接或某个部分区域的链接。q图像地图是将图片分为几个区域,这些区域又称为热点,单击不同的热点可以打开不同的链接,这样的链接就称为图形热点链接。2627q创建图像某个区域的超级链接,使之能链接到相应对象q选中网页中的图像地图q点击“属性”面板上的“热点工具”,在图像上确定“热点
11、”区域q指定链接对象(网页、图像等)28q创建main.html网页图片中文字“快速网上冲印服务”的热点链接,链接到“wscy.html”网页q在main.html网页中,当鼠标移动到以下图片上时显示“网上冲印服务”q在图片区域显示文字q修改代码:q原代码:q新代码:q图形热点链接:参见25页2930q框架的概念q框架把浏览器窗口分成几个部分q每个部分显示不同的网页q使浏览器窗口同时包含多个网页q框架集的概念q框架集是HTML文件,定义一组框架的布局和属性q包括框架的数目、大小、位置和每个框架中初始显示页面的URL(统一资源定位符:unique/universal resource locat
12、or,就是我们平时说的网页地址)q框架集不包含要在浏览器中显示的HTML内容31q创建框架网页步骤q打开“文件”菜单,选择“新建 ”q打开“新建文档”对话框q选择“示例中的页”q在“示例文件夹”中选择“框架页”q选择框架类型q选择“文件/保存全部”菜单命令,依次保存框架集和框架q打开“保存为”对话框q按提示依次保存框架集和每个框架q框架集和框架都是以网页形式保存的32q在站点中新建框架网页,框架集样式“水平拆分”q在上方框架网页中插入图片“logo.jpg”q在下方框架网页中输入文字“我的框架网页”q依次保存框架集和每个框架q框架集保存为kjj.htmlq上方框架网页保存为kj-top.htm
13、lq下方框架网页保存为kj-under.html3334q将插入点放置在框架网页中q打开“文件”菜单,选择“在框架中打开”q打开“选择HTML文件”对话框q选择要在该框架中打开的网页35q打开“Mysite”站点q在站点中新建框架网页,框架集样式“上方固定”q在上方框架中打开网页“Top.html”网页q在下方框架中打开Main.html网页q保存框架集为“Index.html”36q通过“框架”面板选择框架集和框架q“窗口”菜单/“框架”,打开框架面板q鼠标点击选择q调整框架大小q通过鼠标拖动框架边框q在“框架”属性面板上可以精确设置q注意:q在编辑框架时,如果框架边框不可见,选择“查看/可
14、视化助理/框架边框”,使框架边框可见37q框架中的链接q在一个框架中使用链接在另一个框架中打开网页q链接设置方法q选择文本或对象q在“属性”面板的“链接”中,点击文件夹图标q打开“选择文件”对话框,选择链接到的文件q在“属性”面板的“目标”下拉菜单中,选择显示链接文件的位置q注意:框架中的链接必须在框架集中设置,否则无法选择显注意:框架中的链接必须在框架集中设置,否则无法选择显示方式示方式设置打开链接文件的位置设置链接的文件38q设置上方框架中的链接q设置“首页”链接到“main.html” q“网上冲印”链接到“wscy.html”,在下面的框架中打开q设置链接网页显示方式 在“属性”面板的
15、“目标”下拉菜单中,选择“mainFrame”显示方式(下面的框架是mainFrame)q“数码商城” 链接到“smsc.html”,在新页面中打开q设置链接网页显示方式 在“属性”面板的“目标”下拉菜单中,选择“_blank”显示方式q插入媒体类型q插入FLASH文件q插入插件(音频、视频)q插入ActiveX控件q插入媒体方法q选择“插入/媒体”菜单命令q或(选择“常用”工具栏上“媒体”按钮)39qFlash动画是网页上最流行的动画格式。q在Dreamweaver CS4中,Flash动画也是最常用的多媒体插件之一,它将声音、图像和动画等内容加入到一个文件中并能制作较好的动画效果,同时使用
16、了优化的算法将多媒体数据进行压缩,是文件变得很小,因此,非常适合在网上传播。40q将光标移至所需插入Flash动画的位置q打开“插入”菜单,选择“媒体”中的“SWF”q打开“选择文件对话框q选择所需插入的Flash动画q也可以通过“常用”工具栏中的“媒体”中“SWF”插入Flash动画41q在网页文档中插入Flash动画文件后,选中Flash动画q在“属性”面板中设置属性42q在Dreamweaver CS4中,可以向网页文档添加多种不同类型的声音文件和格式,例如.wav、.midi和.mp3。q根据要添加声音的目的、文件大小、声音品质等要素,来确定插入哪种格式和方法。43q将光标移至所需插入
17、声音文件的位置q打开“插入”菜单,选择“媒体”中的“插件”q打开“选择文件对话框q选择所需插入的声音文件q也可以通过“常用”工具栏中的“媒体”中“插件”插入声音文件44q在网页文档中插入声音文件后,选中插件符号q在“属性”面板中设置音频属性q通过“编辑标签”设置音频属性q选择插件符号,按右键,选择“编辑标签”,打开“标签编辑器”对话框q可以设置音频“自动播放”、“循环”、“隐藏”45q将光标移至所需插入声音文件的位置q打开“插入”菜单,选择“媒体”中的“插件”q打开“选择文件对话框q选择所需插入的文件q也可以通过“常用”工具栏中的“媒体”中“插件”插入视频文件46q在网页文档中插入视频文件后,选中插件符号q在“属性”面板中设置属性47q在main.html网页的右下方插入视频film.wmv(文件在sc2文件夹中),宽170,高200q先将该单元格拆分成2行q在smsc.html网页中插入Flash文件flash.swf(文件在sc2文件夹中),宽585,高140q在smsc.html网页中插入音频文件sound_01.mp3,(文件在sc2文件夹中任选),隐藏插件符号
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025届西藏自治区昌都市第三高级中学物理高一上期中预测试题含解析
- 2025届贵州六盘水育才中学高一物理第一学期期中达标测试试题含解析
- 山西省阳泉市(2024年-2025年小学五年级语文)统编版专题练习(上学期)试卷及答案
- 情境写作讲解课件
- 急性阑尾炎超声诊断护理课件
- 2024年艺术吊顶采购安装合同范本
- 2024年一楼工厂出售合同范本
- 2024年火花机设备转让处理协议书模板
- 立体栽培市场分析与需求评估
- 《古希腊的建筑》课件
- 卫生监督典型案例分析(食品安全)-文本资料课件
- CAD培训课件(基础教程)
- 人工智能1第一章绪论课件
- 肾囊肿去顶减压术病人的医疗护理
- 一汽-夏利48pin维修手册-ver
- 《自然语言处理课程设计》课程教学大纲
- 中国风书香校园宣传主题班会PPT
- 妊娠剧吐课件
- 世界足球日介绍主题班会模板课件
- 电大学前教育本教育实习教学活动设计
- 河北省廊坊市各县区乡镇行政村村庄村名居民村民委员会明细
评论
0/150
提交评论