网页制作初学_第1页
网页制作初学_第2页
网页制作初学_第3页
网页制作初学_第4页
网页制作初学_第5页
已阅读5页，还剩46页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页制作初学第一页，共五十一页，2022年，8月28日第1章网页制作基础Web和浏览器Web的特点和结构Web最大的特点是使用了超文本（Hypertext）WWW采用C/S（客户机/服务器）工作模式在浏览器和服务器之间应用HTTP（HyperTextTransferProtocol，超文本传输协议）作为网络应用层通信协议第二页，共五十一页，2022年，8月28日URL

Internet上所有的资源都有一个唯一的URL地址，一般将URL地址称为网址。

URL的完整格式如下：协议://主机名（或IP地址）：端口号/路径名/文件名第三页，共五十一页，2022年，8月28日4【例】几个URL的例子.

（1），用http协议和缺省端口号（80）访问微软公司服务器。这里没有指定路径和文件名，所以访问的结果是把一个缺省主页送给浏览器。

（2）/pub/ms-windows/winvn926.zip，用FTP协议访问北京大学FTP服务器上路径名为pub/ms-windows、文件名为winvn926.zip的文件。第四页，共五十一页，2022年，8月28日5（3）:8001///uu-gna/index.html，从运行在端口号8001的服务器上访问index.html主页。（4)/Addressing/URL/5-BNF.html#httpaddress，访问服务器上Addressing/URL目录下的5-BNF.html网页文件中锚点标识为httpaddress的地方。第五页，共五十一页，2022年，8月28日浏览器概述分类InternetExplorerNetscapeNavigatorMosaic等专业浏览器以及一些以上述浏览器为内核的专用浏览器。

其中使用最广泛的是Microsoft出品的InternetExplorer6.0（简称IE6）。第六页，共五十一页，2022年，8月28日IE6的界面标题栏工具栏菜单栏地址栏状态栏浏览窗口第七页，共五十一页，2022年，8月28日认识网站第八页，共五十一页，2022年，8月28日门户网站

这类网站是一种综合性网站，涉及领域非常广泛，包含文学、音乐、影视、体育、新闻和娱乐等方方面面的内容，具有论坛、搜索和短信等功能。

现在国内较著名的门户网站有搜狐（）网易（）等。第九页，共五十一页，2022年，8月28日个人网站个人网站具有较强个性化，是以个人名义开发创建的网站，其内容、样式、风格等都是非常有个性的。第十页，共五十一页，2022年，8月28日专业网站这类网站具有很强的专业性，通常只涉及某一个领域，内容专业。如榕树下网站（）即是一个专业文学网站。第十一页，共五十一页，2022年，8月28日职能网站职能网站具有专门的功能，如政府职能网站等。目前逐渐兴起的电子商务网站也属于这类网站，较有名的电子商务网站有淘宝（）、卓越网（）和当当网上书店（）等。第十二页，共五十一页，2022年，8月28日13认识网页Flash动画导航栏GIF动画文字表单图片超级链接第十三页，共五十一页，2022年，8月28日网页中的元素第十四页，共五十一页，2022年，8月28日网页制作的相关知识HTML语言概述

是一种超文本标记语言，作为一种网页编辑语言，易学易懂。第十五页，共五十一页，2022年，8月28日1）HTML网页HTML网页通常是由三部分内容组成的：版本信息、网页标题（HEAD）和文档主体（BODY）。

下面就是网页结构的总体框架：<!HTML网页版本信息说明><HTML><HEAD><!标题标记、属性及其内容></HEAD><BODY><!主体标记、属性及其内容></BODY></HTML>第十六页，共五十一页，2022年，8月28日（1）版本信息版本信息位于HTML网页文件的第一行（2）HTML文件标记大部分网页文件都是以<HTML>标记开始的，在文件的结尾处又以</HTML>结束（3）头部信息

HEAD标记之间是HTML文档的头部，用来标明当前文档的有关信息

在HEAD标记之间，使用频率最高的标记就是TITLE，它用于定义显示在浏览器标题栏的文档标题。第十七页，共五十一页，2022年，8月28日【例】给网页设置“励志学社”的文档标题，可在头部输入以下代码：<TITLE>励志学社</TITLE>第十八页，共五十一页，2022年，8月28日（4）主体标记网页的主体是“<BODY>……</BODY>”标记对作用的范围

