先看一下最后得到的效果,见这里:北京2008奥运会开幕式精彩图片——精美得让你难以置信的160张,强烈的心灵震撼(http://www.cncctv.com/oyphoto/OyPhoto01.html),这是收集整理的北京奥运开幕式的160张精美图片。
首先,我将这160张图片放在同一个文件夹(OyPhoto/images)下面,并对它进行了批量的重命名(当然是采用自己以前写的一个重命名的小程序来实现的);
1、使用FLASH方式浏览(http://www.cncctv.com/oyphoto/)。我使用另一个程序将所有大图生成缩略图,放在缩略图文件夹(OyPhoto/thumbs)下,然后使用一个FLASH的viewer.swf文件自动读取文件夹中一个gallery.xml文件,然后根据gallery.xml文件再分别调用相应的小图和大图,以在http://www.cncctv.com/oyphoto/中显示出来。这个做法我这里不详述。
2、为了自动将OyPhoto/images目录下的所有图片自动生成含分页的静态网页,我首先写出了用于生成静态图片网页的模板文件OyPhoto_Template.htm。
制作这个网页时,你可以首先在设计软件(如Illustrator, CorelDraw, Photoshop等)设计出你需要的网页图片式样,然后利用Fireworks或Photoshop切片成网页,并使用Dreamweaver等网页制作软件生成最后你需要的网页。
以下是OyPhoto_Template.htm的内容(注意我用橙红色的表示的部分{$PhotoTemplate$}和{$PhotoPages$}):
<html>
<head>
<title>北京2008奥运会开幕式精彩图片——精美得让你难以置信的160张,强烈的心灵震撼 www.cncctv.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="网络电视,免费网络电视,在线电视直播,免费电视,电视直播,在线广播,在线电台直播,奥运开幕式精彩图片,精心整理完美版">
<meta name="description" content="CnCCTV免费网络电视|在线电视直播|在线电台直播|奥运开幕式精彩图片,精心整理完美版">
<style type="text/css">
<!--
body,td,th {
font-family: 宋体,Arial, Helvetica, sans-serif ;
font-size: 9pt;
color: #FFFFFF;
}
body {
background-color: #000000;
margin-left: 5px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
.p9 {
font-family: "宋体", Arial;
font-size: 12px;
COLOR: #ffffff;
}
.yellow
{ font-family: "宋体", Arial;
font-size: 13px;
COLOR: #ffff00;
}
.black
{ font-family: "宋体", Arial;
font-size: 13px;
COLOR: #000000;
}
.red
{ font-family: "宋体", Arial;
font-size: 13px;
COLOR: #ff0000;
}
.redBold
{ font-family: "宋体", Arial;
font-weight:bold;
font-size: 13px;
COLOR: #ff0000;
}
.yellowBold
{
font-family: "宋体", Arial;
font-weight:bold;
font-size: 13px;
COLOR: #ffff00;
}
.white9p
{
font-family: "宋体", Arial;
font-size: 13px;
COLOR: #ffffff;
}
input.withBorder
{
font-family: "宋体", Arial;
font-size: 13px;
border:1px solid #000000;
}
a.titleLink {
font-size: 9pt;
color: #FFFFFF;
text-decoration: none;
}
a{
font-size: 9pt;
color: #FFFFFF;
text-decoration: none;
}
-->
</style></head>
<body>
<table width="958" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="290"><a href="/"><img name="CnCCTV_HomeForWeb_r1_c10" src="../Web/images/CnCCTV_HomeForWeb_r1_c10.jpg" width="282" height="119" border="0" alt="CNCCTV LOGO"></a></td>
<td width="202"><table width="100%" height="117" cellpadding="0" cellspacing="0" style="border:solid 2px #FF9900;">
<tr>
<td width="18" height="18" background="../TV/CCTV/CCTVPlayer/YellowLGB_Bg.png"><img src="../TV/CCTV/CCTVPlayer/TriangleLeft_ForTitle.png" alt="向左指示三角形" width="18" height="18" /></td>
<td width="100%" height="18" background="../TV/CCTV/CCTVPlayer/YellowLGB_Bg.png" class="black"> 上cncctv欣赏电视/电台节目</td>
</tr>
<tr>
<td height="66" colspan="2"><div class="STYLE4" style="padding:6px;line-height:17px;">本站旨在为广大网友提供方便,奉行免费。最近刚刚开通试运行,定有不足之处,望广大网友提出你的宝贵意见和建议。</div></td>
</tr>
<tr>
<td height="16" colspan="2" style="border-top:solid 1px #FF9900;"><div align="center">欢迎光临CNCCTV!</div></td>
</tr>
</table></td>
<td width="8"></td>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="461" height="116" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<form name="form1" method="post" action="">
<tr>
<td width="160" height="118" background="../Radio/images/RadioTitleBackground.jpg" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="36" rowspan="6"> </td>
<td height="20" valign="bottom"><img src="../Radio/images/whiteBlock.gif" width="4" height="4" align="absmiddle"> <a href="../Radio/CNR/ChinaNationRadio.htm">中央人民广播电台</a></td>
</tr>
<tr>
<td height="20" valign="bottom"><img src="../Radio/images/whiteBlock.gif" width="4" height="4" align="absmiddle"> <a href="../Radio/Province/index.htm">地方人民广播电台</a></td>
</tr>
<tr>
<td height="20" valign="bottom"><img src="../Radio/images/whiteBlock.gif" width="4" height="4" align="absmiddle"> <a href="../Radio/NetRadio/index.htm">网络电台</a></td>
</tr>
<tr>
<td height="20" valign="bottom"><img src="../Radio/images/whiteBlock.gif" width="4" height="4" align="absmiddle"> <a href="../Radio/HkMacTw/index.htm">港澳台地区</a></td>
</tr>
<tr>
<td height="20" valign="bottom"><img src="../Radio/images/whiteBlock.gif" width="4" height="4" align="absmiddle"> <a href="../Radio/Foreign/index.htm">国外电台</a></td>
</tr>
<tr>
<td valign="bottom"><div align="right"><a href="/radio/AllRadioChannel.htm"><img src="../Radio/images/more.gif" width="30" height="5" border="0" align="absmiddle"></a> </div></td>
</tr>
</table></td>
<td width="6"></td>
<td width="20"><img src="../Radio/images/CnCCTVdotCom.jpg" width="20" height="117"></td>
<td width="6"></td>
<td width="264" background="../Radio/images/TVTitleBackground.jpg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="36" rowspan="3"> </td>
<td height="30"> </td>
</tr>
<tr>
<td height="69" valign="bottom"><table width="92%" border="0" align="center" cellpadding="4" cellspacing="0">
<tr>
<td><img src="../Radio/images/whiteBlock.gif" width="4" height="4" align="absmiddle"> <a href="../TV/CCTV/index.htm">央视频道</a></td>
<td><img src="../Radio/images/whiteBlock.gif" width="4" height="4" align="absmiddle"> <a href="../TV/Foreign/index.htm">国外影视</a></td>
<td><img src="../Radio/images/whiteBlock.gif" width="4" height="4" align="absmiddle"> <a href="../TV/Finance/index.htm">财经证券</a> </td>
</tr>
<tr>
<td><img src="../Radio/images/whiteBlock.gif" width="4" height="4" align="absmiddle"> <a href="../TV/Province/index.htm">国内电视</a> </td>
<td><img src="../Radio/images/whiteBlock.gif" width="4" height="4" align="absmiddle"> <a href="../TV/PE/indexPE.htm">体育频道</a></td>
<td><img src="../Radio/images/whiteBlock.gif" width="4" height="4" align="absmiddle"> <a href="../TV/SpecialVideo/default.htm">影视专题</a> </td>
</tr>
<tr>
<td><img src="../Radio/images/whiteBlock.gif" width="4" height="4" align="absmiddle"> <a href="../TV/HKMacTW/index.htm">港台影视</a></td>
<td><img src="../Radio/images/whiteBlock.gif" width="4" height="4" align="absmiddle"> <a href="../TV/Art/index.htm">文艺综合</a> </td>
<td><img src="../Radio/images/whiteBlock.gif" width="4" height="4" align="absmiddle"> <a href="../TV/Other/index.htm">其他频道</a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="15"><div align="right"><a href="../Radio/AllTVChannel.htm"><img src="../Radio/images/more.gif" width="30" height="5" border="0" align="absmiddle"></a> </div></td>
</tr>
</table></td>
</tr>
</form>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td height="3" colspan="3"></td>
</tr>
</table>
{$PhotoTemplate$}
{$PhotoPages$}
</body>
</html>
上面{$PhotoTemplate$}和{$PhotoPages$}这两个分别起着占位作用,用于替换成图片显示位置及用于分页浏览的相关文字及链接。其中前者将由另一个模板文件(PhotoTemplate.htm)所生成的代码取代,后者则由我们的程序来生成相关的文字及链接。
3、PhotoTemplate.htm的内容:
<table width="960" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="940" border="0" cellspacing="0" cellpadding="0" style="border:solid 1px #FFFFFF;">
<tr>
<td height="38" colspan="3" style="background:Url(UI/TV_Bg_Top.png); background-repeat:no-repeat;"> </td>
</tr>
<tr>
<td width="38" height="488" style="background:Url(UI/TV_Bg_Left.png); background-repeat:no-repeat;"></td>
<td width="862" style="border:solid 1px #666666;"><div align="center"><img src="images/{$PhotoFileName$}"></div></td>
<td width="40" style="background:Url(UI/TV_Bg_Right.png); background-repeat:no-repeat;"></td>
</tr>
<tr>
<td> </td>
<td><div align="right"><img src="UI/TV_Bg_Buttons.png" width="308" height="40"></div></td>
<td> </td>
</tr>
</table>
</td>
<td width="12" style="border:solid 1px #CCCCCC;background:url(../TV/CCTV/CCTVPlayer/CnCCTV_CenterVertialAd_Bg.png); background-repeat:repeat-y;"></td>
</tr>
</table>
<br>
由于一个网页中放多张图片,所以上面的代码会根据每页的图片数量而被循环利用多次。如果每页图片为16张,那么,将被循环利用16次。
3、使用WinForm程序写出所有网页。
为了写出所有网页,我写了一个简单的WinForm程序。
(1)首先,写了一个OpenFilesDirs(string openFilePath, string getFilesFilter)方法,将指定文件夹(参数是openFilePath),按指定的过滤方式(参数getFilesFilter,比如*.jpg)读取完整的文件名称到一个ListBox(这里是 listBoxFiles)中。
private void OpenFilesDirs(string openFilePath, string getFilesFilter)
{
if (openFilePath == String.Empty)
{
return;
}
try
{
string[] arrDirs;
arrDirs = Directory.GetDirectories(openFilePath);
System.IO.DirectoryInfo dirInfo =
new System.IO.DirectoryInfo(openFilePath);
System.IO.FileInfo[] files;
string[] arrFilter = getFilesFilter.Split(';');
bool isAllFile = false;
for (int i = 0; i < arrFilter.Length; i++)
{
if (arrFilter[i] == "*.*")
{
isAllFile = true;
break;
}
}
if (!isAllFile)
{
for (int i = 0; i < arrFilter.Length; i++)
{
files = dirInfo.GetFiles(arrFilter[i]);
if (files != null)
{
foreach (System.IO.FileInfo file in files)
{
if (
((File.GetAttributes(file.FullName) & FileAttributes.Hidden) == FileAttributes.Hidden)
|| ((File.GetAttributes(file.FullName) & FileAttributes.ReadOnly) == FileAttributes.ReadOnly)
|| ((File.GetAttributes(file.FullName) & FileAttributes.System) == FileAttributes.System)
)
{
//如果是隐藏文件、只读文件或者是系统文件,则不做任何事。
//listBoxFilesHidden.Items.Add("----------------------");
}
else
{
listBoxFiles.Items.Add(file.FullName);
}
}
}
}
}
else
{
files = dirInfo.GetFiles("*.*");
if (files != null)
{
foreach (System.IO.FileInfo file in files)
{
if (
((File.GetAttributes(file.FullName) & FileAttributes.Hidden) == FileAttributes.Hidden)
|| ((File.GetAttributes(file.FullName) & FileAttributes.ReadOnly) == FileAttributes.ReadOnly)
|| ((File.GetAttributes(file.FullName) & FileAttributes.System) == FileAttributes.System)
)
{
//如果是隐藏文件、只读文件或者是系统文件,则不做任何事。
//listBoxFilesHidden.Items.Add("----------------------");
}
else
{
listBoxFiles.Items.Add(file.FullName);
}
}
}
}
if (chkBoxIncludeSubFolder.Checked) //如果包含子文件夹,则轮循子文件夹中的文件
{
if (arrDirs.Length != 0)
{
for (int i = 0; i < arrDirs.Length; i++)
{
OpenFilesDirs(openFilePath + "//" + Path.GetFileName(arrDirs[i]), getFilesFilter);
}
}
else
return;
}
}
catch (Exception ex)
{
MessageBox.Show("产生如下错误:/n" + ex.Message, "发生错误!");
}
}
(2)读图片显示的模板,图片区模板文件及写出分页文字及相关链接:
string templateFileNameOyPhoto = @"F:/Johnson/CnCCTV/OyPhoto/OyPhoto_Template.htm";
private bool WriteOyPhoto()
{
bool isSuccessful = false;
try
{
string photoTemplate = @"F:/Johnson/CnCCTV/OyPhoto/PhotoTemplate.htm";
String contentPhotoOriginal = string.Empty;
//读图片显示的模板
using (StreamReader sr = new StreamReader(photoTemplate, Encoding.Default))
{
contentPhotoOriginal = sr.ReadToEnd();
}
//读网页模板
String contentTemplateFileNameOyPhotoOriginal = string.Empty;
using (StreamReader sr = new StreamReader(templateFileNameOyPhoto, Encoding.Default))
{
contentTemplateFileNameOyPhotoOriginal = sr.ReadToEnd();
}
int count = listBoxFiles.Items.Count;
//每页图片数量
int PhotoCountPerPage = 16;
//计算页数
int pageCount = count / PhotoCountPerPage;
if (count % PhotoCountPerPage > 0)
{
pageCount += 1;
}
int currentPageNo = 0;
int photoNo = 0;
string contentPhoto = string.Empty;
string contentTemplateFileNameOyPhoto = string.Empty;
for (int j = 0; j < pageCount; j++)
{
contentPhoto = contentPhotoOriginal;
contentTemplateFileNameOyPhoto = contentTemplateFileNameOyPhotoOriginal;
// 生成网页
// 网页文件内容
// 单张图片内容 contentPhoto
StringBuilder sbContentPhoto = new StringBuilder();
for (int k = 0; k < PhotoCountPerPage; k++)
{
photoNo = j * PhotoCountPerPage + k;
//图片文件名
string photoFileName = Path.GetFileName(listBoxFiles.Items[photoNo].ToString());
sbContentPhoto.Append(contentPhoto.Replace("{$PhotoFileName$}", photoFileName));
if (photoNo > count) break;
}
// 替换图片位置模块
contentTemplateFileNameOyPhoto = contentTemplateFileNameOyPhoto.Replace("{$PhotoTemplate$}", sbContentPhoto.ToString());
// 替换页码位置模块{$PhotoPages$}
StringBuilder sbPage = new StringBuilder();
sbPage.Append(@"<div align=""center"">分页浏览: ");
for (int m = 0; m < pageCount; m++)
{
//生成页码
if (j != m)
{
sbPage.Append(@"<a href=""OyPhoto" + string.Format("{0:00}", m+1) + @".html"" class=""yellow"">" + (m+1).ToString() + "</a>");
}
else
{
sbPage.Append(@"<span class=""redBold"">" + (m+1).ToString() + @"</span>");
}
if (m < pageCount)
{
sbPage.Append(" ");
}
}
sbPage.Append(@"</div>");
contentTemplateFileNameOyPhoto = contentTemplateFileNameOyPhoto.Replace("{$PhotoPages$}", sbPage.ToString());
//写文件
string htmlFileName = htmlFileFolderOyPhoto + @"/OyPhoto" + string.Format("{0:00}", j + 1) + @".html";
if (File.Exists(htmlFileName))
{
MessageBox.Show(string.Format("{0} already exists.", htmlFileName));
return false;
}
using (StreamWriter sw = new StreamWriter(htmlFileName, false, System.Text.Encoding.GetEncoding("GB2312")))
{
sw.Write(contentTemplateFileNameOyPhoto);
sw.Close();
}
}
return true;
}
catch (Exception e)
{
Console.WriteLine(e.Message);
MessageBox.Show(e.Message);
return false;
}
}
OK。大功告成。上传到网站上相应目录,对外公开网页地址。
最终效果:
1、北京2008奥运会开幕式精彩图片(http://www.cncctv.com/oyphoto/OyPhoto01.html)