CSS样式的创建和运用方法讲义_第1页
CSS样式的创建和运用方法讲义_第2页
CSS样式的创建和运用方法讲义_第3页
CSS样式的创建和运用方法讲义_第4页
CSS样式的创建和运用方法讲义_第5页
已阅读5页，还剩42页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1DreamwaverCS4CSS样式\链接\框架网页\多媒体2回顾创建本地站点和创建网页创建表格和编辑表格网页中添加文本网页中添加图片创建网页存放的位置表格单元格大小调整注意：先将所有内容(文字、图片)插入表格中，如果有需要再调整单元格水平线颜色设置3教学内容掌握CSS样式的创建和运用方法掌握各种链接的创建方法掌握框架网页的制作方法掌握利用框架网页来组织由多个网页组成的画面掌握框架网页中链接设置网页中多媒体设置与应用4管理站点打开站点打开“站点”菜单，选择“管理站点”中“新建/站点”，在“本地根文件夹”中选择站点删除站点通过“文件/站点”，选择“管理站点”中选择要删除的站点，点击“删除”CSS样式的概念CSS是一种用来进行网页风格设计的样式表技术，使用CSS样式可以对页面的布局、字体、颜色、背景和其他图文效果实现更加精确地控制，并且同一个样式可以应用于多个不同的对象，提高制作效率。CSS样式是CascadingStyleSheets(层叠样式单)的简称，也可以称为“级联样式表”，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。要管理一个系统的网站，使用CSS样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以实现多种不能用HTML样式实现的功能。5CSS样式的功能CSS是用来控制一个网页文档中的某文本区域外观的一组格式属性。使用CSS能够简化网页代码，加快下载速度，减少上传的代码数量，从而可以避免重复操作。CSS样式表是对HTML语法的一次革新，它位于文档的<head>区，作用范围由CLASS或其他任何符合CSS规范的文本来设置。对于其他现有的文档，只要其中的CSS样式符合规范，Dreamweaver就能识别它们。6新建CSS样式方法通过CSS样式面板点击“新建CSS规则”按钮，打开“新建CSS规则”对话框通过属性面板点击“CSS”按钮，“目标规则”选择“新CSS规则”，点击“编辑规则”按钮选择“格式/CSS样式/新建”菜单命令7新建CSS规则设置选择器类型选择器名称(以点开始)规则定义范围8CSS规则定义CSS规则分类类型：主要用于设置文字格式背景：主要用于设置文字、表格等背景方框：主要用于设置图形、表格等大小边框：主要用于设置表格边框列表：主要用于设置项目符号定位：确定对象位置扩展：主要用于设置特殊光标9应用CSS样式规则新建CSS规则样式后，就可以利用该样式快速设置页面上的网页元素样式，使网站具有统一的风格了。应用CSS样式规则方法在“属性”面板进行设定通过快捷菜单设定10编辑CSS样式对于创创建的的CSS样式，，可以以进行行编辑辑操作作，主主要包包括修修改CSS样式属属性、、设置置CSS样式首首选参参数以以及链链接和和导入入CSS样式等等。编辑CSS样式规规则方方法在“属性”面板中中进行行修改改在“CSS样式””面板板中进进行修修改11示例1_CSS规则定定义与与应用用打开““tk.html”网页在网页页顶端端插入入1行4列表格格，表表格宽宽450像素，，边框框为0，居中中对齐齐在表格格中插插入图图片(图片在在SC2文件夹夹中)，图片片居中中对齐齐创建CSS规则““.ys1””(边框)样式：：groove；宽度度：medium；颜色色：#ccffcc将该CSS规则运运用到到表格格中的的图片片上创建CSS规则““.ys2””(类型)字体：：华文文新魏魏；大大小：：36像素；；粗体体；颜颜色：：#003300；居中中对齐齐将该CSS规则运运用到到正文文标题题上创建CSS规则““.ys3””(列表)项目符符号图图像：：zp.gif(SC2文件夹夹中)；位置置：外外将该CSS规则运运用到到“成成员行行为””中编编号上上12示例1_样张13超链接接的基基础知知识超链接接是网网页中中最重重要的的组成成部分分。超超链接接的应应用范范围很很广，，利用用它不不仅可可以链链接到到其他他网页页，还还可以以链接接到其其他图图像文文件、、多媒媒体文文件及及下载载程序序，也也可以以利用用它在在网页页内部部进行行链接接或是是发送送E-mail等。在DreamweaverCS4中，可可以将将文档档中的的任何何文字字及任任意位位置的的图片片设置置为超超链接接。14创建超超链接接的常常用方方法在DreamweaverCS4中，可可以随随时随随地在在所需需的位位置创创建各各种超超级链链接，，并且且可以以通过过多种种方法法来创创建超超链接接可以在在“属性”面板中中创建建使用““插入入”菜单创创建使用“常用”工具栏栏中““超级级链接接”来创建建超级链链接的的分类类文本超超链接接图像超超链接接锚记链链接E-mail链接图形热热点链链接1516创建文本本和图像像链接创建文本本和图像像链接方方法选择需要要创建链链接的对对象按右键选选择“创创建链接接”(或者在属属性面板板上设置置)打开“选选择文件件”对话框，，选择链链接对象象注意：链链接对象象可以是是网页、、应用程程序、各各种媒体体创建电子子邮件链链接创建电子子邮件的的方法选择需要要创建电电子邮件件链接的的对象打开“插插入”菜单，选选择““电子邮邮件链接接”打开“电电子邮件件链接”对话框，，输入邮邮件地址址或者在“属性”的“链接接”文本框中中输入““mailto:邮件地址址”1718示例2_创建链接接打开站点点Mysite，在网页页main.html中创建链链接建立下部部导航栏栏中“隐隐私条例例”的文文本链接接，链接接到tk.html网页建立下部部导航栏栏中“联联系我们们”的文文本链接接，链接接到自己己的邮箱箱19锚记设置置确定插入入点位置置命名锚记记打开“插插入”菜单，选选择“命命名锚记记”打开“命命名锚记记”对话话框，输输入“***”创建锚记记链接选择需要要创建锚锚记链接接的对象象在“属性”面板，““链接”栏输入““#***”20示例3_创建锚记记链接打开网页页“tk.html”在标题前前插入锚锚记，名名称为““fanhui””在网页末末尾文字字“返回回页首””，创建建锚记链链接图形热点点链接图像地图图也是一一种超链链接，适适用于较较大的图图像。创建图像像地图，，可以在在图像上上创建不不规则区区域的链链接或某某个部分分区域的的链接。。图像地图图是将图图片分为为几个区区域，这这些区域域又称为为热点，，单击不不同的热热点可以以打开不不同的链链接，这这样的链链接就称称为图形形热点链链接。2122创建图像像的热点点链接创建图像像某个区区域的超超级链接接，使之之能链接接到相应应对象选中网页页中的图图像地图图点击“属属性”面面板上的的“热点点工具””，在图图像上确确定“热热点”区区域指定链接接对象(网页、图图像等)23示例4_创建热点点链接创建main.html网页图片片中文字字“快速速网上冲冲印服务务”的热热点链接接，链接接到“wscy.html””网页24框架和框框架集的的概念框架的概概念框架把浏浏览器窗窗口分成成几个部部分每个部分分显示不不同的网网页使浏览器器窗口同同时包含含多个网网页框架集的的概念框架集是是HTML文件，定定义一组组框架的的布局和和属性包括框架架的数目目、大小小、位置置和每个个框架中中初始显显示页面面的URL框架集不不包含要要在浏览览器中显显示的HTML内容25创建框架架网页创建框架架网页步步骤打开“文文件”菜单，选选择“新新建”打开“新新建文档档”对话框选择“示示例中的的页”在“示例例文件夹夹”中选择““框架页页”选择框架架类型保存框架架网页选择“文文件/保存全部部”菜单单命令，，依次保保存框架架集和框框架打开“保保存为””对话框框按提示依依次保存存框架集集和每个个框架框架集和和框架都都是以网网页形式式保存的的26框架集框架示例5_创建和保存存框架网页页在站点中新新建框架网网页，框架架集样式““上方固定定”在上方框架架网页中输输入文字““框架网页页创建示例”在下方框架架网页中插插入图片““logo.jpg”依次保存框框架集和每每个框架框架集保存存为kjj.html上方框架网网页保存为为kj-top.html下方框架网网页保存为为kj-under.html2728框架中打开开网页将插入点放放置在框架架网页中打开“文件件”菜单，，选择“在在框架中打打开”打开“选择择HTML文件”对对话框选择要在该该框架中打打开的网页页29示例6_框架中打开开网页打开“Mysite”站点在站点中新新建框架网网页，框架架集样式““上方固定定”在上方框架架中打开网网页“Top.html””网页在下方框架架中打开Main.html网页保存框架集集为“Index.html”30框架的编辑辑通过“框架架”面板选选择框架集集和框架“窗口”菜菜单/“框架”，打打开框架面面板鼠标点击选选择调整框架大大小通过鼠标拖拖动框架边边框在“框架””属性面板板上可以设设置精确设设置注意：在编辑框架架时，如果果框架边框框不可见选择“查看看/可视化助理理/框架边框””，使框架架边框可见见31框架中的链链接设置框架中的链链接在一个框架架中使用链链接在另一一个框架中中打开网页页链接设置方方法选择文本或或对象在“属性””面板的““链接”中中，点击文文件夹图标标打开“选择择文件”对对话框，选选择链接到到的文件在“属性””面板的““目标”下下拉菜单中中，选择显显示方式注意：框架架中的链接接必须在框框架集中设设置，否则则无法选择择显示方式式32示例7_框架中的链链接设置设置上方框框架中的链链接设置“首页页”链接到到“main.html”“网上冲印””链接到““wscy.html”“数码商城””链接到到“smsc.html”设置链接网网页显示方方式在“属性””面板的““目标”下下拉菜单中中，选择““mainFrame”显示方式网页中的媒媒体插入媒体类类型插入FLASH文件插入插件(音频、视频)插入ActiveX控件插入媒体方法法选择“插入/媒体”菜单命命令或(选择“常用””工具栏上““媒体”按钮钮)33在网页中插入入FLASH动画Flash动画是网页上上最流行的动动画格式。在DreamweaverCS4中，Flash动画也是最常常用的多媒体体插件之一，，它将声音、、图像和动画画等内容加入入到一个文件件中并能制作作较好的动画画效果，同时时使用了优化化的算法将多多媒体数据进进行压缩，是是文件变得很很小，因此，，非常适合在在网上传播。。34插入FLASH动画方法将光标移至所所需插入Flash动画的位置打开“插入”菜单，选择““媒体”中的“SWF”打开“选择文文件对话框选择所需插入入的Flash动画也可以通过““常用”工具栏中的““媒体”中““SWF”插入Flash动画35设置FLASH动画属性在网页文档中中插入Flash动画文件后，，选中Flash动画在“属性”面板中设置属属性36网页中的声音音格式在DreamweaverCS4中，可以向网网页文档添加加多种不同类类型的声音文文件和格式，，例如.wav、.midi和.mp3。根据要添加声声音的目的、、文件大小、、声音品质等等要素，来确确定插入哪种种格式和方法法。37插入声音文件件方法将光标移至所所需插入声音音文件的位置置打开“插入”菜单，选择““媒体”中的“插件”打开“选择文文件对话框选择所需插入入的声音文件件也可以通过““常用”工具栏中的““媒体”中““插件”插入声音文件件38设置声音属性性在网页文档中中插入声音文文件后，选中中插件符号在“属性”面板中设置音音频属性通过“编辑标标签”设置音音频属性选择插件符号号，按右键，，选择“编辑辑标签”，打打开“标签编编辑器”对话话框可以设置音频频“自动播放放”、“循环环”、“隐藏藏”39插入视频文件件方法将光标移至所所需插入视频频文件的位置置打开“插入”菜单，选择““媒体”中的“插件”打开“选择文文件对话框选择所需插入入的文件也可以通过““常用”工具栏中的““媒体”中““插件”插入视频文件件40设置视频属性性在网页文档中中插入视频文文件后，选中中插件符号

人人文库> 全部分类> 行业资料 > 商业贸易

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论