CSS新概念视频教程

朝花夕拾 - DIV+CSS布局实战系列视频教程【Part2 - WRF格式】

flp55555@26.com(花天狂骨) — Sat, 04 Jul 2009 15:26:20 +0800

本教程通过视频讲解如何一步步构建一张DIV+CSS网页，当然是从一张完全空白的网页开始...教程中涉及的图片素材和最终效果仅作一个参考，是否能设计出更美观的作品就要依仗大家自身的平面设计功底了。在这里我就直接给出图片素材的压缩包，以及网页最终效果图：

>>> 下载【朝花夕拾 - DIV+CSS布局实战系列视频教程】图片素材

>>> 点击浏览 - 朝花夕拾系列视频教程 - 最终效果图

本集视频采用WRF格式录制，录完之后文件大概5M多点，因为我们的重点是放在CSS上，所以录像中一些视觉上的细节损失完全没有影响，事实上也没有不得了的细节损失掉了，这就是WRF视频的好处了，再赞一句：强悍...第二集的重点主要在页面标题的样式定义上，其中包含一点点HTML转义符的知识，然后简单的设置了头部的背景图片，并把导航菜单以无序列表的形式添加进去。

视频录制分辨率为1024×768像素：视频截图001 视频截图002 【不清晰你杀了我...】

下载地址 - DIV+CSS布局实战系列视频教程【Part2 - WRF格式 - 5.18MB】

文件总共只有5M多点，随便找个链接一下子就下载好了，记得安装WebEx播放器...

柳暗花明：视频讲解CSS中的浮动属性Float【浮动清除篇】

flp55555@26.com(花天狂骨) — Thu, 02 Jul 2009 19:00:59 +0800

网络上有很多关于浮动清除的研究资料，但是所阐述的解决方法不尽相同，当然也并不是每一种方法都尽善尽美。清除浮动（或者叫闭合浮动元素）是Web标准设计中经常会遇到的一个问题，因此在这里通过视频的形式稍微总结一下目前经常用到的几种方法，并比较一下它们的易用性和适用环境。

一般来说我们用DIV布局的时候一般都会有浮动，很多时候如果子容器的浮动如果不被清除就会影响父容器进而破坏整张网页的布局。浮动清除有时候很简单，有时候却也不是一下子就能解决或被理解的，比如有些清除浮动的方法中甚至引入了Hack的概念。其实有不少的 CSS BUG 问题是因为没有清除浮动造成的，养成良好的清除浮动的习惯是必要的，至于那种方法最好，那就见仁见智了，关键问题就是对于你来说，你使用的方法是否合理而有效的达到了浮动清除的效果。

Float_Clear：文件大小——8.6MB（SWF格式）

The css property float with its values left and right allows to remove an element from its natural flux and move it towards the left or right, useful, for examples, to create the structure of a web page on more columns, horizontal menu, wrapping text around an image…

Instead, the css property clear with its values left, right, both avoids that a floated element position itself next to another block element, clearing its right or left or both sides from any elements.

巧夺天工 - Photoshop制作蓝色晶莹风格网页小图标

flp55555@26.com(花天狂骨) — Wed, 01 Jul 2009 19:59:00 +0800

上图就是本教程的最终效果图...

国外的一篇文字版的Photoshop教程，可能英文不佳的朋友看起来有点吃力，所以就录了个视频把大致的步骤演示了一遍。图标ICON的制作在网页设计中可能也说不上常用，因为网络上一搜索就有一大堆现成的，但个人觉得如果能自己动手去设计或模仿一些作品的话，对美感的培养也是大有好处的，毕竟我们在设计网页的时候，视觉上的美感给访问者的印象是最为直观和重要的。

该教程涉及到的Photoshop技术不是很复杂，滤镜都很少用到，最主要的是图层样式的合理运用和搭配。事实上不管是平面作品还是网页设计，如果对色彩的运用恰当的话，水准都不会落到一个很差的层次上，关键是个人的审美观念和美工基础需要一个具化的过程，所以技术基础也是不可缺少的。

【巧夺天工 - Photoshop制作蓝色晶莹风格网页小图标(SWF格式 21.2MB)】下载地址：

一名网页设计者，如果能在Photoshop等平面设计软件的运用上也能得心应手的话，就更容易能够设计出优秀的作品。当然，只要平时多加练习，要做到这一点也非难事。

柳暗花明：视频讲解CSS中的浮动属性Float【分栏篇】

flp55555@26.com(花天狂骨) — Tue, 30 Jun 2009 09:03:28 +0800

Float浮动概念也许是CSS中最让人迷惑的概念之一，它经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是我们以及浏览器对理论的解读造成的。

关于Float的视频，我这里现在只录了四个部分，每部分都有各自的重点。本文放出的第二集视频，主要是真度如何利用Float属性实现页面中内容的分栏，时间不长，讲解的知识也很简单，主要目的是为了帮助初学者更快的入门，更好的理解Float属性，以便今后更有效率的学习DIV布局模式。

