实验类型：□ 验证 □ 综合 □ 设计□ 创新   实验日期：2014/10实验成绩：

实验一 WEB 前端设计与制作

一、实验目的

1、掌握页面设计的基本技巧，了解网站的基本建立过程，掌握使用 Dreamweaver 制作

网页的基本技术；

2、学习和使用 HTML 语言，使用 CSS 控制页面样式，使用 JavaScript 脚本语言增强页

面的互动性。

二、实验内容

1、选择一个自己感兴趣的主题，明确站点风格和功能。

2、围绕这一主题设计站点页面，包括页面的布局、页面的色彩搭配，页面的交互方式

等。

3、使用工具软件来完成设计页面的制作，运用到 HTML，CSS 和 JavaScript。

三、实验要求

1、了解站点风格的概念；

2、理解主页、栏目页、导航条、目录框架等术语；

3、熟悉 HTML 的常用标记使用以及框架网页的制作；

4、掌握使用Frontpage或者 Dreamweaver 制作网页的基本技术；

5、实验前应该先选定所要创建网站的主题（如：个人网站、自我推荐网站、班级网站、

某种专题网站等）和风格；

6、围绕主题和风格，设计站点的主页、栏目及其内容，并且设计出主页和栏目页面的

布局；

7、准备好网页制作时所需的资料以及图片等素材。

四、实验环境

硬件环境：PC 微机

软件环境：文本编辑器（UltraEdit、EditPlus、Notepad 等）或者Frontpage或者

Dreamweaver、IE 和FireFox浏览器（至少使用两种不同内核的浏览器）

五、实验代码

RequestForm.html

        注册用户

                用户名

                密码

                确认密码

                出生日期

                性别

                    男

                    女

            年级

                        无

                        大一

                        大二

                        大三

                        大四

            爱好

                    音乐

                    运动

                    旅游

                    阅读

            上传头像

            其他

            输入信息

Styles.css

@CHARSET"UTF-8";

    #header{

    text-align:center;

    margin:0auto;

    width:1300px;

    height:100px;

    background:red;

    }

    #mlside{

    width:300px;

    height:100px;

    background:black;

    float:left;

    }

    #mrside{

    width:300px;

    height:100px;

    background:black;

    float:right;

    }

    #main{

    margin:0auto;

    width:1300px;

    height:600px;

    background:gray;

    }

    #lside{

    width:650px;

    height:600px;

    background:purple;

    float:left;

    }

    #rside{

    width:650px;

    height:600px;

    background:pink;

    float:right;

    }

Test.html