我爱自学网DreamweaverCS6课程笔记

合集下载

DreamWeaver-cs6学习笔记第10课处理导航汇总

DreamWeaver-cs6学习笔记第10课处理导航汇总

第10课 处理导航1、超链接基础知识:①超链接(或链接)是对Internet 上或者你自己的计算机内的可用资源的引用。

超链接创建通过HTML 或者你使用的程序设计语言指定的交互式行为,并通过浏览器或者其他应用程序启用。

HTML 超链接由锚记元素<a>及一个或多个属性组成如图示: ②内部超链接是把用户带到相同文档、相同文件夹或硬盘驱动器中存储的另一个文档的超链接,而外部超链接是把用户带到硬盘驱动器、Web 站点或Web 主机外面的文档资源。

都是通过<a>锚记元素嵌入在HTML 中,这个元素指定超链接的目的地的地址或目标,并且可以使用几个属性指定它的工作方式。

③相对超链接就是引用相对于当前文档存储的目标,往往包括资源名称,也许还包括存储它的文件夹比如logo.jpg 或images/logo.jpg 。

绝对超链接引用绝对路径的资源,常用于引用站点外面的资源,包括目标完整URL ,如/index.jspa ,它可以把用户指引到特定的文件或者只是站点内的某个文件夹。

相对链接书写起来更快、更容易,但是如果文档保存在Web 站点中的不同文件夹中或者不同位置,它们可能不会工作。

绝对链接则没有此限制,但文档或文件夹或重命名时则会失败。

那么,为站点内的资源使用相对链接,为站点外的资源使用绝对链接。

2、创建内部超链接:①在“链接”框中输入文档名进行链接:打开文档,选取要添加链接的文本如Home (如是从模板创建的文档,此文本不是可编辑区域而不能选取,则需要打开模板选取要添加链接的文本如Home 进行设置后更新)或图像,在“属性”检查器中选择HTML 选项卡的“链接”框中显示了一个超链接符“#”,将此符号换成“../index.html ”回车则可。

但是还没有主页;②在“链接”框后浏览窗中选择文档名进行链接:打开文档,选取要添加链接的文本如Home (如是从模板创建的文档,此文本不是可编辑区域而不能选取,则需要打开模板选取要添加链接的文本如Home 进行设置后更新)或图像,在“属性”检查器中选择HTML 选项卡的“链接”框中显示了一个超链接符“#”,点此框后的“浏览文件图标”,从站点根文件夹中选择文件,确保“相对于”框中设置为“文档”,确定则可,则“#”变成文件名了。

Dreamweaver CS6网页设计与制作标准教程 (1)

Dreamweaver CS6网页设计与制作标准教程 (1)
网页是网站建设的基础,早期的网站一般都是由静态网页制作的。 静态网页是相对于动态网页而言,是指没有后台数据库、不含程序 和不可交互的网页。静态网页相对更新起来比较麻烦,适用于一般 更新较少的展示型网站。静态也不是完全静态,也可以出现各种动 态的效果,如GIF格式的动画、FLASH、滚动字幕等。
静态网页的主要特点如下:
据库与Web服务器的信息交互,由后台数据库提供实时数据更新 和数据查询服务。网页的后缀名一般根据不同的程序设计语言而有 所不同,如常见的有.asp、.jsp、.php、.perl、.cgi等。动态网页 能够根据不同时间和不同访问者而显示不同内容。如常见的BBS、 留言板和购物系统通常用动态网页实现。动态网页的制作比较复杂, 需要用到ASP、PHP、ISP和等专门的动态网页设计语言。
各种企业和业务信息。随着信息时代的到来,企业网站作为企业的
1.2 网站建设基本流程
前期准备工作 方案实施 后期工作
1.2.1 前期准备工作
在网站制作之前,需要对与项目相关的互联网市场进行调查 和分析,同时收集各种相关的信息和资料,为网站建设提供必要的
前期数据,为决策提供依据。
市场调研与分析
明确网站定位
收集信息和素材
1.2.2 方案实施
在方案实施过程中,根据前期准备工作,具体规划网站的栏 目和布局、页面设计风格和外观效果;确定网站所使用的各种技术,
议,即“超文本传输协议”,因此通常网页的地址都以“ http://”
开头。
路径结构图
1.1.3 服务器与浏览器
访问的具体过程简单来说,就是当访问网页的人的计算机连入
Internet 后,通过浏览器发出访问某个站点的请求,然后这个站点
的服务器就把信息传送到用户的浏览器上,也就是将文件下载到本 地的计算机,浏览器再显示出文件内容,这样用户就可以坐在家中 查询千里之外的信息了。

第一章 Dreamweaver CS6基础知识

第一章 Dreamweaver CS6基础知识



1.应用程序工具栏
在Adobe Dreamweaver CS6 的窗口标题栏上整合了5 个网页 制作中最常用的命令,与CS5 不同的是,在Adobe CS6 系列中统 一去除的CS Live 服务。


2. 菜单栏
它包含10 项主菜单。


