工作任务1-网站项目分析-2学时

AI生成AI生成网页设计与制作教案授课教师授课班级授课日期课题网站项目分析计划学时2教学目标知识目标1.学习网页的基本概念、构成及分类。2.熟悉网页设计的要点及常用工具。3.掌握网站需求分析的概念。能力目标1.掌握网站的基础知识。2.熟悉网页制作工具的用法。3.掌握网站需求分析的方法。素质目标1.培养正确的世界观、人生观和价值观。2.培养自主学习和终身学习的能力。教学重点1.网页的构成元素（文字、图像、动画、声音、视频、表格、导航栏、交互式表单）及网页的基本分类（静态网页与动态网页）。2.网站需求分析的概念、获取需求的方法（问卷调查法、访谈法、实地操作）及需求分析策略的三个阶段。教学难点1.静态网页与动态网页的本质区别及各自技术特征。2.网站需求分析策略三个阶段的递进关系及需求分析报告的撰写要点。教学模式及教学方法讲授法、案例分析法、小组讨论法教学活动及主要环节素质培养【课前导学】预习教材"1.1网站基础知识"，了解网站与网页的基本概念、网页的构成元素及分类。预习教材"1.2博客网站项目分析"和"1.3校园网站项目分析"，了解两种不同类型网站的项目分析过程。培养自主学习和终身学习的能力。【课中践学】【情景导入】（约10分钟）1.教师提出问题：在制作网站之前，需要做哪些准备工作？引导学生思考网站项目分析的重要性。2.介绍网站需求分析流程（图1-1）：业务流程分析员根据网站需求分析报告制作项目模型；网页设计师得到项目模型后制作出相应的模板和网页原型并提交给客户代表确认。3.强调网站需求分析报告关系到整个项目的正确性、可行性和必要性，对项目至关重要。培养正确的世界观、人生观和价值观。【项目实施】（约70分钟）（一）1.1网站基础知识（约30分钟）1.1.1网页简介1.网页构成文字：网页中最重要的信息载体和交流工具之一，网页中信息的展示形式常以文字为主。图像：分为静态图像（JPEG、PNG格式）和动态图像（GIF、SVG格式）。动画：有效吸引访问者的注意。声音：多媒体和视频网页重要的组成部分。视频：使网页效果更加精彩且富有动感。表格：控制页面信息的布局方式。导航栏：一组超链接，其链接的目的端是网页中重要的页面。交互式表单：连接数据库并接收访问者在浏览器端输入的数据。2.网页的基本分类（1）静态网页：标准的HTML文件，扩展名".htm"".html"，无后台数据库、不含程序且不可交互，适用于更新较少的展示型网站。（2）动态网页：内容随时间、环境或数据库操作的变化而改变，采用HTML、Java、VB、VC、数据库编程等多种技术。凡是结合了HTML以外的高级程序设计语言和数据库技术等生成的网页都是动态网页。1.1.2网页设计1.网页设计要点（1）整体风格：站点的整体形象，包括企业形象（标志、色彩、字体、标语）、版面布局、浏览方式、交互方式、文字风格、内容价值等。（2）色彩搭配：先选定一种色彩，调整透明度或饱和度得到其他色彩；或选择对比色；使用一个色系。色彩尽量控制在3~5种。2.网页制作工具（1）Dreamweaver（DW）：集网页制作和网站管理功能于一身的网页代码编辑器，支持HTML、CSS、JavaScript等。（2）HBuilderX：DCloud公司研发的前端开发软件，支持HTML、CSS、JavaScript等开发技术，适合初学者学习使用。（3）Animate：由AdobeFlashProfessionalCC更名，新增HTML5创作工具，支持HTML5Canvas、WebGL等。（4）Photoshop（PS）：处理由像素构成的数字图像，用于网页中的效果图制作、图像处理等。3.网页设计注意事项（1）精简的文本描述：围绕一个主题展开，让访问者快速获取主旨信息。（2）便于快速浏览的文本：使用简短、醒目的文本。（3）自由选择的链接：放置与关键内容相关的链接，让访问者自由选择。1.1.3网站需求分析1.网站需求分析的概念（1）开发人员和客户之间的有效沟通：客户与开发人员对同一问题理解的差异和习惯用语的不同会带来困难，需充分有效沟通。（2）解决需求中存在的问题和矛盾：客户需求陈述通常不完备、不准确、不全面，开发人员需挖掘隐藏需求。（3）需求分析随着项目的进行而有所变化：需求分析是迭代过程，贯穿网站开发整个生命周期。（4）获取需求的方法：①问卷调查法：采用调查问卷形式，合理控制开放式和封闭式问题的比例。②访谈法：确定访谈目的，准备问题列表，保持诚恳态度，详细记录。③实地操作：以用户身份直接使用现有系统，了解弊端和新需求。2.网站需求分析策略第一阶段：初步完成客户、市场调查报告和业务流程报告。项目组采取主动"问答"方式，通过访谈、填写调查表等方式从宏观上把握客户需求方向。第二阶段：修改并完善报告，进一步明确客户需求。通过展示相似产品实例让客户对网站系统有认识，制作基本演示页面。第三阶段：根据客户反馈修改演示系统，完成需求分析报告和业务流程报告，双方逐项签字确认。3.网站需求分析报告（1）网站需求分析的参与者：项目负责人负责组织需求分析、编写网站功能描述书。（2）完整的需求分析文档记录体系：主要编写网站功能描述书，有时还需编写用户调查报告和市场调研报告。（3）向客户调查的内容：功能需求、性能要求、维护要求、运行环境、页面风格、页面数量、内容管理、特殊效果、完成时间、维护责任等。（4）客户调查报告：调查概要说明、调查内容说明、调查资料汇编。（5）市场调研活动内容：确定同类网站、调研适用范围和访问人群、调研功能设计特点、简单评价。（6）市场调研报告：调研概要说明、调研内容说明、可借鉴/不可借鉴的功能、优缺点分析、资料汇编。（7）网站功能描述书：包含网站功能、用户界面、运行环境、性能定义、接口、维护要求等12项内容。4.网站需求分析报告案例以某电商公司为例，需求分析报告包括目标（总体目标、基本要求）、网站结构和栏目、网站功能模块（信息发布、站内搜索、邮件列表、域名查询、网上调查、数据备份、用户权限管理）、技术手段（Windows、IIS、MySQL、PHP）。培养自主学习和终身学习的能力。（二）1.2博客网站项目分析（约20分钟）1.2.1博客网站介绍1.博客的特点：更新频繁、简洁明了和个性化。2.独立博客网站：拥有独立域名和独立空间，不依赖第三方平台，发布内容不受第三方审核和监管。3.优秀博客网站的特质：独特风格、突出个人特色、巧妙排版和配色、注重用户界面设计、提供交互功能、响应式设计、明确定位主题、高质量内容、多种媒体形式等。1.2.2设计需求分析调研1.博客网站页面分析（1）博客网站页面展示的内容：个人记录日常、发布照片；企业吸引潜在客户。（2）博客网站的logo：不同类型博客的logo设计思路（个人站长、美容护肤、体育、美食、摄影）。（3）博客网站的设计风格：极简风、无边框风、插画风、黑板风、扁平风、3D风格、纵向分割、超级头版、照片与白字搭配。（4）欢迎页的设置：提高用户转化率、帮助理解品牌、满足用户需求、提高品牌知名度。（5）广告位的设置：页面主体部分、侧边栏、文章标题下方、评论框上方等。（6）博客网站栏目策划：导航条位置明显、栏目结构层级分明（不超过3层）、栏目名清晰易懂、布局合理。（7）博客网站首页栏目分级结构：一级栏目和二级栏目的设置（表1-1）。（8）网站首页版面结构：常见的网站首页版面结构（图1-2）。2.博客网站功能系统开发分析（1）网站使用的数据库类型：Access、MsSQL、MySQL、Oracle。（2）网站功能系统开发使用的程序语言：HTML、CSS、JavaScript、Python、PHP、C#、Angular、Golang。（3）博客网站功能系统开发分析表（表1-2）：网站多用户管理系统、信息发布系统、产品展示系统、在线订单管理、会员管理系统、留言反馈系统、网站管理系统、在线调查系统、全站搜索系统、流量统计分析。（4）虚拟主机：根据网站面向的群体选择相应区域的虚拟主机。（5）网站的语言：根据面向的用户所处国家选用相应语言。3.网站维护服务分析网站维护培训、网站建设完成后的维护、网站首页更新频率、希望维护的内容。1.2.3完成项目需求分析1.个人博客网站的设计要求（1）简洁：装饰应尽量简洁，不采用过于复杂的设计。（2）内容丰富多样：涵盖文字、图像、视频、音乐等多种形式。（3）结构清晰：分为个人区域、交际区域和服务区域。（4）持续更新：在更新频率和内容质量之间取得平衡。2.个人博客网站的设计思路（1）建站目的：发表文章、抒发情感、展示个人生活。（2）网站定位：个人博客网站要有自己的风格。（3）网站栏目设计：包括"首页""关于我""在路上""生活感悟""资源分享""学无止境""留言板"。（4）网站语言设计：面向国内用户，采用中文。（5）网站创意设计：网站形象首页创意设计、内容首页创意设计、banner创意设计、内容页面制作、页眉美工合成、图片处理等。（6）网站售后服务：网站推广、网站维护、数据库系统维护等。培养正确的世界观、人生观和价值观。（三）1.3校园网站项目分析（约20分钟）1.3.1校园网站介绍校园网站的4个作用：1.提高学校知名度：宣传学校最直接的手段。2.优化教育资源分配：作为网络教育资源库的重要组成部分，提高教学效率。3.提供全新的教学互动方式：教师与学生之间的交流互动不再受传统课堂制约。4.为学生提供个性化学习平台：使学生能够根据自己的实际情况选择合适的教学模式。1.3.2设计需求分析调研1.网站页面分析（1）校园网站的作用。（2）校园网站的标志。（3）校园网站的设计风格。（4）校园网站色调的选取。（5）欢迎页的设置。（6）网站栏目设置。（7）网站栏目分级结构。（8）网站首页版面结构。2.网站功能系统开发分析（表1-3）网站多用户管理系统、信息发布系统、校园论坛系统、留言反馈系统、在线调查系统、全站搜索系统、招生就业系统、校园内部办公系统、教科研管理系统、流量统计分析、其他系统。3.网站维护服务校园网站信息量更大，访问者包括游客、学生、老师等，网站维护较为频繁。1.3.3完成项目需求分析神州高等职业技术学院校园网站需求分析：1.建站目的：宣传学校，提高学校知名度，实现网络办公。2.网站定位要求：教育类网站，介绍学校。3.网站栏目设置："学校主页""学校概况""通知公告""校园新闻""专业建设""教学科研""德育管理""招生就业""合作服务""领导信箱""党员风采展示""常用联系电话"等。4.语言设计要求：采用中文。5.创意设计要求：新颖、具有独特的设计理念，能够充分反映并满足人们的物质或情感需求。6.售后服务要求：提供技术指导和解决方案，进行网站维护人员培训。【任务总结】需求分析是项目开发