网站前端开发项目化教程 (DIV+CSS+JavaScript) 单元一网站前端开发基础单元导读在开发网站之前我们应对网站开发有个基本的了解, 网站开发分为前端开发和后端开发, 前端开发的代码运行在客户端浏览器上, 涉及的基本技术有 HTML CSS JavaScript 等 ; 后端开发的代码运

Size: px

Start display at page:

Download "网站前端开发项目化教程 (DIV+CSS+JavaScript) 单元一网站前端开发基础单元导读在开发网站之前我们应对网站开发有个基本的了解, 网站开发分为前端开发和后端开发, 前端开发的代码运行在客户端浏览器上, 涉及的基本技术有 HTML CSS JavaScript 等 ; 后端开发的代码运"

钲盛
4 years ago
Views:

1 单元一网站前端开发基础单元导读在开发网站之前我们应对网站开发有个基本的了解, 网站开发分为前端开发和后端开发, 前端开发的代码运行在客户端浏览器上, 涉及的基本技术有 HTML CSS JavaScript 等 ; 后端开发的代码运行在服务器上, 涉及的技术有 PHP ASP.NET JSP 等本单元主要向大家介绍下网站前端开发的基础知识项目概述项目一网站开发入门在开发网站之前我们需要对网站开发有个全面的了解, 通过对网站基础知识的了解走进网站开发职业领域, 本项目主要带领大家了解网站开发基础知识,WEB 标准的基本概念和如何使用网站开发的软件及工具学习目标掌握网站开发的基础知识, 走进网站开发职业领域 ; 了解 WEB 标准的基本概念, 能理会 WEB 标准的内涵 ; 熟悉网站开发软件 Dreamweaver CS6, 会操作该软件建立站点 ; 熟悉网站前端开发所用的主流浏览器, 会使用三大基本浏览器对网页进行测试及调试 ; 任务一网站开发基础知识任务情境础知识小白想毕业后从事网站前端开发岗位, 但是他是零基础, 所以需要先了解网站开发的基任务分析打开任一浏览器, 输入任一网址, 从网页概念开始介绍网站开发基础知识任务实施知识准备一网站开发的基本概念

2 1 网页网站网页是由 HTML( 超文本标记语言 ) 或者其他语言编写的, 经过浏览器编译解释后供用户获取信息的页面, 它又称为 Web 页其中可包含文字图像表格动画和超级链接等各种网页元素网页分为静态网页和动态网页, 静态网页内容是预先确定的, 并存储在 Web 服务器或者本地计算机 / 服务器之上的页面, 其后缀名一般为.html; 动态网页是采用动态网站技术生成的页面, 其后缀名根据采用的动态技术不同有.php,.aspx,.jsp 等网站就是一组相关网页的集合, 是通过互联网向全世界发布信息的载体打开网站时显示的第一个网页就是主页, 又叫首页主页文件基本名为 index 或 default, 如 index.html default.html index.asp 和 index.aspx 等, 与主页相链接的其他各个页面就称之为子页 2 Internet IP 地址域名所谓 Internet 网络就是通常所说的互联网, 是由一些使用公用语言互相通信的计算机连接而成的网络简单地说, 互联网就是将世界范围内不同国家不同地区的众多计算机连接起来形成的结果互联网上连接了不计其数的计算机, 每台计算机在互联网上都有一个唯一的地址进行识别, 我们称这个地址为 IP 地址, 如百度的 IP 是由于 IP 地址在使用过程中难于记忆和书写, 因而产生了域名这一种与 IP 地址对应的字符型地址域名是由一串用点分隔的名字组成的互联网上某台计算机或计算机组的名称, 是单位上网的标识, 如百度的域名是 baidu.com 3 WWW HTTP URL WWW 是环球信息网的缩写, 中文名字为万维网, 常简称为 Web 但 WWW 不是网络, 也不代表 Internet, 它只是 Internet 提供的一种服务即网页浏览服务它是互联网上的一个资料空间, 在这个空间中, 任何一个资源都由统一资源标识符 (URL) 标识, 并利用超文本传输协议 (Hypertext Transfer Protocol,HTTP) 传送给使用者 URL 中文译为统一资源定位符,URL 其实就是 Web 地址, 俗称网址 URL 可以是本地磁盘, 也可以是局域网上的某一台计算机, 更多的是 Internet 上的站点, 比如就是百度的网址 HTTP( 超文本传输协议 ) 是互联网上应用最为广泛的一种网络协议所有的 WWW 文件都必须遵守这个标准设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法

