网页设计.docx

1、网页设计情境一 Internet基础与应用任务一 Internet概述一、Internet概念Internet是一个全球性的计算机互联网络，它是将不同地区且规模大小不一的网络互相连接而成。Internet的功能 信息的获取与发布 电子邮件（E-mail） 网上交际 电子商务 网络电话 网上事务处理 Internet的其它应用二、WWW概念WWW(World Wide Web)译为万维网，简称Web，平常口头都读3W，是Internet上最重要的资源。它是由Internet上的信息服务器连成的网络，是目前Internet上发展最快和应用最广泛的服务。1.超文本传输协议（HTTP）HTTP(超文本

2、传输协议)是用于将超文本从WWW服务器传输到本地浏览器的传送协议。通信协议是构成计算机网络的基本要素之一。通信协议是网络上各个PC机之间沟通的“语言”，有了协议之后，网络上的计算机才有可能互联。2.统一资源定位器（URL）Web中用URL(统一资源定位器)作为标识文档及其他资源的全球地址。URL好比门牌号码，它可以帮助用户在Internet定位所需要的资料。URL的一般形式为：应用协议类型：/被访问的服务器的域名或IP地址/路径名/文件名冒号左边是说明URL的访问方式。如：ftp：文件传输协议http：超文本传输协议三、TCP/IP概念TCP/IP（传输控制协议/互联网络协议）是一种网络通信协

3、议，它规范了网络上的所有通信设备，尤其是一个主机与另一个主机之间的数据往来格式以及传送方式。TCP/IP是Internet的基础协议，是由底层的IP协议和TCP协议组成的，也是一种电脑数据打包和寻址的标准方法。在数据传送中，可以形象地理解为有两个信封，TCP和IP就像是信封，要传递的信息被划分成若干段，每一段塞入一个TCP信封，并在该信封面上记录有分段号的信息，再将TCP信封塞入IP大信封，发送上网。在接收端，一个TCP软件包收集信封，抽出数据，按发送前的顺序还原，并加以检验，若发现错误，TCP将会要求重发。四、IP地址概念在TCP/IP网络中，每个主机都有唯一的地址，它是通过IP协议来实现的

4、。IP协议要求在每次与TCP/IP网络建立连接时，每台主机都必须为这个连接分配一个唯一的32位地址，因为在这个32位IP地址中，不但可以用来识别某一台主机，而且还隐含着网际间的路径信息。IP地址一般以4个字节表示，每个字节又用十进制表示，范围是0255，每个数字之间用点隔开，如192.168.101.5。IP地址的结构：网络类型网络ID主机ID先按IP地址中的网络标示号找到相应的网络，再在这个网络上利用主机ID找到相应的主机。五、域名系统IP地址是以数字来代表的主机地址，比较难记，为了使用和记忆方便，也为了便于网络地址的分层管理和分配，Internet采用了域名管理系统，结构为：主机名.机构名

5、.网络名.最高层域名IP地址和域名的关系就像每个人的身份证号和自己的名字，是一一对应的，当输入一个域名地址时，域名服务器（DNS）就会搜索其对应的IP地址，然后访问到该地址所表示的站点。任务二 网上自我保护常识一、使用密码时1.尽量避免使用有意义的英文单词、姓名缩写以及生日、电话号码等容易泄露的字符作为密码，最好采用字符与数字混合的密码。2.在不同的场合使用不同的密码。3.不要贪图方便在拨号连接时选择“保存”密码。4.定期地修改自己的上网密码，至少一个月更改一次。二、使用电子邮件时应申请多个免费邮箱，对于不同的用途，分门别类地使用不同的邮箱。三、下载时1.不下载来路不明的软件及程序。2.不要打

6、开来历不明的电子邮件及其附件，以免遭病毒邮件的侵害。四、安装防火墙如有条件，应安装防火墙以抵御黑客的袭击。情境二 网页设计与制作概述任务一 网页设计与制作初识一、 网站的组成元素整体CIS：网站以何种统一规范的视觉形象展现给用户。文件系统导航系统：便于用户浏览网站信息、获取网站服务，并且在浏览过程中不至于迷失，在发现问题时可以及时找到在线帮助的所有形式。技术模型：网站在开发过程中实施的技术组合方案。如网站的界面设计工具一般采用Dreamweaver、FrontPage或Golive结合Flash、PhotoshopIllustrator或Fireworks等。服务及体贴模型项目化管理机制网站的

