静态网页设计实训教学项目指导书(共28页).doc

《静态网页设计实训教学项目指导书(共28页).doc》由会员分享，可在线阅读，更多相关《静态网页设计实训教学项目指导书(共28页).doc（28页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、精选优质文档-倾情为你奉上 静态网页设计实训教学项目指导书 三门峡职业技术学院信息工程系计算机教研室（实训室） 2013年 8月 30日目 录分项任务 任务 1：项目前期策划 任务 2：网站主页效果图设计制作 任务 3：模板效果图的设计与制作 任务 4：网站切片与导出 任务 5：网站动画的设计与制作 任务 6：网站后期的编辑 任务 7：HTML编辑静态页面 任务 8：网站 CSS样式表的设计专心-专注-专业任务解析：本项目属于名人名家个人站点，内容不是特别多，规模也并不大，功能相对比较简单，属于静态网站开发，这类静态页面通常的开发流程可以简化为：项目前期策划-效果图设计与模版页设计-网页的切片

2、-动画的制作-后期编辑-网站 HTML的编辑-CSS 样式表网页美化。当然与常规的企事业站点也有相似之处，经过对项目的分析，决定本项目进行分解为以下 8 个子项目来完成，如图 2-1 所示。 任务 1：项目前期策划任务提示： 项目的前期策划主要包括：需求分析，网站的风格定位，以及主页草图与模版页的草图的设计等。 2.1.1 网站需求分析 庄辉，号无名山人。1959 年 7 月生，籍江苏泗阳。现为中国书法家协会会员，国家高级美术师，江苏省 淮安书画院专职画师。 庄辉个人网站项目主要是通过网络媒体使书法家本人知名度进一步提高。 网站建设中主要包含个人简介、 国画作品、书法作品、联系方式等。 庄辉个

3、人网站在作品展示中主要展示国画作品与书法作品，其书法作品包括楷书作品、行书作品、草书 作品、篆书作品、扇面作品、行草作品等。网站需求模块示意图如图 2-2 所示。书法家庄辉个人网站需求模块个人简介书法作品国画作品联系方式2.1.2 网站风格定位 网站要能够反映出书法艺术的文化气息，在保证功能完善的基础上考虑形态。本项目以褐色为主色调反 映网站的特征，因为褐色具有表现原始、古老、古典的感觉，主页与模版的设计也可采用褐色为主色调。风 格定位策划方案如图 2-3 和 2-4 所示。2.2 任务 2：书法家庄辉个人网站主页效果图设计与制作 2.2.1 任务解析 任务提示：网站效果图的设计主要使在理解用

4、户的需求的基础上，通过技术手段（Photoshop 图像处理）来完成设计者的创意。2.2.2 任务实施 庄辉个人网站项目的设计制作根据计划，实现的简要步骤为： 1） 启动 Photoshop 软件， 然后执行 “文件” “新建” 命令， 创建 “书法家庄辉个人网站主页效果图.psd” 文件，宽度：984 像素，高度：600 像素，分辨率：72 像素/英寸，颜色模式：RGB 颜色，背景内容：白色。 2）在背景层中，从工具箱中选择“渐变工具” ，取前景色为深褐色（#b27516），背景色# 浅黄色# （#c9ac78） ，接着在选项栏中选取渐变填充（对称渐变 ），拖动鼠标后形成渐变的背景图像，如图

5、 2-24 中的背景。3）打开图片“书法 1.jpg” ，然后对齐执行“图像”“调整”“反相”命令（快捷键为） ，最后将其拖入效果图，设置层名为“书法” ，设置混合模式为：柔光，不透明度为 24%（图 2-23b 所示），采用同样的方法将“国画.jpg”进行类似的操作，调整图层的大小与位置后的效果如图 2-25 所示。4）打开图片“墨迹.jpg” ，使用魔术棒工具 ，选择白色区域，然后执行“选择”“反向”命令（快捷键），选取墨迹将其复制并粘贴到效果图中：打开图片“毛笔.jpg” ，同样的方法选取图中的毛笔图像， 同样将其复制并粘贴到效果图中， 调整好毛笔与墨迹的位置， 墨迹与毛笔图层合成的效果

