网页设计基础知识资料课件

1安徽财经大学 网页制作基础网页制作基础教程主主讲：魏魏苏林林EmailEmail：wei_wei_第第1 1章章 网页设计基础知识网页设计基础知识3第1章 网页设计基础知识n1.1网页制作基础知识n1.2DreamWeaver界面介绍n1.3创建站点n1.3网页文件的基本操作n1.4设置页面属性n1.5练习制作简单的网页站点41.1网页制作基础知识n网页制作基础知识：网页制作基础知识：网页和网站网页和网站HTMLHTML基础知识基础知识WebWeb图像的基础知识图像的基础知识网站设计基本流程网站设计基本流程5网页的概念n网页是由网页是由HTMLHTML（超级文本标识语言）或者其他语言编（超级文本标识语言）或者其他语言编写的，通过写的，通过IEIE浏览器编译后供用户获取信息的页面，浏览器编译后供用户获取信息的页面，它又称为它又称为WebWeb页，其中可包含文字、图像、表格、动画页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。和超级链接等各种网页元素。n网页是展现各种信息的载体。网页是展现各种信息的载体。6网站的概念n网站就是一个或多个网页的集合。从广义上讲，网站网站就是一个或多个网页的集合。从广义上讲，网站就是当网页发布到就是当网页发布到InternetInternet上以后，能通过浏览器在上以后，能通过浏览器在I Internetnternet上访问的页面。上访问的页面。n网站是通过超链接连接起来的一些网页的集合。网站是通过超链接连接起来的一些网页的集合。门户网站门户网站职能网站职能网站专业网站专业网站个人网站个人网站7网页的分类n按所处位置分类按所处位置分类按网页在网站中所处的位置可将网页分为主页和子页两类。按网页在网站中所处的位置可将网页分为主页和子页两类。8网页的分类n按表现形式分类按表现形式分类按网页的表现形式可将网页分为静态网页和动态网页。按网页的表现形式可将网页分为静态网页和动态网页。9网页中的常用术语n万维网（万维网（wwwwww）n浏览器浏览器 n统一资源定位符（统一资源定位符（URLURL）n超文本传输协议（超文本传输协议（HTTPHTTP）nIPIP地址地址 n域名域名 n超级链接超级链接 n超级文本标记语言（超级文本标记语言（HTMLHTML）10万维网（www）n万维网（万维网（wwwwww）是）是World Wide World Wide WebWeb的中文简称，也称为的中文简称，也称为3W3W网，它的本质是一种基于超网，它的本质是一种基于超级文本技术的交互式信息浏览检索工具，是级文本技术的交互式信息浏览检索工具，是InternetInternet提供的应用最普及、功能最丰富、使用方法最简便的提供的应用最普及、功能最丰富、使用方法最简便的信息服务，用户可通过它在信息服务，用户可通过它在InternetInternet上浏览、编辑、上浏览、编辑、传递超文本格式的文件（即传递超文本格式的文件（即.html.html格式文件）。格式文件）。11浏览器n浏览器是用于阅读网页中信息的一种软件工具，就像浏览器是用于阅读网页中信息的一种软件工具，就像使用电脑必须有操作系统一样。使用电脑必须有操作系统一样。Internet ExplorerInternet Explorer（IEIE）Netscape NavigatorNetscape Navigator（NENE）腾讯腾讯TTTT浏览器浏览器遨游浏览器遨游浏览器FoxfireFoxfire火狐浏览器火狐浏览器 12统一资源定位符（URL）nURLURL（Uniform Resource Uniform Resource LocatorLocator）主要是用来指定协议（如）主要是用来指定协议（如HTTPHTTP或或FTPFTP）以及）以及对象、文档、万维网网页或其他目标在对象、文档、万维网网页或其他目标在InternetInternet的位的位置和存取方式。置和存取方式。通信协议通信协议 主机名主机名所要访问的网页路径及名称所要访问的网页路径及名称 13超文本传输协议（HTTPHTTP）n超文本传输协议超文本传输协议(HTTP(HTTP，HyperText Transfer HyperText Transfer Protocol)Protocol)是互联网上应用最为广泛的一种网络协议。是互联网上应用最为广泛的一种网络协议。所有的所有的WWWWWW文件都必须遵守这个标准。设计文件都必须遵守这个标准。设计HTTPHTTP最初的最初的目的是为了提供一种发布和接收目的是为了提供一种发布和接收HTMLHTML页面的方法页面的方法14IP地址nIPIP地址用来标识连接到地址用来标识连接到InternetInternet上电脑的指定编号，上电脑的指定编号，每一个每一个IPIP地址对应一台电脑，这与用电话号码标识电地址对应一台电脑，这与用电话号码标识电话网络中的电话相同。话网络中的电话相同。n电脑识别的电脑识别的IPIP地址由地址由3232位二进制数值组成，电脑上以位二进制数值组成，电脑上以十进制数值来显示，一组数值分为十进制数值来显示，一组数值分为4 4部分，每一部分均部分，每一部分均不能大于不能大于255255，中间用，中间用“.”分隔，如分隔，如61.139.2.6961.139.2.69。15域名n域名就是常说的网址，它也具有惟一性，如百度的网域名就是常说的网址，它也具有惟一性，如百度的网址址、网易的网址、网易的网址等就是一等就是一个域名，域名由汉语拼音或英文字符加上数字表示，个域名，域名由汉语拼音或英文字符加上数字表示，在访问网络时，域名将通过域名服务器转换成在访问网络时，域名将通过域名服务器转换成IPIP地址地址，这种转换是在后台完成的。，这种转换是在后台完成的。16超级链接n超级链接是网页中最常用的元素之一，网页就是通过超级链接是网页中最常用的元素之一，网页就是通过无数的超级链接才能组成一个网站。无数的超级链接才能组成一个网站。n超级链接可以链接到网站内部页面、对象，也可以链超级链接可以链接到网站内部页面、对象，也可以链接到其他网站，大大方便了用户在各个页面对象之间接到其他网站，大大方便了用户在各个页面对象之间实现跳转。实现跳转。17超级文本标记语言（HTML）nHTMLHTML（Hyper Text Markup Hyper Text Markup LanguageLanguage）是一种用户与电脑之间进行交流的文本技）是一种用户与电脑之间进行交流的文本技术，各种网页均是用术，各种网页均是用HTMLHTML语言来描述的，用语言来描述的，用HTMLHTML语言语言编写的网页文件的扩展名一般为编写的网页文件的扩展名一般为“*.htm.htm”或或“*.html.html”。181.5 网页设计的相关知识n设计网页的原则设计网页的原则 n网页设计的一般步骤网页设计的一般步骤 n网页制作的常用工具网页制作的常用工具19设计网页的原则n整体规划整体规划 n鲜明的主题鲜明的主题n善用图像善用图像n醒目的导航醒目的导航n及时更新及时更新n易记的网站名称易记的网站名称n动画适量动画适量20网页设计的一般步骤n规划网站规划网站n收集整理资源收集整理资源n配置站点配置站点n创建页面创建页面n测试站点测试站点n发布站点发布站点 n维护、更新站点维护、更新站点21网页制作的常用工具n网页设计软件网页设计软件 DreamweaverDreamweaver是目前使用最多的网页设计软件。是目前使用最多的网页设计软件。n图像处理软件图像处理软件制作网页图像的软件种类繁多，大多数网页设计人员选择的是制作网页图像的软件种类繁多，大多数网页设计人员选择的是F Fireworksireworks或或PhotoshopPhotoshop。n动画制作软件动画制作软件 网页动画制作中最常用的软件非网页动画制作中最常用的软件非FlashFlash莫属。莫属。n通常将通常将DreamweaverDreamweaver、FireworksFireworks、FlashFlash俗称网页三剑客俗称网页三剑客221.2 Dreamweaver 8简介nMacromedia Dreamweaver Macromedia Dreamweaver 8 8是一款专业的是一款专业的HTMLHTML编辑器，用于对编辑器，用于对 Web Web 站点、站点、WebWeb页和页和 Web Web 应用程序进行设计、编码和开发。无论您是喜欢直接应用程序进行设计、编码和开发。无论您是喜欢直接编写编写HTMLHTML代码的驾驭感还是偏爱在可视化编辑环境中代码的驾驭感还是偏爱在可视化编辑环境中工作，工作，Dreamweaver Dreamweaver 8 8都会为您提供帮助良多的工具，丰富您的都会为您提供帮助良多的工具，丰富您的 Web Web 创作体验。创作体验。Dreamweaver8Dreamweaver8的安装与启动的安装与启动Dreamweaver Dreamweaver 的工作界面的工作界面使用使用Dreamweaver8Dreamweaver8的帮助的帮助23Dreamweaver8的安装24Dreamweaver 8.0Dreamweaver 8.0的启动和退出的启动和退出1.1.启动启动Dreamweaver8.0Dreamweaver8.0在在WindowsWindows操作系统下，单击左下角的操作系统下，单击左下角的【开始开始】按钮，从按钮，从【程序程序】菜单中选择菜单中选择MacromediaMacromedia菜单，然后从子菜单菜单，然后从子菜单中单击中单击【Macromedia Dreamweaver Macromedia Dreamweaver 8 8】即可启动，如图所示。即可启动，如图所示。252.2.退出退出Dreamweaver 8.0Dreamweaver 8.0退出退出Dreamweaver Dreamweaver 8.08.0的方法很简单，我们可以有以下几种方式退出编辑的方法很简单，我们可以有以下几种方式退出编辑界面：界面：（1 1）单击）单击Dreamweaver 8Dreamweaver 8窗口右上方的关闭按钮；窗口右上方的关闭按钮；（2 2）按下）按下“Alt+F4”Alt+F4”组合键；组合键；（3 3）选择）选择“文件文件”菜单中的菜单中的“退出退出”命令，或按快捷键命令，或按快捷键Ctrl+QCtrl+Q退出系统。退出系统。26Dreamweaver 8.0Dreamweaver 8.0 的工作界面的工作界面nDreamweaver Dreamweaver 8 8的工作界面主要包括有标题栏、菜单栏、文档工具栏、的工作界面主要包括有标题栏、菜单栏、文档工具栏、文档窗口、状态栏、插入面版、属性面版和文档窗口、状态栏、插入面版、属性面版和CSSCSS样式面样式面版。本节将主要介绍版。本节将主要介绍Dreamweaver 8Dreamweaver 8的工作界面。的工作界面。27标题栏nDreamweaver Dreamweaver 8 8的标题栏在应用程序的最上面，它的左侧用来显示当的标题栏在应用程序的最上面，它的左侧用来显示当前正在运行的应用程序名称，它的右侧为最小化、最前正在运行的应用程序名称，它的右侧为最小化、最大化（还原）和关闭按钮，如所示。大化（还原）和关闭按钮，如所示。n需要说明的是，标题栏是默认的文档标题需要说明的是，标题栏是默认的文档标题Untitled Untitled DocumentDocument，显示的文件名为，显示的文件名为Untitled-Untitled-1 1。每当用户创建一个新的文档时，。每当用户创建一个新的文档时，Dreamweaver Dreamweaver 8 8就会自动以就会自动以UntitledUntitled给出一个默认的名字。当用户保给出一个默认的名字。当用户保存文件时，系统会提示用户另外命名一个名字，当然存文件时，系统会提示用户另外命名一个名字，当然用户也可以以默认的名字来保存。用户也可以以默认的名字来保存。28菜单栏n菜单栏，包括有菜单栏，包括有“文件文件”、“编辑编辑”、“查看查看”、“插插入入”、“修改修改”、“文本文本”、“命令命令”、“站点站点”、“窗口窗口”、“帮助帮助”1010个菜单项。个菜单项。nDreamweaver 8Dreamweaver 8菜单选项有以下菜单选项有以下3 3种形式：种形式：（1 1）子菜单命令：该类命令的名称后面带有一个向右的小三角）子菜单命令：该类命令的名称后面带有一个向右的小三角箭头，当鼠标移动到该类命令上时，就会打开一个子菜单。例箭头，当鼠标移动到该类命令上时，就会打开一个子菜单。例如在如在“插入插入”菜单下的菜单下的“媒体媒体”菜单命令。菜单命令。（2 2）开关命令：该命令在命令执行后，命令的左边会加上）开关命令：该命令在命令执行后，命令的左边会加上“”的选择标记。例如在的选择标记。例如在“查看查看”菜单下的菜单下的“设计设计”菜单命令。菜单命令。（3 3）对话框命令：该类命令的名称后面带有一个省略号，单击）对话框命令：该类命令的名称后面带有一个省略号，单击该类命令则会打开一个对话框。该类命令则会打开一个对话框。29文档工具栏n“文档文档”工具栏中包含按钮，这些按钮使您可以在文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：的不同视图间快速切换：“代码代码”视图、视图、“设计设计”视视图、同时显示图、同时显示“代码代码”和和“设计设计”视图的拆分视图。视图的拆分视图。工具栏中还包含一些与查看文档、在本地和远程站点工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。间传输文档有关的常用命令和选项。30文档窗口n文档窗口显示当前文档。可以选择下列任一视图：文档窗口显示当前文档。可以选择下列任一视图：（1 1）设计视图：是一个用于可视化页面布局、可视化编辑和快）设计视图：是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，速应用程序开发的设计环境。在该视图中，Dreamweaver Dreamweaver 显示文档的完全可编辑的可视化表示形式，类似于在浏览器中显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。查看页面时看到的内容。（2 2）代码视图：是一个用于编写和编辑）代码视图：是一个用于编写和编辑 HTMLHTML、JavaScriptJavaScript、服务器语言代码（如、服务器语言代码（如PHPPHP或或ColdFusionColdFusion标记标记语言）以及任何其它类型代码的手工编码环境。语言）以及任何其它类型代码的手工编码环境。（3 3）代码和设计视图：可以在单个窗口中同时看到同一文档的）代码和设计视图：可以在单个窗口中同时看到同一文档的代码视图和设计视图。代码视图和设计视图。n当文档窗口有一个标题栏时，标题栏显示页面标题，并当文档窗口有一个标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。如果您做了更改但在括号中显示文件的路径和文件名。如果您做了更改但尚未保存，尚未保存，Dreamweaver Dreamweaver 将在文件名后显示一个星号。将在文件名后显示一个星号。31插入面版n插入面版包含用于创建和插入对象（如表格、层和图插入面版包含用于创建和插入对象（如表格、层和图像）的按钮，如图像）的按钮，如图1-1-1515所示。当鼠标指针滚动到一个按钮上时，会出现一所示。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。这些按钮被组个工具提示，其中含有该按钮的名称。这些按钮被组织到几个类别中，您可以在织到几个类别中，您可以在“插入插入”栏的左侧切换它栏的左侧切换它们。当前文档包含服务器代码时，还会显示其它类别。们。当前文档包含服务器代码时，还会显示其它类别。当您启动当您启动DreamweaverDreamweaver时，系统会打开您上次使用的类时，系统会打开您上次使用的类别。别。32属性面版n属性面版可以检查和编辑当前选定页面元素（如文本属性面版可以检查和编辑当前选定页面元素（如文本和插入的对象）的最常用属性。属性面版中的内容根和插入的对象）的最常用属性。属性面版中的内容根据选定的元素会有所不同。例如，如果您选择页面上据选定的元素会有所不同。例如，如果您选择页面上的一个图像，则属性面版将改为显示该图像的属性如的一个图像，则属性面版将改为显示该图像的属性如图像的文件路径、图像的宽度和高度、图像周围的边图像的文件路径、图像的宽度和高度、图像周围的边框等。框等。33使用Dreamweaver8的帮助n当我们在学习的过程出现问题难以解决时，一个最好当我们在学习的过程出现问题难以解决时，一个最好的办法就是使用的办法就是使用Dreamweaver Dreamweaver 8 8的在线帮助，下面我们介绍使用的在线帮助的方法。的在线帮助，下面我们介绍使用的在线帮助的方法。34打开帮助系统n选择选择“帮助帮助”菜单下的菜单下的“DreamweaverDreamweaver帮助帮助”，就可以，就可以打开打开Dreamweaver Dreamweaver 8 8帮助系统。也可以直接按下帮助系统。也可以直接按下F1F1键打开帮助系统。键打开帮助系统。35使用帮助n使用帮助系统查找所需要的信息可以按以下方法进行：使用帮助系统查找所需要的信息可以按以下方法进行：1 1、若要搜索产品中的帮助、若要搜索产品中的帮助(Windows)(Windows)，请执行以下操作：，请执行以下操作：在在 Dreamweaver Dreamweaver 帮助中，单击帮助中，单击“搜索搜索”选项卡。选项卡。在文本框中键入一个单词或短语，然后单击在文本框中键入一个单词或短语，然后单击“列出主题列出主题”。双击结果列表中的一个主题，可显示该主题。双击结果列表中的一个主题，可显示该主题。36使用帮助n使用帮助系统查找所需要的信息可以按以下方法进行：使用帮助系统查找所需要的信息可以按以下方法进行：2 2、若要使用索引、若要使用索引 (Windows)(Windows)，请执行以下操作：，请执行以下操作：（1 1）在）在 Dreamweaver Dreamweaver 帮助中，单击帮助中，单击“索引索引”选项卡。选项卡。（2 2）滚动到字母列表中的一个索引项，然后双击该项可显示索引信）滚动到字母列表中的一个索引项，然后双击该项可显示索引信息。息。37查看操作相关帮助n在编辑的过程中，有时需要查看当前操作的帮助信息在编辑的过程中，有时需要查看当前操作的帮助信息，这时可以按照如下方法操作：，这时可以按照如下方法操作：（1 1）如果是在对话框中，要查看当前对话框的信息，可以单击）如果是在对话框中，要查看当前对话框的信息，可以单击对话框的对话框的“帮助帮助”按纽，启动帮助系统后将直接跳转到当前操按纽，启动帮助系统后将直接跳转到当前操作有关的帮助信息页面上。例如在表格对话框中单击作有关的帮助信息页面上。例如在表格对话框中单击“帮助帮助”按纽，则会显示表格的帮助信息。按纽，则会显示表格的帮助信息。（2 2）如果是在使用浮动面版进行编辑的过程中，要查看帮助系）如果是在使用浮动面版进行编辑的过程中，要查看帮助系统，可以单击浮动面版上的统，可以单击浮动面版上的 按纽，也可以启动帮助系统，并直接跳转到与当前操作相关的按纽，也可以启动帮助系统，并直接跳转到与当前操作相关的帮助页面上。例如在属性面版上单击按纽，将会显示属性的相帮助页面上。例如在属性面版上单击按纽，将会显示属性的相关帮助信息。关帮助信息。381.31.3创建站点创建站点n创建本地站点创建本地站点n管理站点管理站点n管理网站中的文件和文件夹管理网站中的文件和文件夹39创建本地站点创建本地站点n步骤步骤1 1：在本地硬盘上建立一个用来存放站点的文件夹：在本地硬盘上建立一个用来存放站点的文件夹，命名为，命名为“site”site”，该文件夹就是本地站点的根目录，该文件夹就是本地站点的根目录，是为网站特别建立的一个文件夹。，是为网站特别建立的一个文件夹。n步骤步骤2:2:打开打开Dreamweaver Dreamweaver 8.08.0，选择，选择“站点站点”菜单下的菜单下的“管理站点管理站点”命令，或者命令，或者选择文件面板中的选择文件面板中的“管理站点管理站点”命令，打开命令，打开 “管理站点管理站点”对话框。对话框。40n步骤步骤3:3:单击单击“管理站点管理站点”对话框中的对话框中的“新建新建”按钮，按钮，在弹出菜单中选择在弹出菜单中选择“站点站点”命令。命令。41n步骤步骤4 4：单击：单击“站点站点”命令后，系统会弹出窗口，这是命令后，系统会弹出窗口，这是一个定义站点的向导，选择一个定义站点的向导，选择“基本基本”选项卡，给网站选项卡，给网站定义一个名称，例如定义一个名称，例如“数学与计算机系数学与计算机系”。42n步骤步骤5 5：单击：单击“下一步下一步”按钮，在窗口中设置网站是否按钮，在窗口中设置网站是否使用服务器技术，例如：使用服务器技术，例如：ASPASP、PHPPHP等。由于我们要制等。由于我们要制作的是基本的静态网站，所以选择作的是基本的静态网站，所以选择“否，我不想使用否，我不想使用服务器技术服务器技术”单选按钮。单选按钮。43n步骤步骤6 6：单击：单击“下一步下一步”按钮，开始设置网页的存储方按钮，开始设置网页的存储方法和存储路径。在上半部分的单选项中选择第一项法和存储路径。在上半部分的单选项中选择第一项“编辑我的计算机上的本地副本，完成后再上传到服务编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）器（推荐）”。如果申请的网站空间支持在线编辑功。如果申请的网站空间支持在线编辑功能，那么可以选择能，那么可以选择“使用本地网络直接在服务器上编使用本地网络直接在服务器上编辑辑”单选项。单选项。44n步骤步骤7 7：完成以上的设置后单击：完成以上的设置后单击“下一步下一步”按钮，在这按钮，在这里选择连接服务器的方式，以及网页在服务器上的存里选择连接服务器的方式，以及网页在服务器上的存储位置。储位置。45n步骤步骤8 8：单击：单击“下一步下一步”按钮。在这里选择是否使用按钮。在这里选择是否使用“存回存回”和和“取出取出”。选中。选中“是，启用存回和取出是，启用存回和取出”选选项，可以多人共同完成网站的维护工作。如果只需一项，可以多人共同完成网站的维护工作。如果只需一个就能够完成网站的维护工作，可以选择个就能够完成网站的维护工作，可以选择“否否”。46n步骤步骤9 9：至此完成了对网站的基本定义。单击：至此完成了对网站的基本定义。单击“下一步下一步”按钮，按钮，Dreamweaver Dreamweaver 8.08.0会弹出对话框询问设置的信息是否准确，单击会弹出对话框询问设置的信息是否准确，单击“完完成成”按钮，本地站点就创建成功了。按钮，本地站点就创建成功了。47管理站点管理站点1.1.切换站点切换站点Dreamweaver Dreamweaver 8.08.0中可以同时存在多个站点，在文件面板左边的下拉中可以同时存在多个站点，在文件面板左边的下拉列表框中选中某个已创建的站点，就可切换到对这个列表框中选中某个已创建的站点，就可切换到对这个站点进行操作的状态。站点进行操作的状态。482 2编辑站点编辑站点如果要对站点进行编辑，可以在如果要对站点进行编辑，可以在“管理站点管理站点”对话框中对话框中，选择要编辑的站点，然后用鼠标单击，选择要编辑的站点，然后用鼠标单击“管理站点管理站点”对话框中的对话框中的“编辑编辑”按钮，重新打开按钮，重新打开“站点定义站点定义”向向导，根据需要一步一步修改站点的属性即可。导，根据需要一步一步修改站点的属性即可。493 3删除站点删除站点如果不需要某个站点时，可以将其从站点列表中删除。如果不需要某个站点时，可以将其从站点列表中删除。选择选择“站点站点”菜单下的菜单下的“管理站点管理站点”命令，打开命令，打开“管管理站点理站点”对话框，在该对话框中选择一个站点，单击对话框，在该对话框中选择一个站点，单击“删除删除”按钮，即可删除一个站点，对某一个站点进按钮，即可删除一个站点，对某一个站点进行删除操作后，网站的文件仍保存在硬盘原来的位置行删除操作后，网站的文件仍保存在硬盘原来的位置上，并没有从硬盘上删除。上，并没有从硬盘上删除。50管理网站中的文件和文件夹管理网站中的文件和文件夹1 1创建文件夹和文件创建文件夹和文件文件面板通常显示站点中的所有文件和文件夹，但新建文件面板通常显示站点中的所有文件和文件夹，但新建的站点中不包含任何文件或文件夹。所有的文件和文的站点中不包含任何文件或文件夹。所有的文件和文件夹都需要新建，在文件面板中站点根目录上单击鼠件夹都需要新建，在文件面板中站点根目录上单击鼠标右键，然后从弹出的快捷菜单中单击菜单项标右键，然后从弹出的快捷菜单中单击菜单项“新建新建文件夹文件夹”或或“新建文件新建文件”，接着给新的文件夹或文件，接着给新的文件夹或文件命名。命名。512 2重命名文件夹或文件重命名文件夹或文件先选中需要重命名的文件夹或文件，然后单击右键，在弹出的快捷菜单中先选中需要重命名的文件夹或文件，然后单击右键，在弹出的快捷菜单中单击单击“编辑编辑”选项的下级菜单中的选项的下级菜单中的“重命名重命名”命令或者按命令或者按【F2F2】快捷键快捷键，文件夹或文件的名称变为可编辑状态，重新输入新的名称，按，文件夹或文件的名称变为可编辑状态，重新输入新的名称，按EnterEnter键确认即可。键确认即可。3 3移动和复制文件移动和复制文件从从“文件文件”面板的本地站点文件列表中，选中要移动或复制的文件夹或文面板的本地站点文件列表中，选中要移动或复制的文件夹或文件，如果要进行移动操作，在弹出的快捷菜单中单击件，如果要进行移动操作，在弹出的快捷菜单中单击“编辑编辑”选项的下选项的下级菜单中的级菜单中的“剪切剪切”命令；如果要进行复制操作，则执行命令；如果要进行复制操作，则执行“编辑编辑”选项选项的的“拷贝拷贝”命令，然后执行命令，然后执行“编辑编辑”选项下的选项下的“粘贴粘贴”命令，将文件夹命令，将文件夹或文件移动或复制到相应的文件夹中。或文件移动或复制到相应的文件夹中。4 4删除文件夹或文件删除文件夹或文件要从本地站点文件列表中删除文件夹或文件，先选中要删除的文件夹或文要从本地站点文件列表中删除文件夹或文件，先选中要删除的文件夹或文件，然后执行件，然后执行“编辑编辑”选项同上的选项同上的“删除删除”命令或按命令或按DeleteDelete键，这时系键，这时系统会弹出一个提示对话框，询问是否要真正删除文件夹或文件，单击统会弹出一个提示对话框，询问是否要真正删除文件夹或文件，单击“是是”按钮确认后即可将文件夹或文件从本地站点中删除。按钮确认后即可将文件夹或文件从本地站点中删除。521.3 1.3 网页文件的基本操作网页文件的基本操作n创建网页和打开网页创建网页和打开网页n保存网页保存网页n在浏览器中预览网页在浏览器中预览网页53创建网页和打开网页创建网页和打开网页1.1.新建网页新建网页单击单击“文件文件”菜单下菜单下“新建新建”命令，即可弹出命令，即可弹出“新建文新建文档档”对话框。从对话框。从“类别类别”列表框中选择列表框中选择“基本页基本页”选选项，然后选择项，然后选择“基本页基本页”列表框中的列表框中的“HTML”HTML”选项。选项。单击单击“创建创建”按钮，即可新建一个空白的按钮，即可新建一个空白的HTMLHTML网页文网页文档。档。542.2.打开网页打开网页单击单击“文件文件”菜单选择菜单选择“打开打开”命令，弹出命令，弹出“打开打开”对对话框。在该对话框内选中要打开的话框。在该对话框内选中要打开的HTMLHTML文档，单击文档，单击“打开打开”按钮，即可将选定的按钮，即可将选定的HTMLHTML文档打开。也可以在文档打开。也可以在“文件文件”面板上，双击面板上，双击“站点目录站点目录”中的网页文件也中的网页文件也可以打开网页文件。可以打开网页文件。55保存网页保存网页在完成创建、编辑的网页之后，关键的一步就是保存网在完成创建、编辑的网页之后，关键的一步就是保存网页，否则一切都是徒劳的，保存网页有如下几种方法：页，否则一切都是徒劳的，保存网页有如下几种方法：n单击单击“文件文件”菜单选择菜单选择“保存保存”命令，可以原名字原命令，可以原名字原路径保存当前的文档。路径保存当前的文档。n单击单击“文件文件”菜单选择菜单选择“另保存另保存”命令，可弹出命令，可弹出“另另存为存为”对话框。利用该对话框可以将当前的文档以其对话框。利用该对话框可以将当前的文档以其他名字保存。他名字保存。n单击单击“文件文件”菜单选择菜单选择“保存全部保存全部”命令，可将当前命令，可将当前正在编辑的所有文档以原名保存。正在编辑的所有文档以原名保存。56在浏览器中预览网页在浏览器中预览网页n单击标准工具栏上的预览按钮或按单击标准工具栏上的预览按钮或按“F12”F12”可在浏览器可在浏览器中预览所编辑的网页。中预览所编辑的网页。571.4 1.4 设置页面属性设置页面属性n步骤步骤1 1：打开：打开Dreamweaver8.0Dreamweaver8.0，新建一个网页，或者打，新建一个网页，或者打开一个现有的网页，选择开一个现有的网页，选择“修改修改”菜单下的菜单下的“页面属页面属性性”命令，或者单击属性面板中的命令，或者单击属性面板中的“页面属性页面属性”按钮按钮，打开，打开“页面属性页面属性”对话框。对话框。58n步骤步骤2 2：在：在“页面属性页面属性”对话框中设置对话框中设置“外观外观”参数，参数，选择选择“页面属性页面属性”中的中的“外观外观”选项同，在右侧可能选项同，在右侧可能设置具体的参数。设置具体的参数。59n步骤步骤3 3：页面属性设置完成后，单击：页面属性设置完成后，单击“确定确定”保存设置保存设置，然后中再打开，然后中再打开“页面属性页面属性”对话框，并选择左侧的对话框，并选择左侧的“分类分类”列表中的列表中的“链接链接”选项同，在右侧可以对链选项同，在右侧可以对链接的样式进行详细的设置。接的样式进行详细的设置。601.5 1.5 练习制作简单的网页站点练习制作简单的网页站点n1.1.创建一个名为创建一个名为“计算机基础精品课程计算机基础精品课程”的站点，将的站点，将其中的本地站点保存在其中的本地站点保存在“D:D:computer”computer”文件夹下，文件夹下，远程站点保存在远程站点保存在“D:D:computer”computer”文件夹下。根据如文件夹下。根据如图所示的网站的逻辑图，为图所示的网站的逻辑图，为“计算机基础精品课程计算机基础精品课程”网站建立一个存放图片的文件夹网站建立一个存放图片的文件夹“images”images”，并新建，并新建名为名为“index.html”index.html”、“teacher.html”teacher.html”、“jiaoxue.jiaoxue.html”html”、“shiyan.html”shiyan.html”、“rili.html”rili.html”、“kejiakejian.html”n.html”和和“luxiang.html”luxiang.html”的网页文件，最后设置的网页文件，最后设置i index.htmlndex.html的页面属性。的页面属性。61n2.2.创建一个创建一个“个人求职主页个人求职主页”的站点，将其中的本地站的站点，将其中的本地站点保存在点保存在“D:D:self”self”文件夹下，远程站点保存在文件夹下，远程站点保存在“D D:self”self”文件夹下。根据网站的主页，为文件夹下。根据网站的主页，为“个人求职个人求职主页主页”网站建立一个存放图片的文件夹网站建立一个存放图片的文件夹“images”images”，并依据如图所示的网页建立网站目录，建立所需要的并依据如图所示的网页建立网站目录，建立所需要的网页文件，最后设置网页文件，最后设置index.htmlindex.html的页面属性。的页面属性。62n3.3.创建一个创建一个“公司产品销售公司产品销售”的站点，根据网站的主页的站点，根据网站的主页，为，为“公司产品销售公司产品销售”网站建立一个站点，并依据如网站建立一个站点，并依据如图所示的网页建立网站目录，建立所需要的网页文件图所示的网页建立网站目录，建立所需要的网页文件，最后设置，最后设置index.htmlindex.html的页面属性。的页面属性。631.7 简单网页案例制作n本课上机实战将练习在本课上机实战将练习在Dreamweaver Dreamweaver 8 8中新建一个只包含文本的简单网页，并使用中新建一个只包含文本的简单网页，并使用IEIE浏览器浏览器预览其效果。其中主要练习预览其效果。其中主要练习Dreamweaver Dreamweaver 8 8的启动、新建文档、保存网页、预览网页和退出的启动、新建文档、保存网页、预览网页和退出DreaDreamweaver 8mweaver 8的操作。的操作。