河南大学网页设计精讲.ppt

网网页页制制作作教教程程网网页页制制作作教教程程课程简介网页是网络中一个重要的信息载体，在网页是网络中一个重要的信息载体，在InternetInternet中的大部分信息都是以网页的形式表中的大部分信息都是以网页的形式表现出来。通过网页可以实现网络资源共享和数现出来。通过网页可以实现网络资源共享和数据传输的功能。据传输的功能。“工欲善其事，必先利其器工欲善其事，必先利其器”，想要自己制作，想要自己制作出优秀的网页，就要掌握一种合适的工具。出优秀的网页，就要掌握一种合适的工具。常用的网页制作工具有常用的网页制作工具有DreamweaverDreamweaver、FrontPageFrontPage等，图像处理工具有等，图像处理工具有PhotoshopPhotoshop、FireworksFireworks、CorelDRAWCorelDRAW、FreeHandFreeHand等。等。2024/5/10 周五2网网页页制制作作教教程程课程简介其中，网页三剑客属于主流的制作工具。其中，网页三剑客属于主流的制作工具。使用这三个软件可以完成制作网页的所有使用这三个软件可以完成制作网页的所有任务。它包括三个软件：任务。它包括三个软件：Dreamweaver Dreamweaver、Fireworks Fireworks、Flash Flash。DreamweaverDreamweaver是制作网页和网站的工具，是制作网页和网站的工具，FireworksFireworks是设计和制作专业化网页图像的是设计和制作专业化网页图像的工具，工具，FlashFlash是当前最出色的网页动画制是当前最出色的网页动画制作软件。作软件。目前比较流行的版本是目前比较流行的版本是MacromediaMacromedia StudioStudio 8.08.0。2024/5/10 周五3网网页页制制作作教教程程如何学好这门课端正学习态度端正学习态度掌握理论知识掌握理论知识重视上机操作重视上机操作有效利用网络有效利用网络多动手勤思考多动手勤思考2024/5/10 周五4网网页页制制作作教教程程课程要求1.1.考试方法：考试方法：理论考试理论考试4040 +综合性作业综合性作业4040 +考勤考勤20202.2.上机要求：上机要求：时间：时间：14:3014:3016:3016:30；地点：二楼机房地点：二楼机房上机要对号入座，注意带鞋套，保持卫生上机要对号入座，注意带鞋套，保持卫生上机要先注册个人信息上机要先注册个人信息遵守考勤纪律，请假必须写假条遵守考勤纪律，请假必须写假条由于等级考试原因，本周不上机由于等级考试原因，本周不上机2024/5/10 周五5网网页页制制作作教教程程课程要求3.3.指定教材：指定教材：网页制作三剑客（网页制作三剑客（Studio 8Studio 8）标准培训教）标准培训教程程 上海科学普及出版社上海科学普及出版社4.4.课程内容安排：课程内容安排：网页制作基础知识网页制作基础知识Dreamweaver 8.0Dreamweaver 8.0Fireworks 8.0Fireworks 8.0Flash 8.0Flash 8.02024/5/10 周五6 介绍网页制作的相关术语介绍网页制作的相关术语 网页构成的基本要素网页构成的基本要素 网站建设的基本流程网站建设的基本流程 中文版中文版DreamweaverDreamweaver 8 8 操作基础操作基础第1讲 网页制作基础知识2024/5/10 周五7网网页页制制作作教教程程一、网页基本概念什么是什么是网页（网页（WebWeb PagePage）？网页就是一种以超文本和超媒体形式显示网页就是一种以超文本和超媒体形式显示信息的载体文件。其中的重要概念就是超信息的载体文件。其中的重要概念就是超级链接，它使网页的信息量更大，阅读起级链接，它使网页的信息量更大，阅读起来更加方便。来更加方便。什么是什么是网站（网站（WebWeb SiteSite）？网站就是由多个信息相关的网页构成，网网站就是由多个信息相关的网页构成，网页之间通过超级链接互相连接在一起的网页之间通过超级链接互相连接在一起的网络组织，又称为站点。络组织，又称为站点。2024/5/10 周五8网网页页制制作作教教程程网页制作的相关术语国际互联网因特网（国际互联网因特网（InternetInternet）统一资源定位器（统一资源定位器（URLURL）万维网（万维网（WWWWWW）超文本传输协议（超文本传输协议（HTTPHTTP）浏览器浏览器超文本标记语言（超文本标记语言（HTMLHTML）主页主页2024/5/10 周五9网网页页制制作作教教程程Internet简介InternetInternet是遍布全球的各种网络系统（如：局是遍布全球的各种网络系统（如：局域网、数据通信网、公用电话交换网等）组织域网、数据通信网、公用电话交换网等）组织在一起的世界性计算机网络系统，它是通过统在一起的世界性计算机网络系统，它是通过统一的网络协议一的网络协议TCP/IPTCP/IP协议连接在一起所组成的。协议连接在一起所组成的。InternetInternet的功能：的功能：电子邮件、文件传输（电子邮件、文件传输（FTPFTP）、远程）、远程登录（登录（TelnetTelnet）、网上查询（）、网上查询（IEIE、NetscapeNetscape、GopherGopher等浏览器）和网上交流（等浏览器）和网上交流（BBSBBS、网络新闻、网络新闻组组USENETUSENET、QQQQ等）。等）。2024/5/10 周五10网网页页制制作作教教程程URL地址URLURL（Uniform Resource LocaterUniform Resource Locater）即即统一资源定位统一资源定位器器，俗称，俗称“网址网址”。InternetInternet中的各种资源实际上分散在各地的计算机主中的各种资源实际上分散在各地的计算机主机中，定位器（机中，定位器（LocaterLocater）的作用就是要指出这些资）的作用就是要指出这些资源的所在位置。源的所在位置。URLURL就是一个可以带领用户到所要资就是一个可以带领用户到所要资源的所在位置，并通过适当的方式取得该资源的工具。源的所在位置，并通过适当的方式取得该资源的工具。例如下面的例如下面的URLURL地址：地址：其含义是该其含义是该URLURL地址使用的通讯协议为地址使用的通讯协议为HTTPHTTP协议，要协议，要查找的主机是，在该主机的查找的主机是，在该主机的newsnews文件夹中的文件夹中的chinachina文文件夹里件夹里，有一个名为，有一个名为index.htmindex.htm的文件的文件。2024/5/10 周五11网网页页制制作作教教程程WWW简介万维网也就是万维网也就是World Wide WebWorld Wide Web，又称，又称WWWWWW（3W3W），它是），它是InternetInternet世界最为重要的成世界最为重要的成员之一。员之一。WWWWWW是一个基于超文本（是一个基于超文本（HypertextHypertext）和超媒）和超媒体（体（HypermediaHypermedia）方式的信息检索服务工具。）方式的信息检索服务工具。超文本超文本：由文本组成，可以与其它文件相关由文本组成，可以与其它文件相关联。联。超媒体：超媒体：可以与多种形式的数据文件相关联。可以与多种形式的数据文件相关联。2024/5/10 周五12网网页页制制作作教教程程HTTP协议为了能够实现网络资源的网上传输和共享，就必为了能够实现网络资源的网上传输和共享，就必须制定一个客户端与服务器端双方在交流信息时须制定一个客户端与服务器端双方在交流信息时都能够理解的统一的都能够理解的统一的“共同语言共同语言”，这就是，这就是网络网络传输协议传输协议。它要求每个使用者必须遵循相同的标。它要求每个使用者必须遵循相同的标准，以保证信息和数据的传输畅通无阻。准，以保证信息和数据的传输畅通无阻。HTTPHTTP协议（协议（Hypertext Transfer ProtocolHypertext Transfer Protocol，超，超文本传输协议）文本传输协议）就是实现这一功能的就是实现这一功能的WWWWWW中的主中的主要协议，允许数据以任意的类型（包括多媒体文要协议，允许数据以任意的类型（包括多媒体文件）在网络中通信，并支持超文本和超媒体的形件）在网络中通信，并支持超文本和超媒体的形式。式。2024/5/10 周五13网网页页制制作作教教程程浏览器（浏览器（BrowserBrowser）：）：阅读浏览网页信息的应用阅读浏览网页信息的应用程序。它是一个翻译器，它将各种控制字符翻程序。它是一个翻译器，它将各种控制字符翻译成合适的屏幕显示方式，从而得到人们最后译成合适的屏幕显示方式，从而得到人们最后看到的网页。看到的网页。浏览器有很多种，如：浏览器有很多种，如：Microsoft Internet Microsoft Internet ExplorerExplorer（IEIE）、）、Netscape NavigatorNetscape Navigator（网景）、（网景）、Tencent TravelerTencent Traveler（腾讯（腾讯TTTT）等。）等。由于各个浏览器对同一控制字符的解释方式不由于各个浏览器对同一控制字符的解释方式不完全相同，所以即使是同一个网页，在不同浏完全相同，所以即使是同一个网页，在不同浏览器下的显示也可能有所不同。览器下的显示也可能有所不同。网页浏览器2024/5/10 周五14网网页页制制作作教教程程HTML简介HTMLHTML语言（语言（HyperText Markup LanguageHyperText Markup Language，超文本，超文本标记语言）标记语言）是一种用于网页制作的排版语言，是用是一种用于网页制作的排版语言，是用来表示网上信息的符号标记语言。来表示网上信息的符号标记语言。HTMLHTML并非是一种编程语言，我们只需要用并非是一种编程语言，我们只需要用HTMLHTML给文给文档添加标记，并保存成扩展名为档添加标记，并保存成扩展名为.Html.Html或或.Htm.Htm的文的文件（即网页的源文件），发布到网上即可。件（即网页的源文件），发布到网上即可。浏览器可以识别用浏览器可以识别用HTMLHTML编写的文件，并将这些编写的文件，并将这些HTMLHTML符号标记翻译成人们可以识别的信息，就是网页。符号标记翻译成人们可以识别的信息，就是网页。2024/5/10 周五15网网页页制制作作教教程程HTML的编辑环境HTMLHTML是一种纯文本文件，我们可以用任何文本是一种纯文本文件，我们可以用任何文本编辑器（包括记事本、写字板、编辑器（包括记事本、写字板、WordWord、WPSWPS）来编辑和创建它，保存时文件扩展名要改成来编辑和创建它，保存时文件扩展名要改成.htm.htm或或.html.html。在网页上点击鼠标右键，选择菜单中的在网页上点击鼠标右键，选择菜单中的 “查查看源文件看源文件 ”，就可以通过记事本看到网页的就可以通过记事本看到网页的HTMLHTML内容。内容。2024/5/10 周五16网网页页制制作作教教程程网网页页标标题题概概括括了了网网页页内内容容，能能迅迅速速了了解解网网页页的的大大意意，加加入入收收藏藏夹夹时时和和使使用用搜搜索索引引擎擎时时显显示示的的结结果果都都是是网网页的标题。页的标题。HTML的常用标记 HTML文件开始和结束的标记文件开始和结束的标记 HTML文件头标记，可以省略文件头标记，可以省略 网页的标题，显示在浏览器网页的标题，显示在浏览器窗口的标题栏，可以单独出现窗口的标题栏，可以单独出现 HTML文件主体标记，定义文件主体标记，定义了网页上显示的主要内容与显示了网页上显示的主要内容与显示格式格式 我的个人主页我的个人主页 *你你 好好！欢欢 迎迎 光光 临临 本本 站站*2024/5/10 周五17网网页页制制作作教教程程一一个个HTMLHTML文文件件是是由由标标记记组组成成的的，不不同同的的标标记记代代表不同的元素和效果。表不同的元素和效果。大多数标记是成对出现的，名称多数是其英文大多数标记是成对出现的，名称多数是其英文缩写。缩写。如：如：表示一条水平的分割线，表示一条水平的分割线，表示一表示一个个段落（段落（ParagraphParagraph），），表示一个表示一个图片图片（ImageImage），），表示设置字体表示设置字体。HTML的构成2024/5/10 周五18网网页页制制作作教教程程标记的基本格式为：标记的基本格式为：受标记影响的内容受标记影响的内容 /其中：其中：（1 1）标记必须用）标记必须用“”围住，否则认为是普通文本，围住，否则认为是普通文本，表示结束标记。标记字母不区分大小写。表示结束标记。标记字母不区分大小写。（2 2）对一段内容可以用多个标记来共同作用，产生一定）对一段内容可以用多个标记来共同作用，产生一定的效果。此时，各个标记间的顺序也是任意的，但是的效果。此时，各个标记间的顺序也是任意的，但是不能交叉使用。不能交叉使用。（3 3）根据需要可以只用该标记的几个属性，也可以不用）根据需要可以只用该标记的几个属性，也可以不用属性，在使用时属性之间没有顺序。不是所有的标记属性，在使用时属性之间没有顺序。不是所有的标记都有属性和结束标记，如单标记都有属性和结束标记，如单标记表示换行。表示换行。标记的格式2024/5/10 周五19网网页页制制作作教教程程标记的使用例如：例如：Font size=6 face=color=red 这是这是6 6号字，隶书，红色号字，隶书，红色 ：这个标记是用来插入图片的，：这个标记是用来插入图片的，其中的其中的“”代表的是图片的代表的是图片的URLURL地址。地址。例如：例如：该标记的意思是在网页中插入图片该标记的意思是在网页中插入图片pic.gifpic.gif，该图片存放的位置在站点文件夹根目录下的该图片存放的位置在站点文件夹根目录下的imagesimages目录下。目录下。2024/5/10 周五20网网页页制制作作教教程程二、网页构成的基本要素在制作网站之前要先了解网页的基本内容：在制作网站之前要先了解网页的基本内容：页面标题（页面标题（TitleTitle）网站标志（网站标志（LogoLogo）页面尺寸、整体造型页面尺寸、整体造型导航栏（主菜单）导航栏（主菜单）主体内容、超级链接主体内容、超级链接版权说明版权说明2024/5/10 周五21网网页页制制作作教教程程三、网站建设的基本流程定位站点风格定位站点风格包括：网站主题、网站名称、网站标志、网站色彩、包括：网站主题、网站名称、网站标志、网站色彩、页面尺寸页面尺寸规划站点结构（网站整体结构）规划站点结构（网站整体结构）收集建站资料（网上搜索、自己制作）收集建站资料（网上搜索、自己制作）制作网页制作网页包括：制作包括：制作LogoLogo、创建导航栏、制作超级链接、设、创建导航栏、制作超级链接、设计网页的框架和版式、添加网页内容。计网页的框架和版式、添加网页内容。发布与推广网站发布与推广网站包括：申请空间、上传网页、推广网站包括：申请空间、上传网页、推广网站2024/5/10 周五22网网页页制制作作教教程程四、Dreamweaver 8简介DreamweaverDreamweaver是一种较好的所见即所得的网页是一种较好的所见即所得的网页编辑工具，它对网页有很强的控制能力，可以编辑工具，它对网页有很强的控制能力，可以直观方便的设计网页。直观方便的设计网页。主要优点：主要优点：使用方便，易学易用，既可以使用可视化的编辑器使用方便，易学易用，既可以使用可视化的编辑器又可以使用又可以使用HTMLHTML编辑器设计网页。编辑器设计网页。提供了强大的设计工具和模板，不用编写代码就可提供了强大的设计工具和模板，不用编写代码就可以快速的创建各种极具动态以快速的创建各种极具动态HTMLHTML特性的网页，如动特性的网页，如动画和分层等。画和分层等。兼容性好，适用于各种平台和浏览器。兼容性好，适用于各种平台和浏览器。产生的产生的HTMLHTML代码精简高效。代码精简高效。2024/5/10 周五23网网页页制制作作教教程程Dreamweaver 8内容简介Dreamweaver 8 Dreamweaver 8 的工作界面的工作界面站点的创建和管理站点的创建和管理文档的基本操作文档的基本操作基本网页制作（插入对象、设置格式等）基本网页制作（插入对象、设置格式等）网页的布局技术（表格、层、框架）网页的布局技术（表格、层、框架）表单、模板和库项目的使用表单、模板和库项目的使用行为和时间轴（动态网页技术）行为和时间轴（动态网页技术）2024/5/10 周五24网网页页制制作作教教程程Dreamweaver 8的工作界面基本组成：基本组成：由标题栏、菜单栏、工具栏、编辑区、状态栏、由标题栏、菜单栏、工具栏、编辑区、状态栏、插入面板、属性面板和面板组等组成。插入面板、属性面板和面板组等组成。插入面板组插入面板组标准工具栏标准工具栏文档工具栏文档工具栏状态栏状态栏2024/5/10 周五25网网页页制制作作教教程程站点的创建和管理站点：站点：一个网站所有文档的集合。一个网站所有文档的集合。一个设计良好的网站通常具有科学的结构，用不同一个设计良好的网站通常具有科学的结构，用不同的文件夹分门别类的保存不同类型的文件，便于管的文件夹分门别类的保存不同类型的文件，便于管理和更新。理和更新。InternetInternet服务器：服务器：它只是一个逻辑名称，就是用于它只是一个逻辑名称，就是用于提供提供InternetInternet服务（包括服务（包括WWWWWW、FTPFTP、E-MAILE-MAIL等）的等）的计算机。主要用于存储我们所浏览的计算机。主要用于存储我们所浏览的WebWeb站点的文件。站点的文件。远程站点：远程站点：指存储于指存储于InternetInternet服务器上的站点文件。服务器上的站点文件。本地站点：本地站点：在本地计算机的磁盘上构建的站点文件。在本地计算机的磁盘上构建的站点文件。2024/5/10 周五26网网页页制制作作教教程程创建本地站点1.1.在某个驱动器的根目录下新建一个文件夹在某个驱动器的根目录下新建一个文件夹,用英文命名，作为站点文件夹，用来存放本用英文命名，作为站点文件夹，用来存放本地站点的相关文件。地站点的相关文件。2.2.执行执行“站点站点新建站点新建站点”，在，在“站点定义站点定义”对话框中进行选择。对话框中进行选择。3.3.执行执行“窗口窗口站点站点”或或“文件文件站点站点”，或，或按按F8F8快捷快捷键，打开键，打开“文件文件”面板，在面板中面板，在面板中管理站点文件。管理站点文件。2024/5/10 周五27网网页页制制作作教教程程创建站点内容 创建站点时，首页文件（主页）必不可少。创建站点时，首页文件（主页）必不可少。首页文件的名称通常为首页文件的名称通常为index.htmindex.htm、index.htmlindex.html、default.htmdefault.htm或或default.htmldefault.html，这个名称不能随便起，由你所申请空间，这个名称不能随便起，由你所申请空间的远程服务器决定。的远程服务器决定。如果要给文件插入图片或多媒体文件，需如果要给文件插入图片或多媒体文件，需要在站点文件夹下再建立一个要在站点文件夹下再建立一个imagesimages文件文件夹，便于对图片的管理。夹，便于对图片的管理。2024/5/10 周五28网网页页制制作作教教程程管理站点在在站站点点面面板板中中，单单击击下下拉拉列列表表中中的的“编编辑辑站站点点”，或或“站站点点编编辑辑站站点点”，可可以以进进行行以以下下操操作：作：1.打开站点打开站点2.编辑站点编辑站点3.删除站点删除站点4.复制站点复制站点5.创建文件和文件夹创建文件和文件夹6.删除文件和文件夹：从磁盘上真正删除删除文件和文件夹：从磁盘上真正删除7.移动和复制文件和文件夹移动和复制文件和文件夹2024/5/10 周五29网网页页制制作作教教程程文档的基本操作1.新建文档新建文档2.保存文档保存文档3.关闭、打开文档关闭、打开文档2024/5/10 周五30网网页页制制作作教教程程上机内容和要求对站点进行初步规划设计，确定自己网站对站点进行初步规划设计，确定自己网站的功能、结构和主要内容的功能、结构和主要内容上网收集网页制作素材，可以用搜索引擎上网收集网页制作素材，可以用搜索引擎查找，或从自己喜欢的网站上下载查找，或从自己喜欢的网站上下载搜索网上的实例教程帮助学习搜索网上的实例教程帮助学习练习建立本地站点、制作简单的网页练习建立本地站点、制作简单的网页此课件下载可自行编辑修改，供参考！感谢您的支持，我们努力做得更好！