你的位置:简易下载站 > 文章教程 > 平面设计 > 网页设计 > 网页三剑客教程:网页制作基础教程

网页三剑客教程:网页制作基础教程

来源:本站整理 更新时间:2013-04-11 收藏本页(Ctrl+D) 评论()
网页三剑客教程:网页制作基础教程手机扫描查看
扫描二维码

第1章: 网页制作基础(学习指南)
                                    
 学习目标:
    理解网页的基本概念
    掌握网页设计的基本步骤
    了解网页制作的基本工具
   
 要点:
    WWW、Internet、HTMl等专业术语的解释
    站点规划、站点导航、站点风格等的具体规则、实施情况  
 
第1章 网页制作基础(第1节)

1.1 什么是网页

1.1.1 Internet与WWW
  计算机网络:是多台计算机通过特定的连接方式构成的一个计算机集合体,它是Internet的基础,在这个集合体中使用一套共同遵循的规则,即网络协议,实现网络中设备的相互沟通。

  Internet的理解
  普遍观点:是由数百万台计算机和数以千万计用户组成的全球范围内的计算机互联网络,是一个世界范围内信息资源的大型集合体系。  
  网络专家观点:一个基于TCP/IP的网络,它由分布在各个国家的数以万计的网络互连设备组成,其间布满了复杂的通信线路,每台计算机在网络中所独有的标识——IP地方,已经无时无刻不在流动着的数据——IP数据包,IP数据包在通信协议的控制帮助下,能够从发送信息处准确地传达到接受信息的目的地。
  社会学家观点:是一个虚拟社会,是一个世界地球村,在Internet中能够找到现实生活中的某些特征和事实。
   Internet上提供各种服务,供上网的用户使用,包括:WWW服务(网页浏览服务)、电子邮件服务、网上传呼、文件传输、在线聊天、网上购物、网络炒股、联网游戏等等。
  
  WWW(World Wide Web)
  它是由遍布在Internet上的称为Web服务器的计算机组成,它将不同的信息资源有机地组织在一起,通过一种叫做“浏览器”的软件进行浏览。
  基本工作过程:首先用户要连接到Internet,然后在浏览窗口中输入一个Internet地址(该地址通常对应于一个网页)并按[Enter]键后,请求显示Internet上的某个特定网页。这个“请求”被浏览器通过电话线等网络介质传送到用户所在的服务器端,然后服务器作出“响应”,再通过网络介质把用户请求的特定网页传送到用户所在的计算机,最后由浏览器进行显示。当用户在页面中操作时,如点击其中的超连接,则这种“请求”又会通过网络介质传送到提供相应页面的服务器,然后还是由服务器作出响应。

1.1.2 网站与网页
  网页是构成Web服务器这样一个庞大资源集合的元素,网页中包含“超连接”,将一个网页连接到其他网页,构成了万维网的纵横交错。
  网站是通过超连接起来的一系列逻辑上可以视为一个整体的一些网页的集合,通常为了完成某个特定目标。

1.1.3 网页的本质
   网页的本质就是HTML源代码,网页是用HTML写成的文档。HTML(HyperText Markup Language,超文本标记语言)是表示网页的一种规范,它通过标签(也叫做标记符)定义了网页内容的显示。

 
第1章 网页制作工具(第2节)
1.2 网页制作工具

1.2.1网页编辑工具
  网页编辑工具的作用就是用直观的方式将网页制作的过程实现,目前的编辑工具将HTML代码的生成自动化,用户实际操作的结果就是最终生成的网页效果,即HTML文档,所见即所得。目前应用广泛的网页编辑工具:Dreamweaver和Frontpage

  1.Dreamweaver
  Macromedia Dreamweaver是一种专业的网页编辑工具,用于对Web站点、Web页和Web应用程序进行设计、编码和开发。它提供了非常友好的用户界面和强大的功能,与目前流行的Flash技术紧密结合,已经成为专业用户和普通用户的*网页开发工具。

