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