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

《2-网页设计实验指导书32》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、《网页设计》实验指导书上海建桥学院信息技术学院-O一一年九月《网页设计》实验指导书目录实验1Html5标记的综合应用11.1实验目的11.2实验原理11.3实验器材和环境11.4实验内容11.5作业1实验2Css3属性的综合应用22.1实验目的22.2实验原理22.3实验器材和环境22.4实验内容22.5作业2实验3主题网站的设计与制作33.1实验目的33.2实验原理32.3实验器材和环境33.4实验内容33.5作业3实验1Html5标记的综合应用1.1实验目的综合运用html5常用标记，设计与制作静态网页，至少包含超

2、链接、图像、背景、表单、音视频等标记。1.2实验原理xhtml文档的基本结构＜htmlXheadXbody＞标记，＜meta＞和〈title〉标记〈body〉、〈p＞等常用标记及其属性在网页中插入背景图片在网页中插入水平线，并设置水平线的属性table^form、audio＞video等标记的应用1.3实验器材和环境PC机1台、Photoshopcs3以上、dreamweavercs3以上、flashcs3以上1.4实验内容现要求完成主要内容如下：(1)正确建立站点、文件管理正确(2)站点下只有主页，并命名为：inde

3、x,html；图像文件要放在images文件夹；子页放在Include文件夹(或index文件夹)内；正确命名所有文件。(3)用表格布局，完成网页至少3个，并正确链接。(4)用表单完成个人信息采集的页面，风格要与主页一致。(5)正确使用所学过的xhtml标记(6)在作品的版权位置显示学号和姓名1.5作业提交站点文件夹，命名要求：“学号”+“姓名”实验报告书实验2Css3属性的综合应用2.1实验目的综合运用Css3常用标记，美化静态页面，至少包含段落、图像、边框、背景、项目列表、超链接等元索的美化。2.2实验原理布局图的

4、绘制方法div+css布局方法的应用用div+css方法，完成网页中的图文混排用css控制网页中背景图项目列表与css在导航菜单中的应用2.3实验器材和环境PC机1台、Photoshopcs3以上、dreamweavercs3以上、flashcs3以上2.4实验内容现要求完成主要内容如下：(1)绘制站点布局图(2)用div+css布局法临墓(改版)建桥学院网站，根据网站主题，收集相应的文字和图片素材(3)用div完成网页的结构(4)创建独立的css样式文件，并正确保存、链接。能正确表现xhtml文件中的图片和文字，实现

5、图文混排等效果(5)用li+css完成主导航的制作(6)在作品的版权位置显示学号和姓名(7)提示：实验报告中给出关键的实验步骤或脚本即可2.5作业提交站点文件夹，命名要求：“学号”+“姓名”实验报告书实验3主题网站的设计与制作3.1实验目的在理解web页面的设计与制作流程的棊础上，自定主题，综合运用html5、css3^Javascript等完成静态网页的设计与制作，要求页面间超链接正常连接、主题表达明确、合理运用css3盒布局等。3.2实验原理Photoshop、Fireworks等平面设计软件，在主页的构思和排版中

6、的应用，正确合理地完成切图根据设计稿，用div+css方法，完成网页布局、各类媒体元素的插入用css方法制作二级菜单JavaScript基本应用网站发布的常用方法2.3实验器材和环境PC机1台、Photoshopcs3以上、dreamweavercs3以上、flashcs3以上3.4实验内容现要求完成主要内容如下：(1)自选网站主题，用div+css布局法制作自选主题的综合网站(2)用框图表示出主题网站主页的布局图(3)用Photoshop完成构思和排版、正确合理地完成切图(4)创建站点以及相应的目录结构(images

7、、css等)(5)创建主页的xhtml文件(6)创建css样式文件，布局xhtml文件屮的内容(7)网页的页脚显示学号和姓名(8)网页能正常运行，图片等媒体能正确显示(9)运用JavaScript完成至少2种特效(10)网上申请免费空间，并将自己制作的网站上传到该空间(11)现场测试3.5作业提交站点文件夹，命名要求：“学号”+“姓名”实验报告书，实验报告屮给出关键的实验步骤或脚本即可