网站的规划与设计课案.ppt

现如今，网站已经广泛应用到社会的各行各业，渗透到各个领域。 那我们可以借助网站来做什么呢？ 宣传班级、学校形象； 展示学习成果； 开展研究性学习； 交志趣相投的朋友； …… 开发网站的基本过程 刚才观摩的网站因为开发的目的不同，其内容和表现的形式也就不同，但开发网站的基本过程是相同的。 在互联网中，网站成千上万，浏览者常常是走马观花，一带而过，只有精彩、内容极其丰富的网站，能吸引住浏览者。这种结果首先要归功于网站的规划和设计者。 网站主题的确定 网站的规划从选择网站的主题开始。 网站的选题，就是要根据网站的开发目标和访问网站的用户群，确立网站的主题，并给网站起一个简练响亮的名字。 排名前100位的全美知名网站的十类题材： 第1类：网上求职； 第2类：网上聊天/即时信息/ICQ； 第3类：网上社区/讨论/邮件列表； 第4类：计算机技术； 第5类：网页/网站开发； 第6类：娱乐网站； 第7类：旅行； 第8类：参考/资讯； 第9类：家庭/教育； 第10类：生活/时尚。 网站主题的确定 作为中学生，应选择贴近我们学习和生活实际的主题，这样容易入手，容易完成，也容易吸引同学，引起共鸣。 网站主题的确定 主题要小而精 诗歌鉴赏——水调歌头.明月几时有 Flowers——荷花 最后针对这一小的题目展开进行栏目的设计，简单,容易做出特色 网站名称 一个好的网站名称可以是朴实的或者是想象力丰富的、容易引起联想的，要避免使用过于生僻难懂的词汇。 网站主题的确定 一个别具一格、琅琅上口的网站名称能令人印象深刻，不但能让用户了解网站的主题内容，而且还能吸引更多的浏览者。 网站主题的确定 大家选题时可以参考P95 表4-2 主题网站类型及名称 网页制作工具的选择 制作网站的软件有很多，常见易学的制作软件有FrontPage和Dreamweaver。 网页制作工具的选择 当然要让网页有好的视觉效果，还必须要有图像处理软件来对图片进行处理，如Photoshop、Fireworks； 如果还需要动画效果，还需要运用动画制作软件，如Flash、Gif动画制作软件等。 网站开发任务的管理 要让网站顺利、高效地完成开发和设计，还必须要有详细的任务分工和时间安排。 网站的规划网站的设计 网站设计的目的在于把需要表达的信息以恰当的方式组织并呈现在网上，设法吸引人们的关注，并为浏览者提供方便的访问。 网站的结构设计 （栏目） 网站的结构设计 写一篇文章：拟好提纲，文章才能主题明确，层次清晰 造一座高楼：设计好框架图纸，才能使楼房结构合理 网站的结构设计 制作网站前要设计好网站的栏目，网站的栏目可以有多层，但并不是层数越多越好，以能够恰当地体现网站主题为好。 P100 “虎门销烟启思录”网站结构图 P101 “虎门销烟启思录”网站一级、二级栏目 实践：网站的规划设计1 在我的电脑址栏输入00 ，访问网页规划与设计参考资源，观摩网站，查看资料，参考书本，规划设计自己的网站，填写学案前半部分。 网站的结构设计 （栏目） 网页的版面设计 网页的版面效果在吸引访问者浏览网页中起了重要的作用 风格设计 版面布局设计 一个色彩搭配合理、版面布局清新的网站会让访问者留恋忘返。 风格设计 什么是风格？ 风格是指网站的整体形象给浏览者的综合感受 严肃庄重 清爽温馨 深沉厚重 生动活泼 古朴典雅 豪迈奔放 风格设计 风格设计 风格设计 风格设计 观摩网站截图，思考： 网站主题和风格、色彩有什么关联？ 风格设计 网站主题和风格、色彩有什么关联？ 风格设计与主题是密不可分的，是为突出主题服务的。 风格设计 一种风格的形成需要从多方面着手设计，包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等。 风格设计注意问题 同一个网站的各网页之间应保持风格一致。 版面布局设计 网页要呈现的内容很多，概括起来可分为标题信息、栏目信息、内容信息、附加信息等，需要进行合理的放置，让人看起来井井有条，主次分明。 版面布局设计 一个网页的版面通常以屏幕中央最能引人注意，屏幕上方紧随其后，屏幕的左右侧通常放置不太重要或固定信息，附加信息（如版权信息）一般放在最下方。 版面布局设计 版面布局的整体造型和色彩搭配的灵活运用也会影响人们的注意力，产生不同的视觉效果。 版面布局设计 版面布局没有绝对统一的方法，应视需要而定，有创意的布局会给人以耳目一新的感觉。 常见的网页布局结构 1．“国字”型布局 因布局结构与汉字“国”相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。 常见的网页布局结构 2．T型布局 布局结构与英文大写字母T相似