您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > 软件入门 > DW-案例制作-新闻中心模块

DW-案例制作-新闻中心模块

手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

VIP优惠升级 21大分类,畅享48000+设计教程特权!

为自己充值升华学习
今日剩余学习次数:1

按住画面移动小窗

DW-案例制作-新闻中心模块

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

学习意犹未尽?成为VIP,继续提升

免费学习即将结束

关闭继续学习>

发表评论
收起宽屏
分享给朋友:
手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

添加到专辑收藏已收藏收藏成功,可进入个人中心-课程收藏 查看!
目录信息笔记
课后练习学员评价 (115条评论)视频字幕查看优秀作品>

课后练习在紧急制作中。。。

课程综合评分:9.9
课程难易程度:太简单(5)简单(17)适中(78)有点难(10)太难了(2)
您需要学习后才可以评价,立即学习
评论列表
仅显示有内容的评论
仅显示带图评论
排序方式:

Hello大家好,我是M ,上节课呢,我们已经完成了我们的产品展示的部分了 ,接下来呢,我们继续往下做 ,来看一下我们这个新闻中心 ,好的,先是 ,HTML里面 ,老规矩,注释一下 ,是新闻中心 ,好,我们来看一下设计图 ,首先呢,我们还是要把整个新闻中心 ,看成是一个DIV ,这个是 ,必须的,所以呢 ,我们新建一个标签 ,DIV,叫它News ,好,来到我们的样式里面 ,那么这个News,要给它一些什么呢 ,首先宽度对不对 ,宽度呢 ,100%,跟我们的副级也就是Border一样宽 ,高度呢 ,高度是不是可以不用给啊先 ,我们先不给高度吧 ,不给高度之后呢 ,要让它居中 ,Margin ,这是我们的News ,接下来呢 ,Tittle部分 ,Tittle还记得我们上节课是怎么做的吗 ,我们直接把这个DIV复制过来 ,因为这个 ,Tittle的样式我们已经写好了 ,所以呢,我们只需要把这几个字改掉 ,叫做新闻 ,中心 ,然后我们到浏览器里面看一下,诶,这里有了,对不对 ,这里呢,我们就已经有了新闻中心了,然后再把间距 ,

量一下 ,63的高度 ,上下63的间距 ,这个间距,我们会给它News上,也可以给它Tittle上 ,但是因为Tittle我们已经写好了,所以我们这里就选News ,News上面呢就是63PX ,那下面还是0 ,诶,它就已经下来了 ,接着看 ,这就是我们新闻内容了,首先呢,我们要把这里 ,看成是一个 ,大的DIV ,然后这个大的DIV里面呢,包含了四个小的新闻 ,好,这是我们分析的结构 ,所以呢 ,到这里面来 ,新闻中心下面挨着的,是一个DIV ,就是那个大DIV,我们就叫它News ,Box ,然后呢 ,我们来看一下设计图 ,PS里面 ,我们来看一下它有多宽 ,一直到这个加号这里 ,是1163 ,那我们就在这个 ,NewsBox ,给它一个宽度 ,1163像素 ,老样子 ,还是让它居中对不对 ,Margin ,先给0吧 ,然后再给自动 ,这个大的DIV我们已经写好了,我们再来写一个小的 ,我们把这一个新闻 ,加一个这个加号 ,看成是一个小的DIV ,

然后这样呢,这个大的DIV里面呢,就有4个小的DIV了 ,而且我们可以看到它们这4个DIV里面 ,除了图片不一样以外,其它的 ,样式是一模一样的 ,这意味着什么呢?意味着我们写好了 ,第一个样式之后,我们可以把 ,它的样式复制 ,所以呢,我们先 ,哎,先切个图 ,记住啊,把这个剪切蒙版的这个图层也 ,带进来,然后打一个包 ,叫它 ,News1好了 ,然后呢 ,Cutterman ,选择一下 ,我们的站点文件夹 ,再 ,商业网站站点的Img里面 ,好,导出 ,当然我们就顺手把其它的几个也导了吧 ,好,准备工作已经就绪了,我们就先来写这一第一个DIV了 ,我在DW里面,这个DIV我们叫它 ,LittleBox好了 ,然后呢?我们来看一下这个LittleBox ,我们在这个DIV里面,可以把它分成两个部分 ,首先就是左边这一大块,灰色区域的 ,然后,是右边这个加号 ,所以呢,我们在这里面把这个LittleBox,再分成两个 ,第一个叫做Left ,第二个叫做Right ,好,我们的层级已经出来了 ,再慢慢一个一个的给样式,首先是LittleBox ,

