您的位置:首页 > 其它

利用模板将指定目录下的所有图片自动生成含多个分页的图片静态网页

2008-08-18 19:53 676 查看
先看一下最后得到的效果,见这里:北京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)

2、FLASH方式浏览的效果(http://www.cncctv.com/oyphoto/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息