《第1章web编程概念》由会员分享，可在线阅读，更多相关《第1章web编程概念（21页珍藏版）》请在金锄头文库上搜索。
1、Company nameWEB编程基础编程基础山山东东农农业业大大学学信信息息学学院院计计算算机机系系 请开启人生新的旅程请开启人生新的旅程Company nameWEB编程基础编程基础山山东东农农业业大大学学信信息息学学院院计计算算机机系系 高葵 : 13793822837 E-mail: 课程邮箱: 密码:sdaujky1主主要要内内容容了解万维网的用途了解万维网的用途了解网页设计的基本概念了解网页设计的基本概念认识认识HTML、CSS、JavaScript第第1章章 网页设计简介网页设计简介1.1 万维网概述万维网概述 lWWW（World Wide Web）是一个基于超文本（Hype
2、rtext）方式的信息检索服务工具。lWWW系统已在教育、科学技术、商业广告、公共关系、大众媒体和娱乐等多方面起着愈来愈重要的作用 。lWWW的应用成为Internet上最受欢迎的应用之一，它的出现极大的推动了Internet的推广。lWWW获得成功的秘诀在于它制定了一套标准的、 易于人们掌握的超文本开发语言HTML、信息资源的统一定位格式URL 和超文本传送通信协议HTTP，用户掌握后可以很容易地建立自己的网站。1.2 HTML语言lHTML是Hypertext Markup Language的英文缩写，即超文本标记语言超文本标记语言，它是构成Web页面（Page）的主要工具。l用HTML编
3、写的超文本文档称为HTML文档，它是由很多标记组成的一种文本文件，HTML标记可标记可以说明文字、图形、动画、声音、表格、链接以说明文字、图形、动画、声音、表格、链接等 。l使用HTML语言描述的文件，能独立于各种操作系统平台（如UNIX，WINDOWS等），访问它只需要一个WWW浏览器，我们所看到的网页，是浏览我们所看到的网页，是浏览器对器对HTML文件进行解释的结果文件进行解释的结果,并把它们的内容并把它们的内容显示在窗口中。显示在窗口中。 1.2 HTML语言l新浪网的首页新浪网的首页可以通过浏览器直接查看一个页面的HTML源代码，例如在IE浏览器菜单栏上选择“查看源文件”即可。 1.3
4、 网页设计相关概念l超链接超链接 超链接(Hyper Link)是特殊的文字标识，它指向了WWW中的资源，例如一个网页、声音、文件、网页的一个段落或者WWW中的其他资源等，这些资源均可放在任何一个服务器上。在网页中，一个超链接可以是一些文字也可以是一张图片。1.3 网页设计相关概念l统一资源定位器（URL网址）统一资源定位器统一资源定位器(Uniform Resource Locator(Uniform Resource Locator，URLURL)用于描述Internet上资源的位置和访问方式。下面是新华网一个网页的网址： http:/ 网页设计相关概念l基本语法：scheme:/host
5、.domain:port/path/filenamel语法说明：URL通常包括三个部分，第一部分是第一部分是SchemeScheme，告诉浏览器该如何工作，告诉浏览器该如何工作，第二部分是文件所在的主机，第三部分是文件的路径和文件名第二部分是文件所在的主机，第三部分是文件的路径和文件名。Scheme：定义因特网服务的类型定义因特网服务的类型，告诉浏览器如何解析将要打开的文件内容。最流行的类型是 http，其他的参见表1-1。如:ftp,telnet,file等.domain（域）：定义因特网域名定义因特网域名，比如：。host（主机）：定义此域中的主机义此域中的主机。如果被省略，缺省的支持 h
6、ttp 的主机是 www，上例中是news。port(端口)：定义服务的端口号定义服务的端口号，端口号通常是被省略的。http默认的端口号是 80path（路径）：定义服务器上的路径定义服务器上的路径（一个辅助的路径）。如果路径被省略，资源（文档）会被定位到网站的根目录，上例中是“zlft/2009-02/28/”。filename（文件名）：定义文档的名称。定义文档的名称。上例中是“content_10918112.htm”。1.3 网页设计相关概念l网站网站(Web Site)是一个存放网络服务器上的完整信息的集合体。它包含一个或多个网页，这些网页以一定的方式链接在一起，成为一个整体，用来
7、描述一组完整的信息或达到某种期望的宣传效果。l网页网页(Web pages)是网站的组成部分，制作者可以将需要公布的信息按照一定的方式分类，放在每个网页上，网页里可以有文字、图象、声音及视频信息等。网页可以看成是一个单一体，是网站的一个元素。 1.3 网页设计相关概念l首页首页 首页(Home page)，也可以称之为主页，它是一个单独的网页，和一般网页一样，可以存放各种信息，同时又是一个特殊的网页，作为整个网站的起始点和汇总点，是浏览者访问一个网站的第一个网页。 通常命名为:index.html1.4网页制作开发工具l编辑工具编辑工具 HTML代码可以使用Windows操作系统中自带的记事本
8、进行编辑。如果你正在使用的话，你可以使用它自带的记事本（Notepad）程序，依次点击“开始菜单程序附件”找到该程序 1.4网页制作开发工具1.4网页制作开发工具这是一个简单的这是一个简单的HTML代码，从菜单选择代码，从菜单选择“文件文件另存为另存为”，将该文本文件命名，将该文本文件命名为为“1-1.html”。在文件夹中双击。在文件夹中双击“index.html”，用，用IE浏览器打开该网页浏览器打开该网页文件文件 我们的班级主页我们的班级主页 欢迎来到我们的班级网站欢迎来到我们的班级网站 这是我们开发的第一个网页这是我们开发的第一个网页 1.4网页制作开发工具l文本编辑器文本编辑器不仅在
9、记事本中可以编写不仅在记事本中可以编写HTMLHTML代码，任何文本编辑器都可以编写代码，任何文本编辑器都可以编写HTMLHTML。比如写字板、。比如写字板、wordword等，但保存的时候必须保存为等，但保存的时候必须保存为.html.html或或. .htmhtm格式。格式。1.4网页制作开发工具lEditPlus是一款非常好用的 HTML 编辑器，它除了支持颜色标记、HTML 标记，同时支持 C、C+、Perl、Java等其他语言，另外，它还内建完整的HTML & CSS 指令功能，对于习惯用记事本编辑网页的朋友，它可帮你节省一半以上的网页制作时间. 1.4网页制作开发工具lDreamw
10、eaver是一款专业的HTML编辑器，用于设计网页和WEB应用程序，它提供了很多实用工具，利用这些工具，我们可以更加方便、快速地制作网页. 1.4网页制作开发工具l浏览工具浏览工具 浏览器产品有很多可供选择，它们都可以浏览WWW上的内容。目前， 最普及的浏览器当属微软（Microsoft）公司的Internet Explorer（俗称“IE”），它是和windows系统绑定在一起的，其他的一些浏览器包括Opera、Mozilla Firefox（俗称“火狐狸”或“火狐”）、腾讯TT等。 1.5 网页制作相关技术l CSS CSS就是一种叫做样式表（Style Sheet）的技术。也有的人称之为
11、层叠样式表（层叠样式表（Cascading Style SheetCascading Style Sheet）。）。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制l JavaScript JavaScript是由 Netscape公司开发的一种脚本语言（scripting language）。在HTML基础上，使用JavaScript可以开发交互式Web网页，例如可以在线填写各类表格、联机编写文档并发布等。实现网页交互性的核心技术实现网页交互性的核心技术 。 小结lHtml、CSS、JavaScript是制作网页的三大法是制作网页的三大法宝。他们在网页设计中扮演了重要的角色。宝。他们在网页设计中扮演了重要的角色。Html是基础架构，是基础架构，CSS用来美化页面，而用来美化页面，而JavaScript用来实现网页的动态性、交互性。用来实现网页的动态性、交互性。Company nameWEB编程基础编程基础山山东东农农业业大大学学信信息息学学院院计计算算机机系系
