1、网 页 制 作 教 程,吕慧娟河南大学软件学院L,课程简介,网页是网络中一个重要的信息载体，在Internet中的大部分信息都是以网页的形式表现出来。通过网页可以实现网络资源共享和数据传输的功能。“工欲善其事，必先利其器”，想要自己制作出优秀的网页，就要掌握一种合适的工具。常用的网页制作工具有Dreamweaver、FrontPage等，图像处理工具有Photoshop、Fireworks、CorelDRAW、FreeHand等。,2018/4/5,2,课程简介,其中，网页三剑客属于主流的制作工具。使用这三个软件可以完成制作网页的所有任务。它包括三个软件：Dreamweaver 、Firewo
2、rks 、Flash 。Dreamweaver是制作网页和网站的工具， Fireworks是设计和制作专业化网页图像的工具， Flash是当前最出色的网页动画制作软件。目前比较流行的版本是Macromedia Studio 8.0。,2018/4/5,3,2018/4/5,4,如何学好这门课,掌握理论知识重视上机操作有效利用网络多动手勤思考,2018/4/5,5,课程要求,考核方法：理论考试40 + 综合性作业40 + 考勤20上机要求：上机要对号入座，注意带鞋套，保持卫生；上机要先注册个人信息；遵守考勤纪律，请假必须写假条；上机时按教学网站中的实验指导内容练习，并按时上交作业；注意收集做网页
3、的素材，用优盘保存。,2018/4/5,6,课程要求,课程内容安排：网页制作基础知识Dreamweaver 8.0Fireworks 8.0Flash 8.0综合作业要求：,2018/4/5,7,综合作业的基本要求,网站的主题要符合要求，功能明确。网页的内容要丰富，要求包含：文字、图片、超级链接、版权说明、简单的动态效果、自己制作的图片和Flash等。至少要有五个页面。网站的结构合理，超级链接能够正常打开，要求能够访问到网站中的所有网页。必须有一个网页带有制作团队的个人简介，包括：每个人的姓名、学号、专业、院系等信息。页面布局合理美观，色彩搭配协调。在期末考试之前要上交整个站点文件夹，否则全组
4、无作业成绩。,分组要求,可以独立完成或者分组完成。自动成组，每组最多不超过10人。如果要是分组，分组必须明确，组长1人、副组长1人（总体规划、结构设计、页面设计、总结汇报），收集素材3人，制作网页3人，制作图片1人，制作动画1人。,2018/4/5,8,第0章 网页设计基础,网页制作的主要素材文字素材：文字是网页的主角，收集文字素材的方法很多，使用复印机、扫描仪、网上下载http:/图像素材：图像在网页中起到画龙点睛的作用。图像的获取方法：扫描、下载或从其它作品中分离。声音素材：动画素材：,2018/4/5,9,介绍网页制作的相关术语 网页构成的基本要素 网站建设的基本流程 中文版Dreamw
5、eaver 8 操作基础,2018/4/5,10,第1讲 网页制作基础知识,一、网页基本概念,什么是网页（Web Page）？网页就是一种以超文本和超媒体形式显示信息的载体文件。其中的重要概念就是超级链接，它使网页的信息量更大，阅读起来更加方便。什么是网站（Web Site）？网站就是由多个信息相关的网页构成，网页之间通过超级链接互相连接在一起的网络组织，又称为站点。,2018/4/5,11,网页制作的相关术语,国际互联网因特网（Internet）统一资源定位器（URL）万维网（WWW）超文本传输协议（HTTP）浏览器超文本标记语言（HTML）主页,2018/4/5,12,2018/4/5,1
6、3,Internet简介,Internet是遍布全球的各种网络系统（如：局域网、数据通信网、公用电话交换网等）组织在一起的世界性计算机网络系统，它是通过统一的网络协议TCP/IP协议连接在一起所组成的。Internet的功能： 电子邮件、文件传输（FTP）、远程登录（Telnet）、网上查询（IE、Netscape、Gopher等浏览器）和网上交流（BBS、网络新闻组USENET、QQ等）。,2018/4/5,14,URL地址,URL（Uniform Resource Locater）即统一资源定位器，俗称“网址”。Internet中的各种资源实际上分散在各地的计算机主机中，定位器（Locat
7、er）的作用就是要指出这些资源的所在位置。URL就是一个可以带领用户到所要资源的所在位置，并通过适当的方式取得该资源的工具。例如下面的URL地址： http:/ Wide Web，又称WWW（3W），它是Internet世界最为重要的成员之一。WWW是一个基于超文本（Hypertext）和超媒体（Hypermedia）方式的信息检索服务工具。超文本：由文本组成，可以与其它文件相关联。超媒体：可以与多种形式的数据文件相关联。,2018/4/5,16,HTTP协议,为了能够实现网络资源的网上传输和共享，就必须制定一个客户端与服务器端双方在交流信息时都能够理解的统一的“共同语言”，这就是网络传输协议
8、。它要求每个使用者必须遵循相同的标准，以保证信息和数据的传输畅通无阻。HTTP协议（Hypertext Transfer Protocol，超文本传输协议）就是实现这一功能的WWW中的主要协议，允许数据以任意的类型（包括多媒体文件）在网络中通信，并支持超文本和超媒体的形式。,2018/4/5,17,浏览器（Browser）：阅读浏览网页信息的应用程序。它是一个翻译器，它将各种控制字符翻译成合适的屏幕显示方式，从而得到人们最后看到的网页。浏览器有很多种，如：Microsoft Internet Explorer（IE）、Netscape Navigator（网景）、Tencent Travele
9、r（腾讯TT）等。由于各个浏览器对同一控制字符的解释方式不完全相同，所以即使是同一个网页，在不同浏览器下的显示也可能有所不同。,网页浏览器,2018/4/5,18,HTML简介,HTML语言（HyperText Markup Language，超文本标记语言）是一种用于网页制作的排版语言，是用来表示网上信息的符号标记语言。HTML并非是一种编程语言，我们只需要用HTML给文档添加标记，并保存成扩展名为.Html或.Htm的文件（即网页的源文件），发布到网上即可。浏览器可以识别用HTML编写的文件，并将这些HTML符号标记翻译成人们可以识别的信息，就是网页。,2018/4/5,19,HTML的编
10、辑环境,HTML是一种纯文本文件，我们可以用任何文本编辑器（包括记事本、写字板、Word、WPS）来编辑和创建它，保存时文件扩展名要改成.htm或.html。在网页上点击鼠标右键，选择菜单中的 “ 查看源文件 ” ，就可以通过记事本看到网页的HTML内容。,2018/4/5,20,网页标题概括了网页内容，能迅速了解网页的大意，加入收藏夹时和使用搜索引擎时显示的结果都是网页的标题。,HTML的常用标记, HTML文件开始和结束的标记, HTML文件头标记，可以省略, 网页的标题，显示在浏览器窗口的标题栏，可以单独出现, HTML文件主体标记，定义了网页上显示的主要内容与显示格式, 我的个人主页
11、*你好！欢迎光临本站* ,2018/4/5,21,一个HTML文件是由标记组成的，不同的标记代表不同的元素和效果。大多数标记是成对出现的，名称多数是其英文缩写。如：表示一条水平的分割线，表示一个段落（Paragraph），表示一个图片（Image），表示设置字体。,HTML的构成,2018/4/5,22,标记的基本格式为： 受标记影响的内容 其中：（1）标记必须用“”围住，否则认为是普通文本，表示结束标记。标记字母不区分大小写。（2）对一段内容可以用多个标记来共同作用，产生一定的效果。此时，各个标记间的顺序也是任意的，但是不能交叉使用。（3）根据需要可以只用该标记的几个属性，也可以不用属性，在
12、使用时属性之间没有顺序。不是所有的标记都有属性和结束标记，如单标记表示换行。,标记的格式,2018/4/5,23,标记的使用,例如： 这是6号字，隶书，红色 ：这个标记是用来插入图片的，其中的“”代表的是图片的URL地址。 例如：该标记的意思是在网页中插入图片pic.gif，该图片存放的位置在站点文件夹根目录下的images目录下。,二、网页构成的基本要素,在制作网站之前要先了解网页的基本要素：页面标题（Title）网站标志（Logo）页面尺寸、整体造型导航栏（主菜单）主体内容、超级链接版权说明,2018/4/5,24,2018/4/5,25,三、建站的基本流程,第一步对站点进行规划。包括：网
13、站主题、网站名称、网站标志、网站色彩、页面尺寸。第二步规划和创建站点的基本结构。建立站点的各类文件夹，并在各个文件夹中合理的安置文档。第三步具体的网页制作过程。包括：制作Logo、创建导航栏、制作超级链接、设计网页的框架和版式、添加网页内容。第四步上传站点到远程服务器。发布与推广网站，包括：申请空间、上传网页、推广网站。,四、Dreamweaver 8简介,Dreamweaver是一种较好的所见即所得的网页编辑工具，它对网页有很强的控制能力，可以直观方便的设计网页。主要优点：使用方便，易学易用，既可以使用可视化的编辑器又可以使用HTML编辑器设计网页。提供了强大的设计工具和模板，不用编写代码就
14、可以快速的创建各种极具动态HTML特性的网页，如动画和分层等。兼容性好，适用于各种平台和浏览器。产生的HTML代码精简高效。,2018/4/5,26,Dreamweaver 8功能简介,Dreamweaver 8 的工作界面站点的创建和管理文档的基本操作基本网页制作（插入对象、设置格式等）网页的布局技术（表格、层、框架）表单、模板和库项目的使用行为和时间轴（动态网页技术）,2018/4/5,27,初识Dreamweaver 8,启动：“开始”菜单所有程序Macromedia选择Macromedia Dreamweaver 8工作区布局设置：工作区布局选择：第一次启动Dreamweaver 8会
15、显示“工作区设置”对话框，请选择“设计器”方式以后再更改布局：“窗口工作区布局”使用起始页打开最近使用过的网页创建新的网页显示与隐藏起始页：“编辑首选参数”,2018/4/5,28,Dreamweaver 8的工作界面,基本组成：由标题栏、菜单栏、工具栏、编辑区、状态栏、插入栏、属性面板和面板组等组成。插入栏标准工具栏文档工具栏状态栏面板的展开与折叠、打开与关闭,2018/4/5,29,站点的相关概念,站点：一个网站所有文档的集合。 一个设计良好的网站通常具有科学的结构，用不同的文件夹分门别类的保存不同类型的文件，便于管理和更新。Internet服务器：它只是一个逻辑名称，就是用于提供Inte
16、rnet服务（包括WWW、FTP、E-MAIL等）的计算机。主要用于存储我们所浏览的Web站点的文件。远程站点：指存储于Internet服务器上的站点文件。本地站点：在本地计算机的磁盘上构建的站点文件。,2018/4/5,30,站点的相关概念,静态站点：网页的内容在建立网页时确定，以后不能根据浏览者的意愿改变。动态站点：网页的内容是由程序自动生成的，随着浏览者的意愿改变，例如用户注册页面，留言板等。,2018/4/5,31,创建本地站点的必要性及方法,在某个驱动器的根目录下新建一个文件夹, 用英文命名，作为站点文件夹，用来存放本地站点的相关文件。执行“站点新建站点”，在“站点定义”对话框中进行
17、选择。 执行“窗口站点”或“文件站点”，或按F8快捷键，打开“文件”面板，在面板中管理站点文件。,2018/4/5,32,2018/4/5,33,管理站点,在站点面板中，单击下拉列表中的“编辑站点”，或“站点编辑站点”，可以进行以下操作：编辑站点删除站点复制站点创建文件和文件夹删除文件和文件夹：从磁盘上真正删除移动和复制文件和文件夹,2018/4/5,34,创建站点内容,创建站点目录结构：站点中的文件需要分类分层管理，例如图片存放在images文件夹中，声音文件存放在music文件夹中等。 创建首页文件（主页）：首页文件的名称通常为index.htm、index.html、default.ht
18、m或default.html，这个名称不能随便起，由你所申请空间的远程服务器决定。,网页文档的基本操作,新建网页保存网页关闭、打开网页重命名文件与文件夹移动或复制文件与文件夹删除文件与文件夹,2018/4/5,35,网页制作时需要注意的要点,在网页中若插入中文名的网页元素文件，浏览时出错的话，可在【代码视图】中作相应的修改，用合适的中文替换乱码。一般最好不要使用中文命名的文件，包括站点文件夹名字，文件名以及图片、视频和音频的文件名，都不要使用中文命名。初次在本地计算机上制作网页时，就先规划好存放文件的文件夹，建立好本地站点，以后每次制作网页时应检查本地站点是否正确。,2018/4/5,36,3
19、、把网页中用到的全部素材复制到规划好的文件夹内。制作好的网页也要放在本地站点中。4、每次新建一个网页时，应该先设置好网页的页面属性，然后将该网页保存在本地站点中，以后在该网页中插入的网页元素都能以相对路径插入。网页中的图像文件、声音文件、动画文件以及超级链接都要以相对路径的方式来处理。5、每个网站至少要有一个默认主页，一般主页可以使用index.html为文件名。,2018/4/5,37,上机内容和要求,先分组并选择主题，再进行分工。对站点进行初步规划设计，确定自己网站的结构和主要内容。上网收集网页制作素材，可以用搜索引擎查找，或从自己喜欢的网站上下载。注意保存网页方法。搜索网上的实例教程帮助学习。练习建立本地站点。,
