《网页设计与 Web 前端开发》课件 第9章 网站设计综合实训

第9章网站设计综合实训网页设计与Web前端开发案例教程CONTENT目录网站的规划01素材准备及管理02外观设计及布局03向页面添加内容04使用CSS设置页面05添加网页特效及功能06站点的测试、发布及维护07课程设计及要求0801网站的规划网站设计项目书核心内容市场分析（行业特点、竞争对手）功能定位（宣传型/电商型/服务型）技术解决方案（服务器、操作系统、安全措施）案例对比​​例9-1：信息项目部（侧重市场分析）例9-2：集团网站（侧重需求与设计）1.建设网站前的市场分析2.建设网站目的及功能定位3.网站技术解决方案4.网站内容规划5.网页设计6.网站维护7.网站测试8.网站发布与推广9.网站建设日程表10.费用明细网站设计项目书包含的内容网站主要规划过程及创建020301确定网站主题教学类网站，主题为“课程教学及交流平台”确定网站风格浅蓝色主色调，营造专业学习氛围构思网站栏目结构划分5大功能模块及15个子栏目，搭建清晰层级，便于内容分类与用户浏览导航。网站主要规划过程及创建04规划网站目录结构逻辑清晰的文件组织02网站的素材准备及管理​网站的素材准备及管理0201准备文本搜集文字资料，整理为Word或文本文件（命名科学）准备图片及按钮搜集或自制图片，确保主题一致初始页面效果图0403准备动画使用CSS3/JavaScript或专业软件（如AdobeAnimate）建立模板​​定义可复用组件（如版权区）03网页外观设计及布局网页外观布局0201纸上布局法草图绘制，避免随意设计软件布局法使用Photoshop等工具创建实体模型（结合层功能）实践建议纸上构思后软件实现，参考第1章实例网页布局的方案常见布局技术HTML5/CSS3/JavaScript课程网站应用​​拐角型风格，弹性布局方案响应式布局（自适应设备）流式布局（百分比宽度）弹性布局（Flexbox）网格布局（Grid）固定布局（尺寸固定）浮动布局（传统方式）定位布局（精确控制）布局方式主要页面布局方案04向页面添加内容向页面添加内容步骤设置页面属性、插入元素、定义HTML结构设置标题为“网络课程”插入导航动画和背景div定义当前位置HTML结构（如<divclass="guild">）创建导航菜单（无序列表）添加主体内容（标题和列表）[例9-4]：以“网络课程”页面为例页面内容效果图05使用CSS设置页面​使用CSS设置页面​方法公用CSS文件统一风格（如style.css），额外样式表处理特殊页面示例课程网站公用CSS代码（定义body、布局容器、导航区样式）关键代码：弹性布局、最小高度、背景颜色设置调用方式：<linkhref="css/style.css"rel="stylesheet">实践结合页面需求修改CSS（如课程简介页面调用jxdg.css）06添加网页特效及功能添加网页特效-浮动广告示例​实现方法下载/修改现有JavaScript代码（如浮动广告）查找代码资源（关键词搜索）修改HTML：插入div和img标签，调整路径和尺寸添加JavaScript文件（fdgg.js）：控制移动逻辑步骤资源页面参考参数调整下载/修改现有JavaScript代码（如浮动广告）效果图添加网页功能-显示/隐藏答案JavaScript按钮事件编程函数定义：showhide()控制显示/隐藏状态HTML结构：按钮与嵌套表格（id绑定）功能实现点击后效果图（显示答案）初始效果图（显示答案前）添加网页功能-自测练习JavaScript按钮表单编程数组定义：标识正确答案（如ans数组）函数：Engine()统计正确数，total()处理交卷逻辑显示答案功能：一键控制所有题目功能实现测试结果提示页面效果图确认对话框07站点的测试、发布及维护上传文件使用FTP工具（如FileZilla）方法上传下载界面设置站点管理器文件放置Web目录（如www、web、htdocs）注意点获取网站地址​独立域名（如）独立IP（如95）目录空间（如/JudgeOnline）访问方式非80端口需额外指定端口处理实机测试及日常维护​必要性：本地环境与网络环境差异测试内容：兼容性、安全性、性能工具建议：WebZIP抓取或手动测试实机测试任务：内容更新、数据备份安全监控：处理违规内容（如论坛留言）维护制度化：制定定期更新计划日常维护08课程设计课程设计的基本目的​目标：全面掌握网站建设理论及实践技能培养：网站规划、设计、开发、维护全流程成果：完成一般性网站建设内容要点课程设计的基本要求​任务、要求及软件环境网站规划（市场分析、功能定位）栏目结构与导航图设计报告根据能力选择题目（可自定义但需教师认可）选题要求独立完成，避免随意更改方案设计总要求指导教师当场运行测试验收流程书面文档（固定规格）内容制作过程测试及发布情况总结与体会课程设计的考核方式与评分方法​​网站设计外观、功能及效果（40%）课程设计报告质量（20%）平时成绩与学习态度（20%）考核提问表现（20%）考核标准优、良、中、及格、不及格成绩评定