Dreamweaver的工作界面.

Slides:



Advertisements
Similar presentations
●公司簡介. ●公司組織 行銷 企劃部 行銷 企劃部 研發 設計部 研發 設計部 視覺 設計部 視覺 設計部 媒體 製作部 媒體 製作部 行動 裝置部 行動 裝置部 執行長 總經理 管理部 本公司組織人力配置除董事長、執行長、總經理外,共 有六大部門,分別為研發部 6 人、管理部 4 人、視覺設計部.
Advertisements

醫學美學之我見ー肉毒桿菌 班級:應日三乙 姓名:蔡雅卉 學號: 497E0076. 前言 現在的人,已經把 整型看做是微不足 道的事情了。即使 只是戴牙套、局部 雷射、割雙眼皮、 打美白針、肉毒桿 菌等等,都可以在 身體上做不同的改 變,而讓自己更滿 意自己的外表。
4 第 4 章 网页的布局 设计站点地图,有助于突出网站的主题,确定网 站的内容。而对于每一个网页来说,最重要的除了网 页的内容以外,还有就是网页的风格和布局。一个格 局凌乱的网页,内容再精彩,也不能说是一个好网页 。
5.3 页面布局 1. 用表格实现页面布局 用表格实现页面布局 2. 用框架布局页面 用框架布局页面 3. 层的使用 层的使用.
LOGO 《静态网页设计》课程整体设计 电子信息工程系 计算机专业 李超燕. LOGO 2 课程在专业课程体系中的定位 3 岗位分析 目 录 1 课程的基本信息 6 本课程的特色和效果 4 教学整体设计 5 教学基本条件.
熟悉 Dreamweaver 的工作區與基本操作
日月潭的水怪 動畫重新著色過的圖片淡出成為黑白圖片 (進階)
03 訴說旅行緣起 - 文字與影像 網頁文字的編輯 格式化文字 水平線的插入與設定 網頁影像的使用 操作秘技與重點叮嚀.
讲故事训练 授课人:田轶.
和码汉字字形技术 和码汉字字形学习法 和码汉字字形输入法.
第十一課 菜園 6-11.
校本选修课 第三专题 西藏问题 北京师大二附中 李文燕.
活力校園 5C 顏慧玲.
20 使用Dreamweaver构建HTML结构
WINDOWS98资源管理器教案 一、   教学目标 1、知识目标:掌握资源管理器的结构;通过资源管理器掌握利用左键和右键的拖动完成文件及文件夹的复制和移动这两个操作;能分别使用左键和右键进行这两种操作,且能区分左键和右键的不同。
網路程式設計-期末專案 資工二B B975701 2 8 黃首翰 ~Rock your life~
六. 布局.
第三讲 站点链接与表格布局.
主讲 冷清波 城乡规划管理与法规 主讲 冷清波
5.6 制作具有动态特效的网页 1. 层和时间轴动画 2. Dreamweaver的Behaviors(行为)概述 华东师范大学计算中心.
长沙民政学院经贸系 商务网站建设1 主讲人:刘娜.
3.3 动 画 处 理 技 术 本节要点 计算机动画的基本工作原理 计算机动画的分类 使用Flash二维动画工具
正修科技大學教學發展中心 教師教學觀摩與經驗分享 電子工程系 張法憲副教授.
第五课 小设计师.
《网页设计与制作》 教学课件 主讲人:湖南铁道职业技术学院 陈承欢
第8章 多媒体网页制作.
第六章 补间动画 主讲人:马 震 人民邮电出版社.
《民法精品课程》整体介绍 安徽警官职业学院《民法精品课程》课 题 组.
蘇軾詞的賞析
《网页设计与制作》 教学课件.
柯奕宏(06) 王予亨(13) 郭秉逸(15) 楊雯凈(23) 顏佑瑩(32)
第十五章 传播学调查研究方法.
第6章 文本 文本在网络上传输速度较快,用户可以很方便地浏 览和下载文本信息,故其成为网页主要的信息载体。 整齐划一、大小适中的文本能够体现网页的视觉效 果。因而文本处理是设计精美网页的第一步。本章 将结合具体实例介绍在Dreamweaver CS4中如何插 入文本,对文本进行排版及一些文本辅助功能。
网页设计(1) 第12讲 网页技术简介 马秀麟 2014年5月 2018/9/17 制作人:马秀麟.
网页制作 第五讲 Dreamweaver基础.
自然與生活科技領域 認識太陽能 蘇紋琪、石明玉.
尋找世界文明的曙光 美索不達米亞 將地方圖案插入此投影片 選取〔插入〕功能表 〔圖片〕指令 選取〔從檔案〕指令 選取你的標幟圖片檔案
Dreamweaver 8网页设计 计算机系.
 全能的天才畫家- 李奧納多‧達文西 (西元1452年-1519年) 指導老師:袁淑芬老師 製作人:饒佩芯.
