网页设计简介.docx

第一章、网页设计简介一、 万维网概述1、 万维网(World Wide Web,WWW)是一个基于超文本(hypertext)方式的信息检索服 务工具超文本结构通过指针方式连接，可以使任何地方之间的信息产生联系，这种联系可 以使直接的或间接的，也可以使单向的或双向的2、 WWW系统允许超文本指针所指向的目标信息源不仅可以使文本，也可以是其他媒体, 如图像、声音等信息，更重要的是可以把分散在不同主机上的资源有机地组织在一起，这种 超文本结构与多媒体的结合体，被称为“超媒体”3、 WWW 获得成功的秘诀在于它制定了一套标准的、易于人们掌握的超文本开发语言 HTML、信息资源的统一定位格式URL和超文本传送协议HTTP，用户掌握后可以很容易 的建立自己的网站二、HTML语言1、 WWW所使用的母语就是HTML语言2、 HTML 使 Hypertext Markup Language 的英文缩写，即超文本标记语言，它是构造 Web 页面(page)的主要工具3、 设计HTML语言的目的是为了能把存放在一台计算机上的资料与另一台计算机中的资 料方便的联系在一起，形成有机的整体，人们不用考虑具体信息是在网络的那台计算机上。

4、 使用HTML语言描述的文件，能独立于各种操作系统平台(如UNIX、Windows等), 访问它只需要一个WWW浏览器，我们所看到的页面，使浏览器对HTML文件进行解释的 结果5、 可以通过浏览器直接查看一个页面的HTML源代码，例如在IE浏览器菜单栏上选择 “查看”——“源文件”即可三、网页设计的相关概念1 、超链接网页时使用HTML语言编写的，其特点就在于“超链接”超链接(Hyper Link)是特 殊的文字标识，它指向了 WWW中非资源，例如一个网页、声音、文件、网页的一个段落 或者 WWW 中的其他资源等，这些资源均可放在任意一个服务器上鼠标单击超链接时， 就会跳转到超链接所指向的资源，就可以从WWW上下载新的信息判断一个网页的某个部分是否是超链接，就是当鼠标的光标箭头拖到这个地方时，如 果是超链接，浏览器便会改变光标为一只手的形状2、统一资源定位器统一资源定位器(Uniform Resource Locator,URL)用于描述Internet上资源的位置和 访问方式，它的功能相当于我们在实际生活中写信的通讯地址，因此把URL称为网址基本语法：Scheme://host.domain:port/path/filename语法说明：URL通常包括3个部分，第一部分是scheme,告诉浏览器该如何工作，第二部分 是文件所在的主机，第三部分是文件的路径和文件名。

1) scheme :定义因特网服务的类型，告诉浏览器如何解析将要打开的文件内容最流 行的类型是 http(2) domain (域)：定义因特网域名，比如(3) host(主机)：定义此域中的主机如果被省略，默认的支持http的主机是www(4) Port (端口)：定义服务的端口号，端口号通常是被省略的http默认的端口号是80(5) Path (路径)：定义服务器上的路径(一个辅助的路径)如果被省略，资源(文档) 会被定为到网站的根目录6) Filename(文件名)：定义文档的名称URL中的服务类型服务类型含义file引用本地PC上的文件ftp文件传输协议(File Transfer Protocol),用于下载服务器上的文件httpWorld Wide Web服务器上的文件，超文本传输协议goherGopher服务器上的文件newsUsenet新闻组telentTelent链接WAISWAIS服务器上的文件3、网站网站是一个存放网络服务器上的完整信息的集合体它包含一个或多个网页，这些网页 以一定的方式连接在一起，称为一个整体，用来描述一组完整的信息或达到某种期望的效 果4、 网页 网页时网站的组成部分，网页可以看成是一个单一体，是网站的一个元素。

5、 首页首页(Home Page)也可以称之为主页，和一般网页一样，可以存放各种信息，同时又 是一个特殊的网页，作为整个网站的起始点和汇总点，是浏览者访问一个网站的第一个网 页四、网页制作相关技术1 、 CSSCSS就是一种叫做样式表(Style Sheet)的技术也有人称之为层叠样式表(Cascading Style Sheet) CSS 语言是一种标记语言，它不需要编译，属于浏览器解释型语言，可以直 接由浏览器解释执行，CSS是由W3C的CSS工作组制定和维护的在主页制作时采用CSS技术，可以有效的对页面的布局、字体、颜色、背景和其他效 果实现更加精确的控制只要对相应的代码做一些简单的修改，就可以改变同一页的不同 部分，或者页数不同的网页的外观和格式它的作用如下：（1） 在几乎所有的浏览器上都可以使用2） 以前一些必须通过图片转换实现的功能，现在只要用 CSS 就可以轻松实现，从而 更快地下载页面3） 是页面的字体变得更加漂亮，更容易编排，是页面真正的赏心悦目4） 可以轻松地控制页面的布局5） 可以将许多网页的风格格式同时更新，不用再一页一页地更新了可以将站点上所 有的网页风格都使用一个css文件进行控制，只要修改这个css文件中相应的 行，整个站点的所有页面都会随之发生变动。

