Web前端开发案例教程——HTML+CSS+JavaScript (7).pptVIP

网站设计 第七章 学习目标 ?根据网站开发流程制作网站 ?使用DIV+CSS制作简单的页面布局 ?使用iframe/制作网页模板 ?使用Dreamweaver工具制作网页 7.1网站开发流程 前期准备包括了解网站的业务背景、明确网站的设计风格、确定网站内容等； 中期制作主要包括创建站点、制作首页、制作模板和制作样式； 后期的测试发布工作包括检查页面效果是否美观、链接是否完好、不同浏览器的兼容性以及如何发布网站。 7.1.1需求分析 1、why——网站想实现什么目标？ 2、who——谁来访问？ 3、what——访问者需要什么？ ?首页(index.html)：包括网站导航、最新资讯和版权声明等内容。 ?新闻动态(news.html)：包括新闻动态信息等 ?全球时尚(global.html)：包括全球时尚信息等 ?登录页(login.html)：使用账户登录网站。 ?注册页(register.html)：注册为网站会员。 ?帮助页(help.html)：客户服务方面的帮助信息等。 4、用多少时间，预算是多少，完成的质量？ 7.1.2 伪界面设计 设计一个用户可以直接感知的静态的网站样板 7.1.3网站制作 应用HTML+CSS技术，选用Dreamweaver等辅助工具，根据美工效果图制作html页面。包括图片等素材收集、页面布局规划等工作。 7.1.4测试网页 ?测试网页是否满足客户需求 ?测试并修复网页可能出现的bug ?根据客户浏览器种类，测试浏览器的兼容性 7.1.5发布网站 1、本地发布，即通过本地计算机来完成，在Windows操作系统中，一般通过IIS来构建本地Web发布平台，这种发布方式只能让局域网中的用户访问您的站点； 2、远程发布，即登录到Internet上，然后利用有些Internet服务商（ISP）提供的个人网络空间来真实地发布自己所建的网站 7.2创建站点 创建一个站点的具体步骤如下： (1)在本地硬盘上创建一个文件夹，用于存放站点，假如我们在D盘驱动器下创建名为“fashion”的文件夹。 (2)选择“站点”-“管理站点”命令，然后在弹出的“站点管理”对话框中选择“新建”-“站点”命令，此时将弹出“站点定义”对话框。 （3）在“站点定义”对话框中，输入站点名称“fashion”，然后选择本地站点文件夹，点击“保存”按钮。 （4）建立目录结构，在制作网页前，最好先确定整个网站的目录结构。 (5)如需修改站点信息，选择“站点”-“管理站点”命令. 7.3页面布局技术 表格布局 1、优点：设计简单、浏览器兼容性好。适合用来布局很规整的内容或数据 2、缺点：表格嵌套导致结构冗余、整个表格下载完才开始显示数据，影响访问速度 3、适用场合：不符合W3C，逐渐淡出。 框架布局 1、优点：简洁、多窗口查看 2、缺点：分多文件保存，不利于搜索引擎搜索。在不同浏览器之间的兼容性不好 3、适用场合：论坛、社区。 DIV+CSS布局 1、优点：符合W3C内容和结构分离的思想、层次结构简单、利用搜索引擎搜索 2、缺点：布局稍微复杂、存在浏览器兼容问题 3、适用场合：主流的布局方式。 7.4 网页制作 7.4.1制作首页布局 1、划分页面结构 2、编写HTML内容结构 3、编写CSS控制各块的布局（layout.CSS ） 4、制作首页 7.4.2制作网页模板 网页模板的用途 ?多个网页有重复内容，利于减少开发时间 ?页面复用，利于网站风格统一和维护 1、利用iframe/标签制作模板 （1）分离顶部为单独的页面文件，制作top模板 （2）分离底部为单独的页面文件，制作bottom模板 （3）使用iframe /复用顶部和底部，制作登录页面，