《网页设计与制作》第一章：网页制作基础

第第第第1111章章章章网页制作基础网页制作基础网页制作基础网页制作基础网页设计与制作网页设计与制作网页设计与制作网页设计与制作南海学院计算机系制作2012-2-292第第第第1111章章章章网页制作基础网页制作基础网页制作基础网页制作基础��WebWebWebWebWebWebWebWeb和浏览器和浏览器��WebWebWebWebWebWebWebWeb��WebWebWebWebWebWebWebWeb的特点和结构的特点和结构��WebWebWebWebWebWebWebWeb最大的特点是使用了超文本最大的特点是使用了超文本（（HypertextHypertextHypertextHypertextHypertextHypertextHypertextHypertext））��（（客户机客户机////////服务器）工作模式服务器）工作模式��在浏览器和服务器之间应用在浏览器和服务器之间应用HTTPHTTPHTTPHTTPHTTPHTTPHTTPHTTP（（HyperHyperHyperHyperHyperHyperHyperHyperTextTransferProtocolTextTransferProtocolTextTransferProtocolTextTransferProtocolTextTransferProtocolTextTransferProtocolTextTransferProtocolTextTransferProtocol，，超文本传输协议）超文本传输协议）作为网络应用层通信协议作为网络应用层通信协议2012-2-293�URLURLURLURL�Internet上所有的资源都有一个唯一的URL地址，一般将URL地址称为网址。URLURLURLURL的完整格式如下：协议://主机名（或IP地址）：端口号/路径名/文件名2012-2-294【例】几个URL的例子.（1），用http协议和缺省端口号（80）访问微软公司服务器。这里没有指定路径和文件名，所以访问的结果是把一个缺省主页送给浏览器。（2），用FTP协议访问北京大学FTP服务器上路径名为pub/ms-windows、文件名为winvn926.zip的文件。2012-2-295（3），从运行在端口号8001的gnacademy.org服务器上访问index.html主页。（4)，访问目录下的5-BNF.html网页文件中锚点标识为httpaddress的地方。2012-2-296�浏览器�概述�分类�InternetExplorerInternetExplorerInternetExplorerInternetExplorer�NetscapeNavigatorNetscapeNavigatorNetscapeNavigatorNetscapeNavigator�MosaicMosaicMosaicMosaic等专业浏览器以及一些以上述浏览器为内核的专用浏览器。其中使用最广泛的是MicrosoftMicrosoftMicrosoftMicrosoft出品的InternetExplorer6.0InternetExplorer6.0InternetExplorer6.0InternetExplorer6.0（简称IE6IE6IE6IE6）。2012-2-297�IE6的界面标题栏工具栏菜单栏地址栏状态栏浏览窗口2012-2-298��IE6.0IE6.0IE6.0IE6.0IE6.0IE6.0IE6.0IE6.0的使用的使用��浏览网页浏览网页�“停止”按钮�前进和后退�刷新页面�改变文字大小�选择编码�全屏幕显示�查看源文件2012-2-299��打开多个窗口打开多个窗口用菜单栏上的““““文件””””→““““新建””””→““““窗口””””，会打开一个新的浏览器窗口。一般情况下，打开四、五个窗口可以充分利用系统资源，而且通过调整窗口的大小和位置还可以同时浏览。2012-2-2910��主页、临时文件和历史记录主页、临时文件和历史记录浏览器在打开时自动调入的网页称为““““主页””””，主页可以通过““““工具””””→““““InternetInternetInternetInternet选项””””打开InternetInternetInternetInternet选项对话框，在““““常规””””选项卡的““““主页””””栏设置....2012-2-2911��收藏夹的使用收藏夹的使用使用菜单““““收藏””””→““““添加到收藏夹””””打开添加到收藏夹对话框。2012-2-2912�使用菜单““““收藏””””→““““整理收藏夹””””打开收藏夹整理对话框，进行收藏夹中网页的移动、删除、改名及创建新文件夹等操作。2012-2-2913��关闭图片显示关闭图片显示在网络速度较慢时，不观看网页中的图片和其它多媒体内容可以得到更快的下载速度。通过““““工具””””→““““InternetInternetInternetInternet选项””””打开InternetInternetInternetInternet选项对话框，在““““高级””””选项卡中可以对浏览器的工作方式进行设置2012-2-2914��关闭自动完成功能关闭自动完成功能通过工具→InternetInternetInternetInternet选项，打开InternetInternetInternetInternet选项对话框，在““““内容””””选项卡的““““个人信息””””部分单击““““自动完成””””按钮打开自动完成设置对话框。2012-2-2915�搜索引擎的使用1、使用浏览器的“搜索”按钮2、使用专门的搜索引擎(Google)(摆渡)(雅虎)(搜狐)2012-2-2916�认识网站�1.门户网站�2.个人网站�3.专业网站�4.职能网站2012-2-29171.门户网站这类网站是一种综合性网站，涉及领域非常广泛，包含文学、音乐、影视、体育、新闻和娱乐等方方面面的内容，具有论坛、搜索和短信等功能。现在国内较著名的门户网站有搜狐（）、网易（）等。2012-2-29182.个人网站�个人网站具有较强个性化，是以个人名义开发创建的网站，其内容、样式、风格等都是非常有个性的。2012-2-29193.专业网站�这类网站具有很强的专业性，通常只涉及某一个领域，内容专业。如榕树下网站（）即是一个专业文学网站。2012-2-29204.职能网站�职能网站具有专门的功能，如政府职能网站等。目前逐渐兴起的电子商务网站也属于这类网站，较有名的电子商务网站有阿里巴巴（china.alibaba.com）、卓越网（）和当当网上书店（）等。2012-2-2921�认识网页Flash动画导航栏GIF动画文字表单图片超级链接2012-2-2922�网页中的元素1.文字2.2.2.2.图像3.3.3.3.表单4.Flash4.Flash4.Flash4.Flash动画5.5.5.5.表格6.6.6.6.超级链接7.7.7.7.视频、音频8.POP8.POP8.POP8.POP窗口9.9.9.9.标题栏和状态栏文字　　　　2012-2-29231.21.21.21.21.21.21.21.2　网页制作的相关知识　网页制作的相关知识��HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML语言概述语言概述是一种超文本标记语言，作为一种网页编是一种超文本标记语言，作为一种网页编辑语言，易学易懂。辑语言，易学易懂。2012-2-292411111111、、HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML网页网页HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML网页通常是由三部分内容组成的：网页通常是由三部分内容组成的：版本信息、网页标题（版本信息、网页标题（HEADHEADHEADHEADHEADHEADHEADHEAD））和文档主体和文档主体（（BODYBODYBODYBODYBODYBODYBODYBODY）。）。下面就是网页结构的总体框架：!!!!HTMLHTMLHTMLHTML网页版本信息说明HTMLHTMLHTMLHTMLHEADHEADHEADHEAD!!!!标题标记、属性及其内容////HEADHEADHEADHEADBODYBODYBODYBODY!!!!主体标记、属性及其内容////BODYBODYBODYBODY/HTML/HTML/HTML/HTML2012-2-2925（1111）版本信息版本信息位于HTMLHTMLHTMLHTML网页文件的第一行（2222）HTMLHTMLHTMLHTML文件标记大部分网页文件都是以HTMLHTMLHTMLHTML标记开始的，在文件的结尾处又以////HTMLHTMLHTMLHTML结束（3333）头部信息HEADHEADHEADHEAD标记之间是HTMLHTMLHTMLHTML文档的头部，用来标明当前文档的有关信息在HEADHEADHEADHEAD标记之间，使用频率最高的标记就是TITLETITLETITLETITLE，它用于定义显示在浏览器标题栏的文档标题。2012-2-2926【例】给网页设置““““励志学社””””的文档标题，可在头部输入以下代码：TITLETITLETITLETITLE励志学社////TITLETITLETITLETITLE2012-2-2927（4444）主体标记　　网页的主体是““““BODYBODYBODYBODY……………………/BODY/BODY/BODY/BODY””””标记对作用的范围　　BODYBODYBODYBODY标记用于定义HTMLHTMLHTMLHTML文档主体的开始，它能够设置网页的背景图像、背景颜色、链接颜色和网页边距等属性，其基本用法如下所示：BODYBackground=URLBODYBackground=URLBODYBackground=URLBODYBackground=URLBgclolrBgclolrBgclolrBgclolr=Color=Color=Color=ColorBgpropetiesBgpropetiesBgpropetiesBgpropeties=Fixed=Fixed=Fixed=FixedLeftmarginLeftmarginLeftmarginLeftmargin=nLink=Color=nLink=Color=nLink=Color=nLink=ColorAlinkAlinkAlinkAlink=ColorText=Color=ColorText=Color=ColorText=Color=Co