《网页设计与制作》课程主页

冷不防 2022-08-05 15:13 167阅读 0赞

## 引言 ##

为了激发广大童鞋的学习积极性，让我们的学习更加贴近未来工作需求，便于记录学习过程、总结学习收获、广交朋友，我们在CSDN上开通课程主页，希望大家可以通过CSDN这样的学习平台，更好地提升自我。

## 课程愿景 ##

我们的目标是经过一系列前端方面课程的学习，能逐渐胜任**前端开发工程师**的工作要求，因此在认识课程之前，我们先来看一则招聘简章。  
来自于**上海鲸科信息科技有限公司**的**前端开发工程师**招聘：

*  职位年薪：13W起，上不封顶
 *  招聘人数：若干
 *  职位职责：  
    
    
     *  如果你热爱尖端 Web 技术，如果你是一个追求美感的细节控，Strikingly会为你提供一个大施拳脚的空间。
     *  在HTML, CSS, JavaScript 之上，你会使用 HAML、LESS、CoffeeScript、React+Flux、Angular.js来设计、开发和实现前端功能。
     *  同时你也可以尽情发挥创造的热情，用美感和细节打造极致的用户体验。
 *  职位描述：  
    
    
     *  参与公司项目中的Web前端功能设计、开发和实现
     *  使用 HTML5、CSS3、OOP JavaScript、Angular.js、Knockout.js 等最尖端 Web 技术开发 PC/Mobile 端应用
     *  探索应用前端领域的新技术与新架构
     *  与后端开发人员一起研讨技术实现方案，制定服务接口
     *  与 UI 设计人员、后端开发人员等配合，高质量完成 Web 前端开发工作
     *  快速学习成长，并迅速适应创业团队氛围
 *  职位要求：  
    
    
     *  对网站有优秀的设计感
     *  对UI/UX有深入的理解
     *  熟悉 HTML5/CSS3 的标准并跨浏览器和平台的兼容性有深入理解
     *  精通object-oriented JavaScript, jQuery, DOM manipulation
     *  能按照产品模型或框架有效进行 HTML/CSS/JavaScript 开发
     *  能迅速熟悉新的前段数据库和架构
     *  理解 Web 标准, 熟悉 Git
     *  相关专业本科或以上学历，或者同等专业经验
     *  熟练的英语沟通能力
 *  加分项：  
    
    
     *  熟悉如何优化前端代码，使其更有效率并确保兼容性
     *  熟悉任意 MV\* 框架（Angular.js/Knockout.js/ Backbone/Ember等）
     *  熟悉任何一门后端语言经验（Node.js/Ruby/Python/Php等）
     *  移动 Web 开发经验
     *  深刻理解 Web 标准, 熟练解决主流浏览器及不同版本的兼容性问题（IE、Chrome、Firefox)

我们可以看到，企业对岗位的需求非常明确，这个就是我么未来一年半的学习目标。我们将会利用《界面设计》、《网页设计与制作》、《web交互开发》、《移动开发平台》等几门课，逐步的走进前端开发的殿堂。

利用《界面设计》帮您成为细节控，获得优秀网页的设计感，深入理解UI、UX。  
利用《网页设计与制作》帮您学习html+css， 熟悉 HTML5/CSS3 的标准并跨浏览器和平台的兼容性有深入理解， 能按照产品模型或框架有效进行 HTML/CSS/JavaScript 开发。  
利用《web交互开发》帮您学习原生javascript语言，逐步掌握object-oriented JavaScript, DOM manipulation，并同时学习jQuery，助力的您的交互开发。  
利用《移动开发平台》帮您熟悉移动web开发，了解Node.js、Angular.js、响应式设计等。

## 课程简介 ##

《网页设计与制作》的主要目标是让您学会使用html+css实现符合web标准、兼容主流浏览器的前端页面。

课程主要内容包括：

*  web标准和浏览器
 *  html5基础语法、 html5基础标签
 *  css3的基础语法、css3实现样式与布局
 *  浏览器兼容性处理

## 课程讲义（逐步上传） ##

<table> 
 <thead> 
  <tr> 
   <th>课时</th> 
   <th>内容</th> 
   <th>讲义</th> 
   <th>视频</th> 
   <th>案例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>第01讲</td> 
   <td>课程概述</td> 
   <td>课程概述</td> 
   <td>课程概述、sublime的安装</td> 
   <td>helloworld</td> 
  </tr> 
  <tr> 
   <td>第02讲</td> 
   <td>web标准</td> 
   <td>web标准</td> 
   <td>web标准、html+css+js简介</td> 
   <td>基础表现</td> 
  </tr> 
  <tr> 
   <td>第03讲</td> 
   <td>html5之路</td> 
   <td>html5之路</td> 
   <td>html5基础语法</td> 
   <td>html5与xhtml区别</td> 
  </tr> 
  <tr> 
   <td>第04讲</td> 
   <td>html标准属性</td> 
   <td>html标准属性</td> 
   <td>标准属性</td> 
   <td>简单案例</td> 
  </tr> 
 </tbody> 