6、如图2-26所示，将毛笔图层设置图层样式，设置投影效果增加立体感，具体参数是：不透明度：44%，角度：90，距离：8 像素，大小：2 像素，放入效果图中的效果如图 2-27 所示。5）打开图片“无名山人.jpg” ，使用魔术棒工具，选择黑色字体区域局部区域，例如选中“山”字，然后执行“选择”“选取相似”命令选中“无名山人作品集”的题字的黑色区域（如图 2-28 所示），复制黑色区域，粘贴到效果图中，最后将“无名山人作品集”文字图层执行“描边”图层样式（颜色：白色，大小：3 像素），效果如图 2-29 所示。6）打开图片“庄辉原图.jpg” ，由于照片曝光不足，所以照片的亮度不够，人物不够清晰，

7、执行“图像” “调整”“色阶”命令，在“色阶”对话框中调亮照片，然后使用“多边型套索工具”将照片中人物选取出来（如图 2-30 所示），复制并粘贴到的效果图中，调整人物的大小与位置，最后设置人物的图层样式：外发光效果（不透明度 50%，颜色：白色渐变为透明，扩展：14%，大小：21 像素），如图 2-31 所示。7）新建一个图层，选择“椭圆套索工具” ，设置工具属性（样式：固定大小，宽度：10 像素，高度10 像素），然后在新图层中选择四个选区并对齐填充为红色，分别给每个小红点设置外发光效果（与人物发光相似），最后添加“个人简介” 、 “书法作品” 、 “国画作品” 、 “联系方式”文字（方正

8、大黑简体，18 点，白色），并对文字添加描边效果，如图 2-32 所示。8）打开“落款.psd”与“印章.jpg”照片分别将它们拷贝到效果图中，并将其大小进行调整，整个效果图完成。2.3 任务 3：书法家庄辉个人网站模板效果图的设计与制作2.3.1 任务解析 任务提示 ：通过学习网页的色彩理论知识，掌握网页的配色原则，运用网页的配色方法与网页的布局理论知识来进行网页效果的设计。2.3.2 任务实施 书法家庄辉个人网站模板页效果图设计与制作根据初步的设计制作步骤如下： 1）启动 Photoshop 软件,新建 “书法家庄辉个人网站模板效果图.psd”文件，宽度和高度为 996 像素， 分辨率：7

9、2 像素/英寸，颜色模式：RGB 颜色，背景颜色填充为褐色（#6d4418）。 2）执行“视图”“标尺”命令显示标尺（快捷键），然后执行“视图”“新参考线”命令，在弹出“新建参考线”对话框中分别添加水平（65px，250px，896px）和垂直（160px）的四条参考线，如图 2-77 所示。3）打开图片“无名山人.tif”文件，执行“图像”“调整”“反相”命令（快捷键），使用 “移动工具” 将“无名山人.tif”图像拖至效果图中，执行“编辑”“自由变换”命令（快捷键）调整“无名山人作品集”大小和位置使其放在效果图的左上角。4）新建一个图层命名为“褐色背景” ，设置前景色为褐色（#c99011

10、），使用“矩形选框工具” 选择第 1 条和第 2 条水平参考线中的矩形区域，填充前景色，效果如图 2-78 所示。5）打开图片“夕阳.tif”文件，使用“移动工具”将“夕阳.tif”图像拖至效果图中，执行“编辑” “自由变换”命令（快捷键）调整“夕阳”图片大小和位置，调整图层“夕阳”在“褐色背景”图 层之上，把鼠标放在图层“夕阳”与图层“褐色背景”之间，鼠标会变成形状，然后点击鼠标左键完成图层的剪贴蒙版技术，效果如图 2-79b 所示。6）采用第 5 步的方法将“松树.jpg”执行同样的操作，如图 2-80 所示（松树在夕阳之上）。7）选择“松树”图层，设置该图层的混合模式为“变暗”模式，在图

