网页设计与制作案例教程 教学课件 陈承欢 第32单元.pptVIP

第17章　网页制作综合实例; 知识技能目标 ; 网页浏览效果展示; 本章操作任务;;17.1　规划网站; 确定好站点主题后，就要根据该主题选择站点的风格。 本网站的主要特点如下： （1）设计风格要大众化，为了提高浏览速度，尽量减少图片的使用，更多地使用表格实现效果。 ; （2）背景颜色以灰色和白色为主、黄色为辅，文字颜色以黑色为主、蓝色和红色为辅。 （3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为12像素。; （4）首页的版式结构采用典型的“国”字型结构，二级栏目网页采用“顶部和嵌套的左侧框架”结构以及简单的“左右型”结构。; 先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构。; 根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。; 使用表格对首页与其他几个主面导航页面的布局结构草图进行设。;17.2　准备素材;17.3　创建网站; 定义站点的操作步骤如下： （1）在Dreamweaver 8主窗口中，单击菜单【站点】→【新建站点】，将弹出站点定义对话框。在该对话框中先输入站点的名称，然后输入网址。接着单击【下一步】按钮，进入到下一步操作。 ; （2）选择“否，我不想使用服务器技术”单选按钮，然后单击【下一步】按钮，进入到下一步操作。; （3）选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选按钮，接着在下面的文本框中输入站点文件在本地计算机上的存放位置，也可以选择存储位置，然后单击【下一步】按钮，进入到下一步操作。; （4）选择连接到远程服务器的方式为“FTP”,然后分别输入Web服务器的主机名、在服务器上文件的存储位置、FTP用户名、FTP密码等参数。然后单击【下一步】按钮。; （5）选择“否，不启用存回和取出”单选按钮。接着单击【下一步】按钮，此时会显示所定义的站点信息。如果发现有误可以单击【上一步】按钮，返回到上一步操作的对话框中重新修改。如果站点定义信息符合要求，可以单击【完成】按钮，完成站点的定义。 ; 创建站点后，在“文件”面板中切换到新创建的站点，然后利用快捷菜单创建文件夹及子文件夹。;17.4　网站首页的设计与制作; 首页的布局方案如下： （1）整个页面分为9个区域，从上往下依次为：表格1、页面区域1、页面区域2、页面区域3、表格2、表格3、页面区域4、页面区域5、页面区域6。; （2）表格1为1行1列（760×120），用于插入flash动画和Logo标志；表格2和表格3为1行3列；页面区域1为760×22，为导航栏；页面区域2为760×20，为导航栏，页面区域3为760×20，当前位置标识；页面区域4为760×33，图片型友情链接；页面区域5为760×22，文字型友情链接；页面区域6：760×66，文字型导航菜单与版权信息区。; （3）表格2的第一列插入表格21（4行1列），第二列插入表格22（5行2列），第三列插入表格23（4行1列）；表格21中第4行插入表格211（18行2列）；表格22中第二列插入表格221（16行2列）；表格23中第4行插入表格231（18行2列）。 （4）表格3的结构与表格2相同。; 新建一个CSS样式文件“style1.css”。 在网站首页代码的HEAD部分添加一行代码（link href=css/style1.css rel=stylesheet type=text/css /），引入CSS样式文件。 ; 在首页中插入三个表格，定义六个块（用div标记符定义），并在style1.css样式文件中为这六个块定义样式。 ; 分别在表格2和表格3的三个单元格各插入一个表格，例如在表格2的B单元格中插入一个5行2列的嵌套表格22，该表格的HTML代码如下，其他的几个嵌套表格的HTML代码与表格22相似。; 接下来在表格21、表格22、表格23、表格31、表格32、表格33中再插入嵌套表格，形成三层嵌套结构，例如表格23中插入一个16行2列的表格231，该表格的的HTML代码如下。其也的几个表格的HTML代码与表格231相似。; 在首页中输入文字、插入图片、flash动画、脚本代码，对首页进行编辑和美化，主要操作内容如下： ; （1）设置页面属性 网页标题设置为“网页设计与制作教学网|网页教学|网页制作|网页特效|建站指南|网络编程|素材下载|教程下载|HTML|CSS|数据库”，“上边距”设置为0。 ; （2）在表格1插入标题flash和Logo标志。 （3）在页面区域1中输入导航