《网页设计与 Web 前端开发》课件 第9、10章 网站设计综合实训、课业拓展_第1页
《网页设计与 Web 前端开发》课件 第9、10章 网站设计综合实训、课业拓展_第2页
《网页设计与 Web 前端开发》课件 第9、10章 网站设计综合实训、课业拓展_第3页
《网页设计与 Web 前端开发》课件 第9、10章 网站设计综合实训、课业拓展_第4页
《网页设计与 Web 前端开发》课件 第9、10章 网站设计综合实训、课业拓展_第5页
已阅读5页，还剩69页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第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%）考核标准优、良、中、及格、不及格成绩评定附录：课程设计报告样例题目（如×××网站的设计）设计任务和要求软件环境及工具网站规划（风格、色彩、内容草图）内容结构宋体小四报告格式栏目介绍（首页、栏目1、栏目2等）测试及发布情况答辩验收设计总结THANKS感谢观看网页设计与Web前端开发案例教程第10章

课业拓展CONTENT目录浏览器开发者工具01Canvas图形绘制02BootStrap框架03架设互联网网站04云服务0501浏览器开发者工具浏览器开发者工具简介元素Element鼠标选中元素→查看HTML源码→修改HTML片段终端Console查看Javascript报错+即时运行JS语句+打印日志安全性特点禁止访问本地硬盘不允许对网络中的文本修改或删除网络Network查看失效链接→查看原始HTTP报文→查看网络传输错误激活工具栏：快捷键F12快捷键F12直接按下F12快捷键激活检查元素右键点击页面元素，在右键菜单中选择“检查”选择元素与Element标签选择元素鼠标可以在左侧点击元素，右侧自动跳转对应源码鼠标也可以悬停右侧源码，左侧自动提示对应元素Console标签栏--查看报错Console标签栏--打印日志、招聘广告02Canvas图形绘制初识Canvas​Canvas即画布，是HTML5加入的元素，用于像素图形的绘制。Canvas出现之前，页面中的图形绘制需要使用插件实现，如Flash和SVG(ScalableVectorGraphics，可伸缩矢量图形)，或者可以通过复杂的JavaScript代码来实现。在页面中加入了Canvas元素后，便可以通过JavaScript来自由地控制它，在其中添加图片、线条以及文字，也可以在里面绘图，甚至还可以加入高级动画。几乎所有现代的主流浏览器都支持Canvas。不同浏览器对Canvas的支持程度和性能可能会有所差异，因此在开发过程中建议进行兼容性测试，并根据不同浏览器的特点进行适配和优化。Canvas的坐标系统Canvas画布作为图形容器，在页面中表现为一个矩形区域Canvas画布2d环境的坐标系统延续web页面的坐标系统，默认坐标原点（0，0）在画布左上角，向右为x轴正向，向下为y轴正向，如图10-12中左图所示。在Canvas中除了坐标系统外，还经常使用到角度度量。Canvas中默认x轴正向为0度，顺时针的角度为正值，逆时针的角度为负值，如图10-12中右图所示。X轴Y轴原点（0，0）

0°-90°

180°90°图10-12Canvas默认坐标系统图使用Canvas的第一步是在Web页面中添加一个Canvas。添加Canvas很简单，只需要在<body>标签内添加一个<canvas>标签就可以了对Canvas元素的所有操作都要通过脚本代码实现，为了便于在JavaScript中更好的操作Canvas，通常给Canvas标签添加id属性，通过id可以快速准确找到Canvas。Canvas默认高度宽度为300×150像素通常情况下用户需要重新设置Canvas的大小Canvas的宽度和宽度设置要在HTML标签中设置高度与宽度属性，或者通过JavaScript对Canvas对象的width和height属性进行赋值。除了高度和宽度，Canvas的其他样式都可以交由CSS进行设置。Canvas的坐标系统每个Canvas包含内建的context对象（绘制环境/上下文），是访问绘图API的入口。获取方法：通过canvas.getContext(绘制类型)创建一个上下文对象单击此处输入你的项正文，文字是您思想的提炼，请尽量言简意赅的阐述观点。

绘制环境（Context）绘制类型说明2d二维渲染上下文（最常用）webglWebGL1版本三维渲染上下文webgl2WebGL2版本三维渲染上下文bitmaprenderer仅提供将canvas内容替换为指定ImageBitmap的功能的上下文webgpu

创建一个GPUcanvas上下文对象，为WebGPU渲染管道提供三维渲染绘制一个红色边框的矩形的步骤：首先通过id获得Canvas对象获得该Canvas的2d绘制环境执行绘图API：设置笔触颜色为红色，创建一个从（20，20）位置开始填充一个长100，高50的矩形路径，最后将矩形路径进行描边绘制代码：var