2、JavaScriptJavascript 就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广 泛地应用于Internet网页上JavaScript是由Netscape公司开发的一种脚本语言（Scripting Language）在HTML基础上，使用JavaScript可以开发交互式Web网页，例如可以填写各 类表格、联机编写文档并发布等0 JavaScript的出现使得网页和用户之间实现一种实时性的、 动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容一个JavaScript程序其实是一个文档，一个文本文件，它需要嵌入到HTML文档中 所以，任何可以编写HTML文档的软件都可以用来开发JavaScript小结HTML、 cSS、 JavaScript 是网页制作的三大法宝它们在网页设计中扮演了重要的角 色HTML是基础架构，CSS用来美化页面，而JavaScript用来实现网页的动态性、交互 性第二章、HTML基础介绍、 基本结构1、格式2、头部部分vhead＞ v/head＞是HTML文档的头部部分在浏览器窗口中，头部信息是不被显示在正文中的，在此标记中可以插入其他用以说明文件的标题和一些公共属性的标记。

vtitle＞ v/title＞之间写上网页标题另外，可以在头部文件中使用＜META＞标记用于描述不包含在标准HTML里的一些 文档信息，例如开发工具，作者，网页关键字，网页描述等这些定义的内容并不在网页页 面中显示，但是一些搜索引擎可以检索到这些信息，浏览者可以根据这些关键字或描述查找 到该网页3、主体内容在标记＜body〉 ＜/body＞中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等＜h1 ＞是将文字显示成大一级标题字号 vp＞指示这是一个段落的开始4、编写网页的开头大多的网页开头，通常使用 DOCTYPE 标记来声明要使用什么风格的 HTML 或 XHTMLHTML 4或XHTML1.0当前都有3种风格：严格型、过度型和框架型严格型HTML的特点是页面中禁止使用被W3C已经废弃的标记；而过度型和框架型 则认为标记是有效的 HTML 基本语法1 、 标记语法HTML用于描述功能的符号称为“标记” vhtml＞vhead＞vbody＞等都是标记标记通 常分为单标记和双标记两种类型单标记：仅单独使用就可以表达完整的意思例如vbr＞表示换行 双标记：由首标记和尾标记两部分构成，它必须成对使用。

例如vb ＞内和＜/b＞之间的文本应以粗体显示2、 属性语法基本语法： ＜标记名称 属性1= ”属性值”属性2=”属性值”〉3、 注释基本语法：＜！——注释内容——＞4、 编写HTML语言的注意事项(1) “＜”和“〉”是任何标记的开始和结束2) 标记可以嵌套使用，但不能交叉嵌套标记(3) 在源代码中不区分大小写，vhead＞vHead＞vHEAD＞都是对的(4) 任何回车和空格键都不起作用，为了代码清晰，建议不同 标记独占一行5) 标记中可以放置各种属性，属性值用“”括起来6) 编写代码，一般应该用缩进风格，以便更好的理解页面的结构，便于阅读和维护7) 文件的扩展名为htm或html,网站的首页文件名一般是index.html或default.html5、实例vhtml>vhead>vtitle>页 面的标题vbody>vp>这是我的第一个页面vb>这是粗体文本v/b>v/p>vimg src= "./img/welcome.jpg">第三章、文字与段落一、 文字内容1、 添加文字文字是网页的基础部分，可以通过一些HTML标记实现对文字的格式化。

在HTML 文件中，添加文字内容的方式与在Word、记事本等中添加文字的方式相同，在需要输入文 字的地方输入即可，但是需要添加在＜ body ＞与＜ /body ＞标记之间具体内容包括浏览器中要 显示的文字、空格符、特殊符号以及注释语句2、 标题字标题字，就是以几种固定的字号去显示文字在HTML中，定义了六级标题，从一 级到六级，每级标题的字体大小依次递减基本语法：＜h# align= “left I center I right” ＞标题文字vh#＞语法说明：（1） 标题标记本身具有换行的作用，标题总是从新的一行开始2） #用开指定标题文字的大小， #取1~6 的整数值，取1时文字最大，取6时文字 最小3） Align设置标题字的对齐属性，例如：设置vh2 align=”left”＞……v/h2＞可以使标题字居左，居中用center，居右用righto标记描述vhl>v/hl>一级标题vh2>v/h2>二级标题vh3>v/h3>三级标题vh4>v/h4>四级标题vh5>v/h5>五级标题vh6>v/h6>六级标题3、 添加空格通常情况下，HTML会自动删除文字内容中的多余空格，不管文字中有多少空格， 都被视作一个空格。

为了在网页中增加空格，可以用“& nbsp ”表示空格这种使用代码控 制的方式与在文本编辑软件中通过输入空格键来添加空格的方式不同语法说明：输入一个空格使用一个“& nbsp”表示，输入多少个空格就添加多少个“& nbsp”4、添加特殊符号特殊符号和空格一样，也是通过在HTML文件中输入符号代码来添加使用特殊符 号可以将键盘上没有的字符输出来 基本语法：&； ©；语法说明特殊符号符号代码特殊符号符号代码&&>& gt©& copy"®&r。