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

第一章网页制作基础


2011年2月22日

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

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

1、网页的基本概念 、

Internet 与 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、课后作业 、

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

课堂总结



相关文章:
第一章 网页制作
第一章 网页制作基础 24页 免费 网页制作辑第一章1 11页 1财富值 网页制作第一章 57页 1财富值 网页制作课件第一章 24页 1财富值 第一章网页制作基础 36...
第一章 网页制作
第一章 网页制作基础 24页 免费 网页制作辑第一章1 11页 1财富值 网页制作第一章 57页 1财富值 网页制作课件第一章 24页 1财富值 第一章网页制作基础 36...
第一至三章 网页设计与制作基础
第一至三章 网页设计制作基础_自考_成人教育_教育专区。第一章 1.什么是网络协议,内容主要包括? 网络协议是一系列通信规则的总称,主要包括:1.用户数据与控制信...
网页制作基础
课程概况和性质:“网页制作基础”是中央电大计算机应用专业网络方向必修的一门专业...第 3 页 《 网页制作基础 》课程实施细则 (6) 学习时应在充分自学每章内容...
第一章 网页制作
第一章网页制作概述 54页 免费 第1章-网页制作初识 16页 免费 网页制作电子教案系列第... 13页 免费 第1章网页制作 25页 免费 第一章 网页制作基础 24页 ...
网页制作基础
第一章 网页制作基础 24页 免费 第8章网页制作基础 22页 免费 1网页制作基础 49页 1财富值 网页制作基础指导 36页 免费 01网页制作基础 60页 免费喜欢...
网页制作基础
第一章 网页制作基础 一、选择题: 1、某网站的主页是动态网页类型,你认为该网页文件名称应当是( ) A、default.php B. default.htm C. index.htm D. main....
网页设计与制作基础
网页设计与制作基础.txt 我退化了,到现在我还不会游泳,要知道在我出生之前,我绝对是 游的最快的那个第一章网页设计制作基础 本章要点 通过本章学习,考生应...
web网页设计基础
网页设计基础 18页 免费 网页制作教程 100页 免费 网页设计教程 88页 免费 《网页设计与制作》第一章... 37页 免费如要投诉违规内容,请到百度文库投诉中心;如...
网页制作_图文
网页制作_互联网_IT/计算机_专业资料。第一章:网页制作基础 1 网站的概述 1) 网站的构成元素 2 初识 Dreamweaver 3 Dreamweaver CS5 的用户界面 4 网页文件的...
更多相关标签: