[工学]Dreamweaer CS5课程版书.doc
《[工学]Dreamweaer CS5课程版书.doc》由会员分享,可在线阅读,更多相关《[工学]Dreamweaer CS5课程版书.doc(46页珍藏版)》请在三一文库上搜索。
1、第一课:网页设计基础一 、网站的概述1、 网页与网站浏览网页时在浏览器中看到的一个个页面就是网页,而多个相关的网页的集合就构成了一个网站。 举例: (搜狐网) (百度网) (优酷网)等等。2、 浏览网页的工具-浏览器浏览器:用于打开显示网页的软件。最常见的是Windows系统自带的IE浏览器。还有火狐Firefox、360安全浏览器、遨游、腾讯TT等等。1) 网址:用于定位某个网站某个页面的一串字符,通常是这种格式http:/ 主页:访问网站时,默认打开的第一个页面就是主页也叫首页。3、 认识网页的组成元素文本 视频 网页标题 LOGO 导航栏超级链接表单图片二、初识Dreamweaver1、
2、制作网站的流程规划网站类型及主题搜集资料素材使用软件进行网页制作测试及发布2、认识Dreamweaver是当前最流行、最方便的网页设计和网站开发工具软件。Dreamweaver:梦想编辑者。通过这个工具,实现编辑网页的梦。Dream:梦想weaver:织布者,织工早期是Macromedia公司推出的“网页三剑客”之一。“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件,它们这三个集合起来,就像江湖中最厉害的剑客一样,成为了网站开发中的专用利器。它集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别开发的可视化网页开发工具,前两年M
3、acromedia公司被Adobe公司收购,DM CS5是最新推出的版本。【操作演示】启动Dreamweaver 实例:制作一个简单页面(两种方法对照)三、Dreamweaver的用户界面状态栏浮动面板文档工具栏文档编辑窗口属性面板插入面板菜单栏提高:工作窗口的设置、保存、恢复【操作演示】关闭Dreamweaver四、网页文件的基本操作 基本网页的文件类型为HTML文档,保存的文件扩展名为 “.html”1. 创建网页文档(HTML文档) 文件新建新建文档常规类别基本页2. 保存指定文件(编辑中的文件如果文件名后面带有“*”号,表示未保存) 文件保存(或Ctrl+S) 文件另存为 文件保存全部
4、注意:1、网页文件要用英文或数字进行命名,莫用中文。2、基本网页的扩展名为.html3. 打开已建的HTML文档 文件打开 右击文件,选择Dreamweaver打开。 拖动到Dreamweaver4. 关闭文件 文件关闭还未保存的网页(*),关闭时会提示你是否保存。其他操作:1)多个编辑文件的切换选择2)预览编辑中的网页 (快捷键F12)五、设置网页外观属性 网页标题、页面默认字体、默认字体大小、背景颜色、背景图片、边距。六、创建站点1、什么是站点Dreamweaver的站点是一种管理网站中所有相关联文件的工具。通过站点可以对网站的相关页面及各类素材进行统一管理,还可以以使用站点管理实现将文件
5、上传到网页服务器,测试网站。站点简单的说就是一个文件夹。在这个文件夹里包含了网站中所有用到的文件。我们通过这个文件夹(站点),对我们的网站进行管理,有次序,一目了然。2、创建站点我的足球网 站点根目录为 D:/jcwww七、设置默认图像文件夹八、管理站点1、在“文件”面板中实现以下操作 选择编辑网页文件 创建文件或文件夹 剪切、粘贴、复制、删除、重命名文件或文件夹 2、站点管理 编辑站点 复制站点 删除站点 第二课:制作网页的基本操作一 、在网页中添加文本1) 添加普通文本方法: A、直接输入 (1)用鼠标单击网页编辑窗口中的空白区域,窗口中随即出现闪动的光标,标识输入文字的起始位置。 (2)
6、选择适当的输入法输入文字 B、复制和粘贴 C、从其他文件导入2) 添加空格输入法切换到半角状态,按空格键只能输入一个空格。如果需要输入多个连续的空格可以通过以下几种方法来实现: (1)菜单“插入记录”-HTML-特殊字符-不换行空格 (2)直接按“Ctrl+Shift+Space”组合键(3)设置软件首选参数-允许连续空格3)添加日期时间在文档的最后一行插入形式如“Friday, 2006-07-14 9:47 AM”所示的日期,且要求每次保存网页时自动更新日期。具体操作过程如下: (1)切换到“常用”插入工具栏。(2)按Enter键,添加一空行,将光标放置在空行与正文对齐的最左端。 (3)单
7、击菜单【插入】【日期】,或者单击“常用”插入栏的【日期】按钮,将弹出 “插入日期”对话框。 (4)在“插入日期”对话框中,“星期格式”下拉表框中选取“Thursday,”,“日期格式”选取“1974-03-07”,在“时间格式”下拉列表框选取“10:18PM”,选中“储存时自动更新”复选框,然后单击【确定】按钮,最后生成的日期效果为“Friday,2006-07-14 9:47 AM”的形式。(5)保存插入的日期,且浏览网页。4 ) 插入水平线(1)将“插入”工具栏切换到“HTML”类型。(2)将光标放置到标题最后一个字符的右边。(3)单击HTML插入工具栏的“水平线”按钮,即可向网页中标题与
8、正文之间插入一条水平线。5)添加特殊字符(1)通过菜单【插入】【HTML】【特殊字符】插入 先将光标放置到需要插入特殊字符的位置,然后展开菜单【插入】【HTML】【特殊字符】,在【特殊字符】的级联菜单中选择需要插入的特殊字符。 (2)通过“文本”插入工具栏插入 先在Dreamweaver cs5的“插入”工具栏中选择“文本”,显示“文本”插入工具栏。将光标放置到需要插入特殊字符的位置,然后单击工具栏中的“文本”,单击所需插入的特殊字符即可插入到网页中。二、编辑文本1)网页中输入的文本可以像Word文档一样,进行编辑。 1. 拖动鼠标选中一个或多个文字、一行或多行文本,也可以选中网页中的全部文本
9、。 2. 按BackSpace键或Delete键实现删除文本操作。3. 实现复制、剪切、粘贴等操作。 4. 实现查找与替换操作。 5. 实现撤消或重做操作。2)设置文本格式字体(通用性问题)、大小、颜色、风格注:CSS(Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。3)分段与换行分段按Enter回车键(隔一行)、换行按Shift+Enter(不分段)4)设置段落格式a.对齐方式b.列表编号 列表可以将文本段落用符号或序号标注起来,有两种类型:项目列表和编号列表。 设置项目列表的操作过程如下: (1)选择要添加列表
10、的若干文本段落 (2)单击属性检查器中的“项目列表”按钮或“编号列表”按钮c.缩进5) 使用Html段落样式三、在网页中添加图片1)网页中常用的图片格式使用图片的原则:在保证画质的前提下尽可能使图片的数据量小一些,这样有利用户快速的浏览我们的网页。.GIF格式特点:它的图片数据量小,可以带有动画信息,且可以透明背景显示,但最高只支持256种颜色。用途:大量用于网站的图标Logo、广告条Banner及网页背景图像。但由于受到颜色的显示,不适合用于照片级的网页图像。.JPEG格式特点:可以高效地压缩图片的数据量。使图片文件变小的同时基本不丢失颜色画质。用途:通常用于显示照片等颜色丰富的精美图像。.
11、PNG格式特点:是一种逐步流行的网络图像格式。既融合了GIF能做成透明背景的特点,又具有JPEG处理精美图像的优点。用途:常用于制作网页效果图。2)如何获取网页图像 网上下载(我要素材网 )、购买素材光盘、使用图像制作软件创作3)插入图像 插入图像 插入面板常用图像 直接将图像文件拖入编辑区注意:n 在插入图像前应先将网页文件已保存,从而使所插图像引用正确。n 图像插入网页后,应确定图像文件已存入站点,否则在下次打开网页时,会出现看不到图像的情况。技巧:图像的位置、替换文字4)设置图像的基本属性 图像设置的名称 宽、高可缩小和放大图片的显示尺寸。 源文件图片的路径和名称。 替代图像的说明文字
12、边框图片是否要加边框四、图文混排 垂直边距和水平边距图片四周突出的尺寸 对齐在一行中图形和文本的对齐方式五、编辑图像 裁切 锐化 对比度/亮度 重新采样:当图片的宽、高缩小后,重新生成更小的图片。 优化(为图片瘦身)六、鼠标经过更换图片特效1)概念:是指在页面中先显示一张图像,当鼠标移动到该图像上时,图像切换成另一张图像。2)步骤: a 将光标放到要插入图像的地方。 b单击菜单“插入记录”-“图像对象”-“鼠标经过图像”,打开“插入鼠标经过图像对话框”。 c设置完成,单击确定。第三章、创建超级链接一、了解超链接1)什么是超链接所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一
13、个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。二、 创建超链接1) 到网站内页面的超链接内部链接(网站内部页面之间创建相互链接关系)步骤1选中页面中的文字或图像,在属性面板中单击“链接”文本框右侧的文件夹图标,以通过浏览选择一个文件步骤2从“目标”下拉菜单中,选择文档的打开位置。_self:会在当前网页所在的窗口或框架中打开(默认方式)。_blank :每个链接会创建一下新的窗口。_new:会在同一个刚创建的窗口中打开。_parent:如果是嵌套的框架,则在父框架中打开。_top:会在完整的浏览器窗口中打开。 2) 到网站外页面的超链接
14、外部链接步骤1 选中文字或图像之后,直接在属性面板的“链接”文本框中输入外部的链接地址,如http:/步骤2 然后在“目标”下拉菜单中设置这个链接的目标窗口。n 内部链接这种链接的目标点是同个网站中的其他网页(文档),称为内部链接n 外部链接这种链接的目标点是不同站点或本站点以外的网页(文档),称为外部链接。注意:链接中使用完整的URL地址 如:http:/ http:/ (是浏览网页网络协议) (域名)3) 链接样式链接颜色:指定应用于链接文字的颜色已访问链接:指定链接被访问过的颜色变换图像链接:指定当鼠标位于链接上时的颜色。活动链接:指定但鼠标在链接上点击时的颜色。4) 到网页某一特定位置
15、的超链接锚点链接n 锚点链接这种链接的目标端点是网页中的命名锚点,利用这种链接,可以跳转到当前网页中的某一指定位置上,也可以跳转到其他网页中的某一指定位置上。 步骤1 创建命名锚记,就是在网页中设置位置标记,并给该位置一个名称,以便引用。步骤2 属性面板的链接栏中直接输入 “# 锚点名”注意:1) 如果链接的目标锚点标记在当前页面即输入 # 锚点名;2) 如果链接的目标锚点标记在其他网页,即要输入目标网页的地址和名称,然后再输入“# 锚点名”5) 其他一些链接。A. 创建E-mail电子邮件链接n Email链接单击这种链接,可以启动电子邮件程序(例如:Offiece办公软件中的Outlook
16、)书写邮件,并发送到指定的地址。 步骤1选中文本和图像步骤2插入栏常用电子邮件链接输入邮件地址或在属性面板的链接栏中直接输入 “mailto:邮件地址”B. 创建下载链接:当被链接的文件是exe文件或zip、rar类型的文件时,浏览器无法直接打开,便会提示文件会被下载,这就是网上下载的方法。C. 创建空链接:空链接用来激活页面中的对象或文本。当文本或对象被激活后,可以为之添加行为。n 方法:选中要制作空链接的对象,在链接文本框中直接输入。n 在一般站点首页的导航栏中的首页链接,就可以是一个空链接三、图像热区链接图像热区指在一幅图片上创建多个区域(热点),并可可以点击触发。当用户单击某个热点时,
17、会发生某种链接或行为。步骤:1. 选中图像2. 在图像属性面板中,使用热区工具(矩形、椭圆、多边形),在图像上划分热区。3. 为绘制的每一个热区设置不同的链接地址和替代文字。四、创建图像导航条使用鼠标经过变换图像的特效,创建图像导航条五、创建跳转菜单跳转菜单是网页中的弹出式菜单,可以创建任何文件类型的链接。步骤:1、插入栏表单跳转菜单2、在“插入跳转菜单”对话框中,单击号添加菜单项3、在“选择时。转到URL”文本框中,输入该文件的路径。六、脚本链接通过连接触发脚本命令1. 添加到收藏夹:javascript:window.external.addFavorite(http:/,我的足球网)2.
18、 表示关闭窗口:javascript:window.close()3. 表示弹出一个提示对话框:javascript:alert(hello!)4. 设置为默认主页:(需通过空链接#触发onClick事件)onClick=this.style.behavior=url(#default#homepage);this.setHomePage(http:/ 对链接路径的正确理解是确保链接有效的先决条件。链接的路径有3种表达方式1)绝对路径:如果在链接中使用完整的URL(统一资源定位符)地址,这种链接路径就称作绝对路径。 一般用于链接外部网站或外部文件资源时,例如:http:/ . / ”上一层的文
19、件夹3)相对于站点根目录路径: 所有链接的路径都是从站点的根目录开始的。“ / ”表示根目录。2、自动更新链接 当文件的位置被改动时,自动的更新该网页中的链接路径,同时也自动更新其他网页链接到这个网页的路径。3、检查链接第四章、了解HTML超文本标记1、什么是HTML?超文本标记语言,用于编写网页。HTML是一切网页实现的基础,在网络中浏览的网页都是一个个由HTML标记构成的文件。一个HTML文件包含了很多HTML标记,用来告诉浏览器应该如何显示文本、图像以及网页的背景等等2、HTML文件结构 暑假结束了 开学了,第一天上课有点累呀!以前我可是睡到中午才起床的!HTML的文件结构相当简单,其主
20、体结构主要由以下。 文件头信息 在浏览器中显示的HTML文件的正文HTML文档通常分为文件头和正文两部分。文件头用以纪录与网页相关的重要信息,例如标题、关键字等等,通常文件头部分不会在浏览器中显示,而正文部分,则是网页的主体内容,将在浏览器中显示。3、常见HTML标记 段落标记 回车换行标记 网页标题标记 水平线 图像标记 超链接标记4、小结1) 任何HTML标记都是由”号所括住,标记名不区分大小写,但建议用小写。2) 多数标记是成对出现。3) 少数标记单独出现。如、等。4) 部分标记可以拥有属性。如颜色、大小等等 5、认识文件头信息 设置头部信息网页头部信息的内容作为网页的一些辅助信息。并不
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 工学 工学Dreamweaer CS5课程版书 Dreamweaer CS5 课程
链接地址:https://www.31doc.com/p-1976610.html