3. 插入栏(插入面板)
在“流体布局”布局模式下,Dreamweaver CS6 将原先的插入栏默认呈现为插入面板形式。
文件传输协议(FTP)
FTP(File Transfer Protocol )是一种广 泛使用的文件传输协议,是快速、高效和可靠的 信息传输方法。 FTP是基于客户/服务器模型的TCP/IP的应 用,所以只要在客户端和服务器之间建立了 TCP/IP连接,无论两台电脑的位置远近、连接 方式的异同以及使用的操作系统的异同,都能通 过FTP协议进行文件的传输。
IP地址
IP地址用来标识连接到Internet上电脑的指 定编号,每一个IP地址对应一台电脑,这与用电 话号码标识电话网络中的电话相同。 电脑识别的IP地址由32位二进制数值组成, 电脑上以十进制数值来显示,一组数值分为4部 分,每一部分均不能大于255,中间用“.”分隔 ,如61.139.2.69。

1.3 DREAMWEAVER CS6 的工作界面
菜单栏
文档工 具栏
浮动面板 文档编辑窗口
提高:工作窗口的设置、保存、恢复
状态栏
属性面板(属性检查器)
1.3 DREAMWEAVER CS6 的工作界面
网页创建中的站点管理流程其实就是插入元素(文 本、图像或者AP 元素等)和修改已插入的元素两个 过程的交替进行。 1.2.1 界面布局 在Windows 系统中的集成Dreamweaver CS6 工作区 预设布局与Dreamweaver CS5 的布局种类相比,除了 经典、编码器、编码人员( 高级)、设计器、设计人 员(紧凑)和双重屏幕几种布局模式外,还新增了 Business Catalyst、流体布局、移动应用程序这三 种布局模式。

第13章 Dreamweaver CS6动态网页设计基础..

第13章 Dreamweaver CS6动态网页设计基础..

13.3.1

了解DSN
DSN(Data Source Name,数据源名称),表 示将应用程序和某个数据库建立连接的信息集合。
13.3.2

定义系统DSN
数据库建立好以后,需要设定系统的DSN(数据 源名称)来确定数据库所在的位置以及数据库相 关的属性。
13.3.3

建立系统DSN连接
数据源建立以后,接下来要定义这个网站使用的 数据库连接。只有如此,这个网站才能通过数据 库连接来存取数据库里的信息。

留言系统
发布留言页面
留言列表页面
显示留言页面
13.6.1

创建数据库
在制作具体网站功能页面前,首先做一个最重要 的工作,就是创建数据库表,用来存放留言信息 所用。
13.6.2

HTML文本是由HTML标签组成的描述性文本, HTML标签可以说明文字、图形、动画、声音、表 格、链接等。HTML的结构包括头部(Head)、主 体(Body)两大部分,其中头部描述浏览器所需的 信息,而主体则包含所要说明的具体内容。

HTML是HyperText Markup Language的缩写, 即超文本标记语言,这是创建网页的脚本语言,它 提供了精简而有力的文件定义,可以设计出多姿多 彩的超媒体文件,通过HTTP(Hyper Text Transfer Protocol)通信协议,使得HTML文件可 以在全球互联网(World Wide Web)上进行跨平 台的文件交换。
13.5.5

转到相关页面
可以建立一个链接打开另一个页面而不是它的子 页面,并且传递信息到该页面,这种页面与页面 之间进行参数传递的两个页面,称为相关页。
13.5.6

dreamweaver入门课堂笔记

dreamweaver入门课堂笔记

超链接 空链接 锚点链接 电子邮件链接 普通链接
空链接 是在链接地址栏输入#
超链接 ctrl+L
-blank可以让链接到的页面在一个新的独立的窗口中打开
电子邮件链接 插入菜单下的电子邮件链接
mailto:abc@ 在半角状态下输入
如何改变超链接的显示状态:(在CSS样式面板中设置)
模板(Template):是用来批量制作大量风格相似的页面。
F11是资源面板
文件 模板另存为
模板的拓展名是 dwt
ztrl+shift+i 显示和隐藏表格的边框线
选中一个可编辑区域 按 ctrl+alt+V
修改下的模板里的从模板中分离
模板里选中可编辑区域 在选中的标记中单击鼠标右键 选择删除标签
在表单里插入图片 要用图像域
鼠标放在最后一个单元格里按 Tab 可以加行
鼠标放在单元格里按ctrl+M 在上面加一行
ctrl+shift+m 删除行
ctrl+shift+a 在当前列的前面加列
ctrl+shift+减号- 删除列
CSS 标签
CSS 类 方框 填充 (可以在页面留下空白)选td 填充样式作用在单元格上
a:link:超链 接的初始状态
选择器中的类型 高级 选择器 是a:link
a:hover:鼠标悬停
a:active:链接被激活的时候
a:visited:链接被访问过之后
a.类名:link
CSS样式表 新建一个类 方框 选择 边界 (调整框元素与框元素的距离)
表单:插入面板里的表单 表单(form)和body页面及列表都有默认的边界值

DREAMweaverCS6网页设计考点

DREAMweaverCS6网页设计考点

