当前位置:首页>ps实例教程>ps网页设计>网页模板>教程内容

网页模版,个人网站建设入门知识(2)

来源:站酷 作者:Becky赵 学习:23471人次

用切片工具切出上面分出的那些区域,注意切片与切片之间不能相交,也不能有间隙,仔细点调整好。切片的时候大小不合适可以随时调整大小,方法和使用变形工具类似。

www.16xx8.com_021T95315-7.jpg
<点图片看大图>


切片完成之后想调整还可以用切片选择工具重新选择任意切片然后调整,这句话像不像在念经。。。

然后存储为web所用格式,快捷键就不说了,你懂的。格式选择JPG,尺寸不要动,点存储,文件名先随便,格式选仅限图像,默认设置,所有切片。

www.16xx8.com_021Ta430-8.jpg
<点图片看大图>


这里其实有个小支线任务,格式可以选择HTML和图像,PS会帮你生成一个网页,不过那个太LOW了,咱大侠们不屑一顾,嗯,不管你们信不信反正我信了。

保存后打开你存的文件夹,PS有生成一个images文件夹,表改这位夹兄的名字哟,实际上网站保存图片的文件夹都叫这个名字。打开images文件夹,我们可以看到切好的图。

www.16xx8.com_021T923V-9.jpg


然后分别给它们命名,简单点可以1234,复杂点就是为了SEO和可维护性考虑,命名得语义化,例如LOGO,就命名首页-头部-logo,home_top_logo。这样的话在其他地方用的另外尺寸的logo就不会和这个logo搞混。

命名好后,把images文件夹整个复制到网页文件所在位置,这点很重要别忘记哟。

然后我们回到DW,在HTML中,有两种方法插入图片,先让我们试试第一种,直接在页面插入。

www.16xx8.com_021T9B17-10.jpg


看到那个img标签了吗,那就是直接插入一张图片的意思,格式反正你记住就这么写就行,src后面的引号里的是图片文件的相对位置,这里的意思就是与网页文件同级的文件夹images里的1.jpg。相对位置的理解得练习一段时间,不过不难放心。

除了相对位置,还有绝对位置,你百度一张图片右键属性可以看到地址那里有一长串的网址,把那个复制下来替换掉相对地址就行,不过网站一般没有用到这个的时候,这个先不深究。

www.16xx8.com_021T952J-11.jpg

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
孤芳不自赏2019-01-21 12:58
太棒了
小蚂蚁2018-07-20 08:11
必须支持
狮子的星空吧2017-05-28 09:49
想看看
深深的海洋2017-05-28 04:07
好复杂的赶脚

关注大神微博加入>>

网友求助,请回答!