第12部分网页制作和网站建设.ppt

《第12部分网页制作和网站建设.ppt》由会员分享，可在线阅读，更多相关《第12部分网页制作和网站建设.ppt（103页珍藏版）》请在三一办公上搜索。

1、2023/5/13,第12章 网页制作和网站建设,2023/5/13,本章内容,12.1 网页基础12.2 HTML语言12.3 Dreamweaver CS4的使用12.4 网站的发布和维护,2023/5/13,网页是互联网上的基本文档，是用HTML或其他语言(JavaScript、VBScript、ASP、JSP、PHP、XML等)编写的。网页本质上就是一个存放在互联网中某个Web服务器上的文件。当用户访问该网页时，存放网页的服务器把网页传送到用户计算机，通过网页浏览器解读并展示出来。访问一个网站时，打开的第一个网页称为主页(Homepage)，也叫首页。,12.1 网页基础,2023/5

2、/13,12.1.1 网页的分类12.1.2 网页的基本构成12.1.3 网页常用制作工具12.1.4 网站制作流程,12.1 网页基础,2023/5/13,1.静态网页静态网页是指纯HTML格式的网页，一般以.htm、.html、.shtml或.xml为后缀名。访问者请求浏览时，网页在Web服务器中不会发生动态改变。,12.1.1 网页的分类,2023/5/13,静态网页的特点：(1)有固定的URL，而且URL以.htm、.html、.shtml等常见形式为后缀，不包含“?”。(2)静态网页的内容保存在网站服务器上，每个静态网页都是一个独立的文件。(3)相对稳定，因此容易被搜索引擎检索。(4

3、)无数据库支持，在网站制作和维护方面工作量较大。(5)交互性差，在网页功能实现方面相对较弱。静态网页的浏览：浏览器向Web服务器发出访问静态网页的请求，Web服务器接受请求后直接将网页传到浏览器，浏览器解读HTML文件后显示。,12.1.1 网页的分类,2023/5/13,2.动态网页动态网页一般指用ASP、PHP、JSP或.NET等网络编程语言编写的运行于服务器端的代码。动态网页除了静态网页的元素外，还包含一些浏览器和Web服务器交互的应用程序。动态网页里很多信息存放在数据库中，当访问者单击相应的链接时才动态生成网页。常见的动态网页后缀名有.asp、.jsp、.aspx、.cgi、.php等

4、，访问动态网页网址中有一个标志性的“?”。浏览器发出动态网页请求后，服务器对代码进行编译后生成HTML代码。,12.1.1 网页的分类,2023/5/13,动态网页的特点：(1)有数据库支持，可以降低网站维护的工作量。(2)交互性好，可以实现更多的功能，如：用户注册、在线调查、订单管理等。(3)动态网页并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。(4)在搜索引擎检索方面不如静态网页效果好，因此网站在进行搜索引擎推广时要做一定的技术处理才能较好地被检索到。,12.1.1 网页的分类,2023/5/13,(1)文字：需考虑文字的内容和整体效果。(2)图像：为了不

5、影响网页传输速率，网页的图片不能太大，常用的图片格式有GIF和JPEG，二者容量较小且具有跨平台的特性，可在不同操作系统支持的浏览器上显示。(3)超链接：从一个网页指向另一个目的地的链接。(4)表格：主要作用是控制网页其他元素的布局方式。(5)动画：常用的动画格式有GIF和SWF。GIF动画的原理就是高速连续显示多幅静态图片，SWF动画是用Flash软件制作的矢量动画。(6)其他元素：音频、视频、表单、脚本语言编写的特效(如：图片滚动)等。,12.1.2 网页的基本构成,2023/5/13,网页设计软件有3类：网页编辑工具 动画制作工具 图形图像处理工具(1)网页编辑工具：FrontPage、

6、DreamveaverFrontPage：Microsoft产品。使用简单、容易上手、功能也比较强大，缺点是兼容性不好、对动态网页支持不好。Dreamveaver：Adobe产品。目前应用最为广泛，它是一款集网页制作和管理网站于一身的所见即所得网页编辑器，可以对HTML网页文件进行可视化编辑，还集成了程序开发语言。,12.1.3 网页常用制作工具,2023/5/13,(2)动画制作工具：FlashFlash：交互式动画设计工具，可以将音乐、声效和动画方便地融合在一起。采用矢量绘图技术，因此放大后也不会失真，且容量小。(3)图形图像处理工具：Photoshop、Fireworks、CorelDR

