网站的规划与设计 (2)ppt课件

1、LOGO4.14.1、 网站规划网站规划规划网站：规划网站： 详细地规划网站将为今后的网站建立提供一个总体框架，使网站的建立有“轨可循，在详细实施过程中按部就班、循序渐进地完成整个网站的建立，既提高了效率，节约了时间，又有利于规范网站的总体规划，一致网页的风格，为创建一个风格独特的个人网站打下根底。欣赏优秀作品欣赏优秀作品一、欣赏优秀作品：一、欣赏优秀作品：1.欢迎光临清华大学欢迎光临清华大学2.欢迎进入中国少年雏鹰网欢迎进入中国少年雏鹰网3.中国科普博览中国科普博览二、思索以下问题：二、思索以下问题：1.这些网站是怎样围绕主题展现内容的？这些网站是怎样围绕主题展现内容的？2.这些网站提供了哪

2、些栏目及功能？这些网站提供了哪些栏目及功能？3.网站的链接有哪些特征，能否便利？网站的链接有哪些特征，能否便利？4.网站主页的规划、颜色运用有哪些特点？网站主页的规划、颜色运用有哪些特点？一、开发网站的根本过程一、开发网站的根本过程二、网站的规划二、网站的规划1.网站主题确实定网站主题确实定网站的规划从选择网站的主题开场。网站的选题，就是要根据网网站的规划从选择网站的主题开场。网站的选题，就是要根据网站的开发目的和访问网站的用户群，确定网站的主题，并给网站站的开发目的和访问网站的用户群，确定网站的主题，并给网站起一个简练响亮的名字。起一个简练响亮的名字。 留意：贴近学习和生活留意：贴近学习和生

3、活2.网站运转环境确实定网站运转环境确实定网站环境包括网站效力器情况、文件磁盘存储空间、网站域名管网站环境包括网站效力器情况、文件磁盘存储空间、网站域名管理等方面。理等方面。 3.网页制造工具的选择网页制造工具的选择主要包括选择网页制造工具主要包括选择网页制造工具Frontpage、Dreamweaver)、图像处置工具图像处置工具Photoshop、Fireworks、paintshop、动画制造软件动画制造软件flash、Ulead gif animator等。等。 4.网站开发义务的管理网站开发义务的管理 (1)义务分工义务分工 (2)时间安排时间安排主要软件Dreamweaver主要软

4、件Photoshopv由由Adobe公司推出的专门用于图形、图像处置的软件公司推出的专门用于图形、图像处置的软件Photoshop以其强大的功以其强大的功能、集成度高、适用面广和操作简便而著称于世。它不仅提供强大的绘图工具，能、集成度高、适用面广和操作简便而著称于世。它不仅提供强大的绘图工具，还能直接从扫描仪、数码相机等设备采集图像，并对它们进展修正、修复，调整还能直接从扫描仪、数码相机等设备采集图像，并对它们进展修正、修复，调整图像的颜色、亮度，改动图像的大小，而且还可以对多幅图像进展叠加，并添加图像的颜色、亮度，改动图像的大小，而且还可以对多幅图像进展叠加，并添加特殊效果，使现实生活中很难

5、遇见的景像非常逼真地展现。特殊效果，使现实生活中很难遇见的景像非常逼真地展现。PhotoshopPhotoshop界面界面界面默许翻开的面板有：属性栏、工具栏导航、颜色、界面默许翻开的面板有：属性栏、工具栏导航、颜色、图层：图层：Photoshop入门引见v效果欣赏效果欣赏主要软件Flashv 由由Macromedia公司开发设计的多媒体软件所生成的动画公司开发设计的多媒体软件所生成的动画(.swf)文件非常小，用在网页设计上不仅可以使网页更加生文件非常小，用在网页设计上不仅可以使网页更加生动，而且小巧小巧下载迅速，使得动画可以在翻开网页很短动，而且小巧小巧下载迅速，使得动画可以在翻开网页很短