</table>

## 课程资源 ##

1.  [w3school][]
2.  [css3手册在线版][css3]，[css3手册下载][css3 1]
3.  [飞一样的编码-HBuilder, 请大家下载注册使用 ][-HBuilder_ _]
4.  [史上最性感的编辑器-sublimetext][-sublimetext]，[插件][-sublimetext]， [学习资源][Link 1]。
5.  [sublime text常用插件集成破解版下载][sublime text]。
6.  [w3cfuns][]
7.  [w3cplus][]

## 学友链接 ##

## 课程活动 ##

1.  请大家开通博客，私信给我。
2.  *博客积分*优先达到100分、1000分、2000分、3000分、4000分的同学请私信我（或本文留言）加分。
3.  *博客总浏览量*优先超1000、2000、3000、4000、5000的同学请私信我（或本文留言）加分。
4.  *单篇博文浏览量*优先超100、1000、2000、3000的同学请私信我（或本文留言）加分。
5.  *单篇博文评论数* **优先**超10、20、30、40的同学请私信我（或本文留言）加分。
6.  *单篇博文顶数*优先超10、20、30、40的同学请私信我（或本文留言）加分。
7.  个人**粉丝数超过100**请私信我（或本文留言）加平时成绩**10分**。
8.  激活**专栏大人**徽章的同学请私信我（或本文留言）加平时成绩**20分**。
9.  增加**佳文分享版块**，每人次入选加平时成绩**5分**，欢迎大家留言本文（或私信我）投稿。
10. 免考任务1-*成为博客专家*的同学可以**免考**，**优先**达到**3000分的每班前两位**同学请私信我（或本文留言）**免考**。
11. 免考任务2-模拟百度css3抖动效果

## 佳文分享 ##

1.  谢伟吉的《[大学生学习][Link 2]》值得一读
2.  汤慧的《 [HTML标签列表][HTML]》一个不错的尝试
3.  徐泽锋的《[html标签][html]》贵在原创，贵在真实
4.  会写诗的程序媛，请看黄钿钿的《[感动了时间][Link 3]》
5.  杨梦露的《[strong标签简介][strong]》，正是我们需要的文章
6.  余冰若《[神奇插件][Link 4]》Markdown了，原创了，你呢？
7.  周琪的《[电商页面设计，只需懂六个字][Link 5]》不错不错
8.  林宇的《[html基础篇][html 1]》整理的挺好，格式弄好点，就更美了
9.  张嵊敢的《[html][html 2]》挺好
10. 俞冕的《[再别康桥-徐志摩][-]》带我们重温经典
11. 谢阳的《[解读前端开发工程师必备技能][Link 6]》挺好，大家不妨一读
12. 陈伟健的《[java的背景及就业][java]》经常思考，就是我们blog的初衷之一
13. 卢俐云的《[html文件结构][html 3]》大家不去看看？
14. 黄钿钿的《[5种编写网页的软件介绍][5]》值得期待，当然加分。
15. 请大家迅速围观余冰若的《[CSS抖动效果][CSS]》，定有所获。
16. 潘俊宇的《[如何成为时间管理者，摆脱拖延症！][Link 7]》我看了很有收获，你也可以看看。
17. 何欢欢的《[div与span的区别][div_span]》总结的不错，不看是你的损失！
18. 姚迪璐《[乱入之青春][Link 8]》文字优美但些许伤感，年轻人，不妨更加换快些。
19. 陆侃的《[大学生活与未来][Link 9]》写的情真意切，行动起来，go！ go！ go！
20. 黄钿钿《 [Sublime Text2 快捷键大全][Sublime Text2]》很赞，很赞！
21. 何沂璐的《[阿朴橡皮章教程][Link 10]》很好玩，我喜欢。
22. 童煜莹的《[html的链接标签][html 4]》似曾相识，不过说的很好，赞赞赞，略微自恋的庆哥说。
23. 鲍彬霞的[所有文章][Link 11]都很好，可以再加些自己的体会与感悟，哈哈。
24. 周琪的《 [为什么中国的程序员总被称为码农][Link 12]》大家读后肯定有所获。
25. 林宇的《[html链接（思路超清晰）][html 5]》确实非常清晰，不信你去看。
26. 雷粟的《[制作网页几句话][Link 13]》非常朴实，不过很好，L博士可以更上层楼！！
27. 黄钿钿的《[用SublimeText2制作网页中的表格][SublimeText2]》写的非常实用，致敬！
28. 朱丽霞《[表格样式设置][Link 14]》比较具体，请大家一看。
29. 姚迪璐《[html表格边框][html 6]》不错不错，非常不错。
30. 林宇的《[table表格类标签的应用][table]》非常翔实，请大家一观。
31. 卢俐云《[表格标签详解][Link 15]》很好，很强大。

## 加分快讯 ##

### 软件141 ###

