网页设计课程实践报告.doc

网页设计与制作课程实践

报告

题目 ：制作“英语学习”网站

学院 年级 学 号 姓 名 指导教师

计算机与电子信息学院

电子商务14 1407130132 彭才茂 石娟

二零15年12月27日

中文摘要

我本次网页设计实践的主题是“英语学习网站”，在这个网站设计过程中，主要的一些操作为：在网页中添加文字、添加图像、用表格、APdiv和css+div来布局、运用模板和框架技术、添加超链接、锚点链接、热点链接、运用表单元素以及插入一些常用的HTML元素等。并且通过对其代码的分析学习来控制网页中的一些元素来达到自己想要的效果。

目录

摘 要 ................................................... Ⅰ 目 录 ..................................................... Ⅱ 制作目的 ..................................................... 1 第1章 dreamweaver 网页设计

1.1制作图文并茂的网页 ...................................... 2 1.2表格的使用................................................ 2 1.3 超链接................................................... 4 1.4 模板..................................................... 5 1.5 框架..................................................... 6 1.6 表单..................................................... 7

第2章 布局

2.1 CSS布局................................................. 8

目的

一个学期的网页设计课程准备结束了，由这一学期对dreamweaver软件的学习，学到了一些在网页中插入元素，并通过表格和div等来对网页整体进行布局。本次课程设计作业给我们提供了一个实践的机会，我设计的网站为一个英语学习网站，通过设计这个英语学习网站并对这个网站的每个页面进行悉心布局来检验自己上课的学习成果，并巩固上课所学的知识。同时积累一些以在实际操作中的经验来提高自己的实际操作能力。为今后更深入的学习网页设计后台运行等打好基础。所以网站中太多细节没有考虑到，还请谅解。

下面是我设计的网站的整体框架：

（网站中有些是空链接，并且每个页面都可以链接到“我拍的账户”和返回主页。）

第1章 dreamweaver网页设计

1.1 制作图文并茂的网页

在本次网页设计实践中，由最简单、最基础的插入文字图片开始，让网页具有最基本的元素：如图1.11

并观察它们的属性和代码：（如图1.12

图1.13）

1.2 表格的使用

在本次网页设计实践中，网页中的表格主要有两个用途：

1、用作网页整体的布局：在编辑模板时，我首先插入了一个3行1列的表格，随即调整单元格的高度。使之分隔一个网页为3个板块，再调整表格背景等属性，插入别的元素等。如图

1.2.1

2、表格的一般用途，在表格中输入信息，使网页整体更加整洁。如图

1.2.2

1.3 超链接

（1）超链接：超链接的代码为:网页中显示的内容,在本次网页设计实践中，用到的链接有：设计的网页之间的链接、与外部网页的链接等。

（2）锚点链接：在本次网页设计实践中，还用到了锚点，其代码为:网页中的内容。

1.4 模板

这次网页设计实践做了一个简单的模板，模板中有两个可编辑区域。并在制作过程中对模板修改，在应用到所有应用模板的网页中。

如图1.3.3中，令锚点：id=”d1” name=”d1”,再将超链接的链接地址写上d1,即可完成一个命名锚点的设置。

1.5 框架

框架主要用于拆分网页为几个部分，在这次网页设计实践中，我在单词学

习页面中用到了框架技术。框架的边框为0，所以没有显示出来。整个网页被拆分为3个区域，上部、左下部和右下部。显示效果大致为图1.6.1。在制作网页的过程中，还不断对模板进行修改并且更新到新的网页中。

1.6

表单

本次网页设计实践中，在“注册页面”和首页均用到表单，具体如下：

（1）在注册页面中插入一个表格，然后再单元格中分别插入文本区域、单选按钮、复选按钮、隐藏域和按钮等：

8

（2）在首页友情链接处插入表单元素中的跳转菜单

第2章 布局

2.1 CSS+DIV布局

在本次网页设计实践中，也使用到了CSS+DIV布局；具体如下：

（1）在建好的模板中插入一个大的div,添加一个CSS规则来设置其属性。

9

（2

）其次，在这个大的div中插入小的div再一次对页面进行布局，既添加新的CSS规则，设置margin后就可以得到如图2.1.2所示的效果。

其代码为：

（3）使用apdiv，插入div，新建CSS规则将其定位设置为“absolute”，随后即可调整div大小与位置。

10

11