网页设计与制作(第二版)第一节-网页设计基础课件

第1节网页设计基础

第1节网页设计基础1、网页基本概念1．网页：采用了超文本传输协议的文件，每个网页文件都有一个地址（统一资源定位器URL）2．URL：通过其在网络上来识别存与存取信息3．超文本传输协议（HTTP）：HTTP是一个用于在客户端和服务器间请求和应答的协议。4．超文本（Hypertext）：超文本(Hypertext)是一类电子储藏文本，其允许“点进”通过编码链接(超链接)接入到其它的文本。5．浏览器：用于浏览访问网页的工具软件。6．Web服务器：用于存放网页文件的服务器。1、网页基本概念２、网站与网页通常我们看到的网页，都是以.html为后缀的文件，俗称HTML文件。不同的后缀，分别代表不同类型的网页文件，例如以.cgi，.asp，.php，.jsp为后缀名。网站是指存放在网络服务器上的完整信息的集合体，它包含一个或多个网页，这些页以超链接方式连接在一起，形成一个整体，描述一组完整的信息。网站主要由主机、域名、网页等组成。建设网站，就是在自己的计算机上安装Web服务器，设计制作自己的网页并且发布出去。２、网站与网页3、网页风格网站的风格可以从以下几个方向来探讨色彩的搭配：网页的底色、文字字型、图片的色系、颜色等。版面的排列：表格、框架的应用，文字缩排、段落等。导航的设计：导航窗口效果、导航效时等。程序的选择：网页制作程序，如ASP，PHP，XML，CGI等。特效的应用：让网页看起来生动活泼的各种特殊应用，如Flash、Javascript，Javaapplets，DHTML等。架构的层次：目录的规划、层次的架构等。内容的选取：网站主题、整体实用性、文件关联性、内容切合度等。发展与规划：对于网站的未来规划，网站整体内容发展方向等。3、网页风格４、常见网页版面格式经常用到的版面布局形式有：“T”结构布局、“口”型布局、“田”型布局、“三”型布局、对称对比布局、POP布局等。４、常见网页版面格式T型布局T型布局“口”型布局“口”型布局“田”型布局“田”型布局“三”型布局“三”型布局POP布局POP布局网页作为一种版面，既有文字，又有图片。文字有大小区别，文档有标题和正文之分，图片也有大小和横竖之别。网页版面应该具有如下特点。（1）主次分明，中心突出。（2）大小搭配，相互呼应。（3）图文并茂，相得益彰。（4）动静有度，平衡对称。网页作为一种版面，既有文字，又有图片。文字有大小区别，文档有整体风格简洁实用，中心突出整体风格简洁实用，中心突出大图小图相互呼应大图小图相互呼应图文并茂图文并茂动静结合动静结合对称的示例对称的示例布局对称布局对称典型辐射平衡典型辐射平衡网页构图网页设计要有内容、形式、功能以及目标。点、线、面是视觉语言中的基本元素，进行网页设计时应使用点、线、面的互相穿插，互相衬托构成最佳的页面效果，组合成各种各样的视觉形象，千变万化的视觉空间，表达完美的设计意境。（1）点的应用。（2）直线的应用。（3）曲线的应用。（4）曲线、直线的综合应用。（5）面的应用。网页构图网页设计要有内容、形式、功能以及目标。点、线、面是点的应用点的应用线的应用线的应用曲线的应用曲线的应用曲线、直线的综合应用曲线、直线的综合应用点、线的综合应用点、线的综合应用IBM网站IBM网站面的示例面的示例线、面的示例线、面的示例点、线、面的结合示例点、线、面的结合示例网页色彩色彩是人的视觉最敏感的东西，它是美丽而丰富的，能唤起人类的心灵感知。网页的色彩处理得好，可以锦上添花，达到事半功倍的效果。为了把握好色彩的应用，我们应首先了解一下色彩的一些基本概念。计算机屏幕是由电子枪投射到屏幕来产生色光。电子枪射到屏幕可以产生3种颜色：红、绿、蓝。我们把这3种色称为原色，常称为三原色。由这3种色光，计算机屏幕可制作出完整的光谱。这也就是RGB色系。网页色彩色彩是人的视觉最敏感的东西，它是美丽而丰富的，能唤以上颜色可总结为如下色调。（1）暖色调：即红色、橙色、黄色、褐色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。（2）冷色调：即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。（3）对比色调：即把色调完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色调的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。最后，还要考虑页面的底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”，底色浅的称为低调。以上颜色可总结为如下色调。网页配色技巧根据网站所要传达的为信息和品牌选择颜色。要根据访问对象选择颜色。不要使用过多的颜色。在阅读的部分使用对比色。用灰阶来测试对比。选择颜色要注意时效性。选择色盘时应考虑功能性的颜色。注意网站色差问题。网页配色技巧根据网站所要传达的为信息和品牌选择颜色。圣诞节网站圣诞节网站色彩实例色彩实例在网页的色彩应用中应注意如下问题。（1）运用相同色系色彩。（2）运用对比色或互补色。（3）使用过渡色。在网页的色彩应用中应注意如下问题。黑白对比黑白对比５、网页设计原则网页设计的基本原则网页设计是有原则的，无论用什么样的方法，都要遵循一些基本原则，这些基本原则是：统一、连贯、分割、对比、和谐、易读、易找、清晰、精选。统一：是指设计的整体性、一致性。连贯：是指要注意页面的相互关系。分割：是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。分割是对网页的页面内容分类归档。５、网页设计原则网页设计的基本原则统一的示例统一的示例连贯的示例连贯的示例分割分割对比：是指通过矛盾和冲突，使设计更加富有生气。其常用的方法有：多与少、长与短、粗与细、主与次、美与丑等。和谐：是指整个页面符合美的法则，浑然一体。网页的和谐不仅要看其结构形式，而且要看其所形成的视觉效果能否与人的视觉感受相沟通，产生共鸣。易读：是指网页让人看起来不费力，视觉效果好，符合大众的阅读习惯。易找：是指网页的宣传和推广，如索引擎、目录指南、导航站点、交换链接等。对比：是指通过矛盾和冲突，使设计更加富有生气。其常用的方法有网页设计与制作(第二版)第一节-网页设计基础课件和谐和谐易读易读易找易找清晰：是指网站的导航要清晰，让人看得清楚，查找方便快捷。精选：是指内容要精选，页面容量要精选，使浏览者打开网页的速度要快。从某种角度来讲，页面容量越小越好，清晰：是指网站的导航要清晰，让人看得清楚，查找方便快捷。清晰（1）清晰（1）清晰（2）清晰（2）精选精选网页设计的基本因素（1）设计网站的标志（LOGO）（2）设计网站的标准色彩（3）设计网站的标准字体（4）设计网站的宣传标语网页设计的基本因素６、网页设计步骤1建站前进行需求分析2建网站时确定主题3网页结构仔细规划4网页的版面布局合理安排1．网页草图2．粗略布局3．定案5网页的创意设计新颖大方6网页的素材收集全面、具体选择网页制作工具及语言8网页的制作与测试9网页的上传与网页宣传10网站的维护与管理

