实验一Web开发工具的使用.PDF

《Web 前端开发》实验教学指导 / 实验一：Web 开发工具的使用 《Web 前端开发》实验教学指导 实验一：Web 开发工具的使用 一、实验目的 1、了解Web 开发工具的多样性； 2 、掌握常用的Web 开发工具的安装和使用方法； 3、掌握HTML5 文档的结构以及HTML 文件命名规范； 4 、掌握编写简易的HTML 文件； 5、掌握body 标记的属性以及使用方法。 二、实验环境 1、Windows XP/Windows 7 操作系统的计算机； 2 、局域网网络环境，并且使用固定IP 地址。 三、实验要求 1、完成Web 开发工具的安装，并掌握基本的使用方法； 2 、完成HTML 文件的编写，并掌握HTML 文档的结构； 3、完成body 标记属性的设置，改变网页显示效果。 四、实验原理 1、Adobe Create Suite 6 的安装和使用； 2 、NetBeans 的安装和使用； 3、NotePad 的安装和使用； 4 、HTML5 文档结构及语法； 五、实验步骤 1、Web 开发工具：Adobe Creative Suite® CS6 Design Web Premium （1）获得软件安装包。 访问Adobe 官方网站获得Adobe Creative Suite® CS6 Design Web Premium 。 地址：/cn/downloads/ （2 ）安装 对下载的程序安装包解压缩，得到安装程序，执行 [Set-up]文件，开始安装。如图1-1 所示。 选择[试用]，以产品试用的模式开始进行产品安装。如 图 1-2 所示。 图1-1 执行安装程序 本讲共计5 页 | 当前第1 页 《Web 前端开发》实验教学指导 / 实验一：Web 开发工具的使用 使用注册的Adobe ID 登录后，继续执行安装行为。如果还没有注册Adobe ID ，可以通过点击 [创建Adobe ID]注册。如图1-3 所示。 图1-2 选择产品试用 图1-3 使用Adobe ID 登录 选择需要安装的组件，建议选择[Adobe Dreamweaver CS 6]、[Adobe Fireworks CS6]、[Adobe Illustrator CS6]、[Adobe Photoshop CS6]四项。可以根据自己的需要进行定义。如图1-4 所示。 等待软件安装完成，如图1-5 所示。 图1-4 选择安装的软件组件 图1-5 等待程序安装完成 （3 ）打开Adobe Dreamweaver CS6 ，熟悉软件的界面和常用功能。 请完成下面的任务： 任务一：设置工作区布局为[编码人员（高级）]模式。 任务二：打开DW 的默认参数对话框，熟悉并设置自己需要的参数。 任务三：在DW 中新建一个网站，网站名称为[我的第一个网站] 。 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、Web 开发工具：NetBeans （1）获得软件安装包 访问NetBeans 官方网站获得产品安装包。 地址：/downloads/index.html （2 ）安装 本讲共计5 页 | 当前第2 页 《Web 前端开发》实验教学指导 / 实验一：Web 开发工具的使用 双击安装程序开始执行，按照提示完成软件安装。 （3 ）打开NetBeans 软件，熟悉NetBeans 软件的界