4 C/S 和 B/S 软件结构 C/S 是客户机 (Client)/ 服务器 (Server),B/S 是浏览器 (Browser)/ 服务器 (Server) C/S 之间通过任意的协议通信, 一般要求有特定的客户端比如 QQ 就是 C/S 模式, 你的桌面上的 QQ 就是腾讯公司的特定的客户端, 而服务器就是腾讯的服务器再比如你看的网络电视也是如此, 比如你的桌面上的 pplive

3 4 C/S 和 B/S 软件结构 C/S 是客户机 (Client)/ 服务器 (Server),B/S 是浏览器 (Browser)/ 服务器 (Server) C/S 之间通过任意的协议通信, 一般要求有特定的客户端比如 QQ 就是 C/S 模式, 你的桌面上的 QQ 就是腾讯公司的特定的客户端, 而服务器就是腾讯的服务器再比如你看的网络电视也是如此, 比如你的桌面上的 pplive Tvcoo 等, 这些软件都是 C/S 模式的, 他们要求在用户有特定的客户端而 B/S 模式是靠应用层的 HTTP 协议进行通信的, 一般不需要特定的客户端, 而是需要有统一规范的客户端, 那就是你的浏览器!Web 页就是 B/S 模式, 也就是说咱们说的网站就是 B/S 模式二网站的工作原理网站的工作原理指 Web 服务器与客户端浏览器交互的基本原理, 也就是将 Web 服务器上的网页代码提取出来, 进行编译解释, 并最终成为客户所看到的漂亮的页面的过程, 该过程如图 1-1 所示客户端浏览器 W E B 服务器图 1-1 网站的工作原理现在我们就拿访问百度网站首页为例来解说下网站的工作原理 : 第一步 : 在浏览器的地址栏里输入了 " index.php", 按下回车浏览器根据你输入的内容判断 : 这是一个 HTTP 请求, 服务器地址是要访问的文件是其根目录下的 index.php 页面第二步 :WEB 服务器接收了该请求, 在服务器上找到 index.php 页面, 并将其传递给应用服务器第三步 : 应用服务器将该页面中的代码提取出来, 并进行编译完成该页面假设 index.php 代码如下 : 1 <! DOCTYPE html> 2 <html> 3 <head>

4 4 <meta charset="utf-8" /> 5 <title>baidu</title> 6 </head> 7 <body> 6 <?php 7 echo("hell world!"); 8?> 9 </body> 10 </html> 第四步 : 应用服务器将完成页传递回 Web 服务器, 此时 index.php 页面的代码如下 : 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>baidu</title> 6 </head> 7 <body> 8 Hello world! 9 </body> 10 </html> 的页面第五步 :Web 服务器响应浏览器的请求, 将完成的页发送到请求浏览器, 就是大家看到这个过程包括三个问题 : 1 网站的数据如何变成页面数据网站程序解决 2 如何根据用户请求将指定的数据体送达客户端 Internet 解决 3 客户端如何将页面数据显示为页面 ( 所谓页面就是图形界面上的文本图像图形的集合 ) 浏览器解决三网站开发流程网站开发流程分为五个阶段, 如图 1-2 所示需求分析设计草图美工设计程序开发测试及上线图 1-2 网站开发流程需求分析 : 根据客户的网站建设需求明确网站主题风格主色调栏目功能以及网站基础信息 ( 如 : 网站域名空间, 企业简介等网站所需相关资料 ), 撰写网站建设方案书设计草图 : 规划网站的内容板块草图

