第一章网页制作基础课件.ppt

1、第第1章章 网页制作基础网页制作基础网页设计与制作网页设计与制作 南海学院计算机系制作2022-11-222第第1 1章章 网页制作基础网页制作基础 2022-11-223 URLvInternetInternet上所有的资源都有一个唯一的上所有的资源都有一个唯一的URLURL地址，一般将地址，一般将URLURL地址称为网址。地址称为网址。URL的完整格式如下：的完整格式如下：协议:/主机名（或IP地址）：端口号/路径名/文件名2022-11-224【例】几个例】几个URLURL的例子的例子.（1 1）http:/http:/，用，用httphttp协议和缺省端口号（协议和缺省端口号（8080

2、）访问微软公司）访问微软公司服务器服务器。这里没有指定路。这里没有指定路径和文件名，所以访问的结果是把一个缺省径和文件名，所以访问的结果是把一个缺省主页送给浏览器。主页送给浏览器。（2 2）ftp:/ （3 3）http:/gnacademyhttp:/gnacademy.org:8001/uu-.org:8001/uu-gna/index.htmlgna/index.html，从运行在端口号，从运行在端口号80018001的的gnacademygnacademy.org.org服务器上访问服务器上访问index.htmlindex.html主页。主页。（4)http:/www.w3.org/

3、Addressing/URL/5-4)http:/www.w3.org/Addressing/URL/5-BNF.html#httpaddressBNF.html#httpaddress，访问，访问www.w3.org www.w3.org 服务器服务器上上Addressing/URLAddressing/URL目录下的目录下的5-BNF.html 5-BNF.html 网页文件网页文件中锚点标识为中锚点标识为httpaddresshttpaddress的地方。的地方。2022-11-226浏览器浏览器v概述v分类 Internet ExplorerNetscape NavigatorMosa

4、ic等专业浏览器以及一些以上述浏览器等专业浏览器以及一些以上述浏览器为内核的专用浏览器。为内核的专用浏览器。其中使用最广泛的是其中使用最广泛的是Microsoft出品的出品的Internet Explorer 6.0（简称（简称IE6）。）。2022-11-227IE6的界面标题栏工具栏菜单栏地址栏状态栏浏览窗口2022-11-228“停止”按钮前进和后退刷新页面改变文字大小选择编码全屏幕显示查看源文件 2022-11-229 用菜单栏上的用菜单栏上的“文件文件”“新建新建”“窗口窗口”，会，会打开一个新的浏览器窗口。打开一个新的浏览器窗口。一般情况下，打一般情况下，打开四、五个窗口可以开四、

5、五个窗口可以充分利用系统资源，充分利用系统资源，而且通过调整窗口的而且通过调整窗口的大小和位置还可以同大小和位置还可以同时浏览。时浏览。2022-11-2210 浏览器在打开浏览器在打开时自动调入的网页时自动调入的网页称为称为“主页主页”，主，主页可以通过页可以通过“工工具具”“Internet选选项项”打开打开Internet选项对话框，在选项对话框，在“常规常规”选项卡的选项卡的“主页主页”栏设置栏设置.2022-11-2211 使用菜单使用菜单“收收藏藏”“添加到收添加到收藏夹藏夹”打开添加到打开添加到收藏夹对话框。收藏夹对话框。2022-11-2212 使用菜单使用菜单“收藏收藏”“整

6、理收藏夹整理收藏夹”打开收打开收藏夹整理对话框，进行收藏夹中网页的移动、藏夹整理对话框，进行收藏夹中网页的移动、删除、改名及创建新文件夹等操作。删除、改名及创建新文件夹等操作。2022-11-2213 在网络速度较慢时，在网络速度较慢时，不观看网页中的图片和不观看网页中的图片和其它多媒体内容可以得其它多媒体内容可以得到更快的下载速度。通到更快的下载速度。通过过“工具工具”“Internet选项选项”打开打开Internet选项选项对话框，在对话框，在“高级高级”选选项卡中可以对浏览器的项卡中可以对浏览器的工作方式进行设置工作方式进行设置 2022-11-2214 通过工具通过工具Interne

