Dreamweaver CS3网页设计与制作教程 第2版 申莉莉教案 第15章新.pptVIP

第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 页面规划 设置完毕，单击“确定”按钮保存设置。 选择“文件”菜单中的“保存”命令，弹出“另存为”对话框，将首页面命名为“index.html”，如上图所示。这时，Dreamweaver CS3会自动将页面保存在已经设定好的“slamdunk”文件夹中。注意：一般来说，网站的首页都命名为index.html或者default.html。这时，右侧的“文件”面板中就会出现新保存的文件index.html，如下图所示 15.3.2 布局设计 Dreamweaver CS3为我们提供了表格布局，框架布局和布局模式设置三种形式，我们在这里采用布局模式来进行布局的设定，再设定好后，将布局自动转换为表格，方便操作。 选择“查看”菜单中的“表格模式”下的“布局模式”，如图所示。 15.3.2 布局设计 ，进入布局状态，如图所示 15.3.2 布局设计 选择“插入”中的“布局”下的“绘制布局表格”按钮，如图所示。 15.3.2 布局设计 在编辑栏中拖动鼠标，绘制表格布局，如图所示。 15.3.2 布局设计 绘制后可以通过属性对话框修改其属性，如图所示。 15.3.2 布局设计 选择“绘制布局单元格”按钮，如图所示。 15.3.2 布局设计 绘制单元格，在“属性对话框”中设置宽为120，高为60。如图所示。 15.3.2 布局设计 将布局绘制成“┍”型，如图所示。 15.3.2 布局设计 选择编辑区域中“布局模式”字样旁的“退出”，布局自动形成表格，如图所示。 15.3.3 使用CSS样式 设定CSS样式，可以对页面进行优化，并且保持网站的风格统一。选择“文本”菜单中的“CSS样式”命令下的“新建”，如图所示。 15.3.3 使用CSS样式 弹出“新建CSS规则”对话框，设定“选择器类型”为“标签”，标签的内容选定为“body”，用于设定整个页面内容的格式，“定义在”选择“新建样式表文件”，这个操作的目的就是为了使站点所有的文件的样式保持一致。如果希望这个页面与其他页面不同，可以选择“仅对该文档”。如图所示。 15.3.3 使用CSS样式 单击“确定”后，会弹出“保存样式表文件为”对话框，路径就是站点的跟目录，直接命名就可以，比如命名为“scss.css”，如图所示。 15.3.3 使用CSS样式 单击“保存”后，弹出“body的CSS规则定义”对话框，设定“类型”分类中的大小为12px，如图所示。 15.3