1、一、万维网 WWW,计算机网络、Internet与WWW的概念计算机网络InternetWWW计算机网络与Internet的概念区别Internet与WWW的概念区别协议的概念网站基本概念网页、网站、首页、默认页、主页抬头、版权、Logo、导航栏,一、万维网 WWW,三个问题：1、如何标志所有网页（文档）？2、什么传输协议？3、网页标准问题,1、如何标志所有文档？,URL（Uniform Resource Locator）格式：访问方式:/主机:端口/路径常见的URL：网页，http:/网页，https:/210.43.0.10:80/news/default.aspFTP，ftp:/uplo
2、ad:发送电子邮件，mailto:本地文件，file:/D:/Downloads/rfc.rar远程登录，telnet:/210.43.0.13:110,2、什么传输协议？,8.5.3 HTTP（HyperText Transfer P.）,的IP是？,61.163.241.19,http:/61.163.241.19,http:/61.163.241.19/default.shtm,http:/61.163.241.19/homepage2006/images/cctvlogo_778.gif,组织网页：HTML文件+图片文件+Flash文件,其它图片和Flash等HTML源代码中需要播放的
3、文件,返回,3、网页标准问题,超文本标记语言 HTML(HyperText Markup Language)超文本标记语言 HTML 中的 Markup 的意思就是“设置标记”。HTML 定义了许多用于排版的命令（标签）。HTML 把各种标签嵌入到万维网的页面中。这样就构成了所谓的 HTML 文档。HTML 文档是一种可以用任何文本编辑器创建的 ASCII 码文件。,二、超文本标记语言 HTML(HyperText Markup Language),1.HTML 概述超文本标记语言 HTML 中的 Markup 的意思就是“设置标记”。HTML 定义了许多用于排版的命令（标签）。HTML 把各
4、种标签嵌入到万维网的页面中。这样就构成了所谓的 HTML 文档。HTML 文档是一种可以用任何文本编辑器创建的 ASCII 码文件。,2.HTML 文档,仅当 HTML 文档是以.html 或.htm 为后缀时，浏览器才对此 文档的各种标签进行解释。如 HTML 文档改换以.txt 为其后缀，则 HTML 解释程序就不对标签进行解释，而浏览器只能看见原来的文本文件。当浏览器从服务器读取 HTML 文档后，就按照 HTML 文档中的各种标签，根据浏览器所使用的显示器的尺寸和分辨率大小，重新进行排版并恢复出所读取的页面。,HTML 的格式与标签,元素(element)是 HTML 文档结构的基本组
5、成部分。一个 HTML 文档本身就是一个元素。每个 HTML 文档由两个主要元素组成：首部(head)和主体(body)。首部包含文档的标题(title)，以及系统用来标识文档的一些其他信息。标题相当于文件名。文档的主体是 HTML 文档的最主要的部分。主体部分往往又由若干个更小的元素组成，如段落(paragraph)、表格(table)、和列表(list)等。,HTML 的标签,HTML用一对标签（即一个开始标签和一个结束标签）或几对标签来标识一个元素。开始标签由一个小于字符“”组成。结束标签和开始标签的区别只是在小于字符的后面要加上一个斜杠字符“/”。虽然标签名并不区分大写和小写。有一些标
6、签可以将结束标签省略。,HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,首部开始,HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,标题,HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,首部结束
7、,HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,主体开始,HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,1 级标题,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,HTML 文档中标签的用法,第一个段落,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,HTML 文档中标签的用法,第二个段落,
8、HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,主体结束,HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,HTML 文档结束,插入图像,万维网页面中的超链接1.链接到其他网点上的页面,定义一个超链的标签是。字符A表示锚(Anchor)。在HTML文档中定义一个超链的语法是：X,超链的起点,这个地方填写超链终点的 URL,链接举例,清华大学,超链的起点是某个文档中的这四个字,超链的终点是清华大学的主页,2.链接到一个本
9、地文件,远程链接：超链的终点是其他网点上的页面。本地链接：超链指向本计算机中的某个文件。,本地链接,本地链接可进行许多的简化：协议(http:/)被省略表明与当前页面的协议相同。主机域名被省略表明是当前的主机域名。目录路径被省略表明是当前目录（对于远程链接，表明是主机的默认根目录）。文件名被省略表明是当前文件（对于远程链接，表明是对方服务器上默认的文件名，通常是一个名为 index.html 的文件）。,相对路径与绝对路径,./,/default.htm,网站首页栏目2栏目2-1栏目3-1123号文件歌曲1下载,/menu3/file/file123.htm,网站首页栏目2栏目2-1栏目3-1
10、123号文件歌曲1下载,/menu2/2-1.htm,网站首页栏目2栏目2-1栏目3-1123号文件歌曲1下载,相对路径名与绝对路径名,使用简化的 URL，在 HREF=的后面使用的是相对路径名。使用完整的 URL 则是使用绝对路径名。使用相对路径名的好处绝不是为了少键入一些字符而是便于目录的变更。,abc,本文件链接（页内锚）举例,X,abc,文件 F,本文件链接的 HTML 语句格式：X,本文件链接,在此处定义命名锚,起点,终点,命名锚的定义语句：,命名锚的名字,命名锚的终点在字符 abc 的前面,远程链接举例,远程链接：清华大学,清华大学主页,文件 F,远程链接,因特网,起点,终点,色彩
11、的RGB表示,文字三原色 R G B每个原色色彩取值从0255（即0 x00-0 xFF）整体的色彩空间000000到FFFFFF共有2828 28 224个取值图中共有几种颜色？下列值代表何种颜色？#00FF00#FFFF00#FFFFFF#000000#C0C0C0#666666,超链接的四个状态,A:link Color:#CC00CC;Text-Decoration:noneA:hover Color:#666666;Text-Decoration:underlineA:active Color:#FF0000;Text-Decoration:noneA:visited Color:#
12、CC00CC;Text-Decoration:none如何实现“看不出哪些链接被点击过”？访问过的颜色未访问过的颜色实现方法：IE设置（只能改一台机器的默认样式）样式表,三、可视化网页设计,工具Macromedia Dreamweaver MX 2004Microsoft Frontpage 2003记事本/Editplus,1、Dreamweaver MX 2004简介,设计者视图界面介绍快捷键Ctrl-ZCtrl-YCtrl-SCtrl-F：查找、替换F8：站点文件菜单属性面板关闭后如何打开？,2、站点操作,建立站点为什么要建立站点？管理方便，打开方便更新链接Dreamweaver中的站点
13、就是发布的站点吗？不是，这里仅仅是设计时的站点实验室的计算机重新启动后会自动恢复实验中每次都要重建文件建立在Student盘,3、网页制作,表格嵌套导航条、当前位置在每个网页中的位置都要一致,3、网页制作,样式表控制元素的外观使用方式一个网页定义一个样式表多个网页共用一个样式表文件（见下页图）自己定义（见右图）下载（网页“文件另存为”，找“.files”文件夹中的css文件）方式（选择器）定义类样式，元素手工套用（class=类样式名称）定义元素(标签)的默认样式，元素(标签)将自动套用,3、网页制作,服务器端包含包含文件文件扩展名：.shtm 或.asp被包含文件.htm只有到之间的内容如果
14、含有及其闭合标记，被包含之后的结果网页中就会有双份，将出错！必须发布出来才能显示即必须以http:/的方式访问具体见“六、网站设计与发布”,4、常见问题,常见操作问题：光标选中元素后，才能设置该元素的属性Table中TR和TD如何选中？状态栏：标签检查器,四、网站规划-网站基本知识,概念区分网页、网站首页、默认页、主页统一内容抬头版权Logo导航栏,四、网站规划-网站基本知识,网站规划设计步骤确定类型、主题、风格内容与界面设计栏目与板块编排目录结构与链接结构版面布局策划书申请域名服务器接入方式（存放方式）的选择,四、网站规划-选择服务器接入方式,Internet主机方式（自管）专线：大中型公司
15、采用拨号：个人网站，成本低；但要解决随机分配IP问题花生壳、DNS2Go：可提供每次动态IP自动对应域名的服务主机托管（通过FTP或远程桌面管理）电信、网通等ISP机房提供高带宽、合适的温湿度、稳定的电源、防火等安全虚拟主机（通过FTP上传文件）虚拟：申请空间，共享服务器付费空间个人免费空间,四、网站规划-网页制作基本知识,网页布局问题表格布局网页设计独有特点层坐标布局与平面设计无区别,四、网站规划-DHTML（动态网页效果）总结,CSS（样式表）外接样式表：通过一个css文件控制多个网页的显示效果。Javascript（Java脚本程序，与Java不同）在客户端实现与用户的交互SSI（服务器
16、端包含）通过在多个网页中包含同一个ssi文件实现公共部分（抬头、导航、版权等）的统一方法：注意包含文件的扩展名：包含文件.shtm或包含文件.asp,四、网站规划-WEB数据库程序执行的原理,将查询结果组成网页,“Select*from student”,五、图形编辑与动画制作,图形文件格式BMP 位图色彩空间、分辨率JPG 压缩格式GIF多帧动画、透明、256色PS源文件的概念PNG,五、图形编辑与动画制作,位图的概念逐点（像素）描绘矢量图的概念在数学上定义为一系列由线连接的点。放大后不失真，和分辨率无关，文件小Adobe Illustrator、CorelDrawFlash矢量动画的概念f
17、laswf,五、图形编辑与动画制作,编辑制作工具Adobe PhotoshopMacromedia FireworksMacromedia Flash编辑制作示例去除背景、添加文字、添加效果、导出补间动画、元件、引导线、导出,六、网站设计与发布,原理（Browser/Server模式）HTTP负责请求、回应和网页的传输服务器的任务1、等待服务3、接收请求4、解释ASP，将执行后得到的HTML结果嵌入HTML5、回应浏览器的任务2、发送请求（地址栏或点击超链接等）6、接收文档7、分析文档，做进一步请求8、解释HTML，将网页展现在IE的主体部分9、执行Javascript,六、网站设计与发布,操
18、作系统的选择Windows Server 2003同时连接限制多站点CPU、内存优化服务而不是应用程序实验中用Windows XP代替WEB服务器软件的选择Internet Information Server（Internet信息服务）,概念区分,客户端执行的动感效果（仍属于静态网页）如本地时钟、文字图像的鼠标跟随、提交前检查表单内容Javascript服务器端执行的WEB数据库程序（动态网页）如新闻、留言、注册登录、论坛ASPAccess或SQLServer，也可以用php、.NET、JSP等技术,附1：数据库操作的核心技术,数据库连接串-1、定义一个ADODB连接Set objConn=
19、Server.CreateObject(ADODB.Connection)-2、可选：SQLServer连接串strConn=Provider=SQLOLEDB.1;Persist Security Info=False;User ID=student;PWD=123456;Initial Catalog=score;Data Source=210.43.7.245-2、可选：Access连接串strConn=DBQ=+server.mappath(score.mdb)+;DefaultDir=;Driver=Microsoft Access Driver(*.mdb);-3、连接数据库con
20、nObj.Open strConn,-4、定义SQL语句strSQL=Insert into-5、操作数据库objConn.Execute strSQL-4、定义SQL语句strSQL=Select*From messageboard order by Datetime Desc-5、定义一个ADODB数据集Set objRS=Server.CreateObject(ADODB.Recordset),-6、ADODB连接根据SQL语句把符合条件的数据取到数据集中objRS.Open strSQL,objConn,adOpenStatic-6、可选：AccessobjRS.Open strSQL,objConn,adOpenKeyset,adLockReadOnly-6、可选：SQLServer-7、显示数据集中的数据,统一的数据库连接,在global.asa中定义Application变量，其它页面连接数据库时直接使用该Application变量写入一个公用文件，其它文件包含该文件,