网页设计 上海建桥学院信息技术系 矫桂娥
計算機概論 請老師填入姓名主講 課本:數位傳真2012 博碩文化出版發行.
非常好色軟體應用研習 數立科技推廣組 2009/02/17.
第15章 行为 Dreamweaver CS4提供了丰富的行为,这些行为的使 用可以为网页对象添加一些动态效果和简单的交互功 能,使那些不熟悉JavaScript语言的网页设计师也可 以方便的设计出通过编写JavaScript语言才能实现的 功能。本章将首先介绍一些基本概念,以及“行为” 面板的基本操作;接着结合实例具体讲解常用的.
第16章 行為指令的應用 16-1 認識行為面板 16-2 常用的行為指令.
第7章 层与行为.
网页制作与设计 主编 耿 杰 科学出版社.
W3C标准网页制作 主讲教师:张 涛.
学生网页作品情况分析.
認識我的故鄉_台中市.
第2章 初识Dreamweaver CS4 Adobe Dreamweaver CS4是建立Web站点和应用程序的 专业工具。它将可视布局工具、应用程序开发功能和 代码编辑支持组合在一起,其功能强大,使得各个层 次的开发人员和设计人员都能够快速创建界面吸引人 的基于标准的网站和应用程序。从对基于CSS的设计.
第三冊第十四課記承天夜遊 王永榮 將地方圖案插入此投影片 選取〔插入〕功能表 〔圖片〕指令 選取〔從檔案〕指令 選取你的標幟圖片檔案
模板与库.
十 三.使用模板和库.
站群系统管理平台简介 网教中心 2014年10月29日.
主讲:陶建平 华中科技大学网络与计算中心
精忠报国  演唱:屠洪纲 作词:陈涛 作曲:张宏光  狼烟起 江山北望  龙起卷 马长嘶 剑气如霜  心似黄河水茫茫  二十年 纵横间 谁能相抗  恨欲狂 长刀所向  多少手足忠魂埋骨它乡  何惜百死报家国  忍叹惜 更无语 血泪满眶  马蹄南去 人北望  人北望 草青黄 尘飞扬  我愿守土复开疆  堂堂中国要让四方来贺.
網路程式設計-期末專案 資工二B B96570101 戴偉恒 地 方 美 食.
W3C标准网页制作 主讲教师:张 涛.
第12章 APDiv 对于有Dreamweaver基础的读者来说,初识APDiv或 许会感到即熟悉又陌生。熟悉于它的Div标识符, 陌生于他在CS3版本中的含义及作用。其实,APDiv 在Dreamweaver CS4中仍等同于前期版本的层,又 称为AP元素或CSS-P元素,本文以下简称AP层。 什么是层?有什么作用?前面我们学习过了表格,
第7章 Flash基础动画制作 本章主要内容: 逐帧动画 补间动画 形状补间动画.
前言 无论从艺术表现形式还是渲染效果来说,动画应是多媒体作品中最具表现力的一种媒体形式。动画源于图像 ,是多幅图像沿着时间坐标轴的重新排列。在多媒体作品中动画表现方式主要包括二维动画和三维动画两各种。
樂樂請假了 尊重的故事 資料來源:臺北縣國民小學品德教育手冊 故事來源:臺北縣國民小學品德教育手冊 網路小故事
聽聽那冷雨---重點摘要 二愛 王煜榕.
網頁程式設計 袁福良 B B.
憲政與民主 應化3A 邱泓明.
標示語言 超文本標示語言(HTML) 製作簡單網頁
网页设计三合一教程 主讲教师 2019/6/2.
古蹟知性之旅 我和新港奉天宮有個約 報告人:陳 映 竹 傅 湘 甯.
10.4 圓之切線方程 附加例題 6 附加例題 7 © 文達出版 (香港 )有限公司.
Word 2010 文書處理技巧 圖資中心資訊組 李訓榮.
Presentation transcript:

