第11章 网站制作综合实例.ppt

第十一章 静态网站制作综合实例 教学目标： 了解网站设计的一般过程。 掌握如何进行站点测试。 掌握如何发布站点。 教学重点： 站点的测试。 站点的发布。 教学难点： 对网站制作前期规划过程的理解。 教学方法： 任务驱动法 任务一、网站设计的前期规划 知识点： 网站定位； 确定主题和名称； 构思网站的整体风格； 网站整体配色； 规划网站的栏目和版块； 规划和设计页面布局 收集素材 任务描述 制作一个中国八大传统节日（春节、元宵节、清明节、端午节、七夕节、中秋节、重阳节、冬至）的网站。 任务分析 网站制作，首先要完成定位网站的主题、规划网站的栏目和板块、页面布局等网站制作的准备工作。 操作步骤 1．网站定位：建站的目的就是通过网络来宣传中国传统节日的来由、传说、风俗习惯及相关的传统文化。因此，网站定位为宣传传统节日文化为主题。网站命令为：中国八大传统节日。 2．网站规划为栏目和板块，分别为春节、元宵节、清明节、端午节、七夕节、中秋节、重阳节和冬至八个栏目或板块。 3．网站结构采用两级页面：一级页面和二级页面。一级页面为首页，使用“封面”型布局 首页布局： 二级页面布局： 任务二、页面设计 知识点： 制作站点页面 任务描述 ： 制作“中国八大传统节日”的静态网站。 任务分析： 在制作网站页面之前，先完成： 1．安装并配置IIS； 2．在IIS中配置一个站点，将“附带光盘\第电子资料包\十一章\示例\01\原始文件”文件夹中内容复制到你的硬盘中，如D:\zgcyjr，然后将该目录在IIS中配置成站点； 3．在Dreamweaver CS3中将D:\zgcyjr目录创建成zgctjr站点； 4．利用Dreamweaver CS3在zgctjr站点创建网站目录结构及相应的空白*．Html文档。 操作步骤: 一、制作网站首页 首页布局 为首页创建链接 二、制作二级页面 创建二级页面模板 创建HTML文档，然后将模板应用到页面 任务三、测试站点 本任务涉及知识点： 链接测试； 浏览器兼容性测试； 任务描述 ： 测试本章所创建的站点。 任务分析： 站点的测试包括很内容，但主要是链接的正确性测试和浏览器兼容性测试。 操作步骤 （一）链接测试 单击“站点”菜单下的“检查站点范围的链接”命令 （二）浏览器兼容性测试 步骤1．在“文件”面板中选中要测试的对象 步骤2．单击文档窗口的工具栏上的“检查页面”按钮，在弹出的菜单中，选择“检查浏览器兼容性”命令单击。 任务四、网站的发布与上传 本任务涉及知识点： 域名和空间的申请； 网站上传； 任务描述 将测试好的网站上传到Internet上。 任务分析 在网站制作完成后，要想把你建的网站发布到Internet上，需要先申请域名和租用空间。 上传网站可以用专门的FTP软件，也可以使用Dreamweaver CS3上传网站。 操作步骤： 一、申请域名和空间 步骤1．在Internet网上搜索提供域名和空间服务的公司。 步骤2．与服务公司联系，向他们提出域名和空间的申请。 步骤３．签定服务协议并交纳服务费用。 步骤４．服务公司将向你提供域名、站点存放的目录名、用户帐号（登录到FTP服务器时用）和登录时用到的密码。 步骤５．到公安部门和信息产业部门为网站进行备案。 二、网站上传 利用Dreamweaver CS3上传网站的具体步骤如下： 步骤1．单击“站点”菜单下的“管理站点”命令，在弹出的“管理站点”对话框中选择相应的站点zgctjr，然后单击“编辑”按钮 步骤2．在弹出的“效果 的站点定义”对话框中选择“高级”选项卡，在“高级”选项卡的“分类”列表框中选中“远程信息” 步骤３．在“访问”下拉列表框中选择“FTP”。 步骤４．在对话框中，在“FTP主机”文本框中输入站点要上传到的FTP服务器的主机名；在“主机目录”文本框中输入站点在FTP服务器中存放的目录名；在“登录”文本框中输入连接到FTP服务器的登录名；在“密码”文本框中输入登录FTP服务器时的密码，设置完后单击“确定”按钮 。 步骤５．在文件面板中单击按钮，在对话框中单击“连接到远端主机”按钮，建立与远程服务器的连接。 步骤6．当连接到远程服务器后，“连接到远端主机”按钮会变成状态（左侧有一个小绿灯）， 然后在对话框中选中要上传的站点或文件，单击“文件上传”按钮，完成文件上传。 * *