7、AW、Illustrator一般网页设计中使用Photoshop和Fireworks处理图形图像。Photoshop：Adobe产品。总体功能可分为图像编辑、图像合成、校色调色及特效制作等部分。,12.1.3 网页常用制作工具,2023/5/13,(1)网站定位 明确客户要求制作一个什么样的网站。(2)收集网站素材和策划栏目内容 可以让客户提交一份网站的栏目计划书，收集整理网站素材、确定栏目内容后一般要起草栏目规划书备案。(3)提出页面设计方案 主要是美工根据前面的网站定位和栏目策划来设计页面，包括主页和二级页面。,12.1.4 网页制作流程,2023/5/13,(4)制作页面 把美工设计的页

8、面变成网页格式，通常是利用切片工具分割图片，保存成网页格式文件。注意区分网站中的静态页面和动态页面。(5)程序设计 把网页串联起来，结合数据库，实现后台功能。(6)测试发布 网页和程序整合好后，进行本地测试，主要测试链接的有效性、浏览器中的显示效果等。之后上传到客户的服务器中，由客户检测试用，并根据客户反馈意见修改。,12.1.4 网页制作流程,2023/5/13,HTML是构成网页文档的标记语言。HTML文件是纯文本文件，无需编译即可运行。HTML通过标记把文字、图片、多媒体等各种网页元素组织形成网页。HTML的格式非常简单，只是由文字及标记组合而成，基本上只要明白了各种标记的用法便掌握了H

9、TML。,12.2 HTML语言,2023/5/13,12.2.1 HTML文档结构12.2.2 文本控制12.2.3 表格12.2.4 超级链接12.2.5 图像12.2.6 表单12.2.7 层叠样式表单,12.2 HTML语言,2023/5/13,HTML文件包含两部分：头信息部分和正文部分。包围的是HTML语言的标记，用来控制网页中各元素的显示状态。HTML文件的一般结构：头信息部分 正文部分,12.2.1 HTML文档结构,2023/5/13,1.标签对位于HTML文档的开头和结束位置，左标签为开始的标志，右标签为结束标志。2.标签对之间的内容定义了HTML文档的头信息部分，包含了网

10、页的一些基本信息。标签对间的内容不会在浏览器的文档窗口中显示。,12.2.1 HTML文档结构,2023/5/13,例：这是一个头信息的例子，这是网页标题 Document.write(Hello net.)正文部分,12.2.1 HTML文档结构,2023/5/13,(1)：网页标题，显示在浏览器窗口的标题栏。若无命令，则在浏览器的窗口标题栏显示网页的URL。(2)：单标签。指定网页的背景音乐。src属性：背景音乐文件的路径和文件名。loop属性：播放次数，-1表示循环播放。(3)：单标签。设置文档浏览时所用的默认语言。gb2312或gb2312-80是一个简体中文字符集的中国国家标准。,1

11、2.2.1 HTML文档结构,2023/5/13,(4)：标签对里面的代码是浏览器执行一些动作的脚本代码，通常是用脚本语言编写的，如：JavaScript、VBScript等。脚本script是使用一种特定的描述性语言，依据一定的格式编写的可执行文件，又称作宏或批处理文件。脚本程序可以使用户和网页进行交互，但有些脚本程序会被植入病毒，通过浏览器菜单“工具”“Internet选项”“安全”，可设置脚本的禁用和启用。,12.2.1 HTML文档结构,2023/5/13,3.定义了HTML文档的主体部分，标签对之间是实际要在浏览器窗口中显示的内容和其他用于控制网页元素显示方式的标签。text属性：整

12、个网页中的文字颜色。颜色取值采用十六进制的红绿蓝(red-green-blue,RGB)值表示，即#rrggbb。link属性：未阅读过的超链接文本的颜色。alink属性：活动的超链接文本(鼠标移动到超链接上未按下时)的颜色。vlink属性：访问过的超链接文本的颜色。,12.2.1 HTML文档结构,2023/5/13,background属性：背景图像文件。bgcolor属性：背景颜色。同时设定背景图像和背景颜色时，背景图像优先。leftmargin属性、topmargin属性：分别为网页显示画面与浏览器窗口左边沿、上边沿的距离，单位为像素。bgproperties属性：页面背景图像的特性，

