《计算机网络应用技能教程-电子教案-曹立志 第6章 网页制作基础》由会员分享，可在线阅读，更多相关《计算机网络应用技能教程-电子教案-曹立志 第6章 网页制作基础（118页珍藏版）》请在金锄头文库上搜索。
1、返回主目录,第5章 网络安全技术,6.1 网页制作的基础知识,6.2 认识DreamWeaver,6.3 流媒体开发技术,返回章目录,第6章 网页制作基础,6.4 制作“我的大学”个人主页,返回章目录,第5章 网络安全技术,工作任务：认识与网页制作相关的一些基本概念及网页的构成元素；认识网站设计开发的流程。,返回章目录,第6章 网页制作基础,第5章 网络安全技术,返回章目录,6.1.1 任务一 认识网页与网站,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,1网页与网站 2Web服务器与浏览器 3统一资源定位器（URL） 4 网页的基本元素,返回章目录,第6章 网页制作基础
2、,返回章目录,第5章 网络安全技术,网页也称为Web页，是人们通过浏览器浏览网络资源时看到的页面。每个网页实际是一个文件，它存放在网络服务器中。网页经由网址（URL）来识别与存取，当用户在浏览器输入网址后，经过域名系统的解析，再通过浏览器解释网页的内容，展示到用户屏幕上。网页通常由文字、表格、图片、声音、视频及各种功能按钮等组成。人们看到的网页主要是以HTML扩展名结尾的表态网页文件。还有其他类型的动态网页文件，如CGI、ASP、PHP、JSP文件等。,网页与网站,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,网站是存放在网络服务器上的完整信息的集合体，它包含一个或多个网
3、页，通过站内链接把这些网页有机结合起来，构成一个内容完成、资源丰富的信息库。网站的第一个页面，通常称为首面或主页，它是整个网站的起始点和汇总点，是用户开始浏览站点的“入口处”。一个网站主要有由域名（俗称网址），网站空间和网站源程序三部分构成。,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,Web技术的独特之处是采用超链接和多媒体信息。Web服务器使用超文本标记语言描述网络的资源，创建网页，各种网站资源被保存在服务器上，以供Web浏览器阅读。Web服务器管理着网络中的各种资源，其基本功能是提供网络通信服务、管理和提供网络共享资源。 Web浏览器（Web Browser）是一
4、个用于文档检索和显示的客户应用程序，并通过协议与Web服务器相连。目前，流行的Internet Explorer和Netscape Navigator除提供基本的文档检索、显示和导航特性外，还支持HTML的高级显示（如表和帧）以及ActiveX、Java、JavaScript等特性。,Web服务器与浏览器,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,是“Uniform Resource Locator”的缩写，即通常所说的网址，是指信息资源在Internet上的惟一地址，它提供在Web上访问资源的惟一方法和路径。 统一资源定位器从左到右主要由Internet资源类型（W
5、WW客户程序用来操作的工具，如“http：/”表示WWW服务器，“ftp：/“表示FTP服务器，而“new：”表示Newgroup新闻组。）、服务器地址（指出WWW页所在的服务器域名）、资源文件的位置（指明服务器上某资源的位置）组成。例如，黑龙江畜牧兽医职业学院网址,统一资源定位器（URL）,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,http:/ 网页制作基础,返回章目录,第5章 网络安全技术,设计网页的目的主要是发布信息，超级链接是Web的核心，它将万维网中无数的网页链接在一起。网页中包含多种元素，如图6-1所示。 文本：是网页中常见的元素，是用来向用户传达信息的媒
6、介。文字虽然不如图像那样能够很快引起浏览者的注意，但却能准确地表达消息的内容和含义，为了克服文字固有的缺点，人们可以设置网页文本的一些属性，如字体、字号、颜色等，突出显示重要的内容。此外，用户还可以在网页中设计各种各样的样式，来清晰表达一系列项目。,网页的基本元素,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,图片：图片在网页中具有提供信息、展示作品、装饰网页、表达个人情调和风格的作用。网页中的图片是GIF、JPEG、PNG等压缩格式的图片。在网页中使用最广泛的是JPEG和GIF格式，这俩种格式的图片都可以在不同的操作系统支持的浏览器上显示。 动画：网页中使用动画可使网页
7、效果更加突出，充分利用动画的表现力使得网页更加令人赏心悦目，同时，利用动画也会增加网页的交互功能。目前网页中使用的动画主要有GIF、Flash等。因Flash生成的文件较小，传输速度快，可以实现实时播放流，而不必等等整个文件传输完后传输完后再进行播放，该动画流畅，功能较强，已成为业界动画标准。,返回章目录,第6章 网页制作基础,第5章 网络安全技术,返回章目录,6.1.2 任务二 网站设计与开发流程,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,1定义站点 2建立网站结构 3确定网站的主题和建立网站结构风格 4 设计网站的栏目和版块 5 设计和制作主页及其他网页,返回章目
8、录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,开发网站的首要工作就是要定义该站点。在该项工作中，要明确建立网站的目的，在站点建立的开始，要为站点制订相应的目标，确定网站提供的内容，以及搜集网站资料。,定义站点,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,在此阶段中，要规划出网站的外观及其工作方式。首先建立网站结构流程图，在该流程图中包括网站的所有关键页面及其与其他网页的关系，技术要点和主要的链接也应在其中给出。建立网站的结构时，将自己所希望的网页内容全部加入进去，然后再和其他参与网站开发的人员一起研究、讨论，融入其他人员的意见。最后将网站结构图确定下来。,
9、建立网站结构,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,设计一个网站，首先遇到的问题就是如何定位网站的主题。网站的主题也就是网站的题材。网站的题材主要有网上求职、网上聊天/即时信息、网上社区、娱乐、计算机技术、教育、生活等大类，每个大类都可以继续细分，如娱乐类可再分为明星新闻、在线播放、在线游戏、下载电影等。还有一些是专业的题材，如中医、天气预报等，这里不再细分。对于题材的选择，应注意以下3个问题：,确定网站的主题和建立网站结构风格,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,1 主题要小而精。定位要小，内容要精。不可以幻想制作一个包罗万象的站
10、点，而更应该突出特色。网站的最大特点就是新和快，目前最热门的个人主页都是天天更新甚至几小时更新一次。网络上的“主题站”比“万全站”更受人们喜爱。 2 题材最好是你自己擅长或者喜爱的内容。例如，如果是平面设计人员，就可以建立一个平面设计之家网站；如果是一个教师，可以建立一个教学网站，及时反映教学情况和进行实时教学。这样在制作时，才会激发个人的热情，才不会觉得无聊或者力不从心，才能设计制作出优秀的网站。,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,网站的主题和风格确定完毕，在收集和组织了许多相关的资料内容后，动手制作网站之前，一定要做好网站的规划，确定合理的栏目版块。栏目的
11、实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。网站栏目安排一定记住要紧扣主题，同时要设一个最近更新或网站指南栏目、设定一个可以双向交流的栏目、设一个下载或常见问题回答栏目。,设计网站的栏目和版块,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,版块比栏目的概念要大一些，每个版块都有自己的栏目。例如中国教育和科研计算机网站点分中国教育、教育资源、科研发展、教育信息化等版块，每个版块下面有各有自己的主栏目。设置版块应注意各版块要有相对独立性，各版块要有相互关联，版块的内容要围绕站点主题。,返回章目录,第6章 网页制作基础,返
12、回章目录,第5章 网络安全技术,主页的制作者需要先绘制一张草图，草图应包括网站的标志、广告条、菜单、导航栏等一些基本元素。草图设计好后，就可以开始动手制作主页了。主页制作好以后，就开始按着目录结构设计和制作其他页面，在制作中其他页面要和主页保持相同的风格，要有返回主页的链接，目录结构不要超过三层。,设计和制作主页及其他网页,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,工作任务：安装DreamWeaver8，启动后熟悉其工作界面和编辑环境；认识静态网页和动态网页的基本概念及二者的区别；在网页中输入和编辑文本，插入图象，插入影片和添加声音，插入和编辑表格；创建和使用层；布局
13、表格和单元格；在网页中添加和删除框架，设置框架属性；认识CSS的概念，创建CSS样式；创建与应用表单。,返回章目录,第6章 网页制作基础,第5章 网络安全技术,返回章目录,6.2.1 任务一 熟悉DreamWeaver的工作环境,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,工作任务：安装DreamWeaver8，启动后熟悉其工作界面和编辑环境；认识静态网页和动态网页的基本概念及二者的区别；在网页中输入和编辑文本，插入图象，插入影片和添加声音，插入和编辑表格；创建和使用层；布局表格和单元格；在网页中添加和删除框架，设置框架属性；认识CSS的概念，创建CSS样式；创建与应用
14、表单。,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,1安装DreamWeaver8 2熟悉DreamWeaver8的工作界面,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,1 运行DreamWeaver8安装程序，出现“欢迎使用Macromedia DreamWeaver 8 InstallShield Wizard”界面 2 单击【下一步】按钮，打开“许可证协议”对话框，如图6-3所示。 3 单击【下一步】按钮，弹出如图6-4所示的“目标文件夹和快捷方式”对话框，单击【更改】按钮，弹出如图 6-5所示的“更改当前目的地文件夹”对话框，选择D盘为安
15、装路径，单击【确定】按钮继续。 4 单击【下一步】按钮，弹出“默认编辑器”对话框,安装DreamWeaver8,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,5 单击【下一步】按钮，弹出“已做好安装程序的准备”对话框，单击【安装】按钮开始安装程序。安装完成后弹出“InstallShield Wizard完成”对话框，如图6-7所示。单击【完成】按钮，完成程序的安装。,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,1 执行【开始】【所有程序】【Macromedia】【Macromedia DreamWeaver 8】命令，启动DreamWeaver软件
16、。（如果是第一次启动，将会出现“工作区设置”对话框，如图6-8所示，对于初学者，建议使用默认的“设计者”布局。） 2 选择设计器工作区，弹出“选择建立文件类型”窗口,熟悉DreamWeaver8的工作界面,返回章目录,第6章 网页制作基础,第5章 网络安全技术,返回章目录,6.2.2 任务二 熟悉DreamWeaver的编辑环境,返回章目录,第6章 网页制作基础,返回章目录,第5章 网络安全技术,主菜单：使用菜单栏基本上能够实现绝大部分功能。其功能包含在“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗口”和“帮助”菜单中。 插入工具栏：包含将各种类型的“对象”插入到文档中的按钮。每个对象都是一段HTML代码，允许在插入时设置不同的属性。默认的“插入”工具栏为“常用”工具栏，单击“插入”按钮，弹出下拉菜
