WEB站点设计.docx
《WEB站点设计.docx》由会员分享，可在线阅读，更多相关《WEB站点设计.docx（13页珍藏版）》请在冰豆网上搜索。
WEB站点设计
WEB站点设计2017.9.15
一、WEB含义：
互联网等技术领域
二、特点：
1、图形化
2、WEB与平台无关
3、web是分布式的
4、web是动态的
5、web是交互的
三、表现形式
1、超文本
https：
//加密超文本传输协议
HTML超文本标记语言
HTML+CSS
四、WEB应用
1、web应用程序的两种模式
c/s客户端/服务端
b/s浏览器端服务端（必考！
）优点：
采用标准的通信协议（TCP/IP协议）、在服务器上处理、浏览器作为客户端的程序，以实现对数据的显示，不需要再为客户端单独编些和安装其他程序。
五、web分类
1、客户端技术：
主要任务是展现信息内容，如HTML语言、javaapplets、脚本程序、CSS（级联样式表）、DHTML（动态HTML）、插件技术（Flash等）
层次结构：
1、HTML结构层
2、CSS表现层
3、JAVAscript（脚本）行为层
2、WEB服务端技术：
由静态向动态逐渐发展
静态网站好处：
快、被XX收录更容易
弊端：
有技术需求，如果要改动改动很大，
2、WEB服务器技术主要包括服务器、CGI公共网关接口技术、php、asp活动服务器页面技术
2017.9.22
Web服务端技术
1、服务器技术
2、CGI，公共网关接口技术
3、PHP，解释性语言，
4、ASP活动服务器页面技术
5、ADP.NET
6、Servlet\JSP
Web1.0
由管理员发布消息，一个人管理网站内部。
静态界面、桌面浏览器、简单、同步
Web2.0
用户产生内容、社区化、合作化。
任何人可以参与创建。
Mashup和web服务、复杂的客户端软件、复杂、异步
Web3.0
任何人任何地点都可以创新。
代码编写都在云计算上完成
Web开发发展史
网页设计发展史
1、网页设计
2、表格table，表格布局
3、javascript
4、Flash
5、CSS，div一块一块处理，与表格相比
6、栅格和框架：
移动端的布局
7、响应式网络设计，就是使用不同的客户端、（手机、ipad、pc）显示内容可能不同。
CSS可以编程，可以根据屏幕大小编程。
Web开发技术演变
1、静态页面时代，改一条新闻，要改很多条信息
2、CGI公共网关接口技术，能够存一些数据在CGI
3、有代码写数据库，脚本语言
4、客户端写代码
5、服务器端3个代码
6、服务器和浏览器都改
7、浏览器变三个结构
……等等优化
站点
在很多地方存了很多资源
网页是构成网站的基本单位，是一个文件，存放在世界里某一个计算机里
URL
统一资源定位符，包含如何访问internet上资源的明确指令
电子商务网站主要功能
产品展示系统
信息发布
网上购物
网上支付
订单管理
商品管理
会员注册管理
商品搜素
促销管理
售后管理
超文本标记语言。
结构层html（骨架）、表现层css（屏幕缩小，就变成手机的浏览界面）、行为层javascript（捕获我们的行为）
Control+F查找
访问图片：
相对路径（去找一个人考虑到这个人的路径，不同的人到一个人的路径不同）../出文件夹x（进入x文件夹）/如果要再出文件夹就再../
虚拟路径（http：
//不存在，物理环境中不存在）
绝对路径（以C:
\或D：
\就是一个绝对路径，如：
D:
\18789.GHO）
表单
文本框value=“”自动填写进去
密码框也可以自动设置默认值value
Input重要
单选按钮name要对应，讲一下name属性，每一个框的name都要加上一个名字，如：
表单到哪里处理，是action
数据传到get.asp这也可以改为,就提交到华师的网站上了，虽然它不会处理，但我们已经提交了。
传的的值是value所写的
GET传输会把值传到传到的地址栏上,而post传输上面传到的地址很干净，
登录时一般不要用get传值
选择符（基本）：
基于html做选择符直接写p
Class.p1{color:
blue;}可重复
Id#p2{}id不可重复
复合选择符：
空格（包含）、
逗号（并列、共享）.p1，label{}
DREAMWARE8
Css注释
Html
-……---->
Css/**/
Js//
/**/
1、内容组织单页——点击他就是一个网页新闻动态就是列表外部链接、栏目（新闻动态下面还有栏目）
2、设计图（原型）Axure
3、设计
4、切片
切片内容：
切片要用的软件：
dreamwearer
Edutplus
Firework
Google
5、代码
6、调试
7、上线
8、反馈
9、修改8.9循环往复
11.6/11.10php基本语法以后phpcms
10.27切图
图片fireworks源图PS.PSDFW.PNG
建文件目录
建html
建css
建立html引用css
Php脚本语言（javascript）语法与c语言类似脚本语言是写好了后就直接运行以前是面向过程的，现在也可以面向对象
编译语言需要编（.class）文件编译再运行
Php环境——WAMP
其他的几种环境：
WNMPwindowsngnixmysqlphp
LAMPlunixapachemysqlphp
Php符号
Count115pagenum15
求多少页
{115+（15-1）}/15
（Count+{pagenum-1}）/pagenum
找零20-2找零10元一张1张5元3张1元/%
Foreach循环
php
echo"
";
$money=array（
"100块"=>100,
"50块"=>50,
"20块"=>20,
"10块"=>10,
"5块"=>5,
"1块"=>1,
）;
$total=20;
$pay=2;
$left=$total-$pay;
foreach（$moneyas$key=>$val）{
$num=intval（$left/$val）;
$left=$left%$val;
echo$key.":
".$num."张";
echo"
";
}
?
>
上题再进行一个
嵌套，就可以吧0去掉
foreach（$moneyas$key=>$val）{
$num=intval（$left/$val）;
if（$num>0）{
$left=$left%$val;
echo$key.":
".$num."张";
echo"
";}
}
?
>
带参数的函数调用
functionfindMoney（$total,$pay）{
$money=array（
"100块"=>100,
"50块"=>50,
"20块"=>20,
"10块"=>10,
"5块"=>5,
"1块"=>1,
）;
$left=$total-$pay;
foreach（$moneyas$key=>$val）{
$num=intval（$left/$val）;
if（$num>0）{
$left=$left%$val;
echo$key.":
".$num."张";
echo"
";}
}
echo"
";
}
findMoney（10,2）
面向对象
关键字class（类）
访问权限
属性定义（function）访问
方法定义访问（实例）
属性和方法注意带不带括号
带括号是方法，不带括号是属性
S私有的不能访问
classMan{
private$age=21;
private$name="song";
public$course=array（"Web站点","数据库"）;
publicfunctionsayHello（）{
echo$this->name.",Hello!
";
}
publicfunctionChangeAge（$num）{
$this->age=$this->age+$num;
echo"Age:
".$this->age;
}
}
$song=newMan（）;
$song->sayHello（）;
var_dump（$song->course）;
3$a\$a3336
B
dd
Joson和抓取要考
数据库
Insert插入数据
Update修改
Update表名
Set
字段名1=字段值1，字段名2=字段值2
Where字段名3运算符字段值3
Select查询符合条件数据
Deletefromstudent
Whereid=3
//1、获取参数post传值get
$s=$_POST[‘s’]
//2、拼写SQL
$sql="insertintoinfo（title,createtime,istop,cid,content,vreateman,hits）values（‘”.$s[‘title’]’,,,,’’,’’,）";
//3、连接数据库
include"conn.php"
//4、执行SQL
$list=mysql_query（$sql）;
//5、读取数据
//6、关闭数据库
mysql_close（）;
首页
列表
内容
单页
Phpcmsadmin。
Php内容
基本设置
安全配置域名。
Admin。
php
论述题，网站开发步骤，见手机
添加模型——本质是建表
添加栏目栏目（栏目下面是1文章或者2栏目，栏目进来第一种情况文章列表或者栏目这个栏目下面还可能是列表或单页，3单页、4链接）、列表、单页（单页只是一篇文章）、内容、链接
制作模板首先有首页、列表、单页、内容页单页和内容页可以合并
（首页模板、栏目模板！
！
！
栏目有下级模板进入栏目模板栏目没有下级栏目进入列表模板、列表模板
添加模型可以理解为添加表、添加字段
升级会员 