7、技术规范及其相关文案二、 网站与网页的关系多个网页组合在一起便形成了一个网站。简单地说，多个网页通过超链接构成了整个网站。三、 基于Web的客户端与服务器端基于Web的客户端是指用户或浏览器端，即网站所在的Web服务器反馈给用户的网页信息。基于Web的服务器端是指网站文件所存放的Web服务器。四、 基于Web的人机交互基于Web的人机交互是指客户端的用户与Web服务器端的应用程序之间的人机对话，即当用户向Web服务器端的应用程序发出HTTP请求时，Web服务器端的应用程序对用户的请求产生响应并反馈给用户相应的结果页面。任务二 网站开发的技术层面及工具网站开发的技术层面是指网站开发过程中的开发模

8、块。网站的整体CIS设计、 内容 网站主要页面的版式设计界面设计网页中的文字、图像与多媒体等对象的设计 Adobe Web Publish：Photoshop、Illustrator、工具 Golive和LiveMotion Adobe Studio:Dreamveaver、Flash、Fireworks和FreeHand。客户端程序设计 服务器端程序设计 服务器端数据库开发 网站的测试：网站的发布、维护与更新任务三 网站的分类与精品网站赏析网站分类一般的原则是网站的相对规模与主体功能。综合门户类网站：在某个特定的行政区域内具有绝对的规模优势，同时具有相对稳定和庞大的服务受众群。如新浪网等。垂

9、直门户类网站：在某个行业中具有绝对的规模优势，同时其主体业务在本行业中处于绝对的领先地位，或者在某个特定的技术领域具有绝对的技术权威，并同时具有相对较大的规模。专业程度必须很高，或者说网站的服务内容相对比较单一。如当当网上书店。艺术类网站：网站提供的内容艺术氛围比较浓，同时网站的主体受众群一般均具有一定的艺术素养。如中国艺术家协会网站。个人网站：一些具有某项特长或为了充分展现自我的人群自主开发的网站，个性十分鲜明。情境三 Dreamweaver CS 3任务一 Dreamweaver CS 3初识一、运行Dreamweaver CS 3开始程序Adobe Dreamweaver CS 3二、熟

10、悉Dreamweaver CS 3工作区任务二Dreamweaver CS 3基本操作一、 创建本地站点本地站点是网站所有文件在本地计算机上的存放位置。文件面板管理站点新建站点二、 站点的导入、导出站点管理站点 导入 导出三、 创建网页站点管理窗口右击要创建网页的文件夹新建文档四、 设置页面属性修改页面属性五、 创建超级链接1、 文件链接：；链接到其他文档或文件。窗口属性链接2、 锚记链接：跳转至统一文件或不同文件内的特定位置。单击创建位置插入面板常用命名锚记选择创建锚记的文本或图像属性面板链接 3、 E-Mail链接：新建一个已填好收件人E-Mail地址的空白电子邮件。 插入面板常用电子邮件

11、链接4、 空链接：未指派的链接，用于向页面上的对象或文本附加行为。选择要链接的对象属性面板链接中输入#任务三 文本的输入与编辑一、 输入文本1、 直接输入文本2、 选择性粘贴二、使用CSS样式格式化文本CSS是一组格式设置规则，通过使用CSS样式设置页面的格式，可将页面的内容与表示形式分离开。页面内容存放在HTML文件中，而CSS规则存放在外部样式表中。1、 创建CSS样式选择文本CSS属性面板中右击新建2、 设置CSS属性双击CSS样式3、 应用CSS样式选择文本范围CSS样式面板中右击CSS样式 套用 附加样式表任务四 图像的插入与编辑一、 插入图像 “插入”面板“常用”“图像”按钮图像二

12、、设置图像属性使用“属性”面板三、编辑图像 使用“属性”面板1、优化图像2、裁剪图像3、重新取样4、调整图像的亮度和对比度5、锐化图像四、创建鼠标经过图像“插入”面板“常用”“图像”按钮鼠标经过图像 任务五 表格的制作与使用一、制作表格1、插入表格 “插入”面板“常用”“表格”按钮2、编辑表格 1、）选择表格 单击表格边框线 2、）调整表格大小 “属性”面板 鼠标拖动 3、）添加行或列 定位修改表格 插入行 插入列 4、）删除行或列 定位修改表格 删除行 删除列 选择行或列Delete 5、）拆分单元格 定位修改表格拆分单元格 “属性”面板拆分单元格 6、）合并单元格 选择单元格 修改表格合并