选择题要点1 网页三剑客和新网页三剑客旧:Flash用来生成矢量动画 Fireworks用来制作Wed图像Dreamweaver用来制作和发布网页新:Dreamweaver Flash Photoshop2 Dreamweaver CS6界面中视图有,哪个只能查看,哪些可以设计?实时视图查看设计拆分代码可以设计3 Dreamweaver CS6的新特性全新的管理站点对话框流体网络布局Csc过渡效果图像优化功能为单个元素应用多个类的csc样式4静态网页的扩展名(HTML)根据内容对交互的方式不同可以将网页分为静态网页和动态网页根据实现方式的不同网页分为客户端动态网页和服务器端动态网页5 HTML和XHTML的中英文全称HTML(Hyper Text Markup Language)超文本标记语言XHTML(Extensible Hyper Text Markup Language )可扩展超文本标记语言6 对齐方式(align)属性包含哪些?Align(水平)left(←)right(→)center(居中)valign(垂直)顶对齐底对齐水平居中垂直居中两端对齐7 常用的哪些是单标记,哪些是双标记<br />单标记< /br >双标记8 网页最基本的元素是文字与图像9 网站设计的基本流程及各个阶段的任务10 Dreamweaver是什么软件用来制作和发布网页的软件11 Http的中英文全称Hyper Text Transfer Protocol 超文本传输协议12 常用标记的含义<hr/><html></html><head></head><title></title><body></bdy><table></ta ble><p></p>13 有序列表和无序列表的标记,及其符号类型有序列表无序列表<OL><UL><li>123</li> 显示文:123 <li>123</li> 显示文:123</OL></UL>有序符号类型:数字1 罗马大写I 罗马小写i字母小写a 字母大写A无序符号类型:实心圆点 disc 实心方框 square空心圆圈 circle14表格的属性有哪些<table>表 <tr>行 <td>列15 表格中的标记有哪些组成表格的基本单位表格是由行和列组成的,行和列又是由单元格组成的。

Dreamweaver CS6网页设计与制作标准教程 (2)

Dreamweaver CS6网页设计与制作标准教程 (2)

( 1 )在“管理站点”对话框左下方的按钮选项组中,单击
“删除当前选定的站点”按钮 进行删除。 即可删除选择的 (2)单击“删除当前选定的站点”按钮
站点。
2.4.5 导入和导出站点
如果在计算机之间移动站点,或者与其他用户共同设计站点,
可通过Dreamweaver CS6的导入和导出站点功能实现。导出站点 功能是将站点导出为“.ste”格式文件,然后在其他计算机上将其
“刷新”对话框
2.5.4 设置描述信息
搜索引擎也可通过读取<meta> 标签的说明内容来查找信息,
但说明信息主要是设计者对网页内容的详细说明,而关键字可以让 搜索引擎尽快搜索到网页。设置网页说明信息的具体操作步骤如下。 ( 1 )选中文档窗口中的“代码”视图,将鼠标指针放在 <head>标签中,选择“插入 > Head(H) > 说明”命令,弹出 “说明”对话框。 (2)在“说明”对话框中设置说明信息。
入作者名称和版权信息,完成后单击“确定”按钮。
“META”对话框
2.5.3 设置刷新时间
选择“插入 > Head ( H ) > Meta ( M )”命令,弹出 “META”对话框。在“属性”选项的下拉列表中选择“ HTTPequivalent”选项,在“值”选项的文本框中输入“refresh”, 在“内容”选项的文本框中输入需要的时间值,如图2-39所示, 完成后单击“确定”按钮。
空白网页。 网页设计完成后,选择“文件 > 保存”命令,弹出“另存为”
对话框,设置后单击“保存”按钮,将该文档保存在站点文件夹中。
“新建文档”对话框 新建空白文档
2.3 管理站点文件和文件夹
重命名文件和文件夹 移动文件和文件夹 删除文件或文件夹

第2章Dreamweaver CS6基础入门

第2章Dreamweaver CS6基础入门

2.3 使用DreamWeaver CS6制作简单网 页 2.3.2 HTML基础
(1)通常HTML页面均以DOCTYPE开始,它声明文档的类型,且之前不能有任何 内容(包括换行符和空格),否则将使文档声明无效。如果缺少DOCTYPE会导致 文件在浏览器中显示不正常。 文 档 的 结 构 说 明 (2)接着是<html>标记,以</html>结束。结构中包含三个顶层标签:<html>、 <head>和<body>。文档以<html>开始,以</html>结束,<head>和<body>嵌入其 中。 (3)在<head>和</head>标记的内容是文档头,用于描述页面的头部信息。所 有在<head>和</head>标记之间的内容都是不会显示在页面上的。 (4)<body>和</body>之间的内容是文档体,是HTML的主要部分,它包括了文 件所有的实际内容和绝大多数标记符号。页面上显示的任何东西都包含在这两 个标记之中。 。
文 化 动 态 嘉 州 画 派
嘉州文化长廊网站首页
民 间 艺 术
乌 木 文 化
佛 教 文 化
旅 游 文 化
饮 食 文 化
2.2 Dreamweaver CS6站点建设与管理 2.2.2 网站站点规划与创建
网站结构设计好后,为了让网站管理方便,还需要规划网站的目录结构。网站的目录是指用于存放网站相关 文件的文件夹。
2.3 使用DreamWeaver CS6制作简单网 页 2.3.3 CSS基础
介 绍
CSS(Cascading Style Sheet,层叠样式表)简称样式表, 用于为网页文档中的元素添加各种样式,如字体大小、 背景颜色、边框设置、列表格式等,起到了网页文档的 美化作用。 CSS是将格式规则存放在样式表中,网页通过对样式表的 引用为目标区域的元素添加样式。

