教学web上机实验指导书

1、Web 前端开发技术实例HTML/CSS/JavaScript实验指导书课程名称：Web 应用设计基础Web 应用设计基础上机实验指导书说明：实验项目后标注“c”需交源代码，“r”需写实验。实验一：开发工具熟悉及站点配置实验目的：熟悉 DW 及相关的开发工具与站点配置实验要求：1、在 dreamweaver 下配置开发站点；2、在 windows 环境下安装 IIS；3、熟悉 dreamweaver 基本使用；4、在开发站点下制作一个以上的页面。实验步骤：第一步，在计算机硬盘上建立一个文件夹 mysite；第二步，启动 Dreamweaver 开发工具；第三步，在 Dreamweaver 下点

2、击“站点管理”，新建开发站点“mysite”，并指向硬盘上文件夹“mysite”。第四步，在 Windows 下控制面板里面安装 IIS，并配置好运行站点。实验二：HTML 基础及超练习（c）实验目的：熟悉 HTML 基础及超的使用实验要求：1、建立至少 3 个以上的网页；2、实现任意两网页之间的跳转（建议做个导航菜单）；3、每个网页里面至少有文本内容；4、必须有一个。实验步骤：第一步，新建一个文件夹“mysite”作为根目录；第二步，在根目录下，开发一个网页 a.html，在网页当中设置好导航菜单,分别连接到 a.html，b.html，c.html；第三步，打开 a.html，修改内容后另

3、存为 b.html，再次修改内容后另存为 c.html。实验三：网页及多使用练习（c）实验目的：熟悉网页的使用方法和多使用方法实验要求：1、制作一个完整网页；2、在网页中文本、音频、等多。实验步骤：第一步，新建一个文件夹“mysite”作为根目录；第二步，在根目录下，新建文件夹 images，在里面放几张需要使用的；第三步，在根目录下，新建文件夹 sound，在里面放几首需要使用的 MP3 格式音乐文件；第四步，在根目录下，新建文件夹，在里面放需要使用的MP4 格式文件；第五步，在根目录下，开发一个网页index.html，在网页当中、音频文件。实验四：表格布局网页练习（c）实验目的：熟悉表格

4、布局网页方法实验要求：1、制作一个完整网页；2、网页采用表格布局；3、布局 4 个以上的区域；4、网页中至少包括和文本；5、布局合理，突出。实验步骤：第一步，新建一个文件夹“mysite”作为根目录；第二步，在根目录下，新建文件夹 images，在里面放几张需要使用的；第三步，在根目录下，新建一个网页文件 index.html，在里面表格并进行合理布局；第四步，在 index.html 网页当中、文本内容。实验五：表单设计练习（c，r）实验目的：熟悉表单设计方法实验要求：1、制作一个完整网页；2、在网页里面设计一个表单；3、表单中至少包括 5 个以上的表单项；4、表单突出，设计合理，外观整洁大

5、方。实验步骤：第一步，新建一个文件夹“mysite”作为根目录；第二步，在根目录下，新建网页文件 index.html；第三步，在 index.html 文件中新建表单 form，并在表单中表单项目 5 个或 5 个以上；实验六：利用 CSS 对网页精美设计练习（c，r）实验目的：熟悉 CSS 的使用方法及 CSS 常见属性实验要求：1、制作一个完整网页和一个 css 文件；2、在网页布局 4 个以上不同区域；3、每个区域采用不同的样式来控制显示；4、网页中应包括和文本内容；5、网页突出、布局合理、设计美观。实验步骤：第一步，新建一个文件夹“mysite”作为根目录；第二步，在根目录下，新建文

6、件夹 images，在里面放几张需要使用的；第三步，在根目录下，新建一个网页文件 index.html，采用 table布局好；第四步，在根目录下，新建 css 文件夹，并在里面新建 style.css文件，编写好相应 css 代码；第五步，在网页 index.html、文本，完善好网页效果。实验七：采用 DIV+CSS 布局网页练习（c，r）实验目的：熟悉 DIV+CSS 布局网页的方法实验要求：1、制作一个完整网页和一个 css 文件；2、在网页中采用 DIV+CSS 布局 4 个以上区域；3、网页中应包括和文本内容；4、网页突出、布局合理、设计美观。实验步骤：第一步，新建一个文件夹“my

7、site”作为根目录；第二步，在根目录下，新建文件夹 images，在里面放几张需要使用的；第三步，在根目录下，新建一个文件交 css，在里面新建文件style.css；第四步，在根目录下，新建文件 index.html ， 并让文件index.html 与 style.css 关联；第五步，在网页 index.html 采用 div+css 方法进行布局好，逐步完善好网页布局、内容、效果。实验八：制作一个精美的Web 站点（c）实验目的：掌握一个完整精美网页开发的基本方法实验要求：1、开发一个 Web 站点，至少有 3 个以上的页面；2、采用 CSS 和 HTML 文件分开方法；3、网页中至少应包括和文本内容；4、网页突出、布局合理、设计美观。实验步骤：第一步，新建一个文件夹“mysite”作为根目录；第二步，在根目录下，新建文件夹 images，在里面放几张需要使用的；第三步，在根目录下，新建一个文件交 css，在里面新建文件style.css；第四步，在根目录下，新建文件 index.html ，