【IT认证】Chapter1网页制作基础ppt模版课件

介绍网站设计的一些相关基础知识，其中包含网页、网站跟HTML等的术语，Web图像的基础知 识，以及开发一个网站或许涉及到的各个步骤。 本章重点：网页和网站 HTML基础知识 Web图像的基础知识 网站设计基本步骤 1.1网页的概念 网页是由HTML（超级文本标志语言）或者其它语言撰写的，通过IE浏览器编译后供用户获得信 息的页面，它既称为Web页，其中能包括文字、 图像、表格、动画跟超级链接等诸多网页元素。 1.2网站的概念 网站就是一个或多个网页的集合。从广义上讲网页课件模板，网站就是当网页公布到Internet上之后，能通过浏 览器在Internet上访问的页面。 网站是借助超链接连接出来的一些网站的集合。门户网站 职能网站 专业网站 个人网站 1.3网页的分类 按所处位置分类按网页在网站中所处的位置能将网站分为主页和子页 两类。 1.3网页的分类 按表现形式分类按网页的表现形式可将网站分为静态网页和动态网页。 1.4网页中的常用词汇 万维网（www）是WorldWide Web的英文全称， 也称为3W网，它的本质是一种基于超级文本技术 的交互式信息浏览检索软件，是Internet提供的要 用更普及、功能最丰富、使用方式更简便的信息 服务，用户能借助它在Internet上浏览、编辑、传 递超文本格式的文件（即.html格式文件）。

浏览器是用于阅读网站中信息的一种软件工具，就像使用手机需要有操作系统一样。 Internet Explorer（IE） Netscape Navigator（NE） 腾讯TT浏览器 遨游浏览器 Foxfire火狐浏览器 10 统一资源定位符（URL） URL（UniformResource Locator）主要是用来 指定协议（如HTTP或FTP）以及对象、文档、万 维网网页或其它目标在Internet的位置跟存取方法。 通信协议 主机名 所应访问的网站模式及名称 11 文件传输协议（FTP） FTP（FileTransfer Protocol）是一种广泛使用的 文件传输协议，是迅速、高效和可靠的信息存储 方法。 FTP是基于客户/服务器模型的TCP/IP的应用，所以即使在客户端和服务器之间搭建了TCP/IP连接， 无论两台电脑的位置远近、连接方法的优劣以及 使用的操作系统的异同，都可借助FTP协议进行 文件的存储。 12 IP地址 IP地址用来标志连接到Internet上电脑的选定编号，每一个IP地址对应一台电脑，这与用电话号码标 识电话网络中的电话相同。 电脑识别的IP地址由32位二进制数值组成，电脑上以十进制数值来显示，一组数值分为4部分，每 一部分均不能大于255，中间用“.”分隔，如 61.139.2.69。

13 域名 等就是一个域名，域名由汉语拼音或日文字符加上数字表示，在访问网络时，域名 将借助域名服务器转换成IP地址，这种转化是在 后台完成的。 14 超级链接 超级链接是网站中更常见的元素之一，网页就是通过无数的超级链接能够组成一个网站。 超级链接可以链接到网页内部页面、对象，也可以链接到其它网页，大大方便了客户在各个页面 对象之间实现跳转。 15 超级文本标记语言（HTML） HTML（HyperText Markup Language）是一种 用户与电脑之间进行交流的文本技术，各种网页 均是用HTML语言来表述的，用HTML语言编写的 网页文件的扩展名大概为“*.htm”或“*.html”。 16 1.5 网页设计的相关常识 网页制作的常见软件17 设计网站的方法 动画适量18 网页设计的通常方法 维护、更新站点19 网页制作的常用工具 网页设计硬件Dreamweaver是现在使用最多的网站设计工具。 图像处理硬件制作网站图像的工具类别众多，大多数网页设计人员 选择的是Fireworks或Photoshop。 动画制作工具网页动画制作中更常见的工具非Flash莫属。 通常将Dreamweaver、Fireworks、 Flash俗称网 页三剑客 20 1.6 Dreamweaver 8简介 MacromediaDreamweaver 8是一款专业的HTML 编辑器，用于对 Web 站点、Web页和 Web 应用 程序进行设计、编码跟开发。

无论您是偏爱直接 编写HTML代码的驾驭感还是喜欢在可视化编辑 环境中工作，Dreamweaver 8都会为您提供帮助 良多的工具，丰富您的Web 创作感受。 Dreamweaver8的安装与推进 Dreamweaver 的工作界面 使用Dreamweaver8的帮助 21 1.6.1 Dreamweaver8的安装与开启 22 1.6.2 Dreamweaver 的工作界面 Dreamweaver8的工作界面主要包含有标题栏、 菜单栏、文档工具栏、文档窗口、状态栏、插入 面版、属性面版和CSS样式面版。本节将主要介 绍Dreamweaver 8的工作界面。 23 标题栏 Dreamweaver8的标题栏在应用程序的更前面， 它的右侧用来显示当前正在运行的应用程序名称， 它的右侧为最小化、最大化（还原）和关闭按钮， 如右图。 需要表明的是，标题栏是默认的文档标题UntitledDocument，显示的文件名为Untitled-1。每当用 户建立一个新的文档时，Dreamweaver 8就会自 动以Untitled给出一个默认的名字。当用户保存文 件时，系统会提醒用户另外命名一个名字，当然 用户也可以以默认的名字来保存。