Dreamweaver的工作界面

Dreamweaver的工作界面 文档窗口底部的状态栏提供了标签选择器(也叫做标记符选择器)、窗口尺寸、文件大小等网页信息,它是设计者经常需要关注的区域。

创建本地站点 站点就是一系列文件的集合,本地站点就是位于客户端的、制作网页时设计者所使用的文件夹,一般我们在制作网站时通常是在计算机本地硬盘上先建立这个站点(文件夹),然后制作好站点后在上传到远程服务器上(上传的站点叫做远程站点)。

创建本地站点 在文档窗口中选择“站点”菜单中的“新建站点”命令或“站点”面板“站点”菜单中的“新建站点”命令,打开“定义站点”对话框,选择“高级”选项卡(也可按“基本”选项卡中的向导操作,但不如用“高级”选项卡方便),如图所示。

创建本地站点

设置网页属性 在文档窗口中选择“修改”菜单中的“页面属性”命令,或者按【Ctrl + J】快捷键,打开“页面属性”对话框,可以设置网页属性。

网页制作的一般过程 新建网页 设置网页标题等网页属性【 Ctrl + J 】 输入文字或通过单击“插入栏”中的按钮插入各种对象 在“属性检查器”中设置对象的属性 保存网页【Ctrl + S】 预览网页【F12】

设置字符格式 文本格式分为段落格式和字符格式。在文档窗口中,修饰文本可以使用“文本属性”面板。在文档窗口中选中文本后,其“属性检查器” 如图所示,可用于设置文字格式和超链接等多种常用选项。

字符样式的设置 字符样式是指字符的外观样式,例如,粗体、斜体、下划线等。若要将文本设置为粗体或斜体,首先选中文本,然后单击“属性检查器”中的粗体按钮或斜体按钮即可。 若需要应用别的字符样式(例如,下划线、上标、下标等),可以首先选中文本,然后选择菜单栏中的“文本”菜单中的“样式”命令,接着在该命令的子菜单中选择相应的样式命令。

字体格式的设置 首先选中要设置字体格式的文本,然后单击“属性检查器”中的字体选择框,在弹出的下拉菜单中选择相应的字体。 如果“属性检查器”中字体选择框中没有合适的字体,那么我们可以为它添加计算机内安装过的字体或字体列表。单击“属性检查器”中字体选择框,在弹出的列表中选择“编辑字体列表”命令。

设置锚点链接

电子邮件超链接 在文档窗口中的“插入栏”中单击“电子邮件链接”按钮,弹出“电子邮件链接”对话框,在“文本”框中输入用于超链接的文本,在“E-Mail”框中输入电子邮件地址,如图所示。

插入图像 将光标置于要插入图像的位置,在“插入”栏的“常用”选项卡中单击“图像”按钮。 如果所选择的图像文件不是站点中的文件,则将打开“Macromedia Dreamweaver MX”对话框,如图所示,提示是否将图像文件保存到根目录下,此时需要将图像保存到站点中用于存放图像文件的文件夹。 使用图像文件时,注意命名规则,不要使用汉字文件名或有特殊符号(如空格)的文件名。

修改图像属性

制作鼠标经过图像

制作鼠标经过图像 将插入点定位到要插入鼠标经过图像的区域,然后在“插入”栏的“常用”选项卡中单击“鼠标经过图像”按钮。打开“插入鼠标经过图像”对话框,如图所示。

嵌入声音与视频 如果确定访问者安装有能播放相应格式文件的插件(例如 RealMedia 或 QuickTime 插件),那么可以通过嵌入的方式将声音与视频直接插入页面中,从而获得更多对媒体的控制(例如,可选择是否播放和设置音量)。

