欢迎光临我的第一个网页

网页设计基础随着Internet（因特网）的发展和普及，越来越多的个人和公司都想在Internet上安个家，各种各样的网站应运而生。网页设计和制作技术也越来越受到人们的关注，网站是如何创建的？需要掌握哪些计算机技术？本章介绍网页设计的基础知识，主要包括以下内容： * HTML基础 * 初识Dreamweaver * 在代码视图中创建HTML 1.1 HTML基础在Internet上浏览的一个个精美网页都是用超文本标记语言HTML制作而成。本节先介绍HTML的基础知识。 1.1.1 HTML简介 HTML（Hypertext Marked Language，超文本标记语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX、Windows等）。自1990年以来HTML就一直被用作WWW（World Wide Web）的信息表示语言，用于描述网页的格式设计和它与WWW上其他网页的链接信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。所谓超文本，是指用HTML创建的文档可以加入图片、声音、动画、影视等内容，并且可以实现从一个文件跳转到另一个文件，与世界各地主机的文件连接。下面介绍如下具体操作。（1）打开IE（Internet Explorer）浏览器，在地址栏输入网易的网址http://www.163.com，按Enter键后，网易网站的首页就呈现在面前，如图1-1所示。（2）现在查看一下这个精美网页的源文件。在IE浏览器窗口中，选择“查看”|“源文件”命令，弹出一个记事本文件，如图1-2所示。可以看到网页的源文件是由一行行代码组成，这些就是HTML代码。图1-1 网易网站首页图1-2 网页源文件 1.1.2 课堂实例——创建和测试第一个网页了解HTML文档的代码结构是学习网页制作的基础，下面就从一个简单的实例开始认识HTML。（1）选择“开始”|“所有程序”|“附件”|“记事本”命令，运行“记事本”程序。在“记事本”窗口中输入以下内容：欢迎光临我的第一个网页这是第一个简单网页! （2）选择“文件”|“保存”命令，在弹出的“另存为”对话框中选择要保存的路径，在“文件名”文本框中输入文件名myweb001.html，如图1-3所示。图1-3 “另存为”对话框专家点拨：在“文件名”文本框中输入文件名时，一定要输入文件的扩展名.html（或者.htm），这样保存的文件才是HTML网页文档。如果这里不输入.html（或者.htm）扩展名，那么系统默认会将文件保存为文本文件（TXT文件）。（3）打开“资源管理器”窗口，根据刚才保存网页的位置，找到myweb001.html文件，如图1-4所示。（4）双击myweb001.html文件左边的图标，打开这个网页文件，系统自动启动IE浏览器并在窗口中显示网页效果，如图1-5所示。图1-4 在“资源管理器”窗口中定位文件图1-5 编写的网页效果 1.1.3 认识HTML标签前面编写了一个简单的HTML文档，在网页文档代码中，有很多代码是用“<”和“>”括起来，如、、等，这些称之为“标签”。这些标签是用来分割和标记网页中的元素，以形成网页的布局、文字的格式及五彩缤纷的画面。通过这些标签，可以在网页中加入文本、图片、声音、动画、影视等多媒体，还可以实现页面之间的跳转等。 HTML文档中的标签包括单标签和双标签，另外在标签中还可以包含一些属性。（1）单标签在HTML文档中，有些标签是单独使用就能发号指令，控制网页的效果，如
就是一个最常用的单标签，它表示换行。（2）双标签在HTML文档中，有些标签必须成对使用，在给网页文件发送的指令符号前面和后面分别加上标签，告诉文件从开始标签到结束标签之间执行某个命令。一般结束标签的形式是在开始标签前面加上一斜杠。如和就是一对成对出现的双标签，缺一个标签就无法执行。（3）标签属性在单标签和双标签的开始标签里还可以包含一些属性，来达到个性化的效果。如

，

表示在文档当前位置画一条水平线，一般默认是从窗口中当前行的最左端一直画到最右端。在

