注册 | 登录 | 网址 欢迎访问八百站长

【原创】网页制作实操考试复习题

2015/1/20 20:19:37 作者:站长日记 来源:http://www.800zz.com 浏览:2443次

摘要:网页制作《作品展示》考试教程 一、 建立站点和网页 二、 网页制作过程 三、 网页上传提交

网页《作品展示》制作教程

一、建立站点和网页:

1. 新建站点:站点→新建站点,切换到高级

站点名称:金融学校
本地根文件夹:
D:\jrxx
默认图像文件夹:
D:\jrxx\images

2. 新建网页xxx.html,网页标题为XXX作品展示(其中XXX为考生姓名,xxx为考生姓名拼音缩写,下同)

二、网页制作过程:

1. 作品展示布局外

(1) 插入DIV标签,设置IDzpzs
方法:插入→布局对象→DIV标签

(2) 添加CSS规则(#zpzs),设置三项样式:
宽width1000px、高height570px、边界margin左右(left/right)为自动auto

2. 作品展示布局内

(1) 插入DIV标签,设置zp
方法:插入→布局对象→DIV标签

(2) 添加CSS规则(#zpzs .zp),设置四项样式:
宽width320px、高height270px、边界margin左上(top/left)为10px、浮动左对齐(float:left)

3. 作品展示内容输

(1) 插入图像
插入→图像,从给定的图片素材中选择合适的图片(给定的图片素材展示在本页面下方,先选择需要的图片,保存到桌面素材文件夹,方法:右键→图片另存为
设置图像
300px、200px

(2) 输入文字
文字格式为“标题3”,文字内容规定为“XXX的展示作品之????”(其中XXX为考生姓名,????为作品名称,作品名称要与图像对应相关)

(3) 建立超级链接
选择文字,在属性面板链接栏输入链接地址,链接地址规定为形如“xxx1.html”(其中xxx为考生姓名拼音缩写,1为图像序号)

(4) 删除图像所在段落标签
点击图像,选择标签<img>前面的<p>标签,右键→删除标签

4. 作品展示样式设

(1) 图像样式设定
新建CSS规则(#zpzs .zp img),设置边界margin全部相同为10px

(2) 标题样式设定
新建CSS规则(#zpzs .zp h3),设置边界margin填充padding全部为0px,高度height为32px、行高line-height为32px,文本对齐为居中(text-align:center)

(3) 超级链接样式设定
新建CSS规则(#zpzs .zp a),设置大小font-size粗细font-weight颜色color(自定),修饰为无(text-decoration:none)(去下划线)

(4) 超级链接鼠标指向样式设定
新建CSS规则(#zpzs .zp a:hover),设置颜色color(自定,与上面不同)
(需要在a后面自己输入:hover,注意必须使用英文符号冒号)

5. 复制完成其余作品

(1) 选择方框<div.zp>复制(编辑→拷贝)

(2) 定位方框右侧(按键盘上的右箭头键→),粘贴(编辑→粘贴)

(3) 依次修改其余作品的图像、文字、超级链接

图像修改可双击图像,再选择合适图像,不允许重复,图像300px、200px
文字修改要注意规则,形如“XXX的展示作品????”
超级链接修改也要注意规则,形如“xxx2.html”、……、“xxx6.html”

6. 修改布局背景颜色

(1) 修改外框背景颜色
编辑CSS规则(#zpzs),设置背景颜色background-color为深色(自定)

(2) 修改内框背景颜色
编辑CSS规则(#zpzs .zp),设置背景颜色background-color为白色(#FFF)

三、网页上传提交:

1. 网页预览测试
网页制作完成后,按F12预览网页,检查效果;(注意要保存)
确定完成网页后,退出Dreamweaver;(完全关闭,不是最小化)
打开D:盘,进入jrxx文件夹,打开zpzs.html,再次检查效果;

2. 文件夹打包
打开D:盘,选择jrxx文件夹,鼠标右键→添加到“jrxx.rar

3. 文件上传
返回实操考试页面(若已关闭,请重新登录进入)
选择文件D:\jrxx.rar,
点击上传,等待上传成功

4. 确定交卷
点击确定交卷,完成实操考试


注:如果文件上传无法成功,请将文件jrxx.rar改成XXX.rar(其中XXX为考生姓名),然后提交到教师机。

下面是提供使用的图片素材,从中挑选六张,右键图片另存为,保存到桌面的素材文件夹中,以供使用。


W020130516612664087791.jpgW020130516632360151849.jpgW020130516634575310210.jpgW020130516636704209350.jpgW020130516639893530083.jpgW020130517365999952971.jpgW020130520378454932277.jpgW020130520390916064901.jpgW020130520395715081682.jpgW020130520401634508570.jpgW020130521306761342526.jpg