制作我的第一个网页

项目2　制作我的第一个网页

项目描述

无论采用哪种网页开发软件制作的网页，均可以查看其HTML源代码。因此，HTML是构成网页文档的主要语言。本项目采用HTML代码来制作我们的第一个简单的网页。

项目分析

本项目首先查看网易网首页的HTML源代码，然后在记事本中利用HTML来制作一个简单的网页并浏览该网页，接着在Dreamweaver CS3 中打开该网页，对其HTML源代码进行修改并浏览，最后在Dreamweaver CS3 中，创建空白网页并利用HTML制作另一个网页。本项目可分解为以下任务：

任务1　查看网易网首页HTML源代码

任务2　在记事本中利用HTML制作网页

任务3　在Dreamweaver CS3 中修改网页的HTML代码

任务4　在Dreamweaver CS3 中利用HTML制作网页

项目目标

●了解HTML文档的基本结构

●掌握在记事本中使用HTML制作简单网页的方法

●掌握Dreamweaver CS3 的工作窗口

●掌握在Dreamweaver CS3 中使用HTML制作网页的方法

任务1　查看网易网首页HTML源代码

操作步骤

在桌面上双击IE浏览器图标，打开IE浏览器窗口，在地址栏中输入网易网网址http：//www.163.com并按回车键，在IE浏览器中打开网易网主页，如图1-7所示。在这里用户可以浏览新闻、发送邮件、查询资料等。

图1-7　网易网主页

执行【查看】→【源文件】命令，在打开的记事本中显示当前网页对应的HTML源代码，如图1-8所示。

图1-8　网页源代码

任务2　在记事本中利用HTML制作网页

操作步骤

在F盘根目录下新建文件夹sitelx1，将“素材”文件夹“单元1”中的内容复制到sitelx1文件夹中，执行【开始】→【所有程序】→【附件】→【记事本】命令，打开记事本，在记事本中输入HTML代码，如图1-9所示。

图1-9　记事本中的HTML代码

贴心提示

在制作网页时，站点的目录不能使用中文，否则会导致超级链接的失败。在站点文件夹下，网页图片是存放在image文件夹下的。

执行【文件】→【保存】命令，弹出“另存为”对话框，选择保存位置为F：\sitelx1，文件命名为“Web1.html”，保存类型为“所有文件”，如图1-10所示，单击“保存”按钮。

打开F：\sitelx1文件夹，双击Web1.html文件打开浏览器并浏览该网页，如图1-11所示。

图1-10　“另存为”对话框

图1-11　浏览Web1.html网页

任务3　在Dreamweaver CS3 中修改网页HTML代码

操作步骤

执行【开始】→【所有程序】→【Adobe Dreamweaver CS3 】命令，打开Dreamweaver CS3 工作窗口，执行【文件】→【打开】命令，打开F：\sitelx1\Web1.html文件，如图1-12所示。

图1-12　在Dreamweaver中打开Web1.html网页

单击文档工具栏上的“代码”按钮，切换到Dreamweaver CS3 的“代码”视图，对以上代码进行修改，如图1-13所示。

图1-13　Dreamweaver CS3 代码视图

单击文档工具栏上的“设计”按钮，切换到“设计”视图，按F12键保存并预览网页，如图1-14所示。

图1-14　修改后Web1.html网页预览效果

任务4　在Dreamweaver CS3 中利用HTML制作网页

操作步骤

在Dreamweaver CS3 中，执行【文件】→【新建】命令，打开“新建文档”对话框，如图1-15所示。

图1-15　“新建文档”对话框

选择“空白页”的“HTML”选项，在“布局”列表栏中选择“无”选项，然后单击“创建”按钮创建一个空白网页。

单击文档工具栏上的“代码”按钮，切换到Dreamweaver CS3 的“代码”视图，如图1-16所示。

在视图窗口中将“无标题文档”改为“大自然”，在＜body＞和＜/body＞之间输入以下代码，效果如图1-17所示。

　＜table width＝″380″height＝″220″border＝″1″align＝″center″＞

图1-16　“代码”视图

　＜tr align＝″center″＞

　　＜td＞＜a href＝″Web1.html″＞我的网页＜/a＞＜/td＞

　　＜td＞＜a href＞＝http：//www.163.com＞网易＜/a＞＜/td＞