7、t选项，打开选项，打开Internet选项对话框，在选项对话框，在“内内容容”选项卡的选项卡的“个人个人信息信息”部分单击部分单击“自自动完成动完成”按钮打开自按钮打开自动完成设置对话框动完成设置对话框。2022-11-2215搜索引擎的使用1、使用浏览器的“搜索”按钮2、使用专门的搜索引擎 http:/ (Google)http:/ (摆渡)http:/ (雅虎)http:/ (搜狐)2022-11-2216认识网站v1.门户网站v2.个人网站v3.专业网站v4.职能网站2022-11-22171.门户网站 这类网站是一种综合性网站，涉及领域非常广泛，包含文学、音乐、影视、体育、新闻和娱乐等

8、方方面面的内容，具有论坛、搜索和短信等功能。现在国内较著名的门户网站有搜狐（）、网易（）等。2022-11-22182.个人网站v个人网站具有较强个性化，是以个人名义开发创建的网站，其内容、样式、风格等都是非常有个性的。2022-11-22193.专业网站v这类网站具有很强的专业性，通常只涉及某一个领域，内容专业。如榕树下网站（）即是一个专业文学网站。2022-11-22204.职能网站v职能网站具有专门的功能，如政府职能网站等。目前逐渐兴起的电子商务网站也属于这类网站，较有名的电子商务网站有阿里巴巴（）、卓越网（）和当当网上书店（）等。2022-11-2221认识网页Flash动画导航栏GI

9、F动画文字表单图片超级链接2022-11-2222v网页中的元素网页中的元素1.文字文字2.图像图像3.表单表单4.Flash动画动画5.表格表格6.超级链接超级链接7.视频、音频视频、音频8.POP窗口窗口9.标题栏和状态栏文字标题栏和状态栏文字2022-11-22232022-11-2224 下面就是网页结构的总体框架：2022-11-2225（1）版本信息）版本信息 版本信息位于版本信息位于HTML网页文件的第一行网页文件的第一行（2）HTML文件标记文件标记 大部分网页文件都是以大部分网页文件都是以标记开始的，在文件标记开始的，在文件的结尾处又以的结尾处又以结束结束（3）头部信息）头部

10、信息 HEAD标记之间是标记之间是HTML文档的头部，用来标明当前文档文档的头部，用来标明当前文档的有关信息的有关信息 在在HEAD标记之间，使用频率最高的标记就是标记之间，使用频率最高的标记就是TITLE，它用于定义显示在浏览器标题栏的文档标题。，它用于定义显示在浏览器标题栏的文档标题。2022-11-2226【例】给网页设置【例】给网页设置“励志学社励志学社”的文档标的文档标题，可在头部输入以下代码：题，可在头部输入以下代码：励志学社励志学社2022-11-2227（4）主体标记）主体标记 网页的主体是网页的主体是“”标记标记对作用的范围对作用的范围 标记用于定义标记用于定义HTML文档主

11、体的开始，文档主体的开始，它能够设置网页的背景图像、背景颜色、链接颜色它能够设置网页的背景图像、背景颜色、链接颜色和网页边距等属性，其基本用法如下所示：和网页边距等属性，其基本用法如下所示：Bgcolor为背景颜色。关于颜色的值后面会详为背景颜色。关于颜色的值后面会详细介绍。细介绍。Text为不包含超级链接的文字颜色。为不包含超级链接的文字颜色。Link为超级链接文字的颜色。为超级链接文字的颜色。Alink为正被点击的超级链接文字的颜色。为正被点击的超级链接文字的颜色。2022-11-2228Leftmargin、Topmargin用于设置网页的左用于设置网页的左边距和上边框，它们是以像素为单

12、位边距和上边框，它们是以像素为单位【例【例1】将网页的上边距和左边距分别设置为】将网页的上边距和左边距分别设置为40和和30个像素的宽度，使用黑色文本、白色背景，个像素的宽度，使用黑色文本、白色背景，未访问的链接源采用蓝色，已访问的链接源标记未访问的链接源采用蓝色，已访问的链接源标记为暗红色。为暗红色。Vlink为已经点击过的超级链接文字的颜色。为已经点击过的超级链接文字的颜色。Background设置，如果设置了背景图片，设置，如果设置了背景图片，图片会覆盖已经设置的颜色。图片会覆盖已经设置的颜色。2022-11-2229XML（eXtensible Markup Language）被称作是

