网站设计静态网页

1、山 西 大 学 管 理 学 院实验报告姓 名学 号专业班级课程名称网站设计与开发实验室成 绩指导教师实验项目名称网站开发与建设的基础Dreamweaver综合性静态页面设计一、实验目的：1、按照书上43页至47页要求，制作一个简单的网页，以熟悉Dreamweaver基本的操作命令。2、按照书上56页至57页要求，制作一个应用超级链接的网页，以熟悉超级链接设置的基本操作命令与操作方法。3、按照书上65页至67页要求，使用CSS样式表为网页添加效果，以进一步熟悉面板组的使用。4、按照书上78页至81页要求，制作隐藏层特效，使用时间线创建动态HTML动画。5、按照书上96页至97页要求，建立一个T型

2、框架，保存全部框架内容，按提示输入相应的内容，在其中的一个网页文档中插入表单，添加合适的表单对象。6、按照书上108页至110页要求，利用布局视图和标准视图制作满意的模版。二、实验内容：（一）制作一个简单的网页（二）制作一个应用超级链接的网页（三）使用CSS样式表等技术为页面添加效果（四）制作隐藏层特效与使用时间线创建动态HTML动画。（五）建立框架网页和具有表单的网页（六）利用布局视图和标准视图制作满意的模版三、实验步骤（要求有截图）：（一）制作一个简单的网页（二）制作一个应用超级链接的网页（1）这是制作好的名人故居的网页（已经包含了设置好的三个名字的链接）例如宋庆龄的链接（2）这是制作好的

3、关于三所故居的相应的文字介绍的网页（3）设置图片的链接，这次图片的链接是对应的360百科的URL地址，如下所示（4）对操作进行保存，通过浏览器打开，在相应的网页中点击相应的文字或者是图片就可以连接到相关联的网页。（三）使用CSS样式表等技术为页面添加效果（1）创建好表格页面(2)创建好三个相应的链接的页面（3）创建好相应的文字链接（4）进行CSS样式的创建(5)对文字进行CSS样式的设置（四）制作隐藏层特效与使用时间线创建动态HTML动画。 （1）制作隐显层特效 （2）使用时间线创建动态HTML动画 按照书中的要求一步一步进行操作最终设置好的页面如下（五）建立框架网页和具有表单的网页（1）在网

4、页中设置框架，类型为上方及左侧嵌套，在三个不同的部分中填入内容（2）之后制作好三个景点文字要链接到的网页（3）制作一个新的网页，使用表单控件对各个网页进行保存。（六）利用布局视图和标准视图制作满意的模版(1)制作好模板页，还对“基本信息”和“学员介绍”设置了超链接（2）新建一个站点并且将模板保存在站点中 （3）套用该模板创建网页，并在可编辑区域中输入文字四、实验结果（要求有截图）：（一）制作一个简单的网页 最后通过浏览器中打开，显示制作好的网页，上边这个图是鼠标经过图像的原始图像的截图。 这张图是鼠标经过后变换后的图像的截图。（二）制作一个应用超级链接的网页 上图是制作好的带有超链接的网页上边

5、三个图是点击三个名字之后出现的网页上边三个图是点击图片后连接到的网页（三）使用CSS样式表等技术为页面添加效果1、通过浏览器打开制作好的“著名展馆”的网页2、点击相应的文字链接，链接到相应的网页（四）制作隐藏层特效与使用时间线创建动态HTML动画。（1）制作显隐层特效 （2）使用时间线创建动态HTML动画 一系列操作结束后，通过浏览器打开，显示了动态动画（五）建立框架网页和具有表单的网页浏览器中打开，显示如下：五、实验分析：（一）制作一个简单的网页在这次实验中，制作一个简单的网页，是按照书上的步骤一步一步进行操作的，（1）新建一个文件夹，之后输入标题“北京风光”，之后再文档窗口中插入提前下载好

6、的香山公园的图片并按照要求进行相关的参数设置并且调整为左对齐，之后粘贴复制好的文字。（2）再重复第一步的步骤再添加小西湖自然风景区的图片和文字。（3）在插入鼠标经过图像时，首先选中要变换的图像，之后选择原始图像和要变换的图像，之后再进行调整，然后经过浏览器打开显示的结果如上。注意：再最后的插入鼠标经过图像时，在对话框中设置完成后，插入的图片大，而且变成两张图片，删掉其中一张图片，打开，如果格式显示异常时再通过调整相应的问题直到网页显示符合自己的要求。（二）制作一个应用超级链接的网页在这次实验中，要制作超链接的网页，同样是根据书上的步骤进行操作的（1）在上一个实验的基础上，分别制作好了名人故居的

7、网页，制作好宋庆龄，齐白石，老舍故居的文字介绍的网页， （2）之后填写链接，首先设置文字的链接，选中文字之后，在链接的文件夹中选择制作好的文字网页，接着设置图片的链接，这里我选择了360百科相应的介绍作为连接对象，复制粘贴好网址之后进行保存 （3）最后在通过浏览器打开，得到实验结果中的截图。 注意：在这个实验中是以上一个实验的基本操作为基础的，主要的步骤是链接，共介绍三种链接方式，在文件夹中选择目标文件和通过锚点以及在目标中选择_blank。（三）使用CSS样式表等技术为页面添加效果在这次实验中，是在之前建立网页的基础上，插入表格，在表格中输入文字或插入图片。（1）制作好含表格的网页，在表格中

8、填入相应的内容，（2）在制作好的网页一中，按照需要制作好相应的三个链接网页。 （3）在创建CSS样式中，软件版本不同，步骤也不尽相同，原理相同，按照要求创建好三种CSS样式，之后对选中的文字选择相应样式。注意：在CSS样式创建中，了解到不同的选择代表着不同的意义，hover表示鼠标放置时超级链接，active表示当前正在访问（鼠标刚刚点击访问）超级链接。（四）制作隐藏层特效与使用时间线创建动态HTML动画。注意：（1）在制作隐藏层特效时，主要注意onmouseout显示，onmouseover隐藏，这两对相对应。利用层能够对网页元素定位。（2）在制作动画时，在时间轴中可以对路线进行设置。（3）

9、层与行为配合使用可以方便的制作出具有动画效果的网页。（五）建立框架网页和具有表单的网页 （1）在建立框架网页时，在这次实验中，框架类型是上方及左侧嵌套，将整个网页划分成三个部分，在进行保存时选择保存全部，形成4个html文件，第一个是整个的网页命名为frames,之后按照位置进行命名，依次命名为right,left,top。在各个部分中输入相应的内容。 （2）在制作表单时，首先插入一个表单区域，在这个区域中进行输入，之后按照要求输入相应的内容，包括单选按钮，多选框，单行多行文本段，最后添加提交和重置按钮。 注意：在设置链接时，选好要链接到的文件之后，在目标属性中选择mainframe,就会在右侧框架中及主框架中显示链接到的内容。 （六）利用布局视图和标准视图制作满意的模版注意：（1）在制作模板时要注意到