网页设计与制作基础知识.ppt
《网页设计与制作基础知识.ppt》由会员分享,可在线阅读,更多相关《网页设计与制作基础知识.ppt(81页珍藏版)》请在三一文库上搜索。
1、,主讲人:物理与电子工程学院 张亮,网页设计与制作 概述,教学内容,概述 HTML Dreamweaver Firework CMS,考核,平时作业(40%) 期末考试 (个人网页)(60%),主要教学环节,五、知识讲解与操作示范,一、课程引导,二、明确知识技能目标,三、展示网页浏览效果,四、分析操作任务,六、课堂模仿实践,七、疑难解析,八、归纳总结,九、布置习题,网络计算机网络在信息时代中的作用,21 世纪的一些重要特征就是数字化、网络化和信息化,它是一个以网络为核心的信息时代。 因特网是自印刷术以来人类通信方面最大的变革。 现在人们的生活、工作、学习和交往都已离不开因特网。,Interne
2、t的历史,20 世纪 60 年代美苏冷战时期的产物。 第一阶段是从单个网络 ARPANET 向互联网发展的过程。 第二阶段的特点是建成了三级结构的因特网。 第三阶段的特点是逐渐形成了多层次 ISP 结构的因特网。,用户,因特网,ISP1,ISP2,因特网 服务提供者,根据提供服务的覆盖面积大小以及所拥有的 IP 地址数目的不同,ISP 也分成为不同的层次。,Internet提供的主要服务,WWW服务(网上冲浪) 电子邮件服务(Email) 网上传呼(OICQ) 文件传输(FTP) 网络游戏,网络协议,网络复杂性、异构性 为计算机网络中进行数据交换而建立的规则、标准或约定的集合。 TCP/IP
3、HTTP(HyperText TransferProtocol超文本传输协议) FTP,WEB简介,一、网页设计相关概念,2.WEB服务器及客户机,一、网页设计相关概念,客户端浏览器:通过在地址栏中输入Web服务器地址从而访问Web服务器的软件; 目前主要是Internet Explorer(IE)和Netscape:,一、网页设计相关概念,浏览网页的工作过程,用户通过浏览器发出请求 WEB服务器接到请求后选择相应的网页发给用户的浏览器 浏览器接收到网页文件(HTML文件)后,根据HTML标记符解释和显示各种内容。,浏览网页的工作过程,一、网页设计相关概念,用URL发出请求,送出网页,http
4、:/,客户机,统一资源定位器(URL) URL的全文为Uniform Resource Locator,译为统一资源定位器 用于指定要取得的Internet上资源的位置与方式,超链接(Hyper Link)超链接是特殊的文字标记,它指向了万维网中的其他资源,如另外一个网页、一个声音文件,或者是网页的另一个段落等,而且这些资源均可以存放在任何一个服务器上。 在浏览网页时,如果你用鼠标单击超链接,那么就会跳转到超链接所指向的资源,二、 网页、网页设计、网站和主页,以目前的网页技术来说,大致可分为三个方面来加以说明 静态网页(HTML、CSS):仅展示信息 静态网页是用HTML编写,扩展名为.htm
5、或.html。 静态网页只能单纯地在网页中展示文字与图片,它是所有网页的基础技术。 网页美工(Flash、Fireworks) 动态网页(JavaScript/VBScript、ASP) ):可实现互交功能,一个网站的制作流程类似与一个电视节目的制作过程,包括:,四、网站建设的基本步骤及应注意的问题,1.网页设计基本步骤 (1)设计网页栏目及组织结构 (2)准备素材 (3)界面设计 (4)网页排版(页面实现) (6)网页测试与发布 (7)网页推广与维护,2.制作网页时要注意的问题 网页的标题要简洁,明确。 对重点内容要强调显示。 网页中插入的图片要尽量的小。 图形要附加文字说明,以便关闭图像时
6、查看。 网页中引用的资料及商标(或图标),不能侵犯版权。,四、网站建设的基本步骤及应注意的问题,2019/2/24,19,设计并制作网页,图 “网上书苑”网站主页的页面设计,2019/2/24,20,设计并制作网页,图 “网上书苑”网站“文学作品”网页的页面设计,2019/2/24,21,“T”结构布局,2019/2/24,22,“口”型布局,2019/2/24,23,对称对比布局,2019/2/24,24,POP布局(自由布局),版式设计的构成类型,在网页设计中较常见的网页版式构成类型主要有:水平分割式、垂直分割式、水平与垂直分割交叉式、斜线式、“S”曲线式、重复式等。,水平分割的页面具有较
7、强的视觉稳定性,给人平静、安定的感觉,返 回,垂直分割强调的是垂线的视觉冲击力,体现坚强、理智与秩序的感觉,返 回,曲线、弧线、曲线形状的应用能够产生运动、韵律的动感,形成富有活力的视觉效果。,返 回,曲形与直形的综合应用是将以上两种线条和形状结合起来运用,不仅能够丰富网页的表现力,还能使网页更富于变化,艺术效果更丰富多彩。,返 回,页面中的点、线、面及留白的处理,点的作用,www2.coca-,线与面的作用,版面的大面积的空白给人以无限的想象空间,留白的运用,点、线、面关系的处理,由文字构成的点、线、面关系的标题与导航按钮,版式设计的构成形式,分割与比例,2019/2/24,36,版面布局与
8、首页设计(草案),应遵循对比、统一、平衡、节奏的原则,2019/2/24,37,5 网页色彩的搭配,色彩是人的视觉最敏感的东西。主页的色彩处理得好,可以锦上添花,达到事半功倍的效果。色彩总的应用原则应该是“总体协调,局部对比”,也就是:主页的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上,可以根据主页内容的需要,分别采用不同的主色调。,非彩色的搭配,黑白两色是最简单基本的搭配,黑底白字,白字黑底都能清晰明了表现网页内容,色彩的搭配,色彩的鲜明性 色彩的独特性 色彩的适合性 色彩的联想性,鲜艳的色彩容易引人注目,与众不同的色彩,人印象强烈,所选色彩和表
9、达的内容气氛适合,不同色彩会产生不同的联想,网页色彩配置的方法,同一色彩的不同明度 使用对比色 使用同类色、类似色 非彩色与有彩色结合,首先确定运用一种色彩,然后调整透明度或者饱和度,将网页背景、文字、边框等元素都控制在此色彩中,只是在明度上有所变化 。,同一色彩的不同明度,返 回,需要你熟悉色环,准备一个色环参考。首先选定一种色彩,然后选择它的对比色。影响对比色配色效果的重要因素在于使用的色调。,使用对比色,返 回,同类色、类似色适合凝造整齐统一的气氛,但是应注意避免缺少对比,而使画面不够响亮。,使用同类色、类似色,返 回,深浅不同的灰色与较单一的有彩色搭配是比较安全的配色方案。非彩色与彩色
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 基础知识
链接地址:https://www.31doc.com/p-2159533.html