首页 网页设计与制作实用教程

网页设计与制作实用教程

举报
开通vip

网页设计与制作实用教程null网页设计与制作实用教程网页设计与制作实用教程网页设计与制作实用教程网页设计与制作实用教程第1章 网页设计概述 第2章 HTML语言 第4章 添加网页元素 第5章 网页布局 第6章 制作动感网页 第7章 提高网页制作效率 第8章 站点的维护与上传 第9章 使用Fireworks8处理网页图像 第10章 使用Flash 8制作网页动画 第11章 网站设计制作综合实例第1章 网页设计概述第1章 网页设计概述1.1 网页设计基础知识 1.2 网页制作工具 1.3 网页配色 1.4 网...

网页设计与制作实用教程
null网页设计与制作实用教程网页设计与制作实用教程网页设计与制作实用教程网页设计与制作实用教程第1章 网页设计概述 第2章 HTML语言 第4章 添加网页元素 第5章 网页布局 第6章 制作动感网页 第7章 提高网页制作效率 第8章 站点的维护与上传 第9章 使用Fireworks8处理网页图像 第10章 使用Flash 8制作网页动画 第11章 网站设计制作综合实例第1章 网页设计概述第1章 网页设计概述1.1 网页设计基础知识 1.2 网页制作工具 1.3 网页配色 1.4 网页布局类型 1.5 网站设计和制作流程 1.6 优秀网站赏析 1.1 网页设计基础知识1.1 网页设计基础知识1.1.1 网页与网站 1、网页与网站的关系 网页就是通过浏览器在 Internet上看到的页面,英文名称为 Web Page;网站也称为站点,英文名称为 Web Site,是多个网页的集合,但不是简单的集合,而是取决于该网站的内容(如网页的数量及网站的定位)。 1.1 网页设计基础知识1.1 网页设计基础知识2、网站的类型 网站按内容进行分类,可分为门户网站、垂直网站、地方网站;而其中的垂直网站又可分为新闻网站、娱乐网站、体育网站、科技网站、汽车网站、财经网站、房产网站、游戏网站、生活服务网站和教育职业网站等。1.1 网页设计基础知识1.1 网页设计基础知识 根据网站是否具有交互性和远程维护功能,可以将网站分为静态网站和动态网站两大类。 1.1 网页设计基础知识1.1 网页设计基础知识1.1.2 常用Web术语 1、Web常用术语 1、URL 2、网页 3、主页1.2 网页制作工具1.2 网页制作工具1.2.1 网页编辑工具 1、FrontPage 2、Dreamweaver 1.2 网页制作工具1.2 网页制作工具1.2.2 网页图像与动画制作工具 1、Flash 2、Fireworks 3、PhotoShop 4、PhotoImpact 5、COOL3D 6、Ulead GIF Animator 1.3 网页配色1.3 网页配色1.3.1 色彩的基础知识 1、色彩的产生——光与色 可视光谱 1.3 网页配色1.3 网页配色所示白光经三棱镜分解后的光谱1.3 网页配色1.3 网页配色2、色彩的分类——彩色与无彩色 彩色与无彩色1.3 网页配色1.3 网页配色3、色彩的三个特性——色相、明度和纯度 ⑴ 色相 ⑵ 明度 ⑶ 纯度 1.3 网页配色1.3 网页配色 4、色彩的混合 ⑴ 三原色 ⑵ 正混合 ⑶ 负混合 ⑷ 中性混合1.3 网页配色1.3 网页配色5、色相环12色相环 1.3 网页配色1.3 网页配色6、色彩的心理感觉:不同的颜色会给浏览者不同的心理感受。 7、近似色 近似色 1.3 网页配色1.3 网页配色8、互补色互补色 1.3 网页配色1.3 网页配色9、分离补色1.3 网页配色1.3 网页配色10、组色1.3 网页配色1.3 网页配色11、暖色1.3 网页配色1.3 网页配色12、冷色1.3 网页配色1.3 网页配色13、RGB模式——显示器的色彩模式1.3 网页配色1.3 网页配色14、CMYK模式——印刷的混色原理1.3 网页配色1.3 网页配色1.3.2 网页配色 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 1、基本色、辅助色和强调色 1.3 网页配色1.3 网页配色2、常用概念 ⑴ 色彩的对比 色彩对比是指各种色彩在界面内形成的面积、形状、位置以及色相、明度、纯度之间的差异,使网页出现不同的变化和心理感受。 1.3 网页配色1.3 网页配色⑵ 色彩的调和 两种或两种以上色彩和谐搭配在一起,会产生调和、统一的效果,是人们追求视觉得到统一、舒适、达到心理平衡的手段。 1.3 网页配色1.3 网页配色1.3.3 色彩在网页设计中的基本应用 1、前提:以网站的内容为基础 2、寻找搭配方案的技巧和经验 3、颜色与文本 1.3 网页配色1.3 网页配色具体搭配实例分析 1、儿童类网站 1.3 网页配色1.3 网页配色2、男性特征的网站 1.3 网页配色1.3 网页配色3、体现华丽高贵特色的网站1.3 网页配色1.3 网页配色4、青年人网站1.3 网页配色1.3 网页配色5、服装服饰类1.3 网页配色1.3 网页配色经验与技巧 1、忌“花”:色彩不要过多 2、冷暖搭配要谨慎 3、网站各界面色彩统一 4、不要用“花” 背景 1.4 网页布局类型1.4 网页布局类型1、“国”字型 2、拐角型 3、标题正文型 4、左右框架型1.4 网页布局类型1.4 网页布局类型5、上下框架型 6、综合框架型 7、封面型 8、Flash型 9、变化型 1.5 网站设计和制作流程1.5 网站设计和制作流程1.5.1 进行需求调查和分析 1、确定参与人员 2、编写完整的需求调查 记录 混凝土 养护记录下载土方回填监理旁站记录免费下载集备记录下载集备记录下载集备记录下载 文档 3、用户调查内容 4、市场调研内容 5、编写《网站需求说明书》 1.5 网站设计和制作流程1.5 网站设计和制作流程1.5.2 确定网站的主题内容 1、确定网站主题 2、搜集 材料 关于××同志的政审材料调查表环保先进个人材料国家普通话测试材料农民专业合作社注销四查四问剖析材料 1.5 网站设计和制作流程1.5 网站设计和制作流程1.5.3 提出网站设计方案 1、主题栏目的设置 2、 目录 工贸企业有限空间作业目录特种设备作业人员作业种类与目录特种设备作业人员目录1类医疗器械目录高值医用耗材参考目录 结构设计 3、颜色搭配 4、网站标志Logo 5、版面布局 6、图像的运用1.5 网站设计和制作流程1.5 网站设计和制作流程1.5.4 制作和上传网站 1、制作网站 2、上传与测试 3、后期维护1.6 优秀网站赏析1.6 优秀网站赏析1.6.1 时尚娱乐类网站赏析 1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6.2 信息类网站赏析 1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6.3 商务类网站赏析 1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析第2章 HTML语言第2章 HTML语言2.1 HTML语言基础 2.2 字符格式的设置 2.3 多媒体文件的调用 2.4 超链接的设置 2.5 表格 关于规范使用各类表格的通知入职表格免费下载关于主播时间做一个表格详细英语字母大小写表格下载简历表格模板下载 的设置 2.6 表单的设置 2.7 框架的设置 2.1 HTML语言基础 2.1 HTML语言基础 2.1.1 HTML标签 1、标签的组成 ⑴ HTML语言中,所有的标签都必须用尖括号括起来,比如:、、等。 ⑵ 大部分标签都是成对出现的,即有开始标签和结束标签,这样表示的意义在于用开始标签和结束标签来定义该标签所产生作用的范围。2.1 HTML语言基础 2.1 HTML语言基础 2、标签的属性 标签都有相对应的属性,通过属性可以对标签的内容做更为详细的说明,所有属性都放置在开始标签的尖括号内。如:

HTML语言基础

。 2.1 HTML语言基础 2.1 HTML语言基础 2.1.2 基本标签 基本的HTML文档标签如下: 1、…… 2、…… 3、…… 4、…… 5、……2.1 HTML语言基础 2.1 HTML语言基础 6、

……

7、
8、
……
9、 10、
……
11、
2.2 字符格式的设置2.2 字符格式的设置2.2.1 font标签的使用 1、字体标签 2、字号标签 3、字体颜色标签 2.2 字符格式的设置2.2 字符格式的设置2.2 字符格式的设置2.2 字符格式的设置2.2.2 字符样式的设置 2.2 字符格式的设置2.2 字符格式的设置2.2.3 有序和无序列表标签 1、
    ……
2、
    ……
2.2 字符格式的设置2.2 字符格式的设置2.2.4 文字的对齐方式 表达对齐方式用ALIGN属性,它可以应用在多种标签内,如标题标签hn、分段标签p和水平线标签hr等。 2.3 多媒体文件的调用2.3 多媒体文件的调用2.3.1 图像文件的调用 1、 2、border属性 3、align属性 2.3 多媒体文件的调用2.3 多媒体文件的调用2.3.2 音频文件的调用 1、…… 2、 2.3.3 视频文件的使用 2.3.4 移动字幕的使用 2.4 超链接的设置2.4 超链接的设置 2.4.1 文件之间的链接 …… 该标签的主要功能是实现文件之间的相互跳转。 2.4 超链接的设置2.4 超链接的设置2.4.2 网站的链接 实现由文本链接到网站的方法,类似于上面的链接过程,不同点在于必须给出站点的URL地址。 2.4.3 电子邮件的链接 实现电子邮件的链接方法与前面讲过的链接稍有不同,在属性值中用关键字mailto:引导,并给出所访问的电子邮件地址。在浏览器窗口点击链接时,便直接进入到电子邮件软件中拟写邮件,并发送出邮件。2.4 超链接的设置2.4 超链接的设置2.4.4 图片的链接 实现文本到图像的链接方法与前面讲过的链接类似,链接设置完成后,在浏览器窗口中点击链接的文字,直接看到所链接的图片。 2.5 表格的设置2.5 表格的设置 2.5.1 建立表格 表格范围:一定是在……
标签控制的范围内。 表的名称:是第一个需要说明的内容。 行的数目:通过增加或减少……行标签来实现对所需行数的设置。2.5 表格的设置2.5 表格的设置 单元格:单元格的数目,通过增加或减少……和……标签来实现对所需单元格数的设置。单元格的属性,可以单独设置,以体现表格样式的多样性。单元格的内容,可以是文字、图像和超链接。 2.5 表格的设置2.5 表格的设置2.5.2 表格属性的设置 2.6 表单的设置2.6 表单的设置2.6.1 建立表单 最基本的表单 2.6 表单的设置2.6 表单的设置2.6.2 表单控件的使用 1、文本框 ⑴ 文本框属性 ⑵ 密码框属性 2.6 表单的设置2.6 表单的设置2、按钮 按钮控件通常有三类,即提交、重置和用户自定义按钮。 3、单选框 单选框的功能是在一组选项中,一次只能选中一个选项。2.6 表单的设置2.6 表单的设置4、多选框 多选框的功能是在一组选项中,一次可以选中多个选项。 5、下拉列表 下拉列表提供了多种可选项,使用户可以在众多的选择中充分进行选择,而不用用户用手进行繁琐的填写工作。 6、滚动文本框2.7 框架的设置2.7 框架的设置2.7.1 建立框架的语句结构 框架的基本结构 …… 2.7 框架的设置2.7 框架的设置2.7.2 设置框架属性 1、框架集属性的设置 2、单个框架属性的设置第4章 添加网页元素第4章 添加网页元素4.1 应用文本 4.2 应用图像 4.3 超级链接的概念和种类 4.4 创建各种链接 4.5 添加多媒体元素 4.1 应用文本4.1 应用文本案例一 应用文本制作网站首页 4.1 应用文本4.1 应用文本4.1.1 输入文本 任务1 网页中输入文本 4.1.2 修改字号 任务2 修改输入文本字号 4.1 应用文本4.1 应用文本4.1.3 修改文字颜色 任务3 设置文本颜色 4.1.4 自定义文字颜色 4.1.5 在dreamweaver8中添加基本字体 任务4 为网页中文本指定字体组合 4.1 应用文本4.1 应用文本4.1.6 设置粗体斜体样式 任务5 设置文本的样式 4.1.7 对齐方式与缩进 任务6 设置文本对齐方式 4.2 应用图像4.2 应用图像案例2 使用图像制作网站首页4.2 应用图像4.2 应用图像4.2.1 网页中常用图像的种类 1、GIF格式 2、JPEG格式 3、PNG4.2 应用图像4.2 应用图像4.2.2 插入图像 任务1 插入图像 4.2.3 设置图像的基本属性 任务2 设置图像的位置 4.2.4 编辑图像 4.2.5 设置鼠标经过图像 任务3 设置页面导航为鼠标经过图像 4.3 超级链接的概念和种类4.3 超级链接的概念和种类4.3.1 超级链接的概念 超级链接是指站点内不同网页之间、站点与Web之间的链接关系,它可以使站点内的网页成为有机的整体,还能够使不同站点之间建立联系。 4.3 超级链接的概念和种类4.3 超级链接的概念和种类 超级链接由两部分组成:链接源和链接目标。链接源是文本或图像;链接目标是用户单击超级链接之后打开的网页或者下载的文件。 4.3 超级链接的概念和种类4.3 超级链接的概念和种类4.3.2 超级链接的种类 1、根据链接源的特点,一般把链接分为文本链接与图像链接两大类。 2、如果按链接目标分类,可以将超级链接分为: ⑴ 内部链接 ⑵ 外部链接 ⑶ 锚记链接 ⑷ E-mail链接 ⑸ 热区链接4.3 超级链接的概念和种类4.3 超级链接的概念和种类4.3.3 相对地址与绝对地址 1、URL 2、绝对地址 3、相对地址4.4 创建各种链接4.4 创建各种链接案例三 创建各种超级链接 4.4.1 创建内部链接 任务1 添加文本内部链接 任务2 添加图像内部链接4.4 创建各种链接4.4 创建各种链接4.4.2 创建外部链接 任务3 添加文本外部链接 4.4.3 创建E-mail链接 任务4 添加E—mail链接 4.4.4 创建锚记链接4.4 创建各种链接4.4 创建各种链接案例四 长文档网页中添加锚记 任务1 添加页面内部锚记链接 任务2 添加页面间的锚记链接 4.4 创建各种链接4.4 创建各种链接4.4.5 创建热区链接 案例五 地图引导分支网站 任务1 添加站点内部图像热区链接 任务2 添加站点外部热区链接 4.4.6 创建其他类型的链接 任务3 添加下载链接4.5 添加多媒体元素4.5 添加多媒体元素案例六 视频在线网站制作 4.5.1 添加滚动文本 任务1 在“视频在线”网页中添加滚动文本 4.5.2 添加视频文件 任务2 在“视频在线”网页中添加视频文件第5章 网页布局第5章 网页布局5.1 表格布局 5.2 框架布局 5.3 层布局 5.1 表格布局5.1 表格布局5.1.1 表格的基本操作 在本节中将制作一个课程表,通过制作该课程表,来熟悉Dreamweaver中表格的基本操作。 5.1 表格布局5.1 表格布局5.1 表格布局5.1 表格布局5.1.2 使用表格进行版面布局 表格在网页制作中最重要的应用是进行页面的布局设计。在本节中将使用表格进行版面布局来制作一个比较简单的XXXX科技发展有限公司的首页,如图所示。通过制作该页面,掌握在Dreamweaver中使用表格进行版面布局的相关操作。 5.1 表格布局5.1 表格布局5.1 表格布局5.1 表格布局5.1.3 特殊效果表格的制作 使用表格可以制作出许多特殊的布局效果,如细线效果、三维效果、圆角效果等。本节中将主要介绍使用表格来制作细线效果。5.1 表格布局5.1 表格布局 在很多网页中,经常可以看到各种细线的布局效果,使页面简洁明快、条理清楚。这些细线效果可以使用图像的方式生成,也可以使用表格来制作。使用表格实现的细线效果,占用空间小,下载速度快,因此更为实用。细线效果大致可以分为两类,一是细线表格,二是各种横竖分隔线。5.1 表格布局5.1 表格布局5.1.4 布局模式 为了简化使用表格进行版面布局设计的过程,Dreamweaver提供了一个专门用于进行版面布局的工具——布局模式。使用这个工具,可以方便地在网页中直接绘制表格和单元格,并可以根据需要自由定位和移动单元格,使版面布局变得更加灵活轻松快捷。5.1 表格布局5.1 表格布局 在默认情况下,打开文档窗口时显示的是标准模式。在标准模式下,插入面板中的布局按钮是不可用的,要使用这些按钮必须切换到布局模式。5.2 框架布局5.2 框架布局5.2.1 什么是框架 框架可以将浏览器窗口划分为若干个区域,每个区域都可以装载不同的HTML文档,从而获得一种特殊的布局效果。 5.2 框架布局5.2 框架布局5.2.2 框架的基本操作 使用框架布局的网页 5.2 框架布局5.2 框架布局5.2.3 页内框架 框架集文件是将整个浏览器划分为多个不同的区域,而页内框架则是作为网页的一个组成部分。因此在一些特定的地方使用常常可以获得意想不到的布局效果。 5.2 框架布局5.2 框架布局制作示例5.3 层布局5.3 层布局5.3.1 什么是层 Dreamweaver中的层就相当于一个容器,它可以包含在HTML文档中使用的任意对象,而且可以将这个容器放置在页面的任何位置,从而简单且精确地定位页面元素。使用层进行元素定位,可以使元素在页面中的定位达到像素级的精确度。 5.3 层布局5.3 层布局5.3.2 创建层 1、插入层 2、拖放层 3、绘制层 5.3 层布局5.3 层布局5.3.3 设置层属性 1、选定层 2、设置层属性 3、层面板5.3 层布局5.3 层布局5.3.4 层的基本操作 1、嵌套层 2、调整层的大小 3、调整层的位置 4、对齐层 5、改变层的Z轴顺序 6、改变层的可见性5.3 层布局5.3 层布局5.3.5 层布局实例 第六章 制作动感网页第六章 制作动感网页6.1 行为概述 6.2 Dreamweaver 8的内置行为 6.3 时间轴的基本操作 6.4 使用表单 6.5 创建表单对象 6.6 行为与表单综合应用 6.1 行为概述6.1 行为概述6.1.1 行为的概念和应用顺序 1、行为的概念 所谓行为(Behavior),就是在网页中进行的一系列动作,通过这些动作,可以实现用户同网页的交互,也可以通过动作使某个任务被执行。 6.1 行为概述6.1 行为概述2、行为的应用顺序 可以将行为附加到整个文档(即附加到body标签),还可以附加到链接、图像、表单元素或多种其它HTML元素中的任何一种。 6.1 行为概述6.1 行为概述6.1.1 在Dreamweaver中提供的动作类型 在Dreamweaver中提供的动作可以分成三种类型:内置动作、自定义动作和第三方行为动作。 Dreamweaver内置的行为动作指的是Dreamweaver系统自带的行为动作,使用这些动作可以在“行为”面板中直接单击加号(+)按钮,直接在“动作”弹出菜单中选择。 6.1 行为概述6.1 行为概述 Dreamweaver内置的行为毕竟有限。Dreamweaver最有用的功能之一就是它的扩展性,即它为精通JavaScript的用户提供了编写JavaScript代码的机会,使他们可以通过代码扩展Dreamweaver的功能。 要获取第三方行为动作,需从Macromedia Exchange Web站点下载并安装新行为。 6.1 行为概述6.1 行为概述6.1.1 认识事件 OnAbort(IE4、NS3、NS4)事件:当用户停止浏览器对图像的载入(如单击“停止”按钮)时被触发。 onAfterUpdate(IE4)事件:当页面上一个捆绑数据的元素完成对数据源的更新时被触发。 onBeforeUpdate(IE4)事件:当页面上一个捆绑数据的元素中的数据被改变,并即将失去焦点时被触发。该事件发生在数据源被更新之前。6.1 行为概述6.1 行为概述 onBlur(IE3、IE4、NS3、NS4)事件:该事件同onFocus事件正好相反。当指定的元素从用户的交互行为失去焦点时被触发。 onBounce(IE4)事件:当选取框元素中的内容延伸到选取框元素边界之外时被触发。 onChange(IE3、IE4、NS3、NS4)事件:当用户改变页面中的值时被触发。 6.1 行为概述6.1 行为概述 onClick(IE3、IE4、NS3、NS4)事件:当用户单击特定的页面元素(如链接、按钮或图像映像)时被触发。 onDblClick(IE4、NS4)事件:当用户双击特定的页面元素时被触发。 onError(IE4、NS3、NS4)事件:若浏览器在载入页面或图像时发生错误,就会被触发。 6.1 行为概述6.1 行为概述 onFinish(IE4)事件:当选取框元素中的内容完成一个循环时就会被触发。 onFocus(IE3、IE4、NS3、NS4)事件:当指定元素通过用户的交互行为获得焦点时被触发。 onHelp(IE4)事件:当用户单击浏览器的帮助按钮(通常是F1)或从浏览器的“帮助”菜单中选择帮助菜单项时被触发。 6.1 行为概述6.1 行为概述 onKeyDown(IE4、NS4)事件:当用户按下了一个键,在尚未释放之前,会被触发。 onKeyPress(IE4、NS4)事件:当用户按下键然后又释放键,就会被触发。该事件很像onKeyDown和onKeyUp事件的组合。 onKeyUp(IE4、NS4)事件:当用户释放被按下的键时被触发。 6.1 行为概述6.1 行为概述 onLoad(IE3、IE4、NS3、NS4)事件:当图像或页面被完全载入之后被触发。 onMouseDown(IE4、NS4)事件:当用户按下鼠标键,在尚未释放之前,会被触发。 onMouseMove(IE3、IE4)事件:当用户将鼠标指针在一个页面元素上移动时,就会触发这个页面元素的onMouseMove事件。 6.1 行为概述6.1 行为概述 onMouseOut(IE4、NS3、NS4)事件:当鼠标指针移出了指定元素(例如链接)的范围时,就会触发这个页面元素的onMouseOut事件。 onMouseOver(IE3、IE4、NS3、NS4)事件:当鼠标第一次移入指定元素(例如链接)的范围时被触发。 onMouseUp(IE4、NS4)事件:当按下的鼠标键被释放时被触发。 6.1 行为概述6.1 行为概述 onMove(NS4)事件:当浏览器窗口或框架移动(如拖动浏览器窗口,在桌面上移动)时被触发。 onReadyStateChange(IE4)事件:当指定元素的状态被改变时被触发。这些可能的元素状态包括未初始化(uninitialized)、载入(loading)和完成(complete)等。 onReset(IE3、IE4、NS3、NS4)事件:当表单中的数据被复位为默认值时被触发。 onResize(IE4、NS4)事件:当用户重设浏览器窗口或框架的大小时被触发。6.1 行为概述6.1 行为概述 onRowEnter(IE4)事件:在当前捆绑数据源的记录指针被改变后被触发。 onRowExit(IE4)事件:在当前捆绑数据源的记录指针将要改变时被触发。 onScroll(IE4)事件:当用户利用滚动条或箭头键上下滚动文档内容时被触发。 onSelect(IE3、IE4、NS3、NS4)事件:当用户从一个文本框中选中文本时被触发。 6.1 行为概述6.1 行为概述 onStart(IE4)事件:当选取框元素中的内容开始循环时被触发。 onSubmit(IE3、IE4、NS3、NS4)事件:当用户递交一份表单时被触发。 onUnload(IE3、IE4、NS3、NS4)事件:当用户离开页面时被触发。 6.2 Dreamweaver 8的内置行为 6.2 Dreamweaver 8的内置行为6.2.1 使用行为控制Flash动画 使用“控制Shockwave或Flash”动作可以使网页中插入的Macromedia Shockwave或Macromedia Flash SWF文件能够根据设定的动作进行有效的控制。这些影片在插入网页是必须设置一个惟一的名称,才能进行有效的控制。使用该动作可以控制影片的播放、停止、倒带或转到Shockwave或Flash影片中的帧。 6.2 Dreamweaver 8的内置行为 6.2 Dreamweaver 8的内置行为6.2.2 链接行为 利用“转到URL”动作,可以设置在当前浏览器窗口或指定的框架窗口中载入指定的页面。该动作在同时改变两个或多个框架内容时特别有用。 6.2 Dreamweaver 8的内置行为 6.2 Dreamweaver 8的内置行为6.2.3 导航条 导航条由图像或图像组组成,这些图像随用户的操作而变化显示内容。导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径。 导航条项目有四种状态:一般状态、鼠标经过状态、按下状态和按下时鼠标经过状态。 使用“插入导航条”命令可以在网页中插入导航条。 6.2 Dreamweaver 8的内置行为 6.2 Dreamweaver 8的内置行为6.2.4 调用插入到网页中的JavaScript 调用JavaScript动作允许设置当某些事件被触发时,调用相应的JavaScript代码,以实现相应的动作。 6.2 Dreamweaver 8的内置行为 6.2 Dreamweaver 8的内置行为6.2.5 变换图像 利用“交换图像”、“恢复图像交换”与“预先载入图像”动作行为可以产生变换图像的效果。 “交换图像”动作通过更改img标签的src属性将一个图像和另一个图像进行交换。使用这个动作可以创建鼠标经过图像等图像效果,也可以一次交换多个图像。 6.2 Dreamweaver 8的内置行为 6.2 Dreamweaver 8的内置行为6.2.6 在网页上显示弹出信息 在网页上弹出信息可以有两种方式,一种是弹出提示信息框;一种是弹出新窗口。 使用“弹出消息”行为可以显示一个带有指定的消息文本的提示框,该提示框只有一个“确定”按钮,所以使用此动作可以给用户提供信息,而不能为用户提供选择。 6.2 Dreamweaver 8的内置行为 6.2 Dreamweaver 8的内置行为6.2.7 显示-隐藏层 利用“显示-隐藏层”动作,可以在页面上显示分层、隐藏分层,或恢复默认的分层可见性状态。该动作在创建动感网页效果时非常有用。 6.3 时间轴的基本操作6.3 时间轴的基本操作6.2.8 时间轴的基本概念 时间轴,顾名思义,它是一条贯串时间的轴,用于表示网页存活时间中发生的各种状态。通过往这条时间轴上不同的时间部位放置不同的内容,就可以实现网页元素的动态效果。6.3 时间轴的基本操作6.3 时间轴的基本操作 利用时间轴,可以创建各种类型的动态效果。 时间轴构建的动态效果,主要是通过往文档中添加JavaScript代码实现的。 6.3 时间轴的基本操作6.3 时间轴的基本操作6.3.1 创建时间轴动画 时间轴主要是通过时间轴面板构建的。 6.3 时间轴的基本操作6.3 时间轴的基本操作1、创建动画的基本方法 2、录制分层路径 6.3 时间轴的基本操作6.3 时间轴的基本操作6.3.2 修改时间轴及其对象的属性 1、控制时间轴 设计好动画之后,可以在时间轴面板中对时间轴进行各种控制,从而实现对动画的编辑和修改。 ⑴ 选中动画条 ⑵ 改变整个动画时间 ⑶ 改变动画局部的播放速度6.3 时间轴的基本操作6.3 时间轴的基本操作⑷ 改变动画起始时间 ⑸ 改变动画完整路径 ⑹ 添加和删除帧、关键帧和对象(动画条) ⑺ 使用多条时间轴 6.3 时间轴的基本操作6.3 时间轴的基本操作2、利用时间轴改变图像和分层属性 利用时间轴,不仅可以改变分层的位置,还可以改变分层的某些属性,例如大小和可见性等。利用时间轴,还可以改变图像的源文件,实现某些特殊效果。 6.4 使用表单6.4 使用表单6.4.1 表单的概念 利用表单,可以帮助Internet服务器从用户处收集信息,例如可以收集用户资料、获取用户定单,也可以实现搜索接口。表单是Internet用户同服务器进行信息交流最主要的工具。 一般来说,表单中包含多种对象,有时候也称作控件。6.4 使用表单6.4 使用表单6.4.2 插入表单域 在Dreamweaver中,要添加表单对象,首先应该创建表单域。由于表单域属于不可见元素,因此,如果希望在屏幕上显示表单域,应该激活Dreamweaver的不可见元素特性,也即打开“查看→可视化助理”菜单,选中“不可见元素”命令。 6.4 使用表单6.4 使用表单6.4.3 设置表单域属性 在插入表单域后,实际上生成的是如下的代码:
可以看到,它将表单的method属性设置为“post”,但是尚未设置action等其他属性。利用属性面板,可以继续对表单域设置其他属性。6.4 使用表单6.4 使用表单1、表单名称 2、动作 3、方法 6.5 创建表单对象6.5 创建表单对象6.5.1 添加表单对象 要添加表单对象首先将插入点放置入表单域中要放置控件的位置,然后打开“插入→表单”菜单,在子菜单中选择要插入的控件类型即可。6.5 创建表单对象6.5 创建表单对象 使用对象面板可以更方便地插入表单对象。将插入点放置入表单域中要放置控件的位置以后,单击对象面板上相应的表单对象按钮,或是将所需的表单对象按钮拖动到文档窗口中希望放置表单对象的位置上,都可以添加相应的表单对象。6.5 创建表单对象6.5 创建表单对象 选中表单对象后,可以在属性面板中设置其属性。必要时,可以在控件周围输入相应的提示文字,作为控件的标签。 如果希望删除某个表单控件,可以首先用鼠标单击该控件,选中它,然后按下Del键。实际上,可以将控件作为普通文本一样,进行各种编辑操作,例如复制、剪切和粘贴等。6.5 创建表单对象6.5 创建表单对象6.5.2 文本域 1、添加文本域 2、设置文本域属性6.5 创建表单对象6.5 创建表单对象6.5.3 隐藏域 隐藏域就是一种在浏览器上不显示的控件,利用隐藏域就可以实现浏览器同服务器在后台隐藏地交换信息。 1、添加隐藏域 2、设置隐藏域属性 6.5 创建表单对象6.5 创建表单对象6.5.4 文本区域 当用户需要提供给使用者很大的书写空间时,应该在表单中添加一个多行的文本区域。 6.5.5 复选框 复选框也叫检查框,主要用于标记一个选项是否被选中。该选项可以是单独的选项,也可以是一组选项中的一个。复选框的特性在于,对于成组的选项,可以一次选中一个,也可以一次选中多个。6.5 创建表单对象6.5 创建表单对象6.5.6 单选按钮及单选按钮组 1、单选按钮 2、单选按钮组 6.5 创建表单对象6.5 创建表单对象6.5.7 列表框和下拉列表菜单 列表框可以以列表的方式显示一组选项,并可以设置允许在其中选择一项或是选择多项,还可以为滚动列表设置每次要显示的选项个数。 6.5 创建表单对象6.5 创建表单对象 列表框的一种特例是下拉列表,它平常显示为一个单行文本框,单击右方的箭头可以展开列表,允许进行选择,当选择了某一个列出选项,并且释放鼠标时,列表会关闭,选定的值会显示在文本框中。通常这种下拉列表被称作下拉列表菜单。 6.5 创建表单对象6.5 创建表单对象6.5.8 文件域 文件域控件由一个文本框和一个“浏览”按钮组成,主要用于从磁盘上提取文件的路径和名称。所有的主要浏览器都支持文件域。而文件域能使用户附加一个文件到正被提交的表单中并与其他数据一起发送。 6.5 创建表单对象6.5 创建表单对象6.5.9 按钮 按钮对于表单而言是必不可少的。在一个页面上可以放置想要放置的所有表单对象,但除非按下“提交”按钮,否则在客户和服务器之间就不会产生交互作用。表单中有三种类型的按钮,分别为提交按钮、重置按钮和自定义按钮。 6.5 创建表单对象6.5 创建表单对象6.5.10 图像域 利用图像域,可以实现图像类型的递交按钮,使文档更为美观。 6.5 创建表单对象6.5 创建表单对象6.5.11 标签 为了使浏览者能够更加方便地选择控件,应允许通过单击与控件相关的文本即可选中该控件。 6.6 行为与表单综合应用6.6 行为与表单综合应用6.6.1 跳转菜单 在Dreamweaver 8中添加跳转菜单对象只需提供一系列项目名称和URL关联即可,Dreamweaver 8会自动处理所需的代码,同时还允许添加一个“前往”(也称“转到”或“Go”)按钮。 6.6 行为与表单综合应用6.6 行为与表单综合应用6.6.2 检查表单 为确保用户在表单的文本域中输入了正确的数据类型,防止表单提交到服务器后在任何指定的文本域中包含无效的数据,通常需要检查表单数据。 第7章 提高网页制作效率第7章 提高网页制作效率7.1 CSS概述 7.2 创建CSS样式 7.3 CSS样式的应用及修改 7.4 使用模板 7.5 使用库文件 7.1 CSS概述7.1 CSS概述7.1.1 CSS的概念 CSS是Cascading Style Sheet的缩写,中文翻译为“层叠样式表”,简称为“样式表”。它与HTML一样也是一种标记语言,只不过它是控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 7.1 CSS概述7.1 CSS概述7.1.2 CSS面板 7.1 CSS概述7.1 CSS概述7.1.3 CSS的属性单位 1、长度单位 2、颜色单位 3、百分比单位 7.2 创建CSS样式7.2 创建CSS样式7.2.1 创建内部样式表 7.2 创建CSS样式7.2 创建CSS样式7.2.2 创建外部样式表 内部样式表只限于当前页面文档使用,如果多个文档中都使用CSS样式,则必须为每一个文档创建内部样式表,这样会增加用户制作和维护页面的工作量。如果使用外部样式表,则可以解决上述问题。 7.3 CSS样式的应用及修改7.3 CSS样式的应用及修改7.3.1 附加样式表 在一个新的页面中可以创建CSS样式,但有时需要使用已经编写好的CSS样式,一般情况下这些设置好的CSS样式都存放在一个以.css为扩展名的CSS样式文件中,需要使用时将其附加到当前页面中即可。 7.3 CSS样式的应用及修改7.3 CSS样式的应用及修改7.3.2 应用样式 当用户使用“标签”或“高级”选择器建立CSS样式时,只要页面中出现相应的HTML标记符就会自动应用这个样式效果。但如果用户使用“类”或“ID”选择器建立CSS样式时,则必须手动指明哪些内容需要应用CSS样式。 应用样式的方法非常简单,如果是内部样式表,直接应用即可,如果是外部样式表,则首先要将其附加到当前页面中,然后再应用。 7.3 CSS样式的应用及修改7.3 CSS样式的应用及修改7.3.3 修改CSS样式 CSS样式创建完成后,用户可以随时地对其进行修改。 如果CSS样式不再使用,则应该及时将其删除,以保证页面的整洁。7.4 使用模板7.4 使用模板7.4.1 模板的概念 模板是一种特殊类型的文档,它不是用来存放内容的,设计它的目的是在其中存放页面布局,然后在同一个网站中批量地产生格式相似的网页页面。使用模板的另一个好处是当网站中页面布局需要更新时,只要更改与网页页面保持连接状态的模板即可,这将使网页设计人员非常方便地管理整个网站页面。 7.4 使用模板7.4 使用模板7.4.2 创建模板 在Dreamweaver 8中创建模板的方法非常简单,点击菜单栏中的“文件→新建”将打开“新建文档”对话框,在其中选择“基本页”类型中的“HTML模板”或是“模板页”类型中的“HTML模板”,然后点击“创建”,将会在文档编辑区中打开空白模板页,用户在其中可以设置相应的布局和放置需要的内容。7.4 使用模板7.4 使用模板7.4.3 定义可编辑区域 上一节讲述了如何建立模板,但是由于在模板没有设置可编辑的区域,使得这个模板没有实用意义,因此需要在模板中定义可编辑的区域。 7.4 使用模板7.4 使用模板7.4.4 使用模板面板创建 除了在7.4.2节中讲述的创建模板的方法外,还可以使用模板面板进行模板的创建、修改和删除等操作。7.4 使用模板7.4 使用模板7.4.5 使用模板创建网页 在上述三节中讲述了如何创建模板并对其进行布局设置的方法,因为模板不能在浏览器中显示,因此需要使用模板创建网页。 7.4 使用模板7.4 使用模板7.4.6 更新 站点中页面的布局不可能一直都保持一个样式,有时根据需要会对页面的布局做出一些调整,如果手动对每一个页面都进行修改,那将成为网页设计人员的噩梦。而如果只调整与网页相关联的模板,并利用其自动更新机制对页面自动进行更改,将会使工作变得简单。 7.5 使用库文件7.5 使用库文件7.5.1 库的概念 库项目就是将页面中用到的重复的内容保存起来,需要使用时,只需要从库中引用。当这些内容需要修改时,只要把库项目中的内容修改并让页面执行更新操作即可。库项目把内容组合在一起存储起来,很像是一个“零件仓库”。使用库可以使网页设计人员更灵活、方便地对页面进行编辑设计。 7.5 使用库文件7.5 使用库文件7.5.2 库面板 7.5 使用库文件7.5 使用库文件7.5.3 创建库项目 下面以一个实例来说明库项目的创建以其应用。 7.5 使用库文件7.5 使用库文件7.5.4 使用库项目 库项目建立完成后,需要在页面中对其进行引用。 7.5.5 更新 模板不一样,当设计人员对库项目进行修改并存盘后,Dreamweaver 8不会自动对与这个库项目相关联的页面进行更新,其需要设计人员手动对页面进行更新,方法是用鼠标右键点击“库项目面板”中“库项目列表”的空白区域,在弹出的菜单中选择“更新当前页”,即可将当前编辑页面中引用的库项目进行更新。 第8章 站点的维护与上传第8章 站点的维护与上传8.1 站点测试 8.2 申请域名空间 8.3 站点上传 8.1 站点测试8.1 站点测试8.1.1 兼容性测试 由于现有浏览器的版本众多,各个版本之间又不完全兼容,因此网页设计人员在设计完页面后,就需要对其进行兼容性测试,测试目的是为了检查网站中是否有目标浏览器所不支持的标签或属性等元素,以便设计人员进行改进。 8.1 站点测试8.1 站点测试8.1.2 链接测试 超链接是网站中最重要的元素之一,因此除了检查浏览器的兼容性外,还应该对网站中页面的链接做检查,以保证用户浏览网页时可以到达准确的位置。 8.1 站点测试8.1 站点测试8.1.3 实地测试 不管Dreamweaver 8提供何种测试功能,都不如在实际的工作环境中进行测试准确,因此设计人员可以将整个网站上传到服务器中,然后在客户机上浏览并进行检查。 8.2 申请域名空间8.2 申请域名空间8.2.1 申请免费空间 用户可以根据网站的性质、内容的大小、运行平台以及安全性等方面选择网站空间,对于一般商业或专业性比较强的网站最好使用收费的网站空间,而对于普通用户做的个人性质的网站,则可以申请免费的网站空间。 8.2 申请域名空间8.2 申请域名空间8.2.2 申请域名 1、顶级域名 2、免费域名 8.2 申请域名空间8.2 申请域名空间8.2.3 免费空间及域名推荐 1、IK8免费空间:http://www.ik8.com/ 2、免费个人空间:http://www.kudns.com/ 3、虎翼网:http://www.51.net/ 4、多来米中文网:http://diy.myrice.com/free.php 5、常来网免费空间:http://web.thec.cn/sysweb/Login.aspx 6、北京IDC网:http://www.beijingidc.com/free.htm 8.2 申请域名空间8.2 申请域名空间可以申请域名的(部分)机构地址: 1、免费域名:http://my.1a.cn 2、北京IDC网:http://www.beijingidc.com/domain.htm 3、虎翼网:http://www.51.net/ 4、多来米中文网:http://diy.myrice.com/domain.php 5、免费域名转发系统:http://www.0033.cn/indexUrl.html 8.3 站点上传8.3 站点上传 网站设计完成并测试成功后,就要将其上传到服务器中,以便客户访问。上传网页文件的方法有很多,比如使用FTP命令或CuteFTP工具等。Dreamweaver 8为了方便用户使用,也提供了上传的功能。第9章 使用Fireworks8处理网页图像第9章 使用Fireworks8处理网页图像9.1 Fireworks8功能介绍 9.2 Fireworks8工作环境 9.3 文档基本操作 9.4 矢量对象制作 9.5 位图图像处理 9.6 创建和编辑文本 9.7 热点、切片、按钮和导航条9.1 Fireworks8功能介绍9.1 Fireworks8功能介绍9.1.1 Fireworks8功能简介 使用 Fireworks,可以在一个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像。Fireworks 可以在单个应用程序中创建和编辑位图和矢量两种图形。并且所有元素都可以随时被编辑。除此之外,工作流可以实现自动化,从而满足耗费时间的更新和更改要求。 9.1 Fireworks8功能介绍9.1 Fireworks8功能介绍 Fireworks 与多种产品集成在一起,包括 Macromedia 的其它产品(如 Dreamweaver、Flash、FreeHand 和 Director)和其它用户喜欢的图形应用程序及 HTML 编辑器,从而提供了一个真正集成的 Web 解决方案。利用HTML 编辑器自定义的 HTML 和 JavaScript 代码,可以轻松地导出 Fireworks 图形。9.1 Fireworks8功能介绍9.1 Fireworks8功能介绍9.1.2 Fireworks8的新功能 1、优化 2、集成的工作环境 3、工作流程的改进 9.2 Fireworks8工作环境9.2 Fireworks8工作环境9.2.1 Fireworks8工作窗口 1、Fireworks 工作环境 9.2 Fireworks8工作环境9.2 Fireworks8工作环境9.2.2 浮动面板组 1、常用面板 2、组织面板组和面板 9.3 文档基本操作9.3 文档基本操作9.3.1 创建新文档 9.3 文档基本操作9.3 文档基本操作9.3.2 打开和导人文件 9.3 文档基本操作9.3 文档基本操作9.3.3 保存 Fireworks8 文件 9.4 矢量对象制作9.4 矢量对象制作9.4.1 创建基本图形 1、绘制基本线形 2、绘制矩形 3、绘制椭圆形 4、绘制星形 5、“钢笔”工具的应用 9.5 位图图像处理9.5 位图图像处理9.5.1 位图的编辑 1、绘制位图对象 2、绘画位图对象 3、擦除位图对象 4、羽化像素选区 9.5 位图图像处理9.5 位图图像处理9.5.2 滤镜 1、下雨的效果 9.5 位图图像处理9.5 位图图像处理2、制作简单的邮票9.5 位图图像处理9.5 位图图像处理9.5
本文档为【网页设计与制作实用教程】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
该文档来自用户分享,如有侵权行为请发邮件ishare@vip.sina.com联系网站客服,我们会及时删除。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
下载需要: 免费 已有0 人下载
最新资料
资料动态
专题动态
is_310081
暂无简介~
格式:ppt
大小:8MB
软件:PowerPoint
页数:0
分类:计算机考试
上传时间:2011-10-03
浏览量:40