1、网页设计与制作教程 (第4版）,机械工业出版社同名教材 配套电子教案,一 网页、网站的概念 二 Web标准 三 网站的规划与设计 四 网站开发工作流程 五 网站策划书撰写要点 六 常用网页制作软件 七 实训,第1章 网页设计制作概述,1.1.1 网页、网站和主页网页（Web Page）是存放在Web服务器上供客户端用户浏览的文件，可以在Internet上传输。网页是按照网页文档规范编写的一个或多个文件，这种格式的文件由超文本标记语言创建，能将文字、图片、声音等各种多媒体文件组合在一起，这些文件被保存在特定计算机的特定目录中。几乎所有的网页都包含链接，可以方便地跳转到其他相关网页或是相关网站。
2、如果在浏览器的地址栏中输入网站地址，浏览器会自动连接到这个网址所指向的网络服务器，并出现一个默认的网页（一般为index.html或default.html），这个最先打开的默认页面就被称为“主页”或“首页”。,1.1 网页、网站的概念,1.1.2 静态网页和动态网页静态网页指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件，不加处理直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。其页面的内容使用的仅仅是标准的HTML代码，静态网页通常由纯粹的HTML/CSS语言编写。动态网页技术根据程序运行的区域不同，分为客户端动态技术与服务器端动态技术。客户
3、端动态技术不需要与服务器进行交互，实现动态功能的代码往往采用脚本语言形式直接嵌入到网页中。服务器发送给浏览者后，网页在客户端浏览器上直接响应用户的动作。常见的客户端动态技术包括JavaScript、ActiveX和Flash等。,1.1 网页、网站的概念,1.2.1 Web标准的概念Web标准不是某一种标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分为三类：结构化标准语言主要包括XHTML和XML，表现标准语言主要为CSS，行为标准主要包括对象模型W3C DOM、ECMAScript等。这些
4、标准大部分由W3C起草和发布，也有一些是其他标准组织制定的标准，如ECMA（European Computer Manufacturers Association）的ECMAScript标准。例如，人体模特换衣服和表演。模特就好比数据，衣服则是表现形式，模特的表演动作是行为。模特和衣服是分离的，这样就可以随意换衣服。,1.2 Web标准,1.2.2 建立Web标准的目的简单地说，建立Web标准的目的是： 提供最大利益给最多的网站用户； 确保任何网站文档都能够长期有效； 简化代码，降低建设成本； 让网站更容易使用，能适应更多不同用户和更多网络设备； 当浏览器版本更新或者出现新的网络交互设备时，确
5、保所有应用能够继续正确执行。,1.2 Web标准,1.2.3 采用Web标准的优点1客户端的优点采用Web标准后，客户端的好处主要体现在以下方面： 文件下载与页面显示速度更快； 内容能被更多的用户所访问（包括失明、弱视、色盲等残障人士）； 2服务器端的优点采用Web标准后，服务器端的好处主要体现在以下方面： 更少的代码和组件，容易维护； 带宽要求降低（代码更简洁），成本降低； 更容易被搜寻引擎搜索到；,1.2 Web标准,在建设网站之前，需要对网站进行一系列的分析和设计，然后根据分析的结果提出合理的建设方案，这就是网站的规划与设计。网站的规划与设计一般应遵循以下三个原则： 最大限度地满足用户需
6、要； 最有效地进行资源利用； 使用方便，界面友好，运行高效；常规的规划与设计方法一般有以下三种：自顶向下、自底向上、不断增补的设计方法。,1.3 网站的规划与设计,典型的Web开发工作流程包括以下几个阶段。 1）规划站点：包括确立站点的策略或目标、确定所面向的用户以及站点的数据需求。 2）设置开发环境：包括选择Web应用程序服务器、利用Dreamweaver网页制作软件定义站点及数据源。 3）规划页面设计和布局：包括用绘画工具创建页面和界面模型，以及使用Dreamweaver、FrontPage布置页面。 4）创建内容资源：包括使用Fireworks、Photoshop和Flash创建图像、视
7、频等。 5）组合、测试和部署站点：包括使用Dreamweaver设置文本格式、编译资源，测试代码将站点发布到服务器上。 6）维护站点：包括使用Dreamweaver保持内容的更新。,1.4 网站开发工作流程,1.4.7 案例一：规划曙光大学网站 【案例综述】规划曙光大学网站的结构。 【案例展示】本书围绕着一个完整网站的制作作为主要讲解案例，其站点规划结构图及其含义如图1-1所示。,1.4 网站开发工作流程,网站策划书应该尽可能地涵盖网站规划中的各个方面，写作要科学、认真、实事求是。以最常见的企业网站为例，介绍网站策划书的撰写要点。 1前期调研分析 2网站的功能定位 3网站技术解决方案 4网站内
8、容规划 5网页设计 6网站维护 7网站测试 8网站发布与推广 9网站设计日程表 10费用明细,1.5 网站策划书撰写要点,1.6 常用网页制作软件,1.6.1 网页制作工具网页制作工具分为“可视化”和“非可视化”两大类。“可视化”网页编辑器的优点是直观、使用方便、容易学习，在其中制作网页与在Word中编辑相似，缺点是难以精确达到与浏览器完全一致的显示效果。 “非可视化”的网页编辑器，因为是用HTML代码来设计的，所以控制精确，但是，工作效率太低。 1Dreamweaver 2FrontPage 3Adobe GoLive 4HomeSite 5Visual Studio 2005/2008,1
9、.6 常用网页制作软件,1.6.2 网页图形图像处理工具使用网页图形图像处理工具可以设计、处理适合网页的图形图像。 1Fireworks 2Photoshop 3CorelDRAW,1.6 常用网页制作软件,1.6.3 网页动画制作与特效工具随着网络速度的提高，越来越多的网页中使用了动画效果，这些动态显示的画面不仅吸引了浏览者的注意力，而且也给原本较呆板的画面增添了不少生机。 1Flash 2Ulead GIF Animator,1.6 常用网页制作软件,1.6.4 网页上传工具制作好的网页要上传到提供主页空间的服务器后，才能让浏览者访问。上传工具选择合适与否将影响对网站更新维护的效率。 1C
10、uteFTP 2FlashFXP 3LeapFTP 4其他上传工具 （1）UploadNow!上传工具 （2）WS-FTP上传工具 Dreamweaver软件自身也具有上传网页的功能。,1.6 常用网页制作软件,1.6.5 网页设计工具的发展动向2005年4月18日，全球知名的应用软件公司Adobe以34亿美元的价格收购了Macromedia公司，这次收购代表着多媒体产业领域的融合。随着Adobe公司对Macromedia公司进行全新的整合，势必推出更加强大的图形网页应用软件，为图形处理与网页制作开创出新的空间。目前网页制作中的HTML代码与图片都是单独制作的，需要美工人员与网页制作人员共同完
11、成，但是，随着两家公司的合并，极有可能推出新的软件，实现图片与网页的一体化操作，提高网页制作的效率。另外，Fireworks和ImageReady在未来的地位，也很有可能被已经强势的Photoshop和Flash取代。,实训一：规划“爱家美食”网站 【实训综述】规划“爱家美食”网站的结构。 【实训展示】网站的导航条，读者可在此基础上画出网站的栏目结构图。,1.7 实训,1简述网页、网站和主页的异同。 2Web标准主要由哪3部分组成？分别解释其含义。 3简述网站开发的工作流程。 4简述怎样撰写网站策划书？ 5常用的网页制作工具有哪些？分别有哪些特点？,1.8 习题,网页设计与制作教程 (第4版）
12、,机械工业出版社同名教材 配套电子教案,一 基本概念 二 网页版面设计 三 实训,第2章 网页版面设计基础,2.1.1 虚拟界面由于网页是通过计算机的显示通道与人们交流的，并不是现实世界中的实际物体，因此又被称为“虚拟界面”。从网络的角度来看，虚拟界面是一个网站的窗口，网站中的数据库信息、链接功能以及各种网络服务都通过这个界面进行实施。一个网站的网页可以有多个，通常根据需要分层设置。从平面设计的角度来看，每个虚拟界面就是一个版面，可以利用平面设计理念对其进行设计。但是，网页毕竟是计算机技术和多媒体技术的产物，具有某些一般版面所没有的特点和性质。为了对虚拟版面进行设计，就必须拓展设计的范围，丰富
13、设计的手段，如对于版面各种媒介的设计与制作，要应用一些新的技术。,2.1 基本概念,2.1.1 虚拟界面网页的界面通过显示器显示，除了运用一般版面设计手段对这个虚拟界面进行设计以外，还需要针对该界面的独特之处进行设计，这就需要了解虚拟界面的独特之处。,2.1 基本概念,图2-1 包含多种多媒体的网页,2.1.2 网页界面的特点网页的界面通过显示器显示，除了运用一般版面设计手段对这个虚拟界面进行设计以外，还需要针对该界面的独特之处进行设计，这就需要了解虚拟界面的独特之处。其主要表现在以下几个方面。 1版面尺寸规范化 2媒介形式的多样化 3有限的界面颜色数量 4界面的嵌套性 5具有控制功能,2.1
14、 基本概念,2.1.2 网页界面的特点 版面尺寸规范化：通常采用显示器的标准显示模式。 1）800像素600像素。 2）1024像素768像素。 3）1280像素1024像素或更高。 图2-2是采用不同显示模式显示的迪斯尼公司网站的网页。,2.1 基本概念,a) 800像素600像素 b) 1024像素768像素 c) 1280像素1024像素,2.1.3 网页的功能网页是计算机技术和多媒体技术实际应用的产物，因此，网页同时具备计算机技术和多媒体技术的基本功能。其主要功能包括：展示功能、超链接功能、检索功能以及统计和计算功能等。,2.1 基本概念,2.2.1 版面编排原则网页是信息传播的一种载
15、体，在设计上同其他出版物如报纸、杂志等有许多共同之处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式不同，网页设计同时又具有其特有的规律。网页的艺术设计，是技术与艺术的结合、内容与形式的统一。版面编排的首要任务就是根据网页传达内容的需要，将不同的文字和图片按照一定的次序用最合理的编排和布局组成一个有机的整体并展现出来。版面编排应注意以下几点。 1突出中心，理清主次 2搭配合理，大小呼应 3图文并茂，相得益彰,2.2 网页版面设计,2.2.2 网页排版布局的一般步骤 （1）构思根据网站内容的整体风格，设计版面布局。 （2）初步填充内容这一步就要把一些主要的内容放到网页中，例如，网站的标
16、志、广告条、菜单、导航条、计数器等。 （3）细化在将各主要元素确定好之后，下面就可以考虑文字、图像、表格等页面元素的排版布局了。在这一步，设计者可以利用网页编辑工具把草案做成一个简略的网页，当然，对每一种元素所占的比例也要有一个详细的数字，以便以后修改。,2.2 网页版面设计,2.2.3 版面典型风格网页的版面风格与广告设计的版面风格是统一的，其目的都是为了产生美感、提高阅读兴趣、吸引人们的注意力。网页的设计首先要考虑风格的定位。任何网页都要根据主题的内容来决定其风格与形式，因为只有形式与内容的完美统一才能达到理想的效果。主页风格的形成主要依赖于主页的版式设计，依赖于页面的色调处理，还有图片与
17、文字的组合形式等。这些问题看似简单，但往往需要主页的设计和制作者具有一定的美术素质和修养。与平面广告相比，网页的总体风格是：文字较多，可进行超链接，使用动画、视频、声音，其信息量远远大于广告。比较典型的网页风格主要有：对称型、偏置型、标题型和混合型等。,2.2 网页版面设计,2.2.3 版面典型风格,2.2 网页版面设计,对称型,偏置型,标题型,2.2.4 网页排版布局的常用技术 （1）CSS（层叠样式表）布局使用CSS布局技术能完全精确地定位文本图片。CSS对于初学者来说显得有点复杂，但它的确是一种好的布局方法。 （2）表格布局表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之
18、间的影响，而且表格在定位图片和文本上比用CSS更加方便。表格布局惟一的缺点是，当设计者使用了过多的表格时，会影响页面的下载速度。 （3）框架布局从布局上考虑，框架结构不失为一个好的布局方法。,2.2 网页版面设计,2.2.5 色彩搭配色彩是人的视觉中最敏感的东西，把握好页面的色彩，页面设计就成功了一半。好的色彩运用能使浏览者对网站留下较深的印象。色彩和谐与否，是整个网页设计是否成功的关键。色彩总的应用原则是“总体协调，局部对比”，网页的整体色彩效果应该是和谐的，只在局部的、小范围的地方突出一些强烈色彩的对比。,2.2 网页版面设计,2.2.5 色彩搭配1首屏页面的设计所谓首屏页面，是指在打开一
19、个网站首页时，不拖动画面右侧的滚动条能够看到的部分，如图2-6所示。,2.2 网页版面设计,2.2.5 色彩搭配2导航栏的设计导航栏是网页非常重要的组成部分，是引导阅读、扩大信息量的有力手段。图2-7是网站的导航栏。,2.2 网页版面设计,2.2.6 设计规则网页设计与广告、报刊等平面设计有着共同的要求，下面主要介绍网页的特殊之处。 1首屏页面的设计 2导航栏的设计 3媒介规格设计 4网页效果与网页效率 5强调整体 6网页与读者群 7网页命名规则 8及时更新网页,2.2 网页版面设计,2.2.7 设计误区在设计网页时，如果设计不当，就会造成网页虽美观，但运行缓慢，甚至无法正常运行的现象。为了避
20、免上述现象发生，列举几个常见的设计误区，以便引起重视。 1片面追求版面效果 2使用纵向的导航栏 3使用多种媒体形式 4规则化,2.2 网页版面设计,2.2.8 案例一：设计曙光大学网站首页版面 【案例综述】使用网页版面设计技术设计曙光大学网站首页版面。 【案例展示】曙光大学网站首页版面的效果如图2-8所示。,2.2 网页版面设计,2.3.1 实训一：设计“爱家美食”网站首页版面 【实训综述】使用网页版面设计技术设计“爱家美食”网站首页版面。 【实训展示】“爱家美食”网站首页版面的效果如图2-9所示。,2.3 实训,图2-9 实例效果,1对于现在普遍使用的19in显示器，网页的版面尺寸设置为多少
21、像素合适？为什么？ 2上网浏览网页，指出这些网页版面属于哪种类型。 3色彩搭配有哪些原则？请给出几组匹配的色彩。 4如图2-10所示是“韵魅”网站的首页，请读者谈谈该页面网页版面设计的步骤。,2.4 习题,网页设计与制作教程 (第4版）,机械工业出版社同名教材 配套电子教案,一 Dreamweaver CS4入门 二 制作简单网页 制作图文并茂网页 四 网页结构语言XHTML 五 实训,第3章 用Dreamweaver CS4创建基本网页,3.1.1 Dreamweaver CS4工作环境 1Dreamweaver CS4的启动安装好Dreamweaver CS4后，单击“开始”“程序”“Ad
22、obe Dreamweaver CS4”命令。首先显示“工作区设置”对话框，如图3-1所示。由于要采用可视化方式设计网页，选中“设计者”单选钮，单击“确定”按钮。接下来显示起始页对话框，如图3-2所示。在起始页对话框中可以选择“打开最近的项目”、“新建”或“主要功能”。,3.1 Dreamweaver CS4入门,图3-1 “工作区设置”对话框 图3-2 起始页,3.1.1 Dreamweaver CS4工作环境 2Dreamweaver CS4的主工作区Dreamweaver CS4的主工作区由文档工具栏、文档窗口、属性面板、插入面板和组合面板等部分组成，如图3-3所示。,3.1 Dream
23、weaver CS4入门,图3-3 Dreamweaver CS4的主工作区,3.1.1 Dreamweaver CS4工作环境 （1）文档工具栏文档工具栏中的按钮使用户可以在文档的不同视图间快速切换：代码视图、设计视图、和拆分视图。文档工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图3-4所示。,3.1 Dreamweaver CS4入门,图3-4 文档工具栏的常用命令和选项,3.1.1 Dreamweaver CS4工作环境 （2）面板 Dreamweaver的三个重要功能分别是网页设计、代码编写和应用程序开发，相应的面板也是这样分类的。 设计类面板组 文
24、件类面板组 应用程序类面板组,3.1 Dreamweaver CS4入门,3.1.2 Dreamweaver CS4的参数设置 一般设置的参数有常规参数、新建文档参数和站点参数，这些都是开始创建站点、设计网页前需要考虑的因素。 1常规参数设置 2新建文档参数设置,3.1 Dreamweaver CS4入门,3.1.2 Dreamweaver CS4的参数设置 一般设置的参数有常规参数、新建文档参数和站点参数，这些都是开始创建站点、设计网页前需要考虑的因素。 3站点参数设置,3.1 Dreamweaver CS4入门,3.2.1 创建网站站点所谓站点，可以看做是一系列文档的组合，这些文档之间通过
25、各种链接关联起来，可能拥有相似的属性，例如，描述相关的主体，采用相似的设计，或者实现相同的目的等，也可能只是毫无意义的链接。利用浏览器，就可以从一个文档跳转到另一个文档，实现对整个网站的浏览。 1本地站点和远端站点 2建立本地站点 3指定站点首页,3.2 制作简单网页,3.2.1 创建网站站点【案例综述】建立一个本地站点，定义站点名称和站点使用的本地根文件夹及默认的图像文件夹。 【案例展示】本实例定义站点的名称为Sample，使用的本地文件夹为D:webdawn，默认的图像文件夹为D:webdawnimages。站点的设置如图3-16所示，站点结构如图3-17所示。,3.2 制作简单网页,3.
26、2.2 新建与保存网页 Dreamweaver CS4为创建新文档提供了若干选项，用户可以创建以下任意文档。 新的空白文档或模板； 基于Dreamweaver附带的预设计页面布局文档； 基于现有模板的文档。 1创建新文档 2保存新文档,3.2 制作简单网页,3.2.3 页面属性设置页面属性的设置包括页面的布局和格式设置。 1设置网页标题,3.2 制作简单网页,3.2.3 页面属性设置 2设置网页外观,3.2 制作简单网页,3.2.3 页面属性设置 3设置网页链接,3.2 制作简单网页,3.2.3 页面属性设置 4设置网页跟踪图像,3.2 制作简单网页,3.2.4 网页的基本排版在通常情况下，网
27、页上一般都包含文本、日期、特殊符号及水平线等基本元素。 1网页基本元素 2页面的简单排版 （1）设置文本的大小 （2）设置文本的字体 （3）设置文本的颜色 （4）设置文本对齐方式,3.2 制作简单网页,3.2.5 插入图像Web上常用的图像格式包括以下3种：GIF、JPEG和PNG。 Dreamweaver能够使用GIF、JPEG或PNG格式打开或预览任何图像。使用Dreamweaver将一个图像插入到网页中有3种方法： 在插入面板的“常用”分类中选择“图像”按钮； 执行“插入”“图像”命令； 使用Ctrl+Alt+I组合键。,3.2 制作简单网页,3.2.6 案例一：创建曙光大学学校概况页面
28、 【案例综述】制作曙光大学学校概况页面，通过简单的页面制作展示学校的基本情况。 【案例展示】本例中的素材包括4幅校园图片，实例效果如图3-42所示。,3.2 制作简单网页,3.3.1 图文混排图文混排技术是指设置图像与同一行中的文本、图像、插件或其它元素的对齐方式，方法是：在设计视图中选择图像，在属性面板中使用“对齐”弹出菜单设置该图像的对齐属性。,3.3 制作图文并茂网页,3.3.2 案例二：设计曙光大学校园风采网页 【案例综述】制作曙光大学校园风采页面，通过图文混排技术展示学校的文化。 【案例展示】本例中的素材包括3幅校园文化图片，实例效果如图3-55所示。,3.3 制作图文并茂网页,3.
29、4.1 XHTML简介HTML是Hypertext Markup Language（超文本标记语言）的缩写，是一种为普通文件中某些字句加上标识的语言，其目的在于运用标记（tag）对文件达到预期的效果。它是构成Web页面（Page），用来表示Web页面的符号标记语言。HTML语言是建立网页的规范或标准，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上的应用需求。2000年，W3C组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的新语言，目的是基于XML应用。XHTML
30、是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。,3.4 网页结构语言XHTML,3.4.2 XHTML文档的基本结构一个网页都有其基本的结构，包括XHTML的结构、标记的格式等。 1标记及其属性 2XHTML文档的基本结构 XHTML文档是一种纯文本格式的文件，XHTML文档的基本结构为：网页的标题 网页的内容,3.4 网页结构语言XHTML,3.4.3 使用Dreamweaver CS4的代码视图查看XHTML文档在当今的网页制作技术中，创建一个网站会使用CSS、JavaScript和许多其它相关的文件。为了简化用户修改与网页相关的所有文件，Dreamweaver
31、提供了文件相关工具栏。例如，打开曙光大学网站首页index.html文件，在文件相关工具栏中包含了文件的源代码以及和文件相关的样式表文件style.css、JavaScript脚本文件adpic.js。当在代码视图下工作时，点击源代码按钮 会从文件相关工具栏返回到源代码中。如果看不到文件相关工具栏，执行“编辑”“首选参数”命令，打开“首选参数”对话框，在常规分类中，选择启用相关文件。,3.4 网页结构语言XHTML,3.4.4 案例三：了解曙光大学网站校园风采网页代码在当今的打开案例二中制作的曙光大学网站校园风采网页xxfc.html，切换到代码视图，如图3-63所示。,3.4 网页结构语言X
32、HTML,3.5.1 实训一：制作爱家美食网站“白云豆烧牛肉”页面 【实训综述】读者在学习了网页制作的一般流程和图文混排的基础上，制作简单的页面。 【实训展示】本实训中的素材包括2幅图片，制作如图3-64所示的“白云豆烧牛肉”菜谱页面。,3.5 实训,3.5.2 实训二：制作爱家美食网站“美食推荐”页面 【实训综述】本实训通过制作一个图文并茂的网页，进一步加强读者对图文混排技术的理解与实战练习。 【实训展示】本实训中的素材包括2幅图片，制作如图3-65所示的爱家美食网站“美食推荐”页面。,3.5 实训,1简答Dreamweaver文档编辑所包括的4种视图及特点。 2本地站点和远端站点的区别是什
33、么？举例建立一个本地站点。 3使用网页的基本元素设计一个简单的以健康为主题的网页。 4制作如图3-66所示的图文混排的网页。,3.6 习题,网页设计与制作教程 (第4版）,机械工业出版社同名教材 配套电子教案,一 超链接的基本概念 创建内部超级链接 创建其他类型链接 四 实训,第4章 超级链接,超链接（hyperlink）是网页互相联系的桥梁，超链接可以看作是一个“热点”，它可以从当前网页定义的位置跳转到其他位置，包括当前页的某个位置、Internet、本地硬盘或局域网上的其他文件，甚至跳转到声音、图像等多媒体文件。 1超链接的分类根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、
34、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。 2路径创建超级链接时必须了解链接与被链接文本的路径。在一个网站中，路径通常有3种表示方式：绝对路径、根目录相对路径和文档目录相对路径。,4.1 超链接的基本概念,4.2.1 内部超链接的形式 1链接到目标文件名是链接所指向的文件。 链接到同一目录内的网页文件的格式为：热点对象 2链接到下一级目录中的网页文件 同一目录内的网页文件 链接到下一级目录中网页文件的格式为：热点对象 3链接到上一级目录中的网页文件 链接到上一级目录中网页文件的格式为：热点对象 其中“/表示退到上一级目录中。 4链接到同级目录中
35、的网页文件 链接到同级目录中网页文件的格式为：热点对象 ,4.2 创建内部超级链接,4.2.2 创建文字超链接 可以使用属性面板的文件夹图标或链接文本框创建从文字到其它文档的链接。创建文字超链接的方法是： 在文档窗口的设计视图中选择文字。 打开属性面板，然后执行下列操作之一： 单击“链接”文本框右侧的文件夹图标 ，浏览并定位选择一个超链接文件。 在“链接”文本框中输入文档的路径和文件名。 使用“指向文件”按钮 ，将超链接目标指向文件面板中的页面。,4.2 创建内部超级链接,4.2.3 创建图片超链接图片超链接有两种形式，即整个图像的图像超链接和图像局部区域的图像热点超链接。 1图像超链接如果创
36、建的是整个图像的超链接，其方法大致和创建文字超链接一致，区别在于选中的超链接热点对象从原来的文字改变为图像。选中图像后，在属性面板中设置超链接的方法和创建文字超链接的方法完全一样。 2图像热点超链接 图像热点也叫图像地图或图像映射，是指在一幅图像中定义若干个区域（这些区域被称为热点），每个区域中指定一个不同超链接，当单击不同区域时可以跳转到相应的目标页面。,4.2 创建内部超级链接,4.2.4 案例一：制作曙光大学网站招生信息栏目 【案例综述】制作曙光大学网站招生信息栏目系列页面，使用内部超链接将招生信息栏目的若干页面链接起来，展示学校的招生信息。 【学习目标】内部超链接的定义和使用场合。 【
37、知识要点】使用内部链接技术实现页面的跳转。,4.2 创建内部超级链接,4.3.1 外部链接所谓外部链接，是指来自网站以外的链接。通俗地讲，网站的首页、页面、单篇文章页面、存档、分类、标签以外的链接都可以认为是外部链接。外部链接还是搜索引擎优化的一个很重要的因素，一个网站获得的外部链接越多，那么这个网站在搜索引擎中的排名可能就越高，获得外部链接的主要方法是交换链接。外部链接的格式为：热点对象 可以使用属性面板的链接文本框创建外部链接。创建外部链接的方法是： 在文档窗口的设计视图中选择要从其创建链接的或图像。 打开属性面板，在“链接”文本框中输入网站URL地址。,4.3 创建其他类型超链接,4.3
38、.2 E-mail超链接在很多网页中会看到网站管理员或公司的E-mail邮件超链接，单击指向E-mail邮件的链接，将打开缺省的电子邮件程序，如FoxMail、Outlook Express等，并自动填写邮件地址。指向电子邮件链接的格式为：热点文本 例如，E-mail地址是，建立如下链接： 信箱:和我联系 可以使用属性面板的链接文本框创建E-mail超链接。创建E-mail超链接的方法是： 在文档窗口的设计视图中选择要从其创建链接的文字或图像。 打开属性面板，在“链接”文本框中输入E-mail地址。,4.3 创建其他类型超链接,4.3.3 锚点超链接在很多网页中会看到网站管理员或公司的E-ma
39、il邮件超链接，单击指向E-mail邮件的链接，将打开缺省的电子邮件程序，如FoxMail、Outlook Express等，并自动填写邮件地址。指向电子邮件链接的格式为：热点文本 例如，E-mail地址是，建立如下链接： 信箱:和我联系 可以使用属性面板的链接文本框创建E-mail超链接。创建E-mail超链接的方法是： 在文档窗口的设计视图中选择要从其创建链接的文字或图像。 打开属性面板，在“链接”文本框中输入E-mail地址。,4.3 创建其他类型超链接,4.2.4 下载链接 在很多网页中会看到网站管理员或公司的E-mail邮件超链接，单击指向E-mail邮件的链接，将打开缺省的电子邮件
40、程序，如FoxMail、Outlook Express等，并自动填写邮件地址。指向电子邮件链接的格式为：热点文本 例如，E-mail地址是，建立如下链接： 信箱:和我联系 可以使用属性面板的链接文本框创建E-mail超链接。创建E-mail超链接的方法是： 在文档窗口的设计视图中选择要从其创建链接的文字或图像。 打开属性面板，在“链接”文本框中输入E-mail地址。,4.3 创建其他类型超链接,4.4.2 实训二：制作爱家美食网站“美味靓汤”系列页面 【实训综述】本实训通过“美味靓汤”系列页面的制作，进一步加强读者综合利用各种形式的超链接的能力，为以后的网站设计打好基础。 【实训展示】本实训中
41、的素材包括6幅图片和2个下载压缩包文件，制作爱家美食网站“美味靓汤”栏目的系列页面，效果如图4-26所示。,4.4 实训,3.5.2 实训二：制作爱家美食网站“美食推荐”页面 【实训综述】本实训通过制作一个图文并茂的网页，进一步加强读者对图文混排技术的理解与实战练习。 【实训展示】本实训中的素材包括2幅图片，制作如图3-65所示的爱家美食网站“美食推荐”页面。,3.5 实训,1简答超链接3种路径的区别和适用场合。 2简答创建文字超链接的3种方法。 3超链接目标的4种形式有什么区别？ 4使用外部超链接技术制作如图4-27所示的友情链接栏目。,4.5 习题,网页设计与制作教程 (第4版）,机械工业
42、出版社同名教材 配套电子教案,表格基本操作 XHTML表格 表格布局页面的综合应用 四 实训,第5章 表格,5.1.1 创建表格表格是页面布局极为有用的设计工具。在设计页面时，往往要利用表格来定位页面元素。使用表格可以导入表格化数据，设计页面分栏，定位页面上的文本和图像等。在Dreamweaver中插入表格的方法如下。 将光标放到要插入表格的位置。 执行下列操作之一： 执行“插入”“表格”命令。 单击插入面板“常用”分类中的“表格”按钮 。 按Ctrl+Alt+T组合键。,5.1 表格基本操作,5.1.2 设置表格属性当用户创建了一个表格后，可以通过属性面板进一步设置表格及单元格的属性，美化表
43、格的外观。 1设置表格属性 2设置单元格及行列属性,5.1 表格基本操作,5.1.3 表格的基本操作 1向表格添加内容 2选择表格元素 3调整表格及行列的大小 4添加及删除行和列 5复制、粘贴和删除单元格,5.1 表格基本操作,5.1.4 案例一：制作曙光大学网站就业信息网页 【案例综述】制作曙光大学网站就业信息栏目系列页面，使用表格技术制作就业信息展示页面。 【案例展示】本案例中的素材包括8幅图片，案例效果如图5-22所示。,5.1 表格基本操作,5.2.1 简单表格最简单的表格仅包括行和列。表格的标记为，行的标记为，表项的标记为。其中，是单标记，一行的结束是新一行的开始。表项内容写在与之间
44、。则必须成对使用。格式为：标题表头1 表头2 表头n表项1 表项2 表项n表项1 表项2 表项n ,5.2 XHTML表格,5.2.2 表格内文字的对齐方式在默认情况下，表项居于单元格的左端。可用列、行的属性设置表项数据在单元格中的位置。 1水平对齐表项数据的水平对齐用标记、和的align属性。align的属性值分别为：center（表项数据的居中）、left（左对齐）、right（右对齐）或justify（左右调整）。 2垂直对齐表项数据的垂直对齐用标记、和的valign属性实现。valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）或bas
45、eline（同行单元数据项位置一致）。,5.2 XHTML表格,5.2.3 表格在页面中的对齐方式前面介绍的是表格中的各个单元格的属性。现在，把表格作为一个整体，介绍表格在页面中的位置及背景的设置。与图像一样，表格在浏览器窗口中的位置也有三种：居左、居中和居右。使用标记的align属性。格式为：当表格位于页面的左侧或右侧时，文本填充在另一侧；当表格居中时，表格两边没有文本；当align属性缺省时，文本在表格的下面。,5.2 XHTML表格,5.2.4 表格的色彩和图像背景在、标记中，使用下面属性可以改变表格的背景和边框的色彩、添加背景图像，也可以为行和单元格改变色彩、添加背景图像。 bgcol
46、or：设置背景色彩。 background：设置背景图像。 bordercolor：设置表格边框的色彩。 bordercolorlight：设置表格边框亮部的色彩。 bordercolordark：设置表格边框暗部的色彩。 rules=“row,cols或none“：设置表内线的显示方法，none为无内线。,5.2 XHTML表格,5.2.5 案例二：分析曙光大学网站就业信息栏目主页代码本案例通过分析曙光大学网站就业信息网页的代码，使读者能够熟练掌握使用代码视图分析与设计表格。 打开前面制作的栏目主页work.html，切换到代码视图，下面就代码视图中关于表格标记的重要应用加以讲解。 1定义表
47、格时设置边框、单元格边距和单元格间距 2定义单元格的宽度与使用的样式 3定义单元格背景图像,5.2 XHTML表格,5.3.1 制作网站首页的技术要点网站首页一般都包含网站导航及重要的栏目，因此，制作首页时必然要大量地使用表格布局技术。下面讲述一下使用表格布局页面的一些技术要点。 1确定网页的宽度 2固定最外层表格的宽度 3单元格垂直对齐方式的设置 4不同栏目之间的表格布局时应预留一定的空隙 5页面中正文字体大小的设置,5.3 表格布局页面的综合应用,5.3.2 案例三：制作曙光大学网站首页 【案例综述】制作曙光大学网站首页，综合使用表格的基本操作和布局页面技术制作曙光大学首页展示页面。 【案
48、例展示】本案例的效果如图5-35所示。,5.3 表格布局页面的综合应用,5.4.1 实训一：制作爱家美食网站“美食图库”页面 【实训综述】读者在学习了使用表格布局页面的基础上，进一步加强比较复杂的表格布局练习，积累更多的表格布局经验。 【实训展示】本实训中的素材包括17幅图片，制作如图5-59所示的“美食图库”页面。,5.4 实训,5.4.2 实训二：制作爱家美食网站首页 【实训综述】本实训通过制作爱家美食网站首页，使读者亲自构思并实现页面布局，系统完整地掌握好本章讲解的所有内容。 【实训展示】本爱家美食网站首页的效果如图5-63所示。,5.4 实训,1简答设置表格单元格背景图像与在单元格中插入图像的区别。 2制作如图5-64所示的细线表格，该表格共有4行，每行单元格的高度从2个像素到5个像素逐渐增大。 3使用图像和超链接制作一个汽车展示的页面，主页面显示汽车各种车型的缩略图，单击缩略图后打开一个新页面，使用表格和放大的图片介绍选择汽车的评分，如图5-65所示。 4使用表格布局技术制作菜谱点击排行榜页面，单击菜谱链接后打开相应菜肴的制作方法介绍，如图5-66所示。,5.5 习题,网页设计与制作教程 (第4版）,
