网设计与制作案例教程-电子教案2.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,Page,*,点击此处结束放映,第2章 网页制作基础,第1章我们观赏了多个赏心悦目标网站，重点分析了这些网站首页结构布局、颜色搭配、视觉效果等。观赏完这些网页后，你是否对制作网页产生了兴趣，一定想知道这些网页是怎样设计、制作。,课程引导,1/53,别着急，首先让我们学习网页制作基础知识，了解网页相关概念和术语、分析网页中主要组成元素，认识一些制作网页、处理图像、制作动画专业工具。,重点熟悉Dreamweaver 8开启与退出、界面布局和工作环境。,2/53,知识技能目标,（1）了解网页相关概念和术语，认识网页中主要组成元素；,（2）了解一些制作网页、处理图像、制作动画专业工具；,（3）熟悉Dreamweaver 8开启与退出；,（4）熟悉Dreamweaver 8界面布局和工作环境。,3/53,2.1,网站和网页基础知识,2.2,网页基本组成元素,2.3,制作网页工具概述,2.4,初识Dreamweaver 8汉字版,4/53,2.1 网站和网页基础知识,在Internet中经常会碰到一些专用英文单词缩写，掌握这些术语对浏览和制作网页有很大帮助。,5/53,1WWW,WWW是“World Wide Web”首字母缩写，也称为万维网。万维网是因特网主要部分，万维网是基于超文本结构体系。,从技术上讲，WWW包含三个基本组成部分：URL（统一资源定位器）、HTTP（超文本传输协议）、HTML（超文本标识语言）。,6/53,2URL,URL是“Uniform Resource Locator”缩写，通常翻译为”统一资源定位器“，它是一个指定Internet上资源位置标准，也就是人们常说网址。,7/53,3Server与Browser,Server即服务器，Browser即浏览器。用户必须经过浏览器连接到Web服务器上，才能阅读Web服务器上文件。,8/53,4网页,万维网中文档又称为网页，网页中能够包含文本、图像、动画、音频、视频等信息。网页按其表现形式能够分为静态网页和动态网页。,9/53,5网站,网站是网页集合。经过超级链接将网站中多个网页建立联络，形成一个主题鲜明、格调一致站点。通常，网站都有一个主页，包含网站Logo和导航栏等内容。,10/53,6Hypertext,Hypertext（超文本）是一个能够指向其它文件文字或图片，这种功效称为超级链接（HyperLink）。,11/53,7HTTP,Hypertext（超文本）是一个能够指向其它文件文字或图片，这种功效称为超级链接（HyperLink）。,12/53,8HTML,HTML是“HyperText Markup Language”缩写，意为超文本标识语言，是Internet中编写网页主要标识语言。,13/53,9CSS,CSS是“Cascading Style Sheet”缩写，意为层叠样式表，用于对网页布局、字体、颜色、背景和其它图文效果实现愈加准确控制。,14/53,10JavaScript,JavaScript是一个脚本语言，能够和HTML语言混合在一起使用，用来实现在一个Web页面中与用户交互作用。相关JavaScript详细内容将在第13章讲解。,15/53,网页由文本、图像、动画、超链接等基本元素组成，本节我们对这些基本元素有一个初步了解，为后面各章中利用这些元素制作网页奠定基础。,2.2网页基本组成元素,16/53,1文本,普通网页中最多内容是文本，能够依据需要对其字体、大小、颜色、底纹、边框等属性进行设置,17/53,2图像,丰富多彩图像是美化网页必不可少元素，用于网页上图像普通为jpg格式和gif格式，即以jpg和gif为扩展名图像文件。,18/53,3超链接,超链接是Web网页主要特色，是指从一个网页指向另一个目标端链接。,4导航栏,导航栏是一组超链接，用来方便地浏览站点。导航栏普通由多个按钮或者多个文本超链接组成。,19/53,5动画,动画是网页中最活跃元素，创意出众、制作精巧动画是吸引浏览者眼球有效方法之一。,20/53,6表格,表格是HTML语言中一个元素，主要用于网页内容布局，组织整个网页外观，经过表格能够准确地控制各网页元素在网页中位置。,21/53,7框架,框架是网页一个组织形式，将相互关联多个网页内容组织在一个浏览器窗口中显示。,22/53,8表单,表单是用来搜集访问者信息或实现一些交互作用网页，访问者填写表单方式是输入文本、单击单项选择按钮或复选框、从下拉菜单中选择选项等。,23/53,制作网页专业工具功效越来越完善、操作越来越简单，处理图像、制作动画、公布网站专业软件应用也非常广泛。,2.3制作网页工具概述,24/53,惯用制作网页工具以下：,（1）制作网页专门工具：Dreamweaver、FrontPage。,（2）图像处理工具：Photoshop、Fireworks。,（3）动画制作工具：Flash、Swish。,25/53,（4）图标制作工具：小榕图标编辑器、超级图标。,（5）抓图工具：HyperSnap、HyperCam、CamtasiaStudio。,（6）网站公布工具：CuteFTP。,26/53,（1）直观工作区,（2）完善模板和库,（3）快捷编码功效,2.4初识Dreamweaver 8汉字版,2.4.1Dreamweaver 8介绍,1Dreamweaver 8特点,27/53,（4）有效网站管理,（5）可扩展性好,（6）支持各种服务器端开发语言,（7）与Flash 8和Fireworks 8良好集成,28/53,2Dreamweaver8开启与退出,（1）开启Dreamweaver8,单击【开始】按钮指向【程序】菜单指向【Macromedia】菜单单击【Macromedia Dreamweaver 8】即可开启。,29/53,（2）退出Dreamweaver 8,单击Dreamweaver 8窗口右上方关闭按钮；,按下“Alt+F4”组合键；,单击菜单【文件】【退出】。,30/53,Dreamweaver 8工作界面主要包含：菜单栏、工具栏、文档窗口、属性面板、面板组等。,2.4.2Dreamweaver 8工作环境,31/53,1菜单栏,Dreamweaver 8菜单栏包含10类菜单：文件、编辑、查看、插入、修改、文本、命令、站点、窗口、帮助。,32/53,2工具栏,Dreamweaver 8工具栏主要分为插入工具栏、标准工具栏、文档工具栏、样式展现工具栏。,33/53,（1）插入工具栏,插入工具栏包含用于将各种类型“对象”（比如图像、声音、动画、表格、框架、层、表单等）插入到文档中按钮。,34/53,显示插入工具栏方法：选择菜单【窗口】【插入】选项，文档窗口上方将显示出插入工具栏。通常情况下会显示“惯用”工具栏。,切换不一样类型插入工具栏方法：单击插入工具栏上“向下箭头”按钮，选择不一样种类对象，各种类型对象对应按钮将会显示在工具栏上。,35/53,（2）标准工具栏,标准工具栏包含网页文档基本操作工具，比如新建、打开、保留、剪切、复制、粘贴等按钮。,36/53,（3）文档工具栏,文档工具栏包含用于选择所需开发环境“代码”、“拆分”、“设计”按钮和多个弹出式菜单，它们提供各种“文档”视图、各种查看选项和一些惯用操作。,37/53,（4）样式展现工具栏,使用样式展现工具栏能够切换到“设计”视图，以查看在打印媒体类型、手持型媒体类型、投影媒体类型上显示效果。,38/53,3文档窗口,文档窗口也称为文档编辑区。文档窗口中所显示内容能够是代码、网页，或者二者共同体。,39/53,4属性面板,属性面板用于查看和更改所选取对象或文本各种属性，每个对象有不一样属性。,40/53,5面板组,Dreamweaver 8包含多个面板，这些面板都有不一样功效，将它们叠加在一起便形成了面板组。面板组主要包含“CSS”面板、“应用程序”面板、“标签检验器”面板、“文件”面板、“框架”面板、“历史统计”面板。,41/53,各个面板能够打开或关闭，日常没有用到时能够关闭，要使用时再显示出来，这么可能充分利用有限屏幕空间。,显示面板方法：单击选择【窗口】菜单对应菜单项即可。要单独关闭某一个面板，在对应面板标题位置单击右键，打开快捷菜单，然后单击【关闭面板组】即可。,42/53,Dreamweaver 8提供了操作方便、功效完备帮助系统，对Dreamweaver 8使用方法提供了详细说明。,2.4.3Dreamweaver 8帮助系统,43/53,1打开帮助,在Dreamweaver 8主窗口中，单击菜单【帮助】，会弹出下拉菜单，该菜单列出了各种打开帮助系统方法。,44/53,2提供帮助方式,Dreamweaver 8主要提供了三种获取所需信息路径：目录、索引和搜索，最快捷方法是按快捷键F1。,45/53,3帮助系统目录列表,切换到“目录”选项卡，依次单击【Dreamweaver入门】【Dreamweaver基础】【了解Dreamweave 8 工作区】【工作区布局】，在右边窗格中便会显示相关“工作区布局”详细说明。,46/53,4使用索引查找所需信息,使用Dreamweaver 8帮助系统索引能够快速找到所需信息。比如查找相关“不换行空格”相关内容，操作方法以下：,（,1,）打开,Dreamweaver 8,帮助系统窗口。,47/53,（2）单击“索引”标题，切换到“索引”选项卡。,（3）在文本框中输入“HTML”。下方列表框中自动显示与“HTML”相关内容标题，比如“不换行空格”、“设置格式和插入”等。,（4）在下方列表框中双击“不换行空格”，右侧便会显示详细内容。,48/53,5搜索帮助信息,Dreamweaver8帮助系统能够对Dreamweaver帮助执行全文搜索。比如查找相关“CSS”内容，操作方法以下：,（1）打开Dreamweaver 8帮助系统窗口。,49/53,（2）单击“搜索”标题，切换到“搜索”选项卡。,（3）在文本框中输入要查找单词：CSS，然后单击【列出主题】按钮，在下方列表框中便会列出相关内容标题。,（4）双击结果列表中一个主题，比如双击“使用CSS样式面板”主题，右侧列表框中便会显示该主题相关内容，而且所搜索单词会呈选中状态。,50/53,课堂实践,（1）开启Dreamweaver 8，认识Dreamweaver 8工作环境。,（2）在Dreamweaver 8主窗口中观察其各个菜单、工具栏、面板组成。,（3）利用Dreamweaver 8帮助，查找相关“JavaScript”内容，请分别利用“目录”、“索引”、“搜索”三种路径完成。,51/53,课外拓展实践,（1）熟悉Dreamweaver 8工作环境。,（2）熟练使用Dreamweaver 8帮助系统。,52/53,本章小结,本章主要介绍了相关网站和网页基础知识，网页基本组成元素、Dreamweaver 8开启与退出、工作环境、帮助系统使用。认识和掌握制作网页基础知识，为后面设计和制作网页提供理论支持。,53/53,