《网页设计与制作》第一章：网页制作基础
《网页设计与制作》习题及答案
第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>）是水平线标签，可以在页面生成一条水平线。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法：讲解网页设计的概念和原则实践法：学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章：HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法：讲解HTML和CSS的基本概念和语法实践法：学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章：网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法：讲解网页布局和排版的基本原则和方法实践法：学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章：网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法：讲解网页动画和交互的基本概念和原理实践法：学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章：网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法：讲解网页优化和推广的基本概念和方法实践法：学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章：网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具（如Photoshop、Fireworks等）多媒体元素在网页中的应用（如音频、视频等）图像和多媒体的HTML和CSS标记6.3 教学方法讲授法：讲解网页图像处理的基本概念和工具实践法：学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章：网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言（如JavaScript、jQuery等）常用的网页编程技术和框架（如Bootstrap、React等）编程实践和项目案例7.3 教学方法讲授法：讲解网页编程的基本概念和语言实践法：学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章：移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具（如Responsive Design、Adobe Edge Mobile等）移动网页设计的实践和案例分析8.3 教学方法讲授法：讲解移动网页设计的基本概念和原则实践法：学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章：网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具（如Git、Project Management Software等）项目案例分析和实战演练9.3 教学方法讲授法：讲解网页项目实战的基本流程和方法实践法：学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章：网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向（如VR/AR、等）前沿技术和创新思维的方法（如Blockchn、Design Thinking等）创新项目和案例分析10.3 教学方法讲授法：讲解网页设计与制作的未来趋势和发展方向实践法：学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。
网页设计与制作课件第1章 网页制作基础知识
任务1
认识网页和网站
任务2
了解网站的开发流程
本章导读
要学习如何制作网页，首先需要 了解网页的一些基础知识，这样才 能使学习获得事半功倍的作用。
阶段1 什么是网页和网站
（1）什么是网页
❖ 网页其实就是一个文件，如下图。它可以承载网页制作者留下的 各种信息，然后通过互联网传输并使用浏览器显示成页面，让不 同的用户浏览。
网页中 的图像
3.动画
在网页中添加动画可以让浏览者更乐意浏览该网页。 特别在一些制作优美的动画，更能为网页增色不少， 吸引浏览者的目光。动画文件一般有GIF动画、Flash 动画。
4.表格
一个网页除了要有精彩的内容与协调的色彩外，还需要进行合理 地排版布局。表格的主要作用就是对网页进行排版和布局。
（3）网站主题
➢ 首先确定自己要做的网站主题，是以某个行业 为主题还是以个人兴趣爱好为主题；是专门以 售后服务为主题还是做门户类的网站等等，这 都是需要事先考虑好的，因为不同的主题，在 风格的表现形式和内容的侧重面上都不相同。
下面来看看不同主题的网站在设计的时候应当分 别注意些什么
以某个行业为主题的专业类网站在设计上要考虑其单 一性和专业行，不宜太花哨，应注重信息内容的重点 突出部分。
品而建立的网站，如金山毒霸、瑞星反病毒网站等.
反病毒 职能网 站
个人网站：是指一些由个人设计创建的网站。这种网站在内容和 形式上具有较强的个性化，通常都是以宣传自己或展示个人兴趣 爱好为主。
个人网站
专业网站：是指以某个专项作为网站的核心。通常这种网站都以 某个单一的题材作为网站的内容，如以游戏为主题的游戏网站， 以文学为主题的文学网站等。
游戏网 站
网页设计与制作第一章网页制作基础
/Addressing/URL/5-BNF.html#httpaddress，访问 服务器上Addressing/URL目录下的5-BNF.html 网页文件中锚点标识为httpaddress的地方。
关闭图片显示
*
在网络速度较慢时，不观看网页中的图片和其它多媒体内容可以得到更快的下载速度。通过“工具”→“Internet选项”打开Internet选项对话框，在“高级”选项卡中可以对浏览器的工作方式进行设置
*
通过工具→Internet选项，打开Internet选项对话框，在“内容”选项卡的“个人信息”部分单击“自动完成”按钮打开自动完成设置对话框 。
*
2.个人网站
*
个人网站具有较强个性化，是以个人名义开发创建的网站，其内容、样式、风格等都是非常有个性的。
*
3.专业网站
*
这类网站具有很强的专业性，通常只涉及某一个领域，内容专业。如榕树下网站（）即是一个专业文学网站。
*
4.职能网站
*
职能网站具有专门的功能，如政府职能网站等。目前逐渐兴起的电子商务网站也属于这类网站，较有名的电子商务网站有阿里巴巴（）、卓越网（）和当当网上书店（）等。
<TITLE>励志学社</TITLE>
【例】给网页设置 “励志学社”的文档标题，可在头部输入以下代码：
（4）主体标记 网页的主体是“<BODY>……</BODY>”标记对作用的范围
<BODY>标记用于定义HTML文档主体的开始，它能够设置网页的背景图像、背景颜色、链接颜色和网页边距等属性，其基本用法如下所示： <BODY Background="URL" Bgclolr=Color Bgpropeties=Fixed Leftmargin=n Link=Color Alink=Color Text=Color Topmargin=n Vlink=Color> Bgcolor为背景颜色。关于颜色的值后面会详细介绍。Text为不包含超级链接的文字颜色。 Link为超级链接文字的颜色。 Alink为正被点击的超级链接文字的颜色。
《网页设计与制作》(第二版)电子课件第一章
（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 学习任务：网页和网站基本知识 1.2 学习任务：网站开发的基本流程 1.5 学习任务：HTML标识语言基础 1.3 学习任务：全面认识Dreamweaver CS4 1.4 学习任务：创建和管理本地站点 1.6 应用实例——制作一个简单的网页 1.7 实训
1.1学习任务：网页和网站基本知识
根据提供服务的不同，通常把提供网页服务的服务 器称为Web服务器，相关网站称为Web站点。一个 Web站点由一个或多个Web页组成，这些Web页相 互连接在一起，存放在Web服务器上，以供浏览者 访问。 网站是提供各种信息和服务的基地，如用户熟悉的 搜狐、新浪、雅虎等。网站是由很多网页链接在一 起组成的。用户浏览到一个网站时看到的第一个页 面叫做主页。从主页出发，可以访问到本网站的每 一个页面，也可以链接到其他网站，方便地共享网 站资源。
<b>标签的内容</b> 标签的内容</b </
起始标签 结束标签
标签可以有属性，赋值的时候用“ ， 标签可以有属性，赋值的时候用“=”，多个属性中间用空格隔开 属性要写在开始标签里，并且标签符号和<>中间不可以有空格， <>中间不可以有空格 img>是 属性要写在开始标签里，并且标签符号和<>中间不可以有空格，如< img>是 错误的 结束的标签一定要加“ 结束的标签一定要加“/”
topmargin、leftmargin属性：用于设置网页 主体内容与网页顶端、左端的距离。例如， <body topmargin=0 leftmargin=2>。
上机作业：完成 作业1.txt 中的操作
13. Dreamweaver CS4简介
《网页设计与制作》第一章网页制作基础
块级元素与行内元素
浮动布局
浮动布局是一种常用的网页布局技术，通过设置元素的 `float` 属性，可以让元素脱离正常的文档流，向左或向右移动，直到遇到父元素的边界或另一个浮动元素。
使用浮动布局可以实现多种布局效果，例如多列布局、文字环绕图像等。
定位布局通过设置元素的 `position` 属性，可以精确控制元素在页面上的位置。常见的定位方式有静态定位（`static`）、相对定位（`relative`）、绝对定位（`absolute`）和固定定位（`fixed`）。
在线网页编辑器
网页制作工具简介
延时符
02
HTML基础
HTML文档结构
<html>元素是HTML文档的根元素，包含了整个文档的内容。
<!DOCTYPE html>声明文档类型为HTML5。
HTML文档由一系列的元素构成，包括`<!DOCTYPE html>`、`<html>`、`<head>`和`<body>`等。
03
响应式图片可以有效地减少带宽和加载时间，提高网页的性能和用户体验。
01
响应式图片是指在不同尺寸的屏幕上显示不同分辨率的图片。
02
通过使用HTML的srcset属性和CSS的picture元素，可以指定不同尺寸屏幕下的图片源，从而实现响应式图片。
响应式图片
THANKS
属性选择器
01
03
02
04
CSS选择器
用于设置元素的前景色和背景色，如`color`和`background-color`。
颜色与背景
用于设置字体类型、大小、行高等，如`font-family`、`font-size`和`line-height`。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的标准和原则1.2 网页设计流程讲解网页设计的基本流程，包括需求分析、设计稿、切片、编码和测试等步骤1.3 网页设计工具介绍常用的网页设计工具，如Photoshop、Dreamweaver、Fireworks等第二章：HTML与CSS基础2.1 HTML概述介绍HTML的概念、作用和基本结构2.2 HTML标签讲解常用的HTML标签，如、段落、图像、、列表等2.3 CSS概述介绍CSS的概念、作用和基本语法2.4 CSS选择器讲解常用的CSS选择器，如类选择器、ID选择器、属性选择器等第三章：网页布局与排版3.1 网页布局概述介绍网页布局的概念和重要性3.2 常用的网页布局方法讲解常用的网页布局方法，如固定布局、百分比布局、弹性布局等3.3 排版与字体介绍排版和字体的概念、作用和常用属性3.4 响应式网页设计讲解响应式网页设计的概念、方法和实现方式第四章：网页特效与交互4.1 网页特效概述介绍网页特效的概念和作用4.2 JavaScript基础讲解JavaScript的概念、作用和基本语法4.3 常用的网页特效与实例讲解常用的网页特效，如鼠标悬停效果、下拉菜单、滚动动画等，并提供实例进行演示4.4 交互式网页设计讲解交互式网页设计的概念、方法和实现方式第五章：网页设计与制作实践5.1 实践项目概述介绍实践项目的需求和目标5.2 网页设计稿制作根据实践项目需求，使用设计工具制作网页设计稿5.3 网页编码与测试使用HTML和CSS编写网页代码，并进行测试和调试讲解网页发布的步骤和注意事项，以及常用的网页推广方法第六章：网页图像与多媒体6.1 图像格式与优化介绍常见的网页图像格式，如JPG、PNG、GIF等，以及图像优化方法6.2 音频与视频讲解如何在网页中嵌入音频和视频，以及常用的媒体格式6.3 Flash动画介绍Flash动画的概念、制作方法和在网页中的应用6.4 动态效果与动画讲解如何在网页中实现动态效果和动画，包括使用CSS动画和JavaScript实现第七章：网页服务器与数据库7.1 服务器概述介绍网页服务器的概念、作用和常用服务器软件7.2 数据库概述介绍数据库的概念、作用和常用数据库管理系统7.3 动态网页制作基础讲解动态网页制作的基本原理，如服务器端编程和数据库连接7.4 实践项目：搭建简易的个人博客系统讲解如何使用服务器和数据库搭建一个简易的个人博客系统，包括前端设计和后端编程第八章：网页安全与SEO介绍网页安全的概念和重要性，以及常见的网络安全威胁8.2 网页安全措施讲解如何防范网络攻击和提高网页安全性，如使用SSL证书、X-Frame-Options 等8.3 SEO概述介绍搜索引擎优化（SEO）的概念、作用和方法8.4 SEO实践技巧讲解如何优化网页内容、结构和，以提高搜索引擎排名第九章：网页设计与制作的进阶技巧9.1 响应式网页设计深入讲解响应式网页设计的原理和实践方法，包括媒体查询和弹性布局9.2 前端框架与库介绍常用的前端框架和库，如Bootstrap、jQuery、React等，以及如何使用它们提高网页制作效率9.3 网页性能优化讲解如何提高网页加载速度和性能，包括图片优化、代码压缩和缓存策略9.4 实践项目：制作一个响应式商务网站讲解如何使用响应式设计和前端框架制作一个商务网站，包括布局、样式和交互设计第十章：网页设计与制作的拓展与趋势10.1 网页设计与制作的未来趋势探讨网页设计与制作的发展方向，如虚拟现实（VR）、增强现实（AR）等技术的应用10.2 网页设计规范与最佳实践介绍网页设计规范和最佳实践，以提高网页质量和用户体验10.3 跨平台网页设计与制作讲解如何使用跨平台技术，如PWA（Progressive Web Apps）、Node.js等，实现网页在不同平台和设备的兼容性和性能10.4 实践项目：制作一个跨平台的网页应用重点和难点解析重点环节1：网页设计基础和流程网页设计的标准和原则是设计的基石，需要重点掌握。
《网页设计与制作》第一章：网页制作基础波波制作
2013-3-6
1.3 网页制作的基本方法
制作网页的基本步骤
1、确定网页的内容 2、设计网页的组织结构
3、资料的收集与整理
4、选择网页的设计方法 常用的网页制作工具有Frontpage、 Dreamweaver等。服务器端的ASP程序可以使用 Visual Interdev、UltraDEV等编辑。
2013-3-6
4
【例】给网页设置 “励志学社”的文档标 题，可在头部输入以下代码： <TITLE>励志学社</TITLE>
2013-3-6
5
（4）主体标记 网页的主体是“<BODY>……</BODY>”标记 对作用的范围
<BODY>标记用于定义HTML文档主体的开始， 它能够设置网页的背景图像、背景颜色、链接颜色 和网页边距等属性，其基本用法如下所示： <BODY Background="URL" Bgclolr=Color Bgpropeties=Fixed Leftmargin=n Link=Color Alink=Color Text=Color Topmargin=n Vlink=Color> Bgcolor为背景颜色。关于颜色的值后面会详 细介绍。Text为不包含超级链接的文字颜色。 Link为超级链接文字的颜色。 Alink为正被点击的超级链接文字的颜色。
2013-3-6
6
Vlink为已经点击过的超级链接文字的颜色。 Background设置，如果设置了背景图片， 图片会覆盖已经设置的颜色。
Leftmargin、Topmargin用于设置网页的左 边距和上边框，它们是以像素为单位 【例1】将网页的上边距和左边距分别设置为40 和30个像素的宽度，使用黑色文本、白色背景， 未访问的链接源采用蓝色，已访问的链接源标记 为暗红色。 <BODY Background="moom.gif" Bgcolor="White" Bgproperties=Fixed Leftmargin=30 Link="Blue" Text="Black" Topmargin=40 Vlink="Maroon">
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2014-6-14
32
开始网页制作 构建页面框架 创建导航条 填充内容 创建返回主页连接
2014-6-14
33
网页制作的原则
站点要有创意 整体规划 动画不能过多 导航要明朗 制作通用网页 主题鲜明 优化图象 定时更新 2014-6-14
34
制作网页时要注意的问题
2014-6-14
19
4.职能网站
职能网站具有专门的功能，如政府职能
网站等。目前逐渐兴起的电子商务网站 也属于这类网站，较有名的电子商务网 站有阿里巴巴（）、 卓越网（）和当当网上书 店（）等。
2014-6-14 20
是一种超文本标记语言，作为一种网页编 辑语言，易学易懂。
2014-6-14
23
1、HTML网页
HTML网页通常是由三部分内容组成的： 版本信息、网页标题（HEAD）和文档主体 （BODY）。 下面就是网页结构的总体框架：
<!HTML网页版本信息说明> <HTML> <HEAD> <!标题标记、属性及其内容> </HEAD> <BODY> <!主体标记、属性及其内容> </BODY> </HTML>
2014-6-14 30
1.23 Web服务器端程序
专业的网站都是建立在使用数据库的 基础上的，要将这些数据库变成可以通过 浏览器显示和操作的Web页面，就需要编 写服务器端的程序。用户向服务器传送提 交的表单（个人信息、选择结果等）需要 在服务器端进行记录、筛选等处理。大量 的数据库查询、修改处理也需要服务器端 程序的支持。 目前常用的服务器端编程技术主要有 CGI、ASP、PHP、JSP等，不同的技术 31 需要不同的系统环境支持。
2
URL
Internet上所有的资源都有一个唯一的 URL地址，一般将URL地址称为网址。
URL的完整格式如下：
协议://主机名（或IP地址）：端口号/路径名/文件名
2014-6-14
3
【例】几个URL的例子.
（1），用 http协议和缺省端口号（80）访问微软公司 服务器。这里没有指定路 径和文件名，所以访问的结果是把一个缺省 主页送给浏览器。 （2）ftp:///pub/mswindows/winvn926.zip，用FTP协议访问北京 大学FTP服务器上路径名为pub/ms-windows、 文件名为winvn926.zip的文件。
2014-6-14
1.3 网页制作的基本方法
制作网页的基本步骤
1、确定网页的内容 2、设计网页的组织结构
3、资料的收集与整理
4、选择网页的设计方法 常用的网页制作工具有Frontpage、 Dreamweaver等。服务器端的ASP程序可以使用 Visual Interdev、UltraDEV等编辑。
2014-6-14
28
2、XML语言
XML（eXtensible Markup Language）被称作是下一代的网页标 记语言，也是采用各种标记来形成网 页的源代码。 XML中包括可扩展格式语言 XSL(Extensible Style Language) 和 可扩展链接语言XLL(Extensible Linking Language)。
2014-6-14 17
2.个人网站
个人网站具有较强个性化，是以个人名
义开发创建的网站，其内容、样式、风 格等都是非常有个性的。
2014-6-14
18
3.专业网站
这类网站具有很强的专业性，通常只涉
及某一个领域，内容专业。如榕树下网 站（）即是一个专 业文学网站。
IE6的界面
标题栏 菜单栏 工具栏 地址栏
浏览窗口
状态栏
2014-6-14 7
IE6.0的使用
浏览网页
“停止”按钮 前进和后退 刷新页面 改变文字大小 选择编码 全屏幕显示 查看源文件
2014-6-14
8
打开多个窗口
用菜单栏上的“文件”→“新建”→“窗口”， 会打开一个新的浏览器窗口。
2014-6-14
27
Vlink为已经点击过的超级链接文字的颜色。 Background设置，如果设置了背景图片， 图片会覆盖已经设置的颜色。
Leftmargin、Topmargin用于设置网页的左 边距和上边框，它们是以像素为单位 【例1】将网页的上边距和左边距分别设置为40 和30个像素的宽度，使用黑色文本、白色背景， 未访问的链接源采用蓝色，已访问的链接源标记 为暗红色。 <BODY Background="moom.gif" Bgcolor="White" Bgproperties=Fixed Leftmargin=30 Link="Blue" Text="Black" Topmargin=40 Vlink="Maroon">
2014-6-14 10
收藏夹的使用
使用菜单“收 藏”→“添加到收 藏夹”打开添加到 收藏夹对使用菜单“收藏”→“整理收藏夹”打开收 藏夹整理对话框，进行收藏夹中网页的移动、 删除、改名及创建新文件夹等操作。
2014-6-14
12
关闭图片显示
在网络速度较慢时， 不观看网页中的图片和 其它多媒体内容可以得 到更快的下载速度。通 过“工具”→“Internet 选项”打开Internet选项 对话框，在“高级”选 项卡中可以对浏览器的 工作方式进行设置
2014-6-14
15
认识网站
1.门户网站
2.个人网站
3.专业网站
4.职能网站
2014-6-14
16
1.门户网站
这类网站是一种综合性网站，涉及领域 非常广泛，包含文学、音乐、影视、体 育、新闻和娱乐等方方面面的内容，具 有论坛、搜索和短信等功能。现在国内 较著名的门户网站有搜狐 （）、网易 （）等。
2014-6-14 4
（3）: 8001///uugna/index.html，从运行在端口号8001的 服务器上访问index.html主页。
（4)/Addressing/URL/5BNF.html#httpaddress，访问 服务器 上Addressing/URL目录下的5-BNF.html 网页文件 中锚点标识为httpaddress的地方。
2014-6-14
24
（1）版本信息 版本信息位于HTML网页文件的第一行
（2）HTML文件标记 大部分网页文件都是以<HTML>标记开始的，在文件 的结尾处又以</HTML>结束
（3）头部信息 HEAD标记之间是HTML文档的头部，用来标明当前文档 的有关信息
在HEAD标记之间，使用频率最高的标记就是 TITLE，它用于定义显示在浏览器标题栏的文档标题。
1、网页的标题要简洁，明确。 2、在文本中要使用水平线，以分割不同部分。 3、对重点段落要强调显示。
4、网页中插入的图片要尽量的小。
5、图形要附加文字说明，以便关闭图像时查 看。 6、网页中引用的资料及商标（或图标），不 能侵犯版权。
2014-6-14 35
1.4 Macromedia Studio MX2004
一般情况下，打 开四、五个窗口可以 充分利用系统资源， 而且通过调整窗口的 大小和位置还可以同 时浏览。
2014-6-14
9
主页、临时文件和历史记录
浏览器在打开 时自动调入的网页 称为“主页”，主 页可以通过“工 具”→“Internet 选项”打开 Internet选项对话 框，在“常规”选 项卡的“主页”栏 设置.
2014-6-14 13
关闭自动完成功能
通过工具→Internet 选项，打开Internet 选项对话框，在“内 容”选项卡的“个人 信息”部分单击“自 动完成”按钮打开自 动完成设置对话框 。
2014-6-14
14
搜索引擎的使用
1、使用浏览器的“搜索”按钮 2、使用专门的搜索引擎
(Google) (摆渡) (雅虎) (搜狐)
Macromedia Studio MX2004是目前应用最 广泛的网页制作工具组件，使用方便、功能齐全， Dreamweaver、Flash、Fireworks被称作“网页 三剑客”。
在Dreamweaver 里用丰富的层叠样式表制作耐看， 专业的网站。 Fireworks通过自动变形，用动的效果，图片编 辑工具和拖拽工具能传送较精彩的 Fireworks 图片。 Macromedia Flash 工具可较快的制作 SWF 文件。
认识网页
Flash动画 导航栏 GIF动画 文字 表单 图片 超级链接
2014-6-14
21
网页中的元素
1.文字
2.图像 3.表单 4.Flash动画 5. 表格
6. 超级链接
7. 视频、音频 8. POP窗口
2014-6-14
9. 标题栏和状态栏文字
22
1.2
网页制作的相关知识
HTML语言概述
2014-6-14
37
网页设计与制作
第1章 网页制作基础
南海学院计算机系制作
第1章
Web
网页制作基础
Web和浏览器 Web的特点和结构
2014-6-14
Web最大的特点是使用了超文本 （Hypertext）
WWW采用C/S（客户机/服务器）工作模式 在浏览器和服务器之间应用 HTTP （ Hyper Text Transfer Protocol，超文本传输协议） 作为网络应用层通信协议
2014-6-14