网页设计与制作案例教程第15章.ppt

15.3.3 使用CSS样式 继续设置CSS样式，这时在设置就是在scss.css文件打开的情况下，这时，选择“文本”菜单下“CSS样式”的“新建”，弹出“新建CSS规则”对话框，这时“定义在”选择“仅对该文档”，如图所示。 15.3.3 使用CSS样式 设置td标签，大小为9px，颜色为#18458D，如图所示。 15.3.3 使用CSS样式 单击“确定”后，设置的内容会在CSS文件中显示，如图15-33所示。 注意：CSS文件打开的效果是纯代码形式。 15.3.3 使用CSS样式 照以上方法依次添加内容，如图所示。保存文件，以便之后将CSS文件插入到其他文档中。 15.3.4插入图像 打开index.html文件，鼠标单击需要插入文件的位置，如图所示。 15.3.4插入图像 选择“插入记录”菜单中“图像”命令，弹出“选择图像源文件”对话框，选择源文件，如图所示。注意：“相对于”设定为“站点根目录”。 15.3.4插入图像 单击“确定”后，会弹出提示对话框，要求把使用的图片保存到站点根目录下，如图所示。 15.3.4插入图像 单击“是”按钮，将文件保存到根文件夹中，弹出“复制文件为”对话框，如图所示。 15.3.4插入图像 比如新建文件夹“pic”，将文件保存在该文件夹中，如图所示。 15.3.4插入图像 文件插入后，将显示在刚才单击光标的位置，并且在右侧“文件”面板中，出现新建的文件夹pic，如图所示。 15.3.4插入图像 使用同样的方法，在右侧的空白区域插入flash文件，插入后效果如图所示。 15.3.5使用超链接 在左侧的区域中插入导航列，如图所示。 15.3.5使用超链接 为每个文字内容设置链接，如图所示。 15.3.5使用超链接 其余的页面全部使用相同的方式，先设定链接内容，如图所示。 15.3.6 制作主页面显示区域 插入3行1列的表格，设置表格宽度为90%，边框粗细、单元格间距、单元格边距均为0，如图所示。 15.3.6 制作主页面显示区域 将光标放置在表格后面，设置水平和垂直都为居中对齐，如图所示。 第15章 综合应用实例 本章将结合以前所讲的知识来介绍一个“灌篮高手”网站的制作实例。 15.1 网站规划 在网站制作之前，首先要对网站的内容进行分类和规划。为了合理的规划各个模块，整个网站分为以下六大模块：灌高剧情，灌高人物，灌高图片，灌高歌曲，灌高花絮，灌高网文和灌高链接。网站规划图如图所示。 灌篮高手 灌高剧情 灌高人物 灌高图片 灌高歌曲 灌高花絮 灌高网文 灌高链接 剧情简介 漫画简介 漫画祥介 动画简介 动画祥介 漫画续集 湘北队员 陵南队员 海南队员 翔阳队员 作者介绍 篮球知识 个人文集 论坛转载 单篇作品 投稿热线 15.2 定义站点 在制作网站之前，先对站点进行定义。具体步骤如下： （1）选择“文件”面板里的“管理站点”，弹出“管理站点”对话框。如图所示。 15.2 定义站点 （2）选择“新建”按钮中“站点”命令，弹出“站点定义”对话框。设定站点的名称为“slumdunk”，如图所示。单击“下一步”。 15.2 定义站点 （3）设置使用服务器技术。选择使用服务器技术，并设置为“asp javascript”。如图所示。 15.2 定义站点 (4) 设置如何使用用户文件。选择在本地编辑，然后上传到远程测试服务器。如图所示。 15.2 定义站点 (5) 定义如何测试站点。如图所示。 15.2 定义站点 (6) 定义站点根文件夹的URL。如图所示。 15.2 定义站点 (7) 询问是否要启用存回和取出文件。如图所示。 15.2 定义站点 (8) 显示站点信息，如图所示。设置完成。 15.2 定义站点 (9) 站点设定完成。单击“管理站点”对话框的完成，右侧的“文件”面板会显示新建立的站点信息，如图所示。 15.3 网站主页面制作 15.3.1 页面规划 页面的规划就是对网页的版面进行布局，主要任务是将web页面分割成用于安排文字、图像等各种屏幕元素的各个区域。对于本网站，我们将采用传统的“┍”型布局。上侧放置网站的logo和宣传动画，左侧放置导航，右侧放置具体内容。 我们首先设置首页面的属性，在页面的空白区域单击右键，选择“页面设置”，弹出“页面属性”对话框。选择“外观”标签，设定文字大小为“12像素”，文本颜色为“黑色”，背景颜色为“白色”，背景图像不设置，边距为默认，如图所示。 15.3.1 页面规划 选择“链接”标签，“链接字体”选择“加粗”，其他均为默认，对于链接字体颜色设置这几项，我们在CSS设置中进行，如图所示。 15.3.1 页面规划 选择“标题/编码”标签，“标题”设置为“灌篮高手”，其他均为默认，如图所示。 15.3.1 页面规划 设置完毕，单击“确定