网页设计与制作项目教程项目1-网页制作基础知识课件.ppt

1、项目1 网页制作基础知识 了解Web标准 Deramweaver工具的使用 认识网页 HTML、CSS和JS语言简介 HTML学习目标了解Web标准及基本概念。1了解熟悉掌握掌握2熟悉HTML、CSS及JavaScript语言的发展历史。3掌握Dreamweaver工具的基本操作。能够使用Dreamweaver创建简单的网页。4 目录网页制作入门点击查看本小节知识架构Dreamweaver工具的使用点击查看本小节知识架构【任务任务1-11-1】了解Web基本概念点击查看本小节知识架构【任务任务1-21-2】【任务任务1-31-3】知识架构【任务1-1】了解Web基本概念1认识网页2网页相关名词

2、3Web标准 【任务1-2】网页制作入门HTML简介CSS简介JavaScript简介常见浏览器介绍1234 知识架构 【任务1-3】Dreamweaver工具的使用Dreamweaver界面介绍创建第一个网页123Dreamweaver初始化设置 知识架构 【任务1-1】了解Web基本概念Web中文译为“网页”，说到网页，其实大家并不陌生，上网时浏览新闻、查询信息、翻看图片等都是在浏览网页。下面，将针对与Web相关的概念进行详细讲解。什么是网页？【任务1-1】了解Web基本概念认识网页1.网页究竟是什么？网页究竟是什么？说到网页，其实大家并不陌生浏览新闻浏览新闻查询信息查询信息网上购物网上购

3、物认识网页1.【任务1-1】了解Web基本概念以传智播客官网为例，分析网页认识网页1.超链接超链接文字文字 图片图片 【任务1-1】了解Web基本概念网页网页就是网站中网站中用于承载信息承载信息的页面，主要由文字、图像和超链接文字、图像和超链接等元素构成，除了这些元素，网页中还可以包含音频、视频音频、视频以及flash等。认识网页1.【任务1-1】了解Web基本概念网页是如何形成的？认识网页1.【任务1-1】了解Web基本概念特殊的符号和文本特殊的符号和文本浏览器渲染浏览器渲染认识网页1.【任务1-1】了解Web基本概念图文并茂的页面图文并茂的页面通过超链接通过超链接多个页面集合在一起多个页面

4、集合在一起认识网页1.【任务1-1】了解Web基本概念名词名词名词释义名词释义Internet网络网络就是通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。WWWWWW（英文World Wide Web的缩写）中文译为“万维网”是Intertnet提供的一种网页浏览服务。URLURL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符”URL其实就是Web地址，俗称“网址”。DNSDNS（英文Domain Name System的缩写）是域名解析系统。HTTPHTTP(英文Hypertext transfer protocol的缩写)中文译

5、为超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。WebWeb通常指互联网的使用环境。但对于网站制作者来说，它是一系列技术的复合总称，通常称之为网页。W3C组织组织W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织。网页相关名词2.【任务1-1】了解Web基本概念什么是Web标准？【任务1-1】了解Web基本概念Web标准3.Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。包含我们所熟悉的HTML、XHTML、CSS、JavaScript等等。【任务1-1】了解W

6、eb基本概念Web标准3.制定Web标准的目的由于不同的浏览器解析出来的效果可能不一致，开发者常常需要为多版本的开发而艰苦工作。通过通过Web标准标准展示统一内容展示统一内容 【任务1-1】了解Web基本概念Web标准的优点？【任务1-1】了解Web基本概念Web标准3.Web标准的优点使网站更使网站更易于维护易于维护降低网站降低网站流量费用流量费用更容易被更容易被搜寻引擎搜寻引擎搜索搜索内容能被内容能被更广泛的更广泛的设备访问设备访问让让WebWeb的的发展前景发展前景更广阔更广阔提高页面提高页面浏览速度浏览速度 【任务1-1】了解Web基本概念Web标准的构成结构标准表现标准行为标准结构结

7、构标准标准用于对网页元素进行整理和分类，主要包括两个部分：XML和XHTML。表现表现标准标准用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。行为行为标准标准是指网页模型的定义及交互的编写，主要包括两个部分：DOM和ECMAScript。【任务1-1】了解Web基本概念Web标准的构成结构标准表现标准行为标准如果把Web标准看做一栋房子，结构标准结构标准就相当于房子房子的框架。的框架。【任务1-1】了解Web基本概念Web标准的构成结构标准表现标准行为标准表现标准表现标准就相当于房子的装房子的装修修，让房子看起来更美观。【任务1-1】了解Web基本概念Web标准的构成结构标准表

8、现标准行为标准行为标准行为标准相当于房间内部的房间内部的设备设备，让房子具有功能性。KTV有唱有唱歌功能歌功能厨房有做厨房有做饭功能饭功能 【任务1-1】了解Web基本概念结合生活中事例，说说你对结构、表现、行为的理解？人的骨骼就相当于结构，衣服鞋子就相当于表现，行走、奔跑、跳跃就是行为。l 结构结构：使内容更：使内容更清晰，更清晰，更有逻辑性有逻辑性l 表现表现：用于修饰内容的样：用于修饰内容的样式式l 行为行为：内容的交互及操作：内容的交互及操作效果效果 【任务1-1】了解Web基本概念 【任务1-2】网页制作入门HTML、CSS和JavaScript是网页制作的基本应用技术，也是本书学习

