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

2、应用样式文件

7.4.4设置页面间的链接
7.5 测试并发布网站

7.5.1测试内容 1.页面效果是否美观 2.链接是否完好

1)检查单个页面链接

2)检查整个站点中的链接

3.测试不同浏览器的兼容性 1)设置需要检查的浏览器及其版本

2)检查单个页面或整个站点的兼容性

7.5.2发布站点 1.安装IIS

2.发布网站
（1）打开“Internet信息服务（IIS）管理器”
（2）右键选择“Default Web Site”，创建虚拟目录，

（3）切换到“内容视图”，查看站点文件目录结构，

找到index.html页面，右键选择“浏览”查看该网站首页 效果

访问网站
1、在浏览器地址栏中输入“http：//本地服务器IP地址/fashion/index.html”即可访问 这个站点，这种访问方式在同一局域网中不同的计算机上都可以访问 2、在浏览器地址栏中输入“http：//127.0.0.1/fashion/index.html”也可访问，这种 访问方式只能在本地计算机上访问，



框架布局 1、优点：简洁、多窗口查看

2、缺点：分多文件保存，不利于搜索引擎搜索。在不同 浏览器之间的兼容性不好
3、适用场合：论坛、社区。


DIV+CSS布局 1、优点：符合W3C内容和结构分离的思想、层次结构简单、 利用搜索引擎搜索 2、缺点：布局稍微复杂、存在浏览器兼容问题



（3）在“站点定义”对话框中，输入站点名称“fashion”， 然后选择本地站点文件夹，点击“保存”按钮。
（4）建立目录结构，在制作网页前，最好先确定整个网站的 目录结构。 (5)如需修改站点信息，选择“站点”->“管理站点”命令.


7.3页面布局技术

表格布局 1 、优点：设计简单、浏览器兼容性好。适合用来布局很 规整的内容或数据 2 、缺点：表格嵌套导致结构冗余、整个表格下载完才开 始显示数据，影响访问速度 3、适用场合：不符合W3C，逐渐淡出。
3、适用场合：主流的布局方式。
7.4 网页制作

7.4.1制作首页布Leabharlann Baidu 1、划分页面结构 2、编写HTML内容结构

3、编写CSS控制各块的布局（layout.CSS ） 4、制作首页

7.4.2制作网页模板 网页模板的用途
多个网页有重复内容，利于减少开发时间 页面复用，利于网站风格统一和维护


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测试网页


7.2创建站点

创建一个站点的具体步骤如下： (1) 在本地硬盘上创建一个文件夹，用于存放站点，假如 我们在D盘驱动器下创建名为“fashion”的文件夹。 (2) 选择“站点” ->“管理站点”命令，然后在弹出的 “站点管理”对话框中选择“新建”->“站点”命令，此 时将弹出“站点定义”对话框。

1、利用<iframe/>标签制作模板 （1）分离顶部为单独的页面文件，制作top模板

（2）分离底部为单独的页面文件，制作bottom模板

（3）使用<iframe />复用顶部和底部，制作登录页面，


7.4.3制作样式表文件和其他页面绑定
1、制作样式表
创建global.css文件用于保存常用的全局样式。
第七章
网站设计
学习目标

根据网站开发流程制作网站 使用DIV+CSS制作简单的页面布局 使用<iframe/>制作网页模板

使用Dreamweaver工具制作网页
7.1网站开发流程

前期准备包括了解网站的业务背景、明确网站的设计风格、 确定网站内容等； 中期制作主要包括创建站点、制作首页、制作模板和制作 样式； 后期的测试发布工作包括检查页面效果是否美观、链接是 否完好、不同浏览器的兼容性以及如何发布网站。
测试网页是否满足客户需求 测试并修复网页可能出现的bug 根据客户浏览器种类，测试浏览器的兼容性
7.1.5发布网站

1、本地发布，即通过本地计算机来完成，在Windows操作 系统中，一般通过IIS来构建本地Web发布平台，这种发布 方式只能让局域网中的用户访问您的站点； 2 、 远 程发 布 ， 即 登 录到 I nt e rne t 上 ， 然后利 用 有些 Internet服务商（ISP）提供的个人网络空间来真实地发 布自己所建的网站