插入 Flash 按钮 Flash 按钮可根据鼠标指针位置和状态的不同,显示不同的图像,并且会在鼠标单击时执行超链接跳转的动作。

插入表格 将光标定位到要插入表格的区域,然后单击“插入栏”“常用”选项卡中的“插入表格”按钮 ,打开“插入表格”对话框。

选取表格及单元格 如果页面中的表格繁多且嵌套复杂,那么可以将光标移动到要选择的表格中,然后在状态栏的标签选择器上选择最右边的 <table> 标记符。如果表格比较简单,则可以通过单击表格任意边框的方式将其选取。 将光标定位到单元格,然后在标记符选择器中选择加深显示的 <td> 标记符。 按住【Shift】键 ,可以选择连续单元格。 将光标移到表格中该行的左侧或列的上方,单击可以选取整行或整列。

设置表格属性

设置单元格属性

使用布局视图 Dreamweaver 的布局视图功能以直观的方式自动生成网页中的表格,能够使设计者在文档窗口中通过拖拽鼠标的方式来实现复杂页面版式设计。在布局视图中,用户可以在添加网页内容之前对页面进行布局。

使用布局视图 在绘制布局表格或布局单元格之前,必须从标准视图切换到布局视图,方法为:将“插入栏”切换到“布局”选项卡,然后单击“布局视图”按钮,出现“布局视图入门”对话框,如图所示。

布局表格和布局单元格的属性

创建框架结构 使用“插入栏”中的框架按钮可以创建出一些常用的框架结构,比如上小下大的导航结构、左小右大的目录结构、上左右的目录结构等。创建方法为:单击“插入栏”“框架”选项卡,然后单击框架结构按钮,就可以创建出所需的框架结构,如图所示。

创建框架结构 选择“文件”菜单下的“新建”命令,在“新建文档”对话框中,选择“框架集”类别。

选取框架集

设置框架集的属性

设置框架的属性 在框架面板上选取框架后,其属性检查器如图所示。

保存框架 选择“文件”菜单中的“保存全部”命令,此时将弹出一个“保存为”对话框,同时文档窗口中最外层的边框显示为有阴影,表示当前要保存代表整个框架结构的框架集文件。 选择适当的保存位置并指定文件名后单击“保存”按钮,则又会弹出一个“保存为”对话框,此时下面的框架边框显示为有阴影,表示当前要保存的是下面这个框架。 如此下去直到保存了所有的框架。

设置超链接目标框架

添加背景音乐 选择菜单”插入/标签”,选择HTML标签/页元素,在右侧选择bgsound

插入表单

文本框

复选框和单选按钮

列表/菜单

跳转菜单 跳转菜单是一种常见的交互式表单对象,其中每个菜单选项都是一个超链接,使浏览者在选择某个选项后可以跳转到相应的页面。

按钮与图像域

设置标签

使用行为 “行为”是“事件”和“动作”的组合。 事件是指浏览器事先为网页对象定义的某种状态,它是由浏览器生成的消息。例如,当鼠标移动到某个链接上时,就会产生“onMouseOver”事件;当用户下载页面时,就会发生“onLoad”事件;当访问者单击某个对象时就会发生“onClick”事件;当访问者的鼠标离开某个对象时会发生“onMouseOut”事件。

使用行为 动作是指一个预先写好的 JavaScript 程序,每个程序都可以完成特定的任务,如打开浏览器窗口、显示或隐藏层、播放声音等。 将事件与动作组合(即发生某事件时执行对应行为),就能获得各种动态效果。例如,单击按钮时播放声音,加载网页时弹出一个信息窗口等。

使用行为 在 Dreamweaver 中,可以为网页中的多种对象添加行为,例如层、图像、表单按钮等,并且每一个对象允许指定多个动作,行为的动作将按照一定顺序依次执行。 可以使用“行为”面板来指定网页对象的行为。选择“窗口”菜单下的“行为”命令,或者按【Shift + F3】键,即可以打开“行为”面板,如图所示。

添加行为的步骤 (1)选择一个要添加行为的网页对象。例如,要为层中的图像添加行为,首先应该单击选取该层,然后再添加行为;如要为整个网页添加行为,则需要首先在文档窗口底部的标记符选择器中单击“<body>”标签。 (2)选择“窗口”菜单中的“行为”命令,打开“行为”面板。