《DreamweaverCS6网页设计与制作》第2章Dreamweaver基础知识

《DreamweaverCS6网页设计与制作》第2章Dreamweaver基础知识

2.5.5 电子邮件链接
电子邮件链接是比较常见的一种超级链接。在 浏览网页时,如果单击一个电子邮件的链接时, 会显示在outlook Express中发送电子邮件信息的 窗口。在窗口中已经为用户提供了已经写好的收 件人地址 ,用户只需要添加邮件的主题,输入主 要的内容,单击“发送”按钮。
2.5.6下载链接
在同一个页面中添加锚链接。 在不同的页面上使用锚链接。
2.6在网页中使用图像
2.6.1 插入图片的方法
在设计视图中插入 从资源面板中插入
2.6.2 图片的基本设置 2.6.3 热区的操作 2.6.4 制作光标经过图像
2.6.5 制作导航条 2.6.6 插入图像占位符 2.6.7 添加背景图像 2.6.8 使用Photoshop文件
2.1 Dreamweaver cs3简介
Dreamweaver被称为梦幻工厂,它具有“所见 即所得”的编辑方式,在网页中可以引入行为,样式, 模板等技术,所以在制作网页时体验非常好。由于它 具备可视化编辑功能,用户可以快速地创建页面而不 需要掌握专业的html语言。在查看站点元素和资源 时,能够直接的进行拖拽,操作非常直观。另外还可 以直接将photoshop,fireworks中创建和编辑的图 像导入到dreamweaver中,使资源得到整合。也可 以在其中编辑asp、php、jsp等动态网站。所以说, dreamweaver在网站建设中起着不可替代的作用。
窗口的各组成要素
面板组
组合在一个标题下面的多个相关的面板的集合。可以通过 单击组名称左侧的展开箭头将这多个面板在折叠或展开之 间切换。
文件面板
这个面板组非常重要,用来管理文件和文件夹,还可以对 站点进行操作,查看站点中的资源。

静态网站建设 第四版 第四章 Dreamweaver CS6基础知识

静态网站建设 第四版 第四章 Dreamweaver CS6基础知识

第四章
Dreamweaver CS6 基础知识

4.4 Dreamweaver CS6 的新功能
— 14 —
8. Business Catalyst 集成
Business Catalyst 是用于构建和管理在线企业的托管应用程序。
9. Web 字体
在 Dreamweaver 中可以使用有创造性的 Web 支持字体(如 Google 或 Typekit Web 字体)
第四章
Dreamweaver CS6 基础知识
4.2 Dreamweaver CS6启动与退出
— 4—
1、Dreamweaver CS6的启动
从“开始”菜单中启动用快捷方式启动
2、Dreamweaver CS6的退出
在Dreamweaver CS6主窗口中的“文件”菜单中选择“退出”命令。 在 Dreamweaver CS6被激活状态下,直接按 Alt+F4 组合键。 单击Dreamweaver CS6主窗口左上角的控制菜单图标,从弹出的菜单中选择“关闭” 命令,或者直接双击控制菜单图标。 单击Dreamweaver CS6主窗口右上角的“关闭”按钮。
Dreamweaver CS6 基础知识
4.3 Dreamweaver CS6的操作界面
4.3.4 面板与面板组
— 9—
第四章
Dreamweaver CS6 基础知识
4.4 Dreamweaver CS6 的新功能
— 10 —
Dreamweaver CS6 版本外观变化不大,但是功能上新增了高效创建和测试跨平台和跨浏览 器的HTML5 内容的支持,新增加了开发和打包移动设备应用程序的功能,以及优化了FTP 的性 能。

DreamWeaver-cs6学习笔记第10课处理导航

DreamWeaver-cs6学习笔记第10课处理导航

第10课 处理导航1、超链接基础知识:①超链接(或链接)是对Internet 上或者你自己的计算机内的可用资源的引用。

超链接创建通过HTML 或者你使用的程序设计语言指定的交互式行为,并通过浏览器或者其他应用程序启用。

HTML 超链接由锚记元素<a>及一个或多个属性组成如图示: ②内部超链接是把用户带到相同文档、相同文件夹或硬盘驱动器中存储的另一个文档的超链接,而外部超链接是把用户带到硬盘驱动器、Web 站点或Web 主机外面的文档资源。

都是通过<a>锚记元素嵌入在HTML 中,这个元素指定超链接的目的地的地址或目标,并且可以使用几个属性指定它的工作方式。

③相对超链接就是引用相对于当前文档存储的目标,往往包括资源名称,也许还包括存储它的文件夹比如logo.jpg 或images/logo.jpg 。

绝对超链接引用绝对路径的资源,常用于引用站点外面的资源,包括目标完整URL ,如/index.jspa ,它可以把用户指引到特定的文件或者只是站点内的某个文件夹。

相对链接书写起来更快、更容易,但是如果文档保存在Web 站点中的不同文件夹中或者不同位置,它们可能不会工作。

绝对链接则没有此限制,但文档或文件夹或重命名时则会失败。

那么,为站点内的资源使用相对链接,为站点外的资源使用绝对链接。

