您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > 软件入门 > DW-电商网站案例-顶部栏

DW-电商网站案例-顶部栏

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

DW-电商网站案例-顶部栏

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

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

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

哈喽大家好我是M ,上节课呢我们了解了一下,我们 ,这一次整个的一个 ,案例的设计图的部分 ,也做了一定的分析,还有我们 ,的一些站点方面的准备 ,前期准备啊 ,那么我们这这节课呢,就正式的来 ,着手去 ,做这一套网站了 ,那我们首先要做的是什么呢 ,这是我们 ,第一个页面,也就是我们的主页的 ,顶部的 ,这个 ,顶部条 ,这个顶部条里面有些什么东西呢 ,第一个 ,是这行字 ,这是啥意思啊 ,这个GBP是英镑的意思 ,这里的意思就是货币是英镑 ,所以是个外国网站吗 ,价格就是英镑的价格 ,好,然后这边呢 ,最右边这个蓝色的,大家应该 ,看得出来,因为有图标,对不对 ,这是一个购物车的按钮 ,这两个是什么呢?这两个一个是登录,一个是注册 ,那么这个条 ,就是这个内容了 ,好,我们先进到DW里面去 ,DW里面,找到我们上次的站点 ,然后 ,打开第一个页面 ,好,全新的一个页面啊 ,只是多了一个我们上次链接的CSS,对吧 ,好,我们来 ,着手看一下 ,这次我们说了 ,我们 ,这次是 ,案例一定要考虑到一个什么,考虑到一个网站的一个全局性 ,以及它的适配,对不对 ,那么这个 ,PSD文件 ,

尺寸我们看一下现在宽度是1500 ,其实 ,当M最初拿到这个文件的宽度它是 ,它是2000的,M把它给缩了 ,缩小到1500了 ,为什么要缩小呢 ,因为我们现在 ,我们看的这个视频的 ,尺寸,我录制的尺寸是 ,那么 ,M自己在实际的工作当中呢,公司 ,内部也有调查 ,就是说目前 ,公司所有的员工使用的最小屏幕 ,是 ,十三寸的屏幕分辨率大概是在1300多吧,我不太记得了 ,好,那么就说明一个什么问题呢说明如果我们要 ,把我们 ,网页的内容部分 ,展示给我们的所有的用户看的话 ,那么我们这个内容的部分 ,就是这一块 ,我们是最好是不要超过1300的 ,也就是说要控制在1300以内 ,那么 ,打个比方啊,我们这个地方 ,就是内容这一块 ,我们来看一下宽度 ,大概一千 ,一千二百多吧 ,这一块 ,把它放在网页的居中部分以后 ,那么我们最小屏幕大概十三寸的屏幕呢 ,就可以完完整整的 ,看到我们的内容的部分了 ,那么 ,小屏是ok了,大屏怎么办呢大屏的左右两边 ,就会空出来 ,它屏幕的分辨率有多大,然后 ,有多宽,减去我们的1200之后 ,剩下的 ,再一平分,左边是这么多右边是这么多 ,这个呢就是我们 ,这一个网站需要 ,了解的一个非常基本的东西 ,好,那回过来 ,看我们这一节课要解决的这个顶部条 ,

说这么多有什么用呢 ,如果在第一个那个商业网站案例的时候 ,我们 ,来写这个网站的话,M会教大家怎么写呢 ,一上来两个尺寸 ,宽度1500对不对,然后直接 ,一个Div设置宽度1500然后高度 ,高度好像是三十多把,我没记错的话,三十三 ,对不对,我们 ,就会直接这样写 ,那么现在我们要考虑到适配的这个问题以后 ,我们都不能这样做了,那 ,这个部分是什么样的呢?首先这个条 ,是不管多大的 ,尺寸的显示器都必须是占满的 ,那么它的宽度呢是什么呢 ,就是百分之一百 ,对不对就是你浏览器的宽度 ,有多少 ,我就显示多少 ,然后 ,我们外面这个宽度是100%的Div ,里面呢包一个包一个什么 ,我们可以包Ul也可以包四个小的Div都可以 ,打个比方吧,包一个Ul吧 ,这里是Ul ,然后里面有四个粒对不对 ,第一个Li ,第二个Li ,第三个和第四个 ,那么这个Ul呢,我们就可以给一个具体的 ,宽度了,打比方现在是862对不对,860啊 ,然后我们给它860以后,让它Margin+0+Alt ,就是上下是零间距左右是 ,自动,自动是什么,就是居中 ,让它居中在整个显示器 ,的正中间 ,这个是我们的一个 ,结构上的一个思考 ,这是这个是有区别于我们之前学习的第一个案例 ,是直接把 ,宽度给写死 ,这一次呢我们一定要考虑到这个东西进去 ,好说了这么多,我们 ,进入到DW里面 ,在 ,

开始写html之前呢 ,M先在样式里面写一些公共的样式 ,星号 ,星号是什么我记得 ,M在前面的某一节课里面有讲过星号就是所有标签 ,所有标签都适用于现在括号里面的样式 ,那我们首先要做些什么呢 ,首先第一个就是Padding ,内填充变成零 ,然后间距 ,也要变成零 ,因为有一些标签 ,它会自带一些Padding或者Margin ,打个比方我们的P标签会自带一个 ,Padding-bottom十个像素的Padding-bottom ,我们在这里统一的把它给去掉 ,这样呢免得我们后面用 ,某一些自带的样式的标签 ,还需要把它自带的样式给去掉我们这里直接一次性 ,全部给把它给干掉 ,好Padding ,Margin ,还有什么 ,还有我们可以设置一下字号 ,Font-size ,我们这个网页由于被人缩小了,其实我们正儿八经的话应该是 ,十二个像素,这是正文部分,当然除了一些 ,其他的标题啊之类的我们可以单独再去设置 ,还是设置一个十二个像素 ,大概先就这些吧 ,这是一个公共的样式啊 ,好我们来 ,看Html ,首先Div对不对 ,Top ,Top的背景吧 ,这一层是什么,宽度100%然后给它一个背景色 ,然后里面呢包一个Ul ,

登录后查看更多
换一批

为你推荐

每周一练

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

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

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

赞助一下吧

确定学习吗?

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

成为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位学员免费领取~点我领取