1 / 86

网页设计基础 -- FrontPage 2003 篇

网页设计基础 -- FrontPage 2003 篇. 第七章 网页制作基础. 7.1 网页制作的基本概念 7.2 用 FrontPage 制作网页中的主要技术 7.3 站点的创建和发布. 7.1 网页制作的基本概念. 介绍网页、网站、超链接和网站制作的步骤等概念。 7.1.1 网页 7.1.2 网站 7.1.3 超链接 7.1.4 网站制作的步骤. 7.1.1 网页. 网页 又称为页面或 Web 页，是网站的基本信息单位，是一种可以在 www 网上传输，并被浏览器认识和翻译成页面显示出来的 HTML 格式文件。

abdul-bolton
Download Presentation

网页设计基础 -- FrontPage 2003 篇

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页设计基础 --FrontPage 2003篇

  2. 第七章 网页制作基础 • 7.1 网页制作的基本概念 • 7.2 用FrontPage 制作网页中的主要技术 • 7.3 站点的创建和发布

  3. 7.1 网页制作的基本概念 介绍网页、网站、超链接和网站制作的步骤等概念。 • 7.1.1 网页 • 7.1.2 网站 • 7.1.3 超链接 • 7.1.4 网站制作的步骤

  4. 7.1.1 网页 网页又称为页面或Web页，是网站的基本信息单位，是一种可以在www网上传输，并被浏览器认识和翻译成页面显示出来的HTML格式文件。 组成WWW的基本元素是网页。不同的网页通过超链接联系在一起，构成了WWW的纵横交织结构。WWW是由无数的Web服务器构成的，可以通过浏览器访问这些服务器上的网页

  5. 网页标题 网址 表单 导航条：相当于图书的目录，单击可跳转到指定的页面。 Logo：站点的标识。 浏览器窗口 超级链接：鼠标光标移到上面可显示为手形。 网页（续）

  6. 网页制作的概念 网页制作就是根据网页效果图，把它实现成浏览器中可以浏览的网页。FrontPage、Dreamweaver、GoLive等都是我们平常所知道的网页设计工具，但最知名和最常用的两套热门工具是微软公司的FrontPage和MacroMedia公司的Dreamweaver。

  7. 超文本标记语言HTML HTML的英文全名为HyperText Makeup Language，直译为超文本标记语言。它不是一种程序语言，而是一种描述文档结构的标记语言，它与操作系统平台的选择无关，只要有浏览器就可以运行HTML文档，显示网页内容。HTML语言使用了一些约定的标记，对 Web 页的内容、格式及 Web 页中的超连接进行描述，浏览器会自动根据这些标记，在屏幕上显示出相应的内容，而标记符号不会在屏幕上显示出来。 目前，较流行的浏览器有Netscape公司的Netscape Navigator和微软公司的Internel Explorer（即IE）。 HTML 文档本身是文本格式的，用任何一种文本编辑器都可以对它进行编辑。

  8. 超文本标记语言的标记 网页基本结构标记: • <HTML> ……</HTML>：是HTML文档中最基本的标记，不可缺少。<HTML>表示HTML文档的开始，</HTML>表示HTML文档的结束。 • <HEAD>……</HEAD>：是网页标题标记，可以提高网页文档的可读性，向浏览器提供一个信息。它可以忽略，但一般不予忽略。 • <TITLE>……</TITLE>：是网页名称标记，是<HEAD>……</HEAD>标记内不可缺少的标记。有<HEAD>……</HEAD>标记就一定要有<TITLE>……</TITLE>标记。 • <BODY>……</BODY>：是网页主题内容标记。其内包含了网页的全部内容，一般不可缺少。 • <BODY BGCOLOR=#RRGGBB>：使用<BODY>标记中的BCOLOR属性，可以设置网页的背景颜色。

  9. 超文本标记语言的标记（续） • <IMG>：是图像标记，用来加载GIF图像与动画。 • SRC：是依附于其他标记的一个属性，依附于<IMG>标记时，用来导入GIF图像与动画。其格式如：<IMG SRC=“GIF格式文件的目录与文件名”>。 • <BR>：是换行标记。表示以后的内容移到下一行。它是单向标记，没有</BR>。 • <B>……</B>：是粗体标记。可使其中的文字变为粗体。 • <H1>……</H1>：是正文的第一级标题标记。还有第二、三、四、五、六级标题标记，分别为<H2>……</H2>、<H3>……</H3>、<H4>……</H4>、<H5>……</H5>和<H6>……</H6>。级别越高，文字越小。 • <P>……</P>：是段落标记。它的作用是将其内的文字另起一段显示。段与段之间有一个空行。

  10. 超文本标记语言的举例 例如: <html> <head> <title>例1</title> </head> <body> <p> <font size="4"><b>第一行</b></font> <br> <i><font size="6">第二行</font></i> </p> </body> </html>

  11. 7.1.2 网站 通常把一系列逻辑上可以视为一个整体的页面叫做网站，或者说，网站就是一个相互链接的网页集合，它们可以共享。网站的概念是相对的，大可以到“雅虎网”和“新浪网”这样的大网站，页面多得无法计数，而且位于多台服务器上；小可以到一些个人网站，可能只有几个网页，仅在一台服务器上占据很小的空间。 网页与网页之间的关系并不是完全相同的。主页是网站中的一个特殊网页，它是在WWW上进入网站的第一个网页，其中包含指向其他网页的超链接。通常主页的名称是固定的，例如叫做index.htm或 index.html等。

  12. 7.1.3 超链接 当使用浏览器上网时，移动鼠标到页面某一地方变成手形时，这个地方就是一个超链接。 超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。含有超链接的文字通常以蓝字底线显示。 在一个网页中用来超链接的对象，可以是一段文本或者是一个图片.当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

  13. 7.1.4 网站制作的步骤

  14. 网站制作的步骤－－确定主题 • 网站的主题也就是网站的题材，是网站设计首先遇到的问题。 • 网站的定位要小，内容要精。 • 网站的题材最好选自己擅长或者喜爱的内容。 • 网站名称，是网站设计的一部分，而且是一个关键的要素，和现实生活中一样，网站名称是否正气、响亮、易记，这对网站的形象和宣传推广也有很大影响。

  15. 网站制作的步骤－－站点建设 1 搜集资料 2 网站的整体规划 进行网站的整体规划也就是组织网站的内容并设计其结构。 3 网页设计与制作 • 静态网页的设计与制作 • 为网页添加动态效果 注意：下载速度。 色彩的搭配。

  16. 网站制作的步骤－－测试与维护 • 当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性，达到最初的组织设计目标，实现所规定的功能，读者可以方便快速地寻找到所需的内容。网页的完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。 • 网站要注意经常维护更新内容，保持内容的新鲜 。

  17. 7.2 用FrontPage制作网页中的主要技术 简介用FrontPage 制作网页中的主要界面以及基本操作。 • 7.2.1 用FrontPage制作网页 • 7.2.2 表格 • 7.2.3 网页版面的设计 • 7.2.4 超链接的设计 • 7.2.5 使用交互式按钮来优化网页

  18. 7.2.1 用FrontPage制作网页 FrontPage 2003自问世以来，一直被公认为是最为优秀的网页制作软件之一。无论设计的是个人站点、还是企业站点，FrontPage 2003都是创建和管理网站的必备工具。 • FrontPage 2003的启动和退出 • FrontPage 2003的网页视图 • 网页的基本布局 • 网页中插入Web组件 • 网页中使用文本 • 网页中使用图片 • 设置网页属性 • 文档保存

  19. FrontPage 的启动与关闭 • FrontPage 2002的启动 • 选择【开始】/【程序】/【Microsoft FrontPage】菜单命令就会启动FrontPage 2002。 • 如果桌面上创建了FrontPage 2002的快捷方式，也可以通过双击FrontPage 2002的快捷方式图标来启动。 • FrontPage 2002的关闭 • 选择【文件】/【退出】/菜单命令。 • 单击FrontPage 2002窗口右上角的 按钮。 • 双击FrontPage 2002窗口左上角的 按钮。 • 单击FrontPage 2002窗口左上角的 按钮，选择下拉菜单中的【关闭】命令。 • 按Alt+F4键。

  20. FrontPage 新建界面 窗口界面主要由标题栏、菜单栏、工具栏、视图栏、工作区、任务栏、状态栏等部分组成。

  21. FrontPage 网页制作界面 窗口界面主要由菜单栏、工具栏、工作区、文档选择选项卡、快速标记选择器、网页视图选项卡等部分组成。

  22. 网页视图（编辑窗口） 可以用4种视图方式查看网页的内容： • 设计视图：允许用户查看文档在最终产品中显示的形式，并直接在该视图中编辑文本、图形和其他元素。 • 代码视图：可以直接查看、编写和编辑 HTML 标记。 • 拆分视图：对比设计视图和代码视图，审阅和编辑网页内容 。 • 预览视图：预览网页的显示结果（ Internet Explorer浏览器来显示当前编辑的网页效果）。

  23. 网页视图－－设计视图

  24. 网页视图－－代码视图

  25. 网页视图－－预览视图

  26. FrontPage 2003视图 • 网页视图 • 文件夹视图 • 报表视图 • 导航视图 • 超链接视图 • 任务视图

  27. FrontPage 2003视图－－网页视图 在网页视图下编辑一个网页时，可以使用“所见即所得”的工作方式。

  28. FrontPage 2003视图－－文件夹视图 该视图与资源管理器很相似，左边列出了站点的树状结构，右边列出了当前文件夹下的文件。

  29. FrontPage 2003视图－－报表视图 在视图中给出了当前站点的统计数据，包括“所有文件”、“图片”、“未链接的文件”、“链接的文件”、“外部超链接”与“内部超链接”等。

  30. FrontPage 2003视图－－导航视图 在导航视图的左边是文件夹列表，在右边以树形的方式显示导航的结构。

  31. FrontPage 2003视图－－超链接视图 右边显示超链接的关系，可视化显示了网页之间的超链接。

  32. FrontPage 2003视图－－任务视图 在该视图中单击鼠标右键，在弹出的快捷菜单中选择“新建任务”命令即可添加任务。

  33. FrontPage 2003基本制作 –选择网页类型

  34. 插入Web组件

  35. 插入Web组件（续） • 插入字幕 字幕又称为流动文字框，在网页中以流动的方式来突出显示某个文本内容。

  36. 插入Web组件（续） • 插入悬停按钮 • 插入普通悬停按钮 • 插入图片悬停按钮

  37. 插入Web组件（续） • 插入横幅广告 网页中的横幅广告类似于幻灯片的放映，它按照事先设置的时间间隔将一组图片依次显示出来。同时还可以为横幅广告插入超链接，当访问者单击这些图片时就可以打开相应的链接内容。

  38. 插入Web组件（续） • 插入站点计数器 无论是个人主页还是公司网站都希望知道有多少人次访问过自己的网站，这时就需要用到站点计数器。 FrontPage内置了多种样式的站点计数器，除此之外还可以使用图片自定义站点计数器。

  39. FrontPage 2003基本制作 –使用文本 • 设置段落格式 • 插入项目符号和编号 • 插入网页横幅 • 插入水平线 • 插入时间标记

  40. 右对齐 减少缩进量 左对齐 编号 两端对齐 项目符号 增加缩进量 居中对齐 使用文本（续） • 设置段落格式 如果要对网页中的文本内容进行对齐方式、缩进量、段落格式的设置可以通过格式工具栏进行。

  41. 使用文本（续） • 插入项目符号和编号 使用自动编号与项目符号等段落格式设置文档，可以使其结构清晰、一目了然。

  42. 使用文本（续） • 插入网页横幅 若想快速为网页插入标题，可使用网页横幅，但单独的网页无法插入网页横幅。

  43. 使用文本（续） • 插入水平线 在网页制作中，常常需要插入水平线，用来分隔文本或突出重点。

  44. 使用文本（续） • 插入时间标记 时间标记是用来显示上次编辑或最近一次修改网页的时间，访问者可通过时间标记来了解站点上的信息在上次访问之后是否更新过。

  45. FrontPage 2003基本制作 –使用图片 • 插入图片 插入剪贴画；导入外部图片 • 设置图片属性 设置图片外观属性 ；设置图片常规属性 ；设置图片视频属性 • 对图片进行处理 使用图片工具栏编辑图片 ；在图片上添加文本；创建缩略图

  46. 使用图片（续） • 插入剪贴画 Office XP提供了一个剪辑库，其中包含了许多剪贴画，用户可以将它们插入到页面中应用。

  47. 使用图片（续） • 导入外部图片 在实际应用中使用最多的还是导入的外部图片 。

  48. 设置图片格式 长方形热点 增加对比度 自动缩略图 水 平 翻 转 子 重 新 取 样 多边形热点 增 加 亮 度 向 左 旋 转 插入文件中的图片 还 原 子 上 移 一 层 裁 剪 颜 色 文 本 下 移 一 层 绝 对 定 位 线 型 降低对比度 垂 直 翻 转 设置透明色 降 低 亮 度 突出显示热点 向 右 旋 转 圆 形 热 点 子 凹 凸 效 果 选 择 使用图片工具栏编辑图片 使用图片工具栏就可以对图片进行亮度与对比度的调整，还可对图片进行裁剪、旋转与翻转等操作。

  49. 使用图片工具栏编辑图片（续） • 调整亮度 适当增加亮度 适当减小亮度

  50. 使用图片工具栏编辑图片（续） • 调整对比度 减少适当对比度 增加适当对比度

More Related