雪馨苑音画论坛

搜索
查看: 1261|回复: 36

【兰雪教程】大图音画的Html制作方法及发帖(原创)

[复制链接]

189

主题

6177

帖子

8万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
83746
发表于 2020-2-9 21:36:25 | 显示全部楼层 |阅读模式
   闲,我。
         
  小伙伴们,上课了......这节课我们讲大图音画的Html代码制作及发帖方法

                                          
   纲 目:

    一、 Photoshop里切割大图的方法

   二、存储切片的方法

   三、读取查看生成的html代码方法

   四、大图中如何加透明Flash及如何加原创动画

   五、如何精准定位大图中的透明F及调整大小

   六、在大图中加音乐代码MP3音乐格式的转换


         七、如何在文本文件.txt中编辑修改html代码

         八、如何测试文本文件中编辑修改后的特效效果

   九、上传文件,替换网址

   十、在论坛发帖html音画大图的 代码



评分

参与人数 1金钱 +100 收起 理由
虎妞 + 100

查看全部评分

回复

使用道具 举报

189

主题

6177

帖子

8万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
83746
 楼主| 发表于 2020-2-9 21:36:26 | 显示全部楼层
一、 Photoshop里切割图片的方法


   首先,大图的命名一定要用拼音字母。然后再在PS里打开。

  
