第一讲 网页设计概述

网页设计与制作,主讲：涂春梅mail：tcm0314,本门课程教材,网页设计基础清华大学计算机与信息管理中心中国铁道出版社,推荐参考教材1,网页设计与制作教程（第4版）刘瑞新等编著机械工业出版社,推荐参考教材2,网页设计与制作案例教程李敏主编电子工业出版社,推荐参考教材3,精通CSS+DIV网页样式布局前沿科技主编人民邮电出版社,课程定位,网页设计与制作是软件技术专业的专业必修课程网页设计与制作是以计算机应用基础课程为基础，同时又是软件技术专业各后续主要专业课的基础。通过本课程的学习，应掌握网页设计与制作的基本理论、基本操作技能和基本分析方法，为以后学习Web应用程序开发等后续专业课程打下必备的基础。,学习目标,学习目标,？,目标-你的目标由你选择,订SMART的目标Specific确定的Measurable能够衡量的Achievable可达成的Realistic现实的Time时间限制,行动,目标,实现,现在,成功即实现自己所设定的目标,掌握网页编程基础html相关知识,熟练掌握网页制作软件Dreamweaver的基本操作和使用技能,掌握网页页面布局的各种方法,掌握表单网页制作方法,掌握图片与多媒体文件的添加、调整,掌握建立各种形式的超级链接的方法,CSS层叠样式表的应用,理解行为的作用，掌握设置行为的方法,培养收集、处理信息，准备、加工素材的能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。,培养制作静态网页的能力,培养设计网站的综合能力,培养策划能力、色彩感悟能力；充分培养和提高动手能力,具有勤奋学习的态度，严谨求实、创新的工作作风,具有良好的心理素质和职业道德素质,具有高度责任心和良好的团队合作精神,具有一定的科学思维方式和判断分析问题的能力,运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力,考核方式,平时作业实验报告上课考勤,网页设计与制作相关技术的实际应用,平时成绩(30%),实践考核(30%),理论考试(40%),相关的基础理论、知识点及相关技术的应用,学生作品,第一章网页基础概述,1,2,网页中的常用术语,3,4,网站开发的工作流程,5,什么是网页？,网页制作工具,1什么是网页？,1什么是网页？,浏览Web时所看到的文件称为Web页，又称为网页。网页可以将不同类型的多媒体信息（例如文本、图像、声音和电影等）组合在一个文档中。由于这些文档是用超文本标记语言HTML表示的，因此又称为HTML文档或超文本。,HTML,HTML通过标记符（Tag）标记网页的各个组成部分，通过在网页中添加标记符，指示浏览器如何显示网页内容。浏览器按顺序阅读网页文件（HTML文件）。任何网页页面都是以HTML语言为核心和基础的。,网页的分类,按所处位置分类按网页在网站中所处的位置可将网页分为主页和子页两类。,按表现形式分类按网页的表现形式可将网页分为：静态网页和动态网页。,静态网页,静态网页是指客户端浏览器发送URL请求给服务器，服务器查找需要的超文本文件不加处理直接返回给客户端，在客户端浏览器显示的页面是由网页设计师先制作完成放在服务器上的网页。是纯粹HTML格式的网页，用户基本上不能参与，只是网站页面的静态发布。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。,动态网页,动态网页中除了基本网页中的元素外，还包括一些程序，这些应用程序需要浏览器与服务器之间发生交互行为。动态网页技术根据程序运行的地点不同，又分为服务器端动态技术（ASP、JSP、PHP等）和客户端动态技术（JavaScript、VBScript）。动态网页一般涉及数据库操作，例如注册、登录、查询、购物等，都需要设计强大的服务器端动态程序，并考虑各种可能出现的出错情况，以保证网站的交互性和安全性。,动态网页的工作原理：,客户端浏览器向服务器发出URL请求，服务器查找到相应的页面之后，首先读取动态网页上的代码，根据代码中的指令完成网页，然后将代码从网页上去掉，所得的结果将是一个静态网页；应用程序服务器将该网页传送回网页服务器，网页服务器将网页发送到浏览器，浏览器得到的仍然是一个纯HTML的静态网页。,网页的结构,网页中的基本元素,网页中的主要元素有：文本、图像、超级链接、导航栏、表格、表单、多媒体等。1.文本网页的主体一般以文本为主。在制作网页时，可以根据需要设置文本的字体、字号、颜色以及所需要的其他格式。2.图像图像可以用作标题、网站标志（Logo）、网页背景、链接按扭、导航栏、网页主图等。使用最多的文件格式是JPEG和GIF格式。,3.超级链接超级链接是从一个网页指向另一个目的端的链接。4.导航栏导航栏能使浏览者方便地返回主页或继续下一页的访问。导航栏可以是按钮、文本或图像。5.表格网页中的表格是一种用于控制网页页面布局的有效方法。,6.表单表单通常用于收集信息或实现一些交互式的效果。表单的主要功能是接收浏览者在浏览器端的输入信息，然后将这些信息发送到浏览者设置的目的端。7.多媒体网页包含有声音、动画、视频等多媒体元素。,2网页中的常用术语,WWWURL文件传输协议（FTP）IP地址域名超级链接网站,2.1WWW,WWW（WorldWideWeb），中文称为万维网，也可以简称网。它是一个大规模的在线信息集合，是一个资料空间。可以通过一种叫做浏览器的应用程序进行检索与查看。,www的起源,蒂姆伯纳斯李（TimBernersLee）,1989年，伯纳斯李提出了“WorldWideWeb”的全球超文本项目计划。1990年，伯纳斯李开发出了架构起全球信息网的三大基本技术：http(超文件传输协议电脑与服务器之间的沟通语言)、html(超文本标记语言全球通用的文件格式)，以及URL(网址文件位置的标示系统)。1991年，伯纳斯李把自己开发的全球信息网放到互联网上。于是，一个划时代的奇迹，在欧洲粒子物理研究所、在伯纳斯李的手中诞生了这就是今天风靡世界的WWW。,www有什么不足的地方吗？万维网创始人伯纳斯李于1998年提出了有关下一代万维网的构想语义网。语义网是机器可以理解数据含义的下一代万维网。,比尔盖茨,比尔盖茨的豪华住宅,比尔盖茨那幢坐落在西雅图，被喻为未来生活预言的科技住宅无疑是当今世界上最现代化的豪华住宅，堪称是智能建筑的经典之作。豪宅内共铺设各种电缆52英里，房子内所有的电器设备相互连接成了一个智能网络。主人在回家途中便可在车内利用计算机遥控家中的浴缸自动放水并调温，作好一切迎接准备。房屋装有气象感知器，可以根据各项气象指标，控制室内的温度和通风情况。走进大厅时，空调系统会将室温调整至你感觉最舒适的温度，音响系统也会针对你的喜好播放音乐，灯光系统自动调整照明颜色与强度，就连墙上的LCD显示屏，也会自动显示你喜爱的世界名画或播放你上次只看到一半的影片。,在住宅各处随意走动时，地板能在6英寸的范围内跟踪到人的足迹，在有人经过时自动打开照明，离去时自动关闭。每个房间的温度、照明、音响等等都将随不同的设定自动调整。就算是在水池中，也会从池底“冒”出如影随形的音乐。,尤其有意思的是，比尔盖茨非常喜欢车道旁边一棵140岁的老枫树，所以就通过专门的监视系统对其进行24小时的全方位监控一旦监视系统发现它有任何干燥的迹象，灌溉系统就会启动。,是什么尖端的科技系统使得盖茨先生的豪宅拥有如此高的智能化水平？要等到哪一个世纪才能让这样现代化的住宅走入寻常百姓家？通过扩展今天的万维网（即WWW，是WorldWideWeb的简称）就完全可以使这一梦想变为现实。这种扩展后的万维网称为语义网(SemanticWeb）。,2.2URL,URL（UniformResourceLocator）主要是用来指定协议（如HTTP或FTP）以及对象、文档、万维网网页或其他目标在Internet的位置和存取方式。一个URL被用来标识一个网络路径，可以通过互联网在这个URL上访问到对应的资源。通信协议主机名所要访问的网页路径及名称,2.3FTP,FTPFTP（FileTransferProtocol）是一种广泛使用的文件传输协议，是快速、高效和可靠的信息传输方法。FTP是基于客户/服务器模型的TCP/IP的应用，所以只要在客户端和服务器之间建立了TCP/IP连接，无论两台电脑的位置远近、连接方式的异同以及使用的操作系统的异同，都能通过FTP协议进行文件的传输。,2.4IP,IP地址用来标识连接到Internet上电脑的指定编号，每一个IP地址对应一台电脑，这与用电话号码标识电话网络中的电话相同。电脑识别的IP地址由32位二进制数值组成，电脑上以十进制数值来显示，一组数值分为4部分，每一部分均不能大于255，中间用“.”分隔，如9,2.5域名,域名就是常说的网址，它也具有惟一性，如百度的网址、网易的网址等就是一个域名，域名由汉语拼音或英文字符加上数字表示，在访问网络时，域名将通过域名服务器转换成IP地址，这种转换是在后台完成的。,2.6超级链接,超级链接是网页中最常用的元素之一，网页就是通过无数的超级链接才能组成一个网站。超级链接可以链接到网站内部页面、对象，也可以链接到其他网站，大大方便了用户在各个页面对象之间实现跳转。,2.7网站,网站就是一个或多个网页的集合。从广义上讲，网站就是当网页发布到Internet上以后，能通过浏览器在Internet上访问的页面。,2.7网站,网站就是一个或多个网页的集合。从广义上讲，网站就是当网页发布到Internet上以后，能通过浏览器在Internet上访问的页面。网易搜狐新浪重大中国政府网中国税务网中国日报南方周末联众游戏中国足球旅游咨询,3网页制作工具,网页设计软件(1).FrontPageFrontPage是Microsoft公司出品的入门级网页编辑软件。(2).DreamweaverDreamweaver是Macromedia公司推出的网页制作产品，它是一个用于可视化设计与管理网页和网站的工具，它与Macromedia公司的Flash、Fireworks配合使用，被称为“网页制作三剑客”。Dreamweaver是目前使用最多的网页设计软件。,网页图像与动画制作工具制作网页图像的软件种类繁多，大多数网页设计人员选择的是Fireworks或Photoshop。(1).FireworksFireworks是Macromedia公司专门设计的Web图形工具软件，它可以用最少的步骤生成最小但质量很高的JPEG和GIF图像。(2).PhotoshopPhotoshop是由Adobe公司出品的著名的图形图像处理软件。动画制作软件网页动画制作中最常用的软件非Flash莫属。,4网站开发的工作流程,在制作网页的过程中，要遵循一定的顺序才能协调分配整个制作过程的资源与进度。,4.1网站规划,1.确定网站的主题确定网站主题应遵循以下原则：（1）主题鲜明。一个网站必须要有一个明确的主题，在主题范围内做到内容全而精。（2）明确设立网站的目的。（3）体现自己的个性。把自己的兴趣、爱好尽情地发挥出来，突出自己的个性，办出自己的特色2.搜集材料围绕主题搜集材料，作为自己制作网页的素材。,3.规划网站主题栏的设置突出主题。把主题栏放在最明显的地方，让浏览者更快、更明确的知道网站所表现的内容。设计一个“最近更新”栏目，让浏览者一目了然的知道更新内容。栏目不要设置太多。目录结构设计按栏目内容建立子目录。每个目录下分别为图像文件创建一个子目录image（图像较少时可不创建）。目录的层次不要太深，主要栏目最好能直接从首页到达。尽量使用意义明确的非中文目录。,颜色搭配网页选用的背景应和页面的色调相协调，色彩搭配要遵循和谐、均衡、重点突出的原则。网站标志Logo,版面布局版面布局一般应遵循的原则是：突出重点、平衡和谐，将网站标志（Logo）、主菜单等最重要的模块放在突出的位置。图像的运用图像是为主页内容服务的，不能让图像喧宾夺主。图像要兼顾大小和美观。图片不仅要好看，还应在保证图片质量的情况下尽量缩小图片的大小（即字节数）。图像过大将影响网页的传输速度。合理地采用JPEG和GIF图像格式。颜色较少的（256色以内）图像，可处理为GIF格式；色彩比较丰富的图像，最好处理为JPEG格式。,4.2网站制作,1.制作网站包括以下步骤建立本地站点：建立站点根文件夹，用于存放首页、相关网页和网站中用到的其他文件。在站点根文件夹下创建子文件夹：将页面文件和图像文件分开存放