13、值为“fixed”表示页面背景图像为固定，不随页面的滚动而滚动。,12.2.1 HTML文档结构,2023/5/13,1.字体属性(1)分别表示6种大小不同的标题字体，表示的字体最大，表示的字体最小，标题标签间的内容显示为黑体字。(2)color属性：字体颜色，用6位十六进制的数字或颜色名表示。如：要把文字设为红色 红色字体 红色字体size属性：字体大小，分为7个等级，1号字体最小，7号字体最大。如：设为7号字体,12.2.2 文本控制,2023/5/13,face属性：字体。如：仿宋体文字 注：若浏览者的计算机上没有安装设置的字体，文字将以标准字体显示。face属性允许列出多个字体，用逗号

14、分隔，浏览器会根据顺序使用合适的字体显示。特殊的字体显示样式：粗体斜体 上标下标 大字体小字体 下划线、删除线 打字机等间距字体,12.2.2 文本控制,2023/5/13,2.文本布局(1)：创建一个段落。align属性：说明对齐方式，取值为left(左对齐)、center(居中)、right(右对齐)。(2)：单标签，在网页中显示一个换行。(3)：防止浏览器将标签对中过长的内容自动换行显示。对住址、数学算式、一行数字、程序代码等尤为有用。(4)：按缩进效果显示，与普通文本文件中使用Tab键缩进效果一样。,12.2.2 文本控制,2023/5/13,(5)：在页面的水平方向居中显示。(6)：

15、移动显示图形和文本元素。direction属性：指定移动方向，取值为left、right、down、up。behavior属性：指定移动行为，取值为scroll、alternate、slide。(7)、：创建定义式列表。：可单标签。列表中的上层项目，即列表项目标题。：可单标签。列表中最下层项目，即列表项。,12.2.2 文本控制,2023/5/13,例：一个定义式列表 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约,12.2.2 文本控制,2023/5/13,(8)、：创建有编号列表，每个列表项前的前导记号为按顺序自动累加的数字编号。：创建无编号列表，每个列表项前有一个前导记号(B

16、ullet，通常为一个黑圆点、空心圆点、方形黑点)。：可单标签。创建有编号列表和无编号列表的列表项。,12.2.2 文本控制,2023/5/13,例：一个有编号列表+一个无编号列表 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约,12.2.2 文本控制,2023/5/13,表格组成：行Rows、列Columns、单元Cell。1.：定义表格区段，其他表格命令必须置于这个标签间。border属性：表格的边框线粗细。缺省为1，表示表格边框线粗细为1像素；取值为0或无border属性表示表格没有边框线。cellspacing属性：单元格间距，指表格内单元格之间的距离，及单元格和表格上下左

17、右边框的距离，缺省值为3。cellpadding属性：单元格边距，指单元格内容与单元格边框上下左右四个方向的距离，缺省值为3。,12.2.3 表格,2023/5/13,width属性：表格宽度。取值是像素或百分比。若width的像素值大于显示器分辨率宽度，将出现滚动条。实际应用中常使用百分比，则表格宽度将会随窗口显示宽度而自动调整。bgcolor属性：表格背景色。取值是RGB或颜色名。background属性：表格背景图片。取值为图片地址。注：bgcolor与background同时设置时，background优先。bordercolor属性：表格边框线颜色。只有当边框线border不为0时，

18、此属性才起作用。align属性：表格对齐方式，取值left(默认)、center、right。,12.2.3 表格,2023/5/13,2.：可单标签。表格行。align属性：同一行文字水平方向的排列方式，取值left(默认)、middle、right。valign属性：同一行垂直方向的排列方式，取值top、middle(默认)、bottom、baseline。3.：可单标签。表格单元格。rowspan属性：单元格行高。colspan属性：单元格列宽。align属性：水平方向的排列方式，优先于。valign属性：垂直方向的排列方式，优先于。bgcolor属性：单元格背景色，优先于。backgr

19、ound属性：单元格背景图片，优先于。,12.2.3 表格,2023/5/13,4.：可单标签。定义表格列名，缺省的表头字体为粗体且居中。有三个属性：rowspan、colspan、valign。5.：定义表格标题。align属性：取值为top或bottom，表示标题位于表格正上方或正下方居中显示，缺省为top。,12.2.3 表格,2023/5/13,例：1行，1单元 1行，2单元 2行，1单元 2行，2单元,12.2.3 表格,2023/5/13,建立超链接的基本样式：click herehref属性：指定超链接的目标，value的引号可省略。click here：可以是文字、图片等，以特