5 美工设计阶段 : 根据草图由设计师设计网站首页及子页效果图, 并对效果图进行切片程序开发阶段 : 程序开发分前端开发和后端开发, 两者可以同时进行前端 : 根据美工效果负责制作静态页面后端 : 根据其页面结构和设计, 设计数据库, 并开发网站后台测试及上线 : 在本地搭建服务器, 测试网站有没有什么问题若无问题, 可以使其将网站打包, 使用 FTP 上传至网站空间或者服务器任务二了解 WEB 标准任务情境分别用 IE 火狐和谷歌浏览器打开一个传统布局的网站( 如和 WEB 标准布局的网站 ( 观察下这两个网站中页面在不同浏览器下的显示效果任务分析查看这两个网站主页的源代码, 并进行简单的分析, 比较这两个网站的不同点传统布局的网站采用的是表格 <table> 布局,WEB 标准布局网站采用的是 <div> 布局, 而且在所有的 CSS 样式及 JS 代码都外部文件中任务实施知识准备一 WEB 标准起源 WEB 这个 Internet 上最热门的应用架构是由 Tim Berners-Lee 发明的 1990 年 11 月, 第一个 Web 服务器 nxoc01.cern.ch 开始运行,Tim Berners-Lee 在自己编写的图形化 Web 浏览器 "World Wide Web" 上看到了最早的 Web 页面 1991 年,CERN(European Particle Physics Laboratory) 正式发布了 Web 技术标准目前, 与 Web 相关的各种技术标准都由著名的 W3C 组织 ( 万维网联盟 ) 管理和维护 1 浏览器之争 1994 年 12 月网景 (Netscape) 通信公司开发出 Netscape Navigator 浏览器, 并发布了该浏览器的 1.0 版本随后 1995 年 8 月, 微软发布了 Internet Explorer 浏览器的 1.0 版本此后网景和微软都不断推出各自浏览器的升级版本, 都想在浏览器支持的功能方面赢得竞争优势, 以吸引 Web 开发人员, 但是他们的浏览器完全不兼容,Web 开发人员要想让自己的网站在两个不同版本浏览器中同时使用的话就要针对不同版本的浏览器开发不同的网

6 站, 这样大大提高了开发成本 ; 有些开发者干脆只让网站支持一个浏览器, 使用其他浏览器的用户无法正常访问该网站, 这被称为浏览器之争 2 WEB 标准的诞生为了改变以上问题及混乱局面,W3C 组织开始起草和发布一系列标准, 包括 HTML4.01, CSS1.0 等, 并开始说服网锦 Microsoft 和其他浏览器生产商彻底支持该标准在传统网站的时代,Web 非常混乱, 浏览器支持非常劣质的 CSS1.0, 为了解决浏览器兼容问题,Web 开发人员采用表格 <table> 和透明的 GIF 布局网页, 这就是所谓的传统网站 2000 年, 微软发布了 Internet Explorer 5 浏览器的苹果机版本, 并在一定程度上支持了 W3C 标准, Internet Explorer 浏览器成为 Mac OS 操作系统下的默认浏览器这一事件, 以及 Opera 浏览器当时已可以很好地支持 CSS 和 HTML 这一事实, 推动了 Web 标准的使用 2003 年,Dave Shea 推出了一个被称作 CSS Zen Garden (CSS 禅意花园 ) 的站点, 这个站点用实际例子证明仅通过改变页面的样式, 而内容保持不变, 就可以实现整个设计的改变, 这对 Web 开发人员产生了巨大的影响,Web 开发人员和设计师第一次感到使用 Web 标准设计站点是轻松的工作从那时起, 在专业 Web 开发圈子里,Web 标准就已成为必须遵守的标准通过共同的标准协同工作, 是 Web 向前发展必需的观点二 WEB 标准概述 1 WEB 标准的定义 WEB 标准是由 W3C 和其他标准化组织制定的一套规范集合, 包含一系列标准 Web 标准的最重要目的是实现表现结构行为的分离 2 WEB 标准的构成网页主要由三部分组成 : 结构 (Structure) 表现(Presentation) 和行为 (Behavior) 对应的标准也分三方面 : 结构化标准语言主要包括 XHTML 和 XML, 表现标准语言主要包括 CSS, 行为标准主要包括对象模型 ( 如 W3C DOM) ECMAScript 等结构 (1)HTML4.0:HyperText Markup Language(HTML, 超文本标识语言 ) 广泛用于现在的网页,HTML 目的是为文档增加结构信息, 例如表示标题, 表示段落 ; 浏览器可以解析这些文档的结构, 并用相应的表现形式表现出来设计师也可以通过 CSS(Cascading Style Sheets) 来定义某种结构以什么形式表现出来 (2)XML1.0:XML 是 Extensible Markup Language( 可扩展标识语言 ) 的简写 XML 类

7 似 HTML 也是标识语言, 不同的地方是 :HTML 有固定的标签, 而 XML 允许你自己定义自己的标签, 甚至允许你通过 XML namespaces 为一个文档定义多套设定 (3)XHTML1.0:XHTML 实际上就是将 HTML 根据 XML 规范重新定义一遍它的标签与 HTML4.0 一致, 而格式严格遵循 XML 规范因此, 虽然 XHTML 与 HTML 在浏览器中一样显示, 但如果你要转换成 PDF, 那么 XHTML 会容易的多表现 CSS2.0:CSS 是 Cascading Style Sheets 层叠样式表的缩写通过 CSS 可以控制 HTML 或者 XML 标签的表现形式 W3C 推荐使用 CSS 布局方法, 使得 web 更加简单, 结构更加清晰行为 (1)DOM1.0 DOM 是 Document Object Model 文档对象模型的缩写 DOM 给了脚本语言 ( 类似 ECMAScript) 无限发挥的能力它使脚本语言很容易访问到整个文档的结构内容和表现 (2)ECMAScript 脚本语言它是由 CMA 制定的一种标准脚本语言 (Javascript), 用于实现具体界面上对象的交互操作三 WEB 标准的好处表现与内容分离技术是目前 Web 标准制定的核心目的内容是指具体的信息, 仅仅表示信息正文, 正文通过 XHTML 结构化语言被标记为各个独立部分, 如左分栏右分栏新闻列表等 ; 表现是指信息的展示形式, 如对字号字体排版的设计称之为表现 (1) 高效率的开发与简单维护由表现与内容分离所带来的高效开发是指通过内容与表现的分离技术, 可以使具体内容与样式设计分离开来, 使得同一个设计可以重复使用 (2) 信息跨平台的可用性符合 Web 标准的页面也很容易被转换成其他格式文档, 例如数据库或者 Word 格式, 也容易被移植到新的系统 -- 硬件或者软件系统, 比如网络电视 PDA 等等这是 XML 天生具有的优势符合 Web 标准的页面也具有天生的可用性不仅仅是普通浏览器可以阅读, 那些有残疾的人们也可以通过盲人浏览器声音阅读器正常使用 (3) 降低服务成本

8 通过对样式文件的重用, 整个网站的文件量可以成倍的减小, 使得降低服务器带宽成本成为可能 (4) 便于改版对于经常改版的网站来说, 内容与设计的分离, 使得改版的成本大幅度降低, 每次改版只需改动样式文件即可, 无需改变信息内容 (5) 加快网页解析速度文件下载速度更快, 浏览器显示页面速度也快 (6) 与未来兼容使用 Web 标准建立的页面, 将在未来的新浏览器或者新网络设备中很好的工作我们只要修改 CSS 或者 XSL 定制相应的表现形式就可以了 (7) 更好的用户体验表现与内容的分离技术, 要求我们充分理解网站信息的具体构成记忆如何使设计好的样式可以重用, 这使我们在制作网站时, 能够充分地对网站的内容设计统一性可用性进行思考与设计, 从而提高网站的可用性, 改善用户体验及印象任务三前端开发工具错误! 未定义书签任务情境正式准备开发网站了, 用什么软件开发网站呢? 怎么看到设计的网站是否符合标准? 呢? 任务分析网站开发可以用到的工具软件很多, 针对不同层次的开发者可以选择不同的工具, 初学者可以选择用 Dreamweaver, 进一步学习者可以选择用 Nodepad++,Sublime 等工具软件符合 WEB 标准的网站在各浏览器下显示的效果是一致的, 所以要将设计好的网页在三大主要浏览器 IE( 版本 7.0 以上 ) 火狐(Firefox) 谷歌(chrome) 上浏览, 以查看浏览器兼容情况, 并重点选择一个浏览器进行调试任务实施知识准备一初识 Dreamweaver CS6 Dreamweaver CS6 是 Adobe 公司推出的一套拥有可视化编辑界面, 用于制作并编辑网站和移动应用程序的网页设计软件

1 启动 Dreamweaver CS6 双击 Dreamweaver CS6 快捷方式, 启动 Dreamweaver CS6, 在弹出的主窗口中选择新建 /HTML 新建一个 HTML 文档, 如图 1-3 所示, 如果不想每次启动时都显示该界面, 则选中不再显示复选框即可 2 Dreamweaver CS6 的工作界面进入 HTML 文档后, 展现的是 Dreamweaver

个菜单分类, 每个菜单命令都能够执行一定的功能操作, 单击这些菜单可以打开其子菜单文档工具栏 : 包含以及按钮, 使用这些按钮可以在代码视图拆分视图设计视图以及实时视图间快速切换代码视图按钮 : 只在文档窗口中显示代码视图拆分视图按钮 : 将文档窗口拆分为代码视图和设计视图当选择了这种组合视图时, 文档左侧显示代码视图, 右侧显示设计

9 1 启动 Dreamweaver CS6 双击 Dreamweaver CS6 快捷方式, 启动 Dreamweaver CS6, 在弹出的主窗口中选择新建 /HTML 新建一个 HTML 文档, 如图 1-3 所示, 如果不想每次启动时都显示该界面, 则选中不再显示复选框即可 2 Dreamweaver CS6 的工作界面进入 HTML 文档后, 展现的是 Dreamweaver CS6 的工作界面, 主要包括菜单栏文档工具栏文档窗口状态栏属性面板浮动面板组等, 如图 1-4 所示菜单栏文档工具栏文档窗口浮动面板组状态栏属性面板图 1-3 Dreamweaver CS6 启动页图 1-4 Dreamweaver CS6 的工作界面菜单栏 :Dreamweaver CS6 拥有文件编辑查看插入修改格式命令站点窗口帮助等 10 个菜单分类, 每个菜单命令都能够执行一定的功能操作, 单击这些菜单可以打开其子菜单文档工具栏 : 包含以及按钮, 使用这些按钮可以在代码视图拆分视图设计视图以及实时视图间快速切换代码视图按钮 : 只在文档窗口中显示代码视图拆分视图按钮 : 将文档窗口拆分为代码视图和设计视图当选择了这种组合视图时, 文档左侧显示代码视图, 右侧显示设计视图设计视图按钮 : 只在文档窗口中显示设计视图实时视图按钮 : 可以实现快速预览页面, 使内容看上去与 Web 浏览器下显示的效果相同, 当你从代码视图切换到实时视图时, 会出现按钮, 文档窗口被拆分成左右两部分, 左侧是代码视图, 右侧是实时视图, 可以边写代码边看页面在浏览器的显示效果文档窗口 : 用于显示当前文档, 是用来对各种网页元素进行编辑操作的主要场所状态栏 : 提供与正在创建的文档有关的其他信息

10 属性面板 : 用来显示和编辑当前选定页面元素的最常用属性, 可以根据用户选择的不同对象来动态地显示对象的属性浮动面板组 : 其它面板如 CSS 应用程序文件历史记录等可以简称为浮动面板, 可以通过窗口菜单中的命令有选择的被打开和隐藏二创建本地站点 1 站点规划站点规划主要是指规划站点的结构, 即利用不同的文件夹将不同的网页内容分门别类地保存, 从而提高工作效率, 加快对站点的设计一般而言一个站点应包含如下文件夹 : html: 存放网站中的子网页, 如果网站的结构比较复杂, 网页数量较多存放在以其专题类型命名的文件夹中 images: 存放网站中的图片, 由于网站中通常有大量的图片, 可以在该文件夹下再建子文件夹 template: 存放网页模板 css: 存放网页中的 css 样式文件 js: 存放网页中的 js 脚本文件 media: 存放网页中的 flash 音频和视频文件网页及图片的命名要见名思意, 不要使用中文或其他双字符符号, 文件名中不能使用空格和特殊符号根据需求分析将新城实验小学网站内容进行了规划, 规划图如图 1-5 所示 : 首页新闻中心学校介绍教育教学新城党建家长园地数字化校园新闻动态通知公告学校概况组织结构校园风采教学视频教学资源家长注册家长登录图 1-5 新城实验小学网站内容规划图 2 建立站点

站点的主题与名称应易于记忆, 上传到网上的站点名称必须是英文, 如本书所采用的项目是新城实验小学, 所以将站点命名为 school 建立站点步骤如下 : (1) 打开 Dreamweaver CS6, 选择菜单栏上的 [ 站点 ]/[ 新建站点 ] 命令, 弹出如图 1-6 所示站点设置对象对话框 (2) 在站点名称中输入站点名称如 school, 在本地文件夹中选择

$school(d:\school), 在弹出的菜单中选择新建文件夹, 文件列表中就会出现名为新建文件夹的文件夹, 将该文件夹命名为 images, 同样操作建立 css 文件夹 js 文件夹 html 文件夹和 media 文件夹 (2) 在站点文件列表下新建文件有 2 种方法 : a) 选择 [ 文件 ]/ [ 新建 ] 或者按 Ctrl+N 键, 在弹出的新建文档对话框中,$

11 站点的主题与名称应易于记忆, 上传到网上的站点名称必须是英文, 如本书所采用的项目是新城实验小学, 所以将站点命名为 school 建立站点步骤如下 : (1) 打开 Dreamweaver CS6, 选择菜单栏上的 [ 站点 ]/[ 新建站点 ] 命令, 弹出如图 1-6 所示站点设置对象对话框 (2) 在站点名称中输入站点名称如 school, 在本地文件夹中选择 D://sxcschool (3) 单击保存按钮注意 : 本地文件夹路径不能出现中文图 1-6 站点设置对象对话框图 1-7 新建的 school 站点此时在 Dreamweaver 工作界面右侧浮动面板组中的文件面板中的文件标签下就能看到刚才新建的站点 school, 如图 1-7 所示在站点文件列表下新建文件和文件夹步骤如下 : (1) 在站点文件列表中右键单击站点 school(d:\school), 在弹出的菜单中选择新建文件夹, 文件列表中就会出现名为新建文件夹的文件夹, 将该文件夹命名为 images, 同样操作建立 css 文件夹 js 文件夹 html 文件夹和 media 文件夹 (2) 在站点文件列表下新建文件有 2 种方法 : a) 选择 [ 文件 ]/ [ 新建 ] 或者按 Ctrl+N 键, 在弹出的新建文档对话框中, 页面类型选择 HTML, 文档类型选择 XHTML 1.0 Transitional, 单击创建按钮, 就新建了一个 HTML 网页, 然后再选择 [ 文件 ]/ [ 保存 ] 或者是按 Ctrl+S 键, 将网页名称改为 index.html b) 在站点文件列表中右键单击 html 文件夹, 在弹出的菜单中选择新建文件, 文件列表中就会出现名为新建文件的网页文件, 按照图 1-5 的网站内容规划图, 将该文件

建立完站点后, 可以返回去设置站点默认的图片文件夹的路径, 这样一旦在网页中插入图片, 会自动保存到默认的图片文件夹选择菜单下 [ 站点 ]/[ 管理站点 ] 命令, 在您的站点中选中刚建立 school 站点, 单击 ( 编辑当前选定站点 ) 图标, 弹出站点设置对象 school 对话框, 单击左侧高级设置, 选择本地信息,

12 命名为 intro.html( 学校概况页 ), 同样操作建立 teachervideo.html( 教学视频页 ), newslist.html ( 新闻中心页 ),login.html( 家长注册页 ) 如果要对所建的文件或者文件夹进行编辑, 可以在需要编辑的文件或者文件夹上单击右键, 在弹出的菜单中选择编辑, 就可以进行剪切拷贝粘贴复制删除重命名操作最终的新城实验小学站点结构如图 1-8 所示图 1-8 新城实验小学站点结构图图 1-9 站点设置对象 school 对话框 3 管理站点建立完站点后, 可以返回去设置站点默认的图片文件夹的路径, 这样一旦在网页中插入图片, 会自动保存到默认的图片文件夹选择菜单下 [ 站点 ]/[ 管理站点 ] 命令, 在您的站点中选中刚建立 school 站点, 单击 ( 编辑当前选定站点 ) 图标, 弹出站点设置对象 school 对话框, 单击左侧高级设置, 选择本地信息, 把默认图像文件夹设为站点下的 image 文件夹, 如图 1-9 所示, 单击保存按钮 [ 管理站点 ] 菜单还可以实现, 删除选定站点复制当前站点导出当前站点导入站点新建站点等操作三浏览器的选择从网景的一枝独秀到 IE 借 windows 操作系统称王, 从火狐 (Mozilla Firefox) 跑进万家到谷歌 (Chrome) 青出于蓝浏览器已经成为了我们必不可少的软件之一, 浏览器的主要功能是将用户选择的 web 资源呈现出来, 浏览器的内核不同, 对网页编写语法的解析也有所不同, 呈现的效果也会不同

13 现在在市面上占主要地位的浏览器内核有以下几种 :Trident 内核 ( 主要是 Microsoft Internet Explorer 使用 ),Presto 内核 (Opera 浏览器 9.5 及之前版本 ),Kestrel 内核 (Opera9.5 之后的版本 ),Gecko 内核 (Mozilla Firefox 浏览器 ) 和 Webkit(Safari 及 Chrome 浏览器 ), 不同的内核带来的是对网页文件的不同解析方式可能很多人遇到过同一个网页用 A 浏览器浏览正常但是用 B 浏览器就会出现网页元素, 图片, 文字错位以及其他种种不兼容现象, 造成这种不兼容现象的主要原因就是各个浏览器的内核不同在做前端开发时我们至少要兼容 IE Firefox Chrome 三大浏览器,IE 浏览器要向下兼容到 IE7.0 版本可以采用浏览器自带的调试工具调试网页, 主要是 html css 调试和 js 调试,Firefox 浏览器需要安装 Firebug 插件进行调试现在我们拿 index.html 页面向大家讲解如何利用调试工具调试网页 (1) 在站点文件夹列表中双击 index.html, 打开文件, 在文档工具栏中切换到代码视图, 输入如下代码 <body> <p onclick="shucu()"> 我爱前端学习网 </p> <script type="text/javascript"> function shucu() { alert(" 欢迎来到前端学习网!"); /* 弹出一个对话框 */ console.log(" 欢迎来到前端学习网!"); /* 在控制台输出内容 */ } </script> </body> (2) 单击文档工具栏按钮, 在弹出的菜单中选择预览在 IEplore 或者按 F12, 启动 IE 浏览器预览该网页 (3) 在网页上按 F12 启动 IE 调试工具, 在调试窗口中, 单击面板, 回到页面内容, 单击网页上的我爱前端学习网, 在网页上弹出欢迎来到前端学习网! 对话框, 同时在控制台上会输出文字 : 欢迎来到前端学习网!,IE11 版本的网页效果如图 1-10 所示, 单击弹出框上的按钮, 回到调试窗口, 单击面板, 该面板下的功能就是仿真网页文档在 IE 各版本浏览器下的显示效果模式, 包括 : 模拟浏览

器模式模拟显示和模拟地理位置三部分内容模式仿真可以模拟包括文档模式浏览器配置文件和用户代理字符串, 用户代理字符串也就是俗称的 UA 文档模式会告诉 IE 的页面排版引擎 (Trident) 以哪个版本的方式来解析并渲染网页代码如果我们想要看到某个网页在各个 IE 版本下页面效果, 就可以切换 IE11 的文档模式来查看, 如图

html 在 IE11 中的预览效果图 1-11 IE11 仿真面板 (4) 回到 Dreamweaver 的工作窗口, 单击文档工具栏按钮, 在弹出的菜单中选择编辑浏览器列表, 弹出首选参数对话框, 如图所示, 单击按钮, 弹出添加浏览器对话框, 如图所示, 在名称中输入 chrome, 单击按钮, 选择

14 器模式模拟显示和模拟地理位置三部分内容模式仿真可以模拟包括文档模式浏览器配置文件和用户代理字符串, 用户代理字符串也就是俗称的 UA 文档模式会告诉 IE 的页面排版引擎 (Trident) 以哪个版本的方式来解析并渲染网页代码如果我们想要看到某个网页在各个 IE 版本下页面效果, 就可以切换 IE11 的文档模式来查看, 如图 1-11 所示模拟显示可以模拟网页在不同屏幕分辩率屏幕横向或者纵向的显示效果模拟地理可以模拟 GPS, 显示经纬度图 1-10 index.html 在 IE11 中的预览效果图 1-11 IE11 仿真面板 (4) 回到 Dreamweaver 的工作窗口, 单击文档工具栏按钮, 在弹出的菜单中选择编辑浏览器列表, 弹出首选参数对话框, 如图所示, 单击按钮, 弹出添加浏览器对话框, 如图所示, 在名称中输入 chrome, 单击按钮, 选择 chrome.exe 文件, 单击按钮以同样的方式添加 Firefox 浏览器 (5) 单击文档工具栏按钮, 在弹出的菜单中选择预览在 Firefox, 启动 Firefox 浏览器预览该网页, 在网页上按 F12 启动 Firefox 调试工具, 重复步骤 3, 效果如图 1-12 所示 (6) 单击文档工具栏按钮, 在弹出的菜单中选择预览在 chrome, 启动 Google Chrome 浏览器预览该网页, 在网页上按 F12 启动 Chrome 调试工具, 单击选项卡, 重复步骤 3, 效果如图 1-13 所示

可以用来选择网页中的任意元素对象, 且能在控制窗口中看到该对象的 HTML 代码,CSS 代码, 随时进行代码的编辑, 并观看效果 Elements: 页面元素, 可以进行编辑, 保存后实时查看页面效果 Console: 此功能是模拟

15 图 1-12 index.html 在 Firefox 中的效果图 1-13 index.html 在 Firefox 中的效果 (7) 单击弹出框上的按钮, 回到调试窗口, 如图所示, 下面给大家详细介绍下 Chrome 调试台, 如图 1-14 所示图 1-14 Chrome 调试台 : 选择对象工具, 可以用来选择网页中的任意元素对象, 且能在控制窗口中看到该对象的 HTML 代码,CSS 代码, 随时进行代码的编辑, 并观看效果 Elements: 页面元素, 可以进行编辑, 保存后实时查看页面效果 Console: 此功能是模拟 js 控制台, 可以直接写 js 代码, 查看结果高级功能使用时开启断点调试, 查看变量的变化过程 Network: 查看 js 模拟的 http 请求 Sources: 此功能是 js 页面调试中最突出的功能, 左侧 sources 目录可以展开, 查看加载本页面所调用的资源, 如 js,css,php 此处断点调试, 能够顺序的看到程序的执行过程 Timeline: 查看页面性能, 页面渲染速度的

16 Profile: 测试加载文件速度参考 Resources: 是查看加载页面所用的资源, 链接的数据库, 域名下保存的 cookie Audits: 性能测试项目总结通过完成本项目, 让学生熟知网站基础知识, 对网站开发有所认知, 了解 WEB 标准的核心准则, 会使用 Dreamweaver CS6 设计网页, 并使用常见的 IE Firefox Chrome 浏览器调试网页

ASP 電子商務網頁設計

ASP 電子商務網頁設計 Flash Flash CSIE, NTU December 22, 2007 Outline & Flash National Taiwan University December 22, 2007 Page 2 Outline & Flash National Taiwan University December 22, 2007 Page 3 Course Introduction (1/3)