您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > 软件入门 > DW-案例分析与切图

DW-案例分析与切图

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

DW-案例分析与切图

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

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

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

Hello大家好我是M ,上节课我们结束了第三章关于CSS样式的学习 ,这一章呢M将 ,带领大家在DW里 ,完成一个商业网站的前端开发任务 ,好了 ,我们先来看一下将要制作的网页设计图 ,由于时间关系呢 ,M没有单独的去设计一个网站而是 ,直接从网上下载了一个网站模板 ,然后稍加了修改 ,我们可以看到呢 ,这个网站是一个非常标准的一个企业网站 ,一些网站的基本板块呢,它都有 ,比如说我们这个 ,导航栏啊banner图啊这些后面的内容部分 ,相信我们通过对这个网站案例的学习呢 ,能够完全巩固我们之前学习到的 ,关于 ,DW以及HTML还有CSS方面的知识 ,那么在我们正式开始这个案例之前呢 ,M首先要来教大家 ,去如何用PS来进行一个切图 ,为什么要切图呢,是因为 ,在网页的编写中呢 ,设计图中的图片部分呢我们是要 ,单独把它给拿出来 ,存放到我们的站点里面 ,以方便我们随时的调用 ,当然了相信大家有不少PS的老司机 ,知道怎么去切图 ,但是在你为了照顾一下其他不会的同学们呢 ,M还是稍微再罗嗦一下 ,首先呢我们在PS里面的工具栏里面 ,找到第1、2、3、4、5,第五个工具 ,我默认的它其实是一个裁剪工具 ,然后呢我们打开它 ,选择切片工具 ,切片工具以后呢我们就可以进行我们想要图片的 ,裁取裁剪了 ,打个比方,我们要把这张图给裁出来的话 ,

只需要用切片工具把它给选中 ,好了之后呢,我们当然还可以进行一个微调的 ,下面一定要完成的重合 ,选中之后怎么把它给导出呢 ,按住我们的Ctrl+Shift+Alt ,三大金刚键+S键 ,然后储存为Web所用格式 ,Web呢就是我们的网站了,这里我们点储存 ,然后 ,这里记住了,切片我们要选择是 ,选中的切片 ,假如我们把它给保存到桌面的话,点保存 ,然后可以看到桌面,这里我们的桌面就会多出一个images ,的文件 ,而我们这张图片就在里面 ,这个呢是PS的默认切片工具 ,去把它删掉,M在这里再给大家介绍一个PS的 ,切片插件 ,就是这个了,这个CUTTERMAN ,这个CUTTERMAN有什么好的呢 ,打个比方我们 ,还是切这一张图 ,这个我们直接找到这张图的所在的图层 ,选中这张图的图层以及剪切进了这个 ,形状因为下面的形状和它是一起的 ,选中之后我们 ,找到刚才我们的images文件 ,然后直接点 ,导出选中图层这里 ,CUTTERMAN就会直接帮我们把这张图导出来了 ,那么这个插件怎么安装呢,我们可以直接在百度里面 ,搜索Cutterman然后呢 ,直接进入它的官网 ,可以找到产品大全里面找到Cutterman ,直接下载就好了 ,

然后呢 ,网站里面也会有 ,这个插件的一个详细讲解以及安装的方法 ,这里M就不在解释 ,好切图OK了以后呢我们就 ,进入到的DW里面 ,来正式开始这个商业网站的一个项目 ,首先呢新建一个HTML ,然后标题呢,就叫做商业网站好了 ,创建,因为它是一个全新的网站,所以呢我们需要 ,新建一个站点 ,这个站点呢就叫还是叫商业网站吧 ,好,然后我们再把这个HTML保存到这个站点里面去 ,商业网站站点 ,然后这个HTML叫做 ,商业,哦对了这里我们还是尽量用英文吧 ,直接叫它web好了 ,好,我们的HTML有了 ,我们需要去新建一个 ,CSS文件 ,就是我们的 ,外部样式表了 ,保存 ,在站点里面新建一个文件夹 ,叫CSS ,然后这个CSS的文件名叫做style好了 ,然后我们再把这个 ,样式表,外部样式表给它 ,链接进来,没保存进去 ,好,我们直接去找我们的 ,

先在我们站点里面把这个CSS文件丢到这个文件夹里面去 ,再来一遍啊 ,把它给链接进来 ,这样我们的这个外部样式表就新建成功了 ,这里需要解释一下,在之前M的课程中的我们 ,是怎么写的啊 ,我们是直接写了一个Style的框 ,在里面写,然后我们在这个里面 ,写的我们整个网站的样式对不对 ,之前呢是为了方便大家观察因为我们 ,前面课程里面需要编写的代码并不是很多 ,但是这是一整套网站 ,我们后面的代码可能 ,会有几百行甚至 ,更多 ,我们不可能是一边 ,在下面写HTML写完之后,然后再翻上来去找我们的CSS样式 ,对不对 ,我们就可以直接把它给 ,放到外面 ,可以直接在这边来编写 ,首先呢是我们编写的方便其次呢 ,这个样式 ,可以引用到其它的网页上去 ,免得我们进行第二次编写 ,好了 ,我们的准备工作就绪以后呢首先呢 ,正式来看回到我们的设计图 ,我们来分析一下这个网页的一个结构 ,以及我们待会要怎么去进行它的一个编写 ,好,辅助线关掉,首先最上面 ,这个就是我们的导航栏部分了 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与

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

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

赞助一下吧

确定学习吗?

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

成为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

虎课积分
登录注册
使用手机号码登录
使用手机号码登录
手机号码格式错误
换一个
图形验证码错误,请重新输入
验证码错误,请重新输入
登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
上上签 · 今日宜学习
恭喜!签到成功,获得 10 个虎课币
.
书山有路勤为径,学海无涯苦作舟
— 唐代文学家 韩愈
虎课网 · 每天进步一点点
分享到