网站设计基础第一章网页设计基础HTML超文本标记语言网站制作基础知识CSS层叠样式表DREAMWEAVER网页设计软件课程内容第一章网页设计基础Internet概述Internet即国际计算机互联网,在中国也称“因特网”或“国际互联网。它是目前全世界最大的网络,包含着丰富多彩的信息,并提供方便快捷的服务。它缩短了人们之间的距离。通过Internet,用户可以与接入Internet的任何一台计算机进行交流,如发邮件、聊天、通话等。第一章网页设计基础Internet服务器的主要信息服务有:万维网()电子邮件服务(E-mail)电子公告板服务(BBS)网上购物网上会议网上聊天第一章网页设计基础什么是的缩写,又称3W或Web,中文译名为“万维网”。它作为Internet上的新一代用户界面,摒弃了以往纯文本方式的信息交互手段,采用超文本(Hypertext)方式工作。利用该技术可以为企业提供全球范围的多媒体信息服务,使企业获取信息的手段有了根本性的改善,与之密切相关的是浏览器(Browser)。第一章网页设计基础制定一套标准是用于万维网服务器传输超文本到本地浏览的传送协议。用于要取得的Internet资源的位置与方式。在Internet通常使用的发布语言,能够使大多数计算机或者浏览器能够识别的语言。第一章网页设计基础IP地址和域名IP(InternetProtocol)地址,即用Internet协议语言表示的地址,由4组数字构成,每组8位,共32位。在IP地址的4组数字中,包含了两部分信息,即网络代号(NetID)和主机代号(HostID)。第一章网页设计基础域名是IP地址的一种英文替代。域名系统采用层次结构,按地理域或机构域进行分层。域名的一般格式为:主机名.机构名.类别名.地区名。第一章网页设计基础什么是网页网页是网站的组成部分,是一张页面,可以看成是一个单一体,是网站的一个元素。网页中包含的元素有:文本和图像、动画、声音和视频、超级链接、表格、表单、导航栏以及其他常见元素。第一章网页设计基础第一章网页设计基础网页的分类按照网页的表现形式不同,可将网页分为静态网页和动态网页。按照网页在网站中所处位置不同,可将网页分为主页和内页。第一章网页设计基础第一章网页设计基础第一章网页设计基础第一章网页设计基础静态网页是指这个网页不论在何时何地浏览,都将显示相同的画面和内容,且用户仅能浏览,而无法提供信息给网站,让网站作出响应。动态网页是网页能够按照用户的需求作出动态响应,如网页上常见的留言板、论坛等。第一章网页设计基础主页一个网站中的首页,一个特殊的单独的页面,它作为一个组织或个人在上开始点的页面,整个网站的起点和汇总点。浏览者浏览网站的入口。内页主页中包含指向其它页面的超链接。第一章网页设计基础网页布局三种布局国字型布局拐角型布局封面型布局第一章网页设计基础第一章网页设计基础第一章网页设计基础第一章网页设计基础什么是网站网站是一个存放在网络服务器上的完整信息的集合体。它包含一个或多个网页,这些网页以一定的形式链接在一起,成为一个整体。常见的网站有网易、新浪、搜狐、百度、腾讯等。第一章网页设计基础第一章网页设计基础第一章网页设计基础网站设计前期工作网站项目的规模网站的规模是不同的。有些网站的规模相当庞大,而有些网站的规模却很小。规模庞大的网站结构复杂,人员众多,其所涉及到的技术也很复杂,并且与网站背后的传统业务有着紧密的联系。规模较小的网站结构简单,参与建设、维护的设计人员较少,对维护和更新的要求不高,信息发布的平率和数量并不大。第一章网页设计基础6-25第一章网页设计基础6-26第一章网页设计基础网站项目的需求分析需求分析工作是网站建设中重要的一步,也是决定性的一步。只有通过需求分析,才能把网站功能的总体概念描述为具体的网站功能描述书,从而奠定网站开发的基础。需求分析的目的是完整、准确地描述用户的需求,跟踪用户需求的变化,将用户的需求准确地反映到系统的分析和设计中,并使系统的分析、设计与用户的需求保持一致。第一章网页设计基础需求所涉及的内容非常广泛,以下列出的都是网站项目的需求:(1)网站的色彩必须以红色为主;(2)网站界面设计必须简洁;(3)网站访问速度必须在全球范围内都较快;(4)网站必须能够提供在线销售、在线付款的功能;(5)网站中必须有公司总经理一家的合影。第一章网页设计基础网站功能分析网站基本功能:(1)新的信息展示平台(2)新的业务和交流平台(3)新的工作平台第一章网页设计基础6-30第一章网页设计基础网站视觉形象分析每一个政府部门、公司,甚至是个人都具有自己特定的形象。这些形象要素构成了一整套的识别体系,即CI设计体系。对于网站,最直接的设计要素应该是视觉要素VI。VI包括:企业名称、企业标志、企业造型、标准字、标准色、象征图案、宣传口号等。第一章网页设计基础6-32第一章网页设计基础网站内容网站所有内容由3类信息组成:文本多媒体图像第一章网页设计基础栏目栏目的实质是一个网站的大纲索引,索引应该将网站的主体(题)明确显示出来。一般的网站栏目安排要注意以下几个方面:(1)一定要紧扣主题(2)设置一个最近更新或网站指南栏目(3)设定一个可以双向交流的栏目(4)设一个下载或常见问题回答栏目第一章网页设计基础•版块版块比栏目的概念要大一些,每个版块都有自己的栏目。注意以下几点:(1)各版块要有相对独立性(2)各版块要相互关联(3)版块的内容要围绕站点主题第一章网页设计基础使用快速原形法进行网站需求分析在软件开发过程中,最关键的步骤就是确切定义出需求,明确软件要实现的功能是什么,而这恰恰也是最困难的过程。因为许多用户在初期只有一个隐约的、大致的考虑,提不出具体明确的需求。在这种情况下,使用快速原型法进行反复交流、细化需求,就成为一种有效的方法。第一章网页设计基础与软件工程中的螺旋模型类似,一个网站项目从意向开始,到最后的规范化批量设计过程是螺旋推进的。第一章网页设计基础网站设计需要的知识1、确定网站的主题和名称一般来说定位网站的主题,应该从以下几方面考虑:网上求职、网上聊天/即时信息、网上社区/讨论/邮件列表、计算机技术、网页/网站开发素材、娱乐、旅行、参考/资讯、家庭/教育、生活/时尚10大类。第一章网页设计基础(1)合理选题主题要小而精。题材最好是自己擅长或者喜爱的内容。题材不要太滥或者目标太高。(2)精选网站名称名称要正气。名称要易记。名称要有特点。第一章网页设计基础2、确定网站CI形象(1)设计网站的标志(2)选择网站的标准色彩(3)选择网站的标准字第一章网页设计基础3、确定网站的整体风格和创意设计风格是抽象的,是指站点的整体形象给浏览者的感受。风格是独特的,是站点不同于其他网站的地方,或色彩,或技术,或交互方式。风格是有人性的,通过网站的外观、内容、文字、交流,可以概括出一个站点的个性和情趣,是温文儒雅,是执着热情、是活泼易变、还是放任不羁。第一章网页设计基础树立网站风格可以分4个步骤:风格是建立在有价值内容之上的。需要清楚自己希望站点给人的印象是什么。在明确自己的站点的印象以后,开始努力建立和加强这种印象。风格的形成不是一次定位的,而是在实践中不断强化、调整和修饰的。第一章网页设计基础4、网站创意(1)创意是传达信息的一种特别方式创意思考的过程分5个阶段:准备期、孵化期、启示期、验证期、形成期。(2)创意是将现有的要素重新组合第一章网页设计基础5、版面编排(1)主次要分明,中心要突出(2)大小要搭配,相互要呼应(3)图文要并茂,相得要益彰(4)动静要有度,平衡要对称第一章网页设计基础第一章网页设计基础第一章网页设计基础第一章网页设计基础第一章网页设计基础分割分割6、网页风格第一章网页设计基础统一第一章网页设计基础和谐第一章网页设计基础易读第一章网页设计基础易找第一章网页设计基础清晰第一章网页设计基础•7、色彩处理•色彩总的应用原则应该是“总体协调,局部对比”,也就是说,主页的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些强烈色彩对比。第一章网页设计基础确定主色利用相近色黑白灰运用选择适合内容风格的颜色页面的色彩搭配网页制作中色彩的运用技巧:R:101G:174B:255R:0G:60B:12R:138G:202B:136R:36G:124B:34R:210G:144B:212R:117G:45B:119R:255G:91B:91R:158G:0B:26R:211G:211B:211R:122G:128B:131第一章网页设计基础第一章网页设计基础•8、网站的分类•四种分类门户网站职能网站专业网站个人网站第一章网页设计基础第一章网页设计基础第一章网页设计基础第一章网页设计基础第一章网页设计基础7-63•9网站导航系统设计(1)导航系统的两个作用:指向作用示向作用第一章网页设计基础7-64•(2)网站中常见的导航模式集合导航模式层次导航模式线形导航模式上下文导航模式随机导航模式第一章网页设计基础7-65第一章网页设计基础7-66第一章网页设计基础7-67第一章网页设计基础7-68第一章网页设计基础7-69第一章网页设计基础维护发布设计规划网站开发工作流程开发第一章网页设计基础站点维护更新发布站点测试站点创建页面配置站点规划站点内容收集整理资源网站制作步骤第一章网页设计基础•明确网页制作的目的和意义。下面列出在规划站点内容阶段要做的具体事项。•描述网页的服务对象•确定制作网页的目的•具体确定网页的信息内容、浏览界面和信息设置•具体确定网页的制作时间和软硬件环境•规划站点内容第一章网页设计基础•做好上面几步后,接下来的工作就是根据上面的规划创建一个完整的站点。•定义本地站点:就是在自己机器的硬盘上建立一个目录,然后将所有制作网页相关的文件都存放在里面,以便进行网页的制作和管理,因此,站点可以理解成同属于一个web主题的所有文件的存储地点。配置站点第一章网页设计基础•一个页面美不美观,能不能吸引浏览者,创建页面是关键的一步。自顶向下的设计方法自底向上的设计方法创建页面