添加行为的步骤 (3)单击添加行为按钮 ,在弹出的菜单中选择“显示事件”命令,在弹出的列表中选择一种浏览器版本。 (4)在列表中选择一个动作,此时将弹出该动作对应的对话框,其中显示了动作的参数与说明,在对话框中设置动作参数,最后单击“确定”按钮。

添加行为的步骤 (5)返回“行为”面板,此时面板右侧列表的“动作”框中显示了为对象添加的行为,左侧“事件”列表框中显示了当前浏览器默认的动作触发事件。 (6)如果要重新指定事件,只需单击指定事件按钮 ,在弹出的事件列表中选择一个事件即可。

Dreamweaver 自带的行为 调用 Javascript

Dreamweaver 自带的行为 打开浏览器窗口 该行为就是当浏览者触发事件后,可以在新窗口中打开一个指定地址的网页。用户可以自定义打开新窗口的属性,例如窗口大小、是否需要状态栏、工具栏等。 注意:对于“加载页面的同时弹出新窗口”这样的效果不能滥用,因为浏览者很可能会把它当作广告窗口立即关掉。

Dreamweaver 自带的行为 弹出消息 该动作可以使指定的信息以 JavaScript 消息框的方式弹出,它只有一个参数,即消息框中的文字信息。一般情况下,“弹出消息”动作总是和“onLoad”、“onClick”等事件组合产生一些交互式效果。

Dreamweaver 自带的行为 设置状态栏文本 该动作用于指定网页状态栏中的显示文字,该动作只有一个参数,即显示在窗口状态栏中的文字。 注意:如果要让状态栏中的文本动态显示,则需要自行编写 JavaScript 程序。

Dreamweaver 自带的行为 检查表单

Dreamweaver 自带的行为 “检查表单”动作可以检查表单中指定文本字段的内容,以确保用户已经输入或输入了正确的数据类型。如果使用 onBlur 事件将此动作附加到单个文本字段上,则用户在填写表单时就可以对该字段进行检查;如果使用 onSubmit 事件将其附加到整个表单,则在用户单击“提交”按钮时同时对多个文本字段进行检查。这样设置之后,就可以确保表单提交到服务器后指定的文本字段中不包含无效的数据。

使用样式 样式就是格式的组合。例如,如果某个样式同时包含“居中对齐”和“斜体”两种格式,那么应用了该样式的内容将同时具有这两种格式。在 Dreamweaver 中可以使用两类样式:HTML 样式和 CSS 样式。

使用html样式 HTML 样式是一种格式化文本的有力工具,它可以快速一致地将字体格式应用于文档中的文本。HTML 样式由一系列的 HTML 标签组成,浏览器根据样式中包含的 HTML 标签进行显示。 HTML 样式的一个缺点是:对 HTML 样式所做的更改不会自动在文档中更新。如果应用了一个样式,后来又更改了它,则必须对文本重新应用该样式才能更新格式设置。

使用html样式

使用html样式

使用html样式

使用css样式 在 Dreamweaver 中 CSS 样式的类型包括以下几种: 自定义 CSS 样式(也称为 class 类样式) 重新定义 HTML 标签样式 CSS 选择器样式 在网站中使用 CSS 样式的方式与 HTML 样式相同,需要先创建 CSS 样式,然后在应用到网页或整个网站中。

使用css样式 选择“窗口”菜单中的“CSS 样式”命令或按【Shift + F11】键,可以打开“CSS 样式”面板。 在文档窗口中,class 类样式将出现在“CSS 样式面板”中,如图所示。而对于创建的其他两种样式,将直接包含在网页代码或 CSS 外部样式表中,而不会显示在“CSS 样式”面板。

使用css样式 在 CSS 样式面板中,单击“新建 CSS 样式”按钮 ,打开“新建 CSS 样式”对话框,如图所示。

使用css样式

使用css样式 链接外部 CSS 样式表文件 打开 CSS 样式面板,单击“附加样式表”按钮 ,打开“链接外部样式表”对话框,如图 所示。