　　＜/tr＞

　　＜tr＞

　　　＜td colspan＝′2″＞蝴蝶与花＜br＞

　　　＜img src＝″images/tupian.jpg″width＝230height＝140/＞＜/td＞

　　＜/tr＞

　＜/table＞

图1-17　输入代码后的“代码”视图

单击文档工具栏上的“设计”按钮，切换到“设计”视图；执行【文件】→【保存】命令，在打开的“另存为”对话框中将文件保存到F：\sitelx1文件夹下，文件命名为web2.html；单击“保存”按钮保存该文件；按F12键预览网页，效果如图1-18所示。

图1-18　Web2.html网页预览效果

知识百科

Adobe Dreamweaver CS3 是一款专业的网站开发工具软件，它具有强大的功能、简便的操作工具及友好的工作窗口，已经被越来越多的网页设计者和网站开发人员所使用。

Adobe Dreamweaver CS3 集网页设计、网站开发和站点管理功能于一身，具有可视化、跨浏览器和支持多平台的特性，利用该软件还可以开发功能强大、高效的动态交互式网站。

1.Dreamweaver CS3 的启动和退出

1）启动Dreamweaver CS3

当Dreamweaver CS3 安装完成后，就会在Windows的【开始】→【所有程序】子菜单中建立“Adobe Dreamweaver CS3 ”菜单项。单击【开始】→【所有程序】→【Adobe Dreamweaver CS3】命令，如图1-19所示，或者双击桌面上或任务栏中的“Dreamweaver CS3 ”快捷图标，即可启动Dreamweaver CS3 应用程序，进入Dreamweaver CS3 的启动界面，如图1-20所示。

贴心提示

在进入Dreamweaver CS3 工作窗口后，执行【编辑】→【首选参数】命令，在打开的【首选参数】对话框中，将“常规”类中“文档”选项栏中的“显示欢迎屏幕”复选框的勾选去掉，当再次启动Dreamweaver CS3 后将不会再打开Dreamweaver CS3 的启动界面。

2）退出Dreamweaver CS3

退出Dreamweaver CS3 的方法有以下4种：

方法1　单击Dreamweaver CS3 窗口中的【关闭按钮】。

方法2　双击标题栏左侧的【控制窗口】图标。

方法3　在Dreamweaver CS3 窗口中，执行【文件】→【退出】命令。

方法4　按下快捷键【Ctrl＋Q】或者组合键【Alt＋F4】。

图1-19　启动Dreamweaver CS3

图1-20　Dreamweaver CS3 启动界面

2.初识Dreamweaver CS3 工作窗口

单击Dreamweaver CS3 启动界面“新建”栏中的“HTML”，即可进入如图1-21所示的Dreamweaver CS3 工作窗口。可以看到Dreamweaver CS3 的工作窗口主要包括标题栏、菜单栏、插入栏、文档工具栏、文档窗口、状态栏、属性面板和面板组等。

图1-21　Dreamweaver CS3 工作窗口

1）标题栏

标题栏位于窗口的顶端。左侧显示启动的Dreamweaver CS3 的图标和名称，右侧显示程序窗口控制按钮，从左到右依次为【最小化】按钮、【最大化】按钮和【关闭】按钮。它们是Windows窗口共有的。

2）菜单栏

与其他应用软件一样，Dreamweaver CS3 也包括一个提供主要功能的菜单栏。要想打开某项菜单，既可以使用鼠标单击该菜单项，也可以同时按下Alt键和菜单名中带下画线的字母键。Dreamweaver CS3 的菜单栏如图1-22所示。

图1-22　Dreamweaver CS3 的菜单栏

其中：

●“文件”菜单：用于新建、打开、保存、预览文档、转换文档格式和检查文档兼容性等。

●“编辑”菜单：用于基本编辑操作的标准菜单命令。

●“查看”菜单：用于切换文档的各种视图，显示或隐藏不同类型的页面元素及工具。

●“插入记录”菜单：用于向页面中插入各种页面元素以及创建超链接。

●“修改”菜单：用于设置页面属性及更改选定页面元素的属性。

●“文本”菜单：用于设置文本及段落的格式。

●“命令”菜单：该菜单提供了对各种命令的访问，包括根据格式参数的选择来设置代码格式、创建网站相册等。

