Arles Image Web Page Creator 教程

  网上有不少这个软件的教程,不过一般都比较陈旧了,大部分是4.1.8的中文版。最近试用了一下目前最新的版本7.4.2英文版,功能上有一定的修整,尤其是对表格的格式化尤为明显,值得推荐一下,于是重新写了一下教程。

0.依次选择菜单栏的【Tools(工具)】、【Options(选项)】菜单,进入【Web Page Creator Options】对话框;接着选中【HTML】标签,在【Document encoding(HTML文档编码)】功能区的下拉菜单中,将默认的【Western(Latin1)】(西方拉丁文1)改为【Simplified Chinese(GB2312)】(简体中文国标2312)或者【Traditional Chinese(big 5)】(繁体中文大5码)这样制作出的页面默认编码为中文。如图;


①如果注册的话,该项可以勾选上,这样页面上没有开发商链接;
②设置编码;

▲有些网络空间的默认编码为其他,所以即使你照上面设置也不会显示中文。
1.回到主界面,选择【Files(文件)】标签,如图1;

①为准备制作超市的图片地址;
②为输出文件夹类型,选择【Same as source folder(和原文件夹相同)】;
③为了上传和管理方便一般勾选,
④为高级选项管理文件夹。

1-A.点击【Advanced…(高级)】按钮,在此标签中,为减少文件夹数量,将
  ①【Image pages folder(图象页文件夹)】;
  ②【Images folder(图象文件夹)】;
  ③【Oranginl image folder(原图象文件夹)】;
以上三项勾选为【Target folder(目标文件夹)】,这样最终生成的文件最少,而且简洁美观,如图1-A;

2.回到主界面,选中【Thumbnails(縮略圖)】标签,这里是调整缩略图大小和显示方式,如图2;

2-A.一般的图集长宽不是固定的比例,这样索引页看上去不是那么整齐,因此可以勾选【Crop image to fit height&width(修剪图像至相当的长宽)】,接着点击【Crop Options(修剪选项)】按钮,如图2-A;

①横向修剪的百分比;
②纵向修剪的百分比;
③修剪后预览画面。

2-B.回到【Thumbnails(缩略图)】标签,点击【Image effects(图象效果)】选区的【Options(选项)】按钮,如图2-B;

①你目前选择的显示效果,其中内置了许多特殊效果;
②由于内置的效果基本都是复合效果,这里列出效果名称,你也可以只勾选部分你需要的样式效果;
③勾选效果的具体设置参数,根据所选的效果不同参数也千奇百怪,呵呵;
④为效果预览画面。

▲你可以把自己设置的效果保存方便以后使用,由于内置了很多效果和滤镜,添加文本、水印、像框等等。除非自己尝试,不然很难说完全。

3.回到主界面,选择【images(图像)】标签,将【Resize images(重设图像大小)】的勾选去掉,如图3;

3-A.然后点击【Advance…】按钮,将【JPEG quality(JPEG质量)】滑块选至最大,如图3-A;

4.回到主界面,设置【index(索引)】标签,这里是整个超市设置的重点,包括几个重要选项,如图4;

①【index table(索引页表格)】的行和列数,即用多少行和列显示缩略图;
②【Border…(边框)】;
③【Navigation(导航选项)】,全部勾选就表示显示位置为顶部和底部;
④【HTML Design…(HTML设计)】。

4-A-a.先看【Border…(边框)】选项,你可以发现,这里的设置更为复杂,包括宽度、样式、颜色等等,如图4-A-a;

①【Borders(边框)】标签左右还有许多标签,头疼:(;
②【Border style(边框样式)】,我这里选择【Inside】,我想熟悉html的兄弟应该不会陌生吧;
③【Line style(线的样式)】,这也是html、css中的东东,我选【Dashed】;

▲这里可设置的样式很多,有些即使是中文你也不一定明白。直到尝试生成索引页后才知道:原来是这样的!

4-A-b.接着选择【Thumbnail links(缩略图链接)】标签,这里需要简单设置一下,如图4-A-b;

①【Link what?(把什么设置为链接)】,这个选项是个人习惯问题,里面有3个选项,分别表示【Thumbnail and title(缩略图和标题)】、【Thumbnail only(只是缩略图)】、【Title only(只是标题)】;
②【Link to(链接到哪)】,这个没什么说的,选择【Oranginal images(原始图像)】;
③【Link target(链接打开方式)】,这个选择【_blank】,相当于新开窗口查看原始图像;

4-B.回到【index(索引)】标签,点击【Navigation(导航选项)】的【Options…(选项)】,如图4-B;

①这也有许多导航显示的方案可供选择,一般默认即可;
②为保持索引页面简洁,一般只保留【Previous(上一页)】和【Next(下一页)】;
③如果你觉得软件提供的导航图标不够酷,你也可以把其它的导航图标拿来用,点击浏览图标位置;

4-C-a.回到【index(索引)】标签,点击【HTML Design…(HTML设计)】,【layout(设计规划)】标签里设置索引页元素的颜色和背景,如图4-C-a;

①设置页面元素配色,可以根据自己爱好调色;
②设置结果预览画面;
③为页面设置背景图像,默认为平铺;

4-C-b.接着选择【Banners(头标题)】标签,一般的网站logo放在这里,如图4-C-b;

①图片文件地址,图中选择顶部放置图像。

4-C-c.然后选择【Custom HTML(自定义HTML)】标签,这项设置需要一定的html基础,可以添加一些html、css代码以美化页面,如图4-C-c;

①在页面顶部添加html代码;
②在页面底部添加html代码;
③在段内添加html代码;

▲在此添加代码的,还有”copyright 2004 oursm by suhe”字样的,晕……把自己的版权信息加进去才好吧。

5.回到主界面,接着设置【Title(标题)】标签,这里主要设置【Gallery title(图库标题)】、【Fonts…(字体)】和【Advance…(高级)】等项,如图5;

①这是索引页图库标题,填入你的图集名称即可,也可以在【Advance…(高级)】里设置函数;
②字体设置;
③高级选项;

5-A.先看【Fonts…(字体)】项,一般只设置【Gallery title(图库标题)】和【Thumbnail title(缩略图标题)】两项,如图5-A2;

①为字体族,相当于font-family;
②字体大小;
③字体颜色;

5-B.回到【Title(标题)】标签,点击【Advance…(高级)】按钮,这里同样设置【Gallery title(图库标题)】和【Thumbnail title(缩略图标题)】两项,如图;

①通过函数设置标题,图中选择的是【Folder name(文件夹名称)】;
②点击就能插入上步选择的函数表达式;
③显示当前标题,图中所示没有插入表达式,因此还是按照手动输入的显示。如果没有手动输入,并且插入了某个表达式,那么标题将以表达式的方式显示;
④插入了三个表达式,那么【Thumbnail title(缩略图标题)】将显示【ImageHeight(图像高度)| ImageWidth(图像宽度)】以及【ImagePixels(图像像素)】的信息,而不是默认的文件名。

6.到此,基本设置完毕,设置比较繁琐,为了以后再用,可以保存一下。然后只要点击功能区的【All(全部)】或者F9,就可以输出文件了,如图6;

7.新开窗口浏览模板样式如图7-A和7-B;

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料