网页设计与制作项目案例教程DreamweaverCS6教学课件完整版电子教案.ppt

;掌握网页设计基本概念 了解网页的基本版块结构与网页的基本元素 了解网页制作工具以及相关技术 了解网站制作步骤 掌握网页设计内容与方法 ;;;1.1 网站;1.2 网页;1.2 网页;1.3 首页;1.4 网页的表现形式;;2.1 网站LOGO;2.1 网站LOGO;2.2 导航条;2.2 导航条;2.3 Banner;2.3 Banner; 2.4 内容版块;2.5 版尾或版权版块;;3.1 文本;3.2 图片;3.3 超链接;3.4 动画;3.5 声音和视频;3.6 表格;3.7 表单;3.8 其他常见元素;;4.1 文本编辑器;4.2 Dreamweaver网页设计软件;4.3 Photoshop图像处理软件;4.4 Flash动画设计软件;4.5 Fireworks网页图像处理软件;;5.1 CSS;5.2 JavaScript;;; 网站需求分析 明确设计开发网站的目的和用户需求，从而做出切实可行的设计计划。要弄清开发的网站有哪些类型的用户使用，各个用户又有哪些不同的需求，网站的功能是什么等等，为网站设计提供可靠的依据。 确定网站主题和内容 主题是网站所要表达的主要内容。 主题是网站的灵魂，它决定了网站的内容和风格，内容要为主题服务，尽量选用与主题相关的内容。 主题定位时一般要选择自己最擅长的题材，主题要小而精，切忌兼容并包，主题贵在创新。例如，旅游、娱乐休闲、体育、新闻、教育、医疗、时尚等。要求网站的主题鲜明突出，要点明确 ;;驴行天下网站; 网页设计的流程 网页设计的流程可以分为两部分： 第一是站点的规划及草图的绘制。 第二是网页的设计与制作，其中设计网页的第一步是设计版面布局，接着就是通过软件的操作，将设计的蓝图变为现实。;;3.1、 网页版面布局设计 3.1.1 网页版面布局原则 主次分明，中心突出 大小搭配，相互呼应 图文并茂，相得益彰 适当留空、清晰易读 简洁一致性 文本和背景的色彩，主题色通常只需2－3种。;3.1.2 网页布局方法 纸上布局法 软件布局法 可以利用Photoshop 、Fireworks等软件来实现。;3.2、 常见的网页版面布局形式 网页版面的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。 ;1）骨骼型 网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三???、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。;;;;;;4）中轴型 沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。 ;5）曲线型 ; 6）倾斜型 ;7）对称型 ;以相对对称手法制作的导航页面。 ;8）焦点型 ;通过离心的版式，清晰地传达出网站提供的服务。 ;9）三角型 ;10）自由型 ;;4.1 网页色彩搭配 在网页设计中，色彩是网页风格的灵魂，是树立网站形象的关键，也是网站设计风格的重要组成部分。 任何色彩都具备3个特征，即色相、亮度和纯度。 色相：指色彩的名称。 亮度：指色彩的明暗程度。 纯度：指色彩的鲜艳程度。;4.2、 各种色彩分析 不同的颜色给人们不同的心理感受，在设计网页时形成独特的色彩效果，给浏览者留下深刻的印象。 1）红色 是强有力的色彩，是热烈、冲动的色彩。 ;2）黄色 黄色是亮度最高的颜色，灿烂，辉煌，有着太阳般的光辉；黄色有金色的光芒，又象征着财富和权利。 ;3）蓝色 蓝色是原始的颜色，是海洋和天空的颜色，散发着清爽、幽静、和平、理性、稳定、冰冷的意味。;4）绿色 绿色美丽、优雅，宽容、大度、单纯、年轻。 ;5）紫色 紫色属于不冷不热的中性色，散发着神秘和高贵的色彩。;6）橙色 橙色可以使人脉搏加快，十分活泼。它使人联想到金色的秋天，丰硕的果实，是一种富足的、快乐而幸福的色彩。;7）白色 　　　白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄;8）黑色 　　　黑色的内涵最为丰富和复杂，黑色具有很强的感染力，能够表现出特有的高贵显得严肃、庄严和坚毅。另外，黑色还具有恐怖、烦恼、忧伤、消极、沉睡、悲痛甚至死亡等意象。黑色用在宗教网站中显出严肃和庄严。;9）灰色 灰色居于黑色与白色之间，属于中等明度，是视觉中最安静的色彩，有很强的调和对比的作用。 灰色是中性色，可以与任何色彩搭配，也可以帮助两种对此