实验25 网页的制作实验目的熟练掌握网页页面的基本设计手段实验要求 1. 熟练掌握页面
属性设置 2. 熟练掌握使用
表格布局手段布局网页、表格及单元格的属性设置 3. 熟练掌握图片、flash文件的插入和设置 4. 熟练掌握超链接的设置 5. 掌握滚动字幕等Web组件的使用及水平线的使用 6. 掌握列表项的样式设置实验内容及基本步骤 1. 设计出网页样式使用图像设计软件或手绘出网页的样式,本实验完成后首页如图25-1所示。 图25 - 1 页面完成图 2. 设置页面属性 1) 双击“文件夹列表”视图中的文件“index.htm”,打开首页。 2) 选择菜单【格式】→【属性】,d出网页属性对话框,选择“高级”标签,将“上边距”、“左边距”、“下边距”、“右边距”设置为0像素。如图25-2所示。 图25 - 2 网页属性设置 3) 选择菜单【格式】→【主题】,在窗口右边的“主题”栏目中选择“丝绸”主题。 3. 表格和单元格的属性设置 1) 选择菜单【表格(A)】→【插入表格】,d出插入表格对话框,插入1行2列的表格,具体属性见表格25-1,如图25-3所示。设置好后,页面上有一个表格虚框。这是页面头部表格。表格 25-1 页面头部表格属性表属性名称 参数 属性名称 参数行数 1 列数 2 对齐方式 居中 指定宽度 960像素单元格衬距 0 单元格间距 0 边框粗细 0 背景 自动 图25 – 3 表格属性对话框 2) 将光标放在页面头部表格的第一个单元格内,选择菜单【表格(A)】→【表格属性】→【单元格(E)】,设置单元格宽度为208像素。 3) 同样地,将光标放在第二个单元格内,设置单元格宽度752像素,高度85像素,并使用背景图片images/banner.jpg,如图25-4所示。 图25 - 4 单元格属性对话框 4. 插入图片并设置超链接 1) 将光标停在页面头部表格的第一个单元格内,选择菜单【插入】→【图片】→【来自文件…】,选择“images”文件夹下的“logo.jpg”,表格的第一个单元格内就插入了一张图片。 2) 在页面上选定要设置超链接的图片Logo,选择菜单【插入】→【超链接】,设置链接地址为:index.htm,点击【屏幕提示】按钮,设置超链接的屏幕提示为“红酒品鉴”,点击【目标框架】按钮,设置目标框架为“新建窗口”。如图25-5所示。 图25 – 5 超链接属性设置 3) 保存文件,选择菜单【文件】→【在浏览器中预览】,或直接按【F12】在浏览器中预览,并更改链接的目标框架,观察目标框架不同时打开窗口方式的区别。 5. 插入flash元素 1) 将光标放在页面头部表格的第二个单元格内,选择菜单【插入】→【图片】→【Flash影片】。将文件2.swf插入。 2) 右击插入的Flash,选择快捷菜单【Flash影片属性(F)…】,设置其背景色透明,指定其大小为宽度752像素,高度85像素(注意:如果要同时更改宽度和高度,必须去掉保持纵横比复选框前面的勾)。如图25-6所示。 图25 – 6 flash影片属性对话框 3) 保存文件并点击 按钮预览。再点击 按钮,回到编辑状态。观察一下预览视图与在浏览器中预览的区别。 6. 页面导航栏设计 1) 依步骤2,在页面头部表格的下方,插入一个1行6列表格,表格属性见表格25-2,这是导航表格。表格 25-2 导航表格属性属性名称 参数 属性名称 参数行数 1 列数 6 对齐方式 居中 指定宽度 960像素单元格衬距 0 单元格间距 0 边框粗细 0 背景 自动 2) 从左侧“文件夹列表”窗口中选择index.htm,按住左键不放,将其拖到网页中导航表格的第一单元格中,导航表格中显示的导航名称是实验24中导航视图中修改的名称。依次拖动其它五个文件到导航表格中相应的单元格内。如图25-7所示。 图25 – 7 导航栏设计 7. 页面滚动字幕设计 1) 将光标放在导航表格下方,选择菜单【插入】→【Web组件…】,打开插入Web组件对话框,组件类型选择“动态效果”,选择一种效果“字幕”,如图25-8步骤1、2所示。 图25 – 8 滚动字幕的设置 2) 字幕属性对话框中,设置文本为“弘扬红酒文化,传播红酒新闻”,可以设置流动的方向,滚动的速度等,点击样式按钮还可以设置滚动文本的文字属性。如图25-8步骤3所示。 3) 保存后按【F12】观察效果。 8. 主要内容部分设计 1) 在滚动字幕下方,插入一个2行3列的表格,这是主要内容表格,具体属性见表格25-3。表格 25-3 主要内容表格属性属性名称 参数 属性名称 参数行数 2 列数 3 对齐方式 居中 指定宽度 940像素单元格衬距 5 单元格间距 0 边框粗细 0 背景 自动 2) 右击主要内容表格的第一行第一列单元格(以下用[行号,列号]方式表示),设置[1,1]单元格宽度460像素,高度28像素,背景色为#FF9E00,并输入文字:“天天品酒会”。如图25-9所示。 图25 – 9 单元格及背景色设置 3) 单元格[1,2]设置宽度为5像素,其它用默认值。 4) 单元格[1,3]设置属性同单元格[1,1]。并输入文字:“红酒文摘”。 9. 项目列表的使用 1) 设置主要见容表格的单元格[2,1] 背景色为白色,然后在其中插入一个1行2列的表格,只将边框设置为0,其余用默认,这是列表1表格。 2) 在列表1表格的单元格[1,1]中插入图片images/redwine.jpg 3) 列表1表格单元格[1,2]中,先点击工具栏上的项目符号图标 ,文字从文件夹“images”下的“文本.txt”中复制“天天品酒会”部分(注意要一行行地复制,粘贴好一行就按回车)。然后在文字中任意位置右击,选择【列表属性】,选择【样式按钮】,在“修改样式对话框中”,选择【格式】按钮,修改文字颜色为“黑色”,段落的行距大小设置为“1.5倍行距”。也可以直接将所有列表文字选中后,选择菜单【格式】→【字体】设置文本颜色为“黑色”,选择菜单【格式】→【段落】,设置行距大小为“1.5倍行距”。 4) 在“列表属性对话框中”选择“图片项目符号”标签,选择【浏览】按钮,可以将默认的项目符号图片改为指定的图片。 5) 按上述步骤完成设置主要内容表格单元格[2,3]的设置,插入“红酒文摘”部分的列表。 10. 水平线的使用 1) 主要内容表格下方插入一条水平线。选择菜单【插入】→【水平线】,设置水平线高度为1像素,居中,颜色为白色,选择“实线(无阴影)”。如图25-10所示。 图25 – 10 水平线属性对话框 2) 水平线下输入文字:Copyright? 自己的姓名学号,设置文字居中。 11. 保存文件并用浏览器预览。.
一、打开word选择“页面布局”,如下图:
二、点击“页面设置”,如下图:
三、在d出的页面中依次调整页面的上边距、下边距、左边距和右边距,如下图:
四、点击“确定”,页边距便设置好了,如下图:
设置步骤如下:
1.首先打开word文档,如图所示;
2.单击菜单上的"页面布局"选项;
3.选择"页边距";
4.在d出的菜单中可以选择自己需要的页边距;
5.也可以自己设置页边距,就选择最下方的“自定义边距”;
6.然后根据需要设置自己想要的页边距;
7.设置对开页的页边距时,可以选择”镜像“;
8.如果想更改对称页边距的宽度,可以再单击“页边距”库底部的“自定义边距”。在“内部”和“外部”框中输入新值;
9.如图为将页边距变窄之后的效果。
评论列表(0条)