实训目标
1) 了解 Web 前端开发工程师岗位需求和技术要求;
2) 了解 Web 前端开发技术组成;
3) 掌握 HTML 文档结构,学会编写简单的 HTML 程序;
4) 学会安装并使用常用 Web 前端开发工具(NotePad、Editplus、gedit、HBuilder、Jetrains WebStorm 等);
5) 掌握标题字、文本标记、段落与排版标记的语法;
6) 掌握文本段落排版的基本规则;
7) 能完成文本型 Web 网页的设计。
实训内容
1) 通过网络收集有关 Web 前端开发工程师岗位需要和技术要求;
2) 安装并使用各种常用的 Web 前端开发工具;
3) 安装各种 Web 浏览器软件,并熟知各种浏览器的功能和差异;
4) 掌握 NotePad、EditPlus 等 HTML 集成开发环境软件的功能;
5) 使用 NotePad、EditPlus 等编辑软件编写简易的 Web 网页程序;
6) 标题字标记、文本标记、段落与排版标记的应用。
实训项目
1) 学生简易主页设计;(30 分)
2) Meta 标记、body 标记属性使用;(30 分)
3) 文本与段落标记的应用;(30 分)
4) 课外拓展训练。(10 分)
下面就是博主自己完成的实训项目的过程附带部分个人思考:
项目 1-1 学生简易主页设计
实训指导过程:
1. 启动记事本程序,新建文本文件,修改文件名为“prj1-1.html”,在弹出的“重命名”对话 框中单击“是”按钮,如图所示。
实现的源码及HTML代码的基本格式框架如下:
项目 1-2 meta标记、body标记属性的使用
实训指导过程:
1. 启动程序,创建 HTML 文档,在首行插入注释语句:<!--自己的姓名/学号-->;保存文件,输入文件名为 prj1-2.html。
2. 参照 meta 标记的定义,学会设置 meta 标记的 Keyword、Description、generator、Author
等属性。
3. 定义 body 标记的 bgcolor、background、text、link、alink、vlink、topmargin、leftmargin
等属性,实现页面背景颜色、背景图像和超级链接的颜色变化,注意同时设计 bgcolor、
background 属性使页面效果发生变化,并使用多种方法设置各类颜色。
4. 在 body 标记中插入段落 p 标记,段落内容如下:
Mozilla Firfox 是由 Mozilla 基金会与开源团体共同开发的网页浏览器。Firefox 28 全新
发布,从火狐官方中文网站上下载最新版 Firefox 火狐浏览器,拥有最快、最安全的上网体
验。
5. 在段落首部插入 4 个空格,设置“火狐官方中文网站”超链接。格式如下:
<a href=