《Web前端开发》实验教学指导/实验九:使用CSS进行网页布局 《Web前端开发》实验教学指导 实验九:使用CSS进行网页布局 实验目的 1、掌握网页布局的基本原理 2、掌握网页布局的常用方法; 3、体会HIML、CSS、JS、 jQuery等多种技术结合进行Web设计开发过程 二、实验环境 1、 Windows XP/Windows7操作系统的计算机; 2、局域网网络环境,并且使用固定IP地址 3、支持互联网访问 4、 Adobe Cs6组件支持 5、Web服务器支持 三、实验要求 1、通过实验提供的PSD文件获得Web开发需要的图片: 2、实现实验案例的基本效果,包括:下拉菜单、POP动画 3、实现实验案例中“成员说”的数据展示,所有的数据存放到XML文件中; 4、全部案例要求使用HIML5+CSS3+JS+ jQuery的技术路线实现; 5、案例要进行浏览器兼容性测试,并完成兼容性测试报告的撰写 四、实验原理 1、HTML5+CSS3进行Web开发的基本方法 2、CSS动画开发的基本方法; 3、 jQuery读取XML数据的基本方法 4、Web兼容性测试的原理和测试方法。 五、实验步骤 1、Web设计 (1)Web设计使用 Adobe Photoshop进行。 )Web设计效果如下图9-1所示。 (3)Web开发中需要的图片,可以通过访问实验素材中的【12实验设计山 ndex. psd】文件 通过原始的设计文档获得 2、Web结构分析 (1)对Web设计图进行结构分析,规划该Web的基本结构。 (2)对Web进行结构分析,分析结构图如下图9-2所示。根据分析的结果设计web的基 本代码 河南中医学院互联网应用技术研究所 本讲共计7页|当前第1页《Web 前端开发》实验教学指导 / 实验九：使用 CSS 进行网页布局 河南中医学院互联网应用技术研究所 本讲共计 7 页 | 当前第 1 页 《Web 前端开发》实验教学指导 实验九：使用 CSS 进行网页布局 一、实验目的 1、掌握网页布局的基本原理； 2、掌握网页布局的常用方法； 3、体会 HTML、CSS、JS、jQuery 等多种技术结合进行 Web 设计开发过程。 二、实验环境 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址； 3、支持互联网访问； 4、Adobe CS 6 组件支持； 5、Web 服务器支持。 三、实验要求 1、通过实验提供的 PSD 文件获得 Web 开发需要的图片； 2、实现实验案例的基本效果，包括：下拉菜单、POP 动画； 3、实现实验案例中“成员说”的数据展示，所有的数据存放到 XML 文件中； 4、全部案例要求使用 HTML5+CSS3+JS+jQuery 的技术路线实现； 5、案例要进行浏览器兼容性测试，并完成兼容性测试报告的撰写。 四、实验原理 1、HTML5+CSS3 进行 Web 开发的基本方法； 2、CSS 动画开发的基本方法； 3、jQuery 读取 XML 数据的基本方法； 4、Web 兼容性测试的原理和测试方法。 五、实验步骤 1、Web 设计 （1）Web 设计使用 Adobe Photoshop 进行。 （2）Web 设计效果如下图 9-1 所示。 （3）Web 开发中需要的图片，可以通过访问实验素材中的【12.实验设计\Index.psd】文件， 通过原始的设计文档获得。 2、Web 结构分析 （1）对 Web 设计图进行结构分析，规划该 Web 的基本结构。 （2）对 Web 进行结构分析，分析结构图如下图 9-2 所示。根据分析的结果设计 Web 的基 本代码