Posts Tagged '视频教程'

开宗明义 – CSS入门视频教程

本系列CSS视频教程由浅入深的为大家讲述如何使用CSS进行网页样式控制,重点是在CSS样式规则、语法、属性等方面做了详尽的讲解,并配合实例进行说明和演示,可以说这是一个全面系统的CSS基础入门视频教程,旨在帮助CSS爱好者和新手更加快速、高效的学习和掌握CSS基本应用!

本系列视频教程免费下载试看:25.CSS的浮动属性Float(下)[视频大小31.2MB|教程时长17:03]

开宗明义 - CSS入门视频教程

In these basic Cascading Style Sheets Video Tutorials, you’ll learn about how CSS changes the way you design web sites.Start learning now with ximicc.com CSS video tutorials.

教程目录大纲及内容概要:

01.一些前言和准备 [视频大小23.3MB|教程时长08:04(8分钟零4秒)]

关于Web标准的一些概述,包括常见的概念和误区,以及本系列视频教程所涉及的几个主要的软件工具,如各类浏览器、网页编辑工具、FSCapture等,最后是一些CSS爱好者学习书籍推荐。

02.XHTML规范和注意事项 [视频大小34.6MB|教程时长13:00]

主要结合HTML的语法讲解一些XHTML主要的规范和编码注意事项,如标签闭合、大小写等,我们的目标是希望学习者能在标准的网页编码结构下,更有效率的学习和巩固CSS知识及应用。

03.CSS加载到网页的三种方式 [视频大小38.5MB|教程时长10:33]

通过一些简单的页面实例,讲解网页引用CSS样式表的三种主要方式,包括语法的书写、相互的区别以及优势比较,其间也提及了一点@import语法的知识。

04.CSS语法的基本规则[视频大小25.8MB|教程时长08:28]

开篇引入介绍CSS禅意花园这个网站,并解析其中的一个实例,对CSS的基本结构和语法规则进行讲解,分别阐述选择符、声明、属性、标点符号等构成元素,与行间样式表语法的区别,以及关于规则优先级的一些入门。

05.CSS中的Class和ID选择符[视频大小12.7MB|教程时长09:58]

以一些网页实例讲解CSS中Class和ID选择符的定义规则和应用方式,本节课的重点在于在一般的设计理念中,样式表什么时候用Class类,什么时候用ID标识。

06.CSS中的Class和ID选择符补完[视频大小20.1MB|教程时长15:48]

在上节课的基础上重申一些何时用Class何时用ID的标准,然后通过一个简单的DIV布局实例阐述有利于用户体验的Class和ID的命名规范。

07.CSS中伪类和伪元素(上)[视频大小18.3MB|教程时长13:27]

CSS中常用伪类的功能说明和应用实例,本集视频重点讲解的是超链接伪类在网页元素上的应用,以及一些伪类在浏览器的兼容方面存在的问题。

08.CSS中伪类和伪元素(下)[视频大小15.6MB|教程时长10:37]

本集视频在上节课的基础上,结合一些简单的示例,讲解CSS中四个主要伪元素的概念和样式作用方式,以及在主流浏览器中的兼容性。

09.更丰富的CSS选择符(上)[视频大小14.3MB|教程时长12:40]

介绍区别于之前课程中提及的CSS选择符结构,如通配选择符、包含选择符、分组选择符、子选择符、相邻选择符以及多种类型的属性选择符等。

10.更丰富的CSS选择符(下)[视频大小22.6MB|教程时长17:58]

介绍区别于之前课程中提及的CSS选择符结构,如通配选择符、包含选择符、分组选择符、子选择符、相邻选择符以及多种类型的属性选择符等。

11.块级元素、内联元素和文档流[视频大小18.6MB|教程时长17:18]

介绍块级元素、内联元素的概念差别、常见的组成元素以及类型互换方式,结合它们在网页中的呈现方式,引入常规浏览器对网页文档流的解析模式,课程最后稍微提及了一些关于浮动和定位属性影响文档流的方式。

