网页制作初步与网站发布.ppt

1、Chapter 11 网页制作初步与网站发布,发布到Internet上的WWW信息都是以网页的形式出现的，网页（又称Web页）是万维网上的基本文档，用HTML（超文本标记语言）书写。 Web站点（简称网站）是由链接在一起的不同的网页组成。将网页传送到Web站点上，称之为网站发布。,1、网站设计基础,网站设计的基本步骤 规划网站 制作网站内容（即网页） 发布网站,网站设计的基本原则： 使用者优先的观念； 内容第一； 着手规划，确定特色，锁定目标；重视首页，合理分类； 考虑网站的互动性；应用图形技巧； 选取合理的背景底色；避免滥用技术；及时更新、维护。,制作网页的基本步骤： 首先在本地硬盘中创建一

2、个文件夹来放置网页使用的所有文件，即网页站点 使用网页制作软件（如FrontPage、Dreamweaver）制作网页或直接用HTML语言编写网页，最后将所制作的网页保存在所创建的文件夹中,网页制作的基本方式 按HTML语言格式手工直接编写 利用网页编辑软件（如FrontPage、Dreamweaver 等）编写 通过某些格式转换工具将现有的其他格式文件转换成HTML文件,2、网页设计基础语言HTML,HTML简介： 一般来说，早期的网页完全使用HTML（Hypertext Markup Language）编制。由于用HTML编制的网页仅使用普通的ASCII代码构成，可以跨平台（计算机及操作系

3、统）使用。因此，无论Web服务器或浏览器驻留在哪一种计算机或操作系统上，其差异并不是太大。,HTML是万维网文档发布和浏览的基本格式，是定义万维网的基本规范之一。 HTML是用特殊标记来描述文档结构和表现形式的一种语言。如今几乎所有的网页都是用HTML或者其它程序语言嵌套在HTML中编写的。 HTML是WWW诞生初期唯一的制作网页的方法，后来的各种网页可视化写作工具，如FrongPage、Dreamweaver等都是基于HTML源代码编写的，只不过将一些代码文档封装成了便于操作的对象。,为什么要学习HTML？ FrontPage、Dreamweaver”所见即所得”的网页制作工具 HTML一种

4、语言，使用起来比较繁杂 HTML是各种网页新技术(DHTML、ASP、PHP、JAVA Script)的基础。,用HTML语言编写的超文本文件称为HTML文件。HTML文件是一个放置了标签的ASCII文本文件，文件扩展名为“.html”或“.htm”。 HTML构成的文件不会因时、因地发生变化，称为“静态网页”。 为了网页能够动态变化，需要在网页中加入程序，使之成为“动态网页”。,HTML初步 HTML的优点： HTML文件比较小，便于在网络上传输； HTML文档独立于计算机操作平台； 原则上，建立HTML文档不需要任何特殊的软件，只需一般的文本编辑器即可； HTML标记语言，非常便于学习。,

5、HTML的局限性 直接用文本编辑时，不是所见即所得； 已定义的标记往往不能满足多方面的需要; 主要面向人机交互使用，在计算机之间交换数据不够便利 HTML的后继者为XML（extensible markup language 可扩展标记语言）,编辑第一个HTML文件,在记事本中输入：Hello WorldHello world This is my first web.保存为“hello.html”或“hello.htm” 用IE打开文件，或直接双击文件名打开,一个HTML文档是纯文本文件，是用ASCII码编写的源文件，它包含两类内容： 页面本身的文本 表示页面元素、结构、格式和其它超文本链接

6、的HTML的标签。,大多数HTML标签的书写格式如下：文件内容 某些HTML元素只有起始标签而没有相应的结束标签，如换行标签 某些HTML元素的结束标签是可以省略的，如分段结束标签 起始标签中可以包含属性（Attribute）域，其位置从标签名之后空一格的地方开始，在结束符“”之前结束。,Hello WorldHello world This is my first web.,定义此文件是HTML文档，括住整个HTML文档,Hello WorldHello world This is my first web.,用来描述HTML页的头部区，括住HTML文档的页头,Hello WorldHell

7、o world This is my first web.,定义HTML的正文，用来放置主页显示内容（文本、标签、正文内容所在）,Hello WorldHello world This is my first web.,设定文档的题目，会被放在浏览器的最上方,HTML句法结构,HTML句法结构,Google首页的部分源代码Google .另外还有HTML文档主体部分的声明 ,HTML句法结构,所谓元素（Element），是HTML中的主要构件，一般元素都是由成对的标记组成，例如 ： Google 单个出现的标记成为“空元素”，例如： 可以容纳其他元素的元素也称为“容器元素”，例如：Google