Float Columns：文件大小——3.95（WRF格式）

WRF格式的视频文件体积小，但在清晰度上绝不打折扣，请安装WebEx播放器后正常观看视频教程。

朝花夕拾 - DIV+CSS布局实战系列视频教程【Part1 - SWF格式】

flp55555@26.com(花天狂骨) — Sun, 28 Jun 2009 15:25:11 +0800

取名朝花夕拾没有什么特别的意思，真要说的话，就是希望大家看了这一系列的教程之后，能够在学习CSS的道路上更快前进一步，早上看晚上就有收获，哈哈...在录制教程的过程中，加进了一些个人的理解和观点，不妥之处还请留言指正。

本教程通过视频讲解如何一步步构建一张DIV+CSS网页，当然是从一张完全空白的网页开始...教程中涉及的图片素材和最终效果仅作一个参考，是否能设计出更美观的作品就要依仗大家自身的平面设计功底了。在这里我就直接给出图片素材的压缩包，以及网页最终效果图：

>>> 下载【朝花夕拾 - DIV+CSS布局实战系列视频教程】图片素材

>>> 点击浏览 - 朝花夕拾系列视频教程 - 最终效果图

第一集视频采用SWF格式录制，完工之后数了数居然有57M大小，这么搞下去就算网盘放得下，我的硬盘也没地方存电影了，所以在考虑第二集用WRF格式录。本集主要的内容是一些简单的前言引入、效果图布局解构，以及基本的HTML框架布局和样式设置，对于初学者而言内容也算比较多了，大概有20分钟左右...当然一定程度上也是因为我慢悠悠的语速拖延了时间 - -! ...

视频录制分辨率为1024×768像素：视频截图001 视频截图002 【绝对清晰啊...】

下载地址 - DIV+CSS布局实战系列视频教程【Part1 - SWF格式 - 57.3MB】

文件比较大，建议大家还是用下载页面中的迅雷链吧...

网页设计必备工具 - Firefox Web Developer 使用指南视频【SWF】

flp55555@26.com(花天狂骨) — Sat, 27 Jun 2009 12:50:35 +0800

Web Developer 插件以工具栏的形式对网页的(X)HTML、脚本、多媒体、CSS、缓存、图象等多方面的实用工具。使我们能轻易的获得网页的更多信息，使我们进一步的了解当前所浏览的网页。其强大的功能超乎你的想象，用于CSS网页布局开发调试只是它强大功能的一部分，对于网络程序的开发也提供了非常强大的辅助设计功能。

本视频教程中我们主要针对CSS网页布局开发调试对它进行了解，有兴趣的朋友可以自行研究一下它的强大功能。它可以协助我们在设计网页时能够更加的得心应手，内建 HTML、CSS、Feed…等检验器，让我们所设计出来的网页能够符合标准化。

>>> 火狐插件 Web Developer 1.1.6 本地下载

>>> 火狐插件 Web Developer 1.1.6 使用指南视频(19.6MB-SWF格式)

The Web Developer extension is really useful for web coder and designer. It adds a menu and a toolbar to the browser with various web developer tools like working with css, cookie, forms, tables, frames, and edit html. It is designed for Firefox, Flock, Mozilla and Seamonkey, and it can run on any platform that these browsers support including Windows, Mac OS X and Linux.

>>> Firefox Extension - Web Developer 1.1.6 Downlink

>>> Firefox Extension - Web Developer 1.1.6 Video Tutorial(19.6MB-SWF Format)

柳暗花明:40分钟HTML&CSS入门指南视频教程【SWF格式】

flp55555@26.com(7css) — Sat, 27 Jun 2009 11:45:02 +0800

本系列视频教程分三部分讲解一些HTML&CSS的基础知识，相信对初学者会有很大的帮助，高手就慎入了，切记切记...通篇教程使用记事本TextPad演示一些常见HTML&CSS的用法，包括HTML标签、CSS基本语法以及如何整合HTML和CSS的方法等，其中对行间样式、内联样式及外联样式有初步的讲解，还涉及一些技巧和经验...其实本教程最主要的目的，是让初学者对HTML&CSS有个概念上的明确，省去一些摸索的过程，更快速、更有效率的入门。

当然由于篇幅的关系，教程中讲解的知识点就算是针对基础这块领域，也算不上很全面，很多东西都是只能一语带过，关于更进一步的学习资料，敬请关注本站的其它视频教程。下面是该系列视频的下载地址，烦请注册一下，唉，说我恶心就恶心吧...

Part1：文件大小——14.3MB

1.利用记事本来编辑基本的HTML和CSS，并在浏览器中预览编辑效果；
2.HTML文档的标签结构，以及最重要、常见的标签语法和功能；
3.行间样式表的格式、语法及若干注意事项；
4.HTML文档中的图片、链接，CSS中的绝对定位属性简介；
5.布局容器DIV的基本用法，简单的样式设定；

