响应式动态网站项目开发（jQuery+PHP+MySQL+Apache）全套PPT课件.pptx

CONTENTS;安装/使用

WampServer;1.运行下载好的WampServer2.0c.exe”,单击“Next”进行下一步;2.确认同意软件安装使用许可条例，选中“Iaccepttheagreement”单选按钮，单击“Next”按钮。;3.选择安装路径，也可以不选，默认程序安装路劲,点击“Next”进行下一步。;4.两个复选框，我们这里都不勾选直接点击“Next”进行下一步。;5.点击“Install”进行下一步。;6.进入安装过程界面。;7.跳出选择默认浏览器对话框，默认选择点击“打开”。;8.在“SMTP：”下文本框输入“localhost”，在“Email：”下文本框输入“you@yourdomain”，点击“Next”进行下一步。;9.安装完成后，提示“现在运行软件WampServer”,点击“FINISH”,即可运行该软件。;TIPS:

要测试Wamp是否运行。

1.程序启动后，鼠标左击该程序，“Localhost”即可打开默认首页。;TIPS:

2.默认弹出首页。;设置PHP;PART.2;PART.2;PART.2;PART.2;PART.2;PART.2;PART.2;THANKYOU!;CONTENTS;CSS3基础;PART.1;PART.1;PART.1;PART.1;PART.1;PART.1;PART.1;PART.1;控制标题样式;PART.2;PART.2;控制网页背景与字体;PART.3;PART.3;向css中添加完网页图片代码后，保存它，刷新网页。;PART.3;PART.3;再次保存CSS样式表，刷新页面;PART.3;background-size是CSS3新增加的一个属性，它允许我们随意控制背景图片的尺寸。使用时，它的属性值可以是像素，百分比或者auto，还可以是cover和contain。;巩固小练习;THANKYOU!;CONTENTS;创建ＨＴＭＬ５基本文档;PART.1;PART.1;PART.1;PART.1;PART.1;PART.1;PART.1;到这里就会发现，刚刚编写的HTML5文档的最顶部代码与普通的HTML文档是有差别的。当使用浏览浏览网页文档时，这行代码会向浏览器声明该网页文档是HTML5文档，浏览器会按HTML5文档格式进行解析。;编写正文主体;;无序列表使用ul/ul标签，每个列表项用li/li标签。如下所示；;h2中国网页浏览器的占有率/h2

ol

liInternetExplorer/li

liFirefox/li

liMobileSafari/li

liChrome/li

/ol;打开实时视图，查看网页。可以发现有序列表与无序列表的区别，有序列表的子列表前使用数字序号1、2??3、4来表示。;定义列表以dl标签开始，每个自定义列表项以dt开始，每个自定义列表项的定义以dd开始。;PART.2;HTML5章节元素;一个典型的div标记的两列布局与id和class属性。它包含了一个页眉，页脚，和标题下方的水平导航条。主要内容包括对文章的侧边栏。;使用div元素主要是因为当前的版本HTML4缺乏必要的语义描述这些部分更具体。HTML5解决了这个问题，通过引入新的元素代表的每个这些不同的部分。;div元素可以更换同新的元素：header,nav,section,article,aside,and和footer。该文档的标记可以像这样：;标记与标题标记嵌套（H1元素）使用：;PART.3;PART.3;PART.3;section代表一个文件或应用程序的通用部分，如目录。;PART.3;THANKYOU!;CONTENTS;添加和使用JQuery;PART.1;PART.1;PART.1;PART.1;PART.1;PART.1;PART.1;PART.1;PART.1;PART.1;PART.1;PART.1;PART.1;PART.1;PART.1;响应式前端框架;PART.2;访问/themeroller/的jQueryThemeRoller在线应用。建立自己的样式后下载。;文件解压缩之后，会得到如下的目录结构:/css//development-bundle//js/;需要在使用jQueryUI微件和交互的页面里从剩余的其他文件中引用主题以及jQuery和jQueryUI。;THANKYOU!;CONTENTS;全局UI样式概览;PART.1;PART.1;PART.1;修改程序代码:

2.除了要让拖放元素成为可拖放的，还需要把这个新div指定为可放置区域：

$(#dropdiv).