６、网页设计步骤1建站前进行需求分析第1节网页设计基础

第1节网页设计基础1、网页基本概念1．网页：采用了超文本传输协议的文件，每个网页文件都有一个地址（统一资源定位器URL）2．URL：通过其在网络上来识别存与存取信息3．超文本传输协议（HTTP）：HTTP是一个用于在客户端和服务器间请求和应答的协议。4．超文本（Hypertext）：超文本(Hypertext)是一类电子储藏文本，其允许“点进”通过编码链接(超链接)接入到其它的文本。5．浏览器：用于浏览访问网页的工具软件。6．Web服务器：用于存放网页文件的服务器。1、网页基本概念２、网站与网页通常我们看到的网页，都是以.html为后缀的文件，俗称HTML文件。不同的后缀，分别代表不同类型的网页文件，例如以.cgi，.asp，.php，.jsp为后缀名。网站是指存放在网络服务器上的完整信息的集合体，它包含一个或多个网页，这些页以超链接方式连接在一起，形成一个整体，描述一组完整的信息。网站主要由主机、域名、网页等组成。建设网站，就是在自己的计算机上安装Web服务器，设计制作自己的网页并且发布出去。２、网站与网页3、网页风格网站的风格可以从以下几个方向来探讨色彩的搭配：网页的底色、文字字型、图片的色系、颜色等。版面的排列：表格、框架的应用，文字缩排、段落等。导航的设计：导航窗口效果、导航效时等。程序的选择：网页制作程序，如ASP，PHP，XML，CGI等。特效的应用：让网页看起来生动活泼的各种特殊应用，如Flash、Javascript，Javaapplets，DHTML等。架构的层次：目录的规划、层次的架构等。内容的选取：网站主题、整体实用性、文件关联性、内容切合度等。发展与规划：对于网站的未来规划，网站整体内容发展方向等。3、网页风格４、常见网页版面格式经常用到的版面布局形式有：“T”结构布局、“口”型布局、“田”型布局、“三”型布局、对称对比布局、POP布局等。４、常见网页版面格式T型布局T型布局“口”型布局“口”型布局“田”型布局“田”型布局“三”型布局“三”型布局POP布局POP布局网页作为一种版面，既有文字，又有图片。文字有大小区别，文档有标题和正文之分，图片也有大小和横竖之别。网页版面应该具有如下特点。（1）主次分明，中心突出。（2）大小搭配，相互呼应。（3）图文并茂，相得益彰。（4）动静有度，平衡对称。网页作为一种版面，既有文字，又有图片。文字有大小区别，文档有整体风格简洁实用，中心突出整体风格简洁实用，中心突出大图小图相互呼应大图小图相互呼应图文并茂图文并茂动静结合动静结合对称的示例对称的示例布局对称布局对称典型辐射平衡典型辐射平衡网页构图网页设计要有内容、形式、功能以及目标。点、线、面是视觉语言中的基本元素，进行网页设计时应使用点、线、面的互相穿插，互相衬托构成最佳的页面效果，组合成各种各样的视觉形象，千变万化的视觉空间，表达完美的设计意境。（1）点的应用。（2）直线的应用。（3）曲线的应用。（4）曲线、直线的综合应用。（5）面的应用。网页构图网页设计要有内容、形式、功能以及目标。点、线、面是点的应用点的应用线的应用线的应用曲线的应用曲线的应用曲线、直线的综合应用曲线、直线的综合应用点、线的综合应用点、线的综合应用IBM网站IBM网站面的示例面的示例线、面的示例线、面的示例点、线、面的结合示例点、线、面的结合示例网页色彩色彩是人的视觉最敏感的东西，它是美丽而丰富的，能唤起人类的心灵感知。网页的色彩处理得好，可以锦上添花，达到事半功倍的效果。为了把握好色彩的应用，我们应首先了解一下色彩的一些基本概念。计算机屏幕是由电子枪投射到屏幕来产生色光。电子枪射到屏幕可以产生3种颜色：红、绿、蓝。我们把这3种色称为原色，常称为三原色。由这3种色光，计算机屏幕可制作出完整的光谱。这也就是RGB色系。网页色彩色彩是人的视觉最敏感的东西，它是美丽而丰富的，能唤以上颜色可总结为如下色调。（1）暖色调：即红色、橙色、黄色、褐色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。（2）冷色调：即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。（3）对比色调：即把色调完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色调的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。最后，还要考虑页面的底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”，底色浅的称为低调。以上颜色可总结为如下色调。网页配色技巧根据网站所要传达的为信息和品牌选择颜色。要根据访问对象选择颜色。不要使用过多的颜色。在阅读的部分使用对比色。用灰阶来测试对比。选择颜色要注意时效性。选择色盘时应考虑功能性的颜色。注意网站色差问题。网页配色技巧根据网站所要传达的为信息和品牌选择颜色。圣诞节网站圣诞节网站色彩实例色彩实例在网页的色彩应用中应注意如下问题。（1）运用相同色系色彩。（2）运用对比色或互补色。（3）使用过渡色。在网页的色彩应用中应注意如下问题。黑白对比黑白对比５、网页设计原则网页设计的基本原则网页设计是有原则的，无论用什么样的方法，都要遵循一些基本原则，这些基本原则是：统一、连贯、分割、对比、和谐、易读、易找、清晰、精选。统一：是指设计的整体性、一致性。连贯：是指要注意页面的相互关系。分割：是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。分割是对网页的页面内容分类归档。５、网页设计原则网页设计的基本原则统一的示例统一的示例连贯的示例连贯的示例分割分割对比：是指通过矛盾和冲突，使设计更加富有生气。其常用的方法有：多与少、长与短、粗与细、主与次、美与丑