<BODY>标记用于定义HTML文档主体的开始，它能够设置网页的背景图像、背景颜色、链接颜色和网页边距等属性，其基本用法如下所示：<BODYBackground="URL"Bgclolr=ColorBgpropeties=FixedLeftmargin=nLink=ColorAlink=ColorText=ColorTopmargin=nVlink=Color>

Bgcolor为背景颜色。关于颜色的值后面会详细介绍。Text为不包含超级链接的文字颜色。

Link为超级链接文字的颜色。

Alink为正被点击的超级链接文字的颜色。第十九页，共五十一页，2022年，8月28日

Leftmargin、Topmargin用于设置网页的左边距和上边框，它们是以像素为单位【例1】将网页的上边距和左边距分别设置为40和30个像素的宽度，使用黑色文本、白色背景，未访问的链接源采用蓝色，已访问的链接源标记为暗红色。<BODYBackground="moom.gif"Bgcolor="White"Bgproperties=FixedLeftmargin=30Link="Blue"Text="Black"Topmargin=40Vlink="Maroon">

Vlink为已经点击过的超级链接文字的颜色。

Background设置，如果设置了背景图片，图片会覆盖已经设置的颜色。第二十页，共五十一页，2022年，8月28日2）XML语言

XML（eXtensibleMarkupLanguage）被称作是下一代的网页标记语言，也是采用各种标记来形成网页的源代码。

XML中包括可扩展格式语言XSL(ExtensibleStyleLanguage)和可扩展链接语言XLL(ExtensibleLinkingLanguage)。第二十一页，共五十一页，2022年，8月28日3）

静态网页和动态网页静态网页指基本上全部使用HTML语言制作的网页，页面的内容是固定不变的。动态网页（DynamicHTML，DHTML）利用JavaScript，CSS(层叠样式表)及其它类似的语言如VBScript等与HTML进行有机的结合来使静态的HTML网页变成动态。第二十二页，共五十一页，2022年，8月28日4）Web服务器端程序专业的网站都是建立在使用数据库的基础上的，要将这些数据库变成可以通过浏览器显示和操作的Web页面，就要编写服务器端的程序。用户向服务器传送提交的表单（个人信息、选择等）需要在服务器端进行记录、筛选等处理。大量的数据库查询、修改处理也需要服务器端程序的支持。目前常用的服务器端编程技术主要有CGI、ASP、PHP、JSP等，不同的技术需要不同的系统环境支持。第二十三页，共五十一页，2022年，8月28日

网页制作的基本方法制作网页的基本步骤常用的网页制作工具有Frontpage、Dreamweaver等。第二十四页，共五十一页，2022年，8月28日网页制作的原则第二十五页，共五十一页，2022年，8月28日制作网页时要注意的问题第二十六页，共五十一页，2022年，8月28日开始网页制作第二十七页，共五十一页，2022年，8月28日MacromediaStudioMX2004

MacromediaStudioMX2004是目前应用最广泛的网页制作工具组件，使用方便、功能齐全，Dreamweaver、Flash、Fireworks被称作“网页三剑客”。在Dreamweaver里用丰富的层叠样式表制作耐看，专业的网站。Fireworks通过自动变形，用动的效果，图片编辑工具和拖拽工具能传送较精彩的Fireworks图片。

第二十八页，共五十一页，2022年，8月28日Dreamweave

8的菜单共有10个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。其中，编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。文件：用来管理文件。例如新建，打开，保存，另存为，导入，输出打印等。

编辑：用来编辑文本。例如剪切，复制，粘贴，查找，替换和参数设置等。

查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。

第二十九页，共五十一页，2022年，8月28日插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。

修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格，对其对象等。

文本：用来对文本操作，例如设置文本格式等。

命令：所有的附加命令项

站点：用来创建和管理站点

窗口：用来显示和隐藏控制面板以及切换文档窗口