●“站点”菜单：提供了有关创建、编辑站点的命令，用于管理当前站点中的文件。

●“窗口”菜单：用于设置工作区布局和各种面板的打开和关闭。

●“帮助”菜单：用于提供有关该软件操作的帮助信息。

贴心提示

每个菜单项右边的英文字母，是该项命令的快捷键，使用快捷键同样可以执行每项菜单命令。

3）插入栏

插入栏包含用于创建和插入对象的按钮，当鼠标指针指向某一按钮上时就会出现一个有关该工具的提示，其中含有该按钮的名称。Dreamweaver CS3 的插入栏如图1-23所示。

图1-23　Dreamweaver CS3 的插入栏

其中：

●“常用”选项：用于创建和插入常用的对象。

●“布局”选项：用于插入表格、框架、Div标签、Spry构件以及表格的两种视图：标准视图和扩展视图的选择。

●“表单”选项：用于创建表单和插入表单元素，包括Spry验证构件。

●“数据”选项：用于插入Spry数据对象和其他动态元素，譬如记录集、重复区域、插入记录表单和更新记录表单。

●“Spry”选项：用于插入构建Spry页面的按钮以及Spry数据对象和构件。

●“文本”选项：用于插入各种文本格式和列表格式的标签，譬如b、em、p、hl、ul等。

●“收藏夹”选项：用于将插入栏中经常使用的按钮以分组形式组织到某一公共位置。

4）文档工具栏

在文档窗口的顶端为文档工具栏，从左到右是快速切换视图模式的按钮、与查看文档和在本地与远程站点之间传输文档有关的一些命令和选项。Dreamweaver CS3 的文档工具栏如图1-24所示。

图1-24　Dreamweaver CS3 的文档工具栏

其中：

●“标题”文本框：用于为文档输入一个标题，当浏览网页时标题将显示在浏览器的标题栏上。新建一个文档时，默认的文档标题是“无标题文档”。

●“文件管理”按钮：单击按钮后的下三角可以显示“文件管理”下拉菜单，用于完成文件的上传和下载等操作。

●“在浏览器中预览/调试”按钮：单击按钮后的下三角可以显示下拉菜单，从中可以选择一种浏览器预览或调试文档。

●“刷新设计视图”按钮：可以在代码视图中更新文档后，来刷新文档的设计视图。

●“可视化助理”按钮：单击按钮后的下三角可以显示下拉菜单，从中可以使用各种可视化助理来设计页面。

●“检查浏览器兼容性”按钮：用于检查CSS是否对各种浏览器均兼容。

5）文档窗口

文档窗口即窗口中白色的区域，用于显示当前打开的文档的内容，用户可以在这里进行网页的编辑制作。文档窗口分为代码视图、设计视图和二者兼有的拆分视图3种视图模式。

其中：

●设计视图：该视图是文档窗口的默认视图模式。在该视图下用户可以直接看到网页的编辑效果，当网页经过编辑和排版后的效果与浏览器显示的效果完全一致。设计视图如图1-25所示。

●代码视图：该视图以网页的源代码方式显示，与浏览器显示的效果不同。代码视图如图1-26所示。

●拆分视图：该视图可在同一个窗口中同时看到同一个文档的“代码”视图和“设计”视图，如图1-27所示。

6）状态栏

状态栏位于文档窗口的底部，其左边为标签选择器，右边提供了与当前文档有关的信息和工具。标签选择器一般以HTML标记来显示页面对象的信息，用户通过它可以选择各种页面元素。譬如，当单击＜body＞标签时就可以选择整个网页内容。Dreamweaver CS3 的状态栏如图1-28所示。

图1-25　设计视图

图1-26　代码视图

图1-27　拆分视图

图1-28　状态栏

贴心提示

用鼠标右键单击任一标签，在弹出的快捷菜单中通过选择命令可以对标签进行删除或编辑等操作。

7）属性面板

属性面板位于Dreamweaver CS3 工作窗口的底部，主要用于查看和设置当前选定对象的各种属性。对于不同的页面元素其对应的属性面板也不相同。如图1-29所示为文本元素的属性面板，而图1-30所示则为图像元素的属性面板。

图1-29　文本的属性面板

图1-30　图像的属性面板

8）面板组

