《网页设计与制作》讲义-专题1-网页设计基础知识

数字媒体与技术专业《网页设计与制作》讲义刘巧丽专题1网页设计基础知识1.1认识网站、网页与主页1.1.1什么是网页网页（Web页）实际上就是HTML文件，是一种可以在网上传输，并能被浏览器认识和翻译成页面的文件。HTML是“HyperTextMarkupLanguage”的缩写，意为“超文本标记语言”，它是一种规范，一种标准。它是纯文本格式的，用任何文本编辑器都可以打开编辑。网页包括的主要元素有：文本、图像、动画、声音、视频、超链接、表格、表单等。由于多数网页一般均有文字、图像、图形、动画、音频、视频等多媒体信息，具有超链接、并可与网络链接，因此这就使人们登上站点以后，便可以看到五彩缤纷的界面。那么，这些五彩缤纷和千姿百态的Web网页是如何制作出来的？制作好网页以后又如何将它发布到Internet上？这些问题正是本课程所要阐述的主题。1.1.2什么是网站多个相互之间具有一定联系的网页就构成了一个网站。网站用于存储提供给用户浏览的网页文件。它也是一种文档的磁盘组织形式，由文档和若干文件夹组成，文档经过组织分类分别放在不同的文件夹中。网站存储在服务器或服务器的虚拟主机上，接受访问者通过域名的访问。网站是具有独立域名、独立存放空间的内容集合，这些内容可能是网页，也可能是程序或其它文件，一个网站不一定要有很多网页，主要是有独立域名、独立存放空间，即使只有一个页面，也叫网站。网站按照其内容可以分为以下几类：1、企业网站：围绕企业、产品及服务信息进行网络宣传，通过网站树立企业网络形象。2、个人网站：个人为了兴趣爱好或为了展示个人等目的而建的网站，具有较强的个性化特色。3、门户网站：提供综合性互联网资源的网站。国内著名三大门户网站：网易、搜狐、新浪。4、机构网站：政府机关、相关社团组织或事业单位建立的网站。以机构或社团形象宣传和政府服务为主。5、娱乐网站：提供娱乐信息、流行音乐、视频等娱乐内容为主的网站。6、电子商务网站：依靠因特网来完成商业活动的各个环节的网站，如卓越、当当、淘宝、易趣、拍拍等。7、行业信息网站：随着因特网的发展，网民数量的增加，上网不同兴趣群体的形成，门户网站已经明显不能满足不同上网群体的需要。行业信息网站应运而生，它是能够满足某一特定领域上网人群及其特定需求的网站。如房地产行业网站。8、专业网站：专门以某个主题为内容而建立的网。如某某课程的网络课程不同类型网站具有不同的风格和作用，在设计网站时，页面元素的设计、构图、色彩搭配、多媒体信息的使用、文本格式等的设计，要考虑网站的类型。1.1.3什么是主页主页又叫首页，主页是网站的第一页，既是一个网站的封面，也是该网站的目录。欣赏几个不同类型的网站主页：问问题题：：主页、网页与网站的关系？先规划土地还是先建房？先建房还是先买家具？先数字媒体与技术专业《网页设计与制作》讲义刘巧丽建网页还是先建网站？1.1.4网页基本构成要素不同性质的网站具有不同的页面元素，但是，一般的网页都会具备以下一些元素：1、标题标题用来说明网站的形式、内容等信息。2、站标Logo网站Logo，也叫网站标志，它是一个站点的象征，也是一个站点是否正规的标志之一。一个好的标志可以很好地树立公司形象。网站标志一般放在网站的左上角，访问者一眼就能看到它。成功的网站标志有着独特的形象标识，在网站的推广和宣传中起到事半功倍的效果。网站标志应体现该网站的特色、内容以及其内在的文化内涵和理念。3、bannerBanner是一种网络广告形式，Banner广告一般是放在网页的顶部位置，在用户浏览网页信息的同时，吸引用户对于广告信息的关注。Banner广告有多种规格和形式，其中最常用的是486×60像素的标准广告。这种标志广告有多种不同的称呼，如横幅广告、全幅广告、条幅广告和旗帜广告等。通常是以GIF、JpG等格式建立的图像文件或Flash文件。4、导航栏—网站索引导航栏既是网页设计中的重要部分，又是整个网站设计中的一个较独立的部分。一般来说网站中的导航栏位置在各个页面中出现的位置是比较固定的，而且风格也较为一致。导航栏的位置对网站的结构与各个页面的整体布局起到举足轻重的作用。5、内容—网站的精神所在文本一直是人类最重要的信息载体与交流工具，网页中的信息也以文本为主。与图像相比，文字虽然不如图像那样易于吸引浏览者的注意，但却能准确地表达信息的内容和含义。图像在网页中具有提供信息、展示形象、美化网页、表达个人情趣和风格的作用。可以在网页中使用GIF、JpEG和pNG等多种图像格式，其中使用最广泛的是GIF和JpEG两种格式。随着网络技术的发展，网页上出现了越来越多的Flash动画。Flash动画已经成为当今网站必不可缺少的部分，美观的动画能够为网页增色不少，从而吸引更多的浏览者。Flash动画不仅需要对动画制作软件非常熟悉，更重要的是设计者独特的创意。6、页脚页脚放置网页设计者的基本信息。思考题：网页的设计需要考虑哪些因素？标题、Logo、页眉、页脚、导航的设计、版面布局的设计、连接结构的设计、网页色彩的搭配设计、字体的设计、宣传标语的设计等。1.1.5网页的分类我们通常看到的网页，大都是以HTM或HTML后缀结尾的文件。除此之外，网页文件还有以CGI、ASp、pHp和JSp后缀结尾的。目前网页根据生成方式，大致可以分为静态网页和动态网页两种。1、静态网页静态网页是网站建设初期经常采用的一种形式。网站建设者把内容设计成静态网页，访问者只能被动地浏览网站建设者提供的网页内容。其特点如下：网页内容不会发生变化，除非网页设计者修改了网页的内容。不能实现和浏览网页的用户之间的交互。信息流向是单向的，即从服务器到浏览器。服务器不能根据用户的选择调整返回给用户的内容。静态网页的浏览过程如图1所示。我们使用dreamweaver和html制作的网页属于静态网页。数字媒体与技术专业《网页设计与制作》讲义刘巧丽2、动态网页网络技术日新月异，许多网页文件扩展名不再只是.htm，还有.php、.asp等，这些都是采用动态网页技术制作出来的。动态网页其实就是建立在B/S架构上的服务器端脚本程序。在浏览器端显示的网页是服务器端程序运行的结果。动态网页是经过人与服务器对话的结果。如图网页上的登录、注册、网上购物等都属于此类网站。静态网页与动态网页的区别在于Web服务器对它们的处理方式不同。当Web服务器接收到对静态网页的请求时，服务器直接将该页发送给客户浏览器，不进行任何处理。如果接收到对动态网页的请求，则从Web服务器中找到该文件，并将它传递给一个称为应用程序服务器的特殊软件扩展，由它负责解释和执行网页，将执行后的结果传递给客户浏览器。应用程序服务器的作用是读取动态网页上的代码，根据代码中的指令完成网页，然后将代码从网页上去掉，所得的结果将是一个静态网页；应用程序服务器将该网页传送回网页服务器，网页服务器将网页发送到浏览器，浏览器得到的仍然是一个纯HTML的静态网页。如图2所示为动态网页的工作原理图。图2动态网页的工作原理图动态网页的一般特点如下。动态网页以数据库技术为基础，可以大大降低网站维护的工作量。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等。动态网页并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。搜索引擎一般不可能从一个网站的数据库中访问全部网页，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。1.2网站制作基本流程创建网站是一个系统工程，有一定的工作流程，只有遵循一定的步骤，按部就班地来，才能设计出满意的网站。1.2.1前期策划建立网站第一步就应该确定网站的目标，包括1、网站的整体定位：是商务网站、科研网站、个人网站还是交流平台或者公司或企业的介绍性网站？2、网站要包含的主要内容和方向等。在确定了目标和内容后，应该给自己的网站起一个响亮的名字。思考如何使图1静态网页的浏览过程数字媒体与技术专业《网页设计与制作》讲义刘巧丽自己的网站在网络海洋里脱颖而出？一、确定网站主题设计一个站点，首先遇到的问题就是定位网站主题。所谓主题也就是的网站的题材。网络上的网站题材千奇百怪,琳琅满目。常见的网站题材有：第1类：网上求职第2类：网上聊天／即时信息/ICQ第3类：网上社区／讨论/邮件列表第4类：计算机技术第5类：网页/网站开发第6类：娱乐网站第7类：旅行第8类：参考/资讯第9类：家庭/教育第10类：生活/时尚每个大类都可以继续细分，比如娱乐类再分为体育/电影/音乐大类，音乐又可以按格式分为Mp3、WMA、Ra等，按表现形式分古典，现代，摇滚等。以上都只是最常见的题材，还有许多专业的，另类的，独特的题材可以选择，比如中医，热带鱼，天气预报等等，同时，各个题材相联系和交叉结合可以产生新的题材，例如旅游论坛（旅游+讨论），经典入球播放（足球+影视）等，按这样分下去，题材可以有成千上万个。对于题材的选择，通常遵循以下原则：1.主题要小而精定位要小，内容要精。如果想制作一个包罗万象的站点，把所有您认为精彩的东西都放在上面，那么往往会事与愿违，给人的感觉是没有主题，没有特色，样样有却样样都很肤浅，因为您不可能有那么多的精力去维护它。网络的最大特点就是新和快，目前最热门的个人主页都是天天更新甚至几小时更新一次。最新的调查结果也显示，网络上的【主题站】比【万全站】更受人们喜爱，就好比专卖店和百货商店，如果我需要买某方面的东西，肯定会选择专卖店。2.题材最好是自己擅长或者喜爱的内容比如：您对擅长编程，就可以建立一个编程爱好者网站；对足球感兴趣，可以报道最新的战况，球星动态等。这样在制作时，才不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有热情，很难设计制作出杰出的作品。3.题材不要太滥或者目标太高【太滥】是指到处可见，人人都有的题材；比如软件下载，免费信息。【目标太高】是指在这一题材上已经有非常优秀，知名度很高的站点，要超过它是很困难的。除非下决心和有实力竞争并超过它，记住，在互联网上只有第一，人们往往只记得最好的网站，第二第三名的印象则会浅得多。二、定义网站名称网站名称也是网站设计的一部分，而且是很关键的一个要素。比如，【电脑学习室】和【电脑之家】显然是后者简练；【迷笛乐园】和【MIDI乐园】显然是后者明晰；【儿童天地】和【中国幼儿园】显然是后者大气。我们都知道pIIICUp的中文名称【奔腾】，如果改为【奔跑】，可能就没有今天这么【火】了。和现实生活中一样，网站名称是否正气，响亮，易记，对网站的形象和宣传推广也有很大影响。一般的建议是：1、名称要正2、名称要易记根据中文网站浏览者的特点，除非特定需要，网站名称最好用中文名称，不要使用英文或者中英文混合型名称。例如：beyondstudio和超越工作室，后者更亲切好记。另外，数字媒体与技术专业《网页设计与制作》讲义刘巧丽网站名称的字数应该控制在六个字（最好四个字）以内，比如【XX阁】【XX设计室】，四个字的可以用成语，如【一网打进】。字数少还有个好处，一般友情链接的小logo尺寸是88X31，而六个字的宽度是78左右，适合于其他站点的链接排版。3、名称要有特色名称平实就可以接受，如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。如，音乐前卫、网页陶吧、天籁绝音、地球之殇，在体现出网站主题的同时，能点出特色之处。1.2.2站点规划与设计要想制作精彩的网页，吸引住浏览者，还要好好规划网站。规划站点就像设计一座大楼一样，只有图纸设计好了，才能建成一座漂亮的楼房。在规划网站时，明确该网站中需要包含哪些元素，网站的整体结构，同时将网站内容分类、确定各页的主题、各页包含的内容，以及各页之间的层次结构和逻辑关系。以及每幅网页的布局，包括每幅网页中图片和文字的排列、它们之间的相互关系、在页面中各部分的颜色如何选取，如果是框架页面，还要设计页面框架的分布，页面中在什么位置放置链接点，页面中包含哪些信息内容等等。一、栏目的设置要将最好的，最吸引人的内容放在最突出的位置，