8、 . ,这三个元素一起构成完整的HTML文档结构模板，所有的HTML文档都应该遵循这个模板：Header elementbody of Document,HTML文档结构和常用元素,HTML文档结构和常用元素,容器元素中包含的最为常用的元素有： text：这个元素是文档的抬头，类似书籍的页眉。在浏览器中，标题通常与文本页分开显示（例如，在窗口的标题栏中）。抬头（TITLE）在用户保存网页时一般都作为文件名，所以命名应该注意。,HTML文档结构和常用元素,容器 包含在标记对中的内容将显示在浏览器的主窗口中。 在开始设计网页之前，需要对页面进行一个整体的规划和设置，如背景颜色、背景图案、页面留白以

9、及大部分文字的颜色等等。 在HTML中，使用元素来定义页面的这些基本属性。如在本章开始时提到的搜索引擎“Google”主页的例子，其的定义如下： ,容器元素中包含以下几个常用元素： 六级标题标签 text：把括起来的文本作为标题。从标记、直到，可以有六个层次的标题（较小的数字标记较重要的标题）。在该标题的上下各有一个空行。 标题对齐：(“?”=16),HTML文档结构和常用元素,例： Bob fell over the chicken. H1 Bob fell over the chicken. H2 Bob fell over the chicken. H3 Bob fell over th

10、e chicken. H4 Bob fell over the chicken. H5 Bob fell over the chicken. H6, ：段落标识，结束标记不是必须的 例：Bob starts to chase the chicken around. Bob trips over a string and goes flying into the pigs mud pit! eww! What a pity!,：图像标记把图像插入到文档中，图像可以在SRC属性中给出的URL处找到。 例：,：水平分隔线标记，放置一个横穿浏览器窗口的水平线，通常水平线的上下各有一个空行 例：,：在文

11、本中强制换行，以便后继文本都放在下一行。没有结束标记符 例：Sentence One. Sentence Two. Sentence Three., ：表示无序列表 。在二者之间放置列表项，每一项有一个 开始标记, 和一个任选的 结束标记，通常在显示出的各条目项前置一个圆点。 例：pencilspenseraserspaperglue, ：有序列表，其中的每一列表项用标记符： 和 例：pencilspenseraserspaperglue ,文本修饰逻辑风格：文本修饰逻辑风格允用户赋于文本的各个片段以真正的含义。text text text ,例： bold italicized Larger

12、 Smaller type-written,text：预先格式化文本由于HTML忽略多余的空格、制表符（tab）和换行符（enter），某些具有特殊格式的文本，如诗歌、表格及计算机程序清单等都很难标记。元素按照文本原稿出现的样式格式化所包含的文本，包括原稿中出现的空格、制表和换行符等。,例：The cat ran after the dog. -verb noun-noun,Table元素,表格元素是HTML中最为复杂，同时又是应用最为广泛的元素之一： ，表格必须以标记符 结束, 否则表格将不能显示出来 表格元素在网页中以表格形式组织和显示数据 大量使用在网页布局设计上。在 “Google”

13、貌似简单的网页上，用了两个表格来布局。,标记的一般形式是： ,BGCOLOR=“#hexadecimal_here” 定义表格的背景颜色 BACKGROUND=“location_of_image“ 定义背景图案 Border 表格边框的风格（在作为布局使用时往往取其默认值“0“,即不显示表格的边框），在“Border=1”时，表格的边框成3D的状态。, 标记： 为双标记，为表格的标题，一般出现在首标记与第一个标记之间。,TR元素 TR元素表示表格中的行标记，表格中的每一行都必须包含在一对标记中。行标记的一般形式是： Align指定该行中单元格的对齐方式，可选值如下： Left 左对齐（默认值

14、） Center 居中对齐 Right 右对齐Bgcolor指定该行的背景颜色。,TD元素单元格是表格的基本组成元素，一个TD元素表示表格中的一个单元格，由标记对中所圈入的所有TD元素构成了表格的一行。单元格标记的一般形式是： ,在标记的属性中： Width 单元格宽度 Height 单元格高度 Align 单元格水平对齐方式 Valign 单元格垂直对齐方式 RowSpan 单元格的行跨度 ColSpan 单元格的列跨度,表单例：表单Heading AHeading BHeading CCell A & DCell BCell CCell ECell F,实体,HTML文档中出现的很多字符不

15、可能通过输入直接放入HTML文档中，这些字符包括对HTML有特殊意义的字符，如，“”字符，以及许多键盘上找不到的国际字符和印刷字符。 可以用实体（Entities）把这些字符放在文档中，实体是若干个文本片段，它们一起表示单个字符。其一般语法包括一个“&”号、一个表示字符的名字及一个分号。,保留字符 保留字符是HTML中用于其它目的的普通字符，如果按原样输入则会引起混乱。,HTML标准单位,在编辑HTML文件时，会涉及到对各种元素属性的赋值。例如，定义标题的大小、定义文本的格式、定义图像的位置、定义水平线和表格的长宽、定义文字和背景的颜色、定义链接的指向位置等。通常用各种数据来为这些属性赋值。,

