第七章实验(二):使用for循环生成网页相册

注意:

完成实验一后再继续下面操作。

将图片资源下载到网站的根目录(/usr/local/httpd/htdocs/)下。

1.下载并解压缩:

yum -y install ImageMagick ##安装图片转换工具,支持convert

clip_image002

lftp ftp.linuxfan.cn

lftp ftp.linuxfan.cn:~> cd tools/

lftp ftp.linuxfan.cn:/tools> get for_html_img.tar.xz

164757244 bytes transferred

lftp ftp.linuxfan.cn:/tools> bye

tar Jxvf for_html_img.tar.xz ##解压

cd img/

clip_image004

clip_image006

2.编写脚本:

[root@www img]# vim for_html.sh

#!/bin/bash

##创建相册

echo "Creating album..."

mkdir -p thumbs

###########创建html头部###############

cat <<EOF >index.html

<html>

<head>

<style type="text/css">

body {

;

margin:0 auto;

border:1px dashed grey;

padding:10px; background:#000;

}

img { margin:5px; border:1px solid black;}

h1 {

color:#fd6edf;

font-size:48px;

font-style:bold;

font-family:"华文行楷"; ;

height:50px;

background:#eded56;

}

</style>

</head>

<body>

<center><h1>www.linuxfan.cn</h1></center>

<embed src="ibl.mp3" autostart=true loop=true></embed>

EOF

###########为所有图片设置a标签###################

for img in *.jpg;

do

convert "$img" -resize "300x" thumbs/$img ##将大图转为小图并放到thumbs/目录下

echo "<a href=\"$img\" target=\"_blank\"><img src=\"thumbs/$img\" title=\"$img\" />" >>index.html

done

###############创建网页的尾部###############

cat <<END >>index.html

</body>

</html>

END

echo "index.html is ok."

:wq

[root@www img]# sh -x for_html.sh

clip_image008

clip_image010

3.访问测试:

http://www.linuxfan.cn/img

clip_image012