Part2：文件大小——7.6MB

1.如何为HTML文档定义内联样式；
2.CSS对DIV更灵活丰富的样式控制；
3.类样式与ID样式的概念，几点区别以及注意事项；
4.CSS规则中选择符的若干不同格式，及各自代表的含义；

Part3：文件大小——10.6MB

1.如何为一个HTML文档定义外联样式表；
2.超链接元素的四个状态，以及样式定义方法；
3.简单的图文混排技术，主要针对CSS中的Float属性；
4.一点点小结；

7CSS Silence - 古典大气风格PJBlog模板皮肤下载

flp55555@26.com(花天狂骨) — Sat, 27 Jun 2009 05:25:55 +0800

不在沉默中爆发，不在沉默中灭亡。我可以在沉默中浅吟低唱，轻舞飞扬...

皮肤名称：7CSS Silence

适用版本：PJBlog V3.0.6.170

发布时间：2009/06/24

风格制作：七盟CSS - 新概念CSS视频教程

开发模式：半静态

兼容测试：IE6 IE7 FireFox3

作者博客: http://7CSS.CN

下载地址：烦请注册一下，说我恶心就恶心吧， - -!...

本模板在半静态模式下开发，其它模式下是否存在问题不得而知，请自行仔细斟酌。皮肤中的LOGO等图片素材可以自己进行修改，尺寸最好不要变动，除非你熟悉CSS可以自己调整；另外本人也可以无偿帮忙一些简单的图片处理，留言联系即可。因为修改了一些源文件，不多，具体请参考皮肤包内的源码修改说明文档!

使用皮肤时敬请保留版权信息，尊重劳动成果，谢谢。

CSS Diagnostic - 一目了然的HTML标签诊断工具样式表

flp55555@26.com(花天狂骨) — Fri, 26 Jun 2009 12:31:20 +0800

>>>【到Ziddu下载CSS Diagnostic工具文件（仅0.79KB）】

所谓的CSS Diagnostic我们可以简单的翻译成CSS诊断，当然是针对于HTML标签，把符合一些特定条件的HTML标签用特殊的样式标志出来，以便我们对HTML标签进行优化和完善。以超连接为例，一般从规范的层面讲，一个超链接对象我们往往要为其设置Title属性，就如图像元素的Alt属性一样。但是假如要从冗长的代码中去寻找未设置Title属性的超链接对象，也是件比较吃力的事情，这个时候，CSS Diagnostic就可以派上用场了。

事实上CSS Diagnostic也只是一些CSS样式定义，主要利用属性选择符对HTML标签进行诊断，比如超链接是否拥有Title、Href属性，或者它们的值是什么等等，进而根据判断出来的结果赋予特殊的样式，让我们可以在浏览器中一目了然的它们分辨出来。CSS Diagnostic典型的代码如下：

 程序代码
a[href="#"] {
    background: lime;
}

a[title=""] {
    outline: 3px dotted red;
}

第一条CSS表示的意思就是为HTML文档中的空链接设置莱姆色背景...额，其实莱姆色也就差不多是绿色。同理，第二条CSS表示为Title属性为空的超链接设置3像素红色点状外边框。更具体的效果可以参看下面这张图片：

>>>【到Ziddu下载CSS Diagnostic工具文件（仅0.79KB）】

怎么用一个不用具体讲了吧，把解压出来的CSS样式定义内联或外联到HTML文档上就OK了...

PS：对于CSS中的属性选择符，IE的支持不是很好，建议使用CSS Diagnostic的时候使用火狐。

柳暗花明：视频讲解CSS中的浮动属性Float【元素篇】

flp55555@26.com(花天狂骨) — Wed, 27 May 2009 02:55:12 +0800

Float浮动概念也许是CSS中最让人迷惑的概念之一，它经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是我们以及浏览器对理论的解读造成的。

假如认真的去读一下浮动概念，你会发现并不像所见的那样复杂。大多数问题都是由于老版本的IE带来的。假如你知道这些BUG，你就能避免这些问题。我们要澄清一些以前使用浮动的误解，或者初学者一开始的时候就能正确的去理解这个CSS属性话，必须从Float最基本的应用开始学习、探究。

关于Float的视频，我这里现在只录了四个部分，每部分都有各自的重点。当然这么点篇幅是远远不够的，而且至今为止的教程里面涉及的知识面还很浅显。我们这里最主要的目的，是让一些初学者刚开始的时候，不要对Float产生曲解或恐惧，一点点的去学、一点点的去理解，基础打好了之后，再学习深入的东西才会有效率。

下面是第一集视频，主要讲解Float如何影响HTML元素，以一个无序列表UL为实例：

Float Element：文件大小——21.7MB（SWF格式）