网页制作入门教程
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<?php $con = mysql_connect("localhost","root","zhangyongkang"); mysql_select_db("zzz",$con); $result=mysql_query("INSERT INTO biao (name) VALUES ('zwy')"); if ($result !="") echo "success"; mysql_close($con); ?>
静态网页（html，xhtml等）
• 静态网页页面上的内容和格式一般不会改 变
客户端通过浏览器以URL地址的形式 向服务器发出访问Web页面的请求
服务器做出响应，并以超文本文件的 格式回传客户端所请求的Web页面 客户端 web服务器
• 动态网页（php，asp等）
能够直接通过网页更新内容，而不需要变更 网页代码进行更新
网页制作入门
Powed by 西电-卡卡
准备
• • • • • 下载编程软件 下载服务器文件 配置服务器（服务器原理） 配置站点 浏览网站
浏览器
浏览器 内核
• • • •
ห้องสมุดไป่ตู้
IE 火狐 Opera Chrome\ safari
Trident Gecko Presto Webkit
网页编程语言
HTML XHTML XML CSS
客户端发出访问请求 涉及数据库访问时，向 数据库提出访问请求
客户端
以Web页面的形式返 回请求 web服务器
进行数据库操作， 并返回操作结果
数据库服务器
所用软件
• • • • • • Dreamweaver（推荐） FrontPage zend studio eclipse php studio 记事本 。。。。。。
Dreamweaver
• 通过Dreamweaver可以直接生成一部分代 码 • 可视化界面，更利于入门 • 输入代码提示
初 始 化 截 图
JavaScript
<script language=“Javascript”> alert(“点击效果！”); </script>
PHP
插入到html <?php echo “此为插入语句！”?>
Linux+Apache+Mysql+PHP
开源代码举例（PHP）
• Discuz 论坛 • ECShop 电子商务
SEO
• • • • 少用框架 静态 伪静态 <meta>标签
做网站流程
• • • • • • • 确定网站主题 针对性搜集资料 制作网页 购买空间域名 备案（只针对大陆空间） 通过ftp上传到网站 浏览网页
引用外部CSS文件 <script language="javascript" type="text/javascript"> 引用外部JS文件
------------------------HTML-------------------------
主体
表格 <table> </table> 表单<form><form> 图片<img /> 层 <div> <div> 链接<a> </a> <p></p> <b><b> <hr/> <br/> …………………….
MySQL
1、通过代码查询插入
show databases; use 库; select database(); show tables; select * from 表; //选择数据库 //使用库 //进入库 //显示表 //显示表中的字段
create database zzz; //创建数据库 creat table biao; //创建表 create table biao (name VARCHAR(30)); //创建表中的字段 insert into 表 (name) values („值’); //为表中的字段赋值
服务器
服务器
ASP: PHP: IIS + Apache +
数据库
ACCESS （windows） MySQL
LAMP（开源）
Linux+Apache+Mysql+PHP
服务器
服务器
ASP: PHP: IIS + Apache +
数据库
ACCESS （windows） MySQL
LAMP（开源）
基本代码
HTML
<html> <head> <title>标题</title> <head> <body> 显示的内容 </body> </html>
头部 主体内容
------------------------HTML-------------------------
头部 <head> <meta name=“ ” http-equiv=“” content=“ ”> <title>标题</title> <head> Name属性 Keywords (关键字) description(网站内容描述) http-equiv 属性 Refresh(刷新)
例： <meta http-equiv="Refresh" content="2;URL=http://www.baidu.com" />
------------------------HTML-------------------------
头文件的一些链接，引用！
<link rel="stylesheet" type="text/css" href="css.css" />
推荐教程网站
http://www.w3cschool.cn/ w3school 在线教程 http://www.enet.com.cn/eschool/ eNet网络学院 http://tech.163.com/school/ 网易学院
祝大家学习愉快！
谢谢大家！
MySQL
2、通过视图化软件查询插入
CSS
• body { margin:0; color:#000000; font-family:"宋 体"; font-size:12px;} • div{ margin:0; padding:0;} • #banner { background-color:#999999; border:1px #333333 solid; width:760px; margin:1px auto; height:70px; padding:10px 0 10px 20px;} • .footer { width:780px; text-align:center; background:#666666; border:1px #333333 solid; margin:3px auto; padding:20px 0;; color:#FFFFFF;}
标签语言 （静态）
PHP ASP JSP .NET ACCESS MySQL SQL Server 程序语言 （动态）
解释语言 脚本语言
VBSCRIPT JAVASCRIPT
数据库
学网页顺序
1、搭建服务器 2、Html、XHTML等静态语言 3、CSS解释型语言+脚本语言 4、asp、php等动态网页编程语言 5、数据库（MySQL等）
静态网页（html，xhtml等）
• 静态网页页面上的内容和格式一般不会改 变
客户端通过浏览器以URL地址的形式 向服务器发出访问Web页面的请求
服务器做出响应，并以超文本文件的 格式回传客户端所请求的Web页面 客户端 web服务器
• 动态网页（php，asp等）
能够直接通过网页更新内容，而不需要变更 网页代码进行更新
网页制作入门
Powed by 西电-卡卡
准备
• • • • • 下载编程软件 下载服务器文件 配置服务器（服务器原理） 配置站点 浏览网站
浏览器
浏览器 内核
• • • •
ห้องสมุดไป่ตู้
IE 火狐 Opera Chrome\ safari
Trident Gecko Presto Webkit
网页编程语言
HTML XHTML XML CSS
客户端发出访问请求 涉及数据库访问时，向 数据库提出访问请求
客户端
以Web页面的形式返 回请求 web服务器
进行数据库操作， 并返回操作结果
数据库服务器
所用软件
• • • • • • Dreamweaver（推荐） FrontPage zend studio eclipse php studio 记事本 。。。。。。
Dreamweaver
• 通过Dreamweaver可以直接生成一部分代 码 • 可视化界面，更利于入门 • 输入代码提示
初 始 化 截 图
JavaScript
<script language=“Javascript”> alert(“点击效果！”); </script>
PHP
插入到html <?php echo “此为插入语句！”?>
Linux+Apache+Mysql+PHP
开源代码举例（PHP）
• Discuz 论坛 • ECShop 电子商务
SEO
• • • • 少用框架 静态 伪静态 <meta>标签
做网站流程
• • • • • • • 确定网站主题 针对性搜集资料 制作网页 购买空间域名 备案（只针对大陆空间） 通过ftp上传到网站 浏览网页
引用外部CSS文件 <script language="javascript" type="text/javascript"> 引用外部JS文件
------------------------HTML-------------------------
主体
表格 <table> </table> 表单<form><form> 图片<img /> 层 <div> <div> 链接<a> </a> <p></p> <b><b> <hr/> <br/> …………………….
MySQL
1、通过代码查询插入
show databases; use 库; select database(); show tables; select * from 表; //选择数据库 //使用库 //进入库 //显示表 //显示表中的字段
create database zzz; //创建数据库 creat table biao; //创建表 create table biao (name VARCHAR(30)); //创建表中的字段 insert into 表 (name) values („值’); //为表中的字段赋值
服务器
服务器
ASP: PHP: IIS + Apache +
数据库
ACCESS （windows） MySQL
LAMP（开源）
Linux+Apache+Mysql+PHP
服务器
服务器
ASP: PHP: IIS + Apache +
数据库
ACCESS （windows） MySQL
LAMP（开源）
基本代码
HTML
<html> <head> <title>标题</title> <head> <body> 显示的内容 </body> </html>
头部 主体内容
------------------------HTML-------------------------
头部 <head> <meta name=“ ” http-equiv=“” content=“ ”> <title>标题</title> <head> Name属性 Keywords (关键字) description(网站内容描述) http-equiv 属性 Refresh(刷新)
例： <meta http-equiv="Refresh" content="2;URL=http://www.baidu.com" />
------------------------HTML-------------------------
头文件的一些链接，引用！
<link rel="stylesheet" type="text/css" href="css.css" />
推荐教程网站
http://www.w3cschool.cn/ w3school 在线教程 http://www.enet.com.cn/eschool/ eNet网络学院 http://tech.163.com/school/ 网易学院
祝大家学习愉快！
谢谢大家！
MySQL
2、通过视图化软件查询插入
CSS
• body { margin:0; color:#000000; font-family:"宋 体"; font-size:12px;} • div{ margin:0; padding:0;} • #banner { background-color:#999999; border:1px #333333 solid; width:760px; margin:1px auto; height:70px; padding:10px 0 10px 20px;} • .footer { width:780px; text-align:center; background:#666666; border:1px #333333 solid; margin:3px auto; padding:20px 0;; color:#FFFFFF;}
标签语言 （静态）
PHP ASP JSP .NET ACCESS MySQL SQL Server 程序语言 （动态）
解释语言 脚本语言
VBSCRIPT JAVASCRIPT
数据库
学网页顺序
1、搭建服务器 2、Html、XHTML等静态语言 3、CSS解释型语言+脚本语言 4、asp、php等动态网页编程语言 5、数据库（MySQL等）