12.彻底弄懂CSS盒模型[视频大小23.8MB|教程时长23:53]

利用一些图示讲解CSS盒模型的概念以及与此相关的几个主要CSS属性,如Margin、Padding等,在实际的例子中尽可能详尽的把把这个CSS中极之重要的概念阐述得细腻透彻。

13.CSS中的属性缩写(上)[视频大小24.0MB|教程时长20:44]

讲解和演示CSS中常见几个可运用缩写赋值的属性,如颜色、边框、背景图片、字体以及盒模型相关等,在直观的例子中阐述CSS属性缩写的语法及注意事项,增进CSS代码书写效率和结构优化。

14.CSS中的属性缩写(下)[视频大小20.2MB|教程时长15:53]

讲解和演示CSS中常见几个可运用缩写赋值的属性,如颜色、边框、背景图片、字体以及盒模型相关等,在直观的例子中阐述CSS属性缩写的语法及注意事项,增进CSS代码书写效率和结构优化。

15.CSS中的字体属性Font[视频大小27.6MB|教程时长21:39]

详解一条完整Font声明所具有的各个属性值所代表的含义,比如字号、行高、字体族等,以及进行独立声明时所对应的属性,也强调了一些注意事项,如Font缩写起作用的必备条件等。

16.CSS属性中的负值运用[视频大小24.9MB|教程时长20:44]

CSS中几个主要的负值应用属性示例演示,讲解它们在图文替换、背景图标定位、DIV布局等实际应用中的使用方法。

17.CSS颜色值解析[视频大小23.2MB|教程时长16:53]

主要讲解CSS中几种颜色的赋值方式,如颜色名称、十六进制、RGB、HSL等形式的结构,以及主要由于兼容性问题而不是很常用的RGBA格式。

18.CSS定位属性全方位解析(上)[视频大小21.1MB|教程时长19:26]

利用一些基本的布局实例阐述Position属性的五种主要赋值方式,以及它们影响文档流的形式,本节课主要侧重Static和Relative这两个值的讲解。

19.CSS定位属性全方位解析(中)[视频大小32.5MB|教程时长27:03]

开篇在上节视频的基础上补充了一些Relative定位的应用,然后重点讲解绝对定位属性对网页DIV元素的作用方式,如结合上下左右属性实现拉伸、父子座标体系嵌套等。

20.CSS定位属性全方位解析(下)[视频大小36.3MB|教程时长18:59]

总结之前两节课的内容知识点,演示一个两栏全屏的布局实例,其间补充了关于Fixed固定定位与Absolute绝对定位的区别、Position属性的继承两个知识点。

21.综合利用Position属性实战网页布局[视频大小53.0MB|教程时长23:14]

演示一张带顶部导航、中间两栏、底部固定的页面布局实现方法,从各方面对Position这个属性在布局中的应用进行分析、讲解以及相互比较,对前面三节课所涉及的知识进行总体的回顾。

22.Z-index属性透视[视频大小21.3MB|教程时长20:14]

讲解Z-index属性对网页元素在层叠次序上的影响和作用方式,通过一些页面实例效果的介绍,解释Z-index属性如何作用、在何种前提下才能作用、浏览器的兼容性等经常令新手感觉迷惑的问题。

23.CSS背景属性补完[视频大小24.0MB|教程时长20:56]

本节视频系统的整理了CSS当中的背景属性细节,重点放在背景图片的定位问题上,讲解实现背景定位的应用实例以及几种主要的定位方式,尤其是浏览器对百分比定位的方法如何解析渲染。

24.CSS的浮动属性Float(上)[视频大小28.1MB|教程时长22:04]

通过一个横向菜单和一个页面布局实例讲解Float对网页中元素的作用方式和表现,同时也通过对一些浏览器解析上的差异分析在Float属性中经常让初学者在学习过程中产生疑惑的问题。

25.CSS的浮动属性Float(下)[视频大小31.2MB|教程时长17:03] - [>下载试看<]

