《网页设计基础》PPT课件.ppt

第1章网页设计基础,教学内容：在具体设计制作网页前，不仅要清楚网页中的基本概念、网页的基本构成元素，了解网页制作常用工具和技术，还要了解网站建设的基本流程。通过本章的学习，可以了解网页设计制作相关的基础知识和网站建设的基本流程。,教学重点网络的基础知识掌握网页版面布局设计网页色彩设计教学难点三剑客应用方向和设计就业领域商业网站网页布局方法和版式布局网站建设的基本流程,教学目标和基本要求_教学时间：本章共分_课时教学方法案例教学多媒体教学理论面授教学素材课程范例文件：sample第1章练习文件：exercise第1章,本章各节课时分配及链接,1.1网络的基础知识（）课时1.2网页版面布局设计（）课时1.3网页色彩设计（）课时1.4网页三剑客应用方向和设计、就业领域（）课时1.5商业网站网页布局方法（）课时1.6典型商业网站页面版式布局（）课时1.7网站建设的基本流程（）课时本章小结思考与练习,1.1网络的基础知识,与网络相关的基本概念非常多，本节就来讲述一些常见的基本概念，让读者对网页设计有个基本的了解，从而为以后的学习打下良好的基础。1.1.1认识互联网Internet是一个全球性的计算机互联网络，中文名称为“因特网”，它集现代通信技术和现代计算机技术于一体，是计算机之间进行国际信息交流和实现资源共享的良好手段。Internet将各种各样的物理网络连接起来，构成一个整体，而不论这些网络类型的异同、规模的大小和地理位置的差异。,1.2网页版面布局设计,版面指的是用户在浏览器中看到的一个完整页面（可以包含框架和层）。因为每个用户所使用的显示器分辨率不同，所以同一个页面的大小可能出现640480像素，800600像素，1024768像素等不同尺寸。布局就是指以最适合用户浏览的方式将图片和文字排放在页面的不同位置。,1.2.1网页版面布局原则网站的目的是为别人提供所需的信息，这样客户才会愿意光临，网站才有其真实意义，网页设计有以下基本原则。1整体规划在制作网页之前，需要先对要制作的网页有一个整体规划，即明确该网页要传达的主要信息是什么，有什么样的整体框架，通过什么方式来实现等。,2首页很重要首页设计是网站成功与否的关键，人们往往看到第一页就已经对站点有一个整体的感觉，能否吸引浏览者留在站点上，全凭首页设计的效果。最好首页就有很清楚的类别选项，而且尽量符合人性化，让访问者可以很快找到需要的主题。,3互动性WWW的另一个特色就是互动。好的网站首页必须与使用者有良好的互动性，包括在整个设计呈现、使用介面导引上等，都应该掌握互动的原则，让使用者感觉他的每一步都确实得到适当的回应，这部分需要一些设计上的技巧与软硬件支持。,4善用图像图像是网页中必不可少的内容，它能更加直观地传达网页的主旨，好的图像应用可以让网页增色不少，但不恰当的图像应用则会带来反效果。使用图像时一定要考虑传输时间的问题。在图像使用上，尽量采用一般浏览器均可支持的压缩图像格式，如果真要放置大型图像文件，最好将图像文件与网页分开，在首页中先显示一个具有链接功能的缩小文档或是一行说明文字，然后加上该图像文件大小的说明，如此不仅加快首页的传输速度，而且可以让使用者判断是否继续打开放大后的图像。,5及时更新及时更新网页信息是网络与其他传统媒体相比最大的优势，为了保持这个优势，在网页设计好以后应及时更新上面的内容，以保证随时提供给浏览者最新的资源。6通用网页全球上网的人数数以亿计，使用的浏览器的种类和版本都不尽相同，所以在制作好网页之后要使用多种浏览器进行测试，保证绝大多数浏览者能够正常访问每个网页。如制作的网页应以800600像素的分辨率为基准，以保证大部分使用800600像素显示器的浏览者能够正常访问。,1.3网页色彩设计,色彩是人的视觉最敏感的东西。网页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩的魅力是无限的，它可以让本来很平淡无味的东西变得漂亮、美丽。在设计网页时，必须要高度重视色彩的搭配。,1.3.1色彩的基本知识色彩是一种非常能引发感性思考的东西，它的内涵丰富，能唤起人类的心灵感知，色彩代表了不同的情感，有着不同的象征含义，这些象征含义是人类思想活动的一种体现，它因人的年龄、地域、时代、民族、阶层、工作能力、教育水平、风俗习惯、宗教信仰、生活环境、性别等差异而有所不同。,1.3.2常见的网页配色方案1同种色彩搭配2邻近色彩搭配3.对比色彩搭配4.暖色色彩搭配5冷色色彩搭配6有主色的混合色彩搭配7组色,1.4网页三剑客应用方向和设计、就业领域,制作网页时需要使用到多种工具，其中网页三剑客是功能最全、最强大的网页设计软件组合，下面介绍网页三剑客的应用方向和设计就业领域。1.4.1网页设计软件DreamweaverCS4Dremaweaver是目前使用最多的网页排版布局软件，它不仅是一个专业的网页制作工具，同时也是一个网站管理、维护的最佳工具。学会了Dreamweaver可以从事网页制作、网页设计以及网站的开发的工作。DreamweaverCS4是Adobe公司最新推出的网页制作软件。,1.4.2网络图像处理软件FireworksCS4Fireworks是专门的网页图像设计软件。用Fireworks可以设计出网页的整体效果图、设计网页Logo、设计网页按钮和网页宣传广告等图像。学会了Fireworks后可以从事网页图像的设计、平面设计等工作。,1.4.3网络动画设计软件FlashCS4网页动画制作中最常用的软件非Flash莫属。Flash软件已经成为网上活力的标志，应用这一技术与电视、广告、卡通、MTV制作方面相结合，进行商业推广，把Flash从个人爱好推广为一种阳光产业。这样，Flash将作为一种产业渗透到音乐、传媒、IT广告房地产游戏等各个领域，开拓发展无限的商业机会。学会Flash后可以从事网页动画设计、动画片设计、MTV制作等相关工作。Flash主要有如下应用领域。,1.5商业网站网页布局方法,为了使网页能达到最佳的视觉表现效果，应讲究网页整体布局的合理性，使浏览者有一个流畅的视觉体验。在制作网页前，可以先布局出网页的草图。网页布局的方法有两种，一种为纸上布局，另一种为软件布局。,1.6典型商业网站页面版式布局,1“封面”型布局2“国”字型布局3“框架”型布局4“厂”字型布局5Flash型布局6标题正文型,1.7网站建设的基本流程,网站建设的开始就应该有一个整体的战略规划和目标，规划好网页的大致外观后就可以着手设计了。当整个网站制作测试完成后，就可以发布到网上了。大部分站点需要定期地维护，以实现新颖的内容和完善的功能。,本章小结,本章主要对网络的基础知识、网页版面布局设计、网页色彩设计、网页三剑客应用方向和设计就业领域、商业网站网页布局方法和版式布局，以及网站建设的基本流程进行概要性介绍，使广大初学者对网页设计有个大致的了解，为今后的学习打好基础。学习本章的内容读者应该重点掌握网页的布局和网站建设的基本流程。从下一章开始将介绍利用DreamweaverCS4创建基本的图文网页。,思考与练习,1填空题（1）_是用超文本格式写成的，超文本格式具有将文本内容与其他文本连接起来的链接功能。（2）_既是网页设计中的重要部分，又是整个网站设计中的一个较独立的部分。一般来说，它在各个页面中出现的位置是比较固定的，而且风格也较为一致。（3）_是人的视觉最敏感的东西，如果处理得好，可以锦上添花，达到事半功倍的效果。,2选择题（1）_是企业、政府、非政府组织等机构或者个人在互联网上注册的名称，是互联网上企业或机构间相互联络的网络地址。（A）域名（B）空间（C）IP地址（D）网络连接（2）_的作用是引导访问者清楚地知道所要浏览网站的内容，不至于迷失方向。,（A）导航栏（B）网站标志（C）页眉（D）页面标题（3）_是网页传递信息的主要载体，传输速度快，而且可以设置其大小、颜色、段落、层次等属性。（A）图像（B）表格（C）文本（D）多媒体,3判断题（1）网站就是在互联网上一块固定的面向全世界发布消息的地方。其由域名（也就是网站地址）和网站空间构成。（）（2）Banner就是网站的标志，它的设计要能够充分