dreamweaver cs6 中文版
//www.3987.com/soft/3/90/27494.html

dreamweaver cs5 中文版
//www.3987.com/soft/3/90/6163.html

dreamweaver cs4 中文版
//www.3987.com/soft/3/90/3621.html

dreamweaver cs3 中文版
//www.3987.com/soft/3/90/9710.html

  2.Frontpage
  Frontpage也是一款非常*的网页(网站)制作与管理软件,继承了Office系列软件界面通用、操作简单的特点,十分适合初学者使用。

FrontPage2003简体中文精简版
//www.3987.com/soft/3/90/30007.html

frontpage2003官方免费版下载完整版
//www.3987.com/soft/3/90/3467.html

1.2.2素材处理与创作工具
  一个完整所网页除了HTML源文件外,还需要其他一些诸如图像、多媒体等文件,这些文件在网络上传输通常需要对原始素材进行一些处理,例如图像优化、格式转换等,同时,为了获得*的显示效果,还需制作一些特效,这些工作的完成需要素材处理工具协助,具体工具如下:

  1.Photoshop
  图形图像处理软件,由Adobe公司出品,能够实现各种专业化图像处理。另外公司还将Image Ready与Photoshop捆绑,用户可以方便地制作和处理各种Web图像效果。

Photoshop CS6 中文版
//www.3987.com/soft/5/125/27873.html

Photoshop CS5 中文版
//www.3987.com/soft/5/118/16779.html

Photoshop CS4 中文版
//www.3987.com/soft/5/125/9753.html

Photoshop CS3 中文版
//www.3987.com/soft/5/125/5257.html

  2.Fireworks
   Macromedia公司首先Web图形工具软件,Fireworks将功能完全集中在Web上,同时又提供了许多独创的只适合于Internet的功能,是立足于Web应用而建立的。

fireworks cs6 中文版
//www.3987.com/soft/5/118/29942.html

fireworks cs5 中文版
//www.3987.com/soft/5/125/16944.html

fireworks cs4 中文版
//www.3987.com/soft/3/90/9764.html

fireworks cs3 中文版
//www.3987.com/soft/5/125/4255.html

  3.Flash
  目前较流行的一种Web矢量动画软件,建立了Web上交互式矢量图形和动画的工业标准。其图形是压缩的矢量图形,不会因为缩放导致影像失真,并采用网络流式媒体技术,可以在网上迅速传输,突破了网络带宽的限制。

flash cs6 中文版
//www.3987.com/soft/5/119/27497.html

flash cs5 中文版
//www.3987.com/soft/4/273/27584.html

flash cs4 中文版
//www.3987.com/soft/4/110/27495.html

flash cs3 中文版
//www.3987.com/soft/5/119/9856.html

  4.Anfy
  一种常用的Java特效生成工具,以简明的方式实现多种复杂的Java效果,可以在Internet上下载使用该软件。

anfy(java网特特效制作)v1.45简体中文版
//www.3987.com/soft/3/hlep/30005.html

  5.其他
  其他一些可用于完成某些特定功能的:用于矢量绘图的Illustrator、Corel DRAW和FreeHand,用于制作GIF动画的GIF Animator,用于制作3D特效的Cool 3D等。

illustrator cs6 中文版
//www.3987.com/soft/5/125/28819.html

coreldraw x6中文版
//www.3987.com/soft/5/125/27084.html

 
第1章 网页制作基础(第3节)

1.3 如何制作网页
  网站(网页)的建设通常都遵循一个基本的流程:规划阶段、设计阶段、开发阶段、发布阶段与维护阶段。

1.3.1规划站点
  1.建立目标规划书
  网站规划过程中,必须首先明确网站的目标,建立网站实现怎样的目的;目标确立后,要编辑成文档并打印出来,作为以后所有工作的参考。

  2.定义、分析目标用户
  访问Internet的浏览者地域、浏览器、连接速度等均不同,定义使用网站的特定目标用户,从他们的角度出发,考虑他们的需求,*限度地与目标用户的愿望统一,实现建站的目标。
  在这一阶段,需要掌握一些典型目标用户的基本信息。

    如:他们的兴趣,他们希望所获得的信息;用户技术上的问题等等。一般采用的方式有文卷调查,实际考察,网站获得反馈信息等。

  3.确定站点的风格
  站点的整体风格即网站内容的表现形式,包括网页所采用的布局结构、颜色、字体、标准图形和图像等。具体如下几种:

  信息式
  界面以文字信息为主,布局整齐划一,简洁明快,每层次页面都会有一个导航系统,顶部区域使用较有特色的标志,顶部中间是广告横幅,其他部分是较多的文本超链接。此类网站例如:“新浪”、“搜狐”、“网易”等。

  画廊式
  该类网站以个人网站或公司网站为典型代表,表现形式主要以图像、动画和多媒体等高新网路技术为主,表现个儿特色或公司理念浓厚,其特点是页面布局或时尚新颖,或以严谨简约,注重表现企业或个人形象与文化特征。

  综合式
  基于以上两种风格结合的网页,即文字与图像或其他网络媒体技术的结合体。

第1章 网页制作基础(第3节)

1.3.1规划站点(续)
  4.考虑网络技术
  网络因素将影响目标用户的网页下载显示及使用。
  带宽因素
  网络带宽是指通讯线路上一定时间内的信息流量,一般用来表示网络的信息传输速度。网页设计时应使预计的下载时间少于8秒钟。提高下载时间分方法就是减少页面中的图像大小和数量。
  浏览器与分辨率
  参考基准:在Windows操作系统下,使用IE4.0以上版本的浏览器,并且将显示器的分辨率设置为800×600象素。
  即时交互与插件
  如果提供即时交互,网页中需要加入JavaScript脚本,服务器技术(如ASP、PHP等),或使用实现交互式功能的对象(如Flash对象、Authorware对象等)。(插件指浏览器中安装的能够用来播放特定对象的程序)

1.3.2设计站点
  1.建立站点目录结构
  做法:先将站点中的各种信息资源进行整理、归类,然后在计算机硬盘上新建一个站点文件夹,再根据需要在文件夹中新建若干个子文件夹,将不同类型的文件存放在站点中,最后在这个站点根文件夹中新建一个主页文件。
  网站命名规则:
  (1)*使用小写英文名称(可以用汉语拼音代替),中间无空格。一般不使用中文文件名。
  (2)可以包含数字或下划线,如,class_1.htm、chap_1.htm等。
  (3)注意正确的文件扩展名,一般由相应软件自动添加,如,网页的“.htm”或“.html”,图片的“.gif“

  2.设计导航系统
  导航系统实质上就是一组使用了超链接技术的网页对象(包括文字、按钮、小图片等),他们将网站中的内容有机地连接在一起,是浏览者获取网页信息的基本界面。

 
第1章 网页制作基础(第3节)
1.3.2设计站点
  导航的分类
  文本导航:基于文本的超链接,实用高校,速度快,是使用最普遍的一种导航方式。
  图片导航:使用图像、按钮吸引访问者,让用户点击,多用于个人站点或是公司网站。
  图像映射技术导航:浏览者点击图像不同区域(也称热点)时,会跳转到不同的页面。

  导航设计原则
  通过最少的点击次数得到最多的信息量,根据页面内容的逻辑关系制作网站的导航系统。

  导航设计要点
  (1)浏览者应该能方便地知道他们现在正处于网站中的什么位置,即要提供页面的位置信息
  (2)在页面中提供返回首页或上一级页面的超链接
  (3)提供与站点制作者联系的电子邮件链接
  (4)整个导航系统的风格应该一致,否则会使浏览者产生已经离开网站的错觉

  3.设计页面的版式
  页面版式是如何安排网页中的元素(包括文本、图像、动画等),或者说用什么形式表现网页的内容,网页中要放置些什么内容,包括导航栏、文本、图像或其他多媒体信息的详细数目。

  设计版面应注意一下两点:
  (1)以网站目标为准绳,*限度地体现网站的功能
   (2)形象简明,易于接受

  4.网页中的颜色
  通过设置文本颜色、背景颜色、链接颜色以及图像颜色,可以构造出很多网页布局效果。

