第1章 网页设计概述祥解.ppt

Name：刘佳 Office：网络教研室C4-308 Email: 956420190@ Tel: 2184431 课程内容及教材 基本要求： 第1章 网页设计概述 1.1 网页基础知识 WWW服务的工作原理 WWW服务的主要特点 1.2 网页构成元素 1.3网站建设的流程 1.3网站建设的流程 LOGO * LOGO 运用Adobe Dreamweaver CS5软件，来介绍设计与制作静态网站的方法和技巧，为后续课程《网络编程》打好基础。 认真听课、注意操作 课上 充分预习和复习、多练习 课下 请假制度、上机按学号入座 纪律 认真按时独立完成 作业 本课程的特点：应用性、实践性强。 网页基础知识 网页构成元素 网站建设的流程 HTML基础 Dreamweaver CS5操作环境简介 在因特网上，根据一定规则，使用特定工具制作的用来展示特定内容的相关文件称为网页，这些网页的集合就是一个网站。 什么是网页、网站、WWW？ WWW：万维网，简称为Web，是Internet上最受欢迎、最为流行的信息检索服务系统，信息资源以web页的形式存储在WWW服务器中，用户通过WWW客户端浏览器程序浏览Web页内容。 URL：应用协议类型://信息资源所在主机名（域名或IP地址）/路径名/…/文件名 WWW服务采用了客户机/服务器模式； WWW服务的核心技术是： 超文本标记语言（HTML）：制作网页的一种编程语言，HTML文档扩展名通常为.htm或.html。 超文本传输协议（HTTP）：客户端与WWW服务器之间相互通信的应用层协议，保证正确传输超文本文档。 超链接（hyperlink）:实现了网页之间的跳转，www以超文本及超媒体方式组织网络多媒体信息，用户可以访问文本、语音、图形和视频等信息。 网页是由哪些基本元素构成的呢？ 图 像 文本 网 页 视频 动 画 超链接 音频 表格、表单、导航、条、悬停按钮、Java特效、AxtiveX组件等 1.2网页构成元素 文本：是网页的信息主体，能准确的表达信息的内容和含义。占用的空间小，传输速率高。 图像：占用的空间大，传输速率慢。如果使用恰当比文字更具有说服力，使网页更生动，更具表现力和吸引力。网页中常用的图象文件格式有：GIF、JPEG、PNG等。 动画：占用的空间比图像还大，但是“动”比“静”更具生命力，更能打动人心。一般网站广告都以动画形式显示。 超链接：是网页的灵魂，是网络超文本体系结构的经络。在网站内网页之间的跳转或网站之间的跳转等都是靠超链接实现的。 音频：音频是多媒体网页重要组成部分。网页中常用的声音文件格式有：MIDI、WAV、MP3等，可使用音频文件作为网页的背景音乐，但会影响网页的下载速度。 视频：在网页中用作视频交流或直播，使网页变得生动、真实。常用的视频文件格式有：RealPlayer、MPEG、AVI等。 1.2网页构成元素 表格：用来控制网页信息的布局方式。可以使用表格来精确控制各种网页元素在网页中的显示位置。 表单：可以实现浏览者与站点之间的交互。网页中的表单通常用来接收用户在客户端的输入，然后将这些信息发送到服务器端。表单有不同功能的表单域组成。 导航条：是一组超链接，用于在站点的首页及其他重要网页中进行跳转。一般情况下，导航条应放在网页的醒目位置。 其他特殊元素：如悬停按钮、Java特效、AxtiveX组件等，可增强网页功能，使网页更有趣。 1.2网页构成元素 网站(Web Site)建设是个系统工程，其基本工作流程可分为5个阶段： 网站策划 网页制作 网站测试与发布 网站宣传与维护 （1） （2） （3） （4） （5） 网页设计 网站策划是在制作网站前对网站进行周密的计划，明确制作网站的目的以及怎么做。其工作主要包括： 1.3.1 网站策划 ①确定网站的主题：网站的题材，即做一个什么类型的网站？ ②确定网站的用户群：以人为本 1.3.1 网站策划 ③确定网站的配色方案： 根据网站的整体风格来选定网站的配色。 红色：往往与吉祥、好运、喜庆相联系，自然就成为节日、庆祝活动的常用色 蓝色：给人冷静、沉思、智慧、和征服自然的力量，在商业设计中，强调科技、效率的商品或企业形象，大多选用蓝色作为标准色。 1.3.1 网站策划 ④收集网站的素材和内容 广泛收集、尽量全面，内容相关 个人网站：个人资料、个人照片、个人作品和兴趣爱好等 1.3.1 网站策划 ⑤确定网站栏目及网站目录结构 栏目划分要服从并体现网站主题：将准备好的“原材料”按一定方法分类，为其设立专门的栏目。规划网站栏目的过程