9、的重点，要想学好这些技术，首先需要对它们有一个整体的认识。下面，将针对HTML、CSS和JavaScript语言的发展历史、流行版本、开发工具、运行平台等内容进行详细讲解。什么是HTML？HTML简介1.【任务1-2】网页制作入门HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标记语言超文本标记语言”，主要是通过HTML标记标记对网页中的文本、图文本、图片、声音片、声音等内容进行描述。HTML简介1.【任务1-2】网页制作入门以传智播客官网的一段源代码为例文本超链接文本超链接图片标记图片标记用列表制作用列表制作的带有超链的带有超链接功能的导接功能的导航

10、航 【任务1-2】网页制作入门HTML的发展史HTML2.01995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布过时。超文本标记语超文本标记语言（第一版）言（第一版）在1993年6月作为互联网工程工作小组（IETF）工作草案发布。HTML3.21997年1月14日，W3C推荐标准。HTML4.01997年12月18日，W3C推荐标准。HTML4.011999年12月24日，W3C推荐标准。HTML 52008年1月22日公布第一份正式草案，2014年10月底定稿。由于各个浏览器支持的不是很统一，所以还没有得到广泛应用。【总结总结】HTML语言发展至今，经历

11、了六个版本，这个过程中新增了许多HTML标记，同时也淘汰了一些标记。【任务1-2】网页制作入门过渡阶段-XHTMLXHTML是更严谨纯净的HTML版本，目的是为了实现HTML向XML的过渡。HTML在语法上很宽松，但对于其他的设备，兼容的难度就比较大，不符合标准的发展趋势。XML虽然数据转换能力强大，但是面对互联网上成千上万基于HTML编写的网站，直接采用XML还为时过早。XHTML过渡过渡 【任务1-2】网页制作入门什么是CSS？CSS简介2.【任务1-2】网页制作入门CSS通常称为CSS样式样式或样式表样式表，主要用于设置HTML页面中的文本内容文本内容（字体、大小、对齐方式等）、图片的外

12、形图片的外形（宽高、边框样式、边距等）以及版面的布局版面的布局等外观显示样式。CSS简介2.【任务1-2】网页制作入门认识认识CSS属性属性CSS提供了丰富的样式font:属性值属性值;字体属性字体属性color:属性值属性值;颜色属性颜色属性float:属性值属性值;浮动属性浮动属性background:属性值属性值;背景属性背景属性CSS简介2.【任务1-2】网页制作入门以一段CSS样式代码为例pfont-size:36px;color:red;text-align:center;字号字号颜色颜色对齐方式对齐方式 【任务1-2】网页制作入门什么是JavaScript？JavaScript简

13、介3.【任务1-2】网页制作入门JavaScript是Web页面中的一种脚本语言，通过JavaScript可以将静态页面转变成支持用户交互并响应相应事件的动态页面。在网站建设中，JavaScript用于为页面添加动态效果。JavaScript简介3.【任务1-2】网页制作入门JavaScript脚本语言发展史脚本语言发展史JavaScript用于为页面添加动态效果Tab栏切换栏切换焦点图轮播焦点图轮播 【任务1-2】网页制作入门JavaScript的发展史JavaScript最初由Netscape（网景公司）的Brendan Eich（瑞登艾克）设计，后来Netscape为了营销考虑，与Sun

14、微系统达成协议，将其改名为JavaScript。JScript为了取得技术优势，Microsoft（微软）公司推出了JScript。【任务1-2】网页制作入门IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。常见浏览器介绍4.【任务1-2】网页制作入门Mozilla Firefox中文通常称为“火狐”，是一个开源网页浏览器，使用Gecko引擎（非ie内核）。Firebug是火狐浏览器下的一款开发插件，它集HTML查看和编辑、JavaScript控制台、网

15、络状况监视器于一体，是开发HTML、CSS、JavaScript等的得力助手。【任务1-2】网页制作入门IE浏览器的全称是Internet Explorer，由微软公司推出，直接绑定在Windows操作系统中，无需下载安装。IE有6.0、7.0、8.0、9.0、10.0等版本，目前最新的是IE11.0。【任务1-2】网页制作入门Google Chrome又称谷歌浏览器，是由Google（谷歌）公司开发的开放原始码网页浏览器。该浏览器基于其它开放原始码软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单有效的使用界面。【任务1-2】网页制作入门 【任务1-3

16、】Dreamweaver工具的使用网页制作过程中，为了开发方便，通常我们会选择一些较便捷的工具，如Editplus、notepad+、sublime、Dreamweaver等。实际工作中，最常用的网页制作工具是Dreamweaver。下面，本节将详细介绍Dreamweaver工具的使用。【任务1-3】Dreamweaver工具的使用Dreamweaver界面介绍1.【任务1-3】Dreamweaver工具的使用Dreamweaver初始化设置2.（1）工作区布局设置（2）必备面板（3）新建默认文档设置（4）代码提示（5）浏览器设置前面我们已经对网页、HTML、CSS、JavaScript以及常用的网页制作工具Dreamweaver有了一定的了解，接下来将通过一个案例学习如何使用Dreamweaver创建一个包含HTML结构和CSS样式的简单网页。创建第一个网页3.【任务1-3】Dreamweaver工具的使用【项目总结】1.能够简单地认识网页，了解网页相关名词和Web标准。2.熟悉HTML、CSS以及JavaScript语言的发展史，感受它们的用法和效果。3.掌握Dreamweaver工具的基本操作，能够熟练使用Dreamweaver工具创建简单的网页。希望读者以此为开端，认真完成对本书的学习。