交互网页设计培训课程

1、NACGNACG全国信息化工程师数字艺术专业人才认证交互网页大师班课程2014.7.21NACGNACG全国信息化工程师数字艺术专业人才认证课程主要内容lWeb前端技术介绍l自适应网页设计l开源技术介绍l案例实践NACGNACG全国信息化工程师数字艺术专业人才认证前言与网络有关的那些事NACGNACG全国信息化工程师数字艺术专业人才认证无处不在的网络l这两天上海什么天气?l从这里到外滩怎么走?l星期五下午回家买哪个车次的票?NACGNACG全国信息化工程师数字艺术专业人才认证不是从石头缝里蹦出来的猴子美国国防部先进研究项目局NACGNACG全国信息化工程师数字艺术专业人才认证域名 Web前端技

2、术Web Front-endNACGNACG全国信息化工程师数字艺术专业人才认证Web项目组成员l项目经理lUI设计师lWeb前端开发工程师lWeb后台开发工程师l数据库开发工程师NACGNACG全国信息化工程师数字艺术专业人才认证招聘NACGNACG全国信息化工程师数字艺术专业人才认证Web前端开发所需掌握的技术JavaScriptCSSHTMLNACGNACG全国信息化工程师数字艺术专业人才认证1.1 HTML超文本标记语言NACGNACG全国信息化工程师数字艺术专业人才认证HTML有什么作用NACGNACG全国信息化工程师数字艺术专业人才认证世界上第一张网页info.cern.ch199

3、1-8-6Tim Berners-LeeNACGNACG全国信息化工程师数字艺术专业人才认证Hello, WorldNACGNACG全国信息化工程师数字艺术专业人才认证基础标签之段落标签NACGNACG全国信息化工程师数字艺术专业人才认证段落标签使用中的注意点NACGNACG全国信息化工程师数字艺术专业人才认证基础标签之标题标签NACGNACG全国信息化工程师数字艺术专业人才认证基础标签之无序列表标签NACGNACG全国信息化工程师数字艺术专业人才认证基础标签之有序列表标签NACGNACG全国信息化工程师数字艺术专业人才认证基础标签之超链接标签NACGNACG全国信息化工程师数字艺术专业人才认

4、证超链接标签使用中的注意点l正斜杠要添加到子文件夹lTarget属性lAnchor锚NACGNACG全国信息化工程师数字艺术专业人才认证基础标签之图像标签NACGNACG全国信息化工程师数字艺术专业人才认证图像标签使用中的注意点laltl空元素l浏览器和图像文件格式l图像文件路径：相对路径和绝对路径NACGNACG全国信息化工程师数字艺术专业人才认证基础标签之div标签NACGNACG全国信息化工程师数字艺术专业人才认证让我们来试试看NACGNACG全国信息化工程师数字艺术专业人才认证总体流程前期策划项目实施NACGNACG全国信息化工程师数字艺术专业人才认证流程1前期策划l 明确网站主题、栏

5、目设置、整体风格、所需功能l 域名申请、虚拟主机或服务器的购买、开发周期、后期维护l 费用分类分类典型特征典型特征方案方案浏览者只看不回为他们提供方便的检索及友好的推荐参与者会回帖，在有强烈抒发意愿时会回帖为他们提供简单的发布方式分享者积极写帖、回帖，渴望认同、奖励为他们设置排行榜，提供及时的用户反馈某购物网站对用户行为的分类NACGNACG全国信息化工程师数字艺术专业人才认证流程2项目细化及实施l页面美工设计l静态页面制作l程序开发NACGNACG全国信息化工程师数字艺术专业人才认证静态页面制作区分内容用标签表示提取内容分类颜色提取尺寸分离背景图分离图标及特殊边框拆分图纸NACGNACG全国

6、信息化工程师数字艺术专业人才认证NACGNACG全国信息化工程师数字艺术专业人才认证NACGNACG全国信息化工程师数字艺术专业人才认证HTML语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。让HTML告诉浏览器：“这行是一个标题，这几行组成了一个段落。这些文字是项目列表，这些文字是链接到互联网上另一个文件的超链接。”不应该让HTML来告诉浏览器：“这些文字是蓝色的，这些文字又是红色的。这部分内容是最最靠右的一栏，这行内容是斜体字。”NACGNACG全国信息化工程师数字艺术专业人才认证HTML语义化的好处l去掉或样式丢失的时候能让页面呈现清晰的结

7、构l对搜索引擎友好l便于团队开发和维护NACGNACG全国信息化工程师数字艺术专业人才认证HTML标签权重NACGNACG全国信息化工程师数字艺术专业人才认证偷师学艺NACGNACG全国信息化工程师数字艺术专业人才认证让我们来试试看NACGNACG全国信息化工程师数字艺术专业人才认证1.2 CSS层叠样式表NACGNACG全国信息化工程师数字艺术专业人才认证Hello, CSSNACGNACG全国信息化工程师数字艺术专业人才认证常用样式属性lBorderlWidthlHeightlBackgroundlColorNACGNACG全国信息化工程师数字艺术专业人才认证CSS文本属性NACGNACG

