计算机基础之网页设计.
计算机基础教学中《网页设计》课程的教学实践与改革
《 网页设计》 是近年来计算机专 业领域发展最快 和应 用最广泛 的课 程之一 ， 当今社会急需培养掌握计算 机网页设计 、 面向不同应用层次 的 专业人才 。因此 ， 在成为一 门计算机 基础教育 课程 以来 ， 受到学生 的普 遍欢迎 。 但 是 ， 在教学过程 中， 课程还存在一些 问题 ： 该 首先 ，网页设 《 计》 作为一 门集技 术 、 资源 、 美学 为一 体的综合性很 强的设计课 程， 需要 涉 及 色 彩 知 识 及构 图 知 识 方 面 的 知 识 、 握 语 言 ＿具 （ 用 Ｈ ＭＬ语 言 掌 Ｉ 使 二 Ｔ 编写 网页脚本）及所见 即所得 的软 件制作工具和具 备熟练应用 图片及 动画处理方面软件进行素材处理能 力。因此 ， 学生普遍感 觉内容多 ， 易 学难记 ， 以掌握 。其次， 难 汁算机教 学的内容不断扩展 、 增多 ， 南于 课 佃 时 的限制 ， 教师不可能在短时问 内把 所有内容讲授完 毕 ， 导致学生觉得 想学 又学不懂 ， 达不到系统学 习的 目的； 第 ， 然瑚页设计 方面 的网 虽 络资源在 网上 比比皆是 ， 但是 由于网络设计 内容 比较 庞大 ， 而且知识点 相对 比较杂乱 ，对于初学者 往往感 到无从下手 ，而且 容易产生畏难 心 理 ； 四， 第 网页制作技术作为一 门新 的技术发展迅速 ， 新的知识 、 技巧还 在 不 断 涌 现 ， 材 的更 新 速 度 跟 不 上 软 件 的 更 新 速 度 ， 此 一 方 面 需 要 教 因 由任 课 教 师 将 网 页 设 汁 的最 新 、 实 用 的 技 术 引用 到课 堂 上 去 ， 一 方 最 另 面还需要培养学生 自己利用 网络 资源学习新知识 的能力。总之 ， 网页 《 设 汁》 为一 门综合性“ ” 作 大 课程 ， 作为计算机相关 专业 都很难做到 面面 俱到 ，对于针对非计算机 专业 的计算机基础教学 来说 ，课时就更加有 限， 但是如果每个知识点均 只让 学生学习到皮 毛， 想要 面丽俱到结果 可 能 只 是 面 面 不 到 ， 法 对 网页 要 素 进 行 系 统 学 习 ， 么这 门 课 不 但 没 有 无 那 让 学 生 学 到 知 识 ， 会 扼 杀 学 生 学 习 这 门课 的学 习 兴 趣 。 还 针 对 以 上 所 提 及 的 问 题 ，本 人 通 过 与 其 他 任 课 教 师 的 交 流 以及 在 近年来从教的经验认为 ：在本 门课 中要 注意到非计算 机专业的学生学 习该课 程与计算机专 业的学生 区别 ， 需要 从教学 内容 、 教学方 法 、 实验 环节 和网站建设等 多方面对本课 程进行 了积极的创新 和改革尝 试 ， 最 终实现提高学生 自主创新能力培养 的要求 ， 提高教学质量 的 目标 。
No1 网页设计基础知识
基本术语扫盲 网站的规划 DW CS4工作环境
HTML语言概览
HTML HTTP
CSS WebSite
JavaScript WebPage
URL WWW
FTP
DNS
DOM
HyperText
Markup Language 超文本标记语言
专门用于在Web上传递信息
或
index.html
◦ <HTML> <HEAD>
<title></title> <meta>
</HEAD> <BODY>
HTML 文件的正文
</BODY> ◦ </HTML>
<html>...</html> <head>...</head> <body>...</body> 是HTML语言的基本部分 元素总是成对出现，每一对元素一般都有一 个开始的标记（如<body>），也有一个结 束的标记（如</body>）。 元素的标记要用一对尖括号括起来，并且结 束的标记总是在开始的标记前加一个斜杠。
插入面板提供“常用”等8组面板视图，可以快 速插入各种对象。
（注意） 有些命令按钮旁 边有黑色小箭头，如 图像按钮 ，则该类 别下还包含子菜单项， 直接单击这类按钮会 执行该按钮的默认操 作，默认操作即最近 一次使用该按钮时的 选项。
属性面板用于显示或者修改所选对象的各种属性， 当选择不同的对象时属性面板也会随之改变。
HTML 文档描述网页 HTML 文档包含 HTML 标签和纯文本 HTML 文档也被称为网页 Web 浏览器的作用是读取 HTML 文档，并 以网页的形式显示出它们。浏览器不会显 示 HTML 标签，而是使用标签来解释页面 的内容。
计算机web程序设计
计算机web程序设计计算机Web程序设计是一门结合了计算机科学、网络技术和软件开发的综合学科。
它主要关注于创建和维护通过互联网访问的应用程序和服务。
以下是对这一领域的基础概述和关键概念的介绍。
1. Web程序设计概述Web程序设计涉及到使用各种编程语言和工具来开发可以在浏览器中运行的应用程序。
这些应用程序可以是简单的信息展示页面，也可以是复杂的交互式应用，如在线商店、社交媒体平台和在线游戏等。
2. Web技术基础2.1 HTML超文本标记语言（HTML）是构建网页内容的标准标记语言。
它定义了网页的结构和内容，如段落、标题、列表、链接等。
2.2 CSS层叠样式表（CSS）用于描述网页的布局和外观。
它允许开发者控制字体、颜色、间距和其他视觉元素。
2.3 JavaScriptJavaScript 是一种脚本语言，用于增强网页的交互性。
它允许开发者创建动态内容，如动画、表单验证和动态更新的网页元素。
3. 前端开发前端开发是指直接与用户交互的界面设计和实现。
前端开发者使用HTML、CSS和JavaScript来构建用户界面，并确保它在不同的设备和浏览器上都能正常工作。
4. 后端开发后端开发关注于服务器、应用程序和数据库之间的交互。
它涉及到使用服务器端语言如PHP、Python、Ruby、Java或.NET来处理数据存储、业务逻辑和服务器管理。
5. 数据库技术数据库是存储、检索和管理数据的系统。
Web程序设计中常用的数据库技术包括关系型数据库（如MySQL、PostgreSQL）和非关系型数据库（如MongoDB、Redis）。
6. Web服务和APIWeb服务是一种软件系统，它允许不同的应用程序之间通过网络进行交互。
应用程序编程接口（API）提供了一种标准化的方法来访问这些服务。
7. 安全性Web程序设计中的安全性至关重要。
开发者需要了解如何保护应用程序免受攻击，如SQL注入、跨站脚本（XSS）和跨站请求伪造（CSRF）。
网页设计简介
第一章、网页设计简介一、万维网概述1、万维网（World Wide Web,WWW）是一个基于超文本（hypertext）方式的信息检索服务工具。
超文本结构通过指针方式连接，可以使任何地方之间的信息产生联系，这种联系可以使直接的或间接的，也可以使单向的或双向的。
2、WWW系统允许超文本指针所指向的目标信息源不仅可以使文本，也可以是其他媒体，如图像、声音等信息，更重要的是可以把分散在不同主机上的资源有机地组织在一起，这种超文本结构与多媒体的结合体，被称为“超媒体”。
3、WWW获得成功的秘诀在于它制定了一套标准的、易于人们掌握的超文本开发语言HTML、信息资源的统一定位格式URL和超文本传送协议HTTP，用户掌握后可以很容易的建立自己的网站。
二、HTML语言1、WWW所使用的母语就是HTML语言。
2、HTML使Hypertext Markup Language的英文缩写，即超文本标记语言，它是构造Web 页面（page）的主要工具。
3、设计HTML语言的目的是为了能把存放在一台计算机上的资料与另一台计算机中的资料方便的联系在一起，形成有机的整体，人们不用考虑具体信息是在网络的那台计算机上。
4、使用HTML语言描述的文件，能独立于各种操作系统平台（如UNIX、Windows等），访问它只需要一个WWW浏览器，我们所看到的页面，使浏览器对HTML文件进行解释的结果。
5、可以通过浏览器直接查看一个页面的HTML源代码，例如在IE浏览器菜单栏上选择“查看”——“源文件”即可。
三、网页设计的相关概念1、超链接网页时使用HTML语言编写的，其特点就在于“超链接”。
超链接（Hyper Link）是特殊的文字标识，它指向了WWW中非资源，例如一个网页、声音、文件、网页的一个段落或者WWW中的其他资源等，这些资源均可放在任意一个服务器上。
鼠标单击超链接时，就会跳转到超链接所指向的资源，就可以从WWW上下载新的信息。
判断一个网页的某个部分是否是超链接，就是当鼠标的光标箭头拖到这个地方时，如果是超链接，浏览器便会改变光标为一只手的形状。
《网页设计》课程标准
《网页设计》课程标准一、课程定位《网页设计》是虚拟现实应用技术专业的专业学习领域课。
该课程实现Web程序开发知识、方法及工具，着重介绍在Web开发过程用到的HTML5基础知识，用于美化Web页面的样式表知识。
是一门用途广泛、前景良好的计算机行业课程，是适应计算机虚拟现实应用技术专业课程的需要。
该课程的学习可为后续《JavaScript脚本语言》等课程奠定一定的职业能力基础。
二、课程目标通过《网页设计》课程的学习，使学生具备Web应用开发的基本知识，为学习和掌握专业知识和职业技能打下基础。
1．知识目标（1）理解网站的基本概念和HTML5网页编程语言基础；（2）掌握搭建开发环境、网站的搭建（3）掌握HTML5中文字和段落的设置和常用标签；（4）掌握列表标签的使用；（5）掌握超级链接标签的使用；（6）掌握表格标签的设计和使用；（7）掌握框架页面布局；（8）掌握表单的设计；（9）掌握网页中多媒体的应用；（10）掌握层叠样式表CSS3的基本知识；（11）掌握一到多款网页设计软件的运用。
2．能力目标（1）能运用HTML5标签设计网页；（2）能使用CSS3设计网页；（3）会网页设计工具设计网页。
3．素质目标（1）具有自我学习的能力；（2）具备规范化、标准化的代码编写习惯，一定速度的代码编写能力；（3）养成忠于职守、认真负责、精益求精的敬业精神；（4）具备良好的沟通能力；（5）具备良好的团队合作精神以及自我展示能力。
三、课程设计1、设计思想（1）教学内容框架课程按照以能力为本位，紧密围绕在使用HTML5标签，利用CSS3 +DIV布局制作网页过程中遇到的实际需要和应该掌握的技术，全面介绍HTML5标签设计网页的内容和技巧。
（2）总体设计思路以完整的网页制作工作过程为导向，重构教学内容。
根据行业企业发展需要和完成职业岗位实际工作任务所需要的知识、能力素质要求，按照网页设计与制作的过程和学生的学习认知规律，打破原有的功能化知识体系，对教学内容从简单到复杂，从入门到深化进行科学安排，循序渐进的实现教学目标，课程内容与项目开发内容一致，理论与实践一体化，实现学习和工作的深度融合。
网页设计基础知识
HTML 页面 表单 字体 表格 布局 框架 图像 媒体
XHTML
CSS 标签
ＣＬAＳＳ
伪类和元素 容器 盒模型
DIV
客户端程序设计 JavaScript(JS) VBScript(VS)
7/6/2014
二、多媒体设计
第二部分：多媒体设计
FireWorks
PhotoShop
Flash
7/6/2014
三、动态网站程序设计
第三部分：动态网站程序设计
JSP
ASP
PHP
语言无优劣，差别在于应用范围与实用性。 asp:通用级，适合于小型信息系统，对很多中小型企业有吸引力，配 合mssqlserver. php:维护麻烦，适用范围窄，功能强大，网上很多论坛都是php的。 配合mYsql jsp:企业级，功能强大，投入高，很多电子商务网站都是jsp做的。 配合oracle.
例如：ftp://222.22.49.189
7/6/2014
IP地址
IP地址用来标识连接到Internet上电脑的指定 编号，每一个IP地址对应一台电脑，这与用电话 号码标识电话网络中的电话相同。 电脑识别的IP地址由32位二进制数值组成，电 脑上以十进制数值来显示，一组数值分为4部分， 每一部分均不能大于255，中间用“.”分隔，如 61.139.2.69。
7/6/2014
按表现形式分类
静态页面和动态页面的区别： 首先体现在处理方面上。
当用户访问一个 html时，服务 器会直接把这 个文件发给用 户。
当用户访问一个asp时，服务器 会对动态页面进行解析，运行 其中的代码，这些代码是在服 务器上运行的，执行完成后的 结果是生成一个html文件，然 后发给用户，用户最终看到的 还是一个html文件。
第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）网页布局必须尊重用户习惯。不仅要考虑不同类型用户的使用习惯差异，还要考虑中、英文等不 同语种用户的浏览习惯。
计算机网络技术应用第06章 网页设计基础
建立文件夹和新网页：
建立文件夹 建立网页
第三节 网页制作方法和步骤
打开并编辑网页：
文字的插入和编辑 插入并编辑表格 插入并编辑图片 插入其它元素 建立超链接 设置网页属性
6.4 信息发布
信息发布的概念：将自己制作的站点信息（包括 站点的结构、所有文件夹、HTML文件及各种相 关文件）传送到Internet或Intranet中的某台Web 服务器中，这个过程就是信息发布。 确定发布位置： 将自己的机器变成Web服务器； 申请Web站点空间。 发布工具和过程：
站点结构的规划
准备网页素材
1. 应选择符合教学需要、对 教学有益的媒体素材，避 免图像、声音和视频素材 的滥用。 2. 对多媒体信息进行压缩。
第三节 网页制作方法和步骤
创建Web站点：
在FrontPage 2000中创建Web站点步骤：
进入FrontPage 2000； 选择文件》》》新建》》》站点； 选择一种站点类型； 确定保存位置。
第二节
HTML语言
文件结构命令：标识HTML文件的结构 . <HTML>和</HTML> <HEAD>和</HEAD> <TITLE>和</TITLE> <BODY>和</BODY>
返回
第二节
HTML语言
区段格式命令：以特定的格式显示HTML 文件 中的区段文字.
标题标签：<H1>、<H2>、<H3>、<H4>、<H5>、 <H6> 文件段落标签：<P> 格式化文本标签：<B>、<I>、<U> 行中断标签：<BR>
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2．FrontPage
FrontPage是由Microsoft公司推出的新一代Web网页制作工具。 FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有 直观的网页制作和管理方法，简化了大量工作。
3．Dreamweaver
Dreamweaver是由Macromedia公司推出的一款在网页制作方面大 众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代 码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人 员的需要，同时也容易被业余网友们所掌握。
五、 网页上传发布
网页设计好，必须把它发布到互连网上，否则网站形 象仍然不能展现出去。发布的服务器可以是远程，也可 以是本地，但必须支持ASP ，因为动态程序是建立在 ASP 基础上的。
11.2 超文本链接语言
1.名词 网页:是WWW的基本文档，它是用HTML(Hypertext Markup Laguage即超文本标识语言）编写的。当 网页中包含正常文本和HTML语言标记时，浏览器 会“翻译”由这些HTML语言标记提供的网页结构、 外观和内容的信息，从而将网页按设计者的要求显 示出来，而不是显示一堆奇怪的标记。 超文本:Hypertext,是把一些信息根据需要连接起来的 信息管理技术，人们可以通过一个文本的链指针打 开另一个相关的文本。 首页或主页（HomePage）:进入网站首先看到的那一 页称首页。
主页
页面1
页面2
页面3
一级标题
页面4
页面5
页面6 层状结构
页面7
二级标题
② 线性结构
线性结构（如图 1.9 所示）类似于数据结构中的 线性表，用于组织本身的线性顺序形式存在的信息， 可以引导浏览者按部就班地浏览整个网站文件。这 种结构一般都用在意义是平行的页面上。 通常情况下，网站文件的结构是层状结构和线性 结构相结合的。这样可以充分利用两种结构各自的 特点，使网站文件既具有条理性、规范性，又可同 时满足设计者和浏览者的要求。
主 页
页 面 1
页 面 2
页 面 3
线性结构
③ Web结构
Web结构（如图1.10所示）类似于Internet的组成结构，各网页 之间形成网状连接，允许用户随意浏览。
主页
页面1
页面2
页面3
一级标题
页面4
页面5
页面6
页面7
页面8
二级标题
图1.10 Web结构
三、 网页设计与制作
1．静态网页的设计与制作 在开始制作网页之前，建议应用少量时间对自己要制作的 主页 进行总体设计，例如希望主页是怎样的风格，应该放一些什么 信息 ，其他网页如何设计，分几层来处理等等。 （1）应根据网站的访问者对象、要提供的信息以及制作目标得 出一个最适合的网页架构。 （2）每页排版不要太松散或用太大的字，尽量避免访问者浏览 网 页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链 接 解决。 （3）切勿以800×600以上的分辨率设计网页，常用的分辨率是 640×480 及 800×600 。现在国内的站点基本上都是 800×600 ， 但 是如果主要是面向国外访问者的站点，建议使用640×480。 （4）不应在每页中插入太多的广告。 （5）不要每页都采用不同的墙纸，采用相同的底色或墙纸还可 以增强网页一致性，以树立自己的风格。
第十一章 网页制作初识
11.1 概述 11.2 超文本链接标识语言 11.3 frontpage应用 11.4 frontpage高级应用 11.5 网站发布与管理
11.1 概述
1 网页的基本要素
(1)文字
文字是网页发布信息所用的主要形式，由文 字制作出的网页占用空间小，但纯文字网页， 又会给人带来死板不活泼的感觉，所以，文 字性网页一定要注意编排，包括标题得字型 字号，内容的层次样式，是否需要变换颜色 进行点缀等等。
（6）底色或墙纸必须与文字对比强烈，以易于阅 读。 （7）不要把图片白色当作透明，外，最好还是用 图片编辑工具将图片设为透明颜色。
2．为网页的添加动态效果
静态网页制作完成后，接下来的工作就是为网 页添加动态效果， 包括一些脚本语言程序和数据库程序的设计，以 及加入动画效果 等。
四、测试网页
当网页设计人员制作完所有网站页面之后，需要对所 设计的网 页进行审查和测试，测试内容包括功能性测试和完整性测 试两个方 面。
3．Flash
Flash 是美国 Macromedia 公司开发的矢量图形编辑和动画 创作的专业软件，是一种交互式动画设计工具，用它可 以将音乐、声效、动画以及富有新意的界面融合在一起， 以制作出高品质的网页动态效果。Flash广泛应用于网页 动画制作、教学动画演示、网上购物、在线游戏等的制 作中。
标题 字号 字型
(2) 图形
菜单按钮 背景图形 链接标志 交互功能
11.1.3 网页制作和美化工具
一、网页制作工具
1．超文本标识语言（HTML）
HTML（Hypertext Markup Language）是一种专门用于Web页制作 的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显 示文本，怎样生成与别的文本或图像的链接点。
2.html文件的生成：.htm,.html 3.html文件基本语法： <HTML> <HEAD> <TITLE>HTML编写举例</TITLE> </HEAD> <BODY> <P>欢迎使用HTML语言编写网页！</P> </BODY> </HTML>
二、网toshop是由Adobe公司开发的图形处理软件，它 功能完善、性能稳定、使用方便，所以在几乎所有的广 告、出版、软件公司， Photoshop都是首选的平面制作 工具。
2．Fireworks
Fireworks 是由 Macromedia 公司开发的图形处理工 具，是第一套专门为制作网页图形而设计的软件，同时 也是专业的网页图形设计及制作的解决方案。
11.1.4 网页制作的基本步骤
一、准备工作 1．收集整理资料 2．准备素材 3．内容规划 二、整体规划
进行网站的整体规划也就是组织网站的内容和设计其结构。以确保文 件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意 图，也将使网站可维护性与可扩展性增强。
① 层状结构 层状结构类似于目录系统的树型结构，由网站文 件的主页开始，依次划分为一级标题、二级标题 等等，逐级细化，直至提供给浏览者具体信息。