当前位置:首页 >> 初中教育 >>

第一章网页制作基础


2011年2月22日

学习目标
了解网页的基本原理。 理解网页的相关概念。 能够区分静态网页和动态网页。 了解网页制作的常用工具。 理解网站开发的流程。

本章主要内容
一、网页的基本概念 二、网页制作工具 三、网站开发流程 四、课后作业

1、网页的基本概念 、

In

ternet 与 WWW
通俗地讲,Internet 就是许多功能不同的计算机 通过线路连接起来组成的一个世界范围的网络。

Internet 与 WWW

Internet 提供的服务:
WWW服务(网上冲浪) WWW服务(网上冲浪) 服务 电子邮件服务(Email) 电子邮件服务(Email) 文件传输(FTP) 文件传输(FTP) 网络游戏 即时信息传递(OICQ) 即时信息传递(OICQ)

WWW 与浏览器
WWW是由遍布在 Internet 上的称为 Web 服 务器的计算机组成,它将不同的信息资源有机地 组织到一起,通过浏览器进行浏览。

WWW 与浏览器

网站和网页 网站和网页 和网
在逻辑上可视为一个整体的一系列页面的有机集 合称为网站(Web Site或Site)。 作为一个组织或个人在 WWW(或其他Web)上 开始点的页面称为主页(Homepage)。

HTML 的基本工作原理
HTML(Hypertext Markup Language) 是一种规范,一 种标准,它通过标记符(tag)来标记要显示的网页 的各个部分。 通过在网页中添加标记符,可以告诉浏览器如何显示 网页,即确定内容的格式。浏览器按顺序阅读网页文 件(HTML文件),然后根据内容周围的HTML标记 符解释和显示各种内容。

HTML 的基本工作原理

静态网页与动态网页
一般网页的每一行 HTML 代码都是在将页放置到服务器之前 由设计人员编写的。因为 HTML 在放置到服务器后不发生更 改,所以这种页称为静态页。 例如,大多数的个人网站。 当 Web 服务器接收到对静态页的请求时,服务器将读取该 请求,查找该页,然后将其发送到请求浏览器,如图所示 。

静态网页与动态网页

静态网页与动态网页
所谓动态网页,是指根据用户的请求,由服务器动态生成的 网页。例如,ASP网页,PHP网页,JSP网页。 当 Web 服务器接收到对动态页的请求时,它将该页传递给 应用程序服务器,它读取页上的代码,根据代码中的指令完 成页,然后将代码从页上删除。所得的结果将是一个静态页, 应用程序服务器将该页传递回 Web 服务器,然后 Web 服务 器将该页发送到请求浏览器。该过程如图所示。

静态网页与动态网页

静态网页与动态网页
应用程序服务器使用户能够使用服务器端的资源(如数据 库)。 动态页可以指示应用程序服务器从数据库中提取数据并将其 插入页的 HTML 中。 例如,搜索页面,电子商务网站等。

静态网页与动态网页

2、网页制作工具 、

网页编辑工具

HTML 编辑器 HomeSite BBEdit (Mac) CuteHTML

WYSWYG 编辑器 Macromedia Dreamweaver Microsoft FrontPage Adobe GoLive

素材处理与创作工具

图像浏览与处理 ACDSee Photoshop Fireworks PhotoImpact

矢量图创作工具 FreeHand CorelDraw Illustrator

素材处理与创作工具

多媒体制作工具 Flash Director Authorware LiveMotion

特效制作工具 Anfy Cool 3D GIF Animator

3、网站开发流程 、

网站开发流程概述
首先定义开发网站的目的;接下来对网站的外观进行设计; 然后进行实际页面的制作;然后对所制作的网站进行测试, 以确保它符合最初设定的目标;最后是将网站发布。在将 网站发布后还需要有维护工作,以便及时更新网站内容。

网站开发流程概述

网站规划
确定建设网站的目标 分析目标用户对站点的需求 确定网站风格 考虑网络技术因素 网络速度 浏览器与分辨率 及时交互与插件

网站设计
设计页面的布局 页面设计草图 导航系统的设计 设计原则: 设计原则: ? 通过最少的点击次数得到最多的信息量。 通过最少的点击次数得到最多的信息量。 ? 保持风格一致,提供页面的位置信息,提供返回上 保持风格一致,提供页面的位置信息, 级页面的链接

