网页制作与规划实训报告.docx
《网页制作与规划实训报告.docx》由会员分享，可在线阅读，更多相关《网页制作与规划实训报告.docx（23页珍藏版）》请在冰点文库上搜索。
网页制作与规划实训报告
实训报告
实训名称：
网页制作与规划实训
学院：
计算机学院
专业、班级：
计科一班
学号：
201140410119
学生姓名：
陈建辉
指导教师：
李辉燕
2013年12月28日
实训报告内容
一、实训名称
网页制作与规划实训
二、实训时间
第16-17周
三、实训地点
K4-508
四、实训目的
1.了解组成网页的基本元素
2.掌握文本元素的添加和编辑方法
3.掌握图像元素的添加和运用技巧
4.掌握几种链接的具体创建方法
5.掌握图像元素的添加和运用技巧
6.掌握表格的基本用法
7.掌握表格布局页面的方法
8.学会用框架布局页面的方法
9.了解框架布局的特点
10．掌握在Fireworks中创建动画的方法
11．掌握在Fireworks中制作蒙版的创建方法
12．掌握基本动画补间操作
13.掌握层的正确定位方法
14.学会利用层来制作弹出式菜单
15.了解时间轴的编辑特点和方法
16．学会定义和应用CSS样式
五、实训内容
5.1站点的创建与基本HTML标记的应用
1.建立站点
在c盘或其他盘新建一个文件夹作为站点文件夹，文件夹名称为myweb。
复制给定的一个图像文件夹images和一个网页文件sx3-2.htm。
2.在网页中编辑页面元素
（1）修改页面属性设置背景颜色为#CCCCCC。
输入网页首行文本“老邮票知多少”，大小为48像素，颜色为#FFFF00，字体为“华文行楷”粗体，居中对齐。
（2）在第二行插入更新日期和版权信息，选择“插入”l“日期”菜单命令，将当前编辑日期插入网页，然后选择插入文本中的空格按钮，再输入版权信息“◎版权所有：
D．Wei@sohu．com”设置文字大小和颜色各为18和#000000，字体为默认字体，粗体，居中对齐。
在第三行插入一条水平线，高度为5。
（3）在第四行插入文本，内容为“纪33（C33）：
中国古代科学家、1955．8．25发行600万套、全套4枚、新票市场参考价￥550元。
”第七行插入文本“纪36（C36）：
中国工农红军胜利完成二万五千里长征二十周年、1955．12．30发行600万套、全套2枚、新票市场参考价￥850元。
”文字大小为18像素，格式为“项目列表”，其他属性取默认值。
（4）在网页第五行插入四张邮票图像，每张图像的宽为110、高为150，其他属性取默认值。
然后在网页第六行插入一条水平线，宽为400像素，其他属性取默认值。
（5）在网页第八行插入两张邮票图像，图像宽高分别为150／110和110／150，其他属性取默认值。
如下图1-1所示
图1-1
（6）打开并编辑给定的网页文件sx3．2．htm，如图1-2所示。
图1-2
（7）建立图像热点链接。
为此选中网页上方图像，利用“属性”检查器中的热点工具在图像上建立两个热点，如图1-3所示。
从左到右两个热点分别链接到sx3-2-1．htm和sx3-2-2．htm文件。
图1-3
（8）插入命名锚记。
为此将光标放在网页标题“教育天地”旁边，选择插入命名锚命令，在输入对话框中输入锚记A0。
依次在网页右侧文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”处分别插入命名锚记，依次为A1～A7。
如图1-4所示
图1-4
（9）创建锚点和邮件链接。
在左列目录文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”与右列命名锚记A1～A7的锚点链接。
然后再将各段下方的文本“返回”与标题处锚记A0建立锚点链接。
选中网页最后一行文本“联系”，然后在“属性”检查器的链接栏中输入“mailto：
abc@163．com'’即可。
如图1-5所示。
图1-5
3.HTML基本标记的应用
（1）建立一个文件夹保存素材和文件。
（2）建立一个HTML页面，页面标题为“基本标记测试”；页面内的所有标题文字均为标题2格式；单击链接文字时要求在新的浏览器窗口中，打开test.html页面自身；插入图片1.gif，文件位置和test.html相同。
如图1-6
图1-6
（3）建立名称为login．htm的HTMI页面。
页面有以下要求：
页面标题为“表单标记测试”；
“姓名”为单行文本框，宽10个字符，最多能填写20个字符；
“性别”为单选按钮，传递的值为“男”和“女”，第一个按钮为默认选中；
“职业”为下拉列表框，内容有“教师”、“工人”和“职员”；
“爱好”为复选按钮，传递的值分别对应为1，2，3，4，第一个按钮为默认选中；
“留言”为多行文本框，大小为5行40列，默认内容为“说几句吧!
”；
“提交”按钮和“重置”按钮分别完成提交表单功能和重置表单功能，表单提交方式为get；
页面上的所有文字默认为3号字。
如图1-7所示
图1-7
5.2表格、表单和框架的应用
1.建立站点
2.利用表格编辑首页
（1）在默认打开的网页中，选择“修改”‘‘页面属性”菜单命令，设置背景颜色为#clclcl。
（2）在网页中插入一个2行2列的表格，参数设置如图5-21所示。
选中表格，在“属性”检查器的表格“高”输入框中输入100，单位为“％”。
将第一行两个单元格合并为一个，如图2-1所示。
图2-1
（3）利用“属性”检查器调整3个单元格的宽度和高度。
第一行单元格，“高”110，“宽”不输入；第二行第一个单元格“宽”250，“高”不输入；第二行第二个单元格“宽”450，“高”不输入。
效果如图2-2所示。
图2-2
（4）在第一行单元格中输入“饮食本草”，文字大小80像素，字体“华文彩云”，前两个字白色，后两个字颜色为#009900。
在文字下方插入一条水平线，属性取默认值。
（5）在第二行第一个单元格内插入一嵌套表格，表格相关属性分别为8行1列、表格高度和宽度均为100％、边框粗细为0、单元格边框为0、单元格间距为0。
在第二行第一个单元格内插入一嵌套表格，表格相关属性分别为8行1列、表格高度和宽度均为100％、边框粗细为0、单元格边框为0、单元格间距为0。
在左侧嵌套表格各行中分别输入图2-3所示内容，然后将8个单元格的高度均设置为50。
文字大小为36，字体为“华文新魏”，然后将每行文字均创建无址链接。
图2-3图2-4
（6）在中侧嵌套表格中分别插入5张文件夹images中的图片，每张图片的宽度和高度均为150，注意：
当图片尺寸变小后，表格不会自动缩小，这时可以选中整个表格，在“属性”检查器中单击“清除行高”和“清除列宽”两个按钮来调整表格大小。
如图2-4
（7）保存并在网页上浏览。
效果如图2-5
图2-5
5.3网页图像和动画的设计与应用
1．风吹树叶
（1）新建Flash文件。
（2）修改背景颜色为“蓝色”。
（3）点击图标创建文字“风吹效果”四个字，点击箭头图标然后选中文字并按【Ctrl】+【B】一次，将四个字分解为个体。
如3-1所示。
图3-1
（4）再次用工具
，选中“风”字然后选择“修改”|转换为元件”菜单命令。
在弹出转换为符号"对话框中，将元件名称改为“风”，如图3-2所示。
重复操作，将剩下的三个字依次做成图形元件。
图3-2
（5）选中所有的文字，然后鼠标右击，在弹出的上下文菜单中选择“分散到各层”，于是个字将分别处于四个不同的图层。
这样做是为了动画渐变能够正确的执行。
如果分散到各层后文字没有对齐，则可用“对齐面板”，将各层的文字重新排列好。
如图3-3
图3-3
（6）用Ctrl+鼠标左键选中所有图层在时间轴中第15帧处右键鼠标选择“添加关键帧”。
如图3-4所示
图3-4
（7）将四个字全部选中，使用鼠标向上移动一段距离，选择“修改”“变形”“水平翻转”菜单命令，将四个字水平翻转一下，然后调整字体的位置，用“对齐’’面板排列字体，如图3-5。
图3-5
（8）选中所有元件，在属性检查器中将颜色“Alpha”值设为“O”，如图3-6所示。
图3-6
（9）在“吹”、“效”、“果”三个元件所在层的第1帧处创建动画补间按住【Ctrl】键，选择第二层的第2帧到最后一帧。
按住鼠标左键不放，将位置向后拖放一段距离依次将‘‘效”、“果”两个元件所在层的位置分别后移，如图3-7所示。
图3-7
2．球的跳动。
（1）建立一个文件夹，将素材和文件保存在该文件夹中。
（2）打开Flash，在“开始页”中选择“新建Flash文件”，以新建一个空白文件。
背景色为“白色’’。
选择“文件”“导入”“导入到库”菜单命令制作好的其“球”元件导入到库，如图3-8所示。
（3）选择“修改”|“转换为元件”菜单命令，将图片转换为“图形”元件，并命名为“球”。
3-8所示。
图3-8
（4）动作补间的设置,将元件“球”拖放到场景1的图层1中。
在图层1的第60帧处插入关键帧，如图3-9所示。
在第1帧处添加‘‘动画补间效果”。
图3-9
（5）在第1帧处处的“属性”检查器中，单击“缓动”旁边的“编辑”按钮，设置动作的“缓入缓出”效果。
设置效果如图3-10所示。
在“自定义缓入／缓出”对话框定义各个帧处的动画补间速度和方向。
图3-10
图3-11
（6）在图层2第1帧处设置元件“阴影”的A1pha透明度为20％。
图3-11
（7）在图层2第1帧处设置补间动作，如图3-13所示。
图3-12
（8）打开图层1第一帧“属性”，检查器的“自定义缓入／缓出”面板，按键Ctrl+c复制缓动效果。
打开图层2第一帧处的“自定义缓入／缓出”面板，按Ctrl+V组合键，将其粘贴到阴影动画补间中。
效果如图3-14所示。
图3-13
5.4层叠样式与层的应用
1.利用层制作弹出菜单
（l）在c盘或其他盘新建一个文件夹，作为站点文件夹。
将给定的素材文件存入其中。
（2）建立本地站点,启动Dreamweaver·8，用已学方法建立本地站点。
（3）利用图层制作下拉弹出菜单
（4）新建一个空白页面，选择“修改”I“页面属性”菜单命令，设置页面的背景颜色为#FFCC99，左边距为0，上边距为0。
（5）在文档第一行插入一行文字“电子信息职业技术学院”作为站点标题，字体为华文行楷，大小为48号字，颜色为#FF9933。
（6）在标题的下一行插入一个l行5列的表格，表格宽度800像素，边框粗细为l，高度30，平均分配各列（每列宽度为160像素），表格背景颜色为#9999FF。
（7）在表格的各列分别写入“首页”、“学院概况”、“师资建设”、“系部设置”、“招生就业”，各单元格文字对齐方式为居中对齐，文字为粗体显示。
如图4-1所示。
图4-1
（8）在“学院概况”列中添加一个图层，命名为“Layerl”，注意不可见元素“层锚记”
应在此列当中。
如果不在，可用鼠标将其拖到此列中。
然后在图层中添加一个3行l列的表格，表格宽度为160像素，各行高度为30像素，边框粗细为1，单元格文字为居中对齐，表格背景颜色为#9999FF，文字为粗体。
三个单元格内容为“学院简介”、“办学思想”、“校园风景”，如图4-2所示。
图4-2
（9）同样在其他几列中也分别添加图层，各自命名为Layer2，Layer3，Layer4。
其中Layer2中插入3行1列的表格，表格属性与Layer1中的相同，内容为“队伍建设、名师风采、优秀教师”；L,ayer3中插入5行l列的表格，表格属性与Layer1中的相同，内容为“机电技术系、电子技术系、计算机应用系、计算机网络系、计算机软件系”；Layer4中插入2行1列的表格，表格属性与Layer1中的相同，内容为“招生信息、就业信息”。
如图4-3所示。
图4-3
（10）在“学院概况”列中添加一个图层，命名为“Layerl”，注意不可见元素“层锚记”
应在此列当中。
如果不在，可用鼠标将其拖到此列中。
然后在图层中添加一个3行l列的表格，表格宽度为160像素，各行高度为30像素，边框粗细为1，单元格文字为居中对齐，表格背景颜色为#9999F’F，文字为粗体显示。
三个单元格内容为“学院简介”、“办学思想”、“校园风景”。
同样在其他几列中也分别添加图层，各自命名为“Layer2”，“Layer3”，“Layer4”。
其中Layer2中插入3行1列的表格，表格属性与Layerl中的相同，内容为“队伍建设、名师风采、优秀教师”；L,ayer3中插入5行l列的表格，表格属性与Layerl中的相同，内容为“机电技术系、电子技术系、计算机应用系、计算机网络系、计算机软件系”；Layer4中插入2行1列的表格，表格属性与Layerl中的相同，内容为“招生信息、就业信息”。
调整各层的位置。
注意：
层的调整非常重要，不同的浏览器窗口大小，不同的分辨率，层的位置显示都不是一样。
即使在同一个机器上调整浏览器的窗口大小，都会出现位置的变动。
Dreamweaver中并不是所见即所得，需要我们来精确定位才会达到满意的效罘。
为此，首先固定表格的宽度，本例中将表格固定为宽度800，高度30。
然后固定层的位置，这个位置需要计算一下，计算公式并不是很难。
本例中表格总宽度为800，共有5列，这样每列的横坐标起始位置的计算公式为：
800÷5*（当前列一1）。
对于“Layerl”，当前列为2，所以结果为160。
最后加上一个将要创建的层与原表格列偏移值，那么计算各列下属的层的横坐标公式变为：
800--5x（当前列-1）+偏移量
这个偏移量需要通过大家试验来最终确定，因为不同的字体和宽度这个值是不同的。
这里测试满意的效果是-1，所示Layer1的实际工资起始横坐标为159据这个公式将各个层的位置设定好，最好不要用鼠标禾移功定位。
要使用“属性”检查器来设置。
打开“层，，面板，将Layerl～Layer4都设置为隐藏状态。
在窗口左下方选中第2列“学院概况”所在单元格的标签选择器
，在“行为”面板中为其添加“显示一隐藏层’’行为，将“Layerl”设定为“显示”。 更改行为的触发事件为“onMouseOver”。 再次选中第二列的标签选择器 | ，在“行为”面板中为其添加“显示一隐藏层”行为，设定图层Layer1为“隐藏”，并更改此行为的触发事件为“onlMoluseOut”。 重复步骤9～1l，为第三列、第四列、第五列添加显示 图4-4 （12）再次选中第二列的标签选择器 | ，在‘‘行为’’面板中为其添加“显示一隐藏层”行为，设定图层Layerl为‘‘隐藏”，并更改此行为的触发事件为“onlMoluseOut”。 （13）重复步骤11～12，为第三列、第四列、第五列添加显示与隐藏图层的行为。 （14）保存与预览,保存文件为Index．html，然后按IFl2]键进行预览。 当移动鼠标到菜单时，将显示当前菜单项所属的子菜单内容，当鼠标离开显示的子菜单时，子菜单隐藏，返回初始状态。 最终效果如图4-5所示。 图4-5 2．时间轴 （1）建立本地站点。 （2）利用时间轴使层做直线运动打开给定的网页文件，在网页上插入一个层"Layerl",并将其位置调整好，然后在其中插入给定的图片,图片大小为64×64。 如图4-6所示. 图4-6 （3）打开“时间轴”面板，把图层Layerl拖到“时间轴’’面板上，单击最后一帧关键帧，并将其拖到第100帧的位置。 再单击图层Layerl，将Layerl水平拖动到页面的右侧。 如图4-7所示。 图4-7 （4）选中“时间轴”面板上的“自动播放”和“循环”选项。 （5）将文件保存，并在浏览器中预览，即可看到小猪从页面左侧运动到 右侧，并循环播放 （6）利用时间轴使层做轨迹运动。 打开刚才保存的sxl7-1-3．htm文档，再插入一个图层Layer2，并将给定的图片img2．Gif插入其中，设置图片和层的大小均为100*100。 右击“时间轴”面板的动画通道，在弹出的快捷菜单中选择“添加时间轴”命令，新添加的时间轴为“Timeline2”。 选中页面中的图层Layer2，并单击右键，在弹出的快捷菜单中选择“记录路径”命令，紧接着用鼠标拖动层左上角的标记在页面上移动绘制路径，释放鼠标，在页面上出现了一条灰色的路径。 同时，时间轴上也出现了一个有多个关键帧的动画条。 选中“时间轴”面板上的“自动播放”和“循环”选项。 利用时间轴使层做轨迹运动。 打开刚才保存的sxl7-1-3．htm文档，再插入一个图层Layer2，并将给定的图片img2．Gif插入其中，设置图片和层的大小均为100*100。 右击“时间轴”面板的动画通道，在弹出的快捷菜单中选择“添加时间轴”命令，新添加的时间轴为“Timeline2”。 选中页面中的图层Layer2，并单击右键，在弹出的快捷菜单中选择“记录路径”命令，紧接着用鼠标拖动层左上角的标记在页面上移动绘制路径，释放鼠标，在页面上出现了一条灰色的路径。 同时，时间轴上也出现了一个有多个关键帧的动画条。 选中“时间轴”面板上的“自动播放”和“循环”选项.保存文件，并在浏览器中预览，即可看到小猪从页面左侧运动到右侧的同时，另一小猪在页面上按绘制的轨迹进行 图4-8 3.利用CSS样式改变页面风格 （1）建立本地站点 （2）自定义样式的定义及应用 （3）打开站点中给定的文档。 选择“窗口”“样式”菜单命令，将“CSS样式”面板打开。 进行相关设置。 （4）单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框。 在选择器类型处选择“类（可应用于任何标签）”，名称处输入“ysl”，定义在处选择“仅对该文档”。 单击“确定”按钮。 （5）在弹出的“ysl的CSS样式定义”对话框中，进行样式定义（类型： 字体为隶书，大小为36像素，颜色为#0033FF；区块： 文字对齐为居中）。 如图4-8 图4-8 （6）用同样的方法定义样式“ys2”（类型： 字体为华文新魏，大小为24像素；区块： 文字对齐为居中）。 用同样的方法定义样式“ys3”（类型： 字体为隶书，大小为36像素，粗细为粗体，#00CC33；区块： 文字对齐为居中）。 （7）下面开始应用已定义的样式。 选中第一行标题“唐诗欣赏”，单击右键，选择“CSS样式ysl”（或者用前面介绍的其他方法来应用ysl），这时标题已变成所定义的样式了。 用同样的方法，将每首诗的诗文内容应用“ys2”，将每首诗的标题段落应用“ys3”。 效果如图4-9所示。 图4-9 （8）修改页面的背景风格。 首先为页面设置背景图像（站点中images文件夹中的bj．jpg文件），效果如图4-10所示。 由于选择的背景图像的尺寸不够大，在页面中图像会以不断重复的形式铺满整个页面，视觉效果不够理想。 图4-10 （9）选择文档窗口左下方的标签选择器<．body>，然后单击右键，从下拉列表中选择“设置类，ys4”，文档应用样式ys4后的效果如图4-11所示。 当预览时会发现背景图像居中并不再重复，且当用鼠标滚动游览文字时，背景图像保持静止，而不随文字的滚动而滚动。 图4-11 六、实训小结 这两周实训的主要内容是运用这学期所学的三个制作网页的软件的一些知识来制作一个网站。 网站名称、内容自己选择。 这是第二次这样系统地做网站，自己布局，自己做材料。 从中学到不少的东西，同时在做网页的过程中，也掌握了一些常用的技巧。 整体来看,所做的这个网站所用到的一些东西都是非常简单的，基本上是在Dreamweaver的设计里面做的，没写什么代码，所以很多效果也就没有。 在做网页的时候，要严格按照一定的思路，模板是少不了的，模板在以后维护测试的时候就可以很好很快地修改。 网页中一些固定不变的文字描述最好是把它做成图片，以后在修改的时候就只需要修改图片就能全部应用，还有就是不管在哪台电脑上都可以看得到这种不变的字体，要是直接写的，在别的没装这个字体的机器上就显示不出来。 经过这次的实训，我学到了很多，做网站首先准备工作要做好，资料的搜集，站点建设，站点建设很重要，把站点规划好，做网页的时候就可以节省很多的时间。 还有DWEAMWEAVER软件一定要熟悉运用。 不仅巩固了书本上的知识，同时还学到了许多书本上学不到的知识，对各个知识方面的操作熟练了许多，但是在CSS样式和层方面还有些不怎么熟练。 而且在这次实训中我遇到了几个问题就是在首页中放了几个层、轮替图象和时间轴，需进一步加强flash的知识，但是都在浏览的时候都无法看到效果，到底和浏览器有问题还是其他什么原因，还是一个问号。 随着社会进步，科技的发展，人们的要求也越来越高，商务网站的建设是随着这一发展而来的。 因此，电子商务网站建设在现实社会中将处于很重要的社会地位，其价值是不可估量的，所以自己要加强这方面的锻炼了。 虽然网站已经完成，可这并不是一件轻而易举的事情，在此过程中我遇到了许多以前不曾遇到的问题，多的情况都是自己解决，直到弄懂为止！ 让我更加清楚地明白老师平日里的良苦用心，也更加清楚地明白了自己以后应该怎样去做事。 总之，在本次实训当中，让我受益非浅，也了解到要真正做好一个网站，我们在各方面的知识还有待加强，而且更应该重视平时的动手操作能力，以及加强在网页三剑客等网站建设方面的探究与练习。
展开阅读全文
相关搜索
资源标签
|