复制一下,到这边来 ,LittleBox ,我们还是先要量一下宽度 ,还有我们的高度 ,宽度是572像素 ,高度呢?高度就是这个灰色的高度对不对 ,242 ,242PX ,宽高写好以后 ,我们再看一下,它里面的Left ,诶,怎么不见了 ,LittleBox ,的 ,Left,这一个DIV ,它是什么样的呢 ,也还是看一下宽和高吧 ,531 ,531PX ,高度呢 ,高度和上面一样对不对?我们可以写242PX ,当然了,也可以写100% ,然后,这里我们要让它浮动 ,向左浮动 ,旁边这个Left向左浮动,待会的Right呢向右浮动 ,这样呢,它们中间的这个间距就空出来了,对不对 ,这样我们就不用选Margin ,好 ,还有这个灰色,我们来吸一下这个颜色 ,把这个数值复制一下 ,Left背景颜色 ,是F5F5F5 ,刷新一下,取到网页里面 ,好,这里呢,我们的这个 ,灰色部分就已经出来了 ,好,Left里面有一个什么?有一个 ,Img ,

这个图片是什么?我们的News1 ,NewsOne ,我们来写一下NewsOne ,它也有一些样式 ,LittleBox里面的Left的 ,Img标签 ,它有什么样式?间距对不对 ,上间距 ,是多少?16 ,Margin上16PX ,上顺时针方向,上右下左 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与
虎课网为您推荐DW-案例制作-新闻中心模块视频教程、图文教程、素材源文件下载,学员课后练习、作品以及评价等内容。DW-案例制作-新闻中心模块教程讲师:M,使用软件:DW(CC2017),难度等级:新手入门,视频时长:20分37秒 查看全部

同学,小虎知道你非常努力的想学习!

老师录制课程真的也很辛苦

赞助一下吧

确定学习吗?

您每天可免费学习一个教程。

成为VIP可无限学习 !

成为VIP吧!

成为VIP吧!

您已经免费学习 1 个教程 !

我们录制教程很努力的,赞助下吧 !

升级VIP吧!

您已经学习 5 个教程啦!

我们录制教程很努力的,赞助升级下吧 !

您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个素材文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计观看5个图文教程


您在当前分类下不是VIP,赞助VIP享受无限观看


学习后才能评价哦!

学习后才能提问哦!

获得30虎课币

评论提交成功,将在审核通过后显示

×

下载素材/源文件:

收藏成功
取消成功
特惠
充值
客户端
虎课桌面客户端
置顶播放器,边看边学习
虎课移动APP
支持离线缓存,随时随地学习
我的排行
建议意见
官方客服

官方客服

您可以与在线客服进行沟通或者拨打客服热线获得帮助

客服热线:021-80344319工作日:9:30-18:30

在线咨询:联系客服工作日:9:00-22:00

节假日:9:00-18:00

虎课积分
免费学习48000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了121,690
并提交了1,449份作业!
登录后立即学习!
loading
微信扫码关注即可登录
登录后立即学习!
手机号
验证码
立即登录
您需要同意协议才可以进行登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
上上签 · 今日宜学习
恭喜!签到成功,获得 10 个虎课币
.
书山有路勤为径,学海无涯苦作舟
— 唐代文学家 韩愈
虎课网 · 每天进步一点点
分享到
全站48000+课程免费学!昨日已有26682位学员免费领取~点我领取