“网页设计与开发”的版本间的差异
来自CloudWiki
(→任务二 样式表) |
(→课程简介) |
||
(未显示同一用户的13个中间版本) | |||
第6行: | 第6行: | ||
*[[小练习--说出你最喜欢的网站]] | *[[小练习--说出你最喜欢的网站]] | ||
*[[小练习--编写自己的wiki词条]] | *[[小练习--编写自己的wiki词条]] | ||
+ | |||
+ | *[[网页设计与开发:2020工作手册]] | ||
+ | *[[网页布局实例:山东党建网]] | ||
+ | *[[网页布局实训:火星人]] | ||
+ | *[[网页布局实训:百度新闻]] | ||
+ | *[[网页布局实训:小米商城]] | ||
== 任务一 我的第一个网页 == | == 任务一 我的第一个网页 == | ||
第16行: | 第22行: | ||
*[[实训1-1 构思我的网站]] | *[[实训1-1 构思我的网站]] | ||
− | === | + | |
+ | === 子任务02:制作我的第一个网页 === | ||
+ | *[[我的第一个网页]]、 | ||
+ | *[[网页的保存]] | ||
+ | *[[HTML文档结构]] | ||
+ | *[[常用标签]] | ||
+ | *[[常用属性]] | ||
+ | *[[“码云”的使用]](选学)、微云的使用 | ||
+ | *确定主题色(在线取色器:http://www.jiniannet.com/Page/allcolor) | ||
+ | |||
+ | 案例:[[商苑电商:第一个网页]]、[[商院官网:第一个网页]] | ||
+ | |||
+ | |||
+ | === 子任务03 web服务器搭建与应用(选学) === | ||
+ | |||
*[[阿里云介绍]] | *[[阿里云介绍]] | ||
*[[Apache 服务器简介]] | *[[Apache 服务器简介]] | ||
*[[阿里云:搭建Apache 网页服务器]] | *[[阿里云:搭建Apache 网页服务器]] | ||
+ | *[[商苑电商:在云端看到我的网页]] | ||
第30行: | 第51行: | ||
*[[Apache 服务器的安装]] | *[[Apache 服务器的安装]] | ||
*[[修改apache服务器主目录]] | *[[修改apache服务器主目录]] | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== 任务二 样式表 == | == 任务二 样式表 == | ||
第48行: | 第56行: | ||
*[[网页颜色设计]](选学) | *[[网页颜色设计]](选学) | ||
− | *[[什么是样式表]] | + | *[[什么是样式表]] |
− | *实训: | + | *实训:[[商苑电商:我的首页]] |
+ | *[[CSS的选择符]]、[[CSS常用属性]] | ||
+ | *实训:[[商苑电商:构思分页面]] | ||
+ | |||
+ | ===子任务02 样式表的扩展与美化=== | ||
*[[CSS的选择符(二)]] | *[[CSS的选择符(二)]] | ||
*[[CSS常用属性(二)]] | *[[CSS常用属性(二)]] | ||
第57行: | 第69行: | ||
== 任务三 盒子模型 == | == 任务三 盒子模型 == | ||
=== 子任务01:什么是盒子=== | === 子任务01:什么是盒子=== | ||
− | *[[ | + | *[[行内元素和块级元素]]、[[所谓的“盒子模型”]] |
*[[盒子模型的实现]]、[[商苑电商:盒子模型的实现]] | *[[盒子模型的实现]]、[[商苑电商:盒子模型的实现]] | ||
*[[项目实训3]] | *[[项目实训3]] | ||
第71行: | 第83行: | ||
=== 子任务03:盒子的美化 === | === 子任务03:盒子的美化 === | ||
*[[盒子的基本属性]]、[[盒子的基本属性 练习]] | *[[盒子的基本属性]]、[[盒子的基本属性 练习]] | ||
+ | *[https://www.bbsmax.com/A/D854WmMWJE/ 边距的合并] | ||
*[[商院官网:盒子的美化]]、[[盒子的box-sizing属性]] | *[[商院官网:盒子的美化]]、[[盒子的box-sizing属性]] | ||
*[[盒子的"炫酷"属性]]、[[盒子的背景设置]]、[[项目实训3-2]] | *[[盒子的"炫酷"属性]]、[[盒子的背景设置]]、[[项目实训3-2]] | ||
第91行: | 第104行: | ||
*[[盒子的水平居中]]、 | *[[盒子的水平居中]]、 | ||
*[[盒子布局的使用技巧]] | *[[盒子布局的使用技巧]] | ||
− | *[[盒子的高度塌陷]] | + | *[[盒子的高度塌陷]]、[[商院电商:首页的布局]] |
*拓展:[[网站开发实例(一)]] [[项目实训8]] [[项目实训8_商苑电商]] | *拓展:[[网站开发实例(一)]] [[项目实训8]] [[项目实训8_商苑电商]] | ||
第152行: | 第165行: | ||
==任务七 框架的制作== | ==任务七 框架的制作== | ||
===子任务01=== | ===子任务01=== | ||
− | *[[框架的制作]]、[[网页布局实例:半亩花田]]、 | + | *[[框架的制作]]、[[网页布局实例:网易云音乐]]、[[网页布局实例:半亩花田]]、[[网页布局实例:山东党建网]] |
*[[盒子的布局]] | *[[盒子的布局]] | ||
*[[项目实训18]] | *[[项目实训18]] | ||
===子任务02=== | ===子任务02=== | ||
− | *[[框架的实际应用]]、[[商院官网:框架的使用]] | + | *[[框架的实际应用]]、[[商院官网:框架的使用]]、 |
*[[图片、列表和导航]]、[[项目实训:框架的使用]] | *[[图片、列表和导航]]、[[项目实训:框架的使用]] | ||
*[[滚动字幕、背景音乐与多媒体]] | *[[滚动字幕、背景音乐与多媒体]] |
2021年1月4日 (一) 13:39的最新版本
目录
课程简介
任务一 我的第一个网页
子任务01 演示分析商城网站
子任务02:制作我的第一个网页
- 我的第一个网页、
- 网页的保存
- HTML文档结构
- 常用标签
- 常用属性
- “码云”的使用(选学)、微云的使用
- 确定主题色(在线取色器:http://www.jiniannet.com/Page/allcolor)
子任务03 web服务器搭建与应用(选学)
拓展:
任务二 样式表
子任务01 使用样式表美化页面
子任务02 样式表的扩展与美化
任务三 盒子模型
子任务01:什么是盒子
子任务02:盒子的构建
子任务03:盒子的美化
- 拓展:搭建可持续网站
任务三 插入图像与盒子嵌套
子任务01:插入文本
子任务02:插入图像
子任务03:盒子布局总结
任务四 导航菜单特效实现
子任务01:链接与导航
子任务02:按钮式导航
子任务03:弹出式菜单实现
子任务05:阶段性复习
任务五 列表和表格
子任务01 列表的使用
子任务02 表格的使用
- 表格的使用(订单列表 ?)
- 表格的实际应用、商院官网:表格的使用
- 项目实训13、项目实训9 表格的使用
- 项目综合实训(三)
子任务03 案例学习
任务六 表单的制作
子任务01 基本表单的制作
子任务02 表单的布局
任务七 框架的制作
子任务01
子任务02
任务八 移动开发框架
子任务0:自适应网页
- 自适应网页之一
- 自适应网页之二、自适应网页案例:WordPress博客]]
- 自动处理溢出、网页布局案例:WordPress博客
- Html5 语义元素、Html5 语义元素案例:WordPress博客
- CSS3 弹性盒子、弹性盒子布局案例:WordPress博客、项目实训:移动开发框架
- Html5 音频
- Html5 视频
- Html5 地理位置
Canvas画布和SVG图像
参考文档:[1] https://www.runoob.com/html/html5-canvas.html
[2] https://www.runoob.com/html/html5-svg.html
地理定位
参考文档:[1]https://www.runoob.com/html/html5-geolocation.html
Web存储
https://www.w3school.com.cn/html5/index.asp
增强型表单
拖放
Web Workers
子任务01 Bootstrap入门
子任务02 Bootstrap进阶
- Bootstrap3 列表
- Bootstrap4 超大屏幕、Bootstrap4 图片、Bootstrap4 列表
- Bootstrap 表单、Bootstrap4 按钮、Bootstrap4 导航
- Bootstrap4 表格、Bootstrap4 创建一个网页
子任务03 Bootstrap案例
https://v4.bootcss.com/docs/4.0/examples/
总任务 网站的测试运行
谷歌浏览器下载:https://www.google.com/chrome/
返回 首页
入门
- 请查阅用户指导以获取使用本wiki软件的信息!
- MediaWiki配置设置列表
- MediaWiki常见问题
- MediaWiki发布邮件列表
- 本地化MediaWiki到您的语言
- 了解如何在您的wiki上打击破坏