《网页制作》课件.ppt

1、网页制作绪论,授课教师：杨春节 E-MAIL：,1 基础知识 2 网站的设计 3 网站建设总的趋势 4 个人站点的推销,1.1 基础知识 1.2 Web技术,1.1 基础知识 网页与网站 制作网页的基本工具 美化网页的基本工具,1.1.1 网页与网站 浏览器与Web服务器之间是以页为单位来传送信息。 网页通常成组出现，并且这组网页之间通过超链接相互组织成为反映某个主题的网站。,网站是由网页组成的，网页之间是由超链接来连接的，其连接方式有三种：线性网站、树状网站、非线性网站.,线性网站：一页连接一页,树状网站：分层排列,非线性网站：上述两种网站的结合,1.1.2 制作网页的基本工具 超文本标识语

2、言（HTML） HTML（Hypertext Markup Language）是一种专门用于 Web页制作的编程语言。 FrontPage FrontPage是由Microsoft公司推出的新一代Web网页制 作工具FrontPage使网页制作者能够更加方便、快捷地 创建和发布网页，具有直观的网页制作和管理方法，简 化了大量工作。 Dreamweaver Dreamweaver是由Macromedia公司推出的一款在网页制作方面 大众化的软件，它具有可视化编辑界面，用户不必编写复杂 的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适 合于专业网页编辑人员的需要，同时也容易被业余网友们所

3、掌握。,1.1.3 美化网页的基本工具 Photoshop Photoshop是由Adobe公司开发的图形处理软件，它是目前公 认的PC机上最好的通用平面美术设计软件，它功能完善、性 能稳定、使用方便，所以在几乎所有的广告、出版、软件公 司，Photoshop都是首选的平面制作工具。 Fireworks Fireworks是由Macromedia公司开发的图形处理工具，它的出 现使Web作图发生了革命性的变化。因为Fireworks是第一套 专门为制作网页图形而设计的软件，同时也是专业的网页图 形设计及制作的解决方案。 Flash Flash是美国Macromedia公司开发的矢量图形编辑和动

4、画创作 的专业软件，它是一种交互式动画设计工具，用它可以将音 乐、声效、动画以及富有新意的界面融合在一起，以制作出 高品质的网页动态效果。,1.2 Web技术 Web的面貌已经发生了非常重要的变化， 以访问DBMS和在线商务活动等功能为代表的 动态Web应用程序成为计算机发展的热门技 术之一。 动态Web技术也是基于客户机/服务器结 构的，在总体上可分为客户端扩展技术和服 务器端扩展技术两大类，以客户机/服务器 应用模式为基础,在客户端扩展的技术主要是JavaScript、VBScript、Perl、Applets、ActiveX、XML、CSS和Flash等。,服务器端扩展的技术主要是CGI

5、、ISAPI、NSAPI、SSI、ASP、PHP、JSP和Net等。,1.2.1 客户端扩展技术 客户端扩展技术是指浏览器中集成或增加的支持数据变动的新技术，提高了Web页面的实用化程度。客户端扩展技术可以验证交互数据的合法性，进行数据计算、分类和统计等功能，甚至可以在Web页面内制作游戏程序。 1.2.2 标记扩展 为了让Web“动”起来，HTML本身的标记规则也在进一步扩展和改进，CSS（叠层式表单语言）以精良的界面装饰技术占据了不可替代的技术角色，它允许设计者自己定义Web页面的样式，具有更好的易用性和扩展性。XML（扩展式标记语言）是HTML语言的改良版，支持用户自定义的控制标记，可以

6、有效地降低阅读的复杂性。,1.2.3 服务器端扩展技术,浏览器扩展技术和服务器扩展技术总是联合使用, 动态Web技术的发展主流是服务器扩展技术。动态Web页面最好是服务器和浏览器共同协作，才能达到较好的网络应用效果。,CGI（Common Gateway Interface，通用公共网关接口）是最先发展起来的动态Web技术、是一种接口规范，定义了交互操作中双方必须遵守的规则集。,1.2.4 ASP（ActiveX Server Pages） ASP是微软公司面向大众化的动态Web技术方案，建 立了一整套动态Web服务器环境，可使ASP指令标记 与ActiveX控件程序结合使用，建立高效的动态W

7、eb 应用程序。 ASP指令标记（脚本）使用特殊符号（）加以 标注，例如：。含有ASP脚本的Web 页面以asp为后缀名，全部ASP脚本都在Web服务器 端执行，Web服务器仅将执行的结果发送到浏览器 端。,1.2.5 PHP（Hypertext Preprocessor） PHP也是一种服务器端嵌入式脚本标记语言，其工作原理与ASP和JSP相似，它的特色是高速，比ASP执行速度更快。PHP脚本采用了C、Java和Perl等多种语法格式，源于RedHat Linux，已被很多Internet站点所采用。,1.2.6 JSP JSP（IAVA SERVER PAGES）是由Sun 公司在java

