网页制作简易教程.docx

网页制作简易教程.docx

《网页制作简易教程.docx》由会员分享，可在线阅读，更多相关《网页制作简易教程.docx（73页珍藏版）》请在冰豆网上搜索。

网页制作简易教程

第一章认识常用的网页制作软件

知识预读

制作网页和网站的软件很多，甚至用记事本也可以，但需要花费大量的时间。

目前可以进行可视化编辑的网页制作软件很多，它们的编辑环境、易用性等都很不错。

常用网页编辑软件Dreamweaver8

MacromediaDreamweaver8是当前最常用的网页编辑软件之一，主要用来管理网站和对网页元素进行排版与编辑。

该软件不但可以直接编写代码，还可以进行完全可视化编辑，同时适用于初学者和专业网页设计师，是一款优秀的“所见即所得”的可视化网页编辑软件。

它友好的界面、强大的功能和可视化特征可以使初学者直接在页面上添加和编辑元素，而不用写一行代码，软件会自动将结果转换为HTML源代码；而且它还集成了目前制作网页最流行的多种功能。

网站专业开发人员可以使用Dreamweaver8及所选择的服务器技术（ASP、ASP.NET、JSP和PHP）生成支持动态数据库的Web应用程序，同时和Macromedia公司其他软件（如Fireworks、Flash等）的完美协作也是Dreamweaver8的一大特色。

网页编辑软件除了Dreamweaver8以外，Microsoft的产品FrontPage也是比较受欢迎的网页编辑软件。

常用图像处理软件PhotoshopCS2

AdobePhotoshop软件一直是图像处理软件的龙头老大，是计算机图形设计师创作最有力的软件，它的强大功能不仅能创造出精美的计算机图像艺术，并且渗透到计算机应用的各个领域，其中包括网页制作，从Photoshop5.5版本开始，Adobe公司就一直加强改善该软件在网页图像处理方面的功能，现在该软件已经成为使用最为广泛的网页图像处理软件。

目前较新版本为PhotoshopCS2v9.0，该版本整合了专门处理网络图像和制作网络动画的ImageReadyCS2，功能更加强大。

网页图像处理软件除PhotoshopCS2外，还有MacromediaFireworks系列，它与该公司的其他两个软件Dreamweaver、Flash合称为网页三剑客。

常用动画制作软件Flash8

动画制作软件主要是用来制作网页中一些精彩的动画与广告，使页面变得更加精美。

网页中最常用的动画制作软件是MacromediaFlash系列。

该软件是目前网络上最为流行的矢量动画设计制作软件，目前常用的版本为Flash8。

网站设计师经常用它来制作网页上的导航栏、广告宣传栏，而且还可以开发游戏，制作MTV，使用Flash8也能够制作出更加个性化的纯Flash网站。

Flash8软件已经成为设计制作网页和相关应用的“一站式”资源应用软件。

任务目标

◆学会获取网页制作软件；

◆学会安装网页制作软件；

◆学会各网页制作软件的启动和退出。

实施步骤

步骤1　获取网页制作软件

用户可以从计算机市场购买正版软件或者先从网上下载软件的试用版，然后通过网上注册等方法来获取Dreamweaver8、PhotoshopCS2和Flash8的注册码。

这里，采用从互联网上下载相应的网页制作软件的方法。

步骤2　安装网页制作软件

网页制作软件的安装非常简单，与其他软件的安装方法相似。

如果从光盘安装，则根据光盘说明来安装；如果是下载得到的压缩包，则解压缩，找到其中的安装文件（如从华军软件园下载的Dreamweaver8-chs.exe），双击运行，接下来可以通过安装向导来一步步完成该软件的安装。

Dreamweaver8的安装界面如1–1–7所示。

图1–1–7Dreamweaver8的安装界面

PhotoshopCS2和Flash8的安装方法与此类似。

步骤3　启动与退出网页制作软件

网页制作软件的启动方法与退出的操作方法与其他软件类似。

例如Dreamweaver8软件的启动操作方法之一：

单击“开始”|“所有程序”|“Macromedia”|“MacromediaDreamweaver8”，如1–1–8所示。

图1–1–8Dreamweaver8的启动

关闭操作方法：

单击窗口右上角的关闭

按钮；单击“文件”|“退出”命令。

PhotoshopCS2和Flash8两个软件的启动与退出方法与此类似。

对照练习

（1）各种网页制作软件的获取方法有 和 。

（2）目前常用的网页编辑软件有 和 。

（3）Dreamweaver8是一款主要用于 的软件，PhotoshopCS2是一款主要用于 的软件，Flash8是一款主要用于 的软件。

（4）请写出常用的启动和退出Flash8的步骤。

（5）安装网页制作相关的三个软件，熟悉软件的安装和启动退出操作。

任务小结

通过本任务，对网页制作软件的获取和安装有了一定的认识，也学会了Dreamweaver8、PhotoshopCS2和Flash8三个软件的启动和退出操作。

本任务完成过程如1–1–9所示。

图1–1–91.1.2任务完成过程

第二章　创建第一个网页

知识预读

什么是HTML

HTML是“HypertextMarkupLanguage”的缩写，意思为超文本标记语言。

它是用于编写网页的统一的语言规范。

只有采用HTML制作的网页，浏览器才能正确地阅读和运行。

一般用HTML语言来制作网页有两种方法：

①使用记事本之类的软件，输入HTML标记和网页的内容进行直接编写，然后保存为网页文件；

②使用可视化的网页制作软件，根据用户的可视化操作自动生成HTML代码，这样可以不需要了解HTML语言也能做出很好的网页。

但是计算机专业的学生对网页源文件的结构和HTML语言常识有些了解，对以后更好地学习制作网页还是很有帮助的。

什么是XML

XML是“eXtendedMarkupLanguage”的缩写，意思为可扩展标记语言，是一种简单的数据存储语言。

XML定义了一套元句法，符合规范的XML文档能够被应用程序很容易地统一解析。

这样数据存储和传输就有章可循。

同时XML允许Web应用程序开发人员创建自定义标记，以便更有效组织和传递内容的语言。

在XML文档中，用户只要遵循XML规范就可以定义自己需要的标记，创造自己的标记语言。

由于XML简单高效，能够用纯文本的形式表现各种复杂的有层次的数据及其之间的相互关系，易于在各个平台上构造和解析，因此在数据交换、结构化数据存储与显示、内容呈现与显示格式分离等方面得到了广泛的应用。

但面对成千上万已有的基于HTML设计的网站，直接采用XML还不太现实。

XML文档的扩展名是xml。

什么是XHTML

2000年1月26日，国际W3C组织（WorldWideWebConsortium）公布发行了XHTML1.0版本。

XHTML是“theeXtensibleHyperTextMarkupLanguage”的缩写，意思为可扩展标识语言，是一种在HTML4.0基础上优化和改进的，基于XML应用的标记语言。

HTML发展到今天存在三个主要缺点：

不能适应现在越来越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML；由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML；数据与表现混杂，页面要改变显示，就必须重新制作HTML。

因此，W3C制定了XHTML，以解决HTML语言所存在的严重制约其发展的问题。

XHTML结合了部分XML的强大功能及大多数HTML的简单特性，一方面保持了HTML的继承性，改善HTML规则不严、内容含义与显示格式混合、不能扩充等缺陷，另一方面又有XML的特性，具备模块化的特点。

使用XHTML，只要小心遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。

即用户可以立刻设计使用XML，而不需要等到人们都使用支持XML的浏览器。

此外，XHTML对代码结构要求非常严密，不容易出现不兼容的情况。

在网站设计方面，使用XHTML可帮助使用者养成用标记校验来测试页面工作的习惯。

任务目标

◆熟悉网页文件中基本的HTML标记；

◆学会使用记事本创建第一个网页，网页如图1–2–1所示。

图1–2–1第一个网页效果图

实施步骤

步骤1　了解相关概念

熟悉“知识预读”的内容，了解HTML、XML、XHTML的相关概念。

步骤2　利用记事本编写网页代码

单击“开始”|“所有程序”|“附件”|“记事本”，打开记事本程序。

在该窗口中输入如下代码：

＜html>

     ＜head>

             ＜title>欢迎大家光临＜/title>

      ＜/head>

      ＜body>

             ＜p>这是我用记事本编写的第一个网页，

＜fontsize=＂7＂color=＂red＂>欢迎光临！

＜/font>

               ＜/p>

        ＜/body>

         ＜/html>

单击菜单中的“文件”|“保存”命令，弹出“另存为”对话框。

在保存类型一栏中选择“所有文件”，在文件名一栏中输入“myweb1.html”，最后单击“保存”按钮，如图1–2–2所示。

图1–2–2第一个网页保存方法示意图

提示

①＜>内的标记符号（包括＜>）必须在英文半角状态下输入。

②文件保存时，请注意一定要将保存类型改为“所有文件”，扩展名必须为html或者htm。

步骤3　使用IE浏览器查看网页效果

找到刚才保存的文件，会发现它的图标已经变成

，双击该文件，就可以在IE中查看到创建的网页，效果如图1–2–1所示。

提示

如果平时想查看某些网页的源代码，可以在用IE浏览器打开相应网页后，执行“查看”菜单下的“源文件”命令，就可以用记事本软件查看到这个网页的源代码文件。

步骤4　分析HTML文档的基本格式

HTML文档是一个包含各种标记及其属性和内容的文本文件。

这些标记控制浏览器显示HTML文件的方式。

HTML文件必须具备正确的格式才能被浏览器正确识别和解释，目前互联网上的网页都兼容XHTML的格式，图1–2–3所示是一段最基本的XHTML语言文档格式，首先来了解XHTML语言的基本格式。

图1–2–3XHTML语言格式

如图1–2–3所示，一个典型的兼容XHTML的HTML文档包括序言和文档元素两大部分。

序言部分指出该文档使用一个外部公共的DTD，其名称为“//W3C//DTDXHTML1.1Transitional//EN”，其网址为“http：

//www.w3c.org/1999/xhtml”。

这个DTD由W3C制定，仅针对XHTML版本1.1，其根元素为html。

文档元素部分用特定的网页标记“＜html>＜/html>”进行标记，网页内容从＜html>一直持续到标记＜/html>结束。

文档元素部分第一行指出该文档兼容的XHTML使用的名域机制，其值为http：

//www.w3c.org/1999/xhtml，接下来的文档元素部分所使用的标记都来自这个名域值指向的DTD规定的标记。

文档元素部分又可分为头部分和正文部分。

头部分包含在＜head>和＜/head>对称标记中，主要包含一些与网页文件有关的信息，头部分中除了标题标记＜title>＜/title>外，其他内容不会显示在IE浏览器中；正文部分包含在＜body>和＜/body>对称标记中，里面的内容会显示在IE浏览器中。

HTML语言的其他标记都必须写在这两大标记中。

步骤5　分析网页中的标记

HTML语言中所有的标记都要用＜>包起来，如＜p>，括号中的标记字母不用区别大小写，＜>与标记中间不能用空格隔开。

HTML语言中的标记可以分为两类：

对称标记和单独标记。

对称标记中的HTML标记是对称的，表示方式是：

＜标记>内容＜/标记>。

其中＜标记>称为起始标记，表示某种格式功能的开始，而后面的＜/标记>称为结束标记，表示这种格式功能的结束，如上例中的＜title>欢迎大家光临＜/title>。

对称标记必须合理嵌套，即一层一层的嵌套是必须严格对称的。

不能出现交叉嵌套，做到首尾呼应、有头有尾。

如下所示：

＜标记>

＜标记>

   ＜标记1>

   ＜标记1>

   ＜/标记1>

   ＜/标记>

＜/标记1>

＜/标记1>

正确

错误

单独标记中的HTML标记是不成对的，表示方法是：

＜标记>。

标记中只有起始标记没有结束标记，如＜br>标记的作用是换行，功能相当于Word文档中的回车符。

标记中可以加上参数属性设定，但参数必须加在起始的标记内，如：

＜fontsize=＂7＂>欢迎光临！

＜/font>

表示网页内“欢迎光临！

”这几个字字体大小为7。

如果一个标记中有多个参数要设定，那么参数之间用空格隔开，如：

＜fontsize=＂7＂color=＂red＂>欢迎光临！

＜/font>

表示“欢迎光临！

”这几个字字号为7，文字颜色为红色。

在这个例子中一共接触了＜html>＜/html>、＜head>＜/head>、＜title>＜/title>、＜body>＜/body>、＜p>＜/p>、＜font>＜/font>6个常用标记。

其中＜html>＜/html>、＜head>＜/head>、＜body>＜/body>的作用主要是确定网页代码的基本格式，＜title>＜/title>、＜p>＜/p>、＜font>＜/font>三个标记分别对标记中的内容进行相应的控制和设置。

●＜title>＜/title>标记用在网页头部分，其主要作用是将标记中的内容显示在浏览器的标题栏上。

