仓酷云

标题: 今天来学习第十天　div+css网页尺度结构实例教程（三） [打印本页]

作者: 小妖女 时间: 2015-1-16 10:31
标题: 今天来学习第十天　div+css网页尺度结构实例教程（三）
可以说Div+css代表的是网络世界发展的方向。它是网站标准中常用术语之一

前边两节学完后，前台事情基础上完成了，下边的义务该程序员增加程序了。为何说是基础完成呢？由于要做的事情还良多，不仅要把首页做出来，别的的列表页具体页等页面也得做。还要共同程序员把全部网站完成，如许才干出现给用户。应部分同砚的请求，解说一下程序怎样增加的，如许和程序员共同起来也更默契，另有怎样毗连FTP上传下载，前期呈现成绩怎样调试等等。增加程序部分只必要懂得就好了，毗连ftp上传下载，页面调试查找成绩这部分必定要把握哟。

创立服务器情况
创建数据库
当地和远程服务器毗连
php读取数据
页面调试及扫瞄器兼容

1、创立服务器情况

程序言语有多种，经常使用的有asp、php、jsp等，之前做的html页面，能够间接在扫瞄器上运转，由于html是客户端言语，而这些是服务器端言语，也就说你所看到的页面是经由服务器加工以后传输过去的，不论利用哪一种言语情况，终极目标就是把数据库的数据读掏出来展现到网页上。分歧的言语有分歧的运转情况，要想运转这些言语，起首要创立一个顺应他们的情况，下边以php为例，解说一下php情况的搭建。

点击下载：WampServer5集成情况
下载wamp安装完成后，php运转所需的Apache、MySQL、PHP5等都具有了，安装完成后必要启动WampSeaver，启动后会在托盘区显现一图标（如上图），当它一般运转后，申明服务器情况已创立乐成了。接上去翻开如上图中的php.ini文件，找到short_open_tag，把值改成On，感化是开启短标签撑持，以避免后边教程中利用短标签时报错。有关软件的安装，及服务器情况成绩本站不做过量先容，如想具体懂得，请百度相干文章，asp情况的搭建更复杂了，如想晓得，也请百度。
2、创建数据库

php的感化是从数据库读取数据，上面我们就先创立一个数据库，并录进部分数据。点击如上图的phpMyAdmin，然后会在扫瞄器中翻开数据库。创立一个名为：jiaocheng的数据库和news的表

设置表布局以下：

注重将ID字段设置为主键并在分外当选择auto_increment选项。表布局创立完后，选择拔出，拔出一条数据：

顺次拔出更多条数据，为前面程序挪用做筹办，选择性将某些数据拔出抽象图片，以便在幻灯处挪用。

3、当地和远程服务器毗连

只要当地和远程服务器毗连后，才干把我们做的页面上传到服务器下去运转。毗连的条件是你晓得服务器的地点及网管给你分派的用户名和暗码，有了这些后，在dw的站点——办理站点中，选中jiaocheng，然后编纂，在弹出的对话框当选择服务器选项，然后填写ftp地点，用户名和暗码，假如统统一般应当能够顺遂毗连了，点击测试按钮一下吧，假如没法毗连，就必要查找成绩了（上面的截图是dwcs5的界面，别的版本略有分歧）。

方才我们在本人电脑上创立了服务器情况，那末这里的毗连就用当地收集了。

设置完后，在文件面板站点上点击右键，选择上传，将文件上传到服务器文件夹中。

完了以后翻开扫瞄器，在地点栏中输出http://localhost/index.html，就能够会见，大概间接在dw中点击地球图标，也能够间接翻开扫瞄器预览。假如能一般翻开页面，申明当地和服务器毗连乐成，修正完文件后，把文件上传到服务器上就能够了。假如是协同办公，修正文件之前必定要先下载，如许才干包管当地的文件为最新，假如你前次修正完以后，他人又修正了，你没下载，间接修正当地的文件又上传了，那末他人的修正将被掩盖失落，以是必定要养成好习气，修正前先下载。

4、php读取数据

以上的事情都完成后，上面就该用程序读取数据了。起首必要创立一个数据库毗连文件，让php程序能够会见数据库，如许才干读取里边的数据，在根目次下创立一个inc文件夹，并创立一个conn.php文件，然后翻开文件，在源代码里拔出以下代码：

<?
$conn=mysql_connect("localhost","root","")ordie("数据库毗连堕落".mysql_error());
mysql_select_db("jiaocheng",$conn);
mysql_query("setnamesgbk");
?>

之以是独自创立一下文件，是由于后边良多页面都要用，如许只需包括这个页面便可，不必每一个页面再写这段代码了。数据库毗连文件创立好后，上面就该在index.html挪用了。注重：这里要将后缀改成php才行，假如仍是html的话，那末它将间接输入，不会经由服务器加工。接上去翻开index.php，在源代码的最顶部拔出以下代码，把conn.php文件包括出去：

<?
include("inc/conn.php");
?>

记得要把inc文件夹上传到服务器上哟。上面就先做“抢手旧事”列表吧，把本来做的#news_list下的ul列表改成以下情势：

<ul>
<?
$sql="select*fromnewsorderbyiddesclimit0,6";
$query=mysql_query($sql);
while($row=mysql_fetch_array($query)){
?>
<li><span><?=$row[add_time]?></span><ahref="#"><?=$row[title]?></a></li>
<?}?>
</ul>