网站设计
网页中的颜色 红、绿、蓝三原色的数值相同则称为安全色,由“00、 00、 蓝三原色的数值相同则称为安全色, 33、66、99、CC、FF”组成的颜色值称为标准安全色。 33、66、99、CC、FF”组成的颜色值称为标准安全色。 设计颜色方案的原则
? 保持一致性 ? 注意可读性

文字、图像、动画和多媒体
中文网站中的字体最好使用默认的“宋体”,以及“楷 体”、“黑体”等基本字体。建议使用CSS 样式表对站点 的字体进行统一管理。 使用任何对象时要考虑的一点:是否有利于达到站点目标。

网页制作
根据设计阶段制作出的示范网页,通过 Dreamweaver 等 软件在各个具体网页中添加实际内容,包括:文本、图像、 声音、Flash 电影以及其他多媒体信息。

网站测试
对所有影响页面显示的细节因素进行测试。 测试页面中的超链接是否能够正常跳转。将本地站点文件 夹在计算机硬盘中移动位置,是测试超链接能否正确工作 的一种简便方法。

网站测试
申请网页空间 免费 收费 用 FTP 上传网页 CuteFTP LeapFTP

网站维护
随着网站的发布,应根据访问者的建议,不断修改或是更 新网站中的信息,并从浏览者的角度出发,进一步完善网 站。这时网站建设工作又返回到了流程中的第一步,这样 周而复始,就构成了网站的维护过程。

4、课后作业 、

课后作业
选择一个自己感兴趣的话题内容,上网或去图书馆进行资 料搜集,作为以后作业的主题内容。写下以下内容: 网站的目标 网站的观众 网站要包括的内容及其组织 参考内容: 参考内容: 文学 音乐 游戏 学习 旅游

课堂总结


相关文章:
web网页制作——复习题
第一章 Web网页制作基础 43页 免费 Web技术与网页制作 a 9页 免费 WEB简单网页制作 10页 免费 web技术与网页制作1 77页 1财富值 交互式网页制作——WEB数据...
网页制作教案_图文
第五章 第五章 第六章 第六章 第七章 第七章 第八章 第八章 期 第四章 第四章 第一章 第一章 第二章 第二章 第三章 网页制作基础 网页制作基础 ...
FRONT PAGE网页制作基础(练习题)
班级:高二___班 姓 名:___ 分数:___ 《FRONT PAGE 网页制作基础 》练习题 第一章 建造自己的网上家园 1、 网页是超文本标记语言(Hypetext Markup Language...
网页制作基础实验报告模板
网页制作基础实验报告模板_表格类模板_表格/模板_实用文档。北华航天工业学院 2013...>第一章 水果基础知识 第二章 水果养殖技术概述 ...
2014网页制作(主编高律-科学出版社)Dreamweaver8.0的操...
网页制作基础(Dreamwaver 8 教程)第一章 Dreamweaver8.0 的操作环境第一天的内容可能让你觉得枯燥乏味,不过, “工欲善其事,必先利其器” , 让我们一起来了解 ...
基础HTML网站设计
基础HTML网站设计,水平一般基础HTML网站设计,水平一般隐藏>> 目录 第一章:诸论...要在网页中显示目前的家长发言与老 师回复数据,必须先进行数据库的链接与打开,...
文科计算机 网页制作 html
第一章: 第一章:网页设计快速入门第一节 第一个网页下面是一个极简单网页的代码,甚至没有网页中最常见的图片和链接,但是 将这些内容复制到文本编辑器并保存,...
Dreamweaver网站设计
Dreamweaver网站设计_互联网_IT/计算机_专业资料。Dreamweaver网站设计,网页制作,HTML,CSS第一章 网页制作基础 1-1 网站的概述了解网站开发原理,制作网页的方法和技巧...
网页制作说课稿
,针 对的是计算机专业二年级第一学期的学生, 教材采用的是电子工业出 版社的《网页制作基础教程(dreamweaver 8.0) 》 (第二版) ,内容位 于此书的第三章。 ...
自考29942 网页设计与制作
Ⅱ 考核要点 第一章 网页设计制作基础知识一、学习目的和要求本章内容涉及网站开发、网页制作的相关基础知识。学习了本章,可以使学生在实际网 页制作时,思路更...
更多相关标签: