您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 管理学资料 > Dreamweaver 第三章网页设计基础知识
第三章网页设计基础知识教学内容:1、认识网页和网站2、解析网页版式设计教学目的:通过本章可以学习网页由哪些部分组成,对之后设计制作客户网站会有一个比较清晰的思路,知道页面里应该可以放哪些版块和内容。第一部分认识网页和网站网页设计基础网站作为新媒体,具有很多与传统媒体不同的特征与特性,在开始制作网页之前,需要对网站的设计有全面的了解和认识。这一章首先介绍网页的基本概念及构成要素,帮助大家理解网页的特点与结构;此外,网页版式与风格设计是建设一个成功网站的关键,学习基本的规律有助于设计出更美观、实用的网站。什么是网页与什么是网站由于互联网具备同时传送文字、动画、图形、声音等多媒体的能力,使之成为当今最流行的媒体。而形式各异、内容繁杂的网页是这些信息的载体。那么什么是网页?什么是网站?网页与网站究竟有哪些异同?网页包含哪些基本构成要素?认识网页与网站网页(WebPage)实际上是一个文件,网页经由网址(URL)来识别与存取。当浏览者输入一个网址或单击某个链接,在浏览器中显示出来的就是一个网页。认识网页与网站网站(WebSite)是各种各样网页的集合,有的网站内容众多,如新浪、搜狐等门户网站;有个网站只有几个页面,如个人网站。在构成网站的众多网页中,有一个页面比较特殊,称为首页(HomePage)。例如,当浏览者输入搜狐网站地址“”后出现在第一个页面,即sohu网站的首页,如图1.1所示。浏览者可以根据首页的导航进入其他页面,了解更多内容。第二部分解析网页版式设计网页的基本构成要素虽然网页种类繁多,形式内容各有不同。但网页的基本构成要素大体相同,包括标题(Logo)、导航、文本、图片、动画、超链接、表单、音视频等,如图所示。网页设计就是要将上述构成要素有机整合,表达出美与和谐。网页版式设计网页的版式设计是网页设计的核心,主要内容包括网页整体布局设计和导航样式的设计。本节将介绍常见的几种网页布局,以及网页导航设计应遵循的原则。网页布局是网页设计的基础,目前网页的布局主要可归为三大类型:1、分栏式结构2、区域分布式结构3、无框架局限式结构分栏式结构区域分布式结构DreamweaverCS5无框架局限式结构DreamweaverCS5导航设计网页风格设计同样的版式设计,配色不同,文字样式不同,也可以呈现出多种不同的网页风格。本节将结合实例从网页配色、文字艺术两个方面对网页风格设计进行具体分析。设计精美的网站都有其色调构成的总体倾向。以一种或几种临近颜色为主导,使网页全局呈现某种和谐、统一的色彩倾向。下面介绍一些网页配色的具体经验。运用色系先根据网页主题,选定一种主色,然后调整透明度或饱和度,也就是将色彩变浅或加深,调配出新的色彩。这样的页面看起来色彩一致,有层次感,如图所示。三星网站运用蓝色系营造出蓝色星空的感觉。使用对比色可以充分利用对比色进行设计,同时注意使用灰色调进行调和。这样的作品页面色彩丰富,如图所示。文字艺术““文字艺术实例分析1、网站描述这是一家航空公司的网站首页。界面设计给人现代、驿动的感觉,这与公司的风格相一致。导航设计简洁利落,很值得学习借鉴,如图所示。实例分析2、配色网页选用蓝色系,象征天空,与网站主题一致。网页主要运用了两种蓝色,分别是“#14397D”和“1E95BD”,如图所示。除此之外,网页文字的配色主要以白色和蓝色为主。实例分析3、布局网页布局采用的是比较常见的分栏式结构,如图所示。A为网站的Logo所在的区域;B为网站主菜单所在的区域;C为搜索与其他公共功能所在的区域;D为网站的内容区域,主要由文字和图片组成;E为版权信息所在的区域。总结1、我们学习了网页和网站的区别2、我们学会了网页基本构成要素、网页版式设计、网页风格设计、3、做一个实例的分析(关于布局,配色等)作业截图收集两个以上自已喜欢的网站,进行网站的分析布局、配色等等
本文标题:Dreamweaver 第三章网页设计基础知识
链接地址:https://www.777doc.com/doc-3393463 .html