web前端开发
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.1 Web前端开发设计？？ • 网页设计师、Web前端设计师与网站开发 工程师、交互设计师等区别： • 网站开发工程师：掌握ASP、PHP、.NET、 JSP等开发语言，熟悉运用Access、SQL语 言、SQL数据库等；对IIS、Apache等服务 器有一定的理解等
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.3 纠结的浏览器兼容问题
• CSS Hack（解决兼容问题）：
• 由于不同的浏览器对CSS的支持及解析结果 不一样，还由于CSS中的优先级的关系。我 们就可以根据这个来针对不同的浏览器来 写不同的CSS。 • 1、IE6能识别下划线"_"和星号" * "；IE7能 识别*+html和星号" * "；backgroundcolor:red\0 IE8能识别\0；backgroundcolor:blue\9\0 仅IE9支持
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.1 Web前端开发设计？？ • 网页设计师、Web前端设计师与网站开发 工程师、交互设计师等区别： • 交互设计师：秉承以用户为中心的设计理 念，应用“以目标为导向的设计”方法， 进行互联网产品的设计。
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.2 Web标准？Xhtml？ • 如何新建Xhtml文件？（初期建议用记事本 书写代码！）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.2 Web标准？Xhtml？
• Xhtml（html）语法规则：
• <div id="header"> <div id="nav"> <ul> <li><a href="">首页</a></li> <li><a href="">节目</a></li> </ul></div> <div id="ad"> <a href="" target="_blank"><img src="" alt="" title="" /></a></div> </div>（结构化代码）
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
wk.baidu.com
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.3 纠结的浏览器兼容问题
• CSS Hack（解决兼容问题）：
<!--[if !IE]> 除IE外都可识别 <![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if lt IE 6]> IE6以下版本可识别 <![endif]--> <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--> 结语：积累经验解决兼容问题
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.3 纠结的浏览器兼容问题
• 浏览器兼容测试：（除了IE其他都可以下
载测试） • 在火狐浏览器中安装插件Firebug、 Compatibility Detector for Firefox （两个插件非常强大！！）
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.2 Web标准？Xhtml？ 如何验证Xhtml？ http://jigsaw.w3.org/css-validator/ http://validator.w3.org/ 学习网站推荐： http://www.w3school.com.cn/index. html • http://www.oschina.net/ • http://www.cssrain.cn/ • • • • •
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.3 纠结的浏览器兼容问题
• CSS Hack（解决兼容问题）：
• 火狐和IE7能识别"!important"； #divcss1{
background:blue; /*Firefox 背景变蓝色*/ *+background:green !important; /*IE7 背景变绿色*/ _background:orange; /*IE6 背景变橘色*/ background:black\0; /*IE8 背景为黑色*/ background:red\9\0; /*IE9 背景为红色*/ body:nth-of-type(1) background:red; /*Chrome Safari 背景为红色*/ }
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.1 Web前端开发设计？？ • Web前端开发是从网页制作演变而来的， 是web2.0的产物，包括三个要素：HTML、 CSS和JavaScript（web3.0与web1.0？）
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.2 Web标准？Xhtml？
• Xhtml（html）语法规则：
• 属性不能简写（<input checked="checked" />） • 用 id 属性代替 name 属性（<img src="picture.gif" id="picture1" />） • 在 "/" 符号前添加一个额外的空格，以使你 的 XHTML 与当今的浏览器相兼容 • <img src="" alt="……" title="……" />
NO.3 纠结的浏览器兼容问题
• 这些浏览器算什么？？？
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.3 纠结的浏览器兼容问题
• 浏览器兼容测试：（除了IE其他都可以下
载测试） • 下载IETester，地址：http://www.mydebugbar.com/wiki/IETester/HomeP age • 在线测试：http://browsershots.org/ （需要已上线）、 https://browserlab.adobe.com/enus/index.html（Adobe，需要注册）
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.4 html标签/元素和属性
• HTML 指的是超文本标记语言 (Hyper Text Markup Language) • HTML 不是一种编程语言，而是一种标记语言 (markup language) • 标记语言是一套标记标签 (markup tag) • HTML 使用标记标签来描述网页 • HTML 标签是由尖括号包围的关键词，比如 <html> • HTML 标签通常是成对出现的，比如 <p> 和 </p>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> </body> </html>
transitional是过渡版（默认选择） strict是严格版、frameset为框架版
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.2 Web标准？Xhtml？
• Xhtml（html）语法规则：
• 不要在注释内容中使“--”，如（<!--这里 是注释-----------这里是注释--> 是不行 的！） • <a href="http://radio.wuyiu.edu.cn/" title=""></a> • 把所有<和&特殊符号用编码表示，如（大 于号用& g t ；小于号用& l t ；）
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.3 纠结的浏览器兼容问题
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.2 Web标准？Xhtml？ • XHTML 是更严谨更纯净的 HTML 版本。 XHTML 与 HTML 4.01 标准没有太多的不 同。（目前最新为HTML 5） • XHTML 是 HTML 与 XML（扩展标记语言） 的结合物。 • XHTML 1.0在2000年1月26日成为W3C的 推荐标准。（其标准应用为CSS+DIV）
@请叫我周某人 @武夷学院广播台
http://radio.wuyiu.edu.cn
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.2 Web标准？Xhtml？
• Xhtml（html）语法规则：
• 元素必须被正确地嵌套 • 元素必须被关闭（如<p></p>）、非空标 签必须使用结束标签（<br />） • 元素必须小写（标签名和属性对大小写敏 感）（<body><a></a></body>） • 属性值必须加引号（<table width="100%"> </table>）
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.3 纠结的浏览器兼容问题
• CSS Hack（解决兼容问题）：
<html><head> <meta http-equiv="x-ua-compatible" content="ie=7" /> </head></html>（使ie8、ie9使用ie7模式显示）
火龙果整理 uml.org.cn
网络部培训 2 0 12
火龙果整理 uml.org.cn
NO.1 Web前端开发设计？？ • 网页设计师、Web前端设计师与交互设计 师、网站开发工程师等的区别： • 网页设计师是指精通Photoshop、 CorelDRAW、Flash、Illustrator、 Dreamweaver等多项网页设计工具的网页 设计人员
NO.3 纠结的浏览器兼容问题
• 你们知道哪些浏览器？？
IE7/IE8 IE9 Google Chrome Opera
火狐Firefox
Apple Safari
http://radio.wuyiu.edu.cn
@请叫我周某人 @武夷学院广播台
网络部培训 2 0 12
火龙果整理 uml.org.cn