网页设计与制作32课时完整理论讲义Word文件下载.docx
- 文档编号:19659644
- 上传时间:2023-01-08
- 格式:DOCX
- 页数:69
- 大小:351.77KB
网页设计与制作32课时完整理论讲义Word文件下载.docx
《网页设计与制作32课时完整理论讲义Word文件下载.docx》由会员分享,可在线阅读,更多相关《网页设计与制作32课时完整理论讲义Word文件下载.docx(69页珍藏版)》请在冰豆网上搜索。
教学
目的
要求
本课程是非计算机专业的专业选修课。
通过该课程的学习,引导学生了解网页、网站、主页和WWW服务器的基本概念,熟悉建立网站以及发布网站的步骤和过程;
掌握使用可视化网页制作工具Dreamweaver建立网站、制作网页的方法;
能够收集制作网页的多媒体素材,熟悉基本的图像处理和动画制作技术;
掌握使用HTML语言的基本知识等。
依据“项目导向、案例驱动、突出实践、关注过程”的教学理念,通过项目和案例,介绍Dreamweaver文本、图片、表格、层、超链接、表单、CSS以及行为和事件的使用方法,最终完成一个专题网站的设计与制作。
重点
难点
了解网页制作和网站建设所需的基本知识,理解HTML语言和CSS样式个属性以及网页设计工具软件Dreamweaver和Photoshop的使用及应用,掌握网页制作和网站建设所需的基本技能。
能够根据任务需求建立客户端的的静态网页和网站。
《网页设计与制作》课程讲义理论学时部分
第一章网页设计概述
授课学时:
授课内容:
1.1网络的概念
1.2网站与网页的概念
1.3相关知识
1.4网页设计师必备的专业素质
基本要求:
重点讲授网站,网页涉及的概念;
了解网页设计涉及的相关概念;
了解网页设计的语言HTML;
掌握学习网页设计的某一种工具;
理解网站和网页的关系。
重点与难点:
重点:
理解网站和网页的关系;
难点:
HTML语言设计,网站和网页的关系。
信息(information),已经成为哲学、自然科学、技术科学和社会科学等各个领域所广泛应用的概念。
随着信息技术的发展,网络成为人们共享信息的必然。
建立网站也就是必然逝在必行。
如何建好网站,如何建立有自身特色的网站将是我们这门课程所要讲述的内容。
1.1网络的概念
1.1.1计算机网络的定义和发展
在20世纪50年代中期,许多系统都将地理上分散的多个终端通过通讯线路连接到一台中心计算机上,这样就是出现了计算机系统。
随着远程终端的增多,在主机前增加了前端机,随着发展,人们有了更深的理解。
把计算机网络定义为“以传输信息为目的的而连接起来,实现远程信息处理或进一步达到资源共享的系统”,这就是网络的趋形。
20世纪70年代至80年代中期计算机网络得到了迅速的发展。
ISO在1984年颁布了OSI/RM。
定义为新一代计算机网络体系结构的基础,这七层模型分别为:
物理层、链路层、网络层、传输层、会话层、表示层、应用层。
目前计算机网络的比较公认的定义是:
计算机网络是指在网络协议的控制下,通过通讯设备和线路来实现地理位置不同且具有独立功能的多个计算机系统之间的连接,并通过网络操作系统等网络软件来实现资源共享的系统。
1.1.2计算机网络的分类
计算机网络分类方法多种多样,常用的方法有:
按网络的拓扑结构分类,按传输介质分类,按速率的分类,按数据交换方式分类以及按网络覆盖的地理范围分类。
按照网络覆盖的地理位置范围的大小分为:
局域网,城域网,广域网。
通常我们说的网络其实多是指广域网。
1.1.3网络的功能
由网络的定义我们可知网络的功能就是数据通讯和资源共享。
1.2网站与网页的概念
1.2.1网站
网站功能:
网站是提供发布信息、收集信息的平台。
网站概念:
简单地说,网站是由网页通过超级超链接有机地集合而成,通过浏览器看到的画面就是网页。
网站的分类:
从网站的目的将网站分为:
企业网站、政府网站、专业网站和个人网站。
网站的管理功能:
故障管理、计费管理、配置管理、性能管理、安全管理、站点信息管理。
网站的地址:
为了使得连入的INTERNET的众多主机和通讯设备在通信时能够相互识别,因而在internet中每台计算机都分配一个唯一的IP地址,每个IP地址是由四个整数组成,每二个整数之间用点隔开例如:
202.112.103.235,其中IP地址的每一个整数都不能大于255。
其结构如下:
计算机名
组织机构名
网络名
最高层域名
在INTERNET中把IP定义了五类地址,即A,B,C,D,E类地址。
1.2.2网页
(1)网页制作的基础知识
人们在通过INTERNET获取信息的同时,纷纷建立自己的主页和网站,向世界展示自己。
一个网站可以包含一个或多个网页,这些网页以一定的方式连接在一起,成为一个整体,供人们观赏和为人们提供服务。
一个成功的网站的建设离不开其中每一张制作精美的网页。
(2)HTML语言
超文本文件的格式早在1945年就由VannevarBush提出,他在理论上建立了一个超文本文件系统。
1965年TedNelson第一次使用“超文本”一词来形容这种管理信息的系统。
与Bush一样,他的超文本文件系统“Xanadu”,最终也未获得成功。
1967年,在IBM资助下,世界上第一个真正运行成功的“超文本编辑系统”建成,这项研究由AndriesVanDam主持,在美国布朗大学最终完成。
1969年,美国国防部高级研究计划署建立了ARPA网,该网络最成功的技术就是TCP/IP协议。
超文本标识语言(HyperTextMarkupLanguage,HTML)的HTML最早版本起源于1992年,HTML4.01版于1999年12月24日被推荐使用。
HTML最初用于发布信息,并没有在网络上使用。
但它那极容易使用的显著特点和随着网络带宽的逐渐增加,人们便将其作为网络上发布信息的首选语言。
超文本标识语言的领头先锋是美国麻省理工学院计算机科学实验室的WWW标准化组织,又称万维网联盟,其互联网地址为:
http:
//www.w3c.org。
有关HTML语言的各种参考资料和W3C行将发布的各种新版特征、最新消息等内容,均可以在这个网站上查到。
此语言可以把网页里的文字、表格、图象、动画、声音和视频等等有机地组织在一起,构成一种超文本标记语言(HTML)。
HTML语言生成扩展名是.HTM或.HTML的文件。
HTML语言是标准的ASCII文件,由一对标记,<
HTML>
和<
/HTML>
组成,内容包括文件的头,文件的主体,文件结尾三部分。
(3)网站与网页的关系
网站是一个主体,是“框架”;
网站突出一个主题;
网站的目标是组织;
网站好比一本画册。
网页是被包含于网站之中的个体,是“砖瓦”;
网页围绕网站主题各分项,丰富和烘托主题;
网页的目标是表现;
网页好比画册中的每一个分页。
1.3相关知识
(1)网页制作的工具
虽然HTML语言是功能强且语法简单的网页设计语言。
但是,直接用HTML在普通的文本编辑器上编写制作复杂精美的网页是很不方便的。
网页设计者不得不花大量的时间去测试所写的文档是否合乎其语法规则,又不能在网页设计的同时就了解文档在浏览器上地显示的确切效果。
其次要记忆、掌握大量的HTML语言地语法规则也不是一件容易的事情。
而现在可视化网页设计工具可以使得设计者网页设计轻松自如。
网页设计的工具很多,当前流行的工具有:
Frontpage:
它是建立和管理专业网站的简易工具,用户可以精确地将网页中的每一个元素放置在网页地任意位置上;
用户可以自定义主题。
它具有方便地数据库管理功能,还能提供灵活的网页发布工具。
Dreamweaver:
它是Macromedia公司设计推出,可以最快的方式将Photoshop等文件移至网页;
它能够通过网站地地图快速制作网站雏形、设计、更新和重组网页;
提供了可视化编辑与原代码编辑同步的设计工具;
集成了动态出版可视编辑及电子商务功能,在动态网页设计中网页的预览无需通过浏览器;
利用它设计的网页一般不受平台的限制。
Flash:
它能制作可任意放大的动画,使用方便,它提供的交互动画文件容量很小,它的使用流技术播放动画。
以上三种网页设计工具通常称为“网页设计三剑客”。
网页设计的工具很多,常用的还有Interdev,HotmetalPro等等。
这里不做一一介绍。
(2)网页设计
早期的网页外观是静态的,只有文字与静态的图片,用户只能被动地阅读网页制作者提供的信息。
其网页的内容也是静态的,若无外来干预,其内容不会自动改变,也无法通过网页实现与访问网页者交互信息的功能。
因此,为了克服静态网页的呆板、缺乏交互性等缺点,使网页变得绚丽多彩、充满互动性,动态网页便应运而生。
动态网页技术包括网页的动态表现技术与网页的动态内容技术,前者是网页外观的动态表现技术,如GIF动画、FLASH技术、DHTML(动态HTML)技术、VHTML(虚拟HTML)技术、VRML(虚拟实现造型语言)技术等。
而网页的动态内容技术是通过一定的计算机语言编程如CGI、ASP、JSP等,使得计算机按照网页设计者设置的网页格式,生成所需要内容的网页并传送给访问网页者浏览。
(3)音频与视频
随着多媒体技术的发展,人们已经不满足简单的文件传输,电子邮件,远程登陆等网络应用。
人们希望网络提供实时交互的服务,如:
视频会议、视频点播、远程多媒体教学和网上购物等。
音频:
通过计算机的声卡等多媒体设备来实现声音的传输和播放。
一般有Wave波形音频、MIDI音频和CD音频,MP3
视频:
通过视频采集和处理实现图象的传输和播放。
一般有AVI,MOV,MPEG等格式的文件。
(4)简单介绍HTML语言的设计
Html语言设计的代码书写可以在写字板或记事本等一些编辑平台中实现。
下面举一个简单的实例来说明HTML语言的书写过程和其结构
例1.1含有超文本标识的网页源程序。
<
HEAD>
TITLE>
含有超文本标识的网页源程序<
/TITLE>
/HEAD>
BODY>
<
H2>
读书人的三个意境<
/H2>
OL>
LI>
昨夜西风凋碧树,独上高楼,望尽天涯路。
衣带渐宽终不悔,为伊消得人憔悴。
众里寻她千XX,蓦然回首,那人却在灯火阑珊处。
/OL>
MARQUEEbgcolor="
#87CEFA"
width=75%scrollamount=1>
⒈昨夜西风凋碧树,独上高楼,
望尽天涯路。
/MARQUEE>
#FFC900"
behavior=alternate>
⒉衣带渐宽终不悔,为伊消得人憔悴。
FONTsize="
3"
color="
#FFFFFF"
>
#FF4500"
⒊众里寻她千XX,蓦然回首,那人却在灯火阑珊处。
/FONT>
/BODY>
例1.2简单的表单设计
formaction=/cgi-bin/post-querymethod=post>
您的姓名:
inputtype=textname=网址value=http:
//>
br>
密码:
inputtype=passwordname=密码>
inputtype=submitvalue="
发送"
inputtype=resetvalue="
重设"
/form>
1.4网页设计师必备的专业素质
网页制作是一个系统工程,一个网页的优劣完全取决于设计者的综合素质和动机。
不仅仅是一个技术的问题,还要重视艺术性。
并且不可以偏废。
技术是基础,艺术是升华,艺术效果表现用技术来实现。
好的网页让人留恋往返。
这不仅仅是技术的高超,而是艺术效果吸引了浏览者的眼球。
所以这是一个综合的系统的工程。
小结:
网站是爸妈,网页是她们的孩子;
爸爸妈妈的行为影响她的孩子,也是孩子成长的灯塔;
她的孩子优秀也使得爸爸妈妈荣光。
没有爸爸妈妈的孩子是无人问,没有孩子的爸爸妈妈只能孤独一生。
第二章网页赏析
1
2.1网页设计与网站主题
2.2各类网站的设计总体框架
2.3网页颜色的使用风格
2.4网页赏析
初步了解网页赏析要求;
理解网页赏析的理论要求;
掌握网页突破性设计的要素;
分清各类网站的设计要求和框架;
理解实例分析过程。
网页的赏析分析。
导入新内容:
网页界面的构成要素,除了有传统媒体的文字、图形、色彩等基本构成要素以外,还有声音、视频、动画等多媒体要素,以及其他一些特效和交互功能。
正因为如此,对于网页的赏析、评测也将是多角度、全方位的。
虽说网页界面设计与平面设计非常类似,但也存在着一个很大的差异,那就是网页界面作品具有明确的实用功能,而一般的艺术作品只具单纯性观念。
实际赏析和评测网页界面作品的第一点,是看它是否具有完整的功能,其次才是它的艺术效果。
优秀的网页界面作品应该是实用的物质功能与审美的精神功能完美的结合。
每一个人由于经历、经验、思维方式的不同,对事物的看法、认识常常也是不一样的。
网络的基本特征是资源共享,互联网是大众化的网络,是“平民”网。
虽然为了追求较完美的界面设计,我们在后面章节将从较专业的角度做了一些探讨,但是为了使“平民”能够接受,能够认同,网页的界面设计应该贴近大众,应该服务于大众。
这就要求我们站在一般浏览者的角度,去设计、审视、理解网页作品。
“平民”没有理解达芬奇蒙娜丽莎的微笑,但是知道蒙娜丽莎时时刻刻都是淡淡幸福的,能给人们带来无限的快乐。
不同的环境不同的心情看到相同的网页都有不同的理解,给人的感受肯定也是不一样的。
所以赏析无定规,只看自已识同,用自己的认识水平去理解。
纷繁复杂的社会造就了五彩缤纷的网页。
形态各异的网页最终谁能够占领市场,其相关的要素很多。
但是与网页的设计界面关系是不可以忽视的。
一个网页的页面设计完美,震撼,给人们心灵的触动,必然会在市场中有很高的点击率。
如何设计点击率高的网页,我们应该从心理学的角度来考虑设计方案和组织。
心理学中说到“注意”是人的心理对一定对象的选择集中。
纷繁复杂的世界,有限的人的大脑只能在众多的事物中挑选某些特定的对象或说事物来进行反映,而不管其他的事物。
所以说“注意”是贯穿心理活动的始终。
所以我们经常说“心无二用”酒就是这个道理。
网页设计也是一样,要使得人们去点击,必须设计出合乎人的心理的网页界面。
设计网页的时候要按照如下几点来来组织设计:
【1】有强烈的刺激:
一道强光,一声巨响,一种鲜艳的颜色等,这些都会引起人们的注意;
【2】有引人的兴趣:
凡能满足人的需要,符合人的直接兴趣的事物,都容易引起人的注意。
象球讯能引起球迷的注意,音乐广告可以被音乐爱好者的注意,有知识性的信息会给渴望得到的人的注意。
有兴趣的话题,就会吸引相应的人群。
【3】有巧妙的创意:
创意给人震撼,一种心灵的触动,让人们有如听小说“欲说后事如何,且听下回分解”,“余音绕梁,三日未绝”,给人期待。
总之,在设计网页之前,必须了解访问者的心理,需要了解访问者的浏览网页的感受,了解他们的耐心程度、年龄和性别,并了解他们浏览站点是为了娱乐、信息还是其他,这会给建立站点时确定色调和个性起到了十分重要的作用和决定性的影响。
所以如果要想在众多竞争对手中脱颖而出,在设计时要综合考虑众多因素:
从技术角度看要尽量减少带宽消耗因素,使网站去芜存精,删除不必要的细枝末节,让低速访问者也能得到较为理想的访问速度;
从访问者的角度看要适当加入声音和视频等多媒体内容,做到有声有色,花开有声。
2.1网页设计与网站主题
网页设计与网站主题之间的关系归纳起来有三点,第一,设计应满足主题的要求,应该为主题服务;
第二,设计使艺术和技术交融,应该是艺术和技术的完美结合。
就是说,在保证“美”的前提下,不丧失网站的“功能”;
第三,无论是“美”,还是“功能”,都是为了更好地表达网站的主题思想。
当然,网站不同,其主题通常也会不同,对于“美”与“功能”的取向也有所不同。
例如,我们常用的搜索引擎Google、XX、一搜等,它的功能就是“搜索”,所以说“功能”就是它的主题;
而对于某些功能较单一的网站,如个人网站,可以以“美”作为网页设计的目的,它完全可以冲着一个“美”的主题去体现自身的理念,所以说“美”就是它的主题;
又例如门户网站,网易、新浪,还有如全球著名的电子商务零售网站亚马逊等,“内容”就是它们的主题。
网页设计的优秀与否,取决于设计师对主题的理解与掌握程度,好的页面设计肯定是服从于网站主题,鲜明地突出网站的诉求主题。
要使网页从形式上获得良好的诱导力,可以通过对网页的空间层次、主从关系、视觉秩序以及彼此之间的逻辑性来把握运用。
2.1.1网页突破性设计的要素
•主题鲜明:
网页设计的优秀与否取决于设计者对主题的理解和把握程度,好的网页肯定服从于网站的主题,鲜明地突出网站的诉求主题。
网页没有表达网站的主题就好象痴人说梦。
没有逻辑,没有条理性,无意义可谈。
•色彩多变:
色彩是自然美、生活美、艺术美的重要组成部分。
它代表着情感(绿色代表生命,红色代表热情,白色代表纯洁,蓝色代表深邃),代表着生活。
没有色彩的世界是死寂而平淡的。
•在主题明确的前提下,网页可以用丰富的色彩来烘托主题,让浏览者耳目一新的感觉。
给人清新,如坐春风,吃人生果,让人感觉身上三万六千个毛孔都渗透着激情。
但多变的色彩不要干扰了浏览者的易读,不可以浓妆艳抹,脱离主题。
•文化底蕴厚实:
要有文化底蕴,让人回味,让人期待;
没有文化的网页也只能算是过眼烟云,随风而去,不留痕迹。
(“简约而不简单”广告语)
•表现夸张:
针对某一内容,用夸张的形式表现,来一个艺术的夸张,给人一个全新的理念,全新的概念,全新的感受。
•常规突破:
现在很多设计师突破常规思维,实现主题的表现。
•合理的结构:
网页是传播信息的载体,其结构由各种视听要素组成,以满足人们实际的目标而设计。
从整体结构上看其合理性,形式上丰富有条理,组织上有秩序,不单调,不混乱。
总之,欣赏、评析一幅网页作品可以从主题的鲜明性、独创性、结构的合理性、色彩的艺术性以及内容的针对性。
最根本的是不能偏离主题,只有保证在正确的方向的前提下才能创新设计、合理布局、“涂脂抹粉”、才能获得有效设计;
否则,偏离主题的设计再好也只能“束之高阁”。
2.2各类网站的设计总体框架
(1)门户类网站:
门户类网站是互联网中的巨人,通常分为专业领域与搜索引擎类网站,拥有庞大的信息量和用户资源是这类网站的优势。
门户网站将无数信息整合,分类,为网上访问者打开了方便之门。
调查显示,大多数浏览者都是通过门户类网站来寻找它们感兴趣的信息资源,巨大的访问量给这类网站带来了无限商机。
(2)产品类网站:
生产与消费是维系社会发展的两大重要支柱,而将两者结合起来的就是形形色色的产品:
从传统的衣食住行到现代的通讯、软件、数码产品,浏览者都可以轻易地在互联网上找到。
立足生产厂商的角度开发的产品网站是互联网开发的一种重要的形式,借助不断涌现的更具有人性化的网上营销模式,生产厂商得到了产品国际化的流通渠道和便捷、价廉的信息反馈。
事实上电子商务已经悄悄地走进了人们地日常生活。
1.从网站设计的角度出发,产品类型的网站重要的是要突出产品的个性,将产品个性与精美的设计融会贯通才是这类网站中的上品。
(3)娱乐类网站:
娱乐人物总是人们关注的焦点,如果你是一个明星的超级FANS,那么第一时间更多更近地了解你的偶像,岂不是件乐事?
通过网络,我们可以更全面地了解我们所钟爱的影视明星。
1.娱乐与广告象是对孪生的姐妹,而广告又是支撑互联网的重要支柱,透过这层关系我们也就不难发掘这类网站的黄金本质了。
(4)游戏类网站:
同世界各地的朋友并肩作战,或是棋逢对手地较量一番,真是人生的一大乐事,“游民”是个新兴的网络群体,主要是以年轻朋友居多,理所当然是游戏类网站的主要客户群。
面对如此年轻、庞大的用户群,在线游戏网站及相关的游戏资讯网站也如雨后春笋般应运而生。
1.游戏类网站由于本身固有的强大娱乐性和完善的交互设计经验,使得无数“游民”废寝忘食,这为游戏公司带来了滚滚财源。
随着技术发展的突飞猛进与带宽环境的日渐改善,游戏类网站形式和内容有了很大的突破,可以说在线游戏已经迎来了一个美丽的春天。
(5)时尚类网站:
对于充满活力而不安于现状的人来说,时尚类网站是他们梦想的乐园。
i.时尚像个非常善变的美女,总是让你捉摸不透而难以追逐。
名模、靓衫、宝马、香车总是给人无限的遐思,各种设计理念的交汇与撞击首先在多变的时尚大潮中,进而引发流行时尚的燎原之势。
(6)音乐类网站:
在线音乐的发展经历了一波三折的过程,不论这个有多少起伏,能让一首新歌一夜之间传遍全球的也只有互联网。
i.大多数音乐网站提供乐在线的音乐欣赏,这在一定程度上起到乐传统唱片行业发行方面的推进作用,即便是当初最反对网上传播MP3的SONY唱片不也正在积极寻求在网上销售唱片的新方式吗?
看来防川之水在于“疏”而不在“堵”。
(7)杂志类网站:
杂志类网站是传统媒体融入互联网的新形势,依托原有的影响力以及专业的咨询,轻松地在互联网中站住了脚,这类网站通常还带有书面出版物的很多特征,而实时的资讯更新与反馈使得杂志类网站如虎添翼。
更有很多原来隶属于杂志社的网站由于在互联网上取得的成功,得以独立成为全新的多媒体杂志。
(8)传记类网站:
为名人建一座网上展览馆也是非常有意思的事情,让更多的人去了解他而从中获益,这是数字时代对名人对伟人的纪念方式。
i.目前单纯介绍人物的网站不是很多,面对日趋激烈的竞争形势,对于正在求职的毕业大学生而言,动手制作一个类似的网站将是非常出色的名片,或许能帮助你在众多竞争者中脱颖而出,当然如果参加网上求职岂不是更加方便?
(9)个人类网站:
个人网站是互联网中色彩最为绚丽的风景。
这里提供了充分展示个性的空间,可以说这些多姿多彩的个人网站就是互联网的基石,互联网正是因为亿万人的参与才会如此丰富,也是因为你、我、他的加入才使得互联网深深植根于我们的日常生活。
2.3网页颜色的使用风格
配色最先映入眼帘,它决定了主页的印象
配色是观者访问主页时目光无法回避的设计要素。
在看标题前的一瞬间已被决定了的配色效果不可轻视。
不经意之间,观者对主页的印象就被固定下来。
正如初次拜访别人家,在看清门牌之前,通过建筑物的外观和院子里的树木形状就可以把握那家人的性格一样。
配色印象无法更改
配色形成的印象非常稳固。
不知不觉之间,印入心灵的影像就被牢牢锁定了。
无论后面提供的新闻品质如何,配色效果就如同空气一样无声地环绕着整个主页。
由浅色构成的主页,无论内容多么热烈,与淡淡的气氛混合之后,留下的还是淡淡的回味。
配色不分场所,具有多重效果
插图的内容或标题和配色的印象一致时,就能发挥最大的效用。
欢乐的图画与欢乐的配色相叠加,传递出发自内心的喜悦。
相反,与图画和标语的印象不和谐的配色,会引起混乱,产生破坏性效果。
配色没有专用的场所,它与文字和图画相互协调,发挥着综合性作用。
色调的选择
配色决定印象的主要因素有以下三个:
l色调——鲜艳的色调、柔和的色调…
2色相——同系色、对比色、全色相型…
3对比——强明暗对
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 32 课时 完整 理论 讲义