1、网页设计课件重点摘取在网站中，供用户阅读的一个个页面，就称之为“网页” ，又称为 Web 页,是Web 站点的基本信息单位。如图 1-1 所示即为一个网页的界面。 网页的分类根据不同的分类标准，可以对网页进行如下的分类。按网页在网站中所处位置不同，网页可分为主页和内页打开一个网站时看到的第一个页面就是主页，也称为首页，主页文件的名称一般为 index.htm 或index.html；与主页相链接的其他各个页面就称之为内页。按网页的表现形式，可将网页分为静态网页和动态网页。一般用户制作的都是静态网页，它是一切网页制作的基础，如果想制作动态网页，那么仍然需要先做好静态页面，然后在此静态页面中加入动
2、态技术，从而制作出十分精彩的动态页面。万维网（World Wide Web） 万维网简称 WWW 或 3W，是 Internet 上的一种信息服务系统,也是目前Internet（因特网）上最流行的一种基于超文本形式的资源信息。万维网的最大好处是它将全世界的各种信息链接在一起，用户可通过网络无偿地访问这些资源并加以利用。 浏览器 要想访问网络中的各种资源，还需要一个工具，那就是浏览器，否则无法访问到网络中丰富的资源。通过浏览器可以充分共享网络上的各种免费的资源。目前主要有以下两类浏览器。 Microsoft Internet Explorer（IE ）：IE 浏览器是由 Microsoft（微软
3、）公司开发出品的一种浏览器，也是目前全球范围内拥有用户量最多的一种浏览器，它现在的最新版本是 7.0 版本，其界面如图 1-3 所示。 Netscape Navigator（ NE）：NE 浏览器是由 Netscape（网景）公司研发的一款浏览器，其界面如图 1-4 所示。 统一资源定位器（Universal Resource Locator） 统一资源定位器简称 URL，是用来指出某项信息的位置及存取方式，以取得各种服务信息的一种标准方法。简单地说，URL 就是网络服务器主机的地址，也称作网址，它的一般书写形式为 http:/ 通信协议：也就是上面举例中的“http”部分，它包括 HTTP（
4、超文本传输协议） 、FTP（文件传输协议） 、Gopher （信息检索协议）和 News（新闻组）等。 主机名：指上面举例中的“” 部分，这是新浪网站的主机地址，另外一种书写主机的方法是用“202.106.185.241”IP 地址的形式来表示，它们的作用是相同的。 所要访问的文件路径及文件名：如上面举例中的“/index.htm”部分。它指明要访问资源的具体位置。在主机名与文件路径之间，一般用“/”符号隔开。 在浏览器窗口的地址栏里输入的内容就是这里讲的 URL 了，它的 3 个部分并不是必需的，一般情况下，只需输入主机名（如“”） ，浏览器就会自动打开该网站的首页。 文件传输协议（File
5、 Transfer Protocol） 文件传输协议简称 FTP，是一种快速、高效和可靠的信息传输方法。通过这个协议，可以把文件从一个地方传到另外一个地方，从而真正地实现资源互享。FTP 是基于客户/服务器模型的 TCP/IP（传输控制协议/Internet 协议）的应用，它通过在客户端和服务器端建立 TCP/IP 连接，从而相互传输文件资源。如果要将做好的网页上传到服务器，那么就必须使用 FTP 协议；如果要下载网页，那么执行此操作也要使用 FTP 协议。 超文本标记语言（Hyper Text Markup Language） 简称 HTML，它是 WWW 创建超媒体文本的语言，它也是网页创
6、建中最基本的语言，制作的任何一个网页都是基于 HTML 文本标识的。 HTML 语言最基本的特征就是超文本和标记，用 HTML 语言编写的网页文件的扩展名为*.htm 或*.html。IP 地址 除了用上面的 URL 来访问需要的资源之外，还可以使用 IP 地址来进行访问。每一台上网的计算机都有一个唯一标识主机的标识，这就是 IP 地址。IP 地址是一组 32 位的数字号码，如“218.30.12.184” ，这就是上网主机的地址，如图 1-5所示。 域名 上面的 IP 地址是一长串的数字号码，这些数字难记又难以理解。为了方便大家理解、记忆，便有了域名的概念，域名是用一些英文字符或汉语拼音来代
7、替 IP地址的方式，这些英文字符和拼音字母基本上和网站名称一致，因此记忆起来就十分轻松了。域名的一般书写格式为：主机名.机构名.类别名.地区名，如“”就是新浪网站的域名，如图 1-6 所示。URL 和域名是两个不同的概念“http:/www.sina. com/index.htm”是 URL，而“”是域名。 超级链接 这是网页制作中经常要用到的，是指页面对象之间的连接关系。它可以是网站内部页面、对象的链接，也可以是与其他网站的链接，通过单击网页中的链接就可以转到相应的页面上进行浏览。这样大大方便了用户在各个页面对象之间的跳转。导航条导航条能十分有效地实现超级链接功能，如图 1-8 所示。它有点
8、像一本书的目录，总括了整个网站的主要页面的关键词，通过单击导航条上的链接，就可以跳转到相应的页面进行浏览。导航条放置的位置一般有横式和竖式两种，实现的方法也有很多，可以是纯文本的，也可是按钮，还可以是一些图片，另外用户也可将它做成 Flash 动画或用脚本语言来实现。 发布 将制作好的网页上传到网上的过程即是发布，也称为上传或上载。虽然做好了网页，但如果没有将网站内容放到主页服务器上，那么别人是无法访问到这些资源的，因为这些资料只是保留在自己的本地硬盘里而已。网站的分类 根据网站内容来分，可以将网站分为 4 类，即门户网站、职能网站、专业网站和个人网站。 门户网站 职能网站 专业网站 个人网站
9、 门户网站 这是一种涉及领域最广的网站，它包括了很多的功能及页面，涉及到人们生活的方方面面，比如具有搜索、论坛、聊天室、电子邮箱、虚拟社区、短信等功能；新闻、娱乐、体育、音乐、影视、文学等页面。一般这类网站的外观都比较简洁，但功能齐全，用户想要的资源在它上面基本都能找到。目前在国内比较有影响力的大型门户网站有雅虎中国（） 、新浪（） 、搜狐（）及网易（）等。职能网站 这是一类具有专门功能的网站，如政府部门的网站、商务网站等。其中电子商务网站主要是用于在网上进行产品交易的网站，现在很多企业都在网上建立了自己的商务网站，用于自己公司产品的宣传及在网上进行商品的交易。电子商务网站在国内很多，其中比较
10、出名的有阿里巴巴（） 、卓越网（） 、易趣网（）及当当网上书店（）等专业网站 专业网站的专业性非常强，它一般只涉及生活中的某一领域，但内容却十分专业广博，一般为一些专业人士提供服务。 这类网站也较多，比较有代表性的有网页制作大宝库（） 、中央电视台 CCTV（）的网站等。 个人网站 个人网站一般是个人为了兴趣爱好或为了展示自己等目的而建设的站点。由于该类站点都为个人建立，因此具有很明显的个人色彩，无论从内容、风格、样式上，都形色各异、包罗万象。 这类网站在网上随处可见，优秀的也不少，比较不错的有南天俱乐部（）和情感天空（）等。 图像处理软件 在网页制作过程中，首先要掌握的就是图像处理软件的使用
11、了。制作网页图像的软件非常多，但在实际使用过程中用得比较多的是 Fireworks、Photoshop 等，尤其是 Fireworks。它是 Macromedia 公司专门为网页图片量身订做的图形图像处理软件。由于它与 Dreamweaver 同属一个公司出品，因此它们之间具有很好的兼容性和互操作性，同时它内置的许多图片和按钮制作功能更使制作网页方便、快捷。 动画制作软件 Flash 是网页动画制作中最常用的软件之一。它具有小巧灵活、生成文件小、表现内容丰富等诸多优点，同时，它还是网页三剑客（Dreamweaver、Flash、Fireworks）之一，与其他另外两款软件配合使用更是相得益彰。
12、另外，还有一些其他的小软件可以制作动画，如 Swish、Ulead GIF Animator 等。Flash 制作的动画播放时需要专门的播放器，如果浏览器中没有安装该播放器插件，那么将看不到动画效果。另外，制作 Flash 动画需要制作者有一定的专业知识，因此如果既想简便又想制作 Flash 动画，那么完全可以选择 Swish 之类的软件，利用 Swish 内置的各种特效，完全可以做出专业级的 Flash 特效。 网页布局软件要说到网页布局软件，那么首推 Dreamweaver。它不仅是一个专业的可视化网页设计编辑工具，而且还是一个出色的网站管理、维护的最佳工具。它的最大特点就是能够快速创建各
13、种动态的网页，而且所生成的网页代码精小，是一款难得的软件。它是本书要重点讲解的内容。 除了上面讲到的 Dreamweaver 之外，还有一款比较出色的软件，那就是Microsoft 公司出品的 Frontpage。它是 Microsoft 公司 Office 办公自动化套装组件之一，是一款编写网页和创建网站的优秀软件，它内含大量的模板，使用时只需要选择相应的命令、设置相应的属性即可，特别适合初学者使用。但是，由于 Frontpage 大部分网页是基于表格的，所以它生成的网页代码伴有大量的垃圾代码，网上传播速度较慢，且占用的存储空间也过大。 除了上面介绍的两款网页布局软件外，还有一款不错的软件值
14、得初学者学习使用，那就是实达铭泰公司出品的“东方网页王” ，它内置了大量的模板，同时还内置了大量的网页制作素材、特效等，是初学者不错的选择。 网页源代码编辑工具在网页制作过程中，除了采用上面的软件直观地生成各种网页外，有时也需要直接编辑网页的源代码，尤其是在制作动态网页（如开发数据库网页、编辑脚本特效）时，实现这一功能较常用的软件有 HotDog、HomeSite 等。HotDog 是较早出现的 Web 开发工具，同时它也是一款 HTML 编辑工具。其最具特色的是提供了许多向导工具，能帮助设计者制作复杂页面。 Dreamweaver MX 2004 的激活 如果用户是单许可证用户，必须在安装后
15、的 30 天内激活许可证，否则 30 天后将不能再使用该软件。用户可以通过 Internet 或电话的方式，用一个简单的无缝过程进行激活。产品激活不会要求用户提交个人信息，只需提供用户的产品序列号。若要获得更多的 Macromedia 支持，最好成为 Macromedia 的注册用户。注册后，可以登录 Macromedia 的网站以查看与 Macromedia 升级产品和新产品有关的最新通知，并可获得与 和 的 Web 站点上提供的产品更新和新内容有关的即时电子邮件通知。 “插入栏”（如图 1-21 所示）包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段
16、 HTML 代码，允许在插入它时设置不同的属性。例如，可以在“插入” 栏中单击“表格”按钮 ，插入一个表格，也可以不使用“ 插入” 栏而直接使用 “插入”菜单插入对象。扩展按钮扩展按钮扩展按钮有水平和纵向两种，单击编辑窗口右侧的水平扩展按钮 ，可以隐藏工作主界面右侧的浮动面板组，这样可以在水平方向扩大编辑窗口；单击编辑窗口下方的纵向扩展按钮 则可隐藏属性面板，同时在垂直方向扩大编辑窗口。浮动面板组浮动面板组是停靠在编辑窗口右侧的浮动面板的集合。单击某个浮动面板名称左侧的 图标即可展开一个面板。展开后图标变为 形状，再单击 图标则合拢面板，只显示浮动面板的名称。将鼠标光标移到浮动面板的 图标上，
17、当鼠标指针变为 开头时，拖动该面板即可将浮动面板移到窗口中的任何位置。保存网页文件方法：1）单击文件下拉菜单中的“保存” 或“另存为”命令；或按快捷键 Ctrl+S。2）在另存为对话框中，设置好保存位置、文件名及保存类型后，单击“保存” 按钮。新建一个网页文件 方法一:文件/新建/新建文档对话框/常规标签/基本页；方法二：单击创建新项目中的 HTML 选项；方法三：快捷键 Ctrl+N.设置文档的页面属性 （1）打开需设置页面属性的网页文件。（2）选择修改 页面属性菜单命令，打开“页面属性”对话框，如图 1-34所示。（3）在“ 分类” 列表框中选择 “外观”选项，在对话框右侧将显示 “外观”
18、项的参数设置，如图 1-34 所示。该栏中各参数含义如下。 页面字体：在该下拉列表框中可选择网页中需要的字体 大小：在该文本框中设置字的大小，也可单击 按钮，在弹出的下拉列表框中选择系统默认的字的大小。 文本颜色：单击 按钮，在打开的颜色列表中选择需要的字的颜色。 背景颜色：单击 按钮，在弹出的颜色列表中选择需要的页面背景颜色。 背景图像：在该文本框中输入背景图片的路径，也可单击 按钮指定背景图片的路径。其方法如下。 如果网页中需要的图片没有在站点文件中，则需要将图片文件保存在站点相应的文件夹中，否则页面可能显示不正常或在上传站点时不能将该图片上传，从而导致页面不能正常显示。 左边距：在该文本
19、框中设置文本与浏览器左边界的距离。 右边距：在该文本框中设置文本与浏览器右边界的距离。 上边距：在该文本框中设置文本与浏览器上边界的距离。 下边距：在该文本框中设置文本与浏览器下边界的距离。 在边界设置的度量单位下拉列表框中可选择边界的单位，如“像素” 。 各参数的含义如下。 链接字体：在该下拉列表框中可选择网页中链接文本的字体，单击右侧的 和 按钮可设置链接文本的加粗和斜体格式。 大小：在该文本框中设置链接文本的字体大小，也可单击 按钮，在弹出的下拉列表框中选择系统默认的字体大小。 链接颜色：设置链接文本的颜色 变换图像连接：设置滚动链接的颜色。 已访问链接：设置访问后的链接文本的颜色。 活
20、动链接：设置正在访问的链接文本的颜色。 下划线样式：在该下拉列表中可设置链接对象的下划线情况。填空题（1）网页按其表现形式可分为 静态网页 和动态网页 两种。（2）简单地说， 域名 就是一个网站的网址。（3）URL 代表的是 统一资源定位器 。它的功能是提供一种在 Internet 上查找任何信息的 标准方法 。（4） 超级链接 是指将一个网站中的不同页面链接起来的功能。（5）将制作好的网页上传到网上的过程即是 发布 。 判断题（1）在网上浏览时看到的一个个页面就是网页。 （ 对 ）（2）放在网站最前面的页面叫内页。 （错 ）（3）站点可以大到是一个网站，小到一个网页。 （ 对 ）（4）在发布
21、网页前必须在 Internet 上申请一个主页空间。 （ 对 ）（5）主页和内页都是用 HTML 的文件格式来表示的。（ 对 ）（6）域名不是惟一的。 （ 错 ）第二课 网页设计步骤及站点的管理2.1.1 网页设计步骤 收集整理资源 规划站点内容 配置站点 创建页面 测试站点 发布站点 站点维护、更新 收集整理资源 利用现有的资源是提高网页制作速度最直接的一种手段。通过使用现有的网页图像、声音、动画、文字材料等资源，可以减轻网页制作的工作量、缩短工作时间、提高工作效率，并且还可以在一定程度上弥补自身在某一方面的不足。比如在网页布置方面缺乏创意，或无法布局出自己理想的网页效果，特别是在制作网页动
22、画或处理图片时无法绘制出所需的角色时，就可以使用这种方法。 在制作网站前，需要收集相关的资料。如要制作一个公司网站，则需要收集该公司的一些基本文字材料，如公司简介、产品说明及与公司有关的图片、产品图片等；若制作个人网站，则应收集一些个人简历、个人爱好等方面的材料。 提供免费资源的网站很多，比较好的网站有网页制作大宝库（） 、梦幻作坊（.tf） 、素材精品屋（）和 5D 多媒体（）等。 规划站点内容 在这一阶段，就是要明确为什么要制作网页，以及制作网页的目的和意义。在制作网页之前先有一个计划，以后的制作才能得心应手。下面列出在这一阶段要做的具体事项。 描述网页的服务对象 确定制作网页的目的 具体
23、确定网页的信息内容、浏览界面和信息设置 描述网页的服务对象在网页制作的初期阶段，决定站点的服务对象是关键的第一步。设计者应该清楚建立该站点后，哪些可以从该网站获得有用的信息。在网络社会中，网络是一个庞大的群体，每一个都有不同的需求，上网的软硬件环境也各不相同，因此要建立一个令每一个人都满意的网站是不可能的，但是可以建立一个适合大多数人的网站。所以，在建站的初期，就要为网站的服务群进行定位，尽量做到有的放矢。 确定制作网页的目的 在建网站初期，确定制作网页的目的是建站要考虑的第二步。确定了服务对象后，就要针对这些对象群体进行设计，在网站中为这些提供哪些服务、网页中应该包括哪些内容、采用什么样的方
24、式来吸引访问量，这些都是要考虑的问题。要知道，一个好的规划，可以直接影响站点的整体结构和网站的访问量，因此，做好这一步是举足轻重的，绝对不可以轻视。 具体确定网页的信息内容、浏览界面和信息设置 做好上面的两步以后，就可以正式确定网页的信息内容、网页的浏览界面和信息设置了。比如，想创建一个表现自己的兴趣爱好的个人网站，则应该考虑该网站包括个人简介、相册等页面，个人简介的页面中包括个人的基本信息、个人的爱好等内容，而要表现这些内容则可以采用经典的表格方式或活泼的列表方式等。 配置站点做好上面几步后，接下来的工作就是根据上面的规划创建一个完整的站点。在创建站点时，除了创建基本的页面外，还可创建一些文
25、件夹，比如建立一个存放图片的文件夹、创建一个模板文件夹等。另外，在命名这些页面和文件夹时，为它们取一个易记易识别的名字是十分有必要的，如可以将用于存放图片的文件夹命名为“pic”或“img” 等。 创建页面 上面的工作都是为这一步作准备的，这一步才是制作的关键。一个页面美不美观，能不能吸引浏览者，创建页面是关键的一步。在网页制作阶段，不但包括网页本身的实现，还包括 Web 服务器的实现。制作网页时，主要用到页面布局、HTML 语言、JavaScript 脚本语言、CGI 编程、图像制作、动画和多媒体处理等技术，因此需要平时注意学习、收集这方面的知识。一般页面的设计方法没有固定的模式，但从条理化
26、和可行性的方面考虑，可总体上分为下面的 2 种方法。 自顶向下的设计方法 所谓自顶向下的设计方法，就是从所有网页的根节点（即主页）开始，向下逐层展开设计。如果网页设计者在制作网页之前对网页的内容已有比较全面的了解，对整个网页的主体轮廓已经有较为清晰的规划，就可以使用该方法。使用该方法，可以在具体编写网页之前，用一些空的网页构筑起整个网页的框架，然后逐步添加网页内容。 如果页面布局大致相同，应尽量采用该方法。可以先制作一个模板，然后再通过该模板建立各个页面。 自底向上的设计方法 自底向上设计法是与自顶向下设计方法相反的设计方法。采用此方法时，应先设计网页树状信息结构的各个叶节点，然后通过归纳设计
27、出枝干节点，最后完成根节点的设计。这种设计方法适合于设计者对整个网站的总体结构和布局尚未考虑成熟，但对具体页面的信息内容和表现形式非常有把握的情况。 测试站点 当网站建立完成后，需要在发布站点前对站点进行测试。根据网站项目的大小、客户端要求以及访问者将会使用的浏览器种类等要求进行测试，一般将站点移到一个模拟调试 Web 服务器上对站点进行测试和编辑。网站测试包括多种浏览器间的兼容性、对于不同访问者是否显示正常、Script 脚本程序是否工作正常等多个方面。在站点建设过程中，最好不断地对站点进行测试并解决出现的问题，以便尽早发现问题，避免相同问题重复出现，使网页更加成熟完美。 发布站点 在发布网
28、页前必须在 Internet 上申请一个主页空间，用于指定网站或主页在Internet 上的放置位置。一般使用 FTP（远程文件传输）软件将网页上传到服务器中申请的网址目录下，也可直接用 Frontpage 或 Dreamweaver 中的发布站点命令进行上传，还可直接在 IE 浏览器中使用 FTP 协议进行上传/下载。对于大型网站的上传一般都使用专门的 FTP 软件，使用这种方法的上传 /下载速度较快站点维护、更新在这个阶段，网站已经正式发布，整个网站已进入正常运行阶段。这时的主要任务是不断地更新陈旧的网页信息，及时对访问者的留言和反馈信息进行响应，及时加入一些新的信息。同时，要不断采用新技
29、术升级网页，使网页的访问更为方便快捷、信息含量更加丰富、界面更加美观。 2.1.2 网页设计原则 整体规划 鲜明的主题 善用图像 鲜明的导航 时时更新 取个有创意的站名 制作通用网页 不要使用过多的动画 整体规划 设计网页不一定是难事，但一个上乘佳作却是需要倾尽心血的。要做到优秀，需要制作者应首先确定自己想要传递的主要信息，这就需要进行整体的规划和分析，从宏观上把握整个网站的整体框架，并用具体的方式来实现它。 鲜明的主题 主题内容应醒目，针对性强，令人一目了然，同时，标题内容应该精练、简朴，切忌堆砌太多不必要的细节反而使页面过于复杂。在主页上可清楚地列出各项要点，例如机构名称、提供的产品或服务
30、以及主页内容。总之，能表达制作网站风格的内容都应该用特殊的方式醒目地表示出来。 善用图像 现在虽然已有许多先进的方法连入 Internet，但网络的连接速度是网页设计人员不得不考虑的重要因素。出于这方面的考虑，页面中的图片就需要进行优化，因为图片是制约网络连接速度的一个重要因素。图像越大、颜色越深，传送页面所需的时间就越长。因此页面图像最好保持在 10KB 以下。最佳的图像应集美观与实用于一身。 调用要优化图片、减小图片的尺寸，可以使用 Fireworks 来进行这项工作。目前网络上支持的图片格式主要有*.gif、*.jpg 和*.png 等。 鲜明的导航 一个好的网页，应该是以方便浏览者浏览
31、为前提的。一个鲜明的导航，不仅能充分的展示整个网站的全部信息，还能大大方便浏览者快速地找到他们所需要的内容。基于清晰明确和速度的考虑，主页上的链接项目应只限于几个高级的类别，例如公司简介、产品信息、服务等主要链接。此外，提供信息的页面不应埋藏在重重叠叠的页面之下。在制作网页时应在网页的广度和深度之间求取平衡。如果网页上确实需要建立很多的链接，建议尽量采用分类目录列表的方式，或建立一个搜索表单，让浏览者通过输入关键字来进行搜索。 时时更新 Internet 上不断有新的事物出现，每天都有新花样出炉，如果网站中的内容总是停步不前，总是那些旧知识、旧资源，浏览者不久就会厌倦，从而失去大量浏览者。要改
32、变这种局面，就必须定期更新网页的内容，不断地做维护和更新操作。在主页上预告即将有新资料推出，可吸引再来浏览，不妨在页头以大字标题宣布新消息，也可定期改变主页面上的图像或更改主页的式样，同样也可以给一种新鲜感。另外，趣味性的事项可以持续或自动更新，例如可在网站主页上列出浏览网站的人数，确保主页提供的是最新的信息，加入一些新的技术等，都可以使制作出的网站具有新鲜感。 取个有创意的站名 取个有创意的站名往往能给浏览者留下良好的印象。一个好的网站也得有好的包装，首要的就是对站名的包装，只要使人一听就能记住，你的站名就算成功了。一般给网站取名时应以简短、好听好记、与网站内容相呼应为基准。 制作通用网页
33、制作通用网页是针对使用不同的浏览器而确定的。全球上网有很多，使用的浏览器也不尽相同，因此在制作网页时就要考虑对各种（通用）浏览器的支持，一般做好网页后，都应该在 IE 浏览器和 NE 浏览器中测试，保证在这两种浏览器中能够正常地显示。另外还需要考虑使用的浏览器分辨率的大小，目前大部分人还在使用 800600 像素的显示器，在做网页时就可以做 800600像素的网页，以便大多数能够正常地看到网页显示效果。 不要使用过多的动画 在网页中放入一些动画元素，能大大加强网页的动感效果，但使用动画的同时也存在弊端，过多的动画势必导致网页载入速度的下降，同时，过多的动画会给页面布局带来困难，也容易分散注意力
34、，这样就适得其反了。 网页整体架构一般网页的编排内容有文字、图片和动画，具体可实现的技术还可包括音乐、视频、交互式网页、高科技虚拟等。要将这些内容在同一个页面里进行合理布局，就必须先确定网页的整体框架。如果把网页比喻为一个人，先要有骨架，也就是网页的排版框架，然后再往这些框架里填入内容，从而建立一个完整的页面。根据网页制作的具体方式，可以将网页的框架分为分栏式、区块式、平面图片设计和非规律的设计几种。用色技巧要很好地表现一个网页，给浏览者视觉上的冲击，色彩是最好的表现方式。色彩是人类视觉最敏感的东西，不同色彩之间的对比会有不同的效果。网页页面的色彩处理得好，可以锦上添花，达到事半功倍的效果。色
35、彩总的应用原则应该是“总体协调，局部对比” ，也就是说，主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩对比。那么如何搭配颜色才能让自己的网页页面更加绚丽多彩呢？下面就对网页制作中色彩的运用技巧进行讲解。 确定主色 利用相近色 黑白灰运用 页面的色彩搭配确定主色遵循主从关系，这是最普遍的色彩处理原则。在网页制作过程中，首先就应该确定整个网站的主色调，如果同一个页面中运用太多的颜色就会使整个页面极不协调。最好从网站的服务对象出发，根据服务对象及网站的内容来确定主色。如果想创建一个儿童网站，那么就可以以红色或黄色为基调，如果要创建一个关于茶叶的网站，则可以使用绿色为基调。
36、利用相近色在同一个网页里面使用相近的颜色进行搭配，不仅在制作过程中很容易搭配，也使浏览者在感观上有一定的层次感而跳动又不会很大，往往给人一种和谐的感觉。同色彩系、明度不同或纯度不同的几种颜色搭配非常容易，比如挑选几种深浅不同的绿色来搭配，一般页面不会有太大的问题，但同一页面最好不要多于 4 种颜色。页面中超级链接也应该遵循以上原则，而文字颜色的搭配，还需考虑与背景进行分离。如果不能确定页面颜色的搭配，也可以使用一些软件来辅助，如Color002.EXE。另外，也可以打开 Photoshop 软件的色彩控制面板，调入 ANP Colors.ACO 文件，如果它们 6 色一组，每组都将是很不错的配
37、色方案。黑白灰运用其实，在网页制作中，黑白灰是惯用的主色调，合理利用它们往往能产生意想不到的效果。如果在用色上不好把握，可以大面积地加白、灰，小面积的加黑来与其他颜色进行搭配。遇到纯度很高的颜色，比如纯蓝、纯黄时，这样的搭配会很鲜艳，使视觉兴奋。另外，把明度抬高或降低，搭配上灰、白色，也是一种调节的方法。页面的色彩搭配整个网页中有不同的内容，不同的内容之间又该如何搭配呢? 网页内容是信息存储的空间，要求背景要亮，文字要暗，对比度要高。一般是白底黑字，如果是黑底，也可用灰色的字体，或用很淡的颜色。 网页标头是 LOGO（网站标志）和主要信息放置的地方。一般要深色，具有软高的对比度，以便浏览者非常
38、方便地看到。标题通常与页面其他部分有不同的“ 风貌” ，可以使用与网页内容非常不同的字体和颜色来做，也可以采用网页内容的反色来做。 对于导航栏所在区域，一般的做法是把菜单背景颜色设置得暗一些，然后依靠较高的颜色、比较强烈的图形元素或独特的字体将网页内容和菜单的不同目的准确地区分开来。 对于侧栏，尽管不是所有的网页都有侧栏，但它也不失为显示附加信息的一个有用方式。设置侧栏时，它应与网页的内容清楚地区分开来，以便于阅读。 页脚。这一项并不是很重要，不应喧宾夺主。可以考虑和侧栏相同的颜色，或稍微淡一些的颜色。 如果有一些需要跳跃的内容，则可以采用一些鲜艳的颜色来吸引浏览者的视线。如用橙色来做导航、按
39、钮等。2.2.1 创建、打开和编辑站点1、创建站点步骤：1）在 Dreamweaver 窗口中，单击站点下拉菜单中的管理站点命令；2）在打开站点对话框中，单击新建按钮，在下拉菜单中单击站点命令；3）在站点定义对话框中，单击高级标签，在左侧分类栏中选择本地信息，在右侧设置好站点的本地信息；4）设置好各信息后，单击确定按钮，返回管理站点对话框，最后单击完成按钮，即完成了站点的定义2.2.1 创建、打开和编辑站点1、创建站点步骤：1）在 Dreamweaver 窗口中，单击站点下拉菜单中的管理站点命令；2）在打开站点对话框中，单击新建按钮，在下拉菜单中单击站点命令；3）在站点定义对话框中，单击高级标
40、签，在左侧分类栏中选择本地信息，在右侧设置好站点的本地信息；4）设置好各信息后，单击确定按钮，返回管理站点对话框，最后单击完成按钮，即完成了站点的定义2.2.2 站点视图在文件面板中，单击第二个黑色三角形，打开下拉列表框，在列表框中有四种视图：1）本地视图用于显示站点的本地文件夹和文件结构。2）远程视图用于显示站点的远程文件夹和文件结构。3）测试服务器视图用于显示站点的测试服务器文件夹和文件结构。4）地图视图是指以图形化方式显示站点的结构、构建网页之间的链接。2.2.3 站点文件管理1、创建文件夹2、创建文件3、文件的移动和复制4、删除文件和文件夹5、编辑站点文件6、刷新本地站点文件列表如果在
41、 Dreamweaver 之外对站点中的文件夹和文件进行了修改，则需要对本地站点文件列表进行刷新，才能看到修改后的结果。自动刷新本地文件列表 2.2.3 站点文件管理1、创建文件夹2、创建文件3、文件的移动和复制4、删除文件和文件夹5、编辑站点文件6、刷新本地站点文件列表如果在 Dreamweaver 之外对站点中的文件夹和文件进行了修改，则需要对本地站点文件列表进行刷新，才能看到修改后的结果。填空题1）网页支持的图片格式有 gif 、 jpg 及 png 等。（2）网页页面的整体设计方法有 自顶向下设计法 自底向上的设计方法 2 种。（1）导航栏有一排、两排、多排，图片导航，文本导航，框架导
42、航等各种类别 （ 对 ）（2）同一页面最好不要多于 5 种颜色。 （错 ）（3）在发布网页前必须在 Internet 上申请一个主页空间，用于指定网站或主页在 Internet 上的放置位置。 对（1）网页制作的步骤是什么？（2）网页制作应该遵循哪些原则？第三课 文字的插入及格式化3.1 插入文本3.2 文本格式化3.3 超级链接3.4 项目列表3.1 插入文本普通文本 特殊文本 在字符之间添加空格普通文本普通文本是指一般的汉字或英文文本，它的插入方法十分简单，将光标直接定位到编辑窗口中要输入文字的地方，然后直接输入文字即可。也可以在其他文本编辑器中编辑文本（如 Word、WPS 等） ，然后
43、复制该文字，打开 Dreamweaver 中要添加该文字的 Web 页面，选择编辑粘贴菜单命令即可粘贴一般的文本。但 Dreamweaver 不保留在其他应用程序中设置的文本格式，只可以保留换行符。如果想保留文本的格式，可以选择编辑带格式粘贴菜单命令，如果不想保留文本格式，还可选择编辑粘贴文本菜单命令。若要将 Word 或 Excel 文档的内容添加到新的或现有的 Web 页中，具体操作如下。（1）打开要将 Word 或 Excel 文件的内容复制到的目标 Web 页。（2）选择文件 导入Word 文档 或文件导入Excel 文档菜单命令。在弹出的“ 打开” 对话框中，选择要添加的文件，然后单
44、击 按钮，Word 或 Excel 文档的内容将出现在页面中。 特殊文本在 Dreamweaver MX 2004 中，可以在文档中插入多种特殊符号，如版权复制符号、并列符、注册商标符号等。要插入特殊符号，具体操作如下。 （1）将光标定位到插入特殊字符的位置。（2）单击“ 插入” 栏中的 “文本”选项卡，如图 3-1 所示。（3）单击 按钮，展开如图 3-2 所示的“字符 ”下拉列表。 （4）单击相应的选项即可在 Web 页面中添加相应的特殊字符，如图 3-3所示。如果没有使用西欧字符，则会弹出一个警告框，提示可能有些浏览器不能正常显示这些字符，如图 3-4 所示。 （5）如果还需要输入其他的
45、特殊字符，可以在“字符” 下拉列表中选择“其他字符”选项，打开如图 3-5 所示的“ 插入其他字符”对话框。（6）单击需要的字符后再单击 按钮即可输入相应的字符，如图 3-6所示。也可以选择插入 HTML特殊字符菜单命令下的相应命令插入相应字符。 在字符之间添加空格 Dreamweaver MX 2004 的 HTML 代码只允许字符之间包含一个空格，若要在文档中添加其他空格，必须插入不换行空格，也可以设置一个在文档中自动添加不换行空格的参数选择。插入不换行空格 设置添加不换行空格的参数 插入不换行空格 插入不换行空格，可执行如下操作之一：在“插入”栏的“文本” 选项卡中，单击“ 字符”按钮，
46、在下拉列表中选择 “插入不换行空格”选项。选择插入 HTML特殊字符 不换行空格 菜单命令。 按【Ctrl+Shift+ 空格键】键输入。 将输入法切换到全角状态再按空格键。 设置添加不换行空格的参数 设置添加不换行空格的参数，具体操作如下。（1）选择编辑 首选参数菜单命令。（2）在“ 分类” 列表的 “常规”选项中选中 复选框。（3）单击 按钮保存即可。 3.2 文本格式化Dreamweaver 中的文本格式设置与使用标准字处理程序类似。可以为文本块设置默认格式化样式（段落、标题 1、标题 2 等） ，更改所选文本的字体、大小、颜色和对齐方式，或者应用文本样式（如粗体、斜体、等宽字体和下划线
47、等） 。对字体的特性进行设置一般有属性面板法和菜单命令两种方法，使用菜单命令时，只需要选择“ 文本 ”菜单下的相应命令，然后进行具体的设置即可。下面对制作中最常用的“ 文本 ”属性面板法进行介绍。 “文本”属性面板如图 3-7 所示。 “文本 ”属性面板中各选项含义及设置方法如下。 格式 样式 粗体 斜体 字体 大小 颜色 对齐方式 链接 格式 设置所选文本（一般是标题文本）的段落样式。各具体选项如图 3-8 所示，设置该选项可以将所选的文本设置成各种标题。标题号越小，字体越大。要设置字体的“ 格式 ”属性，只需在“格式”下拉列表中选择相应的选项即可，其效果如图 3-9 所示。 样式 显示当前应用于所选文本的类样式。如果没有对选定内容应用过任何样式，则弹出式菜单中显示“ 无”；如果已对选定内容应用了多个样式，则弹出式菜单为空。没建立样式的“ 样式 ”列表框如图 3-10 所示，建立了样式的“样式”列表框如图 3-11 所示，应用了“样式” 的文本效果如图 3-12 所示。其他具体的内容将在第 12 课讲解。 使用“样式”列表框可执行以下操作。 选择要应用于选定内容的样式即可将该样式应用于所选文本； 选择 “无”选项可删除当前选定的样式，即所选文本不应用任何样式； 选择 “管理样式