第一句是创立一个sql查询语句，暗示查询news表以id的倒序分列且只查询前6条，接上去轮回读掏出来。上传预览一下吧，是否是变形了，一方面题目太长了，另外一方面日期应当只显现月和日，日期经由过程程序只取月日两位，处置题目有两种办法，一种是用程序截取，一种是css超越埋没。上面先把日期给改了，把<?=$row[add_time]?>交换为：<?=date(m-d,strtotime($row[add_time]))?>

把日期改短后，显现一般了，但为了避免今后呈现长题目把页面撑乱，让程序员注重截取一下题目大概你用css来完成，css超越埋没的话能够给li界说高度和overflow:hidden属性。得了，从数据库中读取数据出来，就这么复杂，上面说一下幻灯部分的完成吧。

和上边的读取办法一样，只不外用if判别一下$pic是不是为空，来办理开首没有|的成绩。上传上再预览一下吧，看看是否是显现出来了呢？是吧，已显现出来了，翻开源代码看看，方才我们增加的程序部分并没有显现出来，取而代之的是数据库中的数据，这就是程序的奇奥的地方。

好了，有关程序部分就讲这么多了，信任你也该分明是怎样回事了，剩下的你能够本人对比着制造个尝尝，假如你想进修程序的话，给人人保举之前我学过的教程，asp的话能够进修fif小组的asp视频教程，在百度里搜刮：fifasp，就出来了，第一个了局即是网易学院的fif视频教程；假如你对php感乐趣的话，倡议往php100中文网，听听张恩平易近先生解说的php系列教程，信任很快你也会成为一个程序妙手的。
5、页面调试及扫瞄器兼容

在和程序员共同完成网站的过程当中或网站上线后，经常会呈现一些小成绩，好比页面撑开，显现庞杂等，这时候候就必要查找成绩出在那里了。查找这些成绩，但愿人人装上火狐扫瞄器（由于它是绝对尺度的扫瞄器，如许显得你更专业一些，嘿嘿，最次要是有调试用的插件），装上以后还必要装两个插件：webdeveloper，firebug

插件的下载请点击上图中的猎取附加组件，然后输出关头字搜刮到后下载安装便可。
webdeveloper感化很壮大，以下图所示能够检察以后页面所用到的图片，包含css中的背景图片，详细利用教程请参看：http://www.ckuyun.com/div_css/255.shtml

firebug这是个更好的一个插件，利用时点击扫瞄器右下角的萤火虫图标大概按F12，会启用这个插件，如需检察某一部分代码，点击插件上的检察页面元素按钮后，鼠标移到网页上，会呈现一个响应的框，当框选中必要检察源代码的元素后点击，在插件地区就显现出以后地区的代码及款式了，能够禁用某些款式，还能够增加新的款式来查找成绩地点。

如上图，先点1中的检察页面元素按钮，然后鼠标挪动到2的中央，将会呈现图中所示的蓝色线框，然后点击鼠标，会在插件当选中3地位的代码并在4地位呈现对该地区失效的一切款式，便是上边框选部分的代码和款式，当鼠标挪动到圈4地位时，会呈现一个克制图标，点击后禁用以后款式，如许便于查找成绩地点，别的还能够在后边双击拔出新的款式。
别的，假如你装的是IE8扫瞄器，一样具有相似的功效，翻开扫瞄器后，按F12键，便可翻开该功效，利用办法和火狐的firebug相似。
但愿人人多多研讨，对查找成绩能起到事半功倍的效果。不外这些修正只停止在扫瞄器层面，不会对你当地和服务器上的文件做任何修改，查找到那里出成绩后，实时在dw里将堕落的中央悔改来。
学会了怎样调试页面后，兼容成绩也是一个不容无视的成绩，如今扫瞄器市场鱼龙混同，其余不说，IE的6/7/8版本兼容就够让人头疼了，如今又出了个IE9，另有火狐、chome、opera、Safari等等，并且尺度不一致，一片凌乱的情况。从下图中尺度之路网站的会见情形来看，今朝IE6仍旧占最年夜比重，而IE6恰好也是让计划者最为头疼的扫瞄器，bug太多了。鉴于这类凌乱情形，今朝只用思索兼容最经常使用的IE6/7/8和firefox就能够了，别的利用人数很少的扫瞄器能够暂不思索。只需我们把握了各个扫瞄器的特征，制止一些使它剖析毛病的写法，仍是不必太多的csshack就能够使页面在各个扫瞄器下显现基础分歧，以是这个必要人人的多察看，多理论，多总结。

因IE扫瞄器的特别性，一台电脑同时只能装一个版本的IE扫瞄器，不外呢有高人供应了IETester，把IE的几个版本集成到一块，专门供测试兼容利用。人人能够下载安装一下，测试下页面在各个扫瞄器下的显现效果。

下载地点：http://www.ckuyun.com/download/742.shtml
最近在做一个魔术网的div+css切割，昨晚发现了长期以来一直无记录下来的问题！关于兼容IE跟FF的float属性。

作者: 莫相离 时间: 2015-1-18 06:47
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 山那边是海 时间: 2015-1-22 07:00
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 因胸联盟 时间: 2015-1-30 23:43
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 小妖女 时间: 2015-2-6 17:16
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 愤怒的大鸟 时间: 2015-2-17 17:37
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 蒙在股里 时间: 2015-3-5 21:53
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 活着的死人 时间: 2015-3-12 15:54
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 老尸 时间: 2015-3-19 23:43
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

欢迎光临仓酷云 (http://ckuyun.com/)