24 菜单栏 菜单栏，包括有“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗 口”、“帮助”10个菜单项。 Dreamweaver8菜单选项有下列3种形式： （1）子菜单命令：该类命令的名称前面具有一个向右的小三角箭头，当鼠标移动至该类命令上时，就会开启一个子菜单。例如在 “插入”菜单下的“媒体”菜单命令。 （2）开关命令：该命令在命令执行后，命令的右侧会加上“”的选取标记。例如在“查看”菜单下的“设计”菜单命令。 （3）对话框命令：该类命令的名称前面带有一个省略号，单击该类命令则会开启一个对话框。 25 文档工具栏 “文档”工具栏中包括按键，这些图标使您可以在文档的不同视图间快速切换：“代码”视图、 “设计”视图、同时显示“代码”和“设计”视 图的拆分视图。工具栏中还包括一些与查看文档、 在本地和远程站点间传输文档有关的常用命令跟 选项。 26 文档窗口 （1）设计视图：是一个用于可视化页面布局、可视化编辑和迅速应用程序开发的设计环境。在该视图中，Dreamweaver 显示文档 的完全可编辑的可视化表示方式，类似于在浏览器中查看页面时 看到的内容。

（2）代码视图：是一个用于编写和编辑HTML、JavaScript、服 务器语言代码（如PHP或ColdFusion标记语言）以及任何其他类 型代码的手工编码环境。 （3）代码跟设计视图：可以在单个窗口中同时发现同一文档的代码视图和设计视图。 当文档窗口有一个标题栏时，标题栏显示页面标题，并在空格中显示文件的模式跟文件名。如果您做了修改但已经 保存，Dreamweaver 将在文件名后显示一个星号。 27 插入面版 插入面版包含用于建立和插入对象（如表格、层跟图像）的图标，如图1-15所示。当鼠标指针滚 动到一个按钮上时，会出现一个工具提示，其中 含有该按钮的名称。这些图标被组织到几个类别 中，您可以在“插入”栏的右侧切换它们。当前 文档包括服务器代码时，还会显示其他类型。当 您启动Dreamweaver时，系统会开启您今天使用 的类型。 28 属性面版 属性面版可以检查和编辑当前选取页面元素（如文本跟插入的对象）的更常用属性。属性面版中 的内容按照选定的元素会有所不同。例如，如果 您选择页面上的一个图像，则属性面版将改为显 示该图像的属性如图像的文件模式、图像的长度 和高度、图像周围的边框等。

29 1.6.3 使用Dreamweaver8的帮助 当我们在学习的过程发生弊端难以缓解时，一个最好的方法就是使用Dreamweaver 8的在线帮助， 下面我们介绍使用的在线帮助的方式。 30 打开帮助系统 选择“帮助”菜单下的“Dreamweaver帮助”，就可以开启Dreamweaver 8帮助系统。也可以直 接按下F1键开启帮助系统。 31 使用帮助 使用帮助系统查找所必须的信息可以按下列方式进行： 1、若应搜索产品中的帮助(Windows) ，请执行下述操 在Dreamweaver帮助中，单击“搜索”选项卡。 双击结果列表中的一个主题，可显示该主题。32 使用帮助 使用帮助系统查找所必须的信息可以按下列方式进行： 2、若应使用索引(Windows)，请执行下列操作： （1）在Dreamweaver帮助中，单击“索引”选项卡。 （2）滚动至字母列表中的一个索引项，然后双击该项可显示索引信息。 33 查看操作相关帮助 在编辑的过程中网页课件模板，有时需要查看当前操作的帮助信息，这时可以根据如下方法操作： （1）如果是在对话框中，要查看当前对话框的信息， 可以点击对话框的“帮助”按纽，启动帮助系统后将 直接跳转至当前操作有关的帮助信息页面上。

例如在 表格对话框中右键“帮助”按纽，则会显示表格的给 助信息。 （2）如果是在使用浮动面版进行编辑的过程中，要查 看帮助系统，可以单击浮动面版上的 按纽，也可以启 动帮助系统，并直接跳转至与当前操作相关的帮助页 面上。例如在属性面版上点击按钮，将会显示属性的 相关帮助信息。 34 1.7 简单网站案例制作 本课上机实战将训练在Dreamweaver8中新建一 个只包括文本的简洁网页，并使用IE浏览器预览 其效果。其中主要练习Dreamweaver 8的推进、 新建文档、保存网站、预览网页和退出 Dreamweaver 8的操作。 35 本章小结 Dreamweaver8是中国Macromedia公司推出的一 款网页编辑软件，它带有所见即所所得的功能， 并支持最新的DHTML和CSS标准，是现今市场更 为流行的网站编辑器。 本章主要介绍了Dreamweaver8的安装与推进， Dreamweaver 8的工作界面、Dreamweaver 增用途并且Dreamweaver8的帮助系统等常识， 简单网站案例制作。通过对本章知识的学习，相 信读者对Dreamweaver 8已经有了一个初步的了 解，为日后的学习打下了基础。