20、殊方式显示。超链接的目标可以是站外地址、同一网站内部、同一网页不同位置。1.站外链接 站外链接是指单击超链接打开站外页面，通常链接目标位置写的是一个网址或是一个绝对地址。,12.2.4 超级链接,2023/5/13,2.站内链接 站内链接是从站内的一个页面链接到另一个页面，链接目标只要写相对地址。站内链接目标的写法一般有以下4种：例1：站内链接1 链接起始文件和bbs文件夹在同一目录下。“./bbs”代表当前目录下的bbs文件夹，“./”可省略。例2：站内链接2 链接起始文件的上一层目录下有bbs文件夹，“.”表示上一层目录。例3：站内链接3 根目录下有admin文件夹，第一个“/”表示根目录

21、。例4：站内链接4 链接起始文件与目标文件位于同一目录下。,12.2.4 超级链接,2023/5/13,3.锚点 若一个页面内容很多，可在页面不同位置设置锚点标记，单击超链接跳转到同一页面的相应位置。首先设置跳转目标点，即锚点：“锚点名称”由用户命名，右标签可缺省。然后设置链接起始点，即鼠标单击的位置：click here,12.2.4 超级链接,2023/5/13,例：第一章 第二章 第三章 第四章 第五章 第六章 第一章这是第一章内容第二章这是第二章内容第三章这是第三章内容第四章这是第四章内容第五章这是第五章内容第六章这是第六章内容,12.2.4 超级链接,2023/5/13,src属性：

22、必选属性，指明图片的位置和名称。width和height属性：设定图片在网页中的显示尺寸，值可以是像素和百分比。如：border属性：在图片周围加上边框，设定边框线的粗细。如：alt属性：图片不能正常显示时，则显示alt属性中设置的替代文字。如：,12.2.5 图像,2023/5/13,表单的功能：表单用在动态网页中，提供给用户输入数据的界面。表单中的数据传送到服务器后，由服务器端的CGI(Common Gateway Interface,通用网关界面)程序处理。CGI：一套定义WWW服务器和脚本程序沟通的标准。脚本程序：位于服务器端的一些可执行程序，用来接收、处理客户端送来的信息，并可把处理

23、结果再送回客户端。CGI程序：位于服务器端符合CGI标准的脚本程序。,12.2.6 表单,2023/5/13,CGI程序的典型应用 在服务器端建立一个具有各种表单格式的HTML文件，用户在客户端使用浏览器调用这个HTML文件，并在表单中输入相应的资料或信息，然后将表单中的内容发送到服务器端，服务器则启动一个相应的CGI程序对这些内容进行处理，也可将处理结果送回客户端浏览器中。CGI最著名的应用为BBS。,12.2.6 表单,2023/5/13,1.：产生表单，标明“表单区段”。method属性：用户输入数据传送到服务器端的方式，取值post、get。action属性：指定服务器处理表单的CGI

24、程序。,12.2.6 表单,2023/5/13,2.：产生输入控件。,12.2.6 表单,单行文字框,选择按钮,复选框,发送按钮,重置按钮,2023/5/13,type属性：产生不同的输入控件。text：单行文字框(Text Box)，用户输入一般信息使用。radio：选择按钮(Radio Button)，产生具有单一选择结果的圆点。checkbox：复选框(Check Box)，产生具有多重选择的方框，表示选中。password：密码文字框(Password)，类似text单行文字框，用于输入密码，不显示在屏幕上。submit：发送按钮(Submit Button)，产生一个按钮，用户按下时

25、即将表单中用户输入的数据送到服务器端，供CGI程序处理。reset：重置按钮(Reset Button)，恢复默认值，供用户重新输入。,12.2.6 表单,2023/5/13,name属性：指定输入控件的名称，可任意取变量名。value属性：设定输入控件的默认值或用户输入的内容，对于按钮则指定按钮上标示文字。maxlength属性：输入文字框的最大可输入字符数。size属性：输入文字框的显示宽度(以字符数计算)。checked属性：将选择按钮或复选框置为已选状态。,12.2.6 表单,注：当按下“发送”按钮时，实际上是将name和value的内容发送。,2023/5/13,例：浏览器中的显示结

26、果见上图。姓名：性别：男 女 系别：计算机工程系 电气工程系 机械工程系 机电工程系 管理工程系 个人爱好（可复选）：文学 书法 体育 音乐 绘画 收藏,12.2.6 表单,2023/5/13,3.：多行文字框，产生附加滚动条的多行文字框，供用户输入。name属性：指定控件名。rows属性：可见总行数。cols属性：可见总列数。,12.2.6 表单,2023/5/13,例：浏览器中的显示结果见上图。2010年度网络安全十大新闻事件：1.内鬼作乱 2.美国政府加强网络安全建设 3.云计算服务安全问题 4.维基解密掀起轩然大波 5.僵尸网络头目被逮捕 6.黑客多贪财 7.Stuxnet恶意软件攻击

27、核设施 8.苹果再掀风浪 9.安全行业掀起并购狂潮 10.发现安全隐患 通知责任人还是公开发布?,12.2.6 表单,2023/5/13,4.：定义选项区段，与配合使用以产生一个下拉列表框。multiple属性：列表框中的项目可复选。name属性：控件名称。size属性：列表框中可见的项目数。5.：产生选择项目，必须置于区段内，产生列表框中的一个选项。selected属性：将选项设为选中状态。value属性：用户选中该项目时，该项目显示文字可作为默认的回传值，供CGI程序处理。,12.2.6 表单,2023/5/13,例：浏览器中的显示结果见上图。北京市 天津市 上海市 重庆市,12.2.6

28、表单,2023/5/13,层叠样式表单(Cascading Style Sheets,CSS)是用于定义各种样式的一套规范，它的原则是“先定义后使用”，即先定义好一些样式，再把这些样式指定给网页的某些元素。一个网站中的所有页面风格和样式应该是统一的，这样显得整齐和美观，所以通常设计中使用CSS控制网站样式，达到一致性的效果。HTML定义的是网页结构，CSS定义的是网页外观。使用CSS会使网页格式控制变得很灵活。CSS样式可以定义在HTML文档里，也可以单独作为一个文件。CSS样式可以作用于多个页面或整个站点；修改CSS样式，涉及到的网页都会被修改，维护方便。,12.2.7 层叠样式表单,202

29、3/5/13,1.CSS的工作过程例：CSS例1 第一个红色黑体二级标题 第二个红色黑体二级标题,12.2.7 层叠样式表单,：定义CSS样式。：命令间的内容为注解，不会显示。之间定义的是标题的样式。页面中所有的标题都会使用这种样式。,2023/5/13,2.定义CSS CSS样式的定义具有统一格式 如：h2font-family:黑体h2称为选择器。大括号间定义的是各种属性和属性值，属性和属性值间用冒号隔开。多个属性间用分号分开。,12.2.7 层叠样式表单,2023/5/13,(1)标签作为选择器例1：h2标签就是一个选择器。例2：CSS样式：h2 font-family:黑体,Arial

30、,Helvetica;color:red;font-family属性定义了3个属性值，用逗号隔开，表示3种字体可供浏览器按顺序选择，如果都没有，则用默认字体显示。,12.2.7 层叠样式表单,2023/5/13,(2)类作为选择器 类选择器例子 这里使用了c1定义的样式 这里也使用了c1定义的样式,12.2.7 层叠样式表单,作为选择器的类的名称必须以“.”开头，后面跟，里面写属性值。,2023/5/13,3.在HTML中使用CSS HTML中有3种方式使用CSS：(1)在标签中定义CSS。(2)在元素标签中定义CSS。(3)采用链接形式调用CSS文件。前两种方式适合用在定义单一HTML文档时

31、，如果有多个页面用到同样的CSS样式，则采用第3种方式比较好。,12.2.7 层叠样式表单,2023/5/13,(1)在标签中定义CSS把样式定义写在注释标签中，然后放进标签，最后写在HTML文档的标签中。对于类选择器定义的CSS，在文档的标签中要调用它，必须采用Class属性：Class=类选择器名称,12.2.7 层叠样式表单,2023/5/13,(2)在元素标签中定义CSS CSS定义放在部分的各个标签中。,12.2.7 层叠样式表单,例：元素标签中使用CSS例子 这是个使用了CSS样式的标题 这是个普通标题,在元素标签中定义CSS样式和单独设置标签属性效果是一样的，因此在实际中使用不多

32、。,2023/5/13,(3)采用链接形式调用CSS文件把CSS样式单独保存成一个文件，其扩展名为.css，在需要设置样式的页面中以链接的方式调用这个文件。采用链接形式调用外部CSS文件在标签中使用link语句：,12.2.7 层叠样式表单,2023/5/13,例：定义样式文件，保存为“css_test.css”。HTML文件调用css_test。样式文件：.c1 font-family:黑体;font-style:italic;color:red h2 font-family:楷体_GB2312;color:green,12.2.7 层叠样式表单,页面文件：使用链接调用CSS文件的例子 这个

33、标题使用了外部CSS文件中定义的c1类样式 这个标题使用了外部CSS文件中定义的h2样式,2023/5/13,12.2.7 层叠样式表单,2023/5/13,12.3.1 Dreamweaver CS4的工作环境12.3.2 创建和管理本地站点12.3.3 添加页面内容12.3.4 在Dreamveaver中使用CSS,12.3 Dreamweaver CS4的使用,2023/5/13,Dreamweaver CS4的工作界面如图所示：,12.3.1 Dreamweaver CS4的工作环境,2023/5/13,(1)“文档”窗口 设计网页的主要区域，在这个窗口内编辑网页元素，编辑的效果和浏览

34、器中显示的效果近似。(2)“文档”工具栏 对文档进行控制。网页制作时有3种文档视图方式：代码、拆分和设计。代码：“文档”窗口只显示HTML代码。拆分：“文档”窗口分为上下两部分，上面显示HTML代码，下面显示页面效果。设计：“文档”窗口只显示页面效果，用户可进行可视化编辑。,12.3 Dreamweaver CS4的使用,2023/5/13,(3)“插入”面板 向页面中插入元素，通常在“设计”视图下使用。“插入”面板可以插入很多对象，对象分为8个类别：常用、布局、表单、数据、Spry、InContext Editing、文本和收藏夹。(4)“属性”面板 显示页面中被选中对象的属性。(5)“文件

35、”面板 显示网站的所有文件和文件夹，可对文件或文件夹进行新建、删除、重命名等操作。,12.3 Dreamweaver CS4的使用,2023/5/13,首先要创建一个站点，然后才能在站点下创建和设计各个网页。通常情况，网站制作者都是在本机上先制作好网站，然后上传到网络服务器上。本地站点：在本机上创建的站点。远程站点：上传到服务器上的站点。,12.3.2 创建和管理本地站点,2023/5/13,1.创建本地站点单击菜单“站点”“新建站点”，或单击菜单“站点”“管理站点”，在“管理站点”对话框中单击“新建”按钮。创建站点对话框有两个标签：基本和高级。“基本”方式以向导形式进行创建。“高级”方式以目

36、录形式进行创建。,12.3.2 创建和管理本地站点,2023/5/13,“基本”方式创建站点：(1)给站点起个名字，站点的HTTP地址一栏可不填。(2)询问是否使用服务器技术。服务器技术指网站服务器端组件的编程技术，一般有脚本语言(如：JavaScript、VBScript)或动态服务器编程语言(如：ASP、JSP等)。(3)选择文件的操作方式，一般选择“在本地编辑完成后再上传到服务器”；之后，指明本地文件的存放位置。(4)选择连接到远程服务器的方式，可以先选择“无”，等制作完成后再上传到远程服务器。(5)列出前面所填的站点信息(可单击“上一步”返回修改)，单击“完成”按钮，站点建立完毕。,1

37、2.3.2 创建和管理本地站点,2023/5/13,2.创建新文档 站点创建完成后，在本机上会有一个存放网站文件的文件夹。同时在“文件”面板中可看到站点的文件。,12.3.2 创建和管理本地站点,2023/5/13,创建主页文件：主页文件一般放置在站点的根目录，选择目录树最上面一行(即根目录)右键快捷菜单中的“新建文件”，主页一般都以“index”或“default”命名，静态主页扩展名为.htm或.html；动态主页扩展名一般为.asp或.jsp。,12.3.2 创建和管理本地站点,2023/5/13,制作网页的过程就是向创建的文档内添加网页元素的过程，并对它们进行编辑排版。,12.3.3

38、添加页面内容,1.文字在“设计”模式和“代码”模式下添加文字，在相应位置输入即可。对文字格式化：选中文字，在“属性”窗口中修改。导入文件内容：单击菜单“文件”“导入”，选择要导入的文件即可将文件内容导入网页中。,2023/5/13,2.图像网站的图片一般存放在站点下专门的文件夹中。单击菜单“插入”“图像”，打开“选择图像源文件”对话框，找到图片，单击“确定”即可。图片插入后可在“属性”窗口设定图片属性。单击菜单“修改”“图像”，可对图片进行基本的编辑。在实际网页制作中，通常使用专业图像编辑软件处理图片，如：Photoshop、Fireworks等。图像占位符：插入相同尺寸的临时代替图像符号。单