2、创建内部超链接:①在“链接”框中输入文档名进行链接:打开文档,选取要添加链接的文本如Home (如是从模板创建的文档,此文本不是可编辑区域而不能选取,则需要打开模板选取要添加链接的文本如Home 进行设置后更新)或图像,在“属性”检查器中选择HTML 选项卡的“链接”框中显示了一个超链接符“#”,将此符号换成“../index.html ”回车则可。

但是还没有主页;②在“链接”框后浏览窗中选择文档名进行链接:打开文档,选取要添加链接的文本如Home (如是从模板创建的文档,此文本不是可编辑区域而不能选取,则需要打开模板选取要添加链接的文本如Home 进行设置后更新)或图像,在“属性”检查器中选择HTML 选项卡的“链接”框中显示了一个超链接符“#”,点此框后的“浏览文件图标”,从站点根文件夹中选择文件,确保“相对于”框中设置为“文档”,确定则可,则“#”变成文件名了。

DreamweaverCS6 HTML CSS DIV JavaScript网站开发网页基础知识

DreamweaverCS6 HTML CSS DIV JavaScript网站开发网页基础知识
Flash是由Adobe公司推出地交互式矢量图与Web动画地标准。网页设计者使用Flash创作出 既漂亮又可改变尺寸地导航界面以及其它奇特地效果,是商用地二维矢量动画软件,用于设计与编 辑Flash文档,在网页大量采用由Flash工具生成地swf文件。
Photoshop:简称"PS",是由AdobeSystems开发与发行地图像处理软件。Photoshop主要处 理以像素所构成地数字图像。使用其众多地编修与绘图工具,可以有效地进行图片编辑工作。PS 有很多功能,在图像,图形,文字,视频,出版等各方面都有涉及。网页主要使用PS来实现图片地处理。
起始页
1.3.1 DreamweaverCS6工具介绍
起始页地设置 设置起始页:勾选"起始页"左下角地不再显示地复选框,可设置关闭"起始页"地效果,如需重新开启改功能,单击 菜单栏地编辑首选参数常规文档类型显示欢迎屏幕,勾选这个选项重新启动"起始页"。
1.3.1 DreamweaverCS6工具介绍
1.3.1 DreamweaverCS6工具介绍
2 认识Dreamweaver CS6工作面板 DreamweaverCS6地属性面板默认在窗口地下部,会随着鼠标所在位置或所选对象地不同显示相对应地属性面 板内容。
1.3.1 DreamweaverCS6工具介绍
2 认识Dreamweaver CS6工作面板 当前标签:光标所在位置地HTML标签名称; 状态栏:状态栏位于文档窗口地底部,它地作用是显示当前正在编辑地文档地有关信息,主要包含当前窗口大小,文 档大小,当前标签,估计下载时间,当前页面编码类型等。 当前文档:表示当前编辑地文档名称,通过点文档名称可更改当前编辑地文档。

中文版DreamweaverCS6网页制作实用教程第一章DreamweaverCS6快速入门

中文版DreamweaverCS6网页制作实用教程第一章DreamweaverCS6快速入门
1 .1.3 网页的常见类型
一般情况下,常见的网页类型分为静态网页与动态网页两种。网页程序是否在服务器端运 行,是区分静态网页与动态网页的重要标志,在服务器端运行的网页(包括程序、网页、组件等) 属于动态网页。动态网页会随不同用户、不同时间,返回不同的网页。而运行于客户端的网页 程序(包括程序、网页、插件、组件等)则属于静态网页。静态网页与动态网页各有特点,具体 如下。
网页制作的相关知识 Dreamweaver CS6 的基本操作 设置 Dreamweaver CS6 的视图 Dreamweaver CS6 的工作界面
1 .1 网页制作的基础知识
网页是网站中的一页,其通常为 HTML 格式。网页既是构成网站的基本元素,也是承载各 种网站应用的平台。简单地说,网站就是由网页组成的。
Dreamweaver CS6 快速入门
Dreamweaver CS6 是一款集网页制作与网站管理于一身的网页编辑软件,该软件是针对专 业网页设计师特别发展的视觉化网页开发工具,利用它,用户可以轻松地制作出跨平台和浏览 器限制并且充满动感的网页。本章将重点介绍 Dreamweaver CS6 软件的相关知识和常用操作, 帮助用户尽快掌握制作网页的基本方法。
图 1-5 网页文本
图 1-6 网页图像
超链接:超链接是从一个网页指向另一个目的端的链接(如图 1-7 所示),超链接的目的端 可以是网页,也可以是图片、电子邮件地址、文件和程序等。当网页访问者单击页面中 的某个超链接时,超链接将根据自身的类型以不同的方式打开目的端。例如,当一个超 链接的目的端是一个网页时,将会自动打开浏览器窗口,显示出相应的页面内容。
网页由网址(URL)来识别与存放,访问者在浏览器地址栏中输入网址后,经过一段复杂而 又快速的程序,网页将被传送到计算机,然后通过浏览器程序解释页面内容,并最终展示在显 示器上。例如,在浏览器中输入网址访问 站点后,实际在浏览器打 开的是 /BankCommSite/cn/index.html 文件,如图 1-1 所示,其中 index.html 是 网站服务器主机上默认的主页文件。