8、语言上开发出来的一种动态网页制作技术，其可使您可以将网页中的动态部分和静态的HTML相分离。您可以使用平常得心应手的工具并按照平常的方式来书写HTML语句。然后，将动态部分用特殊的标记嵌入即可，这些标记常常以“%”开始并以“%”,2 网站的设计 一方面是纯网站本身的设计。比如文字排版，图片制作，平面设计，三维立体设计，静态无声图文，动态有声影像等； 另一方面是网站的延伸设计，包括网站的主题定位和浏览群的定位，智能交互，制作策划，形象包装，宣传营销等等。,网站的定位 将网站设计制作大致列为 定位网站主题和名称； 定位网站广告标志的形象； 网站的目录结构； 网站的整体风格创意设计； 首页的设计；

9、版面布局的窍门 ； 色彩的搭配； 考虑不同的浏览器和分辨率 ； 字体的设置和表格的嵌套等方面的设计提纲。 网站“设计”与网站“制作”，他们的区别在于设计是一个思考的过程，而制作只是将思考的结果表现出来。,2.1 定位网站主题和名称 所谓主题也就是网站的题材。 （1） 主题要小而精; （2） 题材最好是你自己擅长或者喜爱的内容; （3） 题材不要太滥或者目标太高；,2.2 定位网站广告标志的形象（CI形象） 所谓 CI ，是借用广告的术语。 (CI 是英文 Corporate Identity 的缩写 ) ，意思是通过视觉来统一企业的形象。 （中国人网站 、中央电视台网站）,设计网站CI形象 2

10、.2.1 设计网站的标志 (logo) 2.2.2 设计网站的标准色彩 2.2.3 设计网站的标准字体 2.2.4设计网站的宣传标语,2.3 网站的目录结构 网站的目录是指你建立网站时创建的目录。 下面是建立目录结构的一些建议： （1）不要将所有文件都存放在根目录下 （2）按栏目内容建立子目录 （3）在每个主目录下都建立独立的 images 目录 （4）目录的层次不要太深 （5）使用小写字母对文件夹和文件命名,2.4 网站的整体风格及创意设计 风格 (style) 是抽象的。是指站点的整体形象给浏览者的综合感受。 风格是独特的，是站点不同与其他网站的地方。 风格是有人性的。,2.5 首页的设计

11、 确定首页的功能模块 设计首页的版面 处理技术上的细节,2.5.1 确定首页的功能模块 网站名称 （logo）， 广告条 （banner）， 主菜单 （menu）， 新闻 （whats new）， 搜索 （search）， 友情链接 （links）， 邮件 （E-mail）， 计数器 （count）， 版权 （copyright）。 2.5.2 设计首页的版面 在功能模块确定后，开始设计首页的版面。 设计版面的最好方法是：找一张白纸，一支笔，先将你理 想中的草图勾勒出来，然后再用网页制作软件实现。 2.5.3处理技术上的细节 考虑主页在不同分辨率下保持不变形，如何设置字体和链接颜色等等。,2.

12、6 版面布局 版面指的是浏览器看到的完整的一个页面（可以包 含框架和层）。 布局就是以最适合浏览的方式将图片和文字排放在 页面的不同位置。 2.6.1 通常版面布局是按照如下的步骤： (1)草案 (2)粗略布局 (3)定案 将粗略布局精细化，具体化。,2.6.2 通常用到的版面布局形式： (1) “T”结构布局 所谓“T”结构，就是指页面顶部为横条的网站标志加 广告条，下方左面为主菜单， 右面显示内容的布局， (2) “口”型布局 “口”型结构是一个象形的说法，就是页面一般上下 各有一个广告条，左面是主菜单，右面放友情连接等， 中间是主要内容。 (3) 对称对比布局 对称对比结构，是采取左右或者上下对称的布 局，一半深色，一半浅色，一般用于设计型站点。 优点是视觉冲击力强，缺点是将两部分有机的结合 比较困难。,2.7 网站色彩的搭配 (1)非彩色的搭配 (2)彩色的搭配 (3)网页色彩搭配的原理 (4)网页色彩搭配的技巧,3 网站建设总的趋势 3.1 中文网站的诞生 在最初（大概是97年）的网站建设中，中文的网站 并不多，而且功能有限;对于当时较大商业网站，规模 也不大，编辑、美工、后台、网管的分工也不细致，也 没有网站项目严格的管理。 3.2最初的建设技术 HTML、CGI、Firewor