1.  戴能同学博客积分优先达到100分，平时成绩加10分。
2.  汤慧同学博文《[如何在win8系统下建立wifi热点][win8_wifi]》浏览量超100，平时成绩加10分。
3.  谢伟吉、汤慧、徐泽锋、黄钿钿、杨梦露、余冰若等博文入选《佳文分享》平时成绩各加5分。
4.  [汤慧][Link 16]同学博客总浏览量超1000，平时成绩加10分。
5.  黄钿钿、余冰若博文入选《佳文分享》平时成绩各加5分。
6.  潘俊宇、何欢欢、姚迪璐、陆侃、黄钿钿、何沂璐博文入选《佳文分享》平时成绩各加5分。
7.  **duang！**余冰若同学的[模拟百度css3抖动][css3 2]成功，**免考免考**，请大家找他请客，我们期待他的博文面世。
8.  黄钿钿同学的博文《 [Sublime Text2 快捷键大全][Sublime Text2]》评论数优先超10、20，顶数超10，平时成绩加30分。
9.  黄钿钿、姚迪璐、朱丽霞等同学入选《佳文分享》平时成绩各加5分。

### 软件142 ###

1.  缪航宁博客积分超过100，平时成绩加10分。
2.  周琪、林宇、张嵊敢、俞冕、谢阳、陈伟健、卢俐云等博文入选《佳文分享》平时成绩各加5分。
3.  童煜莹、周琪、林宇、雷粟博文入选《佳文分享》平时成绩各加5分。
4.  鲍彬霞同学好多文章都不错，平时成绩加15分。
5.  鲍彬霞同学[单篇博文][Link 17]浏览量超100平时成绩加10分。
6.  林宇、卢俐云等同学博文入选《佳文分享》平时成绩各加5分。

[w3school]: http://www.w3school.com.cn/
[css3]: http://css.doyoe.com/
[css3 1]: http://css.doyoe.com/css.chm
[-HBuilder_ _]: http://dcloud.io/
[-sublimetext]: http://www.sublimetext.com/
[Link 1]: http://www.jianshu.com/p/d1b9a64e2e37
[sublime text]: http://pan.baidu.com/s/1sjkGenF
[w3cfuns]: http://www.w3cfuns.com/
[w3cplus]: http://www.w3cplus.com/
[Link 2]: http://blog.csdn.net/dainengchimi007/article/details/44401249
[HTML]: http://blog.csdn.net/hero0607/article/details/44302485
[html]: http://blog.csdn.net/qq_24932625/article/details/44237907
[Link 3]: http://blog.csdn.net/gnauhnait/article/details/44398535
[strong]: http://blog.csdn.net/qq_26473055/article/details/44402379
[Link 4]: http://blog.csdn.net/fxxking_pig/article/details/44408765
[Link 5]: http://blog.csdn.net/qq_24928405/article/details/44407847
[html 1]: http://blog.csdn.net/qq_24928451/article/details/44275987
[html 2]: http://blog.csdn.net/changdare/article/details/44407775
[-]: http://blog.csdn.net/eric_ymm/article/details/44407011
[Link 6]: http://blog.csdn.net/qq_24928357/article/details/44236709
[java]: http://blog.csdn.net/b452b1995/article/details/44416113
[html 3]: http://blog.csdn.net/kumo8/article/details/44300569
[5]: http://blog.csdn.net/gnauhnait/article/details/44467505
[CSS]: http://blog.csdn.net/fxxking_pig/article/details/44489031
[Link 7]: http://blog.csdn.net/aaaapan/article/details/44538797
[div_span]: http://blog.csdn.net/viavai/article/details/44535867
[Link 8]: http://blog.csdn.net/yaodilu/article/details/44520985
[Link 9]: http://blog.csdn.net/lukan36/article/details/44487811
[Sublime Text2]: http://blog.csdn.net/gnauhnait/article/details/44571165
[Link 10]: http://blog.csdn.net/goblinlq/article/details/44574313
[html 4]: http://blog.csdn.net/qq_24928293/article/details/44565083
[Link 11]: http://blog.csdn.net/shaishai11?viewmode=contents
[Link 12]: http://blog.csdn.net/qq_24928405/article/details/44487199
[html 5]: http://blog.csdn.net/qq_24928451/article/details/44569973
[Link 13]: http://blog.csdn.net/qq_22151927/article/details/44498069
[SublimeText2]: http://blog.csdn.net/gnauhnait/article/details/44676821
[Link 14]: http://blog.csdn.net/qq_25150607/article/details/44673545
[html 6]: http://blog.csdn.net/yaodilu/article/details/44747327
[table]: http://blog.csdn.net/qq_24928451/article/details/44731387
[Link 15]: http://blog.csdn.net/kumo8/article/details/44746389
[win8_wifi]: http://blog.csdn.net/hero0607/article/details/44257431
[Link 16]: http://blog.csdn.net/hero0607
[css3 2]: http://inourdream.xyz/
[Link 17]: http://blog.csdn.net/shaishai11/article/details/44569901