网页设计与制作Dreamweaver CS6标准教程(微课版 第3版)第五章

网页设计与制作Dreamweaver CS6标准教程(微课版 第3版)第五章

网页设计与制作Dreamweaver CS6标准教程(微课版第3版)第五章该节介绍了网页设计的基本原则,包括布局、色彩、字体、图片等方面的要点。

该节详细介绍了如何使用Dreamweaver CS6创建网页,包括新建网页、添加文本、插入图片等操作步骤。

该节讲解了如何使用CSS样式来美化网页,包括设置背景色、文本样式、边框效果等。

该节教授了如何创建超链接,包括内部链接和外部链接的创建方法。

该节介绍了如何使用Dreamweaver CS6中的模板和库来快速创建和管理网页。

模板是预先设计好的网页样式和布局,可以用于多个网页。

通过使用模板,您可以避免重复性的工作,节省时间和精力。

在Dreamweaver CS6中,您可以选择现有的模板,也可以自定义创建自己的模板。

本节将向您展示如何使用这些模板。

库是一组可以在不同网页中重复使用的元素或代码片段。

通过使用库,您可以轻松地在多个网页中保持一致的元素和代码。

本节将向您介绍如何创建并使用库。

___:了解如何使用Dreamweaver CS6中的模板创建网页学会创建自定义模板掌握如何使用库在网页中重复使用元素和代码学会创建和管理库5.1 使用模板创建网页Dreamweaver CS6提供了一系列模板供您选择,包括网站模板和文档类型模板。

您可以根据自己的需求选择适合的模板,并进行自定义设置,如网页标题、导航菜单、页脚等。

本节将向您展示如何使用Dreamweaver CS6中的模板创建网页。

5.1.1 选择现有模板Dreamweaver CS6中内置了许多现有的网站和文档类型模板供您使用。

您可以从模板库中选择适合您的模板,并进行进一步的定制。

本节将向您介绍如何选择并使用现有的模板。

5.1.2 创建自定义模板除了使用现有模板外,您还可以创建自己的模板。

自定义模板可以根据您的需求进行设计和设置,并在创建新网页时使用。

创建自定义模板的过程相对复杂一些,但是一旦创建完成,您可以多次重复使用它。

Dreamweaver CS6网页设计案例教程(微课版)

Dreamweaver CS6网页设计案例教程(微课版)

读书笔记
读书笔记
这是《Dreamweaver CS6网页设计案例教程(微课版)》的读书笔记模板,可以替换为自己的心得。
精彩摘录
精彩摘录
这是《Dreamweaver CS6网页设计案例教程(微课版)》的读书笔记模板,可以替换为自己的精彩内容摘录。
作者介绍
同名作者介绍
这是《Dreamweaver CS6网页设计案例教程(微课版)》的读书笔记模板,暂无该书作者的介绍。
第10章表单与行为
10.1废品回收页 10.2卫浴页 10.3综合演练——问卷调查页 10.4综合演练——全麦面包页
第11章页代码
11.1设计无忧页 11.2油画艺术馆页 11.3综合演练——机电设备页 11.4综合演练——自行车页
第12章综合设计实训
12.1个人页——张美丽的个人页 12.2游戏娱乐页——娱乐星闻页 12.3旅游休闲页——篮球运动页 12.4房产页——焦点房产页 12.5文化艺术页——书法艺术页
1.1操作界面 1.2创建站框架 1.3管理站点 1.4页文件头设置
第2章文本与文档
2.1轩宇门窗页 2.2休闲旅游页 2.3休闲度假页 2.4综合演练——家居装饰页 2.5综合演练——有机果蔬页 3.1咖啡馆页
第3章图像和多媒体
3.2物流运输页 3.3综合演练——儿童零食页 3.4综合演练——房源页
目录分析
1
文前
2
内容提要
3 第1章初识
Dreamweaver CS6
4
第2章文本与文 档
5
第3章图像和多 媒体
1
第4章超链接
2
第5章使用表格
3
第6章使用框架
4
第7章使用层

我爱自学网DreamweaverCS6课程笔记

我爱自学网DreamweaverCS6课程笔记

Adobe DreamweaverCS6课程笔记第一节、Dreamweaver CS6软件简介和安装1、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。

2、为了保让能够正常安装,在安装时,请断开网络。

第二节、DWCS6软件界面的简介一、软件界面组成1、菜单栏2、工作区3、属性栏4、浮动面板(文件、资源、CSS样式、行为等)二、界面的切换:为满足不同人群的需求。

三、界面的恢复:窗口——工作区——重置设计器四、插入面板的调用。

第三节、网页相关知识1、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。

2、什么是网页(网页的概念)在互联网上基于http协议传播信息的页面。

3、什么是网站反应同一主题的多个网页的集合。

4、网页内容的组成(网页元素)(1)文字(2)图片(jpg,gif,png)(3)动画(swf,gif)(4)多媒体(5)超链接(6)表单(7)网页特效(8)其它元素第四节、网页制作方法与站点建立1、网页的制作方法(1)代码法:html(2)软件制作:Dreamweaver 、frontpage(所见即所得)。

2、制作网站前准备工作:建立站点。

3、站点:用来存放网站中所有元素的文件夹,为了制作方便需要将这个文件夹和制作软件相链接。

4、站点的建立(链接)(1)站点——建立(2)文件面板(3)应用程序栏(窗口——应用程序栏)5、站点的分类(按照网站的位置)(1)本地站点(2)远程站点第五节、规划本地站点目录结构1、规划本地站点目录结构(1)images(图片)(2)swf(动画)(3)css(CSS样式)(4)script(存放网页特效)JS(5)other(其它)2、网站主页名称(1)index.htm(2)index.html(3)default.htm(4)default.html注:主页必须放在网站的根目录下面,同时名称也有特殊的要求。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

Adobe DreamweaverCS6课程笔记第一节、Dreamweaver CS6软件简介和安装1、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。

2、为了保让能够正常安装,在安装时,请断开网络。

第二节、DWCS6软件界面的简介一、软件界面组成1、菜单栏2、工作区3、属性栏4、浮动面板(文件、资源、CSS样式、行为等)二、界面的切换:为满足不同人群的需求。

三、界面的恢复:窗口——工作区——重置设计器四、插入面板的调用。

第三节、网页相关知识1、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。

2、什么是网页(网页的概念)在互联网上基于http协议传播信息的页面。

3、什么是网站反应同一主题的多个网页的集合。

4、网页内容的组成(网页元素)(1)文字(2)图片(jpg,gif,png)(3)动画(swf,gif)(4)多媒体(5)超链接(6)表单(7)网页特效(8)其它元素第四节、网页制作方法与站点建立1、网页的制作方法(1)代码法:html(2)软件制作:Dreamweaver 、frontpage(所见即所得)。

2、制作网站前准备工作:建立站点。

3、站点:用来存放网站中所有元素的文件夹,为了制作方便需要将这个文件夹和制作软件相链接。

4、站点的建立(链接)(1)站点——建立(2)文件面板(3)应用程序栏(窗口——应用程序栏)5、站点的分类(按照网站的位置)(1)本地站点(2)远程站点第五节、规划本地站点目录结构1、规划本地站点目录结构(1)images(图片)(2)swf(动画)(3)css(CSS样式)(4)script(存放网页特效)JS(5)other(其它)2、网站主页名称(1)index.htm(2)index.html(3)default.htm(4)default.html注:主页必须放在网站的根目录下面,同时名称也有特殊的要求。

第六、七节、网页中文字的输入1-21、网页的四个视图(1)设计视图(2)代码视图(3)拆分视图(4)实时视图2、网页中的文字(1)文字直接输入就可以了。

(2)回车表示换段。

(3)shift+回车:表示换行。

(4)输入空格时要在全角输入法状态下输入。

(5)特殊字符的插入:“插入——html——特殊字符”(6)文字也可以从网站中复制,但是在复制时需要将网页中文字的格式去掉。

(注:如何去除复制来的文字格式,只需要将文字粘贴到记事本中,然后从记事本中再复制文字就可以了。

)3、预览网页:文件——在浏览器中预览——IExplore(快捷键:F12)第八、九节、页面属性1-21、页面属性(1)修改——页面属性(2)或通过属性栏2、属性(1)左边距、右边距、上边距、下边距。

(2)文字字体、大小、颜色。

注:A、字体:选择常用字体。

如:宋体B、大小:正文文字一般设置为12-16px。

(3)页面背景。

(4)背景图片。

(默认情况自动填充、平铺)注:A、图片要放在站点内。

(有关网站中的所有元素都必须放在站点内)。

B、图片名称不能为中文。

注:如果同时设置背景颜色和背景图片,以背景图片为准。

第十节、Html网页基本代码格式1、网页基本代码<html><head><title></title></head><body></body></html>注:(1)head:开头部分(2)title:标题(3)body:正文部分2、常用代码(1)<p></p>:换段(2)<br>:换行注:多数html代码都有对称性的特点。

第十一节、图片的插入一、图片1、图片格式(1)JPG:图片质量较高,一般用于较大的图片。

如:人物、风景。

(不支持透明)(2)gif:用于制用按钮、动画、导航条等,图片较小,只有256种颜色。

(支持透明)(3)png:兼有两种格式的特点。

(支持透明)注:图片的大小一般尽量控制在200K以下。

2、链接(1)_blank:在新的网页打工。

(2)_self:在自身网页打开。

第十二节、图片热点1、热点(1)矩形热点(2)圆形热点(3)多边形热点注:编辑——首选参数——辅助功能——图像2、替换(1)用于图片的注释。

(2)当图片无法显示的时候用此内容代替。

3、宽度和高度的设置4、相关html代码(1)Img:图片。

(2)Src:位置。

(3)热点:<map>……</map>第十三节、图片的编辑一、裁剪、亮度对比度、锐化注:使用Dreamweaver编辑图像是个不好的习惯,如果要编辑图像,最好使用专门的图像编辑软件(如:Fireworks、photoshop),编辑好了以后,再重新插入进来。

二、插入——图像对象——鼠标经过图像三、水平线的插入插入——html——水平线四、背景颜色的代码:bgcolor第十四节、超链接一、超链接指的是通过点击一个对象可以链接打开另外一个对象(网页、图片、程序等)。

