《html+css+jquery(七大队网络部PPT)》由会员分享，可在线阅读，更多相关《html+css+jquery(七大队网络部PPT)（29页珍藏版）》请在金锄头文库上搜索。
1、HTML & CSS+jquery,HTML so called hypertext markup language, because the text contains a so-called “super link“ point. The so-called super links, is a URL Pointers, through the activation (click on it, can make the browser to facilitate access to a new page. This also is HTML being widely applied one
2、 of the most important reason. CSS is Cascading Style Sheet of the abbreviations. Translation “cascading style form“. Is used to (enhancement) control and allows web page style will style information and web content of the separation of a markup language.,前端设计,什么是 HTML ?,超文本标记语言，即HTML（Hypertext Mark
3、up Language），是用于描述网页文档的一种标记语言。,七大队网络部,HTML 的基本语法格式,HTML 元素语法 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 空元素在开始标签中进行关闭（以开始标签的结束而结束）,七大队网络部,HTML 的基本语法格式,语法格式,Example,This is my first paragraph.,七大队网络部,网页文档的结构和格式的定义是由HTML元素来完成的，HTML元素是由单个或一对标签定义的包含范围。 简单示例 ,开始标签,结束标签,属性/值,内容,HTML简单示例,七大队网络部,HTM
4、L 的基本文档格式,大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。 HTML 文档由嵌套的 HTML 元素构成。,七大队网络部,HTML 文档声明标签,来声明它采用哪种标准来解析当前网页, HTML5下 ,七大队网络部,HTML 的头部标记,：用于设置一些头信息，可以没有我的网页标题 显示在浏览器标题栏上, 定义CSS格式 用于定义脚本，例如：javascript,七大队网络部,什么是 CSS ？,CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 中，是为了解决内容与表现分
5、离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠,七大队网络部,CSS 基本语法,选择器 CSS 类选择器 CSS ID 选择器 CSS 属性选择器,注释 /*内容*/,七大队网络部,怎样使用 CSS ？,元素中直接使用从页面头部调用采用链接的形式调用, 选择符属性:属性值; ,七大队网络部,未使用csshtml网页未使用csst的html网页这是一个未使用css的html网页,HTML代码,七大队网络部,添加 CSS,使用了css的html网页h2 font-size:50pfont-size:20;font-style:italic使用了c
6、ss的html网页这是一个使用了css的html网页,七大队网络部,为什么 DIV+CSS = HTML+CSS, 可定义文档中的分区或节（division/section）。标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。,七大队网络部,盒子模型 Box Model,盒子模型 内容(content)、填充、边框(border)、内边界(padding)、外边界(margin)， CSS盒子模式都具备这些属性。,七大队网络部,盒子模型 Box Model,七大队网络部,CSS
7、 布局,图片大致分为以下几个部分1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。,七大队网络部,CSS 布局,图片大致分为以下几个部分1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。,七大队网络部,About 设计,七大队网络部,Jquery 简介,jQuery 是一个兼容多浏览器的javascript库jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、even
8、ts、实现动画效果，并且方便地为网站提供AJAX交互。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。核心理念是：write less,do more。,$“#id” 等价于 document.getElementById(“id“);$“tagName” 等价于 document.getElementsByTagName(“tagName“);,七大队网络部,Jquery 效果,/显示与隐藏$(document).ready(function()$(“button“).click(function()$(
9、“p“).toggle();); ); ,/淡入淡出$(document).ready(function()$(“button“).click(function()$(“#div1“).fadeIn();$(“#div2“).fadeIn(“slow“);$(“#div3“).fadeIn(3000);); ); ,七大队网络部,Jquery 动画,/连续动作$(document).ready(function()$(“button“).click(function()$(“#p1“).css(“color“,“red“).slideUp(2000).slideDown(2000);); );
10、 ,/动画效果$(document).ready(function()$(“button“).click(function()$(“div“).animate(left:100px,“slow“); $(“div“).animate(fontSize:3em,“slow“);); ); ,七大队网络部,Tool 工具推荐,Notepad+,a.内置支持多达27种语法高亮度显示 b.可自动检测文件类型，根据关键字显示节点，节点c.可自由折叠/打开，还可显示缩进引导线，代码显示得很有层次感； d.可打开双窗口，在分窗口中又可打开多个子窗口4，允许快捷切换全屏显示模式(F11)，支持鼠标滚轮改变文档
11、显示比例；,七大队网络部,推荐资料,w3school 在线教程 http:/ http:/61.187.16.3:81/StuActivityDetail.aspx?id=412,网页设计大赛,七大队网络部,活动时间：4月25日-5月16日初赛作品制作、提交阶段5月16日-5月22日初赛作品评选以及通知参加决赛选手5月23日 举行决赛,报名方式以及作品提交：参赛选手在我大队网站上下载报名表，（报名不收取任何费用），各参赛选手将报名表（纸质）和作品（以“XX大队XX区队XX”命名）送至各大队负责人，再由负责人统一打包送至我大队。截稿日期为2013年5月16日。,1、内容(10分） A. 内容健康
12、，积极向上，无违反国家政策、法律的内容。 B. 内容新颖、详细而充实，具有观赏性。 C. 清晰表达设计意图。 2、结构(10分) A.栏目设置合理，导航分明，方便查阅，具有有很好的交互性。 B.网页运行畅通正常，网页链接无错误。 3、技术(25分) A. 文档、图形经过优化以加快下载的速度。 B. 多种软件结合运用，flash、gif和java特效等动态效果的实现 C. 可以采用html、ASP、PHP、JSP、ASP.NET等编程语言编写。 D. 在数据库，论坛等方面设计、应用的巧妙。,评分细则,七大队网络部,4、美工(25分) A. 版面简洁，文本、图案整齐美观。 B. 没有乱码和错误的表格 C. 按钮图片的制作美观、实用。 D. 图片使用得当，网页内各个元素搭配合理。 E. 色彩搭配协 调，有层次感，有利于浏览阅读。 5、创意(20分) A. 表现手法是否新颖、与众不同页面具有个人设计风格。 B. 内容定位是否独到、有特色 6、现场投票分(10分) 按照现场观众投票票数的排名名次计分。第一名的为10分，第二名9分，以此类推。,七大队网络部,做一件事总比想一千件事重要,期待你的参与！,七大队网络部,Thanks,非常感谢！,七大队网络部,