如: 音画大图《岁月不居,未来可期》 命名为xuejc1570 (宽:1500  高:7000


在PS中打开 xuejc1570  jpg文件。

点切片选择工具,如下图....... 水平划分 15个。


水平划分多少依图高度而定,(我实际切割这帖是划分了25个),切片多上传后音画打开的速度就快。



                               
登录/注册后可看大图




                               
登录/注册后可看大图
  


各项参数如图, 品质选100 !!!


                               
登录/注册后可看大图




回复

使用道具 举报

189

主题

6177

帖子

8万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
83746
 楼主| 发表于 2020-2-9 21:36:27 | 显示全部楼层


二、存储切片的方法
切好图片后,保存时点 文件----存储为web所用格式...  html和图像


                               
登录/注册后可看大图





自动生成的html 网页文件和切片,保存在桌面(或文档),可看到生成的这2个文件。

                               
登录/注册后可看大图
打开images 文件夹,可看到切割图片已自动导入此文件夹中,如下图。
注意:文件名必须是拼音字母。若第一步时用的是汉字名,在这里要对每个切片都做修改的,否则下一步在空间上传时取得的图片网址无效。


                               
登录/注册后可看大图


回复

使用道具 举报

189

主题

6177

帖子

8万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
83746
 楼主| 发表于 2020-2-9 21:36:28 | 显示全部楼层

三、读取看到html代码的方法

可用二种方法读取看到html代码(仅是我知道的)

一是用文本文件.txt 打开读取。
xuejc1570.html  变成xuejc1570.txt。 方法就是改一下扩展名,点是。  


                               
登录/注册后可看大图


如下图已转为文本文件,点开即可读取及修改。 (编辑修改代码的方法后面讲)

        

                               
登录/注册后可看大图



二是在Frontpage 2003软件中测试

1.  打开Frontpage 2003 软件
2.  点文件,找到在PS里自动生成的html文件,双击xuejc1570.htm.



                               
登录/注册后可看大图



打开打开网页文件后如下图,左下角这4个重要功能:设计、拆分、代码、预览。
FP最大的优点就是即视即得,加透明F时时时可见,可精准调位,通过预览可全面设计透明F的大小,且代码可随编辑自动生成。




                               
登录/注册后可看大图







回复

使用道具 举报

189

主题

6177

帖子

8万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
83746
 楼主| 发表于 2020-2-9 21:36:29 | 显示全部楼层


1. 点左下角“代码”,可看到原先在PS里生成的html代码。(所有图均为局部截图)



                               
登录/注册后可看大图




2. “预览”可看到用html生成的大图,也是即将上传发帖的效果。



                               
登录/注册后可看大图


“设计”功能更强大了,加入一个或多个透明F都是在点开这个功能后,通过加层来设计的。
“拆分”我用的少。
总之,能看到代码和大图,才能编辑代码。
这两种打开html方法,都是为了深入加工编辑大图音画,为加透明F和调整其大小及位置做准备。
(后面要讲在这两种打开方式中,如何编辑添加透明F代码和调整大小)






回复

使用道具 举报

189

主题

6177

帖子

8万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
83746
 楼主| 发表于 2020-2-9 21:36:30 | 显示全部楼层
四、 大图中如何加透明Flash及如何加原创动画

以实例来分析,打开《岁月不居,未来可期》这帖大图  http://www.xxyyhlt.com/thread-2981-1-1.html


我们看到图中有3个透明F(星光、礼花和兰蝶)和2个原创动画(红灯笼和雪馨苑会员头像一组)。


http://ylx.hyyhzyw.com/xxy/youlanxue/xunjiaocheng/01.png

http://ylx.hyyhzyw.com/xxy/youlanxue/xunjiaocheng/02.png

http://ylx.hyyhzyw.com/xxy/youlanxue/xunjiaocheng/03.png

http://ylx.hyyhzyw.com/xxy/youlanxue/xunjiaocheng/04.png

http://ylx.hyyhzyw.com/xxy/youlanxue/xunjiaocheng/05.png

点开可见。

回复

使用道具 举报

189

主题

6177

帖子

8万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
83746
 楼主| 发表于 2020-2-9 21:36:31 | 显示全部楼层

1. 怎样在大图上加入透明F

按实例讲3组。一是以礼花F为例讲透明F的导入方法,二是以灯笼F为例讲原创动画的导入方法、精准定位和调整大小。
三是以兰蝶F为例讲灵活摆放图层的位置。


首先,在Frontpage 2003 软件中“layer”层概念及层属性的设置非常非常重要。
亲们有时间可以自己深入学习这个软件。我也只会些实用的操作哈。
FrontPage 2003 在网上可以下载。是一款非常非常实用的网页设计制作软件。


接着上面讲的,在Frontpage 2003 软件中已经打开了大图音画,点下面的“设计”。
在“设计“ 界面里,先点画面出现光标后——插入—— 点层



                               
登录/注册后可看大图


这就是加上的层(蓝色方框),可在框里导入透明F



                               
登录/注册后可看大图


在框里点光标,闪动后,点插入——图片——Flash图片,到存放的文件夹中找。


                               
登录/注册后可看大图




                               
登录/注册后可看大图



动画插入后,要设置Flash影片属性。
注意,框有两种颜色,外框蓝色,内框黑色。只有当黑色框时,右健才能设置动画的属性


                               
登录/注册后可看大图





回复

使用道具 举报

189

主题

6177

帖子

8万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
83746
 楼主| 发表于 2020-2-9 21:36:32 | 显示全部楼层
flash影片属性  “透明” 一定要勾选!!!

‘指定大小’和‘保持纵横比’,不特殊需要尺寸时不用勾选。
导入透明F和原创动画,步骤都一样,只不过导入原创动画时在层属性的设置上,“透明”这一项必须勾选。 这一点非常非常重要!!!


                               
登录/注册后可看大图


确定后,可预览看效果,即位置和大小。




                               
登录/注册后可看大图



“代码”查看,灯笼透明F的代码自动生成了。




                               
登录/注册后可看大图




回复

使用道具 举报

189

主题

6177

帖子

8万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
83746
 楼主| 发表于 2020-2-9 21:36:33 | 显示全部楼层

2.  加第二个透明F的方法。



再加一个图层,导入动画的方法与第一个相同。如图示。

加多个透明F的方法以此类推........



                               
登录/注册后可看大图







回复

使用道具 举报

189

主题

6177

帖子

8万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
83746
 楼主| 发表于 2020-2-9 21:36:34 | 显示全部楼层
回复

使用道具 举报

本版积分规则

手机版|小黑屋|雪馨苑音画论坛

GMT+8, 2020-9-26 12:05 , Processed in 0.743861 second(s), 27 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表