第1章网页基础
合集下载
《网页设计基础》PPT课件
1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage
网页制作基础
常见网站由域名（domain name 俗称网址或 域名）、网站源程序和网站空间三部分构成。
域名俗称网址； 网站源程序则放在网站空间里面，表现为网站前 台和网站后台； 网站空间由专门的独立服务器或租用的虚拟主机 承担。
2. 网站分类
根据网站所用编程语言分类：例如asp网站、 php网站、jsp网站、Asp. net网站等； 根据网站的用途分类：例如门户网站（综合网 站）、行业网站、娱乐网站等； 根据网站的功能分类：例如单一网站（企业网 站）、多功能网站（网络商城）等；
常见的Web浏览器软件有：IE、Firefox、 Opera和Netcape等。 不同Web浏览器软件所支持的网页格式有所区 别，所以WWW服务器提供网页信息时，要考虑客 户端软件的支持情况。
1.2.4 W3C
W3C是英文 World Wide Web Consortium 的缩写，中文意思是W3C理事会或万维网联盟。 W3C于1994年10月在麻省理工学院计算机科学实 验室成立。创建者是万维网的发明者Tim BernersLee。 W3C组织是对网络标准制定的一个非赢利组织， 像HTML、XHTML、CSS、XML的标准就是由 W3C来定制。
HTML是一种规范，一种标准，它通过标记符 号来标记要显示的网页中的各个部分。网页文件本 身是一种文本文件，通过在文本文件中添加标记符， 可以告诉浏览器如何显示其中的内容（如：文字如 何处理，画面如何安排，图片如何显示等）。
浏览器按顺序阅读网页文件，然后根据标记符 解释和显示其标记的内容，对书写出错的标记将不 指出其错误，且不停止其解释执行过程，编制者只 能通过显示效果来分析出错原因和出错部位。但需 要注意的是，对于不同的浏览器，对同一标记符可 能会有不完全相同的解释，因而可能会有不同的显 示效果。
《网页设计与制作》习题及答案
第1章网页设计基础1.网页文件不包括 ( D )A HTML文件 B多媒体文件 C图像文件 D Dos文件2.网页构成元素按照元素划分为（ABCD ）A 文本B 图像 C超链接 D音频和视频3. HTML文档结构中表示头部信息的（ B）A < body > < /body > B<head></head> c <html></html> D<title></title>4.在HTML文档中，使文本内容强制换行的标签是（B）A<hr> B<br> C<pre> D<hn>5.以下哪个标签语言符合HTML的语法规范（D）A<img src=pic.jpg width=150 height=200/>B<p><div>文字加粗</p></div>C<p align=center>D<hr width=”400” color=”#000000”>6．不属于HTML标记的是（ C ）A.<html>B.<head>C.<color>D.<body>7．为了标记一个HTML文件，应该使用的HTML标记是（ C ）A.<p></p>B.<body></body>C.<html></html >D.<title></ title>二填空1.网页分为（静态网页）和（动态网页）两种类型。
2.HTML中的所有标签都是有一对（<>）围住。
3.HTML网页的标题是通过（<title></title>）标签显示的。
4.（<hr>）是水平线标签，可以在页面生成一条水平线。
网页制作基础知识
4．制作工具的选择
可使用FrontPage、DreamWeaver等网页制作软件。在本案例中，将使用 DreamWeaver MX进行“网页制作学习园地”网站的创建。
1.2 理论知识
1.2.1 HTML语言
在Web的发展历史中，HTML技术是优秀而核心的Web技术之一。目前计算机上包含互 联网在内的大部分应用程序在交互操作上的核心原理都来自于HTML的链接设计思想。
<h#>...</h#> <b>...</b> <i>...</i> <u>...</u> <sup>...</sup> <sub>...</sub> <tt>...</tt> <cite>...</cite>
<em>...</em>
<address>...</address> <strong>...</strong> <pre>...</pre>
<font size=" ">
<font face=" ">
<font color=" ">
设置文字的颜色
2 . 文本样式标记
文本样式标记用于设置网页中文字格式化为特殊的形式，如加粗、倾斜等。
文本样式标记如下表：
标 记 说 明
定义标题级别，黑体字显示。"#"=1～6。<h1>显示的字号最大、<h6>最小。 设置粗体字 设置斜体字 设置下划线 设置文本为上标格式 设置文本为下标格式 设置打字机风格字体的文本 以引用或参考的形式格式化文本，通常显示为斜体。
网页学习1-2
3. 网站所有文件所要介绍的全部内容做一个类似书籍目录的索引。主页上 的链接对应到一级页面，一级页面里的链接对应于二级页面，依次类推
4. 加入一些交互功能，如留言本、问卷调查、下载、搜索等 设计主页应注意的问题 主页上可供选择的链接不可太少也不可太多，太少会让访问者觉得没有 意思，太多又会吓倒访问者。 主页文件的大小一般不超过200K，否则打开主页的时间过长，会让浏览 者失去耐心的。 主页的在800*600的普通分辨率下应不出现水平滚动条。 主页的风格应与网站中的其他网页一致。
6.Flash Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是 一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合 在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等 领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。 Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。 7.Fireworks Fireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生 了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件，同时 也是专业的网页图形设计及制作的解决方案。 作为一款为网络设计而开发的图像处理软件，Fireworks还能够自动切割图像、 生成光 标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和 一个相当完美的 网络图像生成器。
2.FrontPage FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网 页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法， 简化了大量工作。 FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极 大的方便，Microsoft公司将FrontPage封装入Office之中，成为Office家族的一员， 使之功能更为强大。
《网页设计与制作》(第二版)电子课件第一章
（1）创意并不是天才的灵感，
而是思考的结果
根据美国广告学教授詹姆斯的研究，创意思考的过 程可分为五个阶段： 准备期 ——研究所搜集的资料，根据经验，启发 新创意； 孵化期 ——将资料咀嚼消化，使意识自由发展， 任意结合； 启示期 ——意识发展并结合，产生创意； 验证期 ——将产生的创意讨论修正；
（4）其他注意方面
①不要使用中文目录名，使用中文目录名可能 对网址的正确显示造成困难。 ②不要使用过长的目录名，太长的目录名不便 于记忆。 ③尽量使用意义明确的目录名，你可以用Flash、 Dhtml、Javascript来建立目录名，也可以用1， 2，3来建立目录名，但是哪一个更明确，更 便于记忆和管理呢?显然是前者。
现实生活中的Logo
（2）设计网站的标准色彩
“标准色彩”是指能体现网站形象和延伸内涵的色彩。 例如：IBM的深蓝色，肯德基的红色条形，Windows 视窗标志上的红蓝黄绿色块，都使我们觉得很贴切， 很和谐。 标准色彩要用于网站的标志、标题、主菜单和主色 块，给人以整体统一的感觉。一般来说，一个网站的 标准色彩不超过3种 ，太多则让人眼花缭乱
1.3网站建立的一般流程
一般来说，网页制作可分为三个阶段： 1．前期工作准备阶段：在此阶段主要完成以下几 个方面的工作：拟定网页主题、搜集相关资料、 规划网页内容、绘制结构草图。 2．中期制作阶段：在此阶段主要利用各种网页制 作工具，开始制作网页，并不断地进行上传与测 试，直到最后制作完毕。 3．后期维护阶段：网页制作完成后，可进行发布 和推广应用。根据需要，对网页进行更新与维护。
栏目的实质是一个网站的大纲索引，索引应该 将网站的主体明确显示出来
一般的网站栏目安排要注意以下几方面： （1）记住一定要紧扣你的主题即将你的主题按 一定的方法分类并将它们作为网站的主题栏目 （2）设立一个最近更新或网站指南栏目 （3）设立一个可以双向交流的栏目 （4）设立一个下载或常见问题回答栏目
《网页设计与制作》笔记_学习笔记
《网页设计与制作》笔记第一章：网页设计基础1.1网页设计的定义与重要性1.2网页设计的历史与发展1.3设计原则与最佳实践1.4用户体验的基本概念第二章：网页设计工具与技术2.1设计软件介绍（如Photoshop、Sketch）2.2前端开发工具（如HTML、CSS、JavaScript）2.3响应式设计与框架（如Bootstrap、Foundation）2.4版本控制与协作工具（如Git、GitHub）第三章：网页布局与结构3.1网页布局的基本概念3.2网格系统与布局设计3.3导航设计与信息架构3.4模块化设计与组件化开发第四章：色彩与字体选择4.1色彩理论与配色技巧4.2字体的选择与排版4.3色彩与品牌形象4.4可访问性与色彩使用第五章：网页内容与互动5.1内容策略与信息呈现5.2图像与多媒体的使用5.3互动设计与用户反馈5.4SEO基础与内容优化第六章：网页测试与上线6.1测试类型与测试工具6.2性能优化与加载速度6.3上线流程与维护建议6.4数据分析与用户行为追踪第1章：网页设计基础网页设计的定义与重要性网页设计是指为网站创建和布局视觉内容的过程。
这包括网页的整体外观、结构和交互功能。
网页设计不仅涉及视觉元素的排版和配色，还包括用户如何与网页互动。
一个好的网页设计能够提升用户的体验，增加网站的访问量和转化率。
重要性：1.吸引用户：优秀的网页设计能够第一时间吸引用户的注意，提高用户的留存率。
2.增加可用性：良好的设计帮助用户更容易找到他们所需的信息，减少用户的挫败感。
3.提升品牌形象：专业的网页设计能够增强品牌的可信度和专业形象。
4.搜索引擎优化：设计良好的网页更容易被搜索引擎抓取，从而提升网站在搜索结果中的排名。
考试要点：网页设计的定义及其组成部分网页设计对用户体验和品牌形象的影响网页设计在市场营销中的作用网页设计的历史与发展网页设计的起源可以追溯到20世纪90年代初。
当时网页主要是以文本为主，简单的超链接连接不同的信息。
第1章网页设计基础
1.2 Web设计基础
3. 网页设计一致性 一致性的网页设计原则使得访问者容易理解站点的结构，否则可能导致访问者陷入困惑。对优秀的 Web站点分析可以发现，优秀的网页虽然各有特色，但都遵守最基本的原则，即保持站点内部页 面之间的一致性。 要保持一致性，可以从页面的结构排版入手：
通过定义一致的页面模板，各个页面使用相同的页边距。 文本和图形之间保持相同的间距。 主要图形、标题或符号旁边留下相同的空白。 如果在第一页的顶部放置了公司标志，那么在其他各页面都放上这一标志，如果使用图标导航，
1.3 网页布局
1.3.2 布局设计类型 网页布局大致可分为“国”字型、“匡”字形型、标题正文型、框架型、封面型、Flash型、变化型等。
思考：1. 网易网站的布局设计属于哪种类型？ 2. 网络传播学院的网站首页布局设计属于哪种类型？
1.3 网页布局
1.3.3 布局设计元素 在网页文件中，会涉及很多的页面元素。如何将这些页面元素有机地组合起来，达到满意的视觉效
随着浏览器版本的标准化和制作工具的完善，该布局技术原来的缺点已经逐渐被克服，建议使用。
1.3 网页布局
3. 框架布局 框架由于不能进行精确的元素定位，因此不能独立完成页面的布局，它常常和表格配合使用。先用
框架将页面划分为几个区域，然后再用表格实现各区域的精确局部。常用在网站系统的后台页面设计 中。由于在HTML 5标准中已经不被推荐，所以该布局不建议使用。
1.3 网页布局
1.3.1 布局设计原则 通常可以从以下几个大的方面考虑布局的基本设计原则。 （1）网页布局的内容应来源于需求，栏目的重要程度决定了网页布局的形式。网页中要展示的内容必 须是依据站点的主要栏目进行规划的。同时可以将所要表达的相近的栏目集中在一个区域显现，构成 一种群体效应。 （2）网页布局应区分栏目模块的重要程度。分开栏目的主次性，重要栏目以顶部、左侧排列，次要的 栏目以底部、右侧排列。即重要信息、重要功能模块“靠上靠左”原则。 （3）网页布局必须尊重用户习惯。不仅要考虑不同类型用户的使用习惯差异，还要考虑中、英文等不 同语种用户的浏览习惯。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
北京科技大学远程教育课件
4、HTML 的基本工作原理
HTML（超文本标记语言）是表示网页的一 种标准，它通过标记符来标记要显示网页的 各个部分。 浏览者通过浏览器访问 Web 服务器上的网 页，而网页的本质是 HTML 源代码通过在网 页中添加标记符，可以告诉浏览器如何显示 网页，即确定内容的格式。浏览器按顺序阅 读网页文件（HTML文件），然后根据内容 周围的HTML标记符解释和显示各种内容。
北京科技大学远程教育课件
演示——属性的作用
北京科技大学远程教育课件
Web页的基本结构
1. 2. 3.
一个 Web 页实际上对应于一个 HTML 文 件，HTML 文件以 .htm 或 .html 为扩展 名。 最基本的HTML文档包括： HTML标记<HTML></HTML> 首部标记<HEAD>和</HEAD> 正文标记<BODY></BODY>。
北京科技大学远程教育课件
HEAD标记符
首部标记<HEAD>和</HEAD>位于 Web 页的开头，是HTML文件头标记符，用来描 述HTML首部的内容，说明文档的整体信息 。所有首部信息并不会出现在利用WWW浏 览器所看到的窗体中。而是提供一些与 Web 页有关的特定信息。 <HEAD><／HEAD> 通常与某些标记符一起使用，如<TITLE>< ／TITLE>标记符。
北京科技大学远程教育课件
演示——设置网页背景颜色
北京科技大学远程教育课件
背景图案
使用 BODY 标记符的 background 属性可以 设置背景图案。 HTML语句为： <BODY background=“网页背景图案的地址 ”>
北京科技大学远程教育课件
演示——设置网页背景图案
北京科技大学远程教育课件
北京科技大学远程教育课件
显示特殊字符
例如，要在 Web 页中显示以下内容，则需使 用参考字符：“1<2” <BODY>1<2</BODY>
北京科技大学远程教育课件
演示——特殊字符的显示
北京科技大学远程教育课件
Part 3
网页制作工具
北京科技大学远程教育课件
网页编辑工具
常用网页编辑器
网站设计
设计页面的布局
– 页面设计草图 – 导航系统的设计
»设计原则：通过最少的点击次数得到最多的信息量。 »保持风格一致，提供页面的位置信息，提供返回上级 页面的链接
北京科技大学远程教育课件
网站设计
小节
Web
北京科技大学远程教育课件
背景颜色
在<BODY>标记符中使用bgcolor属性可以 为网页设置背景颜色， 设置正文和超链接颜色时，可以使用BODY标 记符的text、link、vlink和alink属性。其中， text属性用于设置正文的颜色；link属性用于 设置未被访问的超链接的颜色；vlink用于设 置已被访问过的超链接的颜色；alink用于设 置活动超链接（即当前选定的超链接）的颜 色。
北京科技大学远程教育课件
静态网页与动态网页
所谓动态网页，是指根据用户的请求，由服务器动 态生成的网页。例如，ASP网页，PHP网页，JSP 网页。 当 Web 服务器接收到对动态页的请求时，它将该 页传递给应用程序服务器，它读取页上的代码，根 据代码中的指令完成页，然后将代码从页上删除。 所得的结果将是一个静态页，应用程序服务器将该 页传递回 Web 服务器，然后 Web 服务器将该页 发送到请求浏览器。该过程如图所示。
学习重点
HTML语言的语法规则，网页标记符和属性。
学习难点
网页的基本原理；
北京科技大学远程教育课件
Part 1 Internet基础与 WWW
北京科技大学远程教育课件
1、Internet 与 WWW
Internet是全球最大的、开放的、由众多网 络互连而成的计算机互联网，中文译名为“ 国际互连网”或者“因特网”。简单地说， Internet就是将世界各地的计算机网络、主 机和个人计算机通过通信设施和通信协议（ 基于TCP/IP协议簇）互相连接起来所构成 的互联网络系统。
–
北京科技大学远程教育课件
素材处理与创作工具
多媒体制作工具
特效制作工具
– Anfy – Cool 3D – GIF Animator
Flash – Director – Authorware
–
北京科技大学远程教育课件
Part 4
网站开发流程
北京科技大学远程教育课件
概述
首先定义开发网站的目的；接下来对网站的 外观进行设计；然后进行实际页面的制作； 然后对所制作的网站进行测试，以确保它符 合最初设定的目标；最后是将网站发布。在 将网站发布后还需要有维护工作，以便及时 更新网站内容。
北京科技大学远程教育课件
静态网页与动态网页
应用程序服务器使用户能够使用服务器端的 资源（如数据库）。 动态页可以指示应用程序服务器从数据库中 提取数据并将其插入页的 HTML 中。 例如 ，搜索页面，电子商务网站等。
北京科技大学远程教育课件
Part 2
HTML基础
北京科技大学远程教育课件
标记符基础
北京科技大学远程教育课件
HEAD标记符
首部标记中的内容也用相应的标记符括起来 。例如，样式表（CSS）定义位于 <STYLE>和</STYLE>之间；脚本定义位 于<SCRIPT></SCRIPT>之间。
北京科技大学远程教育课件
TITLE 标记符
在首部标记符中，最基本、最常用的标记符 是标题标记<TITLE>和</TITLE>，用于定 义网页的标题。 当网页在浏览器中显示时，网页标题将在浏 览器窗口的标题栏中显示。
北京科技大学远程教育课件
HTML标记符
<HTML>和</HTML> 是Web页的第一个和最后一 个标记符， <HTML>处于文档的最前端， 表示文档的开始，即浏览器从<HTML>开始 解释。而<／HTML>则位于文件的最后一行 ， Web 页的其他所有内容都位于这两个标记 符之间。这两个标记告诉浏览器或其他阅读 该页的程序，此文件为一个Web页。
北京科技大学远程教育课件
Internet 示意图
北京科技大学远程教育课件
1、 Internet 与 WWW
Internet 提供的服务：
– – – – – – – – –
WWW信息的获取与发布服务（网上冲浪） 电子邮件服务（Email） 文件传输（FTP） 网络游戏 即时信息传递（QQ/MSN）网络电话 电子商务 远程登录（Telnet） 电子公告板 Internet的其它应用
北京科技大学远程教育课件
<HTML> <HEAD> <TITLE> </TITLE> …… 综上所述，一个不包含任何内容的基本 </HEAD> 页文件如下所示： <BODY> <HTML> …… <HEAD><TITLE></TITLE></HEAD> …… <BODY></BODY> </BODY> </HTML> </HTML>
– Macromedia Dreamweaver – Microsoft FrontPage
北京科技大学远程教育课件
素材处理与创作工具
图像浏览与处理
– ACDSee – Photoshop – Fireworks
矢量图创作工具
FreeHand – CorelDraw – Illustrator
北京科技大学远程教育课件
2、WWW 与浏览器
Web的特性 （1）Web是基于超文本语言的； （2）Web是交互的； （3）Web的可设计性； （4）Web的局限性；
北京科技大学远程教育课件
2、WWW 与浏览器
北京科技大学远程教育课件
3、网站与主页
通过超链接连接起来的一系列逻辑上可以视为一个整体一系 列页面的有机集合称为网站（Web Site或Site）。 作为一个组织或个人在 WWW（或其他Web）上开始点的 页面称为主页（Homepage）。“主页”是网站中的一个特 殊页面，它是作为一个组织或个人在 WWW 上开始的页面 ，通常也称为首页，主页中通常包括指向其他相关页面或其 他主页的超链接。 主页是进入一个网站的门户，是整个网站的第一页。通常主 页名称是固定的，例如叫做 index.htm 或 index.html 等 （.htm 或 .html 后缀表示 HTML 文档）。
北京科技大学远程教育课件
2、WWW 与浏览器
WWW是由遍布在 Internet 上的称为 Web 服务器 的计算机组成，它将不同的信息资源有机地组织到一 起，通过浏览器进行浏览。从技术角度上说，WWW 是一种软件，是Internet上那些支持WWW协议和 超文本传输协议HTTP的客户机与服务器的集合，透 过它可以存取世界各地的超媒体文件，包括文字、图 形、声音、动画、资料库及各式各样的内容。 WWW起源于1989年3月，由欧洲量子物理实验室 研究发展起来的主从结构分布式超媒体系统，1990 年底第一套软件正式投入使用。
北京科技大学远程教育课件
4、HTML 的基本工作原理
HTML（超文本标记语言）是表示网页的一 种标准，它通过标记符来标记要显示网页的 各个部分。 浏览者通过浏览器访问 Web 服务器上的网 页，而网页的本质是 HTML 源代码通过在网 页中添加标记符，可以告诉浏览器如何显示 网页，即确定内容的格式。浏览器按顺序阅 读网页文件（HTML文件），然后根据内容 周围的HTML标记符解释和显示各种内容。
北京科技大学远程教育课件
演示——属性的作用
北京科技大学远程教育课件
Web页的基本结构
1. 2. 3.
一个 Web 页实际上对应于一个 HTML 文 件，HTML 文件以 .htm 或 .html 为扩展 名。 最基本的HTML文档包括： HTML标记<HTML></HTML> 首部标记<HEAD>和</HEAD> 正文标记<BODY></BODY>。
北京科技大学远程教育课件
HEAD标记符
首部标记<HEAD>和</HEAD>位于 Web 页的开头，是HTML文件头标记符，用来描 述HTML首部的内容，说明文档的整体信息 。所有首部信息并不会出现在利用WWW浏 览器所看到的窗体中。而是提供一些与 Web 页有关的特定信息。 <HEAD><／HEAD> 通常与某些标记符一起使用，如<TITLE>< ／TITLE>标记符。
北京科技大学远程教育课件
演示——设置网页背景颜色
北京科技大学远程教育课件
背景图案
使用 BODY 标记符的 background 属性可以 设置背景图案。 HTML语句为： <BODY background=“网页背景图案的地址 ”>
北京科技大学远程教育课件
演示——设置网页背景图案
北京科技大学远程教育课件
北京科技大学远程教育课件
显示特殊字符
例如，要在 Web 页中显示以下内容，则需使 用参考字符：“1<2” <BODY>1<2</BODY>
北京科技大学远程教育课件
演示——特殊字符的显示
北京科技大学远程教育课件
Part 3
网页制作工具
北京科技大学远程教育课件
网页编辑工具
常用网页编辑器
网站设计
设计页面的布局
– 页面设计草图 – 导航系统的设计
»设计原则：通过最少的点击次数得到最多的信息量。 »保持风格一致，提供页面的位置信息，提供返回上级 页面的链接
北京科技大学远程教育课件
网站设计
小节
Web
北京科技大学远程教育课件
背景颜色
在<BODY>标记符中使用bgcolor属性可以 为网页设置背景颜色， 设置正文和超链接颜色时，可以使用BODY标 记符的text、link、vlink和alink属性。其中， text属性用于设置正文的颜色；link属性用于 设置未被访问的超链接的颜色；vlink用于设 置已被访问过的超链接的颜色；alink用于设 置活动超链接（即当前选定的超链接）的颜 色。
北京科技大学远程教育课件
静态网页与动态网页
所谓动态网页，是指根据用户的请求，由服务器动 态生成的网页。例如，ASP网页，PHP网页，JSP 网页。 当 Web 服务器接收到对动态页的请求时，它将该 页传递给应用程序服务器，它读取页上的代码，根 据代码中的指令完成页，然后将代码从页上删除。 所得的结果将是一个静态页，应用程序服务器将该 页传递回 Web 服务器，然后 Web 服务器将该页 发送到请求浏览器。该过程如图所示。
学习重点
HTML语言的语法规则，网页标记符和属性。
学习难点
网页的基本原理；
北京科技大学远程教育课件
Part 1 Internet基础与 WWW
北京科技大学远程教育课件
1、Internet 与 WWW
Internet是全球最大的、开放的、由众多网 络互连而成的计算机互联网，中文译名为“ 国际互连网”或者“因特网”。简单地说， Internet就是将世界各地的计算机网络、主 机和个人计算机通过通信设施和通信协议（ 基于TCP/IP协议簇）互相连接起来所构成 的互联网络系统。
–
北京科技大学远程教育课件
素材处理与创作工具
多媒体制作工具
特效制作工具
– Anfy – Cool 3D – GIF Animator
Flash – Director – Authorware
–
北京科技大学远程教育课件
Part 4
网站开发流程
北京科技大学远程教育课件
概述
首先定义开发网站的目的；接下来对网站的 外观进行设计；然后进行实际页面的制作； 然后对所制作的网站进行测试，以确保它符 合最初设定的目标；最后是将网站发布。在 将网站发布后还需要有维护工作，以便及时 更新网站内容。
北京科技大学远程教育课件
静态网页与动态网页
应用程序服务器使用户能够使用服务器端的 资源（如数据库）。 动态页可以指示应用程序服务器从数据库中 提取数据并将其插入页的 HTML 中。 例如 ，搜索页面，电子商务网站等。
北京科技大学远程教育课件
Part 2
HTML基础
北京科技大学远程教育课件
标记符基础
北京科技大学远程教育课件
HEAD标记符
首部标记中的内容也用相应的标记符括起来 。例如，样式表（CSS）定义位于 <STYLE>和</STYLE>之间；脚本定义位 于<SCRIPT></SCRIPT>之间。
北京科技大学远程教育课件
TITLE 标记符
在首部标记符中，最基本、最常用的标记符 是标题标记<TITLE>和</TITLE>，用于定 义网页的标题。 当网页在浏览器中显示时，网页标题将在浏 览器窗口的标题栏中显示。
北京科技大学远程教育课件
HTML标记符
<HTML>和</HTML> 是Web页的第一个和最后一 个标记符， <HTML>处于文档的最前端， 表示文档的开始，即浏览器从<HTML>开始 解释。而<／HTML>则位于文件的最后一行 ， Web 页的其他所有内容都位于这两个标记 符之间。这两个标记告诉浏览器或其他阅读 该页的程序，此文件为一个Web页。
北京科技大学远程教育课件
Internet 示意图
北京科技大学远程教育课件
1、 Internet 与 WWW
Internet 提供的服务：
– – – – – – – – –
WWW信息的获取与发布服务（网上冲浪） 电子邮件服务（Email） 文件传输（FTP） 网络游戏 即时信息传递（QQ/MSN）网络电话 电子商务 远程登录（Telnet） 电子公告板 Internet的其它应用
北京科技大学远程教育课件
<HTML> <HEAD> <TITLE> </TITLE> …… 综上所述，一个不包含任何内容的基本 </HEAD> 页文件如下所示： <BODY> <HTML> …… <HEAD><TITLE></TITLE></HEAD> …… <BODY></BODY> </BODY> </HTML> </HTML>
– Macromedia Dreamweaver – Microsoft FrontPage
北京科技大学远程教育课件
素材处理与创作工具
图像浏览与处理
– ACDSee – Photoshop – Fireworks
矢量图创作工具
FreeHand – CorelDraw – Illustrator
北京科技大学远程教育课件
2、WWW 与浏览器
Web的特性 （1）Web是基于超文本语言的； （2）Web是交互的； （3）Web的可设计性； （4）Web的局限性；
北京科技大学远程教育课件
2、WWW 与浏览器
北京科技大学远程教育课件
3、网站与主页
通过超链接连接起来的一系列逻辑上可以视为一个整体一系 列页面的有机集合称为网站（Web Site或Site）。 作为一个组织或个人在 WWW（或其他Web）上开始点的 页面称为主页（Homepage）。“主页”是网站中的一个特 殊页面，它是作为一个组织或个人在 WWW 上开始的页面 ，通常也称为首页，主页中通常包括指向其他相关页面或其 他主页的超链接。 主页是进入一个网站的门户，是整个网站的第一页。通常主 页名称是固定的，例如叫做 index.htm 或 index.html 等 （.htm 或 .html 后缀表示 HTML 文档）。
北京科技大学远程教育课件
2、WWW 与浏览器
WWW是由遍布在 Internet 上的称为 Web 服务器 的计算机组成，它将不同的信息资源有机地组织到一 起，通过浏览器进行浏览。从技术角度上说，WWW 是一种软件，是Internet上那些支持WWW协议和 超文本传输协议HTTP的客户机与服务器的集合，透 过它可以存取世界各地的超媒体文件，包括文字、图 形、声音、动画、资料库及各式各样的内容。 WWW起源于1989年3月，由欧洲量子物理实验室 研究发展起来的主从结构分布式超媒体系统，1990 年底第一套软件正式投入使用。
北京科技大学远程教育课件