利用Float属性进行页面布局时,浮动清除的相关运用,如可以采用哪些方式进行浮动清除、相互之间的对比和差异等、以及浏览器兼容测试中出现Double Margin、Bottom Margin等Bug现象的解决方法。

26.规则的优先级权值[视频大小31.7MB|教程时长31:06]

本节视频教程重点讲解在CSS中当规则出现冲突或需要人为重定义时,规则之间的优先级权值应该如何正确的计算和运用,包括标准的计算公式、零权值的概念、优先级的继承表现等等。

27.CSS属性的继承[视频大小16.1MB|教程时长15:17]

本节课通过了解XHTML内容元素之间的家族关系,学习CSS基于家族遗传特性所产生的样式继承方式,重点对文档树结构中可继承和非继承的属性进行系统而通俗的归类,以便在使用CSS的过程中更加灵活的进行掌控和运用。

28.CSS Hack技术入门综述[视频大小23.2MB|教程时长21:33]

讲解当网页的解析效果在不同的浏览器中出现差异时,如何采用适当、合理的方法进行调整,常用的Hack技术如何针对不同的浏览器产生作用和影响。当然追求网页样式无Hack是提升CSS技能最好的途径之一。

29.CSS文件及代码的精简优化[视频大小18.2MB|教程时长20:50]

针对样式表文件的分割组织、CSS代码的效率优化,讲解如何通过合理的方法提升CSS对网页效果的定义以及网页设计者、浏览者的用户体验,其中也包括注释的添加、留白的运用、CSS在线优化工具等知识。

30.学习学习再学习 – 课程总结 [视频大小13.2MB|教程时长19:08]

与CSS学习相关的一些教程书籍、软件工具、网络资源的推荐,以及作者个人的一些学习经验。

Continue Reading →

独具匠心 – WordPress主题制作视频教程

本系列视频教程是Wordpress主题制作的入门指导,详细分析了PHP博客程序Wordpress主题模板中的每个文件,并对主题常用函数和模板标签的使用方法作了详细的介绍,带领你由浅入深循序渐进地接触和掌握wordpress主题个性修改和设计制作。课程中的主题基于《横刀立马–PSD转XHTML+CSS实战视频教程》中制作的网页效果,逐步深入的讲解wordpress主题的文件构成、函数功能以及在原XHTML基础上进行代码转化和替换等操作,最终完成一个完整的wordpress主题模板。

视频格式:高清MOV影片
教程时长:共30集352分钟
屏幕尺寸:1024×768像素
文件体积:解压后966MB
免费试看:018.侧边栏125广告展示位的设计与实现[视频大小29.4MB|教程时长10:32]


在跟随本系列教程开始学习之前,必须做一些基本的准备工作,这个在教程第一集中有详细的讲解,比如在本机搭建PHP测试环境、安装WordPress程序等,然后根据个人的习惯选择一款代码编辑工具,教程中仍然以NotePad++为主进行演示。先来看看下列你可能需要的一些工具和资源:

  • WordPress本地调试工具PHPStudy2009 ;
  • WordPress程序下载请到WordPress官方网站;
  • 好用的代码编辑工具NotePad++绿色版;
  • 入门的CSS基础知识,如果不想看书可以参考本站的CSS视频教程;
  • 基础的的HTML知识,最好了解一些XHTML的代码规范,如果有XHTML+CSS布局实战基础更佳;
  • 可以让你节省时间的WordPress空白主题SandBox;
  • 主题模板相关的功能函数和常用标签,WordPress Codex是最权威的参考资料;
  • 跨浏览器网页效果兼容性调试工具IE-Tester;