11、层面板点击“添加图层蒙版”按钮 ，按键盘上的键恢复前景的黑色与背景的白色，使用画笔工具（采用柔角画笔，大小稍大些如 300px）设置蒙版效果，如图 2-81 中 a 和 b 所示，选择“夕阳”图层，在图层面板点击“添加图层蒙版”按钮 ，使用画笔工具设置蒙版效果，如图 2-81 中 c和 d所示，整个设置完成后的效果如图 2-81 中 e所示，f图为是设置完成后图层之间的关系。8）使用“横排文本工具” 输入“中国书法家协会会员” （字体：方正大黑简体，大小：36 点），同时对“中国书法家协会会员”图层设置描边效果（颜色为白色，粗细为 3 像素）。9）设置前景色为浅褐色（#edd15e），添加一个

12、新层并命名为“布局线” ，首先执行“选择”“全选”命令（快捷键）完成全部选择，然后执行“编辑”“描边”命令，用前景色进行描边，大小为 1 像素。使用“单行选框工具” ，按住键，参照参考线（图 2-77）依次选取横向的 3 条横向选区，调整使用“单列选框工具” ，仍然按住键，沿着纵向的辅助线继续选择单列选区，如图 2-83 所示，松开键，按键来填充选区，然后用橡皮（或其他方法也可以）删除纵向的 0-250 以及 896-996 之间的线段，如图 2-84 所示。10）在左侧导航区使用“横排文本工具” 输入“网站首页 个人简介 书法作品 国画作品 楷书作品 篆书作品 草书作品 行草作品 扇面作品

13、联系方式” （颜色：白色，字体：方正大黑简体，大小：14 点，在后期编辑一般采用宋体），调整位置后如图 2-85 所示。 11）新建一个图层，命名为“方框” ，然后使用“矩形选框工具” 选取一个宽 4 像素，高 4 像素的正方形选区（样式为：固定大小，宽 4 像素，高4 像素），然后填充为白色。调整方框图层的位置在“网站首页” 正前方，在图层面板，使用鼠标左键将方框拖至“新建图层”按钮即可完成一个方框的复制，共复制 9 个方框，将最后复制的方框放在“联系方式”正前方，按住选择“方框”到“方框 副本 9” ，在图层面板点击“连接图层”按钮完成图层“方框”到“方框 副本 9”的连接，使用使用“移动

14、工具” ，在属 性状态栏中点击“左对齐”按钮和“垂直居中分布”按钮后 10 个小方框就整齐的布局在导航文字的前方，如图 2-86 所示。12）新建一个图层，命名为“主标题” ，然后在效果图右侧使用“矩形选框工具” 选取一个宽 9 像素，高 35 像素的正方形选区（样式为：固定大小，宽 9像素，高 35 像素），然后填充为浅褐色（#edd15e），使用铅笔工具在小矩形下方划一条浅褐色（#edd15e）的横线，最后添加文本“草书作品” （与导航相同）。 13）打开图片“竹兰生意气.jpg”文件（如图 2-88，图像宽和高都为 440 像素），首先执行“选择”“全选” 命令 （快捷键） 完成全部选择

15、， 然后执行 “编辑” “描边” 命令， 将前景色设置为淡黄色 （#6d4418） ，位置设置为内部，大小为 2 像素。执行“图像”“画布大小” ，修改画布大小为宽和高都为 480 像素，完成后按键执行全选命令，然后执行“选择”“修改”“收缩”命令，收缩量为 2 像素，最后再次 执行“编辑”“描边”命令，位置设置为居中，大小为 1 像素，效果如图 2-89 所示。14）使用“移动工具”将修改后的“竹兰生意气.jpg”图像拖至效果图中，调整图像位置，最后添加文本“草书 蔡树农诗句 竹兰生意气” ，同时也在效果图的页脚处添加版权信息与联系方式文本，效果图完成如图 2-90 所示。2.4 任务 4：

