课件内容:
基本技能篇
1.1 任务1 网页体验-城市电子名片页面制作
1.1 任务概述
1.2 任务思考
1.3 任务实施
1.4 相关知识
1.4.1 网页相关概念
1.4.2 网页制作技术
1.4.3 常用开发工具
1.4.4 网站建设流程
课后习题
能力拓展:个人电子名片页面制作
任务2 页面制作-人物介绍内容呈现
2.1 任务概述
2.2 任务思考
2.3 任务实施
2.4 相关知识
2.4.1 HTML基本结构
2.4.2 HTML标题元素
2.4.3 HTML注释元素
2.4.4 HTML段落元素
2.4.5 HTML格式化元素
2.4.6 HTML图片元素
课后习题
能力拓展:产品介绍页面内容呈现
任务3 样式设计-人物介绍页面美化
3.1 任务概述
3.2 任务思考
3.3 任务实施
3.4 相关知识
3.4.1 CSS简介
3.4.2 CSS语法
3.4.3 CSS选择器
3.4.4 CSS字体属性
3.4.5 CSS文本属性
3.4.6 CSS背景属性
课后习题
能力拓展:产品介绍页面美化
任务4 图文混排-人物介绍页面布局
4.1 任务概述
4.4 任务思考
4.3 任务实施
4.4 相关知识
4.4.1元素分类
4.4.2 CSS盒模型
4.4.3 CSS布局模型
4.4.4清除浮动
课后习题
能力拓展:产品介绍页面图文混排布局
本篇小结
项目实战篇
任务1“英博特智能科技”企业网站前期策划
1.1 项目立项
1.1.1 分析网站需求说明书
1.1.2 组建项目团队
1.2 撰写项目策划书
1.2.1 分析确定网站逻辑结构图
1.2.2 设计网站界面原型
1.2.3 撰写企业网站项目策划书
能力拓展:自选主题网站策划书撰写
任务2 “英博特智能科技”企业网站开发准备
2.1 设计网站LOGO
2.1.1 新建文档
2.1.2 制作LOGO
2.1.3 保存文档
课后习题
能力拓展:自选主题网站LOGO设计
2.2 加工图像素材
2.2.1 批量处理图像
2.2.2 去除图片水印
2.2.3 调整图像属性
2.2.4 美化加工图像
2.2.5 应用特殊文字
课后习题
能力拓展:自选主题网站图像素材加工
2.3 设计网站首页效果图
2.3.1 设置页面大小
2.3.2 规划首页内容并设计版式
2.3.3 确定配色方案
2.3.4 制作网站首页效果图
2.3.5 以首页为模板制作子页效果
课后习题
能力拓展:自选主题网站首页及子页效果图的设计制作
2.4 裁切网站首页效果图
2.4.1 创建首页切片
2.4.2 编辑首页切片
2.4.3 命名首页切片
2.4.4 导出首页切片
课后习题
能力拓展:自选主题网站首页及子页效果图的裁切
任务3 “英博特智能科技”企业网站首页页面制作
3.1 首页整体布局
3.1.1 新建项目
3.1.2 搭建页面主体结构
3.1.3 编写主体结构样式
课后习题
能力拓展:“我的E站”首页整体布局
3.2 页头制作
3.2.1 页头二列布局
3.2.2 logo制作
3.2.3横向导航制作
3.2.4下拉菜单制作
课后习题
能力拓展:
1. 仿制“中国冬奥_北京2022年冬奥会和冬残奥会组织委员会网站”导航
2. 仿制“中国民俗文化网”中的横向二级菜单
3. 仿制“华为”网站页头
3.3 横幅广告制作
3.3.1 插入图像
3.3.2 样式设计
3.3.3 图像放大特效
课后习题
能力拓展:“BaoSight”网页动态banner的制作
3.4 公司优势制作
3.4.1 搭建公司优势模块结构
3.4.2 实现三列弹性布局
3.4.3 设置图像和文本样式
课后习题
能力拓展:公司优势模块制作
3.5 关于我们制作
3.5.1 搭建关于我们模块结构
3.5.2 实现两列布局
3.5.3 设置文本内容样式
3.5.4 轮播图制作
课后习题
能力拓展:公司介绍模块制作
3.6 服务范围布局
3.6.1 搭建服务范围模块结构
3.6.2 实现列表项内部的两列布局
3.6.3 实现服务范围弹性布局
3.6.2 设置文本内容样式
课后习题
能力拓展:图文展示模块制作
3.7 产品展示布局
3.7.1 搭建产品展示模块结构
3.7.2 实现三列布局
3.7.3 设置文本内容样式
3.7.4 设置CSS3过渡效果
课后习题
能力拓展:图文展示模块制作
3.8 案例展示布局
3.8.1 搭建案例展示模块结构
3.8.2 实现三列布局
3.8.3 设置文本内容样式
3.8.4 设置CSS3转换效果
课后习题
能力拓展:图文展示模块制作
3.9 新闻中心布局
3.9.1 搭建新闻中心模块结构
3.9.2 图片特效制作
3.9.3 新闻列表制作
课后习题
能力拓展:
1. 仿制“中华人民共合作教育部”网站新闻中心模块
2. 仿制“中国冬奥_北京2022年冬奥会和冬残奥会组织委员会网站”新闻速递模块
3.10 合作伙伴布局
3.10.1 搭建合作伙伴模块结构
3.10.2 设置图片内容样式
课后习题
能力拓展:
1. 仿制“中国冬奥_北京2022年冬奥会和冬残奥会组织委员会网站”官方合作模块
2. 仿制“安世亚太”官网合作伙伴模块
3.11 页尾布局
3.11.1 搭建页尾模块结构
3.11.2 分享内容制作
3.11.3 联系我们制作
3.11.4 版权内容制作
课后习题
能力拓展:
1. 仿制“华为”网站页尾
2. 仿制“中国民俗文化网”的页尾
3.12 客户服务布局
3.12.1 搭建客户服务模块结构
3.12.2 图片内容制作
3.12.3 弹出菜单制作
课后习题
能力拓展:
1. 仿制”容联·七陌”网站的客户服务模块
2. 自选主题网站首页页面制作
任务4 “英博特智能科技”企业网站二三级页面布局
4.1 产品案例页面制作
4.1.1 搭建页面结构
4.1.2 竖向导航制作
4.1.3 产品案例图文混排制作
课后习题
能力拓展:
1. 竖向二级导航菜单
2. 产品案例图文混排
4.2 产品详细信息页面制作
4.2.1 搭建页面结构
4.2.2 图文内容制作
4.2.3 数据表格设计
4.2.4 编写相关样式
课后习题
能力拓展:
1. 产品详情一览表制作
2. 房屋信息表制作
4.3 应用场景详细信息页面制作
4.3.1 搭建页面结构
4.3.2 插入音视频
课后习题
能力拓展:
1. 视频和文字的混排
2. 视频和列表的混排
4.4 留言页面布局
4.4.1 搭建页面结构
4.4.2 插入表单元素
4.4.3 编写表单样式
课后习题
能力拓展:
1. 搜索框制作
2. 登录框制作
3. 注册页面制作
4. 评论页面制作
5. 购物车页面制作
任务5 “英博特智能科技”企业网站测试与发布
5.1 网站测试
5.1.1 整体界面测试
5.1.2 超链接测试
5.1.3 图形测试
5.1.4 内容测试
5.1.5 浏览器兼容性测试
5.1.6 打印机测试
5.1.7 显示代码合法性检查
课后习题
能力拓展:选择一个熟悉领域的网站,并对该网站进行测试
5.2 网站发布
5.2.1 申请域名
5.2.2 申请空间
5.2.3 站点上传
课后习题
能力拓展:体验安装IIS服务器并发布访问网站、申请域名、申请虚拟主机
本篇小结
岗位能力强化篇
任务1 HTML制作静态页面
3.1.1 任务概述
3.1.2 任务分析
3.1.3 任务实施
任务2 HTML实现静态页面内容的呈现
3.2.1 任务概述
3.2.2 任务分析
3.2.3 任务实施
任务3 CSS实现网页整体布局
3.3.1 任务概述
3.3.2 任务分析
3.3.3 任务实施
任务4 CSS设计页面样式
3.4.1 任务概述
3.4.2 任务分析
3.4.3 任务实施
任务5 CSS3实现页面动态交互效果
3.5.1 任务概述
3.5.2 任务分析
3.5.3 任务实施
任务6 HTML5制作移动端静态网页
3.6.1 任务概述
3.6.2 任务分析
3.6.3 任务实施
任务7 HTML5优化移动端静态网页结构
3.7.1 任务概述
3.7.2 任务分析
3.7.3 任务实施
任务8 CSS3新特性制作移动端网页加载动画
3.8.1 任务概述
3.8.2 任务分析
3.8.3 任务实施
任务9 CSS3新特性美化移动端页面样式
3.9.1 任务概述
3.9.2 任务分析
3.9.3 任务实施
任务10 CSS3自定义资源美化移动端页面元素
3.10.1 任务概述
3.10.2 任务分析
3.10.3 任务实施
本篇小结
《Web前端技术基础》PPT课件 苏州工业职业技术学院 密海英
资源下载
资源下载