独具匠心-Wordpress主题制作视频教程知识点大纲

  1. 学习教程前的一些准备工作;
  2. WordPress主题文件构成及功能解析;
  3. 960 Grid页面布局框架;
  4. 主题首页Index.php的结构分析及拆解;
  5. 主循环Loop代码结构及功能作用;
  6. 网站LOGO与CSS中的图像文本替换技术;
  7. 首页主导航菜单的创建;
  8. 缩略图生成Function函数编辑;
  9. 含缩略图、标题、摘要的日志列表构建;
  10. 日志详细页制作及美化;
  11. 文章日志其它相关元数据;
  12. 制作Twitter、Facebook等社会化标签侧边栏;
  13. 侧边125广告展示位的制作;
  14. 最新、热门、评论侧边栏的实现;
  15. 评论表单外观及功能的实现;
  16. 更多…

独具匠心 - WordPress主题视频教程

Knowing how to turn a XHTML web template into a WordPress theme.These video ...

Continue Reading →

横刀立马 – PSD转XHTML+CSS实战视频教程

本系列视频教程主要讲解在文本编辑器NotePad++中,将PSD网页设计效果图通过手写代码的形式一步一步转换为XHTML和CSS格式网页文件。详细讲解PSD切图、XHTML代码语义和结构、CSS样式定义和样式控制等操作,以及最终阶段的CSS Hack和浏览器兼容测试等应用。

视频格式:高清MOV影片
教程时长:共30集445分钟
屏幕尺寸:1024×768像素
免费试看:011.文章列表元素布局及样式定义[视频大小20.0MB|教程时长10:28]


构建一个网页如果使用FrontPage、DreamWeaver或者其他可视化工具,一般都是用表格来进行排版,虽然操作方便且效果所见即所得,但是网页中存在大量的垃圾代码,如无用的标签或行间样式定义。这些垃圾代码的存在,一方面会使得网页变得很臃肿庞大,影响网页的加载速度和用户体验;另一方面对于搜索引擎来说,网页中的有效文字内容所占比例减小,搜索引擎需要花更多的资源来分析,如果网页中的代码过于杂乱,搜索引擎可能会对这样的网页产生反感,导致该网页在搜索引擎中的表现不好。

采用符合W3C有效性验证的Web标准,也就是使用XHTML+CSS技术来制作网页,最大的优点是将网页内容和样式彻底分离,样式相关的代码存放于一个独立的层叠样式表文件中,保证了网页代码的简洁有序且富有语义。用XHTML+CSS技术来制作网页,减少了网页中样式定义代码,对于搜索引擎来说有利于爬虫的抓取,有利于搜索引擎对网页中真正有用的信息进行分析。

横刀立马 - PSD转XHTML+CSS视频

横刀立马-PSD转XHTML+CSS实战视频教程从一张PSD分层网页设计效果图出发,由浅入深、循序渐进的讲解如何构建一张符合Web标准的网页,通过在NotePad++一步步手动操作,对DIV+CSS布局技术中相关的XHTML规范、标签语义、CSS属性等细节进行深刻讲解,增进读者对整个流程中的框架布局、页面元素添加、样式定义、代码书写规范等各个环节的理解,并能够直观有序的进行操作和实践。课程中对于CSS的讲解,主要基于页面构建过程中必须使用的规则和属性,如果想全面的学习CSS知识,大家可以参看本站的《开宗明义-CSS入门视频教程》。

In this series of video tutorials you will learn the basics in PSD to HTML+CSS, turning Photoshop designs into XHTML and CSS format.Learn this technique one-step ahead from the rest.

Continue Reading →

别具光芒 – 草图草稿转PSD视频教程

本系列视频教程主要演示如何在Photoshop中将草图草稿转化为一张PSD格式分层网页效果设计图,当中涉及的色彩搭配、美工细节、布局设计以及相关PS操作命令,都会有详细到位的讲解,通过12集1024×768分辨率的高清视频教程,即便你没有任何Photoshop基础,只要按步骤一步一步操作也不会存在任何技术难点。

视频格式:高清MOV影片
教程时长:共12集168分钟
屏幕尺寸:1024×768像素
文件体积:解压后284MB
免费试看:05.导航菜单的制作及视觉修饰[视频大小14.10MB|教程时长08:50]