●＜p>＜/p>标记用在网页正文部分，其主要作用是将标记中的内容显示为一个段落，其他的文字会与其隔一行显示。

●＜font>＜/font>标记用在网页正文部分，其主要作用是设置标记中的内容的字体、大小和颜色。

它的属性参数size用来设定文字的大小，属性参数color用来指定文字的颜色，可以直接用颜色的英文，也可以用RGB的16进制数表示。

说明

XHTML语言的标记写法比HTML语言要严格很多，两者区别如下：

①XHTML要求所有标记都必须是闭合的，即要有一个对应的结束标记。

以前在HTML中，可以打开许多标记，例如＜p>和＜li>不一定写对应的＜/p>和＜/li>来关闭它们。

但在XHTML中这是不合法的。

XHTML要求有严谨的结构，所有标记必须关闭。

如果是单独标记，在标记最后加一个“/”来关闭它。

如＜br/>、＜imgsrc=“2007.gif”/>、＜p/>。

②所有标记元素和属性的名字都必须使用小写。

与HTML不一样，XHTML对大小写区分，＜title>和＜TITLE>是不同的标记。

同时，大小写夹杂是不被认可的，如属性名“onMouseOver”必须修改成“onmouseover”.

③所有的参数属性必须用引号“”括起来。

在HTML中，可以不需要给属性值加括号，但是在XHTML中，它们必须加引号。

如＜height=80>必须改为＜height=“80”>。

④所有特殊符号都用编码表示。

任何小于号（＜）不是标记一部分，都必须被编码为“<，”，任何大于号（>）不是标记的一部分，都必须被编码为“>，”。

任何与号（&）不是实体的一部分，都必须被编码为“&；”。

这些字符之间不能有空格。

⑤给所有属性赋一个值。

XHTML规定所有的属性都必须有一个值，没有值的就重复本身。

如＜tdnowrap>改为＜tdnowrap=“nowrap”>。

⑥不能在注释内容中使用“--”。

“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。

对照练习

（1）HTML的意思是 ，XHTML是一个基于 的标记语言。

（2）在IE下查看网页源代码的方法是单击IE菜单栏中的“查看”|“源文件”命令，这时IE会自动打开 软件显示该网页的源代码。

（3）打开XX网站首页（http：

//），查看该网页的源代码，并分析它的HTML基本结构，找出其中的＜html>＜/html>、＜head>＜/head>、＜body>＜/body>标记。

（4）标记＜font>属于 标记类型，其中的参数size的功能是 ，参数color的功能是 。

（5）请根据图1–2–4所示的网页效果（“08奥运”、字体大小为5、颜色为蓝色），用记事本创建网页。

图1–2–4网页效果图

任务小结

通过本任务，了解了HTML语言的相关概念，HTML文档的基本格式和HTML标记，学习了如何利用记事本软件通过编写HTML代码来创建网页。

本任务完成过程如图1–2–5所示。

图1–2–51.2.1任务完成过程

第三章　制作跑马灯效果

任务目标

◆学会用记事本编写代码方式编写含有简单跑马灯效果的网页；

◆掌握在HTML文件中插入代码的方法。

实施步骤

步骤1　观察跑马灯效果

跑马灯效果指的是在网页中设置一段文字或图片在页面上按照一定的规律移动。

用浏览器打开“素材与实例/第1章/第2节/课堂任务2/marquee1.html”文件，观察该网页中的跑马灯效果，发现该网页中的“欢迎光临！

”几个字在页面上从左到右滚动。

使用记事本打开该文件，可以看到源代码如图1–2–6所示。

将它与myweb1.html文件的源代码进行比较，发现两者的不同之处。

图1–2–6marquee1.html文件的源代码

在marquee1.html的源代码中多了两行代码：

＜marqueebehavior=scrolldirection=rightwidth=＂500＂scrollamount=＂10＂>

……

＜/marquee>

这就是跑马灯效果的关键代码，marquee的基本语法如下：

＜marquee>文字或图片＜/marquee>

它的作用是让＜marquee>标记中的文字或图片按一定规律滚动起来。

同时，要注意该语法只适用于在IE浏览器中显示，并只能放在＜body>标记中使用。

步骤2　制作默认的跑马灯效果

使用记事本打开“素材与实例/第1章/第2节/课堂任务2/marquee2.html”文件，在相应位置处添加如下所示的跑马灯代码，然后保存，用IE浏览器观察效果。