16、书法家庄辉个人网站切片与导出2.4.1 主页效果图的导出 在 Photoshop CS4 中将网页效果图制作完成后，就可以将其切片保存为网页文档了。效果图的切片步骤如下。1）打开庄辉网站主页效果图，选择“切刀工具” ，然后将鼠标移动到效果图中，按住鼠标左键从“个人简介”的左上角拖动到右下角，释放鼠标左键即可完成一个简单的切片，如图 2-122 所示。 2）采用同样的方法，依次对“书法作品” 、 “国画作品” 、 “联系我们”进行切片，如图 2-123 所示。切图还可以执行“锁定切片”与“清除切片”命令，大家可自行练习。 3）切片导出的方法。 在确定完成切片后，即可将切片导出。切片导出的方法是：

17、执行“文件”“存储为 Web 和设备所用格式”命令，在打开的“存储为 Web 和设备所用格式”对话框中，可对导出的切片进行设置，以图 2-123 为例，切片导出对话框如图 2-124 所示，最后选择保存路径（例如桌面）点击“保存”按钮即可，如图 2-125 所示（保存名为 index，保存类型：HTML和 images）。这样效果图的切片与切片的导出就完成了，回到桌面即可看到桌面上多了一个“index.html”文件和“images”文件夹。用鼠标双击“index.html”文件即可浏览。2.4.2 模板页的导出 1）打开图的庄辉网站模板效果图，选择“切刀工具” ，然后将鼠标移动到效果图中，依

18、次切片如图2-126 所示。2）执行“文件”“存储为 Web 和设备所用格式”命令将切片保存为 index.html 即可。任务 5：书法家庄辉个人网站动画的设计5.1 任务解析 任务提示 网页导出后就需要根据切片设计网页中的swf动画，动画的制作方式通常使用 Flash 软件，也可以使用其它第三方软件，在此我们用第三方软件来制作 swf动画。5.2.3 项目计划与决策 书法家庄辉个人网站动画主要是以反映褐色国画效果图片为背景，制作“中国书法家协会会员” 、“国家高级美术师” ，“江苏省淮安书画院专职画师”三组文字动画。5.2.4 任务实施 书法家庄辉个人网站动画制作步骤如下。 1）执行“开始

19、”“新建”命令，在场景中创建一个电影，在属性栏“电影”属性面板中输入动画的宽为 996 像素，高为 185 像素，具体参数如图 2-128 所示。 2）执行“插入”“图像”命令，在“打开”对话框中选择素材文件夹中的“网站背景 1.jpg”后点击“打开”按钮，图片就插入到场景中了，设置电影的变形属性标签，将锚点设置为“左上” ，具体设置如图2-129 所示，图像插入的效果如图 2-130所示。3）点击工具栏中的 按钮（执行“插入”“文本”命令），在文本输入区中输入“中国书法家协会会员”文字，调整文字的位置（图 2-130 中右上部），设置文本的字体为“方正大黑简体” （也可以设置为“黑体” ），

20、字体大小为 36 点，颜色为黑色，为如图 2-131 所示。4）在场景中选中“中国书法家协会会员”文字对象，执行“插入”“效果”“核心效果”“变形”命令，然后浏览时间线如图 2-132 所示。5）在控制栏中点击 “播放” 按钮测试一下动画效果，发现文字动画变化太快，用鼠标左键放在图 2-132中的第 20 帧的位置拖至 50 帧的位置，再次测试动画，速度适中。6）当然大家可以给文本制作淡出的效果，用鼠标在“时间线”调板上的第 60 帧上点击右键执行“渐近” “淡出”命令，再次在控制栏中点击“播放”按钮测试一下动画效果，此时的时间线如图 2-134 所示。7）采用同样的方法分别输入“国家高级美术

