2-网页设计实验指导书32.docVIP

《网页设计》 实验指导书 上海建桥学院信息技术学院 二〇一一年九月 《网页设计》实验指导书 目 录 实验1 Html5标记的综合应用 1 1.1 实验目的 1 1.2 实验原理 1 1.3 实验器材和环境 1 1.4 实验内容 1 1.5作业 1 实验2 Css3属性的综合应用 2 2.1 实验目的 2 2.2 实验原理 2 2.3 实验器材和环境 2 2.4 实验内容 2 2.5作业 2 实验3 主题网站的设计与制作 3 3.1 实验目的 3 3.2 实验原理 3 2.3 实验器材和环境 3 3.4 实验内容 3 3.5作业 3 实验1 Html5标记的综合应用 1.1 实验目的 综合运用html5常用标记，设计与制作静态网页，至少包含超链接、图像、背景、表单、音视频等标记。 1.2 实验原理 xhtml文档的基本结构 htmlheadbody标记，meta和title标记 body、p等常用标记及其属性 在网页中插入背景图片 在网页中插入水平线，并设置水平线的属性 table、form、audio、video等标记的应用 1.3 实验器材和环境 PC机1台、Photoshop cs3以上、dreamweaver cs3以上、flash cs3以上 1.4 实验内容 现要求完成主要内容如下： 正确建立站点、文件管理正确 站点下只有主页，并命名为：index.html；图像文件要放在images文件夹；子页放在Include文件夹（或index文件夹）内；正确命名所有文件。 用表格布局，完成网页至少3个，并正确链接。 用表单完成个人信息采集的页面，风格要与主页一致。 正确使用所学过的xhtml标记 在作品的版权位置显示学号和姓名 1.5作业 提交站点文件夹，命名要求：“学号”+“姓名” 实验报告书 实验2 Css3属性的综合应用 2.1 实验目的 综合运用Css3常用标记，美化静态页面，至少包含段落、图像、边框、背景、项目列表、超链接等元素的美化。 2.2 实验原理 布局图的绘制方法 div+css布局方法的应用 用div+css方法，完成网页中的图文混排 用css控制网页中背景图 项目列表与css在导航菜单中的应用 2.3 实验器材和环境 PC机1台、Photoshop cs3以上、dreamweaver cs3以上、flash cs3以上 2.4 实验内容 现要求完成主要内容如下： 绘制站点布局图 用div+css布局法临摹（改版）建桥学院网站，根据网站主题，收集相应的文字和图片素材 用div完成网页的结构 创建独立的css样式文件，并正确保存、链接。能正确表现xhtml文件中的图片和文字，实现图文混排等效果 用li+css完成主导航的制作 在作品的版权位置显示学号和姓名 提示：实验报告中给出关键的实验步骤或脚本即可 2.5作业 提交站点文件夹，命名要求：“学号”+“姓名” 实验报告书 实验3 主题网站的设计与制作 3.1 实验目的 在理解web页面的设计与制作流程的基础上，自定主题，综合运用html5、css3、Javascript等完成静态网页的设计与制作，要求页面间超链接正常连接、主题表达明确、合理运用css3盒布局等。 3.2 实验原理 Photoshop、Fireworks等平面设计软件，在主页的构思和排版中的应用，正确合理地完成切图 根据设计稿，用div+css方法，完成网页布局、各类媒体元素的插入 用css方法制作二级菜单 JavaScript基本应用 网站发布的常用方法 2.3 实验器材和环境 PC机1台、Photoshop cs3以上、dreamweaver cs3以上、flash cs3以上 3.4 实验内容 现要求完成主要内容如下： 自选网站主题，用div+css布局法制作自选主题的综合网站 用框图表示出主题网站主页的布局图 用Photoshop完成构思和排版、正确合理地完成切图 创建站点以及相应的目录结构（images、css等） 创建主页的xhtml文件 创建css样式文件，布局xhtml文件中的内容 网页的页脚显示学号和姓名 网页能正常运行，图片等媒体能正确显示 运用JavaScript完成至少2种特效 网上申请免费空间，并将自己制作的网站上传到该空间 现场测试 3.5作业 提交站点文件夹，命名要求：“学号”+“姓名” 实验报告书，实验报告中给出关键的实验步骤或脚本即可 第1页，共5页