Web编程基础（HTML+CSS）项目实战教程任务3-设计策划网站教学课件.pptx

《Web编程基础（HTML+CSS）项目实战教程任务3-设计策划网站教学课件.pptx》由会员分享，可在线阅读，更多相关《Web编程基础（HTML+CSS）项目实战教程任务3-设计策划网站教学课件.pptx（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Web编程基础（HTML+CSS）项目实战教程任务3-设计策划网站任务3：设计策划网站WEB设计策划网站网页设计原则网站制作流程网页设计原则国字型结构布局：最上面是网站的标志、导航栏以及横幅广告条；接下来就是网站的主要内容，左右分列，中间是主要部分；最下面是网站的一些基本信息，如版权声明、联系方式等。1.网页的布局网页设计原则川字型结构布局：整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。例如：搜狐网站，如右图所示。1.网页的布局网页设计原则新闻网首页布局：本教材将要制作的“新闻网”首页自上而下，是简洁的上中下结构，最上面的是导航栏，中间的为内容主体区

2、，下面的是版权区。1.网页的布局网页设计原则网页色彩搭配原则(1)色彩的鲜明性 如果一个网站的色彩鲜明，很容易引人注意，给浏览者耳目一新的感觉。(2)色彩的独特性 网页的用色必须有自己独特的风格，这样才能给浏览者留下深刻的印象。(3)色彩的艺术性 在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站。(4)色彩搭配的合理性色彩根据主题来确定，不同的主题选用不同的色彩。2.网页的配色网页设计原则网页色彩搭配方法(1)同种色彩搭配：是指先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起来色彩统一，具有层次感。(2)邻近色

3、彩搭配：色环上相邻的颜色，如在计算机Photoshop中的红绿蓝(RGB)色环上红色和黄色即互为邻近色，这样的页面看起来色彩丰富，但没有强烈的视觉冲击感。(3)对比色彩搭配：可以突出重点，产生强烈的视觉效果。(4)暖色色彩搭配：是指使用红色、黄色、橙色等色彩的搭配。(5)冷色色彩搭配：是指使用绿色、蓝色、紫色等色彩的搭配。(6)主色的混合色彩搭配：是指以一种颜色为主，同时辅以其他色彩混合搭配。2.网页的配色网页设计原则帝尔复读机网站网站制作流程规划与准备阶段网页设计与制作阶段网站的测试、发布和维护阶段1.规划与准备阶段决定主题，确定网站的用途：主题要小而精，题材最好是擅长或者喜爱的内容，要新颖

4、且符合自己的实际能力。收集资料和素材：网页中常用的素材种类有文字、图片、音频、视频和动画等。网站的素材选择要跟网站的主题和风格密切相关。规划网站结构：网站由几个主要的栏目组成，这些栏目是网站的核心内容，体现了网站的核心价值。1.规划与准备阶段新闻网网站规划本教材要制作的新闻网网站规划，如下图所示：2.网页设计与制作阶段对网站风格有一个整体定位：网站Logo、网页标题、导航栏、网页文字、版面设计、网页的配色。设计首页、二级栏目页及内容页。利用超链接把各页面有机地整合到一起。2.网页设计与制作阶段新闻网目录结构本教材要制作的新闻网网站结构，如下图所示：3.网站的测试、发布和维护阶段网站测试、发布网

5、站测试阶段一般是在本地计算机上模拟服务器进行测试。测试好后，如果有服务器，直接发布即可；如果没有服务器，可以从网上租赁空间发布。维护和更新每隔一段时间，需要定期对其内容进行维护和更新，以便提供最新信息，吸引更多的用户。任务3-设计策划网站了解各种类型网页的布局结构和色彩搭配，建立合理的网页结构布局。网站制作流程的三阶段是规划与准备、网页设计与制作、网站的测试发布和维护。课堂实训任务描述：制作班级网站中学习交流页面，初步了解HTML文档的基本结构，体会网页中添加文本内容的方法，体会使用CSS样式修饰美化页面，页面效果如图所示。课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务