21、师”和“江苏省淮安书画院专职画师”两组文本，然后做同样的设置，完成三组文字的动画效果。执行“文件”“导出”“swf”命令，即可弹出“导出为 swf”对话框，选择路径，输入文件名即可保存，动画预览。可以试下再次插入图像将“网站背景 2.jpg” 、 “网站背景3.jpg” 、 “网站背景 4.jpg” 、 “网站背景 5.jpg”。2.6 任务 6：书法家庄辉个人网站后期网页编辑任务提示： 效果图制作完成后将会导出成网页格式，同时也可以制作 swf动画或者 Gif 动画，最终这些素材将通过 Dreamweaver 软件进行整合形成最终的网站。2.6.1计划与决策 书法家庄辉个人介绍页面主要是在书

22、法家庄辉个人网站效果图切片后导出的图片的基础上实现新的网页编辑。遵循最初网站设计的思路，适当的做出调整。本页面的表格结构如图 2-147 所示。2.6.2 任务实施 书法家庄辉个人介绍页面网页编辑步骤如下： 1）新建一个文件夹，命名为“庄辉个人简介网页” ，然后打开文件夹，分别创建“flash” （存放动画）、“images” （存放网页基本图像文件）、 “pic” （存放作者的书法作品）3 个文件夹。然后将素材文件夹中的所需的素材分类存放到各自文件夹中。 2）启动 Dreamweaver 软件，执行 “文件”“新建”命令或按快捷键，弹出“新建文档”对话框。从“类别”列表中选择“基本页” ，然

23、后从右侧的列表中选择“HTML”再单击“创建”按钮创建一个新的 HTML网页， 执行 “文件”“另存为” 命令， 保存网页到 “庄辉个人简介网页” 文件夹中， 命名为 “grjj.html” 。 3) 按组合键调出“页面属性”对话框，设置“外观”为：字体大小 12pixels，文本颜色#FFFFFF，背景颜色#6d4418，上、下、左、右边距都为 0pixels。4）设置“页面属性”对话框中的“链接”分类，参数为：字体大小 12pixels，链接颜色#FFFFFF，变换图像链接时的颜色为浅黄色（#FFCC00），下划线样式设置为：仅在变换图像时显示下划线，详细如图 2-149所示。同时设置“标

24、题”分类，网页的标题为：庄辉个人简介页面，编码为简体中文 GB2312。5）执行“插入”“表格”命令，在弹出的“表格”对话框中，设置行数为 4，列数为 2，宽为 996 像素，边框粗细：0 像素，单元格边距 0 像素，单元格间距 1 像素，详细的参数也可以通过表格的参数设置来完成， 表格的背景色为#edd15e， 设置完成后选中所有单元格设置单元格的背景色为#6D4418 （网页的背景色）。6）使用鼠标选中第 1 行的两个单元格，然后执行“修改”“表格”“合并单元格”命令（也可以点击属性栏中的“合并单元格”按钮），将其合并，同样的方法合并第 2 行，第 4 行，合并后效果如图 2-151所示。

25、7）使用鼠标选择第 1 行的单元格，然后设置单元格高为：65 像素，选择“插入”工具栏中的“常用”分类，然后点击“图像”按钮，插入“images”文件夹中的“logo.gif”图片。8）使用鼠标选择第 2 行的单元格，设置单元格高为：185 像素，选择“插入”工具栏中的“常用”标签，点击“媒体：flash”按钮，插入“flash”文件夹中的“banner4.swf”动画。如图 2-153 所示。点击“属性” 栏中的“播放”按钮9）设置第 3 行的左侧单元格宽为 160 像素，右侧单元格为 833 像素（833+160+3=996 像素，总宽度等于水平显示的各个元素宽之和，要保证网页界面精细就要

