网页设计——期末练习

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

实训1 页面控制

实训目的

为了让学生能熟练掌握创建站点的方法,掌握设置网页的页面属性、如何在网页中添加背景音乐等操作。

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材。

实训内容

创建站点:

设置外观:

设置标题:

设置标题/编码:

设置跟踪颜色:

设置颜色:

设置窗口大小:

添加背景音乐:

实训要求

实训步骤

在E盘中新建本地根文件夹,命名为root,并在该文件夹中新建image文件夹以存放网站中所要用到的图片。

定义站点:设置"站点名称",命名为"mysite";设置本地根文件夹,指定为E盘下的root 文件夹;设置"HTTP地址"为localhost。

创建与设置文档的页面属性:新建一个页面,设置文档页面属性:标题设置为"我的班级",背景图像设置为image\ 0l.jpg图像,左边界、边界宽带、顶部边界以及边界

高度分别设置为20

设置页面中文字的字体、字体大小:选择文字部分,在属性面板设置字体及字体的大小。

添加背景音乐:为整个页面添加一个背景音乐。在代码视图下在和之间如下添加代码:

保存文件,预览文件效果。

实训过程注意事项

在创建站点的过程中注意建立本地文件夹,文件夹命名最好为英文;网站中所有的文件最好取名为英文;注意文件的路径;

所有的图片文件单独放在image文件夹内。

背景音乐必须放在站点文件内。

页面效果图

图1-1

实训2 文本操作

实训目的

为了让学生能熟练掌握在Dreamweaver中如何输入文本,调整设置文本的格式;如何插入特殊字符、文本列表、水平线、时间、注释的方法。

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材。

实训内容

输入文本:

调整文本:

插入特殊字符:

插入文本列表:

插入水平线:

插入时间:

插入注释:

设置文本格式:

实训要求

要求学生掌握在Dreamweaver中输入文本、设置文本格式、插入特殊字符、项目符号等操作。

实训步骤

打开上次实训所做的页面文件;

输入文本,调整文本的间距,设置文本的格式;通过“属性”面板中的“格式”和“颜色”等参数,将文字设为标题格式,并改变其颜色;

输入一段不带格式的文字,选择“常用”工具栏上的“文本”单选项目,利用换行按钮对文本进行换行处理,实现分段的效果;

插入特殊字符、项目符号、水平线、时间、注释等内容;

实训过程注意事项

在“编辑字体列表”对话框中选择要添加的字体要一个个地添加进去,不能全部选取再添加;

当输入文本时要插入多个连续的空格,必须要“编辑”菜单下的“首选参数”中设置;

换行的几种方式:自行换行;按ENTER强行换行;按SHIFT+ENTER换行操作;

页面效果图

图1-2

实训3 图像操作

实训目的

为了让学生熟练掌握在Dreamweaver中插入图像,学会设置图像属性;如何插入鼠标经过图像、插入图像占位符的方法,掌握图文混排的技巧等操作。

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材。

实训内容

插入图像:

设置图像属性:

插入鼠标经过图像:

插入图像占位符:

图文混排操作:

实训要求

要求学生掌握在Dreamweaver中如何插入图像、设置图像的格式;如何插入鼠标经过图像、图像占位符;掌握图文混排等操作。

实训步骤

打开上次实训所做的页面文件;

插入图像,在属性面板对图像的格式进行设置;

插入鼠标经过图像、图像占位符;

将图片和文字进行混合排版;

实训过程注意事项

插入的图像必须放在站点文件夹下的image文件夹内;

设置图片的热点区域可选任意的工具;

图1-3

实训4 表格布局

实训目的

为了让学生熟练掌握在Dreamweaver中插入表格,学会设置表格的各项属性;并掌握如何在表格中插入文本、插入图像的操作方法和步骤。

素材准备

准备制作网页所需的文字素材、图像素材、音乐素材。

实训内容

插入表格,并选择表格和单元格:

设置单元格属性:

调整表格结构、大小:

格式化表格:

表格中插入文本,表格中插入图像:

实训要求

要求学生掌握在Dreamweaver如何插入表格、设置表格和单元格的格式;如何调整表格的结构大小;掌握表格中如何插入文字及图像等操作。

实训步骤

新建一个页面,在页面中插入一个6行7列的表格,并在其中输入相应的文字;

选择表格利用“格式化表格”命令来对表格格式进行修改,使其更美观;

根据要求对部分单元格进行拆分或合并操作;

设置文字的对齐方式,通过对边框、填充和间距进行设置;

实训过程注意事项

插入表格时要注意:单元格的边距和单元格的间距值的设置;

表格边框线精细为0像素的特殊用途;

插入的图像必须放在站点文件夹下的image文件夹内;

实训思考

如何折分和合并单元格?

如何设置表格的背景?

书写实训报告要求

根据调试结果,写出调试分析报告

写出本次实训的心得与体会

页面效果图

图1-4

如下图所示的表格布局

图1-5

实训5 框架网页

实训目的

为了让学生掌握如何创建框架;设定框架的内容和样式;学会制作浮动的框架等操作。素材准备

准备制作网页所需的文字素材、图像素材、音乐素材。

相关文档
最新文档