情景十 综合网站规划与设计（教案）-《网页设计与制作》同步教学（电子工业版）

情景十 综合网站规划与设计 课程名称 网页设计与制作 学时 授课时间 第14、15、16周 授课章节 情景十 综合网站规划与设计 授课班级 授课教师 网页设计与制作课程组 教学目的 专业理论知识 1、 掌握网页设计制作的相关技术 2、 掌握网页制作工具的基本功能 3、 熟悉网站建设整体流程 实际操作技能 1、 掌握网页设计制作的相关技术 2、 掌握网页制作工具的基本功能 3、 熟悉网站建设整体流程 思政元素目标 1、 培养学生团队合作能力 2、 培养学生大局意识 知识、技能重点 1、 掌握网页设计制作的相关技术 2、 掌握网页制作工具的基本功能 3、 熟悉网站建设整体流程 知识、技能难点 1、 掌握网页设计制作的相关技术 2、 掌握网页制作工具的基本功能 3、 熟悉网站建设整体流程 教学方法 课前、课中、课后“三课一体”螺旋渗透教学法 教具 学习通APP、腾讯会议、学习强国APP 教学过程设计 10.1 网站整体开发与制作 10.2 模仿型任务讲解 网站开发制作流程 如何定位网站主题 如何收集整理素材 如何设计网站导航 如何设计网站LOGO 如何设计网站布局和风格 如何建立站点？ 10.3开放型任务制作 备注 教学过程 【组织教学】 1、准备教学设备、软件等； 2、点名检查学生出勤情况，填写教学情况记录表； 3、发布教学资料 【复习旧课、导入新课】 1、提问：什么是整体网站，说说你的理解？ 2、展示多个不同类型网站； 3、教学目的：掌握网页设计制作的相关技术；掌握网页制作工具的基本功能；熟悉网站建设整体流程。 【讲授新课】 知识储备 1.1学习路线，如图10.1 图10.1网站规划学习路线 1.2 知识小天地 网站开发制作流程 网站建设是一个系统工程，有一定的基本流程，必须遵循相应的设计步骤才能设计出令客户满意的网站。因此，在进行网站建设前，有必要了解整个网站建设的基本流程，才能制作出更好更合理的网站。 网站开发制作流程如下图所示： 图10.2 如何定位网站主题 　在制作设计一个网站的时候，首先遇到的问题就是定位网站主题。所谓主题就是网站的内容属于哪种类型的题材，这就需要对市场进行调研与分析，了解目前互联网的发展状况及同类型网站的发展、经营情况，汲取这些网站的特点，发挥自己的优势，进而确定自己网站的功能，在根据网站功能确定网站应到达的目的和应起到的作用，确定网站的名称。 目前知名网站的题材大致可划分为网上求职类、网上聊天（即时信息）类、网上社区（贴吧论坛） 类、计算机技术类、娱乐网站类、旅行类、参考/资讯类、家庭/教育类、生活/时尚类。 每个大类都可以继续细分，当然，如果自己有独特的题材可以选择，也可以制作个性化网站。 确定了网站的主题，就要确定网站的名称，网站的名称很重要，它是网站主题的概况和浓缩，决定着网站是否更容易被人接受。所以网站的名称一定要简短有特色，容易被用户记住且能体现出一定的内涵，这样才会给浏览者更多的想象力和冲击力。 如何收集整理素材 网站的主要内容是文本、图像和多媒体，构成了网站的主体内容。否则，没有一个好的结构设计达到网站设计的初衷，就无法吸引用户。在网站主题确定之后，我们需要对每个页面的内容做一个大致的规划和设计，比如哪些页面需要使用模板，哪些页面需要使用特殊设计的图像，哪些页面需要使用更动态的效果，如何设计菜单，使用什么样的链接样式，使用什么颜色和样式的页面等等，所有这些都对资源的收集起着引导作用。 文本素材。文本内容可以让浏览者明白网页要表达的内容，可以通过多种途径获取文本素材，比如企业、用户，也可以通过权威性的官网、书籍等途径收集，还可以由制作者自己编辑文字材料。 图片素材。例如，企业的标志、网页的背景图像等，这些图像对观看者的视觉有很大的影响，可以自己拍摄制作，可以根据企业要求制作。 库文件。对于一些常见和重要的网页对象，需要管理和使用库文件。在设计网页之前，可以编辑这些库文件以备将来用。 Flash和其他多媒体元素。Flash和其他多媒体元素在许多网站中使用越来越多，这些多媒体元素需要在网页设计之前正确收集或生成。 如何设计网站导航 导航菜单是网站主要内容或特征的列表，通常由一组链接或icon组成，并在视觉样式上与网站其他内容有显著差异。 导航菜单对于一个网站来说是非常重要的，它可以让页面浏览变得更容易，如果没有一个好的导航栏，即使网页做的再怎么好，也会给浏览者造成很差的体验。那么在设计导航栏的时候，我们需要注意以下几个原则： （1）导航菜单要清晰可见； （2）导航菜单要易于操作； （3）谨慎选择导航栏的方向。 如何设计网站LOGO 网站LOGO代表一个网站的对外形象，因此企业要对网站LOGO的设计引起重视。用户在浏览网站时，映入眼帘的第一个图像就是LOGO，那么，如何设计网站LOGO呢？ （1）要有创意。在这个追求特立独行的时代，任何设计都必须有自己的个性。也就是在设计的时候必须发挥自己的创意。LOGO的设计必须要大方简单，这样有利于给用户留下深刻的印象。切记不要设计得太复杂，这样反而适得其反。 （2）符合网站形象。LOGO不是一个简单的符号，它是网站具有代表性的符号，需要把关于网站的信息融入到LOGO例，从LOGO中能够体现网站的精神，传递出网站的含义。 【赏析】部分网站的LOGO 图10.3 如何设计网站布局和风格 （1）网站的色彩搭配 网页中的色彩搭配设计影响着网站的美观度，也是带给浏览者的第一视觉上的冲击，因此，确定网站的色彩是非常重要的一步，不同的颜色搭配可能会影响到浏览者的情绪，赏心悦目的色彩搭配才能吸浏览者停留在网站上浏览信息。 在具体的网页设计中，色彩搭配可以参考一下几个原则： 色彩的鲜明性、色彩的独特性、色彩的艺术性、色彩搭配的合理性。 【赏析】部分网站的色彩搭配效果 图10.4 图10.5 图10.6 图10.7 （2）网页布局 网页布局在很大程度上决定了网站的访问者将如何与网页内容进行交互。不同的网页布局带来的交互体验是不一样的，因此网页的设计常常需要根据不同的产品特点选择不同的网页布局，由此获得良好的用户体验。 网页布局元素一般包括：网站名称、导航栏、主图内容、侧边区、搜索区、友情链接和版权等。 网站的风格大部分是各不相同，但是布局都有一定的规律，常见的网站布局形式有八种，分别是“国”字型布局、拐角型布局、标题正文型布局、封面型布局、“T”结构布局、“口”型布局、对称对比布局、POP布局。下来逐一给大家介绍这八种网页布局的常见类型。 （1）“国”字型布局 这种布局是普通也是常见的，一些大型网站经常使用这种类型。它的特点就是规范，内容主次由上到下，网页上面是标题条幅、导航栏，下面就是网站相关内容信息等，例如chinaren、163、sina等网站。 （2）拐角型布局 该布局特点就是把相关内容的链接放到网页的左面或右面，另一面就是相关的文字信息，网站的上面是标题条幅或是主要内容导航栏，例如校园网站等。 （3）标题正文型布局 它的特点就是利用文字来布局，除了标题，下面就是文章，像一些专门的文章、小说页面或注册页面就属于这种类型。 （4）封面型布局 它的特点是网站的首页是一些精美有创意的图案结合一些小的动画组成，在页面当中，没有什么导航栏指示，只是有简单的“进人”等链接，这种布局一般设计性网站用的比较多，像设计论坛、设计公司、个人网站等，因为这种布局需要精心设计，给人的视觉感觉也很美妙。 （5） “T”结构布局 所谓“T”结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“T”结构布局的形式。 如左右两栏式布局，一半是正文，另一半是形象的图片、导航。或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等。 这样的布局有其固有的优点，因为人的注意力主要在右下角，所以企业想要发布给用户的信，大都能被用户以最大可能性获取，而且很方便，其次是页面结构清晰，主次分明、易于使用。缺点是规矩呆板，如果细节色彩上不注意，很容易让人“看之无味”。 （6） “口”型布局 这是一个形象的说法，指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。 这种布局的优点是页面充实、内容丰富、信息量大，是综合性网站常用的版式，特别之处是顶部中央的一排小图标起到了活跃气氛的作用。 缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站使用多帧形式，只有页面中央部分可以滚动，界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。 （7）对称对比布局 顾名思义，它指采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型网站。其优点是视觉冲击力强，缺点是将两部分有机地结合比较困难。 （8）POP布局 POP源自广告术语，指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类网站，优点显而易见：漂亮吸引人，缺点是速度慢。 二、模仿型任务讲解 2.1 综合网站的规划与设计 大家自行网上搜相关红色文化主题的网站及素材，欣赏好的网站并分析其网站的布局、颜色搭配等内容，保存图片等相关素材，并与其他同学进行交流分享，完成咨询单。 表10-1 资讯单 综合网站规划与设计资讯单 学习情景 综合网站规划与设计 学习任务 学时 6学时 案例描述 搜集渠道 素材要求 小组成员 参考资料 完成时间 案例分析 2.2常见网站案例分析 案例学习目标 · 能够对给出的网站进行合理分析 · 能够根据要求，规划设计综合网站 案例知识要点 · HTML：标签的使用 · CSS：网页布局、元素美化 · JavaScript：交互功能 通过案例分析，掌握综合网站的规划与设计，并能够根据给定的要求，确定网站的风格、页面的布局、内容素材等。 实现探究 2.3 案例分析 以小组为单位，分析给出案例。 图10.8 新华网 图10.9 招聘网 图10.10 技术论坛 图10.11 图书馆 【思考】 （1）如何设计红色文化网站 （2）如何根据网站主题选取网页布局方式 【课堂小结】 本次任务介绍了使用多方面的知识和技能设计与制作网站的主页以及主页在网站中的作用，同时还详细的介绍了如何使用Div+CSS的方式布局网页。本次任务除了使用Div+CSS布局网页之外，该网页中包含了多种网页元素：文字、图像、导航栏、浮动框架、表单和Flash动画，也展示了这些网页元素在主页中的综合运用效果。 【布置作业】 1. 如何通过HTML标签完成网页的结构？ 2. 网页布局需要注意事项有哪些？ 【创新型任务】 分小组选择设计科技强国、红色之旅、绿水青山为主题的综合网站的设计与规划。通过推送学习强国学习视频的绿水青山栏目、看科技栏目、看党史的红色故事栏目，搜集相关应用CSS样式网站素材，分小组设计科技强国、红色之旅、绿水青山的应用CSS样式网站，渗透革命文化和社会主义先进文化教育、生态文明教育多个“思政元素线”。培养学生爱国情、强国志。 教学评价 考核要点 考核内容 标准分 计分 知识考核 (1)课前观看学习通微视频及完成微课下方进阶练习题 20   (2)能设计与制作导航栏 (3)应用CSS样式设计网页的布局结构 (4)将多个网页整合为一个完整的网站 能力考核 (5)能灵活运用CSS样式设计到小组作业科技强国、红色之旅、绿水青山网页中 30   思政考核 (6)过程考核：考查学生的团队合作、创新意识、思维、专业技术能力等方面综合评价 20   (7)网页作品：对设计作品中体现的中国传统文化、生态文明意识、与软件专业有关的最新科技技术、创新性等方面进行评估 30   总计 100   评价方式 自我评价 小组评价 教师评价 考核得分       学科网（北京）股份有限公司 $$