13、单元格 “属性”面板合并单元格 7、）剪切或复制单元格 选择单元格编辑 剪切 拷贝 8、）粘贴单元格 选定单元格编辑粘贴 9、）删除单元格内容 选定单元格编辑 清除 Delete3、 设置表格属性使用“属性”面板二、用表格布局页面1、熟练使用表格嵌套和单元格的拆分与合并2、表格边框必须设置为0。任务六 AP Div元素的使用AP元素，即绝对定位元素，是分配有绝对位置的任何HTML页面元素。一、AP Div元素的创建和使用1、插入AP Div元素 插入面板布局绘制AP Div元素2、插入嵌套AP Div元素 1、）绘制嵌套AP Div元素编辑首选参数AP元素选中嵌套复选框 2、）嵌套现有AP D

14、iv元素 窗口AP元素Ctrl+鼠标拖动 3、设置AP Div元素属性 属性面板 二、AP Div元素的基本操作1、选择AP Div元素 鼠标单击 AP元素面板2、更改AP Div元素的堆叠顺序 属性面板AP元素面板 3、显示和隐藏AP Div元素 属性面板AP元素面板4、 调整AP Div元素的大小鼠标拖动属性面板5、 移动AP Div元素鼠标拖动键盘光标键 三、AP Div元素与表格的相互转换 修改转换 将AP Div转换为表格 将表格转换为AP Div任务7 网页布局框架：框架不是文件，只是存放文件的容器，是将一个浏览器窗口划分为多个区域，每个区域都可以显示不同的HTML文件，它们的操作

15、是独立的。框架集：框架的集合，是HTML文件，定义一组框架的布局和属性。一、创建框架和框架集 查看可视化助理框架边框插入布局框架二、框架和框架集的基本操作1、 选择框架和框架集“文件”窗口：Shift+Alt+单击“框架”面板2、 调整框架大小鼠标拖动属性面板3、 删除框架 鼠标拖动4、 设置框架和框架集属性 属性面板5、 保存框架和框架集1）保存框架和框架集文件保存全部2）保存框架集文件 保存框架页 框架集另存为3）保存框架文件 保存框架 框架另存为任务8 使用Spry框架构件Spry框架是一个可用来构建更加丰富的网页的JavaScript和CSS库。Spry框架支持一组用标准HTML、CS

16、S和JavaScript编写的可重用构件。Spry框架中的每一个构件都与唯一的CSS和JavaScript文件相关联。一、使用Spry折叠式构件折叠式构件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。用户可通过单击该面板上的选项卡来隐藏或显示存储在折叠式构件中的内容。1、插入折叠式构件插入 布局 Spry折叠式 Spry2、编辑折叠式构件选定构件属性面板二、使用Spry菜单栏构件 菜单栏构件是一组颗导航的菜单按钮，当访问者将光标停在其中的某个按钮上时，将显示相应的子菜单。 1、插入菜单栏构件插入 布局 Spry菜单栏 Spry 2、编辑菜单栏构件选定构件属性面板三、使用Spry可折

17、叠面板构件 可折叠面板构件是一个面板，可将内容存储到紧凑的空间中。用户单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。 1、插入Spry可折叠面板构件 插入 布局 Spry可折叠面板 Spry 2、编辑Spry可折叠面板构件选定构件属性面板四、使用Spry选项卡式面板构件 选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。用户可通过单击要访问的面板上的选项卡来隐藏或显示存储在选项卡式面板中的内容。 1、插入选项卡式面板构件 插入 布局 Spry选项卡式面板 Spry 2、选定构件属性面板任务9 表单表单就是用户可以在网页中填写信息的表格。其作用是接收访问者的信息并将其提交给Web

18、服务器上特定的程序进行处理，从而实现与用户的交互。一、创建表单表单域是放置表单对象的区域，只有表单域内的表单对象，才可以将它的信息传送出去，才可以接受外来的信息。查看可视化助理不可见元素1、 插入表单插入表单表单2、设置表单属性属性面板二、添加表单对象 1、添加文本域 文本域：文本输入框，可以接受任何类型的字母或数字等文本。 插入表单文本字段 2、添加按钮 按钮：可将表单数据提交到服务器，或者重置表单。 插入表单按钮 3、添加复选框 复选框：允许浏览者从多个复选框中选择一项或多项。 插入表单复选框 4、添加单选按钮 单选按钮：由两个或多个共享同一名称的按钮组成的一组按钮，代表互相排斥的选择，只