16、HTML标准单位,长度单位 可以用来定义水平线、表格边框、图像等对象的长、宽、高等一系列属性，同时也能用来定义这些对象在网页上的位置等属性。 长度的表示有两种方式：绝对长度和相对长度。 它们的单位分别为像素（pixel）和百分比（），像素代表屏幕上的各个显像点，而相对长度则描述了对象在浏览器窗口的所占的比例。,HTML标准单位,一般在网页设计中较少使用绝对长度，因为浏览器窗口可随时调整大小，如果水平线设置为绝对长度很容易造成不协调，而使用相对长度来描述则对象会随浏览器窗口大小变化而变化。,HTML标准单位,颜色单位也是描述网页表现形式中应用很频繁的一种数据类型。在设计网页的过程中，需要能定义字

17、体、页面背景、表格背景甚至超链接的颜色，通过利用颜色数据来定义这些对象的颜色属性。,HTML标准单位,颜色单位有三种表达的方式： 十六进制的颜色代码 Red Characters 十进制颜色码Blue 颜色名码 Green Characters ,HTML标准单位,统一资源定位器(URL)路径是一种因特网资源地址的表示法。在HTML中，URL路径又分为两种形式：绝对路径和相对路径。 绝对路径是将主机地址和主机上资源发布目录的路径和资源名称进行完整的描述。如:,HTML标准单位,相对路径则是相对于当前的网页所在目录或站点根目录的路径。如:,链接,链接标记符：开始标记： 结束标记： 在这两个标记符

18、之间的内容将被显示为带下划线的和特殊颜色的。当用户单击带下划线文本时，便向“location”地址发出请求。,链接例：我的信箱 北大bbs,表单,表单标记： 由若干控件组成的，用于实现和用户的交互，使网页具有交互能力。,框架,框架标记： 也称为帧，可以用来将浏览器窗口划分为多个区域（即窗格）。多个框可以同时显示在同一个浏览器窗口中，它们组成了一个最大的框架,称为主框架。,3、网站发布,公司或单位可以向ISP申请独立的域名与IP地址，然后创建独立的Web站点； 个人用户可以在网络上免费申请一个空间，将自己的站点发布在提供免费网页空间服务的Web站点上。,提供免费或收费空间的站点： 万网：http

19、:/ 中国人：http:/ 西陆空间：http:/ 网易X空间：http:/,选择免费主页服务站点时应主要考虑提供的空间大小、访问速度和附带的免费服务功能等几个因素。 空间大小：有的不限制使用空间的多少，有的却只能让你用上20MB、50MB、100MB 附带的免费服务功能：具体服务千差万别，有的仅提供空间，有的还附带提供免费的域名、邮件地址、计数器、聊天室、论坛、留言板、CGI和ASP支持,网站发布的基本步骤： 向ISP或网络管理员申请站点，经批准后获得以下信息 网站地址（即Web地址，如） 网站的IP地址（如为独立站点，需要提供新网站的IP地址，如果只是其它网站的一部分，则不需要网站的IP地

20、址） 用户名和密码,如果用户的计算机没有通过专线连入Internet，需找一个出租Web存放空间的供应者（Web Preservation Provider, WPP）。WPP提供Internet的拨号访问以及网页的硬盘存储。 发布网站将网站中所有的文件及文件夹复制到网络服务器上指定的文件夹中 对不同的服务器有不同的方法，如利用FTP上传文件、E-mail寄去、在线上传等,4、设置Web服务器,将自己的计算机当作Web服务器，其步骤为： 安装Internet信息服务IIS 依次选择【开始】 【设置】 【控制面板】 【添加/删除程序】，在打开的对话框中单击【添加/删除Windows组件】按钮，在

21、弹出对话框中选中【Internet信息服务（IIS）】 复选框，然后单击【确定】按钮即可。,依次选择【开始】 【程序】 【管理工具】 【Internet服务管理器】，在打开的窗口中选择【默认Web站点】，显示“C:inetpubwwwroot”中的内容 。 在IE浏览器的地址栏中输入http:/localhost，就可以显示IIS欢迎字样，表示安装成功。 发布站点将自己制作的网站文件夹复制到“C:inetpubwwwroot”下，就可以通过在浏览器地址栏中输入http:/localhost/www/index.htm访问网站。其他人如果想通过网络访问，则可以输入“http:/你的IP地址/www/index.htm”,