标签里面加上一些属性来控制水平线的样式，如SIZE=3表示水平线的精细为3像素，ALIGN=LEFT表示对齐方式为左对齐。在前面编写的第一个HTML文档中，可以明显地看到网页代码是由4对双标签组成的。（1）和和在最外层，表示在这对标签里面的代码是HTML语言。现在也有一些网页省略了这一对标签，这是因为.html或.htm文件被Web浏览器默认为是HTML文档。（2）和在这对标签里的内容是网页中的头部信息，如网页总标题、网页关键字等，若不需头部信息则可省略此标记。（3）和在和这对双标签的中间还包含着和这样一对标签。和里面包含的内容“欢迎光临我的第一个网页”，就是呈现在网页的标题，标题会出现在IE浏览器窗口的标题栏，如图1-6所示。（4）和和之间的“这是第一个简单网页!”部分，就是在网页中实际看到的内容。和之间是网页的主体内容部分，大部分HTML标签都包含在和之间。 1.1.4 HTML文档的基本结构从前面编写的第一个HTML文档中，可以看到一个基本的HTML文档的结构。一个HTML文档分为两部分：文件头和文件体。文件头中提供了文档标题，并建立了HTML文档与文件目录间的关系。文件体部分是网页的实质内容，它是HTML文档中最主要的部分，其中包含了文本、图像、表格等元素，这些元素构成了网页的内容。在编写HTML文档时，先构造出HTML文档的轮廓，这样可以避免一些错误发生（比如，文档中的某些部分被浏览器错误地解释为一般的文本）。 HTML文档的基本结构如图1-7所示。专家点拨：是注释行，HTML文档采用的格式加入注释。 1.2 初识Dreamweaver Dreamweaver是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。无论开发者愿意享受手工编写HTML代码时的驾驭感，还是偏爱在可视化编辑环境中工作，Dreamweaver都会提供实用的工具，使网页设计者拥有更加完美的Web创作体验。熟练掌握Dreamweaver的工作环境是进一步学习网页制作的关键，本节介绍Dreamweaver的工作环境，并且通过一个实例介绍用Dreamweaver制作一个简单网页的方法。 1.2.1 Dreamweaver工作环境 1．起始页运行Dreamweaver 8，首先映入眼帘的是“起始页”。“起始页”将常用的任务都集中放在一个页面中，包括“打开最近项目”、“创建新项目”、“从范例创建”、“扩展”以及对官方资源的快速访问，如图1-8所示。图1-8 起始页如果要隐藏“起始页”，可以单击选择“不再显示此对话框”，然后在弹出的对话框单击“确定”按钮。如果要再次显示开始页，可以通过选择“编辑”|“首选参数”命令，打开“首选参数”对话框，然后在“常规”类别中设置“文档选项”为“显示起始页”即可。 2．工作窗口在“开始页”，选择“创建新项目”下的HTML，这样就启动Dreamweaver 8的工作窗口并新建一个网页文档。 Dreamweaver 8窗口主要由五部分组成，如图1-9所示。分别是菜单栏、工具栏、“属性”面板、面板组和工作区。菜单栏是使用Dreamweaver 8最基本的渠道，绝大多数功能都可以通过菜单访问。但是菜单使用不太方便，因此Dreamweaver 8提供了工具栏、“属性”面板和面板组来简化操作。在Dreamweaver 8菜单栏下面是“插入”工具栏，这个工具栏列出了可以插入到网页中的页面元素，如图1-10所示。图1-9 Dreamweaver 8窗口图1-10 “插入”工具栏 “插入”工具栏含有若干个子工具栏，单击该工具栏前面的下拉列表，可以从列表中进行选择，如图1-11所示。在Dreamweaver 8界面的下端是“属性”面板，使用“属性”面板可以很容易地设置页面中的元素的最常用属性，从而提高了网页制作的效率，如图1-12所示。图1-12 “属性”面板专家点拨：当选定对象不同时，“属性”面板中会出现不同的设置参数，针对此面板的使用在后面的章节里会陆续介绍。在Dreamweaver 8界面右侧有面板组，每个面板组内部含有若干个面板，面板组可以折叠或者展开，处于折叠状态的面板组如图1-13所示。单击面板组标题栏可以展开面板组，比如要展开“文件”面板组可以单击它的标题，面板组展开后可以看到其所包含的各个面板，如图1-14所示。 3．自定义界面针对不同的用户需要，Dreamweaver 8提供了多种预定义的界面方案。例如，选择“窗口”|“工作区布局”|“编码器”命令，这种界面比较适合习惯编写代码的用户使用，如图1-15所示。图1-14 展开后的面板组图1-15 “编码器”界面方案专家点拨：如果想返回到默认的设计器界面，可以选择“窗口”|“工作区布局”|“设计器”命令即可。如果用户自己对界面进行了自定义，并且希望自己的界面定义能够保留下来，可以选择“窗口”|“工作区布局”|“保存当前”命令，在弹出的“保存工作区布局”对话框中设置“名称”为“我的界面布局”，然后单击“确定”按钮，如图1-16所示。 4．Dreamweaver 8的三种视图模式 “文档”工具栏位于新建或者打开的网页文档上方，如图1-17所示。这个工具栏主要由三个部分组成，最左边的三个按钮用来切换视图模式；中间的编辑框显示页面标题，可以直接编辑；最右边是一些常用的文件管理功能，比如文件兼容性检查、预览网页以及上传、下载。图1-17 “文档”工具栏在“文档”工具栏中单击“代码”按钮，可以看到下面的视图中将显示页面的HTML代码，如图1-18所示。图1-18 代码视图专家点拨：在代码视图中，可以直接输入网页代码，或者利用Dreamweaver提供的代码工具编辑网页代码。在“文档”工具栏中单击“设计”按钮，下面的视图将会切换到页面的预览效果，如图1-19所示。图1-19 设计视图专家点拨：在设计视图中，以所见即所得的方式编辑网页。制作者只需利用Dreamweaver提供的设计工具直接插入和编辑网页中的元素，HTML代码系统会自动生成。在“文档”工具栏中单击“拆分”按钮，视图将会分成两个部分，上半部分显示代码，下半部分显示页面在浏览器中的预览效果，如图1-20所示。专家点拨：在拆分视图中，既可以直观地编辑网页中的元素，又可以观察到相关的代码，这样利于更加灵活地编辑网页。图1-20 拆分视图 1.2.2 课堂实例——用Dreamweaver制作一个简单网页下面使用Dreamweaver制作一个简单的网页，介绍一下Dreamweaver制作网页的基本流程。 1．新建网页（1）运行“开始”|“程序”| Macromedia | Macromedia Dreamweaver 8命令，启动Dreamweaver 8软件。（2）在“开始页”，选择“创建新项目”下的HTML，这样就启动Dreamweaver 8的工作窗口并新建一个网页文档。专家点拨：还可以选择“文件”|“新建”命令，在弹出的“新建文档”对话框中选择“类别”列表框中的“基本页”，然后在右侧的“基本页”中选择一个预先设计好的页面布局，如图1-21所示。 2．编辑网页（1）在文档窗口中（即中间大块的白色区域）单击一下，出现光标。（2）在光标处输入“这是用Dreamweaver制作的一个简单网页！”字样，如图1-22 所示。图1-21 “新建文档”对话框图1-22 在文档窗口中编辑网页 3．保存网页（1）选择“文件”|“保存”命令，在弹出的“另存为”对话框中选择要保存文件的路径，并在“文件名”文本框中输入myweb002.html，如图1-23所示。（2）单击“保存”按钮即可完成网页文件的保存工作。专家点拨：第一次保存网页文件时，“文件”菜单下的“保存”命令和“另存为”命令的作用是相同的。当文件修改后进行保存时，“保存”命令是将原有的文件保存为修改后的文件，而“另存为”命令则可以保存为其他的文件，保留原有文件。尚未保存的网页会在文档标题后以“*”号表示，如图1-24所示。图1-23 “保存文件”对话框 4．预览网页（1）保存完网页后，可以单击“文档工具栏”上的“在浏览器中预览/调试”按钮，选择下拉列表中的“预览在IExplore 6.0”命令来预览刚才制作的网页，如图1-25所示。图1-24 尚未保存的网页会在文档标题后以“*”号表示图1-25 预览网页专家点拨：还可以按键盘上的F12键，或者选择“文件”|“在浏览器中预览”| IExplore 6.0命令来预览刚才制作的网页。（2）用Dreamweaver制作的这个网页和前面制作的第一个网页没有太大的差别，而制作这个网页时却没有输入任何一个代码。是不是感觉有点奇怪？其实在Dreamweaver的设计视图中，当直观地输入内容到网页文档中时，Dreamweaver正在自动编写代码。在“文档工具栏”上选择“代码”选项卡并切换到“代码”视图，可以看到，这个网页所有HTML代码全在里面，如图1-26所示。 5．继续编辑网页（1）先来为网页更改一下标题，在“文档工具栏”中间有一个名为“标题”的文本框，将里面的文字改为“欢迎光临我的第二个网页！”字样，如图1-27所示。图1-26 网页的HTML代码图1-27 修改网页标题（2）这时再切换到代码视图，可以发现代码发生了改变，和标签中间增加了“欢迎光临我的第二个网页！”字样，如图1-28所示。在网页中除了文字以外，还可以加入其他的元素，如图像、声音、动画、影视等内容。下面再来为网页添加一张图片。（3）切换到设计视图，将光标定位在下一行。选择“插入”|“图像”命令，在弹出的“选择图像源文件”对话框中选择一张图片，如图1-29所示。单击“确定”按钮。图1-29 “选择图像源文件”对话框（4）假如选择的图片跟现在的这个网页不在同一驱动器上，比如网页保存在C盘，而图片在D盘，此时就会弹出一个询问是否将图片复制到网页所在文件夹的对话框，如图1-30所示。单击“是”按钮，将图片复制过来保存在同一文件夹中。 6．再次预览网页（1）按F12键预览，在弹出的警示对话框中单击“是”按钮，如图1-31所示。（2）在浏览器中预览的网页效果如图1-32所示。图1-32 在浏览器中预览的网页 1.2.3 站点的建立 Dreamweaver 8不仅仅是网页设计工具，更是网站设计工具，提供了大量和网站管理维护相关的功能，能够对网站中的文件、链接、媒体文件等多种资源进行统一管理，使网站设计工作事半功倍。要想使用Dreamweaver 8的网站管理功能，必须首先建立“站点”。下面就介绍如何创建一个站点。 1．设置站点名称选择“站点”|“新建站点”命令，在弹出的向导对话框中，为网站设置名称为samples，如图1-33所示，设置完成后单击“下一步”按钮。下面的“您的站点的HTTP地址（URL）是什么？”文本框暂时不要设置，因为目前只是进行站点的本地测试，后面需要使用服务器技术时我们再回头来修改这些设置。 2．设置是否使用服务器技术在向导的第二步中选择“否，我不想使用服务器技术。”单选按钮，然后单击“下一步”按钮，如图1-34所示。图1-33 设置站点名称图1-34 不使用服务器技术 3．设置站点的本地文件夹在向导的第三步中单击“您将把文件存储在计算机上的什么位置”文本框旁边的，在弹出的“选择站点samples的本地根文件夹”对话框中选择I:\samples，然后单击“选择”按钮返回向导窗口，如图1-35所示。单击“下一步”按钮。图1-35 选择站点的本地文件 4．设置远程服务器连接方式在向导的这个步骤中，在“您如何连接到远程服务器”下拉列表框中选择“无”选项，如图1-36所示。完成设置后，单击“下一步”按钮。图1-36 选择是否使用远程服务器 5．完成站点向导向导的最后一步将会展示站点的相关设置信息，验证无误后直接单击“完成”按钮，如图1-37所示。站点设置完成后，可以看到“文件”面板中列出了站点中的文件，如图1-38所示。如果“文件”面板没有显示，可以选择“窗口”|“文件”命令（快捷键为F8）。图1-37 完成建立站点向导图1-38 站点建立后的“文件”面板专家点拨：以上的操作仅仅接触到了建立站点向导提供的最基本设置，还有很多设置涉及到服务器技术的选用，以及如何利用Dreamweaver 8开发动态网页（比如ASP、PHP网站等），这些知识会在后面的章节中讲解。 1.3 在代码视图中创建HTML 前面在记事本程序中手工编写了一个简单的HTML文档，本节讲解在Dreamweaver代码视图中创建HTML文档的方法。在Dreamweaver代码视图中，利用标签选择器、代码提示工具和编码工具栏可以快速地创建专业的HTML文档。 1.3.1 标签选择器标签选择器是Dreamweaver的一个重要功能，利用它可以方便地编辑HTML代码，下面介绍标签选择器的使用方法。 1．输入标签（1）打开示例文件samples\part1\basicHTML.html，这是一个空白HTML文件。单击“文档”工具栏中的“拆分”按钮，进入拆分视图，如图1-39所示。图1-39 空白HTML文件（2）在代码视图中输入，如图1-40所示。 2．输入标签（1）在代码视图中将光标定位到标签中间，选择“插入”|“标签”命令（快捷键为Ctrl+E），弹出“标签选择器”对话框，展开“HTML标签”|“页面构成”|“常规”，选择右侧的body，如图1-41所示。图1-40 插入标签图1-41 选择标签专家点拨：在“标签选择器”对话框中，各种标签被分门别类地组织起来，可以层层展开列表，找到需要的标签后单击“插入”按钮，就可以将其插入到HTML文件中。注意，使用标签检查器之前，必须将编辑光标定位在代码视图中。（2）单击“插入”按钮，这时将弹出“标签编辑器-body”对话框，这里可以对标签进行具体设置，如图1-42所示。图1-42 “标签编辑器”对话框（3）在“常规”中单击“背景图像”后面的“浏览”按钮，从弹出的“选择文件”对话框中选择图片文件diannao3.png，然后单击“确定”按钮，如图1-43所示。图1-43 选择背景图片（4）回到“标签编辑器-body”对话框中单击“确定”按钮，这时可以看到标签已经被插入到HTML代码中了，如图1-44所示。可以看到中添加了一个background属性，属性的值被设置“../image/diannao3.png”，它的意思是告诉浏览器，当显示页面主体内容（body）时，用图片（diannao3.png）作为背景（background）。图1-44 插入标签并设置background属性（5）按F12键，启动浏览器进行预览，可以看到图1-45的效果。 3．插入标签（1）在代码视图中将光标定位到<html>标签之后，<body>标签之前，打开“标签选择器”对话框，展开“HTML标签”|“页面构成”，在右侧选择<title>，然后单击“插入”按钮，如图1-46所示。（2）单击“关闭”按钮，退出“标签选择器”对话框，进入代码视图，在中间输入“Dreamweaver编制最简单的HTML文件”，如图1-47所示。（3）按F12键进行预览，浏览器窗口中的内容没有变化，但是可以看到浏览器窗口标题栏的改变，如图1-48所示。图1-45 效果预览图1-46 插入标签图1-47 设置标签的值图1-48 效果预览 1.3.2 代码提示工具为了方便用户对HTML源代码进行编辑，Dreamweaver 8提供了代码提示工具。在代 20 Dreamweaver网页制作实用教程第1章网页设计基础 25