39、击菜单“插入”“图像对象”“图像占位符”。,12.3.3 添加页面内容,2023/5/13,3.表格 单击菜单“插入”“表格”，在弹出的表格设置对话框中，设置行列数、表格宽度、边框粗细、单元格边距、单元格间距，选择表格样式，输入整个表格的标题等。,12.3.3 添加页面内容,2023/5/13,4.超链接(1)文字超链接 选中文字，在“属性”窗口中写入链接的目的地址。方法一：单击文件夹图标打开对话框选择链接目的文件。方法二：鼠标直接按住“指向文件”图标，拖曳到“文件”面板中目的文件上放开。,12.3.3 添加页面内容,指向文件,2023/5/13,(2)图像超链接整幅图片超链接：和文字链接操作

40、相同。图片热点超链接：选择图片中的一部分建立超链接，使用图像“属性”窗口中下面部分的热点工具划定热点区域。,12.3.3 添加页面内容,2023/5/13,(3)锚记链接第一步：在链接目的处，打开菜单“插入”“命名锚记”插入锚记并命名，如：“m2”。第二步：选中需要设置链接的文本，在“属性”面板中“链接”一栏输入“#”和锚记名称，如：“#m2”。,12.3.3 添加页面内容,2023/5/13,锚记链接举例：,12.3.3 添加页面内容,2023/5/13,1.创建样式表启动Dreamweaver，打开某站点的index.htm文件，可看到右侧CSS面板是空的，这说明index.htm文件目前

41、没有应用样式表。打开CSS面板的方法：菜单“窗口”“CSS样式”。,12.3.4 在Dreamweaver中使用CSS,2023/5/13,创建样式表：(1)单击CSS面板的“新建CSS规则”按钮，打开创建样式表对话框。选择创建样式的选择器，选择器类型包括标签、类、ID和复合内容。输入选择器名称，以“.”开头。选择样式表“仅限该文档”还是“新建样式表文件”。前者指样式嵌入当前文档中，只作用于当前文档；后者指把样式表作为一个外部文件保存，以链接的形式作用于文档，并且可被多个文档链接使用。(2)单击“确定”按钮，弹出设置样式属性对话框。可设置样式的很多属性，如字体属性、背景属性、字间距、行间距等。

42、,12.3.4 在Dreamweaver中使用CSS,2023/5/13,在CSS面板中可见创建的样式，如下图所示。因为选择了“仅限该文档”，所以样式处于style中。可重新设置或添加样式的属性。代码窗口的标签中也添加了标签，其中包括样式表内容。“属性”面板的“类”属性也添加了新建的样式。,12.3.4 在Dreamweaver中使用CSS,2023/5/13,12.3.4 在Dreamweaver中使用CSS,2023/5/13,2.使用样式表在网页中使用已创建样式表：把光标在需应用样式的地方单击，然后在“属性”窗口的“类”中选择所需样式即可。,12.3.4 在Dreamweaver中使用C

43、SS,2023/5/13,使用外部独立的CSS文件：单击“属性”面板中的“类”，选择“附加样式表”，在弹出的对话框中找到相应的CSS文件，然后选择“链接”。链接CSS文件后，如下图所示标签中会自动添加语句：CSS面板中能看到外部CSS文件。“属性”面板中能看到CSS文件中的样式，直接选择即可使用。,12.3.4 在Dreamweaver中使用CSS,2023/5/13,12.3.4 在Dreamweaver中使用CSS,2023/5/13,网站系统制作完成以后，还需进行一系列工作：全面、完整的本地测试。为网站申请域名和空间。把本地网站上传到WWW服务器上发布。严格的在线测试。维护、管理和更新网

44、站。,12.4 网站的发布和维护,2023/5/13,12.4.1 网站发布前的准备12.4.2 上传网站12.4.3 网站的推广12.4.4 网站的更新、管理和维护12.4.5 网站评估,12.4 网站的发布和维护,2023/5/13,1.申请域名(1)域名的注册规范 26个英文字母“A”-“Z”(不区分大小写)、10个数字“0”-“9”、英文连字符“-”。注册含有“CHINA”、“CHINESE”等的域名须经国家有关部门(部级以上单位)正式批准。其他国家或地区名、外国地名、国际组织名不得使用。县级及以上行政区划名称的全称或缩写须相关县级及以上人民政府正式批准。行业名称或商品的通用名称不得使

