设置图片效果 - CSS/DIV专题讲解 - 第1课
本节课时长11分23秒,下载文件16.3兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载。
在五彩缤纷的网络世界中,各种各样的图片组成了丰富多彩的页面,能够让人更直观的感受网页所要传达给用户的信息。本课介绍CSS设置图片风格样式的方法,包括图片的边框、对齐方式、图文混排等,并通过实例综合文字、图片的各种运用。
1.图片样式
作为单独的图片本身,它的很多属性可以直接在HTML中进行调整,但是通过CSS统一管理,不但可以更加精确的调整图片的各种属性,还可以实现很多特殊的效果。我们在这里主要讲解CSS设置图片基本属性的方法,为进一步深入探讨打下基础。希望大家能够掌握以下两个方面的内容:
- 图片边框
- 图片缩放
2.图片的对齐
当图片与文字同时出现在页面上的时候,图片的对齐方式就显得尤其的重要。如何能够合理的将图片对齐到理想的位置,成为页面是否整体协调、统一的重要因素。我们在这里从图片水平对齐和竖直对齐两方面出发,分别介绍CSS设置图片对齐方式的方法。希望大家能够掌握以下两个方面的内容:
- 横向对齐方式
- 纵向对齐方式
3.图文混排
Word中文字与图片有很多排版的方式,在网页中同样可以通过CSS设置实现各种图文混排的效果。我们在这里在上一课文字排版和上几节图片对齐等的基础上,介绍CSS图文混排的具体方法。希望大家能够掌握以下两个方面的内容:
- 文字环绕
- 设置图片与文字间距
4.图文混排实例:八仙过海
我们在这里通过具体实例,进一步巩固图文混排的方法,并运用到实际的网站制作中。该例以介绍中国传统的八仙为题材,充分利用CSS图文混排的方法,实现页面的效果。本例最终效果如图所示。
75,281





