Web前端开发实例与实战第1章 初识网页设计.docxVIP

编写日期：授课日期：任课教师：

课程

名称

《Web前端开发实例与实战》

授课

专业

授课

班级

周次

节次

授课

章节

第1章

初识网页设计

授课

学时

2学时

教学

目标

知识

1.了解网页。

2.了解Web标准。

能力

1.能够下载Dreamweaver。

2.能够安装Dreamweaver。

素质

崇尚科学精神，具有将创新理念融入自身学习、生活的意识。

教学

重点

熟知ECMA国际组织

教学

难点

编写一个网页

教学

方法

教学环节包括课堂讲授、集体讨论、师生互动、课后答疑等

教学

用具

多媒体、课件

教学

内容

第1章初识网页设计

1.1网页制作语言

在符合标准的网页设计中，HTML与CSS、JavaScript并列称为网页前端设计的3种基本语言。其中，HTML负责构建网页的基本结构，CSS负责设计网页的表现效果，JavaScript负责开发网页的交互效果。

1.1.1HTML语言

超文本标记语言（hypertextmarkedlanguage，HTML）是一种用来制作超文本文档的简单标记语言。

HTML用于描述功能的符号称为标记或标签。标记在使用时必须用一对尖括号（）括起来，可以一个出现也可以成对出现。浏览器会对HTML文档中对的标记进行解释。例如，a标签被解释为超链接，p标签被解释为段落样式。默认情况下标签以嵌套关系进行使用，可以形成一个基础的文档结构。

1.1.2CSS语言

层叠样式表（cascadingstylesheet，CSS）用于实现更加丰富和美观的网页样式。CSS语言允许代码和网页标记内容分离编写，从而更加便于代码的编写和后期维护。

1.1.3JS语言

Java脚本（JavaScript，JS），它是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。JavaScript语言可以用于Web页面，也可以用于其他非浏览器环境中。

1.1.4网页展示工具

HTML语言的编辑工具最常见的有3种，分别是记事本、VisualStudioCode和Dreamweaver。

1.记事本

由于HTML文件的内容都是文本类型，所以可以使用Windows系统自带的记事本对HTML文档进行编辑。用户只需要右击HTML文档，在菜单中选择记事本打开即可。

2.VisualStudioCode

VisualStudioCode，简称VSCode，是由微软推出的开放源代码的代码编辑器，支持多个平台，如Windows、Linux和macOS等操作系统。

3.Dreamweaver开发工具

Dreamweaver是Adobe公司开发的集网页制作和管理网站于一身的网页编辑器。它是一款专业网页设计师的可视化网页开发工具。利用它，开发人员可以制作出各种跨越平台限制和浏览器限制的、充满动感的网页。

1.2Dreamweaver工具

Dreamweaver不仅支持静态页面的编写，而且还支持PHP、ASP、JSP等动态网页的编写与调试。

1.2.1下载Dreamweaver

打开Dreamweaver官方网站，在网页中可以获取Dreamweaver的最新版本，单击“免费使用”按钮下载Dreamweaver免费试用版安装包，单击“购买”可以购买收费版Dreamweaver。当然也可以通过搜索从网络下载Dreamweaver安装包。（官方网站/cn/products/dreamweaver.html）

1.2.2安装Dreamweaver

本书使用DreamweaverCS6版介绍Dreamweaver软件的安装过程。

（1）双击安装包软件会弹出指定解压安装文件的路径对话框。

（2）单击“下一步”解压安装文件。

（3）安装文件解压完成后会进入安装界面。

（4）如果有序列号就选择“安装”，如果没有序列号就选择“试用”。单击后进入“Adobe软件许可协议”界面。

（5）单击“接受”按钮，进入“选项”界面。

（6）设置安装路径后，单击“安装”按钮，开始安装Dreamweaver。

（7）当软件安装完成后会显示“安装完成”界面。单击“关闭”按钮后结束安装。单击“立即启动”按钮会打开Dreamweaver编辑器。

1.2.3使用Dreamweaver

（1）第一次打开Dreamweaver会进入软件的“新建项目”界面。

（2）在新建选项中可以新建HTML、PHP、CSS及JavaScript等多种语言的源文件。选择新建HTML选项，会弹出一个HTML文件对话框。

（3）在编辑页面的左侧会自动添加一些HTML标签内容用于划分HTML文件

的基本框架。在右侧空白处，为网页效果预览部分。例如，在代码编辑页面添加一行文本“HelloWorld！”在右侧网页预览部分就会就会显示网页中展示的效果。

（4）H