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

幽兰雪 · 发表于 2020-2-9 21:36:25

闲，我。

小伙伴们，上课了......这节课我们讲大图音画的Html代码制作及发帖方法

纲目：

一、在 Photoshop里切割大图的方法

二、存储切片的方法

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

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

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

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

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

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

九、上传文件，替换网址

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

幽兰雪 · 发表于 2020-2-9 21:36:26

一、在 Photoshop里切割图片的方法

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

如：音画大图《岁月不居，未来可期》命名为xuejc1570 （宽：1500 高：7000）

在PS中打开 xuejc1570 jpg文件。

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

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

登录/注册后可看大图

登录/注册后可看大图

各项参数如图，品质选100 ！！！

登录/注册后可看大图

幽兰雪 · 发表于 2020-2-9 21:36:27

二、存储切片的方法

切好图片后，保存时点文件----存储为web所用格式... 选html和图像

登录/注册后可看大图

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

登录/注册后可看大图

打开images 文件夹，可看到切割图片已自动导入此文件夹中，如下图。

注意：文件名必须是拼音字母。若第一步时用的是汉字名，在这里要对每个切片都做修改的，否则下一步在空间上传时取得的图片网址无效。

登录/注册后可看大图

幽兰雪 · 发表于 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的大小，且代码可随编辑自动生成。

登录/注册后可看大图

幽兰雪 · 发表于 2020-2-9 21:36:29

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

登录/注册后可看大图

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

登录/注册后可看大图

那“设计”功能更强大了，加入一个或多个透明F都是在点开这个功能后，通过加层来设计的。

“拆分”我用的少。

总之，能看到代码和大图，才能编辑代码。

这两种打开html方法，都是为了深入加工编辑大图音画，为加透明F和调整其大小及位置做准备。

(后面要讲在这两种打开方式中，如何编辑添加透明F代码和调整大小)

幽兰雪 · 发表于 2020-2-9 21:36:30

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

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

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

http://bb.xxyyhlt.cn/xxy/youlanxue/xunjiaocheng/01.png

http://bb.xxyyhlt.cn/xxy/youlanxue/xunjiaocheng/02.png

http://bb.xxyyhlt.cn/xxy/youlanxue/xunjiaocheng/03.png

http://bb.xxyyhlt.cn/xxy/youlanxue/xunjiaocheng/04.png

http://bb.xxyyhlt.cn/xxy/youlanxue/xunjiaocheng/05.png

点开可见。

幽兰雪 · 发表于 2020-2-9 21:36:31

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

按实例讲3组。一是以礼花F为例讲透明F的导入方法，二是以灯笼F为例讲原创动画的导入方法、精准定位和调整大小。

三是以兰蝶F为例讲灵活摆放图层的位置。

首先，在Frontpage 2003 软件中“layer”层概念及层属性的设置非常非常重要。

亲们有时间可以自己深入学习这个软件。我也只会些实用的操作哈。

FrontPage 2003 在网上可以下载。是一款非常非常实用的网页设计制作软件。

接着上面讲的，在Frontpage 2003 软件中已经打开了大图音画，点下面的“设计”。

在“设计“ 界面里，先点画面出现光标后——插入—— 点层

登录/注册后可看大图

这就是加上的层（蓝色方框），可在框里导入透明F。

登录/注册后可看大图

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

登录/注册后可看大图

动画插入后，要设置Flash影片属性。

注意，框有两种颜色，外框蓝色，内框黑色。只有当黑色框时，右健才能设置动画的属性

登录/注册后可看大图

幽兰雪 · 发表于 2020-2-9 21:36:32

flash影片属性 “透明” 一定要勾选！！！

‘指定大小’和‘保持纵横比’，不特殊需要尺寸时不用勾选。

导入透明F和原创动画，步骤都一样，只不过导入原创动画时在层属性的设置上，“透明”这一项必须勾选。这一点非常非常重要！！！

登录/注册后可看大图

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

登录/注册后可看大图

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

登录/注册后可看大图

幽兰雪 · 发表于 2020-2-9 21:36:33

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

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

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

登录/注册后可看大图

幽兰雪 · 发表于 2020-2-9 21:36:34

[教程] 【兰雪教程】大图音画的Html制作方法及发帖（原创）

评分