第1章网站设计基础

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

教学重难点
教学重点 • HTML语言的语法规则 • 基本的网页标记符和属性 • 静态网站的开发流程
教学内容
1.1 基本概念
1.2 网站的类型 1.3 定位网站主题和名称 1.4 定位网站CI形象 1.5 确定风格和创意 1.6 网站设计相关软件介绍
1.7 网站设计流程
1.1
1.1.1 1.1.2 1.1.3 1.1.4
• HTML中绝大多数的标记符都是成对出现的，包括开始标记符和结束标记符。成对标记符之间的内容就是该标记符作用的区域。结束标记符和开始标记符的区别就是多了一条斜线。如和，其中为开始标记符，为结束标记符。 • 但是也有一些标记符是单独的标记符，它们没有结束标记符。如水平线标记符<hr>、断行标记符 等。
1.1.2 5．其他组件
网页的组成元素
以上讲过的文字、图片、动画是网页中最为常见的组件，另外还有一些能起到丰富网页内容、增强网页生动性的组件，如 JavaScript 、 Java Applet、VBScript、滚动字幕、计数器和背景音乐等等，这里就不一一介绍了，有兴趣可以去参考相关方面的书籍。
1.1.2
网页的组成元素
1．文本
文本的作用就是显示文字，而网站的主题思想的表达也需要文字，还有网上的新闻以及相关介绍也都需要文字来说明，可以说文字是传递信息最常用、最直观的方式，且传输速度快，占用空间小。网页中需要大量的文字，这需要用到网页编辑器中的HTML语言标签来编写。也可以利用网页编辑工具中的“所见即所得”功能直接写入文字。
基本概念
网站和网页网页的组成元素 URL介绍 HTML简介
1.1.1
网站和网页
网站（Web Site）顾名思义就是计算机网络上的一个站点，代表一个位置，网页（Web Page）就是站点中所包含的内容。简单来说，网站是一系列具有相同或相似属性并通过各种链接相互关联的网页的组合。网页可以是站点的一部分，也可以独立存在。通过浏览器可以实现网页的跳转，从而浏览整个网站。网页是网站信息发布与表现的一种主要形式。网页的内容与发布信息的目的和要求相关，网页的表现形式和效果与制作工具和创意水平有关。
网页的组成元素
上面所说的网页都是静态网页，像是定格的风景，如果加入动画，就更为丰富生动了。1995年Sun公司开发的Java语言使用户可以创建能够调用图片和声音的多媒体应用小程序，于是短期内Java就风靡全球。但如果对程序语言不熟，又要轻松地制作便于浏览的动画，那就学习使用 Flash 或 Fireworks等软件进行制作，用它们制作的动画小巧迷人，用*.swf文件保存，再导入网页编辑器中，这样就可以在浏览器中浏览动画了。
1.1.3 URL介绍
• ftp协议——文件传输协议，主要是用来取得服务器上的文件资源。例如：ftp://202.116.137.95/或者 ftp://ftp.XXX.edu.cn。 • file 协议——存取本地磁盘文件的服务。例如： file://c:/my documents/hello.exe • telnets 协议——登陆远程系统服务。例如： telnets://bbs.china.com/ • news 协议——网络新闻组协议。例如： news:news.sina.com • mailto 协议——传送E-mail协议。例如： mailto:xxx@163.com
1wenku.baidu.com1.3 URL介绍
URL（Universal Resource Locator）中文意思是 “统一资源定位符”，它是用来表示每个站点及站点上网页的地址，且地址是惟一对应的。向浏览器中输入URL，就可以访问URL指出的网页，制作网页中的超链接要用到URL。我们看下面的例子:
http://www.china.com:8080/sports/sport.htm
1.1.4 HTML简介
（3）HTML文件标题标记<Title> • 语法：<title>…</title> • 说明：用于设置网页的文件标题。网页的主题一般显示在浏览器顶部的标题栏中，也可以被浏览器作为书签和收藏清单，只要在<title></title> 标记对之间加入要显示的文本即可。一个网页只能有一个标题名，而且<title>标记中不能包含其他标记。 • 注意： <title></title> 标记对必须放在<head> </head>标记对之间。
通信协议
服务器名称
通信端口
文件夹
文件
1.1.3 URL介绍
从上图可以看到的基本结构为：通信协议：//服务器名称：通信端口编号/文件夹 /文件名各部分的含义如下：（1）通信协议通信协议是连接网页所使用的的网络传输协议，常见的传输协议有以下几种： • http协议——超文本传输协议，主要用来连接远端的服务器。例如：http://www.163.com/即可连接到网易的WWW服务器。
1.1.4 HTML简介
2．网页的基本结构
网页的基本结构如下所示： <HTML> <HEAD> <TITLE> 网页的标题 </TITLE> </HEAD> <BODY> 网页的内容 </BODY> </HTML>
1.1.4 HTML简介
这段程序在浏览器中的显示结果如图所示。
简单HTML例子
1.1.4 HTML简介 1．HTML标记符基础
标记符是HTML语言中一些定义网页内容格式和显示的指令，而标记符的属性用于进一步控制网页内容的显示效果。（1）基本的HTML语法 • HTML的语法比较简单，所有的标记符都用尖括号 “<>”括起来的，如标记符。
1.1.4 HTML简介
1.1.4 HTML简介
（2）HTML文件头标记<Head> • 语法：<head>…</head> • 说明：用于包含文件的基本信息（文档标题、文档搜索关键字、文档生成器等）。 <head> 和 </head>构成HTML文档的开头部分，在此标记对之间可以使用其他标记符，如标题标记符title、样式表标记符style、脚本语言标记符script等， <head>和</head>标记对之间的内容是不会在浏览器显示出来的。
1.1.3 URL介绍
（3）文件夹与文件名 • 文件夹是用来存放文件的，通常若干个同类型的文件应建立一个文件目录来保存，如果是多级文件目录，就必须指定是第几级文件夹，直到找出文件的位置。 • 文件则是包括文件名和扩展名在内的完整名称。
1.1.3 URL介绍
绝对URL是指Internet网址的完整定位。例如： http://www.china.com/news/hello.html 就是一个完整的绝对URL形式，它包含协议种类、服务器域名、文件路径和文件名。相对URL是指以上资源相对于当前页面的地址，它包含从当前指向目的页面位置的路径。例如： news/hello.html就是一个相对URL，表示的是当前页面所在目录下news子目录中的hello.html文件。
1.1.4 HTML简介
标记属性用途实例
<Body bgcolor="#rrggbb">
<Body text="#rrggbb"> <Body link="#rrggbb"> <Body vlink="#rrggbb"> <Body alink="#rrggbb">
设置背景颜色，默认为白色
设置文本颜色，默认为黑色设置链接颜色，默认为蓝色设置已访问链接的颜色，默认为紫色设置正被单击链接的颜色，默认为红色
1.1.4 HTML简介
（1）HTML文档标记<HTML> • 语法：<html>…</html> • 说明：<html>标记位于HTML文档的最前边，用来标识HTML文档的开始；而</html>标记恰恰相反，它位于HTML文档的最后边，用来标识HTML文档的结束。html标记符没有任何属性。
1.1.4 HTML简介
HTML（Hyper Text Markup Language，超文本标记语言）是一种标记语言，通过各种标记符来定义文档内容的格式。它的目的在于运用标记符使文件达到预期的显示效果。 HTML中的超文本功能，也就是链接功能，使网页之间可以通过指针链接起来，如下图所示。HTML的这种超链接功能是其被用作Web页语言的主要原因之一。
1.1.3 URL介绍
（2）服务器名称 • 它是指提供服务的主机名称或者它的地址。冒号后的数字是通信端口号，一般可有可无，默认的是80，即http协议的端口，这个端口号告诉服务器用TCP/IP协议软件去打开哪一个通信端口，因为一台计算机常常同时作为Web、FTP等服务器，为了便于区别，每种服务器要对应一个通信端口，保证不与其他的服务端口有冲突。
1.1.4 HTML简介
（4）HTML文件主体标记<Body> • 语法：<body>…</body> • 说明：<body></body>是HTML文档的主体部分，在此标记对之间可包含、<H1></H1>、 、 <hr>等众多的标记，它们所定义的文本、图像等将会在浏览器的框内显示出来。 • <body>标记中的常用属性见下页表。
1.1.1
网站和网页
网页是用HTML编写的、通过WWW传输，并被Web浏览器翻译成可以显示出来的一个页面文件，它集合了文本、图片、声音和动画等信息元素。网页一般由站标、导航栏、广告栏和信息区等部分组成。根据页面内容，可以把网页分为首页、主页、专栏网页、内容网页以及功能网页等类型，在这些网页中最重要的是网站的主页；按制作技术分为静态网页与动态网页。
1.1.2 4．超链接
网页的组成元素
拥有美妙的文字、漂亮的图片以及生动的动画的网页还不能称为网站，别人还不能访问，此时通过一种方式把它们整合成一个有机的整体，这种方式就是超链接，可以说超链接是网站的脉络。超链接是网站中的重要部分，网页上的一段文字、一幅图像或图像的某一部分都可以进行超链接，当用户单击它时，浏览器就会根据指示或地址转到相应的位置或进入新的页面。
网络应用系统开发1
第1章网站设计基础
制作者：王玲玲
教学目的
通过本章的学习，对网页设计有一个更深层次的认识，解决对网页设计的困惑，能够区分静态网页和动态网页。掌握HTML语言的语法规则，掌握基本的网页标记符和属性。掌握网站的整体规划及设计流程，特别是静态网站的开发流程。了解各种网页制作的常用软件。
1.1.4 HTML简介
• 如果一个标记符有多个属性，那么不同属性之间应该用空格隔开，例如： 本段文字将显示为红色小字体。 注意： • （1）并不是所有的标记都必须具有属性项，如换行标记就没有属性项。 • （2）属性之间没有先后顺序，在使用时，根据需要可以使用标记的所有属性，也可以只选用需要的几个属性。 • （3）属性和标记一样，都不区分大小写。
1.1.2 2．图片
网页的组成元素
除了文字之外，网页中一般也会包括很多图片，这样图文并茂就显得内容更加丰富了。其实有时候图片比文字更有说服力、更加直观。目前，网页中图形格式大部分都是gif或jpeg格式，在网上这两种格式的图片传输速度快，而位图bmp文件占用空间大，传输速度慢。
1.1.2 3．动画
1.1.4 HTML简介
（2）标记符属性 • 所谓属性就是指用来描述对象特征的特性。HTML 对页面内容的详细控制实际上是通过设置标记符的相关属性来完成的。 • 在HTML中，标记符的所有属性都包含在开始标记符的尖括号中，用“属性=属性的值”的形式表示。 • 例如，可以用段落标记符的对齐属性来指定文字的对齐方式，HTML源代码如下： 本段文字显示为水平居中。

第1章 网站设计基础

第1章网站设计基础