26、减少误差），同时设置两个单元格的垂直对齐方式为：顶端，然后在左侧单元格中插入一个宽 120 像素，11 行，2 列，居中对齐，填充、间距、边框都为 0 像素的表格，详细参数如 2-155 所示。10）选中插入的 22 个单元格，点击“居中对齐”按钮设置单元格为居中对齐，然后选择左侧 11 个单元格，设置宽为 30 像素，选中右侧的 11 个单元格，设置宽为 90 像素。最后分别给左侧从第 2 行开始的 10个单元格中插入“dot.jpg”图片，分别在右侧的第 2 行开始的 10 个单元格中插入“网站首页” 、 “个人简介” 、“书法作品” 、 “国画作品” 、 “楷书作品” 、 “篆书作品”等

27、文本。插入后效果如图 2-156 所示。11）在右侧的表格中插入 1 个表格 6 行，2 列，宽为 95%，居中对齐。然后将表格第 1、2、3 行中的列合并，设置第 2 行高为 30 像素，在第 2 行中嵌套 1 个表格 1 行 3 列，居中对齐，填充、间距、边框都为 0 像素，3 列宽度分别为 1%，3%，96%，第 1 列的背景颜色为#FF3300，在第 3 列中输入“个人介绍” （颜色为：#FFFF00）。12）鼠标选中第 3 行，然后设置背景色为#FFFF00，插入“images”文件夹中的“space.gif”图片，最后设置行高为 1 像素，可以得到一条高为 1 像素的红线。13）鼠

28、标选中第 4 行的 2 个单元格，设置两个单元格的垂直对齐方式为：顶端 ，然后修改左侧的单元格宽为 360 像素，插入“grjj.jpg”图片左侧单元格中，打开“素材”文件夹中的“庄辉介绍.txt”文件，将其中的内容复制到第 4 行右侧的单元格中，对文本进行段落调整，如果觉得文本过于密集，可以利用键进行调整。 14）鼠标选中最后 1 行，设置单元格属性为高 100 像素，水平居中对齐，最后在表格中输入“版权所有：淮安书画院书法家庄辉” 、 “建议分辨率：800600 以上分辨率 IE4.0 以上版本浏览器” 、 “联系人:庄辉 电话:0517-”等文本，最后通过整体调整，按键盘上的键进行预览，

29、如图 2-159 所示。15）同样的方式制作“书法作品”的网页 sfzp.html，然后分别给两个页面的导航栏设置超级链接，个人简介链接 grjj.html，书法作品链接 sfzp.html。如图 2-160 所示。任务 7：HTML 编辑静态页面7.1 任务解析 任务提示 ：使用 Dreamweaver 编辑网页是网页设计的基本功，使用 HTML 语言编写静态页面是今后动态网页编程的基础，所以编写 HTML代码要掌握编写的方法、HTML的基本结构等相关知识。7.2 任务实施 任务 1：主页中添加背景音乐。 1）打开百度网站，搜索古典音乐 gsls.wmv，然后将下载的音乐文件存放到庄辉个人站

30、点的“sound”文件夹中。 2）继续在百度中搜索“网页背景音乐”关键字，然后可找到设置背景的代码，对于本项目来讲代码如下： 代码写在标签之间。 任务 2：编辑国画作品页面的 HTML代码。 1）新建网页文件 ghzp.html，编写框架代码（并设置背景图片和左边距与上边距为 0）： 欢迎访问庄辉个人网站！ 2）插入背景音乐高山流水（gsls.wmv）, 在标签之间插入以下代码： 3）编写整个网页的表格布局代码，编写 4 行 2 列的表格代码，然后将第 1、2、4 行的 2 个单元格合并， 代码如下：           4）在第 1 行的单元