canvas=document.getElementById("myCanvas");var

context=canvas.getContext("2d");context.strokeStyle="#FF0000";context.rect(20,20,100,50);context.stroke();第一个绘制实例Canvas绘图API就是用来在Canvas中进行图形图像设置、绘制以及变换的一系列属性和方法。Canvas画布是一个图形容器，是图形的载体，其本身并不具备绘制能力，必须通过绘图API实现图形绘制。Canvas绘图API的功能非常强大，包括：路径、渐变色、图形变换、绘制环境保存、图像和文本绘制等。绘图API由画布的context对象调用绘图API路径是点及点间连线，可绘制矩形、圆弧、直线、曲线等常用属性和方法：lineWidth、fillStyle、strokeStyle、beginPath()、closePath()等1.绘制路径表10-1

Canvas的常路径方法列表属性和方法说

明lineWidth笔触（描边）宽度，默认值为1.0fillStyle填充颜色，默认值为黑色strokeStyle笔触(描边)颜色，默认值为黑色beginPath()起始一条路径，或重置当前路径closePath()将路径从当前点到起始点进行闭合。save()将当前环境状态保存到堆栈中restore()从堆栈中恢复最后保存的环境状态属性和方法说

明moveTo(x,y)把路径移动到画布中的指定点，不创建路径。lineTo(x,y)在画布中创建从当前点到指定点(x,y)的直线路径rect(x,y,width,height);在（x，y）位置创建一个矩形路径，宽度width，高度heightarc(x,y,r,stratAngle,endAngle[,anticlockwise])以（x，y）为圆心，r为半径，从stratAngle角度开始到endAngle创建弧线路径arcTo(x1,y1,x2,y2,r)在(x1,y1)和(x2,y2)两点间创建半径为r的弧线路径quadraticCurveTo(cpx,cpy,x,y)在当前点和（x，y）之间以（cpx,cpy）为控点创建二次贝塞尔曲线路径bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)在当前点和（x，y）之间以（cpx1,cpy1）和（cpx1,cpy1）为控点创建三次贝塞尔曲线。stroke()使用strokeStyle的值对当前路径进行描边fill()使用fillStyle的值对当前路径区域进行填充clearRect(x,y,width,height)清除指定的矩形区域fillRect(x,y,width,height)填充指定的矩形区域clip()从原始画布剪切任意形状和尺寸的区域表10-1

Canvas的常路径方法列表-续绘图的颜色属性可以使用普通CSS颜色或渐变色，如fillStyle和strokeSty渐变色需要先创建渐变色对象，然后设置渐变色对象中的颜色分布，之后才能作为颜色属性值使用。渐变色对象的创建很方便，由绘制环境创建。画布的渐变色分为线性渐变和径向渐变两种。1.线性渐变（LinearGradient）：

颜色沿一条直线方向平滑过渡，适用于平面、背景等区域。2.径向渐变（RadialGradient）：

颜色从一个中心点向四周以圆形方式扩散变化，适用于按钮、光源等效果。2渐变色的使用生成方法：通过绘制环境调用createLinearGradient()方法创建，代码如下参数说明：x0,y0：起始点坐标x1,y1：终止点坐标线性渐变色会从起点到终点沿直线方向变化，如图所示不同的起始点和终止点线性渐变色方向。2渐变色的使用--线性渐变色varlineGrad=context.createLinearGradient(x0,y0,x1,y1)生成方法：通过绘制环境调用createRadialGradient()方法创建，代码如下参数说明：(x0,y0)：径向渐变色起始环的圆心坐标r0：起始环的半径(x1,y1)：径向渐变色终止环的圆心坐标r1：终止环的半径径向渐变色会从起点环到终止环放射状变化，如图所示不同的起始环和终止环渐变色放射方向。典型用途：模拟光照、球体阴影、创建高光、聚焦、按钮等立体视觉效果2渐变色的使用-径向渐变色varradialGrad=context.createRadialGradient(x0,y0,r0,x1,y1,r1)渐变色可在不同位置添加的不同颜色对渐变色进行改变渐变色对象通过调用addColorStop(offset,color)添加颜色分布点：参数说明：offset：取值范围为0~1，表示颜色所在位置color：颜色值（如"#FF0000"或"rgba(0,0,0,0.5)"）2渐变色的使用-设置颜色点在Canvas绘图API中，提供了一系列对当前绘制环境进行变换的方法，可以实现缩放、旋转、移动等变换功能3.图形变换表10-2