45、用。他人已在中国注册过的企业名称或商标名称不得使用。,12.4.1 网站发布前的准备,2023/5/13,(2)域名的设计原则域名的设计包括域名主体的设计和域名后缀的选择。如：淘宝网的域名()分为域名主体(taobao)和域名后缀(com)两部分。域名主体的设计要与网站的性质、用途相一致。域名后缀分为顶级域名和二级域名。顶级域名：即通常说的国际域名。二级域名：地理级域名，共243个国家和地区的代码。,12.4.1 网站发布前的准备,2023/5/13,(3)域名的注册方法查询所需域名是否已被注册，查询网站：中国互联网络信息中心(CNNIC,)数据库国际互联网络信息中心(InterNIC,)数据

46、库国内负责域名申请事务的公司网站，如：万网(http:/)、新网(http:/)等。填写域名申请表。注册国内域名和国际域名分别通过CNNIC和InterNIC授权代理进行。注册国际域名需提交企业营业执照复印件、盖章的申请表等文件资料，个人或企业都可注册。国内域名只有企业可以注册。,12.4.1 网站发布前的准备,2023/5/13,2.申请网站空间网站空间选择一般有4种形式：(1)自己购买或单独租用服务器(2)采用一些ISP(Internet Service Provider,互联网服务提供商)提供的虚拟主机形式(即收费空间)(3)采用一些网站提供的免费空间(4)动态域名解析方案：利用动态域名

47、解析软件，将自己的计算机设置成服务器。,12.4.1 网站发布前的准备,适用于一些大型网站，如门户。对稳定性要求很高，网站流量也很大。费用高。,适用于更多的普通网站。购买时主要看访问速度、空间大小、稳定程度以及服务内容。,适用于一些小网站，如个人网站，访问流量不是很大，对稳定性要求也不高。,适用于初学者。,2023/5/13,动态域名解析方案配置的基本步骤：(1)找到一个提供动态域名解析服务的网站注册并申请免费的二级域名。国内比较典型的两款动态域名解析软件：广州网域科技公司提供的“花生壳”(http:/)青岛每步科技公司提供的“每步”(http:/)(2)下载动态解析客户端软件，安装并配置好。

48、(3)配置本地计算机的IIS(Internet Information Server,互联网信息服务)。,12.4.1 网站发布前的准备,2023/5/13,3.本地测试(1)网页正确性测试在浏览器中打开网页，逐页测试，保证每一页的显示内容无错误。超链接的正确性，Dreamweaver中的“链接检查器”面板可以进行详细链接管理。(2)网页兼容性测试：测试网页在不同操作系统和浏览器中的显示效果。使用目前较主流的操作系统(如：Windows、Linux)和浏览器进行浏览。测试在同一浏览器中不同分辨率下的显示效果。常用分辨率为800*600、1024*768、1280*800。,12.4.1 网站发

49、布前的准备,2023/5/13,(3)程序及数据库测试 对动态网页程序，在当前设计开发环境中建立本地服务器环境(如：使用IIS)，并测试程序是否能正确执行和使用。,12.4.1 网站发布前的准备,2023/5/13,1.使用Dreamweaver上传(1)单击菜单“站点”“管理站点”，打开管理站点窗口。(2)双击要上传的站点，打开站点定义对话框。(3)选择左边分类的“远程信息”，在访问下拉列表框中选择“FTP”选项，设置FTP各项参数，这些参数在申请网站空间时服务商已提供。单击“确定”按钮，返回“文件”面板。(4)按下“连接到远端主机”按钮，开始连接远程主机。(5)连接成功后，选中要上传的文件

50、(可多选)，单击“上传”按钮进行上传。,12.4.2 上传网站,2023/5/13,2.使用浏览器上传(1)在浏览器地址栏输入从服务提供商处获取的远程FTP地址，在弹出的对话框中输入用户名和密码，进入FTP服务器。(2)“复制”本地文件，“粘贴”到FTP服务器上即可。注：此方法不支持断点续传。3.使用FTP工具上传 使用支持断点续传的专用FTP工具上传，常用的工具软件有LeapFTP、CuteFTP等。,12.4.2 上传网站,2023/5/13,网站的推广主要解决两个问题：提高网站的知名度和访问量。尽可能挽留住浏览过网站的访问者。1.传统媒介推广 通过广播电视、报纸杂志、户外广告和其他一些印