设计颜色方案遵循规则:
   (1)保持一致性。若选择一种颜色作为网站的主调色,要保持这种风格,使图像和多媒体信息的颜色与之匹配。
  (2)注意可读性。

 
第1章 网页制作基础(第3节)
1.3.2设计站点

  5.文字、图像、、等对象的使用
  为确保网页中的所有的字体能够被访问者的浏览器正确显示,中文网站中的字体*使用默认的“宋体”“楷体”“黑体”等基本字体,并使用“样式”对站点的文本进行统一管理。对于特殊字体可以使用图像处理软件将文字制作成图片,然后放置在网页中。在使用时要考虑他们的数量和质量对网页下载速度的限制。

  6.收集和制作素材
  需要准备的素材:图像、动画、文本以及其他多媒体信息。一般可以在网上免费下载或是购买光盘素材,自己制作则更佳,可以体现自己的设计风格。

1.3.3制作网页
  具体实施设计结果,将站点中的网页按照设计方案制作出来,通过Dreamweaver等软件在各个具体网页中添加实际内容,包括文本、图像、声音、Flash电影以及其他多媒体信息。需要注意的是在这个阶段一定要对网页进行反复测试,修改,确保网页最终显示结果与设计结果相同。

1.3.4网站发布与维护
  为了使用户可以访问站点,需要发布站点,首先向ISP申请网页空间,得到有关远程站点的基本信息(包括用户名、主机地址、用户密码等),然后使用FTP软件或者Dreamweaver进行网站上穿。发布成功后,应根据访问者的建议,不断修改或更新网站中信息,从浏览者的角度完善网站。这个周而复始的过程构成了网站的维护过程

相关阅读

看完这篇文章有何感觉?

软件评论

表情 em_1 em_2 em_3 em_4 em_5 em_6 em_7 em_8 em_9 em_10 em_11 em_12 已有条评论,点击全部查看

(您的评论需要经过审核才能显示,请文明发言!)  

剩余字数:

点击图片更换

简易文章资讯频道声明

1、 所有来源标注为简易下载站或简易文章的内容版权均为本站所有,若您需要引用、转载,请注明来源及原文链接即可,如涉及大面积转载,请来信告知,获取授权。

2、 本站所提供的文章资讯等内容均为作者提供、网友推荐、互联网整理而来,仅供学习参考,如有侵犯您的版权,请及时联系我们,并提供原文出处等,本站将在三个工作日内修正。

3、 若您的网站或机构从本站获取的一切资源进行商业使用,除来源为本站的资料需与本站协商外,其他资源请自行联系版权所有人。

4、 未经简易下载站允许,不得盗链、盗用本站资源;不得复制或仿造本网站,不得在非简易下载站所属的服务器上建立镜像,简易下载站对其自行开发的或和他人共同开发的所有内容、技术手段和服务拥有全部知识产权,任何人不得侵害或破坏,也不得擅自使用。

关于我们 | 网站帮助 | 网站声明 | 广告合作 | 友情链接 | 站点地图 | RSS |
中国互联网举报中心 网络违法举报中心 垃圾信息举报中心 闽公网安备 35020302000785号

本站资源均收集整理于互联网,其著作权归原作者所有,如果有侵犯您权利的资源,请来信告知,我们将及时撤销相应资源。

Copy 2019 jyrd.com. All Rights Reserved. 闽ICP备18012540号-2