网页设计.docx
《网页设计.docx》由会员分享，可在线阅读，更多相关《网页设计.docx（50页珍藏版）》请在冰豆网上搜索。
网页设计
情境一Internet基础与应用
任务一Internet概述
一、Internet概念
Internet是一个全球性的计算机互联网络，它是将不同地区且规模大小不一的网络互相连接而成。
Internet的功能
●信息的获取与发布
●电子邮件（E-mail）
●网上交际
●电子商务
●网络电话
●网上事务处理
●Internet的其它应用
二、WWW概念
WWW（WorldWideWeb）译为万维网，简称Web，平常口头都读3W，是Internet上最重要的资源。
它是由Internet上的信息服务器连成的网络，是目前Internet上发展最快和应用最广泛的服务。
1.超文本传输协议（HTTP）
HTTP（超文本传输协议）是用于将超文本从WWW服务器传输到本地浏览器的传送协议。
通信协议是构成计算机网络的基本要素之一。
通信协议是网络上各个PC机之间沟通的“语言”，有了协议之后，网络上的计算机才有可能互联。
2.统一资源定位器（URL）
Web中用URL（统一资源定位器）作为标识文档及其他资源的全球地址。
URL好比门牌号码，它可以帮助用户在Internet定位所需要的资料。
URL的一般形式为：
应用协议类型：
//被访问的服务器的域名或IP地址/路径名/…/文件名
冒号左边是说明URL的访问方式。
如：
ftp：
文件传输协议
http：
超文本传输协议
三、TCP/IP概念
TCP/IP（传输控制协议/互联网络协议）是一种网络通信协议，它规范了网络上的所有通信设备，尤其是一个主机与另一个主机之间的数据往来格式以及传送方式。
TCP/IP是Internet的基础协议，是由底层的IP协议和TCP协议组成的，也是一种电脑数据打包和寻址的标准方法。
在数据传送中，可以形象地理解为有两个信封，TCP和IP就像是信封，要传递的信息被划分成若干段，每一段塞入一个TCP信封，并在该信封面上记录有分段号的信息，再将TCP信封塞入IP大信封，发送上网。
在接收端，一个TCP软件包收集信封，抽出数据，按发送前的顺序还原，并加以检验，若发现错误，TCP将会要求重发。
四、IP地址概念
在TCP/IP网络中，每个主机都有唯一的地址，它是通过IP协议来实现的。
IP协议要求在每次与TCP/IP网络建立连接时，每台主机都必须为这个连接分配一个唯一的32位地址，因为在这个32位IP地址中，不但可以用来识别某一台主机，而且还隐含着网际间的路径信息。
IP地址一般以4个字节表示，每个字节又用十进制表示，范围是0~255，每个数字之间用点隔开，如192.168.101.5。
IP地址的结构：
网络类型
网络ID
主机ID
先按IP地址中的网络标示号找到相应的网络，再在这个网络上利用主机ID找到相应的主机。
五、域名系统
IP地址是以数字来代表的主机地址，比较难记，为了使用和记忆方便，也为了便于网络地址的分层管理和分配，Internet采用了域名管理系统，结构为：
主机名.机构名.网络名.最高层域名
IP地址和域名的关系就像每个人的身份证号和自己的名字，是一一对应的，当输入一个域名地址时，域名服务器（DNS）就会搜索其对应的IP地址，然后访问到该地址所表示的站点。
任务二网上自我保护常识
一、使用密码时
1.尽量避免使用有意义的英文单词、姓名缩写以及生日、电话号码等容易泄露的字符作为密码，最好采用字符与数字混合的密码。
2.在不同的场合使用不同的密码。
3.不要贪图方便在拨号连接时选择“保存”密码。
4.定期地修改自己的上网密码，至少一个月更改一次。
二、使用电子邮件时
应申请多个免费邮箱，对于不同的用途，分门别类地使用不同的邮箱。
三、下载时
1.不下载来路不明的软件及程序。
2.不要打开来历不明的电子邮件及其附件，以免遭病毒邮件的侵害。
四、安装防火墙
如有条件，应安装防火墙以抵御黑客的袭击。
情境二网页设计与制作概述
任务一网页设计与制作初识
一、网站的组成元素
整体CIS：
网站以何种统一规范的视觉形象展现给用户。
文件系统
导航系统：
便于用户浏览网站信息、获取网站服务，并且在浏览过程中不至于迷失，在发现问题时可以及时找到在线帮助的所有形式。
技术模型：
网站在开发过程中实施的技术组合方案。
如网站的界面设计工具一般采用Dreamweaver、FrontPage或Golive结合Flash、Photoshop\Illustrator或Fireworks等。
服务及体贴模型
项目化管理机制
网站的技术规范及其相关文案
二、网站与网页的关系
多个网页组合在一起便形成了一个网站。
简单地说，多个网页通过超链接构成了整个网站。
三、基于Web的客户端与服务器端
基于Web的客户端是指用户或浏览器端，即网站所在的Web服务器反馈给用户的网页信息。
基于Web的服务器端是指网站文件所存放的Web服务器。
四、基于Web的人机交互
基于Web的人机交互是指客户端的用户与Web服务器端的应用程序之间的人机对话，即当用户向Web服务器端的应用程序发出HTTP请求时，Web服务器端的应用程序对用户的请求产生响应并反馈给用户相应的结果页面。
任务二网站开发的技术层面及工具
网站开发的技术层面是指网站开发过程中的开发模块。
网站的整体CIS设计、
内容网站主要页面的版式设计
界面设计
网页中的文字、图像与多媒体等对象的设计
AdobeWebPublish：
Photoshop、Illustrator、
工具Golive和LiveMotion
AdobeStudio:
Dreamveaver、Flash、Fireworks和FreeHand。
客户端程序设计
服务器端程序设计
服务器端数据库开发
网站的测试：
网站的发布、维护与更新
任务三网站的分类与精品网站赏析
网站分类一般的原则是网站的相对规模与主体功能。
综合门户类网站：
在某个特定的行政区域内具有绝对的规模优势，同时具有相对稳定和庞大的服务受众群。
如新浪网等。
垂直门户类网站：
在某个行业中具有绝对的规模优势，同时其主体业务在本行业中处于绝对的领先地位，或者在某个特定的技术领域具有绝对的技术权威，并同时具有相对较大的规模。
专业程度必须很高，或者说网站的服务内容相对比较单一。
如当当网上书店。
艺术类网站：
网站提供的内容艺术氛围比较浓，同时网站的主体受众群一般均具有一定的艺术素养。
如中国艺术家协会网站。
个人网站：
一些具有某项特长或为了充分展现自我的人群自主开发的网站，个性十分鲜明。
情境三DreamweaverCS3
任务一DreamweaverCS3初识
一、运行DreamweaverCS3
开始—程序—AdobeDreamweaverCS3
二、熟悉DreamweaverCS3工作区
任务二DreamweaverCS3基本操作
一、创建本地站点
本地站点是网站所有文件在本地计算机上的存放位置。
文件面板—管理站点—新建—站点
二、站点的导入、导出
站点—管理站点—导入
导出
三、创建网页
站点管理窗口—右击要创建网页的文件夹—新建文档
四、设置页面属性
修改—页面属性
五、创建超级链接
1、文件链接：
；链接到其他文档或文件。
窗口—属性—链接
2、锚记链接：
跳转至统一文件或不同文件内的特定位置。
单击创建位置—插入面板—常用—命名锚记—选择创建锚记的文本或图像—属性面板—链接
3、E-Mail链接：
新建一个已填好收件人E-Mail地址的空白电子邮件。
插入面板—常用—电子邮件链接
4、空链接：
未指派的链接，用于向页面上的对象或文本附加行为。
选择要链接的对象—属性面板—链接中输入#
任务三文本的输入与编辑
一、输入文本
1、直接输入文本
2、选择性粘贴
二、使用CSS样式格式化文本
CSS是一组格式设置规则，通过使用CSS样式设置页面的格式，可将页面的内容与表示形式分离开。
页面内容存放在HTML文件中，而CSS规则存放在外部样式表中。
1、创建CSS样式
选择文本—CSS属性面板中右击—新建
2、设置CSS属性
双击CSS样式
3、应用CSS样式
选择文本范围—CSS样式面板中右击CSS样式—套用
附加样式表
任务四图像的插入与编辑
一、插入图像
“插入”面板“常用”—“图像”按钮—图像
二、设置图像属性
使用“属性”面板
三、编辑图像
使用“属性”面板
1、优化图像
2、裁剪图像
3、重新取样
4、调整图像的亮度和对比度
5、锐化图像
四、创建鼠标经过图像
“插入”面板“常用”—“图像”按钮—鼠标经过图像
任务五表格的制作与使用
一、制作表格
1、插入表格
“插入”面板“常用”—“表格”按钮
2、编辑表格
1、）选择表格
单击表格边框线
2、）调整表格大小
“属性”面板
鼠标拖动
3、）添加行或列
定位—修改—表格—插入行
插入列
4、）删除行或列
定位—修改—表格—删除行
删除列
选择行或列—Delete
5、）拆分单元格
定位—修改—表格—拆分单元格
“属性”面板—拆分单元格
6、）合并单元格
选择单元格—修改—表格—合并单元格
“属性”面板—合并单元格
7、）剪切或复制单元格
选择单元格—编辑—剪切
拷贝
8、）粘贴单元格
选定单元格—编辑—粘贴
9、）删除单元格内容
选定单元格—编辑—清除
Delete
3、设置表格属性
使用“属性”面板
二、用表格布局页面
1、熟练使用表格嵌套和单元格的拆分与合并
2、表格边框必须设置为0。
任务六APDiv元素的使用
AP元素，即绝对定位元素，是分配有绝对位置的任何HTML页面元素。
一、APDiv元素的创建和使用
1、插入APDiv元素
插入面板—布局—绘制APDiv元素
2、插入嵌套APDiv元素
1、）绘制嵌套APDiv元素
编辑—首选参数—AP元素—选中嵌套复选框
2、）嵌套现有APDiv元素
窗口—AP元素—Ctrl+鼠标拖动
3、设置APDiv元素属性
属性面板
二、APDiv元素的基本操作
1、选择APDiv元素
鼠标单击
AP元素面板
2、更改APDiv元素的堆叠顺序
属性面板
AP元素面板
3、显示和隐藏APDiv元素
属性面板
AP元素面板
4、调整APDiv元素的大小
鼠标拖动
属性面板
5、移动APDiv元素
鼠标拖动
键盘光标键
三、APDiv元素与表格的相互转换
修改—转换—将APDiv转换为表格
将表格转换为APDiv
任务7网页布局
框架：
框架不是文件，只是存放文件的容器，是将一个浏览器窗口划分为多个区域，每个区域都可以显示不同的HTML文件，它们的操作是独立的。
框架集：
框架的集合，是HTML文件，定义一组框架的布局和属性。
一、创建框架和框架集
查看—可视化助理—框架边框
插入—布局—框架
二、框架和框架集的基本操作
1、选择框架和框架集
“文件”窗口：
Shift+Alt+单击
“框架”面板
2、调整框架大小
鼠标拖动
属性面板
3、删除框架
鼠标拖动
4、设置框架和框架集属性
属性面板
5、保存框架和框架集
1）保存框架和框架集
文件—保存全部
2）保存框架集
文件—保存框架页
框架集另存为
3）保存框架
文件—保存框架
框架另存为
任务8使用Spry框架构件
Spry框架是一个可用来构建更加丰富的网页的JavaScript和CSS库。
Spry框架支持一组用标准HTML、CSS和JavaScript编写的可重用构件。
Spry框架中的每一个构件都与唯一的CSS和JavaScript文件相关联。
一、使用Spry折叠式构件
折叠式构件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。
用户可通过单击该面板上的选项卡来隐藏或显示存储在折叠式构件中的内容。
1、插入折叠式构件
插入—布局—Spry折叠式
Spry
2、编辑折叠式构件
选定构件—属性面板
二、使用Spry菜单栏构件
菜单栏构件是一组颗导航的菜单按钮，当访问者将光标停在其中的某个按钮上时，将显示相应的子菜单。
1、插入菜单栏构件
插入—布局—Spry菜单栏
Spry
2、编辑菜单栏构件
选定构件—属性面板
三、使用Spry可折叠面板构件
可折叠面板构件是一个面板，可将内容存储到紧凑的空间中。
用户单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。
1、插入Spry可折叠面板构件
插入—布局—Spry可折叠面板
Spry
2、编辑Spry可折叠面板构件
选定构件—属性面板
四、使用Spry选项卡式面板构件
选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。
用户可通过单击要访问的面板上的选项卡来隐藏或显示存储在选项卡式面板中的内容。
1、插入选项卡式面板构件
插入—布局—Spry选项卡式面板
Spry
2、选定构件—属性面板
任务9表单
表单就是用户可以在网页中填写信息的表格。
其作用是接收访问者的信息并将其提交给Web服务器上特定的程序进行处理，从而实现与用户的交互。
一、创建表单
表单域是放置表单对象的区域，只有表单域内的表单对象，才可以将它的信息传送出去，才可以接受外来的信息。
查看—可视化助理—不可见元素
1、插入表单
插入—表单—表单
2、设置表单属性
属性面板
二、添加表单对象
1、添加文本域
文本域：
文本输入框，可以接受任何类型的字母或数字等文本。
插入—表单—文本字段
2、添加按钮
按钮：
可将表单数据提交到服务器，或者重置表单。
插入—表单—按钮
3、添加复选框
复选框：
允许浏览者从多个复选框中选择一项或多项。
插入—表单—复选框
4、添加单选按钮
单选按钮：
由两个或多个共享同一名称的按钮组成的一组按钮，代表互相排斥的选择，只允许用户从某单选按钮组中选择一个。
插入—表单—单选按钮
5、添加下拉列表或菜单
可在有限的空间里列出多个选项，列表可定义高度，并允许访问者选择一个或多个选项。
插入—表单—列表/菜单
6、添加文件域
文件域：
允许用户把计算机上的某个文件作为表单数据上传给服务器，。
插入—表单—文件域
7、添加跳转菜单
跳转菜单：
是一个下拉列表，一般用于当前站点的导航，单击其中的某个选项，可跳转到相应的网页或站点。
插入—表单—插入跳转菜单
任务10行为
一、行为简介
行为：
为响应某一事件而采取的一个或多个动作，从而实现用户与网页的交互。
行为由事件和该事件所触发的动作组成。
事件是触发动作的原因，由用户或浏览器触发。
动作是预先写好的一段JavaScript代码，用于完成某一特定任务。
二、行为面板
窗口—行为
三、应用内置行为
1、添加行为的方法：
1、）选定一个对象（图像、文本、图层等），打开行为面板
2、）点击“+”号添加一个行为，并选中一个事件
2、删除行为：
选中行为，点击“-”
常见事件：
OnClick:
单击，当用户单击特定的页面元素时，触发该事件。
OnMouseDown:
鼠标按下，即鼠标按下时，触发该事件。
OnMouseOut:
鼠标移出，即鼠标移动到对象之外，触发该事件。
OnMouseOver:
鼠标划过，即鼠标移动到对象之上，触发该事件。
OnLoad:
当图像或页面被完全载入之后，触发该事件。
1.拖动AP元素
使用户在页面中拖动一个APDiv元素，实现一定的效果。
绘制APDiv—打开行为面板—添加行为—拖动AP元素。
2．跳转菜单
编辑跳转菜单：
在行为面板里双击一个跳转菜单动作
在属性面板里选择“菜单”进行编辑
3．打开浏览器窗口
添加“打开浏览器窗口”动作——选择onLoad事件
4．弹出消息（只能向用户提供信息而不能使用户做出选择）
选中对象——添加行为——弹出消息——输入消息——选中onClick事件——保存
5．显示/隐藏与元素
插入图片——插入APDiv——设置元素背景色并在APDiv中插入内容——将APDiv设为不可见——选中图片——打开行为面板——添加行为——显示——选择onMouseOver事件——添加行为——隐藏——选择onMouseOut事件
四、创建滚动字幕
要创建滚动字幕的效果，可通过编辑
（该标签的作用就是使页面元素产生滚动）
选中文本——Ctrl+T——marquee
编辑marquee标签：
窗口——标签检查器
height:
设字幕高度
behavior:
制作文字左右移动的运动效果
任务十一制作多媒体网页
一、创建时间轴动画
1、时间轴：
也称为时间线，用于按时间排列画面，表示网页元素在不同时间的不同状态。
●时间轴的基本原理：
将静态的画面连续播放，利用人眼的视觉残留效应，产生运动的错觉。
在Dreamweaver中，制作的动画一般有两种效果，一种是位置移动的动画效果，另一种是根据时间变化显示不同图片的动画效果。
在时间轴上显示的每一个小矩形称为一帧，整个时间轴就是有许多的帧构成的，这些帧在页面中的连续播放构成了时间轴动画。
✧时间轴面板：
显示APDiv和图像随时间变化的属性。
✧关键帧---动画条中一种被定义了对象属性的帧，用小圆标记表示。
✧动画条：
显示每个动画的持续时间。
✧播放磁头：
位于帧数行上的红色长方块，在文档窗口显示播放磁头所在帧内容。
在时间轴上拖动播放磁头，可以在文档窗口看到相应时间上动画播放的状态。
✧帧编号：
只是帧的序号。
✧帧频：
动画播放的平均速度，默认15，是最佳速度。
✧动画通道：
显示用于制作动画的通道，共33个。
窗口—时间轴
2、编辑帧
右击动画条—增加关键帧
移除关键帧
添加帧
移除帧
3、直线移动动画的制作
时间轴是通过改变APDiv的位置、大小、可视性以及叠放次序来创建动画的。
如果用户要创建一个移动文本或图片的动画时，必须先把对象加入到APDiv中，然后再通过时间轴制作动画的效果。
绘制APDiv—选定APDiv—右击时间轴—添加对象—选定右边的关键帧—拖动层
直接选中APDiv并拖动到时间轴面板至新的位置—
保存网页—播放
✧实例1：
将一幅图片从网页的一边移到另一边
✧注：
1、用户只能向时间轴中添加APDiv和图像，若需要在时间轴中移动或隐藏其他对象，需将其添加到APDiv中。
2、默认情况下，新建动画的长度为15帧，播放速率为15帧/秒
3、改变动画的播放时间和速度，可拖动最后一关键帧和输入速度。
✧实例2：
编辑动画路径——曲线动画（生成较复杂的动画）
通过添加关键帧来实现
✧实例3：
替换图片
右击——改变对象
✧实例4：
创建图像动画要点：
添加关键帧，并调整层的可见性
插入图片—将图片添加到时间轴—插入关键帧——属性面板源文件选择即可
✧实例5：
改变图层的大小
✧步骤：
1、将APDiv拖到时间轴面板中
2、单击第一个关键帧，将光标移到APDiv的控制点上，控制APDiv原始尺寸
3、在动画条的某一帧插入一个关键帧，打开属性面板
4、单击新插入的关键帧，在属性面板中分别设置宽度（W）和高度（H）
5、按F12预览
4、创建自由路径的动画
插入APDiv—插入图片—右击时间轴—记录AP元素的路径—拖动APDiv创建路径—选中自动播放和循环
5、复杂动画的编辑
1．）两个动画同时播放
鼠标左键拖动动画条到不同的时间轴上左对齐。
2.）两个动画非同时播放
鼠标左键拖动动画条，也可在同一时间轴上
3.）改变动画的播放时间
鼠标左键拖动动画条即可
二、插入Flash对象
1、插入Flash动画
插入面板—常用—媒体—Flash（.swf文件）
2、添加Flash按钮
插入面板—常用—媒体—Flash按钮
3、插入Flash文本
插入面板—常用—媒体—Flash文本
三、插入音频
1、链接到音频文件
选定文本—属性面板中链接
2、为网页添加背景音乐
切换到代码视图—在
之间输入“
src：
设置音乐文件的路径。
Loop：
对播放音乐的循环次数进行控制。
Loop=”-1”表示无限循环播放。
四、插入视频
插入面板—常用—媒体—Flash视频
五、插入其他媒体对象
插入面板—常用—媒体—其它
任务十二模板和库
一、模板
1、模板简介
模板：
一种用来产生带有固定特征和共同格式的基础文件。
可编辑区域：
允许用户修改的区域。
锁定区域：
禁止用户修改的区域，包含了在所有页面中的共同内容。
2、创建模板
1、）新建模板
窗口—资源—模板—“新建模板”按钮
文件—新建—空白页—HTML模板
2、）定义基本页面
3、）定义可编辑区
插入记录—模板对象—可编辑区域
4、）可编辑区域改为锁定区域
选定区域—修改—模板—删除模板标记
5、）保存模板
文件—另存为模板
3、将现有文件设置为模板
插入记录—模板对象—可编辑区域
4、应用模板
1、）应用模板创建文件
文件—新建—模板中的页—创建
2、）对已有页面应用模板
模板面板—选择模板—应用
3、）更新模板
模板修改后保存会出现“更新模板文件”对话框
4、）更新整个站点（未及时更新站点中使用了该模板的页面）
修改—模板—更新页面
5、）将文件与模板分离
修改—模板—从模板中分离
二、库
1、创建库项目
库项目：
在网页中可重复使用的部分。
窗口—资源—新建库项目按钮—新建库项目—编辑
直接拖入库
选定元素—窗口—资源—新建库项目按钮—新建库项目
2、重命名库项目
两次单击库项目名称
3修改库项目
属性面板—打开
双击库面板中的库项目
4、分离库项目
单击“属性”面板“从源文件中分离”按钮
5、插入库项目
拖动库项目到文件窗口
选定库项目—“插入”按钮
6、更新库项目
修改—库—更新页面
任务十三向服务器上传主页
一、申请空间
在IE浏览器地址栏输入—免费空间注册登录。
二、发布站点
文件面板—管理站点—编辑—远程信息——选择要发布的站点—“上传文件”按钮
情境四Flash
任务一FlashCS4初识
一、Flash的应用领域介绍
Flash是目前交互式矢量图和Web动画的标准。
Flash是一个以矢量对象为主要动画元素，并结合位图对象、音频对象、视频对象和FlashActionScript脚本进行Flash动画创作的专业化程度极高的应用软件。
Flash动画特点：
文件体积小，放大后永不失真，交互性强，便于控制等。
FlashCS4大致应用领域：
网站动画、片头动
升级会员 