王红艺-《网站设计原理与方法》公选课课件

网站设计原理与方法学时：32(6+26)主讲：王红艺使用软件：Dreamweaver、flash、fireworks等课程目的提高动手能力，学会网页制作图片、动画制作简单的WEB数据库编程网站配置与发布激发对网络的兴趣，提高使用和利用水平讲课提纲一、掌握网页的相关概念：网络、Internet、网站、制作网页的基本步骤二、超文本标记语言HTML三、网页制作四、图形编辑与动画制作五、网站设计与发布六、大作业要求4网页的相关概念•在制作网页之前应首先了解网络、Internet、网页、网站以及制作网页的基本步骤等相关知识。•计算机网络是将地理位置不同并具有独立工作能力的多个计算机系统和其他设备通过通信线路（网络介质）互连在一起，使用通用的网络协议，实现网络资源共享和互相快速通信的整个信息系统。•1．什么是Internet•Internet一词来源于英文InterconnectNetworks，即“互连各个网络”，中文译名为“因特网”。Internet专指全球范围内最大的、由众多网络相互连接而成的、基于TCP/IP协议的计算机网络。Internet是当今世界最大的计算机互连网络系统，由全球100多个国家和地区不同功能的计算机、通信骨干网和各种计算机网络通过线路连接在一起的一个世界范围的网络。5•2.TCP/IP协议•TCP/IP（TransmissionControlProtocol/InternetProtocol），中文译名为传输控制协议/互联网络协议），是Internet最基本的协议，是由底层的IP协议和TCP协议组成的。TCP/IP协议的开发工作始于70年代，是用于互联网的第一套协议。•TCP和IP可以单独使用，但经常是协同工作，互相补充。简单地说，IP提供了数据传输的灵活性，TCP提供了数据传输的可靠性。6•3.Internet地址•(1)Internet地址•Internet采用一种唯一通用的地址格式，为Internet中的网络和主机分配一个地址。Internet中地址类型有IP地址和域名地址两种。•①IP地址•除了可以在统一资源定位器中输入域名来访问需要的资源之外，还可以使用IP地址来进行访问。每一台上网的计算机都有一个唯一标识主机的号码，这就是IP地址。IP地址是一组32位的数字，如202.106.185.241。•②域名•IP地址是一长串的数字号码，这些数字难记又难理解，为了方便用户理解、记忆，科学家们引入了域名的概念。域名是用一些英文字符来代替IP地址，这些英文字符一般都是英文单词，也可能是拼音字母，它们基本上和站点名称一致，因此记忆起来就十分容易了。域名的一般书写格式为主机名.机构名.地区名，如就是新浪站点的域名。7•4.万维网、网页和网站•（1）什么是万维网•万维网也称做，是WorldWideWeb（全球信息网）的缩写。万维网提供了非常丰富的信息，各种信息按不同的类型以网页文件的形式分别存放在万维网服务器上，供人们选择查阅。•万维网制定了一套标准，有容易掌握的超文本HTML、统一的资源定位器URL和超文本传输协议（HyperTextTransferProtocol，HTTP）。•浏览必须通过浏览器来完成。浏览器是用来访问Internet的超文本技术，是使用最广泛的网络软件，它可以提供包括的浏览、搜索、网络资讯的打印和收发E-mail的功能。•在浏览器中，比较有代表性的有IE（InternetExplorer）、Netscape和Opera等。还有国内腾讯公司的TT浏览器。8•（2）网页和网站•组成的基本元素是网页，网页也称为页面或Web页。•①网页的定义•在网上浏览时看到的一个个页面就是网页。如图1-1所示即为一个网页的界面。•②网页的分类•按网页在一个站点中所处的位置可将其分为主页和内页（分支页面），主页是指进入一个站点时看到的第一页，内页（分支页面）是指与主页相链接的页面。•按网页的表现形式可将网页分为静态网页和动态网页。910•③网站•通常把一系列在逻辑上可以视为一个整体的页面称做网站，或者说网站就是一个相互链接的网页集合，它们可以共享。网站的概念是相对的，大网站（例如“雅虎网”和“新浪网”），页面很多，而且位于多台服务器上；小网站可以是一些个人网站，可能只有几个网页，仅在一台服务器上占据很小的空间。•④网站标志（Logo）•利用一切可利用的视觉元素和方法针对主题概括出高度简洁并集中体现站点特色和内涵的图像与文字。•在设计网站标志时，可以有代表性的人物、动物和花草作为蓝本进行设计，如新浪的眼睛标志和迪斯尼的米老鼠等。最简单的方法是用网站的英文名称作标志，如新浪用字母“sina”结合眼睛图案作为标志。11•⑤网站的标准色彩•标准色彩用于网站的标志、标题、主菜单和主色块。网站给人的第一印象是色彩感觉，确定网站的标准色彩是相当重要的一步。在进行设计时可以参考相关的同类网站或其他网站，如IBM用深蓝色、肯德基用红色、微软用钴蓝色和新浪用黄色等。•⑥网页制作基本步骤•收集整理资源•规划站点内容并创建站点•制作网页•测试站点•发布站点•站点维护、更新二、超文本标记语言HTML(HyperTextMarkupLanguage)1.HTML概述超文本标记语言HTML中的Markup的意思就是“设置标记”。HTML定义了许多用于排版的命令（标签）。HTML把各种标签嵌入到万维网的页面中。这样就构成了所谓的HTML文档。HTML文档是一种可以用任何文本编辑器创建的ASCII码文件。2.HTML文档仅当HTML文档是以.html或.htm为后缀时，浏览器才对此文档的各种标签进行解释。如HTML文档改换以.txt为其后缀，则HTML解释程序就不对标签进行解释，而浏览器只能看见原来的文本文件。当浏览器从服务器读取HTML文档后，就按照HTML文档中的各种标签，根据浏览器所使用的显示器的尺寸和分辨率大小，重新进行排版并恢复出所读取的页面。HTML的格式与标签元素(element)是HTML文档结构的基本组成部分。一个HTML文档本身就是一个元素。每个HTML文档由两个主要元素组成：首部(head)和主体(body)。首部包含文档的标题(title)，以及系统用来标识文档的一些其他信息。标题相当于文件名。文档的主体是HTML文档的最主要的部分。主体部分往往又由若干个更小的元素组成，如段落(paragraph)、表格(table)、和列表(list)等。HTML的标签HTML用一对标签（即一个开始标签和一个结束标签）或几对标签来标识一个元素。开始标签由一个小于字符“”、一个标签名、和一个大于字符“”组成。结束标签和开始标签的区别只是在小于字符的后面要加上一个斜杠字符“/”。标签名并不区分大写和小写。有一些标签可以将结束标签省略。HTML文档中标签的用法HTMLHEADTITLE一个HTML的例子/TITLE/HEADBODYH1HTML很容易掌握/H1P这是第一个段落。虽然很短，但它仍是一个段落。/PP这是第二个段落。/P/BODY/HTMLHTML文档开始HTML文档中标签的用法HTMLHEADTITLE一个HTML的例子/TITLE/HEADBODYH1HTML很容易掌握/H1P这是第一个段落。虽然很短，但它仍是一个段落。/PP这是第二个段落。/P/BODY/HTML首部开始HTML文档中标签的用法HTMLHEADTITLE一个HTML的例子/TITLE/HEADBODYH1HTML很容易掌握/H1P这是第一个段落。虽然很短，但它仍是一个段落。/PP这是第二个段落。/P/BODY/HTML标题HTML文档中标签的用法HTMLHEADTITLE一个HTML的例子/TITLE/HEADBODYH1HTML很容易掌握/H1P这是第一个段落。虽然很短，但它仍是一个段落。/PP这是第二个段落。/P/BODY/HTML首部结束HTML文档中标签的用法HTMLHEADTITLE一个HTML的例子/TITLE/HEADBODYH1HTML很容易掌握/H1P这是第一个段落。虽然很短，但它仍是一个段落。/PP这是第二个段落。/P/BODY/HTML主体开始HTML文档中标签的用法HTMLHEADTITLE一个HTML的例子/TITLE/HEADBODYH1HTML很容易掌握/H1P这是第一个段落。虽然很短，但它仍是一个段落。/PP这是第二个段落。/P/BODY/HTML1级标题HTMLHEADTITLE一个HTML的例子/TITLE/HEADBODYH1HTML很容易掌握/H1P这是第一个段落。虽然很短，但它仍是一个段落。/PP这是第二个段落。/P/BODY/HTMLHTML文档中标签的用法第一个段落HTMLHEADTITLE一个HTML的例子/TITLE/HEADBODYH1HTML很容易掌握/H1P这是第一个段落。虽然很短，但它仍是一个段落。/PP这是第二个段落。/P/BODY/HTMLHTML文档中标签的用法第二个段落HTML文档中标签的用法HTMLHEADTITLE一个HTML的例子/TITLE/HEADBODYH1HTML很容易掌握/H1P这是第一个段落。虽然很短，但它仍是一个段落。/PP这是第二个段落。/P/BODY/HTML主体结束HTML文档中标签的用法HTMLHEADTITLE一个HTML的例子/TITLE/HEADBODYH1HTML很容易掌握/H1P这是第一个段落。虽然很短，但它仍是一个段落。/PP这是第二个段落。/P/BODY/HTMLHTML文档结束插入图像IMGSRC=portrait.gifHEIGHT=100WIDTH=65结束标签开始标签插入图像插入的图像文件名是portrait.gif高度是100像素宽度是65像素万维网页面中的超链接1.链接到其他网点上的页面定义一个超链的标签是A。字符A表示锚(Anchor)。在HTML文档中定义一个超链的语法是：AHREF=...X/A超链的起点这个地方填写超链终点的URL链接举例AHREF=清华大学/A超链的起点是某个文档中的这四个字超链的终点是清华大学的主页2.链接到一个本地文件远程链接：超链的终点是其他网点上的页面。本地链接：超链指向本计算机中的某个文件。本地链接本地链接可进行许多的简化：协议(http://)被省略——表明与当前页面的协议相同。主机域名被省略——表明是当前的主机域名。目录路径被省略——表明是当前目录（对于远程链接，表明是主机的默认根目录）。文件名被省略——表明是当前文件（对于远程链接，表明是对方服务器上默认的文件名，通常是一个名为index.html的文件）。相对路径与绝对路径...//default.htmahref=“./default.htm”网站首页/aahref=“menu2/default.htm”栏目2/aahref=“menu2/2-1.htm”栏目2-1/aahref=“menu3/3-1.htm”栏目3-1/aahref=“menu3/file/file123.htm”123号文件/aahref=“download/music/s