Web前端开发培训教程

培训大纲

第一阶段

STEP 1

1. 讲一下培训流程和培训期间的注意事项；
2. 熟悉html基础知识；
3. 尝试制作web01→index.html；

重点自己尝试作业

STEP 2

1. 概述一下开发环境；
2. html标签讲解，结合公司html教程和页面，讲解常用HTML标签和实际项目中的注意事项；
3. 根据讲解，检查个人DAY1做的index.html；
4. 页面布局讲解，理解布局的思想，学会分析布局并掌握如何画布局；
5. 根据标签和布局讲解，修改个人STEP1做的index.html，并检查；
6. 继续做未完的index.html

重点理解布局思想

STEP 3

1. 讲解HTML编码规则：命名规则、编码规范和图片格式要求；
2. 修改index.html;
3. 检查修改的情况；

重点熟悉编码规则

STEP 4

1. 讲解建站点流程，弄懂站点模板目录结构及说明；
2. 把个人做的页面移到模板站点里面；

STEP 5

1. 归纳、总结第一阶段的学习结果；
2. 反复练习第一阶段的学习内容；

重点综合练习第一阶段的学习内容

第二阶段

STEP 1

1. 带着写首页CSS，在写的过程中讲解各种CSS样式的用法；
2. 修改第一阶段自己写的首页CSS；
3. 修改完，检查修改的情况，发现问题并做记录；
4. 在布局基础上，重新写首页的样式，遇到问题及时提出；

STEP 2

第三阶段综合

开发环境

浏览器

1. 开发常用浏览器

   • 谷歌（chrome）

     • Chrome 开发者工具(Chrome DevTools)

   • 火狐（Firefox）

     • Firefox开发者工具(Firefox Developer Tools)

2. 测试浏览器

   • Windows10

     • Firefox 最新版
     • Google Chrome 最新版
     • Internet Explorer 11/Edge

   • Mac

     • Safari 最新版
     • Firefox 最新版
     • Google Chrome 最新版

   • iPhone

     • iOS /13/14
       • Google Chrome
       • Safari

   • Android

     • Android /10.0/11.0
       • Google Chrome

   • iPad

     • iOS 13/14

开发工具

1. 常用代码编辑器

   • VS Code
   • Adobe Dreamweaver CC
     • 其他↓↓
       • Sublime Text 3
       • HBuilder
       • Notepad
       • EditPlus

2. 设计软件

   • Adobe Photoshop CC ------> .psd
   • Adobe Illustrator CC(矢量绘图软件) ------> .ai
   • Adobe XD(UX/UI设计软件) ------> .xd
   • Adobe Fireworks CS6(网页作图软件已停止更新) ------> .png
   • Sketch(矢量绘图软件[MacOS]) ------> .sektch