《(13.1)--《网站规划与网页设计》教学大纲.pdf》由会员分享，可在线阅读，更多相关《(13.1)--《网站规划与网页设计》教学大纲.pdf（14页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网站规划与网页设计课程教学大纲一一、课程基本信息（一）课程中文名称：网站规划与网页设计（二）课程英文名称：Website planning and web design（三）课程性质：专业核心课程（四）课程学分：3 学分（理论 1.5 学分 实验 1.5 学分）（五）适用专业：电子商务（六）开课单位：商学院二、课程教学目标（一）课程定位1.性性质质定定位位本课程是电子商务专业课程体系中重要的一门专业核心课程，是电子商务技术、新媒体运营等多个专业方向模块的支撑课程，对毕业要求的支撑程度见表 1所示。表 1 课程与毕业要求关联度矩阵毕毕业业要要求求名名称称毕毕业业要要求求内内容容支支撑撑程程度度毕
2、毕业业要要求求 6能够有效运用多种媒介自主学习，了解与电子商务相关的知识技术前沿与趋势；M毕毕业业要要求求 8掌握电子商务应用技术，具有电子商务系统设计与开发的能力；H毕毕业业要要求求 9具有创新创业意识，能够运用科学方法与专业技术工具从事实际工作。M开开课课时时间间：第 3 学期先先修修课课程程：计算机基础，先修课程为本课程奠定计算机操作技能。后后续续课课程程：WEB 前端设计、WEB 程序设计，本课程与后续课程结合，使学生能够独立设计与开发 WEB 站点。2.作作用用定定位位网站规划与网页设计课程以培养学生网站开发设计能力为主线，通过真实企业网站建设项目，使学生在学习过程中掌握网站规划、网
3、页设计、网站原型设计、网站界面设计、网站编辑相关理论和实践技能。掌握网站规划与网页设计的相关规范，为将来学习更多 WEB 前端开发、程序开发技术打下基础。（二）课程目标通过本课程的学习，使学生了解网站规划的流程、内容、原则，能够进行网站项目需求分析，撰写出客户满意的网站规划方案，能熟练运用 Dreamweaver 软件创建站点、布局网页、利用模板编辑网站等；了解平面设计基础知识、色彩应用和网页构图技巧；能熟练运用 Photoshop 设计平面作品和网站首页作品；能熟练运用 Axure 设计网站原型，能设计、维护、管理和上传 WEB 站点；训练学生进行商务网站建设的自主策划与设计能力；使学生能获
4、得从事网站规划、网页编辑、网页美工创意、动漫设计、网页设计等工作的相应技能。通过课程的学习，学生能够达到的知识、能力和素质目标如下：1.知识目标知识目标了解网站规划与网页设计的发展现状和趋势，理解网站规划与网页设计的规范和各类标准，掌握网站规划与网页设计软件的使用技巧2.能力目标能力目标掌握网站规划与网页设计的基本技能能够应用 Dreamweaver、Photoshop、Axure 等相关软件规划与设计网页3.素质目标素质目标能够遵守网络信息发布与传播的基本规范和相关法律法规能够顺利地与教师和同学进行交流和讨论4.思政育人目标思政育人目标在网站规划与网页设计教学中开展思政教育活动，课程需始终贯
5、彻“立德树人”的根本任务，教学设计遵循以项目为基点，依据“工学结合、项目导向”的原则，围绕项目将思政元素与专业内容进行有效融合。在教学案例选取方面充分体现中华民族优秀传统文化和中国各民族积极向上的中国精神，旨在教育引导学生在网页或网站的创建过程要符合中国元素和中国特色，项目实施过程中将诸如忠孝仁义、诚实守信、工匠精神等思政元素与专业知识有机结合，旨在内化爱国主义、改革创新的中国精神，让新时代大学生有能力担当中华民族伟大复兴的重任。这样的课程设计让思政教育与专业教育进行融合，实现“润物细无声”的课程育人效果。在单元教学内容设计时加入以下内容：（1 1）以项目为基点，切入思想政治教育。）以项目为基
6、点，切入思想政治教育。每一个项目内容里面都蕴含丰富的思想政治教育元素，“项目化”教学是以项目为载体，以学生为中心，以企业需求为导向，在教学过程中可以将工匠精神、职业伦理道德、爱岗敬业、诚实守信、团结协作等内容与专业知识有机结合起来。（2 2）以任务为载体，强化思想政治教育。）以任务为载体，强化思想政治教育。按照任务逐一开展教学，将思政教育元素融入其中，实现过程育人。任务以团队的形式来完成，在完成任务的过程中，着重强调团队意识和协作精神。（3 3）充分利用信息化教学手段。）充分利用信息化教学手段。利用信息化教学手段，突破传统教学的时空局限，调动学生的积极性和主动性，并让学生在潜移默化中接受爱国主
7、义教育的熏陶。全面挖掘课程知识点中涉及的思政元素，通过互联网搜索相关思政资源，将传播正能量、彰显爱国主义的人物和事例材料进行整理，通过微信群、QQ 群进行发布。同时，将教学内容与教学活动制作成数字化资源，并上传到学堂云平台，使学生能够随时查看和充分利用。在授课过程中，依托云平台，利用翻转课堂、微课视频、慕课等形式，改变传统教学模式，调动学生的学习积极性和主动性。采用线上与线下混合的教学方式，实现专业知识与思政元素的有机融合。三、课程教学内容1.理论教学理论教学教学单元一：教学单元一：网站规划网站规划内容与目标：目标：充分了解企业建设网站的需求后，进行网站规划，写出商务网站规划方案。内容：了解网
8、站规划的流程、网站规划的内容、网站规划的原则，通过一个网站规划方案的案例分析后，掌握网站规划的流程、内容、原则，掌握撰写网站方案的方法和技巧。课程思政：在网站分类介绍部分，重点推介正能量网站，如共青团网站等。同时，对不良网站的典型形态进行分析，引导学生抵制不良网站。重点难点：重点：要求学生掌握网站规划方案撰写的流程，项目调查方案决策计划制定，能够独立撰写网站项目规划方案。难点：网站项目规划方案的策划与撰写。学习要求：课前学习活动：项目调查网站项目需求分析；课中学习任务：方案决策掌握网站规划方案撰写方法；课后学习活动：计划制定网站建设项目实施方案的制定。思考题：（1）什么是网站规划？网站规划的流
9、程是什么？（2）网站规划的内容主要包括哪些方面？教学单元二：教学单元二：网页设计基础理论网页设计基础理论内容与目标：目标：了解平面设计基础知识，掌握撰写具有特定风格的企业网站设计方案的技巧与方法。内容：了解平面设计基础，如：图像类型、图像分辨率、图像文件格式、图像设计的分类、色彩模式，通过案例分析，了解网页设计的流程，掌握网页配色方案的定制及企业网站设计方案。课程思政：在色彩分析部分内容，带领学生分析国家政府网站的色彩，寻找相同点，同时学习此类色彩应用的技巧。重点难点：重点：掌握配色方案和网页构图原理，并能够综合运用平面设计知识，撰写网站设计方案。难点：掌握如何根据网站选题定制网页配色方案学习
10、要求：课前学习活动：通过阅读大量网页设计配色案例，了解网页配色与网页配图的原理；课中学习任务：网页设计方案的定制：结合网站规划方案，根据网页主题，定制网页配色方案，设计网页设计构图；课后学习活动：网页构图设计：明确网站主题，确定配色方案、网页构图，以及网站的首页框架图。思考题：（1）与网页设计相关的平面设计基础知识有哪些？（2）浏览设计类网站或设计类的参考资料学习网页配色方案。教学单元三：网站原型设计教学单元三：网站原型设计内容与目标：目标：掌握利用 Axure 软件，设计具有交互功能的网页原型作品。内容：了解 Axure 软件的功能，掌握利用 Axure 软件设计 Axure 原型界面基本流
11、程和经验技巧。1）Axure 规划设计网站整体布局；2）利用 Axure RP 软件创建网页元素等；3）利用 Axure RP 软件进行交互设计等；4）利用 Axure RP 软件预览和发布。课程思政：以引入国产化计算机软件、树立正确的网络使用观、加强党建文化建设等形式融入课程思政，重点进行优秀国产软件稿定设计推荐、新华网网站解析。重点难点：重点：掌握利用 Axure 软件绘制网站原型图。难点：掌握利用 Axure 软件交互动画效果。学习要求：课前学习活动：安装 Axure 软件，了解 Axure 功能；课中学习任务：网站原型作品的设计：设计集原型展示、交互功能一体的网站原型作品；课后学习活动
12、根据网站主题的特点，设计网站原型效果图。思考题：（1）Axure 功能有哪些？（2）如何利用 Axure 集交互、动画为一体的网站原型图？教学单元四：教学单元四：设计网页界面设计网页界面内容与目标：目标：掌握利用 Photoshop 软件进行图像处理和网页界面的设计。内容：了解 Photoshop 软件的功能，掌握综合运用 Photoshop 软件设计网站的 logo、banner、首页、内容页的动静结合的平面效果图。1）创建静态图形图像；2）动画的制作；3）动态交互图像效果的制作；4）设计整幅 Web 页面。课程思政：以引入国产化计算机软件、树立正确的网络使用观、加强党建文化建设等形式融入课
13、程思政，重点进行优秀国产平面设计交流网站站酷网站的分析，增加学生民族自豪感。重点难点：重点：要求学生掌握 Photoshop 的应用，能够设计企业网站 logo、banner、首页、内容页效果图。难点：掌握网页布局、网页配色方案以及网站 logo 寓意总结及设计。学习要求：课前学习活动：安装 Photoshop 软件，并了解其功能；课中学习任务：根据网站主题特点，设计网站的平面效果图；课后学习活动：网页首页、内容页界面设计：明确网站主题，确定配色方案，设计网站的 logo、banner、首页及内容页的平面效果图。思考题：（1）Photoshop 的主要功能有哪些？（2）浏览设计网站，推荐优秀的
14、设计作品，说出其设计特色。教学单元五：教学单元五：网站编辑网站编辑内容与目标：目标：掌握网站编辑的方法，即使用 Dreamweaver 软件创建站点、布局网页、利用模板编辑网站等。内容：了解与网页设计相关的网络基础知识；掌握管理站点的方法；掌握在网页中插入页面元素，进行编辑并保存网页；掌握利用 CSS+DIV 技术进行网页布局；了解网页制作页面布局辅助技术；掌握利用表单收集用户反馈信息；掌握利用模板和库编辑网站。1）了解网络基本概念、网页设计与制作工具、HTML 语言；2）掌握创建本地站点、编辑站点、远程上传站点；3）掌握页面属性设置、文本修饰、插入图像、设置链接；4）掌握分析网页架构、定义
15、CSS 样式，插入 DIV 标签，插入网页元素；5）了解表格布局、Bootstrap 响应式布局、jQuery，以及利用 JAVASCIPT 制作网页特效的方法；6）掌握制作表单方法，插入表单、表单对象，制作用户信息注册网页；7）掌握利用模板和库设计风格一致的网站。课程思政：在讲解超链接“源”的选取时，要注意“源”的选取不是随意的，而是应该符合国家的法律法规和社会的公序良俗，最好选取具有符合社会主义核心价值观的典型文件，而不应该选取那些违反法律法规、不符合道德规范和要求的内容为“源”。除了从专业知识中展现思政元素，还要强调职业素养，告诉同学们在将来的工作岗位上，不能因为金钱诱惑而在网页中嵌入一
16、些有违公序良俗、违反法律法规的链接信息，例如低俗的广告、恶意的诈骗页面等。重点难点：重点：掌握运用 CSS+DIV 技术进行网页布局和网页样式的美化；以及运用模板编辑风格一致的网站。难点：掌握运用 CSS+DIV 技术进行网页布局。学习要求：课前学习活动：网页素材的收集：结合网站规划方案，收集与网站主题相关的图像、动画、文本；课中学习任务：网站编辑：一是利用 CSS+DIV 进行网站布局，二是制作网站模板，三是利用网站模板生成网站；（学习任务）课后学习活动：网站测试与发布：将制作好的网站上传到 internet 上进行测试与发布。思考题：（1）与网站发布相关的网络知识有哪些？（2）如何利用 C
17、SS+DIV 进行网页布局与网页美化？（3）什么是模板？在网页编辑中如何使用模板？2.其它教学环节（上机实验）其它教学环节（上机实验）网站规划与网页设计上机实验网站规划与网页设计上机实验课程思政：在上机实验过程中，以引入国产化计算机软件、树立正确的网络使用观、分享优秀思政网站、加强党建文化建设等形式融入课程思政。任务一：网站规划书设计场所：实验室内容：实地联系企业为目标客户，撰写该企业网站规划方案。教学方法：案例教学、实验教学法基本要求：掌握如何确定行业企业类别，充分了解企业需求后，根据网站规划相关知识点，撰写网站规划方案。重点：网站行业领域和主题确定难点：确定目标客户，撰写的网站规划方案符合
18、客户的需求说明：无任务二：设计一个独具风格的网站场所：实验室内容：分析企业客的特点：包括面对的客户群体、提供的服务等，确定网页配色方案，画出网站主页的草图。教学方法：案例教学、实验教学法基本要求：根据企业客户的特点，如：面对的客户群体、提供的服务等；确定网站类型；确定配色方案；收集素材；最后完成网站首页草图的设计。重点：网站配色方案的确定难点：根据企业客户的特点，设计网站首页的构图说明：无任务三：Axure RP 设计网站原型场所：实验室内容：学习 Axure 软件的基本操作技巧，并综合运用 Axure 软件为客户设计网站交互原型。教学方法：案例教学、实验教学法基本要求：首先利用 Axure
19、RP 软件创建网页元素等；利用 Axure RP 软件进行交互设计等；最后利用 Axure RP 软件预览和发布。重点：Axure RP 的基本操作技巧难点：利用 Axure RP 完成网站整体布局架构设计说明：无任务四：Photoshop 图像合成场所：实验室内容：利用 Photoshop 软件，制作合成图像效果。教学方法：案例教学、实验教学法基本要求：根据所学的 Photoshop 的基本技能及网页设计的基础理论，完成图像合成设计。重点：Photoshop 软件的基本操作技巧难点：Photoshop 软件中图层混合模式的设置，以及图层蒙版、图层样式的使用。说明：无任务五：设计商业网站的首页
20、和模板页界面效果图场所：实验室内容：利用 photoshop 设计网站首页效果图；利用 photoshop 设计网站内容页的模板效果图。教学方法：案例教学、实验教学法基本要求：根据所学的 Photoshop 的基本技能及网页设计的基础理论，完成网站首页和模板页效果图。重点：利用 Photoshop 完成依据网页四大组成部分：顶部导航、banner 横幅、中间产品区、底部导航的设计难点：利用 Photoshop 进行网页配色、布局，生成网页效果图说明：无任务六：创建站点和创建网页场所：实验室内容：定义本地站点，新建一个网页并进行编辑。教学方法：案例教学、实验教学法基本要求：掌握如何利用 Drea
21、mweaver 定义一个本地站点，并创建一个网页进行编辑，并保存。重点：本地站点的创建和 FTP 站点的定义难点：基于 Dreamweaver 创建本地网页并进行编辑说明：无任务七：网页编辑场所：实验室内容：编辑网站首页，包括插入图像、鼠标经过图像，以及图像映射的设置；编辑其它内容网页并添加超链接，其他页面中包括有图像和文本等。教学方法：案例教学、实验教学法基本要求：掌握如何在网页中插入图像、鼠标经过图像，以及图像映射的设置，掌握编辑多个网页，在网页之间添加链接。重点：网页之间的链接，标签的伪类设计难点：图像与文本的图文混排说明：无任务八：利用 CSS+DIV 进行网页布局场所：实验室内容：用
22、 CSS+DIV 进行网页布局，然后在 DIV 中插入网页元素，并用 CSS对网页中的内容进行格式定制与美化。教学方法：案例教学、实验教学法基本要求：根据所学的 CSS+DIV 网页布局技术，再综合前面所学的创建站点及编辑网页的知识，制作精美的网页及应用 CSS 扩展功能。重点：利用 CSS 对网页内容进行格式定制和美化难点：利用 CSS+DIV 网页布局技术进行网页的布局，并能够达到美化网页的效果说明：无任务九：表单布局场所：实验室内容：学习表单及相关知识，利用表单实现浏览器与服务器之间的信息交流。教学方法：案例教学、实验教学法基本要求：了解表单的功能与用途，掌握插入表单的方法，掌握在表单中
23、插入表单对象的方法，利用表单制作用户注册网页。重点：结合表格和表单技术设计表单页面难点：多种表单元素的综合运用，表单元素的美化说明：无任务十：利用模板生成网站场所：实验室内容：创建模板页，定义好的 css 样式以及 js 特效；利用模板，制作指定的网站内容页。教学方法：案例教学、实验教学法基本要求：根据所学的模板和库的知识，并结合前面所学的网页编辑、网页布局技术，利用模板快速生成网页，形成整个网站。重点：Dreamweaver 模版技术的掌握难点：定义模版的分类区域，在公共区域将必要的元素文件进行引用，方便后期更新网页。说明：无任务十一：响应式网页设计场所：实验室内容：利用 Bootstrap
24、 框架进行响应式网页设计。教学方法：案例教学、实验教学法基本要求：学习应用 Bootstrap 的栅格排版系统、组件应用；在 Dreamweaver自带的 Bootstrap 框架基础上，进行响应式网页设计制作；重点：Bootstrap 栅格排版系统的掌握应用难点：基于 Dreamweaver 内置 Bootstrap 框架进行响应式网页开发说明：无任务十二：网站建设综合项目场所：实验室内容：综合运用所学知识建设网站。教学方法：案例教学、实验教学法基本要求：学习应用 Dreamweaver、Photoshop、Axure 的软件进行综合网站建设；网站页面不少于 5 个。重点：作品符合网站建设的
25、基本要求难点：网页设计有创意，能综合运用最新技术美化、优化网页。说明：无四、教学内容学时分配，见表 2 所示。表 2 课程教学学时分配表教学环节教学环节教学时数教学时数课程内容课程内容理论理论（学时）（学时）实验实验/上机上机（学时）（学时）小计小计（学时）（学时）教学单元一：网站规划教学单元一：网站规划224教学单元二：网页设计基础理论教学单元二：网页设计基础理论224教学单元三：网站原型设计教学单元三：网站原型设计448教学单元四：设计网页界面教学单元四：设计网页界面6612教学单元五：网站编辑教学单元五：网站编辑101020合合计计242448五、教学参考资料1 杜永红.网站规划与网页设
26、计（第三版）M,出版社：清华大学出版社，2021 年 1 月2 TOPART 视觉研究室.网页设计配色图典,出版社：化学工业出版社，2017年 4 月3 西京学院雨课堂网站规划与网页设计，网址：https:/ 西京学院网站规划与网页设计精品课程，网址：http:/ 中国大学 MOOC网页设计基础课程，网址：https:/www.icourse163.org/course/BLCU-1205696805六、课程考核（一）考核方式：考试（二）考核方案：多元化考核（上机考试）平时成绩：40%期末成绩：60%（三）考核标准：见附录 1编写人：杜永红修订人：梁林蒙修订日期：2021 年 8 月 12 日
27、附录 1：多元化考核标准网站规划与网页设计课程，采用多元化考核方式。具体方案是学生自主选择网站主题，搜集素材，完成商业网站作品，并要求具有一定的商业价值。根据网站作品的美观性、实用性及技术性进行综合考核，目的是让同学们全面地、更好地学习和掌握网站规划与设计的理论知识和实操技能，达到理论与实践相结合的目的。考核标准为：本课程考核以学生提交作品为依据，以企业、教师的评价，以及学生互评为参考，没有试卷标准答案，具体要求虽分为几项，但作品是一个整体，因此考核标准显示为一个综合评价，没有小题的具体得分。一、创建站点（10 分）具体要求：1、主页文件名和保存位置正确；2、站点资源组织（目录结构）合理。二、
28、创建网页内容（20 分）具体要求：1、网站主题突出、以实体企业为背景为最佳；各网页内容合法、健康、实用；2、网页和文件名命名正确；站点至少有二层；页面数不少于 5 页；3、各页之间跳转方便，各子页均可返回到主页；没有无效链接；4、各网页中要有个人版权所有信息，在网页文件头部要有个人信息说明。三、网页平面设计（30 分）具体要求：1、LOGO 设计和首页的平面设计新颖、美观，提供设计的源文件；2、网页布局设计合理、清晰，网站风格统一；3、图像、动画设计美观、大方、专业、有创意；4、色彩搭配和动静搭配合理；导航设计实用美观；文字清晰、规范；5、适用于各种显示器分辨率和颜色。四、网页技术（30 分）具体要求：1、网页中利用 AURE RP 软件进行网站原型设计，必须是自己原创作品，提供源文件；2、网页中利用 Photoshop 软件进行网站 LOGO 及网站界面设计，必须是自己原创作品，提供源文件；3、网页布局采用 Css+Div 技术；4、网站的内容页面采用模板；5、使用网页交互技术，提供网页源码。五、站点的上传（10 分）具体要求：1、有效的主页空间，并上传站点；2、有效的域名。