计算机应用（张银）1.ppt

2013年7月,计算机应用,关于课程,关于计算机关于计算机应用课程设计资源获取,发展,功能,关于课程,关于计算机关于计算机应用课程设计资源获取,发展,功能,与人,时代,关于课程,关于计算机关于计算机应用课程设计资源获取,发展,功能,与人,时代,危机,？,+,=,它可以告诉我们事实，但却不能提醒我们；它可以精确地引导我们，却不能引导我们到想去的地方。,当今的技术话题,？,+,=,飞机、闹钟、相机，有着越来越好的性能，但它们的行为更象电脑。,当今的技术话题,关于课程,关于计算机关于计算机应用课程设计资源获取,发展,功能,与人,时代,危机,请你来参与,网页设计与制作,知彼知己,知彼：精美的网页（网站）知己：你要做什么？准备好了吗？,网页制作流程,站点策划构思草图美工设计图形制作脚本编程图形页面整合测试发布网站的日常维护、更新,问题：存储在哪里？如何获取？,因特网（Internet）：是一个建立在计算机网络之上的网络，它是各种信息服务的基础设施环境，目前在因特网上提供的各类信息服务多达几百种，最为大众熟知的信息服务有：电子邮件、新闻组、远程登录、文件传输以及90年代后兴起的以超媒体方式组织多媒体信息的万维网（WWW）信息服务。,WWW服务器：万维网信息服务是采用客户机/服务器模式进行的，这是因特网上很多网络服务所采用的工作模式。在进行Web网页浏览时，作为客户机的本地机首先与远程的一台WWW服务器建立连接，并向该服务器发出申请，请求发送过来一个网页文件。,浏览器（Browser）：实际应用中，我们是通过一个个具体的应用软件与因特网打交道。每一个应用软件的使用代表着我们要获取因特网提供的某种网络服务。例如，通过WWW浏览器可以访问因特网上的WWW服务器，获取图文并茂的主页信息。所以浏览器是一类安装在客户机上，用于阅读WWW页面文件的应用程序，其中NetscapeCommunicator和InternetExplorer是两个最流行的浏览器产品。,Web服务器,如何建立连接？,URL(UniformResourceLocator)统一资源定位器,解决三个问题：页面文件叫什么？页面在哪里？如何访问页面？,:80/docs/index.htm,当人们通过URL发出请求时，浏览器在域名服务器的帮助下，获取该远程服务器主机的IP地址后，浏览器建立了一条到该主机的连接。在此次连接上，远程服务器使用指定的协议发送文件名，最后，指定的页面信息出现在本地机浏览器窗口中。,Dreamweaver,网页（Webpage）通过浏览器软件打开，供访问者浏览的文件。网站中首先被浏览器识别出来的网页文件也称为主页，通常被命名为Index、Default或Main。（举例）网站（Website）由若干个网页及相关文件集合而成。这些网页及文件集成在一个站点文件夹中。,网站与网页,问题：如何制作？网页制作软件,关于文件：文件格式：*.htm关于工具：MicromediaDreamweaver优势：良好的兼容性、扩充性难点：界面较复杂,*.asp*.php*.jsp,语言：HTML（HyperTextMarkLanguage）超文本标记语言,DreamweaverMX的界面组成,标题栏,表示为：文件标题（文件名称*）文件标题的修改：“修改”“页面属性”或“工具栏”中的“标题”,工具栏,代码视图,代码和设计视图,设计视图,标题,状态栏,标签选择器,窗口大小弹出菜单（模拟）,下载时间显示栏,面板介绍,“插入”面板“属性”面板“文件”面板组“设计”面板组“其他”子菜单“结果”子菜单,网站的管理,站点的创建站点的编辑站点面板站点面板的使用站内地图（举例）,面板标题栏的快捷菜单面板内的快捷菜单,网页的管理,创建站点面板、菜单保存站内保存（命名规则）打开文件菜单、站点面板、双击、拖拽编辑“修改”“页面属性”,网页布局排版表格（例）,常规表格布局表格,缺陷：当网页中表格嵌套过多时，会影响网页的下载速度，所以表格嵌套不宜超过三层。,网页布局排版表格,常规表格创建并编辑表格（常用/布局表格）表格属性设置,设置优先级：单元格的设置优先于行、列的设置，行或列的设置优先于表格的设置。,可视化设置属性面板设置,网页布局排版表格,示例一制作细线表格示例二格式化表格（“命令”“格式化表格”）示例三导入表格式数据示例四立体化表格,普通表格：边框颜色：黑色，边框：1背景颜色：黑色，边框：0，间距：1，单元格背景颜色：白色,边框：1，边框颜色：白色，亮边颜色：黑色，背景颜色：橘色，填充：0，间距：0间距：2，边框：1，背景颜色：橘色边框：1，边框颜色：白色，亮边颜色：黑色，背景颜色：橘色,用表格制作跨幅细线：用表格制作垂直细线,常规表格的实际应用,网页布局排版表格,布局表格特点：网页元素准确定位、提高网页下载速度视图：标准视图、布局视图（差异，布局面板、切换：查看/面板）布局表格的创建、嵌套表格（单元格中不能嵌套表格）布局视图参数预设置（编辑参数选择）布局表格的编辑选择表格顶部、选项卡、鼠标单击移动鼠标拖动、方向键（Shift）、属性设置属性面板/下拉菜单,网页布局排版表格,标准视图中的表格属性设置布局单元格单元格的创建单元格的编辑选择Ctrl移动属性设置,布局表格的实际应用,实际操作中如何进行布局表格的设计呢？,将页面划分成多个上下并列的布局表格，然后再根据需要在这些表格中，进行不多于三层的表格嵌套。（例）,若希望在不同分辨率的显示窗口中显示统一效果该如何操作？（例）,自动伸展,问题：由于显示器尺寸、浏览器窗口大小不同而导致布局表格宽度与实际窗口宽度不匹配。,网页编辑文字,文字换行（Shift+Enter）空格（Ctrl+Shift+Space面板）连续空格特殊符号“插入”面板菜单中文软键盘日期“插入”面板菜单分隔线“插入”面板菜单文字的查找和替换“编辑”查找和替换文本列表的创建插入面板“文本”菜单属性面板（list.htm）文本的编辑属性面板,项目列表、编号列表、定义列表、嵌套列表,网页编辑图像,网页编辑图像,插入图像插入面板菜单拖动插入“鼠标经过图像”插入菜单面板(onMouseover.htm)插入导航条插入面板菜单（示例）图片的编辑属性面板,网页编辑图像减肥,确定图像的格式什么时候用什么格式的图像？压缩比的问题？图像尺寸问题与背景融为一体切割问题使用预览图像,网页布局排版框架,框架和框架集优势：在同一个窗口同时显示多个HTML文档。框架：浏览器窗口中的一个区域，显示内容为与窗口其余部分独立的HTML文档内容。框架集：一个HTML文件，它定义了一组框架的布局和属性。,网页布局排版框架,框架及框架集的创建创建空的预设框架集创建在指定框架中显示当前文档的框架集（插入面板/菜单）框架及框架集的保存在指定框架中打开网页框架及框架集的修改选定（框架面板、Alt）调整大小拆分框架（可视化、“修改”）删除框架框架及框架集属性,显示边框：查看可视化助理框架边框,网页布局排版框架,框架及框架集的属性创建无框架内容（“修改”“框架集”）链接（例）框架的不足,假设某站点结构示意图如下：如果：1、要从index.htm链接到calendar.htm（同一文件夹中文件的链接）2、要将图片文件money.gif链接到index.htm上（与子文件夹的链接）3、要在文件myindex.htm中建立到index.htm的链接（与父文件夹间的链接）4、要建立myindex.htm到logo.jpg的链接（子文件夹之间的链接）应怎样描述相应的URL地址试分别写出根目录相对路径形式和文档相对路径形式。,实际问题,HTML语言,HTML（HyperMarkLanguage）超文本标记语言作用：描述网页内容在浏览器中的表示方式，标识本身并不显示。形成的文件格式：*.html(Windows系统下为*.htm)基本语法：所有内容均需放入尖括号“”中,如：,成对出现单个出现,HTML语言常用标识介绍,位于文件的开始与结束部分网页头部信息标识符网页标题标识符网页主体标识符说明信息标识符,网页效果制作样式,编辑及应用样式设计面板新建、编辑、删除、应用CSS（层叠样式表单）内部样式应用于当前正在编辑的文档的样式外部样式以文件形式保存（*.css），可用于多个文档创建内部样式（示例：brline.htm）重定义HTML标签创建动态链接样式(示例：link.htm)导出为外部样式导入外部样式代码的变化,网页效果制作样式,滤镜语法：标记filter:滤镜名（属性名1=属性值1，属性名1=属性值1，）;例：pfilter:alpha(Opacity=100,FinishOpacity=0,Style=2);示例：Alphafilter.htm,网页编辑超链接（示例）,创建链接的方式站点地图创建站点外部链接绝对路径创建站点内部链接相对路径与应用程序、与邮件管理程序、热点（示例）创建空链接测试用创建文件内链接锚点（anchor.htm）(站内链接、删除锚点)链接目标blank、parent、self、top,绝对路径例：相对路径：以当前文件所在位置为起点描述到被链接文档的路径“省略相同，保留不同”文档相对路径站点相对路径,有关路径,站点,Image/Logo1.gif,/Image/Logo1.gif,特点：生成动态效果，无须编译基本语法：与HTML的关系：嵌入HTML的代码中或,代码,JavaScript语言（示例）,作用：模块化功能语句格式：Function(函数名)（参数,变元）函数体Return表达式示例JS.htm,用Return将值返回函数名大小写敏感,JavaScript语言函数,JavaScript是一种基于对象的语言，它内置对于一些对象的属性、方法的支持，使用户不需要编写脚本来实现这些功能。什么是对象？对象的层次关系对象的属性和方法（例：JS.htm）对象和方法的引用（例：JS.htm）事件和事件处理程序（或动作）由用户（多数情况下）动作引发的，作用于对象的操作。如Click、onMouseover、onLoad等事件特点：有操作源、编写简单（无需写代码入JS）示例onMouseover.htm,JavaScript语言对象事件动作,网页效果制作行为,行为：在网页中进行的一系列动作，并通过这些动作实现用户与页面的交互。事件+动作事件：某个针对于网页的具体操作，如OnClick、OnLoad动作：接受到事件的网页应当执行的响应功能（完成特殊任务的预先编好的JavaScript代码）Dreamweaver的十个内置基本行为有关行为的操作行为面板（先选对象，后确定行为）添加行为、编辑行为示例behavior1.htm、behavior2.htm,网页动画及交互性网页图层,示例图层：象是含有文字或图形等元素的的胶片，一张张按顺序叠放在一起，组合起来形成页面的最终效果。代码标识：或图层基本操作(图层面板、属性面板)创建图层Ctrl(绘制多个图层或嵌套图层)图层属性属性面板选定图层Shift(图层面板中选定多个图层)编辑图层“修改”“排列顺序”示例：draglayer.htmhide.htm与框架相比较,网页动画及交互性网页时间线,示例时间轴（TimeLine）时间轴+图层时间轴面板(Alt+F9):行为轨道、动画通道、播放指针录制时间线time.htm修改时间线改变播放速度、改变开始时间、改变整个动画路径的位置、改变轨迹示例：face.htmscroll.htm(Ctrl嵌套)fruit.htm,插件,插件管理器ExtensionsManager插件实例渐隐图片“命令”-“FlashImage”,多媒体对象,实例Flash、ActiveX、JavaApplet,网页动画及交互性网页表单,作用：实现页面间的交互示例：events.htm/form.htm/检验表单原理：,浏览器,Web服务器,示例介绍：form.htm/events.htm,模板和库,模板作用：统一站点风格，提高工作效率创建模板由文档保存为模板或创建空模板定义可编辑区插入-模板对象-可编辑区域应用模板基于模板建立网页对现存模板应用网页修改-模板库作用：元素的重复使用，提高利用率库项目：一段代码，包含元素的相关信息可以实现对整个站点中相关信息的更新创建库项目，应用库项目，更改库项目库项目中不包含时间线和样式表单,获取的技巧让浏览器更好地工作,输入网址（URL）浏览具体的页面信息,中断当前的浏览操作,刷新当前页面信息,在已经浏览过的网址之间跳转,Internetexplorer,如何辨别网页当前下载状态,保存当前页面信息,“网页，全部”：保存页面的HTML文件和页面中的图像文件、背景文件以及其他嵌入页面的内容，其他文件会被保存在一个和HTML文件同名的子文件夹中。“网页，仅HTML”：只保存页面的文字内容，存为一个扩展名为html的文件。“文本文件”：将页面中的文字内容保存为一个文本文件。,保存页面中的图像或动画,矢量图，简单说来，就是通过数学计算画图。位图