Canvas常用变换方法列表方法说

明scale(scaleX,scaleY)将当前绘制环境的尺寸进行缩放，

scaleX为x轴缩放倍数，scaleY为y轴缩放倍数rotate(angle)将当前绘制环境进行旋转，angle为旋转的弧度translate(x,y)将当前绘制环境的坐标原点移动到(x,y)位置transform(a,b,c,d,e,f)将当前绘制环境按照转换矩阵进行转换setTransform(a,b,c,d,e,f)将当前转换重置为单位矩阵Canvas通过绘制环境context对象绘制图形时，context对象包含了绘制过程所需要的当前状态。当前状态是一个绘制堆栈，包括画布的当前属性、变换矩阵信息和当前剪裁区域。绘制环境状态可以通过API进行保存和恢复，通过调用save()可以将当前的状态保存到堆栈中。而通过调用restore()可以将保存的状态恢复到绘制环境中。当前属性包括globalAlpha、strokeStyle、fillStyle等所有的API属性变换矩阵信息包括坐标系统原点、坐标系统尺寸、角度坐标系统等剪辑区域是通过clip()方法获得的当前路径的剪辑区域。路径不属于绘制环境中的状态，不能保存在状态堆栈中。4绘制环境的保存与恢复Canvas提供强大的图像绘制功能，支持将图片、画布、视频等元素绘制到指定位置。绘制方法：通过drawImage()方法完成图像的绘制。该方法具备灵活的参数格式，支持缩放、裁剪等操作。适用范围：图片渲染视频帧抓取自定义截图与合成效果复杂动画中的贴图操作5绘制图像

加载时机：图像绘制必须在图片加载完成后进行。否则，绘制将失败且无任何提示。drawImage()三种调用格式第一种格式：drawImage(image,dx,dy) 说明：

以原图尺寸绘制图像，左上角位于(dx,dy)第二种格式：  drawImage(image,dx,dy,dw,dh)说明：

将图像缩放至目标矩形区域，左上角为(dx,dy)，尺寸为dw×dh第三种格式：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)说明：

从源图像中裁剪(sx,sy,sw,sh)区域，缩放并绘制至目标(dx,dy,dw,dh)⚠️

注意：

参数格式不可混用，只能使用这三种完整组合方式。5绘制图像

CanvasAPI中提供了一些基本的文本属性和方法，这些属性和方法使得Canvas中的文本操作变得非常简单，表10-3中列出了常用的文本属性和方法6绘制文本表10-3

Canvas的文本属性和方法列表属性和方法示

例font字体属性，其语法与CSS的font属性相同textAlign对齐方式，可设置值有center、end、left、right和start（默认值）textBaseline文本基线，可设置值有alphabetic（默认值）、top、hanging、middle、ideographic、bottomfillText(text,x,y)从（x,y）开始的位置对将text内容进行填充strokeText(text,x,y)从（x,y）开始的位置对将text内容进行描边measureText(text)测量text文本在当前绘制环境中的宽度，使用measureText(text).width可获得宽度数值Canvas是静态图形容器：绘制完成的内容不会自动变化，因此无法直接实现动画。动画的实现方式是每一帧都重新绘制，也就是

逐帧动画=每帧刷新画面+更新图形状态依赖JavaScript的定时函数：

用于控制帧的更新间隔（即动画节奏）动画制作常见应用：路径动画元素位移动效模拟游戏帧刷新动画制作-三种动画控制方法（定时器）特点控制方式适用场景setInterval(code,millisec)固定时间间隔重复执行，无限触发使用

id=setInterval(...)

获取ID，通过

clearInterval(id)

停止执行需要定期重复执行的任务setTimeout(code,millisec)延迟指定时间后只执行一次，适合延迟任务和递归动画使用

clearTimeout(id)

取消执行单次延迟任务、递归实现的动画requestAnimationFrame(code[,element])浏览器优化的逐帧执行函数，自动以显示器刷新率（通常60fps）调用，动画更流畅、节能、精准无专门取消方法（可通过逻辑控制不再触发）所有Canvas动画场景（推荐）时钟案例实践本节案例综合了路径、变换、图像及动画制作等知识制作了一个时钟。实现步骤如下：设计时钟样式添加Canvas元素加载背景图片设置时钟绘制触发机制实现核心绘制函数drawAClock()分模块绘制函数实现完整代码可参考pra10.html文件。03BootStrap框架BootStrap快速上手​​不同版本，效果有差异原理一致导入css和js文件即可使用存储位置：HTML标签属性→DOM结构；JS对象属性→内存可见性：标签属性在Elements面

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论