13、下一代的网页标）被称作是下一代的网页标记语言，也是采用各种标记来形成网记语言，也是采用各种标记来形成网页的源代码。页的源代码。XML中包括可扩展格式语言中包括可扩展格式语言XSL(Extensible Style Language)和和可扩展链接语言可扩展链接语言XLL(Extensible Linking Language)。2022-11-2230静态网页指基本上全部使用静态网页指基本上全部使用HTML语言制作的网页，页面的语言制作的网页，页面的内容是固定不变的。内容是固定不变的。动态网页（动态网页（DynamicHTML，DHTML）利用）利用JavaScript，CSS(层叠样式表层叠

14、样式表)及其它类似的语言如及其它类似的语言如VBScript等与等与HTML进行有机的结进行有机的结合来使静态的合来使静态的HTML网页变成动态。网页变成动态。2022-11-2231专业的网站都是建立在使用数据库的专业的网站都是建立在使用数据库的基础上的，要将这些数据库变成可以通过基础上的，要将这些数据库变成可以通过浏览器显示和操作的浏览器显示和操作的Web页面，就需要编页面，就需要编写服务器端的程序。用户向服务器传送提写服务器端的程序。用户向服务器传送提交的表单（个人信息、选择结果等）需要交的表单（个人信息、选择结果等）需要在服务器端进行记录、筛选等处理。大量在服务器端进行记录、筛选等处理

15、。大量的数据库查询、修改处理也需要服务器端的数据库查询、修改处理也需要服务器端程序的支持。程序的支持。目前常用的服务器端编程技术主要有目前常用的服务器端编程技术主要有CGI、ASP、PHP、JSP等，不同的技术等，不同的技术需要不同的系统环境支持。需要不同的系统环境支持。2022-11-2232 1、确定网页的内容、确定网页的内容 2、设计网页的组织结构、设计网页的组织结构 3、资料的收集与整理、资料的收集与整理 4、选择网页的设计方法、选择网页的设计方法常用的网页制作工具有常用的网页制作工具有Frontpage、Dreamweaver等。服务器端的等。服务器端的ASP程序可以使用程序可以使用

16、Visual Interdev、UltraDEV等编辑。等编辑。2022-11-2233开始网页制作v构建页面框架v创建导航条v填充内容v创建返回主页连接2022-11-2234网页制作的原则v站点要有创意v整体规划v动画不能过多v导航要明朗v制作通用网页v主题鲜明v优化图象v定时更新2022-11-2235 1、网页的标题要简洁，明确。、网页的标题要简洁，明确。2、在文本中要使用水平线，以分割不同部分。、在文本中要使用水平线，以分割不同部分。3、对重点段落要强调显示。、对重点段落要强调显示。4、网页中插入的图片要尽量的小。、网页中插入的图片要尽量的小。5、图形要附加文字说明，以便关闭图像时查

17、、图形要附加文字说明，以便关闭图像时查看。看。6、网页中引用的资料及商标（或图标），不、网页中引用的资料及商标（或图标），不能侵犯版权。能侵犯版权。2022-11-2236Macromedia Studio MX2004是目前应用最是目前应用最广泛的网页制作工具组件，使用方便、功能齐全，广泛的网页制作工具组件，使用方便、功能齐全，Dreamweaver、Flash、Fireworks被称作被称作“网页网页三剑客三剑客”。在在Dreamweaver 里用丰富的层叠样式表制作耐看，里用丰富的层叠样式表制作耐看，专业的网站。专业的网站。Macromedia Flash 工具可较快的制作工具可较快的制作 SWF 文件。文件。Fireworks通过自动变形，用动的效果，图片编通过自动变形，用动的效果，图片编辑工具和拖拽工具能传送较精彩的辑工具和拖拽工具能传送较精彩的 Fireworks 图片。图片。2022-11-2237