别具光芒-草图草稿转PSD视频教程

如果您打算建立自己的个人或企业网站,又或者重新设计您的博客的主题,现在看来已经不是很难了。这要感谢那些慷慨的设计师和撰稿者们,现在互联网充满着各种很棒的教程来帮助你逐步建立自己的网站界面及导航。有时候我们需要做的,就是在一些优秀设计的基础上,参考其中关于布局、配色、细节等视觉理念和技术的运用和实施,来帮助我们更高效的设计出适合自身需求的作品,这就是录制本系列视频教程的初衷和出发点。

别具光芒 - 草图草稿转PSD视频教程

我们的视频教程用最直观的方式,讲解和演示如何在Photoshop软件中,如何从草稿型的线框布局着手,逐步的把一个标准博客的界面效果制作出来。因为我们整个大系列的教程最终目标是制作Wordpress主题,所以这部分的网页效果也是参考Wordpress博客的标准结构和布局,当然也综合了Wordpress中的常用功能。下图就是我们绘制的简单布局,这么做的目的是要确定每个元素的位置,如确定主导航栏包含几个部分、以及最新增加的内容在主页面中的展示位置:

进入Photoshop之后,我们在视频教程中会系统的结合草图布局,详细讲解软件的基本操作,如新建画布图层、颜色填充应用、图层命名分组、视觉细节技巧以及一些非常实用的Photoshop实践经验等。最重要的是,我们的讲解都是以实现界面效果为目标的,因而精简出最实用、最有效率的操作方法和技巧,这些是在网络上随手可下载的Photoshop教程中很难学习到的:

A series of video tutorials on design a Beautiful Website From Scratch.You’ll learn how to Design A Website from Scratch, Interfacing In Photoshop for PSD.

Continue Reading →

学习其实并不枯燥:漫画图说DIV+CSS网页布局(下)【完结】

漫画图说CSS+DIV网页布局-SEO优化,CSS教程,Wordpress博客从玩弄表格技巧到遵循 Web 标准

首先,如果要重构一个用表格布局的网站,需要考虑好一个移植策略。是一口气把整个站点移植了呢,还是逐个逐个部分地一步步完成?检查一下,找出会因为移植而受益的页面和分支。自然而然地,从首页、新产品通告之类的页面开始检查会比较好。

分解页面

如果已经把站点的内容分好了类,那么是时候分析每个页面,把它们按照逻辑关系进行分解了。

* 主导航条
* 子导航条
* 页眉与页脚
* 内容
* 相关信息
* 其他

注意分析由嵌套表格、空白分隔符和边框元素组成的表格结构 (因为我们希望把它们替换为用 div 标记组织的那种简单得多的表格结构)。

检查应该替换的标记

一旦分析好页面的结构,就可以着手揭开表象,分析你现在的页面代码中可以转换成结构化标记的那些地方。

* 作为一个完美主义者,消灭所有的 font 标记和间隔 GIF 吧!
* 同样的,一并搞定 b 和 br 标记。
* 去除表格中的那些外观标记 (bgcolor, background, 等等)。
* 把纯粹用来表示外观的那些 CSS 调用 改成结构化的标记。

把描述外观的标记改为描述结构的标记

可以使用“查找加替换”(或者正则表达式),不过最好的方法还是在浏览器里打开这个页面,然后把文本复制粘贴到你的 HTML 编辑器里。

关键还是要用结构化的方式来思考!仅仅把b 标记替换为 strong 是远远不够的。

最重要的条目是哪个?用 h1 来标记它。次要一点的就用 h2,依此类推。用 p 来标记段落。把导航条标记为无序列表。

选定一个 DOCTYPE 来使用。(我们推荐 XHTML transitional,除非你是此道高手,否则别用 XHTML strict。)

把你的页面合理分布在的 div 中

把你的主导航条放在一个 id 属性设为 mainnav 的 div 中,子导航条则放在一个 id 或者 ...

Continue Reading →
Page 1 of 1312345...10...»