老师,讲的很易懂~
老师,图文混排方式怎么不能播放呢
谢谢你花了很大劲搞了些视频,但想在你这儿看到示例代码的,可你没有!失望!css看似简单,里面的div看似也简单,但真要用到继承、镶套、和JS拼联还有CSS版本、各种浏览器的正确显示等等还是挺饶头的。另外
不错很好!!
一直讲代码~~怎么你都不亲自做的呀~~
有一节讲的是 可以在图片上面显示文字 不是用背景图片 老早以前看过 现在忘记了 麻烦老师给说下是什么标签
上面的视频为什么不能下载啊?
草原之鹰,
可能是您那里的偶然网络问题吧,换个时间在试试看?
下载都不会,还是别学了
111,
别这么说呀,大家都是朋友嘛,欢迎常来这里交流!
可以将本书的素材和案例发给我吗(光盘里的资料)?我买了这本书,光盘读不了。邮箱:wengmendou@163.com
万分感谢!
我想网购一本书,怎么偏偏是我这个地方不能货到付款啊,真郁闷啊,长沙市阳光一百小区,真郁闷啊,能不能给个答复在我信箱里啊.老师,
天空之城,
在长沙市内吗?如果在市内,我觉得应该可以后到付款的。您在当当和卓越上都找一找,我觉得应该没问题。
这个教程对于初学者帮助大吗?
教材的整体全面嘛?
闪联メ觞,
很适合初学者,很多很多初学者都通过这本书掌握了CSS,相信您也没有问题!
老师你好,我买了一本精通CSS+DIV网页样式表与布局 可是附带的光盘坏了,里面的东西我没有拷贝 怎么办啊
应该把素材也一起下载的啊
新手,
谢谢您的鼓励,目前视频中一些代码由于合出版社有合同,不能提供下载,如果您喜欢,可以购买一本我们的图书,可以获得代码和素材。
以后我们也会推出一些专门在网站上的教程,会提供相关代码。感谢您的支持!
怎么看不了啊
libiyi,
您说的看不了具体什么现象?我这里播放和下载都没有问题。
这个东西怎么下下来看啊,我怎么下不起啊
酸奶,
您点“下载”按钮,然后看到什么问题?我这里可以下载。
老师啊,我是才找到你们这个视频教室来学习的,原来看视频教程都是点击播放就可以观看学习了,为什么我点这个播放后出现的是装载播放器100%,接着什么都没有了?我看里面的教程都值得学习,但我要怎么才能看到教程啊?
qianqian1220th,
抱歉,前几天服务器出了问题,现在应该好了,您再试试看?
老师,还是不能播放啊。
maomao,
您试试看,应该可以了~~
下载了以后,用Riva Flv Player”软件不能播放,主要是Riva Flv Player”软件不能打开
hyb,
如果 riva player 用不了,可以使用其它的播放器,比如 “风雷影音”,播放FLV文件,很方便。
在那能买到这样的书啊?
苹果宝贝 ,
如果在大城市,大一些的书城都可以找到。实际上在网上买时最方便的,还能打折,可以参考这里:
http://learning.artech.cn/20070802.css-div-buy-book-online.html
最后总结时能不能做一个完整的网站页面最好是信息类的,内容多一点,包含表单的一些属性。谢谢!
人间七月天,
最后的几个综合案例已经足够复杂了,把那几个例子都搞明白,一般的网页够用的了。
能把教程例子的源代码 发布出来就个更好了
google,
有一些原因,现在不能发布,抱歉。
你们的视频教程怎么下载的地址是什么??
小威,
点“下载”按钮就可以了,我们没有打包的,你可以单独下载。
DIV+CSS多长时间可以学会 我有点着急。。。。。我一贯都是切图。。。。可是都说现在必须要会DIV+CSS 最快能多长时间学会啊!!!
nanX,
对于有丰富表格布局经验的设计师,从表格布局转换到CSS布局,其实还是很快的,而且你会很快发现,CSS布局的优点太多了。如果从头学,而没有表格布局体验的设计师反而可能体会不到这一点。
一个月时间掌握基本的原理和方法足够了。实际做几个页面,基本就明白了,剩下的就是慢慢摸索和提高了。
不用着急,这个并不高深,我觉得CSS算不上高技术。
你们的教程是我看过的最好的教程, 教程的特点是大量的实例精细的讲解,使人能由浅到深的学习.我非常高兴能使用你们的教程!也祝你们新年快乐,工作顺利,事业更上一层楼.
cary,
感谢您的支持和鼓励,也祝你学习顺利!
你好,你有这个讲课视频内容中对应的教程代码么?
wsf ,你好!
本套视频教程是与《精通CSS DIV网页样式与布局》这本书配套的,如果您觉得内容对您合适,可以购买一本《精通CSS DIV网页样式与布局》。
关于目前不能在网站上提供源代码下载的原因,请参考:
http://learning.artech.cn/20070612.css-div-item-7.html#comment-640
看看
我想学网页制作,平面设计方面的,有这么多的软件,哪个更重要,更核心一些?应该先学哪个呀?
邹蓉蓉,你好!
回答这个问题的关键在于,你想做什么?所有的软件都仅仅是一个工具而已,并不是决定因素。工具都是为人达到某个目标而服务的,你一定要先知道你将来想做什么,然后学什么软件就是自然而然的了。
如果有美术基础的话,就往设计的方向发展,那么就学习美工软件,如果有开发基础,就往开发的路子上走,就需要学习一下开发的基础,比如开发语言等等。
如果希望制作网页,那就先掌握HTML/Dreamweaver/CSS这三样东西,就可以了。
希望你能先找到自己的目标和方向,然后更快地进步!祝你学习顺利!谢谢您对我们的信任,在这里提问。
解答真详细,老师很热心。
这些视频怎么老是放到一半就放不出来了呀?
可能使您的网络接入访问我们的服务器速度不购,如果是使用ADSL一般应该没有问题,如果是使用拨号上网,或者在您在一个局域网中,又有很多人一起上网,那可能看这里的视频教程就比较困难了。