Dreamweaver CS3 工作窗口的右边为放置面板组的地方，这里包含许多不同的面板，每个面板都可以展开或折叠。面板组如图1-31所示。

图1-31　面板组

贴心提示

3.HTML基础知识

1）HTML概述

HTML是超文本标记语言Hypertext Marked Language一词的缩写。该语言是目前网络上应用最为广泛的一种语言，也是构成网页最主要的语言。只有采用HTML语言制作的网页才能在浏览器中浏览和运行。

使用HTML语言制作网页的方法有以下2种：

方法1　使用记事本之类的工具来输入HTML源代码，然后保存为以.html或.htm为扩展名的文件。

方法2　使用可视化网页制作软件，如Dreamweaver、FrontPage，根据用户的可视化操作自动生成HTML代码。

2）HTML文档的基本结构

一个HTML文档是由一系列的元素和标记组成的，HTML一般用标记来规定元素的属性和位置。

HTML文档的基本结构包括头部分（head）和主体部分（body）。其中头部分用于描述浏览器所需的信息，主体部分则包含所要说明的具体内容。

其基本结构如下：

　　＜html＞

　　　＜head＞

　　　　头部分的信息

　　　＜/head＞

　　　＜body＞

　　　　主体部分的具体内容

　　　　＜/body＞

　　＜/html＞

这里：

●＜html＞标记位于HTML文档的最前面，用来表明HTML文档的开始，而＜/html＞标记则位于HTML文档的最后面，用来表明HTML文档的结束，它们二者必须同时使用，缺一不可。

●＜head＞标记与＜/head＞标记构成了HEML文档的开头部分，其中可以包含＜title＞与＜/title＞和＜script＞与＜/script＞标记，它们都是用来描述HTML文档的相关信息的标记。

●＜body＞标记与＜/body＞标记构成HTML文档的主体部分，其中可以包含＜p＞与＜/p＞、＜img＞、＜br＞、＜a＞与＜/a＞等标记，它们的内容将会在浏览器中显示出来。

贴心提示

在HTML文档中，所有的标记都要用尖括号＜＞括起来。HTML标记是不区分大小写的，并且标记中如果包含多个参数，则各参数之间用空格分隔，而且参数位置不受限制。

3）HTML常用标记

HTML中常用的标记见表1-1所示。

表1-1　HTML中常用的标记

项目小结

通过使用HTML代码制作“我的第一个网页”的过程，认识了HTML代码的基本结构及常用的一些标记及使用，同时对Dreamweaver CS3 的工作界面有了进一步的了解，为今后网页制作的学习打下基础。

知识拓展

常用网页制作工具

目前的网页制作专业工具越来越多，功能也越来越完善，操作也越来越简单。处理图像、制作动画、发布网站的专业软件的应用也非常广泛。

常用的制作网页的工具有：

（1）网页制作的专业工具：FrontPage、Dreamweaver。

（2）图像处理工具：Fireworks、Photoshop。

（3）动画制作工具：Flash、Swish。

（4）图标制作工具：Axialis IconWorkshop、IconCool Studio。

（5）抓图工具：红蜻蜓抓图精灵、HyperSnap、SPX撕边抓图工具。

（6）网站发布工具：CuteFTP、WebVega、TBS·WPS。

下面简单介绍其中的几款工具。

（1）FrontPage：Microsoft公司开发的网页制作工具，其工作窗口类似于Word，其具有操作简单、易于上手的特点。但是其浏览器的兼容性不好，生成的垃圾代码较多。

（2）Dreamweaver：Macromedia公司推出的一款专业可视化网页开发工具，其最新版本是Dreamweaver CS5。Dreamweaver与Flash、Fireworks常被称作“网页三剑客”。

（3）Flash：主要用于制作和编辑具有较强交互性的矢量动画，可以方便地生成.swf动画文件，这种文件可以嵌入HTML内。Flash生成的动画文件较小，可以边下载边播放，避免了用户的长时间等待。

（4）Fireworks：一款将矢量图形处理和位图图像处理合二为一的专业化Web图像处理软件，它可以对各种图像文件进行编辑和处理，也可以直接生成包含HTML和JavaScript代码的动态图像。

（5）Photoshop：Adobe公司推出的一款功能强大的图像处理软件，其工作窗口简洁友好，已被广泛用于图像处理和界面设计领域。