31、格中插入“banner1.swf”动画，代码如下： 5）在第 2 行的单元格中插入执行“插入”“媒体”“Flash”命令，插入“banner1.swf”动画，代码进入“代码”视图自己浏览。 5）在第 3 行左侧的单元格中嵌套表格 11 行 2 列，宽120 像素，在此以前 3 行为例编写代码如下：     网站首页 个人简介 6）在第 2 行第 2 列的单元格中，嵌套子表格 6 行 1列，宽度 95%，具体的 HTML代码如下所示。           7）在子表格的第 2 行中继续嵌套一个表格 1 行 3 列，代码如下：

32、    国画作品 8）在嵌套的子表格中子表格的第 4 行中插入一张图片，代码如下： 然后确定平衡了吗？ 国画 芙蓉国里尽朝晖 9）版权信息栏目的设置。 版权所有：淮安书画院书法家庄辉 建议分辨率：800600 以上分辨率 IE4.0 以上版本浏览器 联系人:庄辉 电话:0517-任务 8：书法家庄辉个人网站 CSS 样式表的设计 8.1 任务解析 任务提示 使用 CSS 样式表文件的主要作用是来美化网页页面。普通手工制作的网页存在的问题有： （1）背景色单调，网页顶端有空隙。 （2）表格中的文字大小不合适，文字之间行间距太小。 （3）超级链接的样式太单调。8.4 任务实施

33、CSS 样式可以定义网页中的几乎所有对象，现在通过 CSS 样式表定义来美化“庄辉个人站点”的网页界 面，具体步骤如下： 1）在项目文件夹中创建新文件夹“style”，执行“文件”“基本页”“CSS”命令，新建一个 CSS 页面，将其保存到 style文件夹中，命名为“zhstyle.css” 。 2）打开 ghzp.html 网页，点击“附加样式表” 按钮，如图 2-186 所示的界面，点击“浏览”按钮，选 择 style 文件夹中的“zhstyle.css”文件完成样式表的附加，也可以在代码视图中添加：代码到中间。 3）在 zhstyle.css 文件中书写 HTML选择符 body的 C

34、SS 样式代码： body background-color: #6d4418; margin-left: 0px; margin-top: 0px; margin-right: 0px;margin-bottom: 0px; 说明：网页主体使用的样式表主要控制背景色与上、右、下、左边距。 4）采用同样的方法书写选择符 table的 CSS 样式代码： table FONT-SIZE: 9pt; COLOR: #ffffff; WORD-BREAK: break-all; LINE-HEIGHT: 160%; TEXT-DECORATION: none 说明：表格内部的内容使用的样式表，表格的

35、手工设置方式如图 2-178 所示。 5）下面将其他代码一起编写如下所示： /*注释文本：主体文字使用的样式表*/ .titlefont FONT-SIZE: 12pt; COLOR: #FFFF00; WORD-BREAK: break-all; LINE-HEIGHT: 120%; TEXT-DECORATION: none; font-weight: bold; /*注释文本：常规超级链接使用的样式表*/ A:active FONT-SIZE: 12px; COLOR: #; LINE-HEIGHT: 160%; text-decoration: none; A:link FONT-SI

36、ZE: 12px; COLOR: #; LINE-HEIGHT: 160%; text-decoration: none; A:visited FONT-SIZE: 12px; COLOR: #; LINE-HEIGHT: 160%; text-decoration: none; A:hover FONT-SIZE: 12px; COLOR: #; LINE-HEIGHT: 160%; 6）在“zhstyle.css”中设置了超级链接的样式，默认情况下都采用 a:link 的一组，现在给左边的超级链接添加样式。对于普通文本，先鼠标选中“国画作品”文字，在属性栏中的样式下拉菜单中选中“titlefont” 选项即可，或者在代码视图中选择“国画作品”所在的超级链接的 a 标签后添加代码class=nav。采用同样的方法对齐他的导航链接进行设置。7）最后保存网页后，点击键预览网页即可。