19、允许用户从某单选按钮组中选择一个。 插入表单单选按钮 5、添加下拉列表或菜单 可在有限的空间里列出多个选项，列表可定义高度，并允许访问者选择一个或多个选项。 插入表单列表/菜单 6、添加文件域 文件域：允许用户把计算机上的某个文件作为表单数据上传给服务器，。 插入表单文件域 7、添加跳转菜单 跳转菜单：是一个下拉列表，一般用于当前站点的导航，单击其中的某个选项，可跳转到相应的网页或站点。 插入表单插入跳转菜单任务10 行为一、行为简介行为：为响应某一事件而采取的一个或多个动作，从而实现用户与网页的交互。行为由事件和该事件所触发的动作组成。事件是触发动作的原因，由用户或浏览器触发。动作是预先写好

20、的一段JavaScript代码，用于完成某一特定任务。二、行为面板窗口行为三、应用内置行为1、添加行为的方法：1、）选定一个对象（图像、文本、图层等），打开行为面板2、）点击“+”号添加一个行为，并选中一个事件2、删除行为：选中行为，点击“-”常见事件：OnClick:单击，当用户单击特定的页面元素时，触发该事件。OnMouseDown:鼠标按下，即鼠标按下时，触发该事件。OnMouseOut:鼠标移出，即鼠标移动到对象之外，触发该事件。OnMouseOver:鼠标划过，即鼠标移动到对象之上，触发该事件。OnLoad:当图像或页面被完全载入之后，触发该事件。1.拖动AP元素使用户在页面中拖动一

21、个AP Div元素，实现一定的效果。绘制AP Div打开行为面板添加行为拖动AP 元素。2跳转菜单编辑跳转菜单：在行为面板里双击一个跳转菜单动作在属性面板里选择“菜单”进行编辑3打开浏览器窗口添加“打开浏览器窗口”动作选择onLoad事件4弹出消息（只能向用户提供信息而不能使用户做出选择）选中对象添加行为弹出消息输入消息选中onClick事件保存5显示/隐藏与元素插入图片插入AP Div设置元素背景色并在AP Div中插入内容将AP Div设为不可见选中图片打开行为面板添加行为显示选择onMouseOver事件添加行为隐藏选择onMouseOut事件四、创建滚动字幕 要创建滚动字幕的效果，可通

22、过编辑表前来进行。（该标签的作用就是使页面元素产生滚动）选中文本Ctrl+Tmarquee编辑marquee标签：窗口标签检查器height:设字幕高度behavior:制作文字左右移动的运动效果 任务十一 制作多媒体网页一、创建时间轴动画1、时间轴：也称为时间线，用于按时间排列画面，表示网页元素在不同时间的不同状态。 时间轴的基本原理：将静态的画面连续播放，利用人眼的视觉残留效应，产生运动的错觉。在Dreamweaver中，制作的动画一般有两种效果，一种是位置移动的动画效果，另一种是根据时间变化显示不同图片的动画效果。在时间轴上显示的每一个小矩形称为一帧，整个时间轴就是有许多的帧构成的，这些

23、帧在页面中的连续播放构成了时间轴动画。 时间轴面板：显示AP Div和图像随时间变化的属性。 关键帧-动画条中一种被定义了对象属性的帧，用小圆标记表示。 动画条：显示每个动画的持续时间。 播放磁头：位于帧数行上的红色长方块，在文档窗口显示播放磁头所在帧内容。在时间轴上拖动播放磁头，可以在文档窗口看到相应时间上动画播放的状态。 帧编号：只是帧的序号。 帧频：动画播放的平均速度，默认15，是最佳速度。 动画通道：显示用于制作动画的通道，共33个。窗口时间轴2、编辑帧右击动画条 增加关键帧 移除关键帧添加帧移除帧3、直线移动动画的制作 时间轴是通过改变AP Div的位置、大小、可视性以及叠放次序来创

