CSS教程之html5+css3网页制造实例:制造comingsoon页面

只看该作者 · 发表于 2015-1-15 22:52:03

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。
破洛洛文章简介：这个页面用到了html5的标签元素和css3的线性突变、圆角、暗影效果，和以后盛行的parallax视差殊效和一些其他分离jquery的动画，在chrome,Safari,opera,firefox下都能够完善显现，假如你还利用IE扫瞄器，我想效果撑持的并非那末完善，不外只管如许，我仍是对IE6,7,8
这个页面用到了html5的标签元素和css3的线性突变、圆角、暗影效果，和以后盛行的parallax视差殊效和一些其他分离jquery的动画，在chrome,Safari,opera,firefox下都能够完善显现，假如你还利用IE扫瞄器，我想效果撑持的并非那末完善，不外只管如许，我仍是对IE6,7,8做了兼容性处置。
ViewDemo,
Download

登录/注册后可看大图

上面我们就来一步一步的完成这个页面，起首你要筹办好计划师计划的PSD文件，并举行准确的切图，我们先来看这个comingsoon页面有哪些文件：
一个index.htm文件
css：
reset.css（格局化款式表http://meyerweb.com/eric/tools/css/reset/）
style.css（网站次要款式表文件）
js：
jquery.jparallax.js撑持该页面的视差效果的插件，必要与jquery1.2.6相配套利用，如需更多懂得请前去http://webdev.stephband.info/parallax.html。
jquery.backgroundpos.jsjquery的一个背景地位转换插件，用来撑持该页面社会分享图标的动画效果。
CheckBrowser.js判别扫瞄器版本和客户端设备的文件，用来调试兼容性。
Html5Act-Install.js加载或启动动画的基本的js文件
image文件夹：包括一切的图片
字体：
我们的计划师计划了手绘字体，为了能让没有安装该字体的用户看到，我们引进了谷歌的字体库并在CSS款式中挪用了它。
<linkhref=’http://fonts.googleapis.com/css?family=Francois+One|McLaren|Rye|Dancing+Script’rel=’stylesheet’type=’text/css’>
头部
我们利用了html5标签<header></header>,关于不撑持html5标签的IE扫瞄器，我们这里经由过程挪用谷歌的html5.js使其撑持html5的标签，别的必要在CSS中声明这些元素块状显现，reset.css文件内里已声明。在index.htm文件<head></head>部分你能够看到这部分代码：
<!–IEfixforHTML5tags–>
<!–[ifltIE9]>
<scriptsrc=”http://html5shiv.googlecode.com/svn/trunk/html5.js”>
</script>
<![endif]–>
我们来看代码部分：
<header>
</script>
<script>
DD_belatedPNG.fix(‘.png_bg’);
</script>
<![endif]–>
我们经由过程给PNG图片和以PNG图片为背景的层增添png_bg类，已到达通明目标。

//Pngtransparentbackgroundinie6varua=checkB();if(ua["isIE6"]){$("img,#left-box,#star,#brand,#sharebox,#shareboxulli,#shareboxullia").addClass("png_bg");}

复制代码

</p>
支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。

只看该作者 · 发表于 2015-1-17 19:15:45

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-1-17 19:15:45

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

只看该作者 · 发表于 2015-1-26 21:51:16

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-2-5 04:02:20

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-2-11 05:04:07

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-3-1 22:17:30

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

只看该作者 · 发表于 2015-3-11 02:31:32

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-3-17 20:58:32

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

只看该作者 · 发表于 2015-3-25 04:13:30

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] CSS教程之html5+css3网页制造实例:制造comingsoon页面

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子