8、全国信息化工程师数字艺术专业人才认证文本CSS中的注意点l文本垂直居中l首行缩进l隐藏单行文字NACGNACG全国信息化工程师数字艺术专业人才认证让我们来试试看NACGNACG全国信息化工程师数字艺术专业人才认证网页的三个层次NACGNACG全国信息化工程师数字艺术专业人才认证结构、表现、行为分离原则l增加网页的灵活性l减少工作量NACGNACG全国信息化工程师数字艺术专业人才认证CSS的使用方法lInline Style（内联样式）lEmbedded Style（内嵌样式）lLink Style（ 外部样式）NACGNACG全国信息化工程师数字艺术专业人才认证Embedded StyleNA

9、CGNACG全国信息化工程师数字艺术专业人才认证Link StyleNACGNACG全国信息化工程师数字艺术专业人才认证选择器lID选择器l类选择器l包含选择器l分组选择器NACGNACG全国信息化工程师数字艺术专业人才认证继承 子元素自动被赋予父元素的样式NACGNACG全国信息化工程师数字艺术专业人才认证层叠优先级高的CSS规则覆盖优先级低的规则NACGNACG全国信息化工程师数字艺术专业人才认证CSS盒模型NACGNACG全国信息化工程师数字艺术专业人才认证浮动NACGNACG全国信息化工程师数字艺术专业人才认证让我们来试试看NACGNACG全国信息化工程师数字艺术专业人才认证清理浮动N

10、ACGNACG全国信息化工程师数字艺术专业人才认证1.3 Layout网页布局NACGNACG全国信息化工程师数字艺术专业人才认证网页布局的发展表格布局DIV+CSS布局NACGNACG全国信息化工程师数字艺术专业人才认证2002年Yahoo首页NACGNACG全国信息化工程师数字艺术专业人才认证使用DIV+CSS布局NACGNACG全国信息化工程师数字艺术专业人才认证让我们来试试看NACGNACG全国信息化工程师数字艺术专业人才认证综合案例NACGNACG全国信息化工程师数字艺术专业人才认证让我们来试试看NACGNACG全国信息化工程师数字艺术专业人才认证960GRID SYSTEMNACG

11、NACG全国信息化工程师数字艺术专业人才认证960Grid从入门 到精通http:/ JavaScriptbehaviorNACGNACG全国信息化工程师数字艺术专业人才认证JavaScript能干什么NACGNACG全国信息化工程师数字艺术专业人才认证当初怎么会有JavaScriptNACGNACG全国信息化工程师数字艺术专业人才认证最简单的JavaScriptNACGNACG全国信息化工程师数字艺术专业人才认证JavaScript的第二春NACGNACG全国信息化工程师数字艺术专业人才认证JavaScript框架NACGNACG全国信息化工程师数字艺术专业人才认证HBuilderhttp:

12、/dcloud.io/NACGNACG全国信息化工程师数字艺术专业人才认证jQuery基本语法页面打开鼠标移入鼠标移出NACGNACG全国信息化工程师数字艺术专业人才认证jQuery库和jQuery插件NACGNACG全国信息化工程师数字艺术专业人才认证第二部分 响应式网页设计Responsive Web DesignNACGNACG全国信息化工程师数字艺术专业人才认证Google开发者 2014NACGNACG全国信息化工程师数字艺术专业人才认证移动设备上网成为主流NACGNACG全国信息化工程师数字艺术专业人才认证我们面对的挑战l屏幕尺寸l网速l对于标准的支持l输入方式NACGNACG全国

13、信息化工程师数字艺术专业人才认证最稳定的解决方案针对特定中的设备开发独立的Web站点NACGNACG全国信息化工程师数字艺术专业人才认证终极解决方案响应式网页设计http:/ grids流动布局media queries媒介查询Scalable images自适应图片NACGNACG全国信息化工程师数字艺术专业人才认证2.1 布局LayoutNACGNACG全国信息化工程师数字艺术专业人才认证固定布局960Grid从入门到精通http:/ us try!NACGNACG全国信息化工程师数字艺术专业人才认证NACGNACG全国信息化工程师数字艺术专业人才认证视口viewportNACGNACG全国信息化工程师数字艺术专业人才认证从桌面端向下设计NACGNACG全国信息化工程师数字艺术专业人才认证从移动端向上设计NACGNACG全国信息化工程师数字艺术专业人才认证增强对大屏幕的支持NACGNACG全国信息化工程师数字艺术专业人才认证导