24、建动画的。如果用户要创建一个移动文本或图片的动画时，必须先把对象加入到AP Div中，然后再通过时间轴制作动画的效果。绘制AP Div选定AP Div右击时间轴添加对象 选定右边的关键帧拖动层直接选中AP Div并拖动到时间轴面板 至新的位置保存网页播放 实例1：将一幅图片从网页的一边移到另一边 注：1、用户只能向时间轴中添加AP Div和图像，若需要在时间轴中移动或隐藏其他对象，需将其添加到AP Div中。2、默认情况下，新建动画的长度为15帧，播放速率为15帧/秒3、改变动画的播放时间和速度，可拖动最后一关键帧和输入速度。 实例2：编辑动画路径曲线动画（生成较复杂的动画）通过添加关键帧来实

25、现 实例3：替换图片右击改变对象 实例4：创建图像动画要点：添加关键帧，并调整层的可见性插入图片将图片添加到时间轴插入关键帧属性面板源文件选择即可 实例5：改变图层的大小 步骤：1、将AP Div拖到时间轴面板中2、单击第一个关键帧，将光标移到AP Div的控制点上，控制AP Div原始尺寸3、在动画条的某一帧插入一个关键帧，打开属性面板4、单击新插入的关键帧，在属性面板中分别设置宽度（W）和高度（H）5、按F12预览4、创建自由路径的动画插入AP Div插入图片右击时间轴记录AP元素的路径拖动AP Div创建路径选中自动播放和循环5、复杂动画的编辑1）两个动画同时播放鼠标左键拖动动画条到不同

26、的时间轴上左对齐。2.）两个动画非同时播放鼠标左键拖动动画条，也可在同一时间轴上3.)改变动画的播放时间鼠标左键拖动动画条即可二、插入Flash对象1、 插入Flash动画插入面板常用媒体Flash(.swf文件)2、 添加Flash按钮 插入面板常用媒体Flash按钮3、 插入Flash文本 插入面板常用媒体Flash文本三、插入音频1、链接到音频文件选定文本属性面板中链接2、 为网页添加背景音乐切换到代码视图在之间输入“bgsound”后按空格。src：设置音乐文件的路径。Loop：对播放音乐的循环次数进行控制。Loop=”-1”表示无限循环播放。四、插入视频插入面板常用媒体Flash视频

27、五、插入其他媒体对象插入面板常用媒体其它任务十二 模板和库一、模板1、模板简介模板：一种用来产生带有固定特征和共同格式的基础文件。可编辑区域：允许用户修改的区域。锁定区域：禁止用户修改的区域，包含了在所有页面中的共同内容。2、创建模板1、）新建模板窗口资源模板“新建模板”按钮文件新建空白页HTML模板2、）定义基本页面3、）定义可编辑区 插入记录模板对象可编辑区域4、）可编辑区域改为锁定区域 选定区域修改模板删除模板标记5、）保存模板文件另存为模板3、 将现有文件设置为模板插入记录模板对象可编辑区域4、 应用模板1、）应用模板创建文件文件新建模板中的页创建 2、）对已有页面应用模板 模板面板选

28、择模板应用 3、）更新模板 模板修改后保存会出现“更新模板文件”对话框 4、）更新整个站点（未及时更新站点中使用了该模板的页面） 修改模板更新页面 5、）将文件与模板分离 修改模板从模板中分离二、库 1、创建库项目 库项目：在网页中可重复使用的部分。 窗口资源新建库项目按钮新建库项目编辑 直接拖入库 选定元素窗口资源新建库项目按钮新建库项目 2、重命名库项目 两次单击库项目名称3修改库项目属性面板打开双击库面板中的库项目4、分离库项目单击“属性”面板“从源文件中分离”按钮5、插入库项目 拖动库项目到文件窗口 选定库项目“插入”按钮6、 更新库项目修改库更新页面任务十三 向服务器上传主页一、申请空间 在IE浏览器地址栏输入免费空间注册登录。二、发布站点文件面板管理站点编辑远程信息选择要发布的站点“上传文件”按钮情境四 Flash任务一 Flash CS4初识一、Flash的应用领域介绍Flash是目前交互式矢量图和Web动画的标准。Flash是一个以矢量对象为主要动画元素，并结合位图对象、音频对象、视频对象和Flash ActionScript脚本进行Flash动画创作的专业化程度极高的应用软件。Flash动画特点：文件体积小，放大后永不失真，交互性强，便于控制等。Flash CS4大致应用领域：网站动画、片头动