＜marquee>

        ＜p>＜fontsize=＂7＂color=＂red＂>欢迎光临！

＜/font>＜/p>

＜/marquee>

在这个实例中，没有给＜marquee>标记添加属性参数，可以发现默认效果是“欢迎光临！

”文字在网页上从右到左滚动。

提示

在已有的代码上插入对称标记的时候，要注意标记的嵌套，不要使标记交叉而导致文件出错。

步骤3　制作有属性参数的跑马灯效果

在＜marquee>标记中可以添加一些属性参数来控制跑马灯效果，如滚动方向、方式、宽度和速度等，详细可见表1–2–1所示。

打开记事本软件，输入以下网页代码，保存为“marquee3.html”文件，实现效果：

让“我会滚动！

”几个字在网页中向上滚动，并且滚动的高度是300像素，滚动速度是2。

＜html>

      ＜head>

             ＜title>欢迎大家光临＜/title>

      ＜/head>

      ＜body>

             ＜p>这是我用记事本编写的网页！

＜/p>

＜marqueedirection=＂up＂height=＂300＂scrollamount=＂2＂bgcolor=＂red＂>我会滚动！

＜/marquee>

     ＜/body>

＜/html>

表1–2–1marquee属性参数表

参　　数

意　　义

bgcolor

背景颜色，可输入颜色的英文名称或者RGB16进制数等

direction=left、right、up、down

滚动方向（左、右、上、下）

scroll表示由一端滚动到另一端

behavior=scroll、slide、alternate

slide表示由一端快速滑动到另一端，不再重复

alternate表示在两端之间来回滚动

height＝数值

滚动区域的高度

width=数值

滚动区域的宽度

scrollamount=数值

滚动的速度，数值越大滚动越快

scrolldelay=数值

延迟时间，数值越大跳跃越明显

loop＝数值

循环次数，不设置该值表示无限循环

hspace＝数值

距网页左边的水平距离

onmouseover＝start（）、stop（）

当鼠标移上去时设置动作（开始、停止）

onmouseout＝start（）、stop（）

当鼠标移开时设置动作（开始、停止）

对照练习

（1）标记＜marquee>属于 标记类型，它的作用是 。

（2）使用记事本编辑制作“marquee4.html”文件，使网页上“我会滚动”四个字，从上往下滚动，高度为200像素，宽度为100像素，背景为黄色，速度为20。

任务小结

通过本任务，学习了网页上的一种特殊效果——跑马灯效果。

这个效果能使文字或者图片在网页上滚动，通过设置属性参数，可以制作出不同的网页效果。

本任务完成过程如图1–2–7所示。

图1–2–71.2.2任务完成过程

第四章　自定义工作界面

知识预读

认识Dreamweaver8工作环境

启动Dreamweaver8后会弹出如图2–1–1所示对话框，单击“创建新项目”→“HTML”，进入操作界面，如图2–1–2所示。

Dreamweaver 8界面主要包含菜单栏、插入栏、文档工具栏、文档窗口、属性面板、功能面板组等几部分。

图2–1–1Dreamweaver 8软件打开界面

图2–1–2Dreamweaver 8软件界面

●菜单栏：

Dreamweave8的菜单栏中共有10个菜单，即文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助。

与其他Windows软件的菜单一样，集成了Dreamweaver8软件的所有功能，用户可以在菜单中找到自己所需要的命令。

提示

Dreamweaver8把所有的功能都集成在一个个功能面板上，用户除了可以像其他一样通过菜单命令进行相关操作外，还可以通过各类面板直接进行操作，使操作更加方便、快捷。

●插入栏：

插入栏集成了所有可以在网页应用的对象，包括“插入”菜单中的选项。

插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易地插入图像、声音、多媒体动画、表格、图层、框架、表单、Flash和ActiveX等网页元素。

●文档工具栏：

文档工具栏中包含各种按钮，这些按钮使用户可以在文档的不同视图间快速切换，“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的“拆分”视图。

文档工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。

如图2–1–3所示。

图2–1–3文档工具栏

●文档窗口：

打开或创建一个项目，进入文档窗口，可以在文档区域中进行输入文字、插入表格和编辑图片等操作。

文档窗口显示当前文档。

可以选择下列任一视图：

设计视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。

在该视图中，Dreamweaver8显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。

代码视图是一个用于编写和编辑HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。

代码和设计视图使用户可以在单个窗口中同时看到同一文档的代码视图和设计视