二、链接的代码(即链接的标签)<a href=”URL”>内容</a><a href=”URL” target=”_blank”>文字</a>三、超链接的状态(修改——页面属性——链接)(1)链接:链接默认颜色。

(2)变换图像:鼠标移上去时的颜色。

(3)已访问:访问以后链接的颜色。

(4)活动:鼠标点下去时的颜色。

第十五节、超链接打开方式一、链接页面打开的目标:_blank:新窗口打开网页New:新窗口打开网页_parent:父窗口(框架结构)_self:自身窗口、原窗口_top:顶窗口(框架结构)第十六、十七、十八、十九节、超链接对象一、超链接的对象(1)文字(2)图片(3)热点(4)空链接(#)(5)邮件链接:mailto:邮箱地址(可以利用菜单命令直接插入)(6)下载链接(浏览器打不开的内容即为下载链接)(7)锚点链接(链接到网页的具体位置)步骤:(1)创建锚点(2)制作链接(#锚记)隐藏锚点:编辑——首选参数——不可见元素注:锚点链接不但可以链接本页面中的锚点,也可以链接到其它页面中的锚点。

(8)脚本链接(实现特殊功能)Javascript:window.close()——关闭窗口Javascript:window.print()——打印文字第二十节、表格一、表格的作用1、制作表格2、定位布局二、表格的建立1、插入——表格2、常用面板三、表格的元素及代码1、<td>…..</td>:单元格2、<t r>…..</tr>:行3、<table>…..</table>:表格四、元素的选择1、单元格2、行3、表格第二十一节、表格属性一、表格参数1、行数和列数2、宽度单位:(1)象素表示绝对值(固定值)。

(2)用%表示相对值。

3、填充:单元格中的内容与边框的距离。

4、间距:表示单元格与单元格之间的距离。

5、边框:设置表格是否留有边线。

6、对齐7、清除行高和列宽8、将宽度转换为象素9、将宽度转换为百分比第二十二节、行和单元格属性1、水平:单元格内容水平对齐方式。

2、垂直:单元格内容垂直对齐方式。

3、宽:单元格宽度。

4、高:单元格高度。

5、背景颜色:单元格背景颜色。

6、拆分和合并单元格。

注:在利用表格排版时网页中各种元素都是放入单元格内进行排版的。

第二十三节、网页布局和大小一、网页布局分类(1)“同”字式(2)“厂”字式或反“厂”字式二、网页大小(宽度大小)(1)800*600分辨率宽度设为778象素(2)1024*768分辨率宽度设为950象素或1002象素注:滚动条一般占有22个象素第二十四、二十五、二十六节、实例——网页制作1一、制作网站时的步骤:1、设置页面边距(0,0,0,0)即上、下、左、右边距都为0。

2、先整体后局部:先插入一个大表格用来定位和决定网页宽度,然后再插入小表格来定位每一个部分。

注:(1)大表格尽量不拆分。

(即一行一列)(2)表格与表格之间可以嵌套。

3、插入表格(0,0,0)即填充、边框、间距为0。

4、表格大小和居中(1)800*600分辨率宽度设为778象素(2)1024*768分辨率宽度高为950象素或1002象素5、将单元格内光标定位到左上角(选单元格设置)6、将单元格的高度设置和图片高度一样(作为背景时)第二十七——三十一节、实例——网页制作1-81、图片可以直接插入到表格中、也可以作为背景插入。

注:什么时候直接插入到表格、什么时候作为背景插入呢?(1)当需要在单元格内添加文字时就必须使用背景插入。

(2)如果需要做超链接时就必须作为图片插入。

2、选择表格标签后插入表格可以将新插入的表格放在所选择表格的下面。

3、插入——图像对象——图像占位符注:插入图像占位符后就可以任意设置表格的宽度和高度。

第三十二、三十三节、实例——网页制作9-10一、添加行和列1、插入——插入表格对象2、布局标签3、Tab键(光标定位在最后一个单元格内按tab键)第三十四节、参数的优先级一、参数优先级:单元格>>行>>表格注:表格间距部分的颜色取决于表格背景颜色。

二、图像大于颜色且自动复制1、背景颜色:bgcolor2、背景图像:background第三十五节、表格中单元格大小的设置1、宽度要根据实际大小来进行设置。

2、在设置表格单元格宽度时,可以保留某一列单元格的宽度不设置。

第三十六——三十八节、细线边框表格的制作1-31、利用表格的间距属性来制作。

2、利用表格的填充属性来制作。

第三十九节、实例——简单导航条1、利用表格的间距属性来制作。

第四十节、实例——水平细线与标题栏1、插入图像占位符2、删除单元格中的空格占位符:&nbsp;第四十一节、实例——圆角表格1第四十二节、实例——圆角表格21、height="100%":表示高度为100%。

第四十三节、网页平面效果图1、网站在制作前首先要做网页效果平面图。

2、平面图做好以后再用photoshop、或Fireworks等软件中的切片工具做切片。

3、切片做好后并进行保存。

4、删除不要的部分,保留需要的部分并进行重命名。

第四十四节、滚动效果代码1、<marquee>内容</marquee>(1)direction:方向(2)scrollamount:速度(一般设为3)(3)on mouseover=“this.stop()”:鼠标移上去停止(4)on mouseout=”this.start()”:鼠标离开时开始。

相关文档
最新文档