6、的时间里就得以播放。并且把音乐，动画，声效，交互方式的时间里就得以播放。并且把音乐，动画，声效，交互方式交融在一同，可以直接嵌入网页的任一位置，非常方便。交融在一同，可以直接嵌入网页的任一位置，非常方便。1 1 舞台舞台(Stage) (Stage) 2 2 时间轴窗口时间轴窗口 (Timeline) (Timeline) 3 3 绘图工具栏绘图工具栏 (Drawing Toolbar) (Drawing Toolbar) 4 4 规范工具栏规范工具栏 (Standard Toolbar) (Standard Toolbar)5 5 图库窗口图库窗口 (Library Window) (Lib

7、rary Window) 6 6 控制器面板控制器面板 (Controller) (Controller)FLASH任务环境任务环境西双版纳植物园虚拟瓷都中国金鱼FLASH在中国科普博虚拟博物馆建立中的运用例如三、网站的设计三、网站的设计 网站设计的目的：网站设计的目的： 把信息以恰当的方式组织并呈如今网上，设法吸引把信息以恰当的方式组织并呈如今网上，设法吸引人们的关注，并为阅读者提供方便的访问。人们的关注，并为阅读者提供方便的访问。一网站构造的设计：设计网站的栏目。一网站构造的设计：设计网站的栏目。 网站的栏目可以有多层，以可以恰当地表达网站主题网站的栏目可以有多层，以可以恰当地表达网站主题

8、为好。此外，每个栏目本身应有一个大致的内容描画，以为好。此外，每个栏目本身应有一个大致的内容描画，以表达该栏目的设计思绪，充实整个网站的总体构造设计。表达该栏目的设计思绪，充实整个网站的总体构造设计。“虎门销烟启思录网站的构造虎门销烟启思录网站的构造“虎门销烟启思录网站的构造三、网站的设计三、网站的设计二网页的版面设计二网页的版面设计1.风格设计风格设计 包括网页规划的整体外型、颜色的搭配、字体图包括网页规划的整体外型、颜色的搭配、字体图片的款式设置、网站的标志设计等。片的款式设置、网站的标志设计等。如：严肃严肃、清新温馨、深沉厚重、生动活泼、如：严肃严肃、清新温馨、深沉厚重、生动活泼、古朴典

9、雅。古朴典雅。简约大方简约大方风格独特，构图巧妙风格独特，构图巧妙生动活泼生动活泼颜色丰富颜色丰富浓郁的文化气味浓郁的文化气味v2.版面规划设计版面规划设计标题信息、栏目信息、内容信息、附加信息等，标题信息、栏目信息、内容信息、附加信息等，要进展合理的放置，让人看起来井井有条，主次要进展合理的放置，让人看起来井井有条，主次清楚。清楚。普通来说： 屏幕中央最能引人留意，屏幕上方紧随其后，屏幕左右侧通常放置不太重要或固定信息，附加信息普通放在最下方。常见网页规划类型布局类型布局类型布局方式布局方式实例实例“国国”字型字型 上面是网站的标题及横幅广告，接下来是网站的主要上面是网站的标题及横幅广告，接

10、下来是网站的主要内容，左右分别列一些小条，中间是主要内容，下面内容，左右分别列一些小条，中间是主要内容，下面是一些网站的信息是一些网站的信息 人民网人民网拐角型拐角型上面是标题广告，接下来在左侧是导航栏，右侧是正上面是标题广告，接下来在左侧是导航栏，右侧是正文，下面是网站的信息。文，下面是网站的信息。 itedu/zuopin201 itedu/zuopin2019/mansu9/mansu标题正文型标题正文型上面是标题，下面是正文。上面是标题，下面是正文。左右框型左右框型左边是导航栏，右边是正文。有时最上方会有一个小左边是导航栏，右边是正文。有时最上方会有一个小标题。标题。上下框型上下框型上面是导航栏，下面是正文。上面是导航栏，下面是正文。design.yesky/shodesign.yesky/show/w/综合框架型综合框架型左右、上下两种框架结构的结合。左右、上下两种框架结构的结合。封面型（封面型（Flash型）型）精美的平面或动画作为首页。精美的平面或动画作为首页。//birds三网页的交互设计三网页的交互设计 用户如何访问网站？怎样从一个位置到另一个位置？怎样防止用户在网站中迷路? 链接点设计要思索人们在阅读网站时通常有哪些需求？协助阅读者快捷的跳转到所需的页面。义务 以小组