实验十一网页设计强化.docxVIP

实验十一 网页设计强化 【实验目的】 让学生掌握网页制作中表格属性的设置方法； 让学生掌握网页制作屮内外部样式的创建与使用方法； 让学生掌握网页制作中动画和一些特殊效果的属性设置方 法。 【实验设备】 PC、 Frontage 2003 【实验内容】 制作一个如下图所示网页，并按照要求将此文件保存名为 index2. htmlo 首页-＞时尚韩装 首页-＞时尚韩装 豔話藜鐸翳蠶震色：i蠶讎衢熬昶需年经钛 欢迎网上订购 要求： 1） 请新建一个普通网页，并插入一个4X1 （即4行1列）的表格。该 表格的属性为：宽600个像素，对齐方式为水平居中；边框粗细 为2个像素，颜色为#C0C0C0； 2） 请将素材包中的图片bg. gif文件插入到第一行屮，图片大小不做 变化。 3） 请将第二行的高度设置为20个像素，背景颜色设置为FFCC66,并 将第三行的高度设置为40个像素。 4） 在第三行屮输入相应的文字内容，每段文字都使用段落标记，并 通过css样式对其进行修饰。具体要求如下：首先建立一个名为 stylel. css的外部样式文件。要求该CSS样式文件必须指定以下 内容：样式选择符（器）的名称为stylel,字体为宋体，字体颜 色为SFFOOFF,字体大小为18磅，加粗；对齐方式为左对齐；单 字间距为3个像素。并将该外部CSS样式用于文字“首页-〉时尚韩 装”部分。 操作步骤提示： 第一步 外部样式文件的创建: 样式 样式⑤: 段落预览 a： active a：hover a：link a：visited a address body button ￡i eldse t hl h2 h3 h4 LU 上一仗萃 上一危萃 上一餃萃 上一紀萃 上一仗荔 上一 手 上一仗幸 上一倉零 上一倉手 上一竇專 上一竇 萃 上一菽茅 上一危荔 上一菽荔 三三论盖二农茅三三吃25芸浓尊三三冷卞益壬茅三三 审/ME荔 三三嗨殳#三三憶欢訂彖#三三咳2t r 5?7三三诫兰「5?茅 字符预览 微软卓越AaBbCc 列表?: HTML标记 . 明需击 a- 4wfn- 按辺，为当前选取的KTML标记创 按辺可创建一个新的自定义样式。 新建@)..? 修改龜）… 刪除@） 新样式 名称施择器）@）i stylel 样式类型0）： 子付 预览 说明 格式?苓 确定 确定 取消 取消 字依 宇体 字形Q)： 大小①： 宇体?)： 字符间距 颜色?： 效果 删除线⑩ 上戈戦(Q) 闪烁? 无文本效果Q0 小型大写字母如 全部大写@) 大写Qk) 微软卓越AaBbCc 取消 缩进和间距 正在修改的段落 正在修改的段落正在修改的段落正在 修改的段落正在修改的段落 正在修改的段落正在协改 的段落 正在怀改的段落 确定 取消 spam, style 1 { ￡oat-￡?nily： serif? color: ff^OOFF? Eont-size： 18pt; font-weight： bold. taxt~align la￡t; word-spacing： 3 } j] Microsoft FrontPage ? C:\Users\Administwtor\Desktop\stylel.css]Ml *newjac^.l. hto* ^styltl ? css▼/船 —▼二戈▼ j] Microsoft FrontPage ? C:\Users\Administwtor\Desktop\stylel.css] Ml * newjac^.l. hto* ^styltl ? css ▼/船 —▼二戈▼ f 2」⑥宇文简繁转^ 2 3 I文件(D ?w(E)倔凹赵①転? IM?孙(A) SS(D)傑(R) I * span, stylel { font-faiTiily： serif; color： FCOFF; font-size： 18pt; font-veight： bold; text*align： left; word-spacing： 3 } 第二部外部样式文件的使用: 1 文件(B 碍(i) ^S(V)播入① 梧式(Q) I IfiCD 5E?(A) SJ35(D)権架? 窗口回 ?ao(H) ；」*苑 J A = ? ? ?— — V a4 *(D??? 段潛(￡)??? 项目EQ扁沁??? 行为G0??? 兰I 口/町或 F山 妙丰文直希5換?自 ! X a JjjE 三章孚□▼少▼ A?匕 层(U??? 曲⑸??? 计算机 动杰 Web ? 5） 再创建一个嵌入式CSS样式,其样式选择符（器）的名称为style2, 字体为宋体，字体颜色为550000,字体大小为16磅；字符间距为 2个像素；对齐方式为两端对齐。并将该嵌入式CSS样式运用于段