帮助：联机帮助功能。例如按下F1键，就会打开电子帮助文本第三十页，共五十一页，2022年，8月28日思考题1.1什么是WWW？什么是网页？1.2一个完整的URL由哪几部分组成？举出几个URL的例子。1.3如何设置IE的主页？如何用IE收藏一个网页？1.4网页中一般都使用了哪些技术？1.5MacromediaStudioMX2004有哪几部分组成？第三十一页，共五十一页，2022年，8月28日1站点设置站点的概念规划站点结构创建站点第三十二页，共五十一页，2022年，8月28日站点的概念多个网页文档通过各种链接关联起来就构成了站点，站点可以小到一个网页，也可以大到整个网站。DreamweaverMX2004提供了3类站点：本地站点、远程站点和测试站点。用户可通过本地站点和远程站点在本地磁盘和Web服务器之间传输文件，测试站点可用于对动态站点的测试。 本地站点 远程站点 测试站点第三十三页，共五十一页，2022年，8月28日规划站点结构设计站点的必要前提是规划站点结构。规划站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存，合理地组织站点结构，可提高工作效率，加快对站点的设计。在制作站点时通常先在本地磁盘上创建一个文件夹，将所有在制作过程中创建和编辑的网页内容都保存在该文件夹中。在发布站点时，直接将这些文件夹上传到Web服务器上即可。如果站点内容较多或站点较大，则还需建立子文件夹以存放不同类型的网页内容。第三十四页，共五十一页，2022年，8月28日在站点规划过程中，需使用合理的文件名称、文件夹名称。通常在命名时，可以采用与其内容相同的英文或拼音进行命名，应避免使用长文件名和中文。制作网页所需的图片或动画等文件的存放位置也是规划站点结构时应考虑的。若是大型站点，可分别创建相应的文件夹在各个类别的文件夹下，如在站点根目录下创建一个名称为picture的文件夹用以存放主页中用到的图片和动画。如果站点内容较少，可以只在站点的根目录下创建一个文件夹。规划站点结构第三十五页，共五十一页，2022年，8月28日【实例1】创建一个站点使用菜单“站点”“管理站点”打开站点管理对话框，进行操作创建站点第三十六页，共五十一页，2022年，8月28日使用“高级”方式定义站点

在“定义站点”向导进行的任意一个步骤，选择对话框上部的“高级”标签，可打开高级站点定义对话框。第三十七页，共五十一页，2022年，8月28日2文本与列表控制第三十八页，共五十一页，2022年，8月28日文本与列表控制第三十九页，共五十一页，2022年，8月28日问题：文本中输入空格1）【工具箱】-【文本】-【不换行空格】2）直接在代码中粘贴空格符号3）全角模式下直接输入4）【编辑】-【首选参数】-【常规】：选中“允许多个连续的空格”第四十页，共五十一页，2022年，8月28日3链接的使用第四十一页，共五十一页，2022年，8月28日说明目标：_blank：打开一个新窗口显示目标网页。_parent：目标网页的内容在父框架窗口中显示。_self：目标网页的内容在当前所在框架窗口中显示。_top：目标网页的内容在最顶层框架窗口中显示代码：链接文字颜色的设置通过【修改】-【页面属性】-【外观】来设置的3链接的使用第四十二页，共五十一页，2022年，8月28日3链接的使用设置锚第四十三页，共五十一页，2022年，8月28日4插入图像图像的格式用于网页的图像通常只有GIF、JPE和PNG3种格式。插入图像的步骤如下：（1）把工具栏切换到“常用”状态，然后单击“图像：图象”按钮（2）选择要插入的图像文件，在文件列表中单击一个图象文件时，图象预览区会显示这个图象的缩略图。（3）单击确定按钮，如果图像文件在站点文件夹中，就会直接插入到网页中，同时在编辑窗口显示出图像。第四十四页，共五十一页，2022年，8月28日设置图像的基本属性练习：改变图像大小图文混排垂直边距和水平边距图像替代图像边框第四十五页，共五十一页，2022年，8月28日图片超级链接和图像地图1.图片超级链接2.图像地图

如果想在一个图像的不同位置上点击，就跳转到相应的目标网页，就需要使用图像地图。（1）设置矩形热区（2）设置圆形热区（3）设置多边形热区第四十六页，共五十一页，2022年，8月28日

单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择图像占位符按钮

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论