唐诗宋词-网页课程设计

信息学院课程设计

题目：唐诗宋词网页设计 __

姓名： _ ____ 学号： _ ___ __ 班级：课程：网页设计与制作 _ 任课教师：董西尚 ____

2012年7月12日

课程设计任务书及成绩评定

摘要········································································1 一、网站结构·····························································1 二、网站目录·····························································2 三、网页代码及预览图··················································2

1.首页（index.html）··················································2 2.网站框架(main.html)···············································6 3.诗词目录(left.html)···············································7 4.诗词内容(shici/jiangxue.html等)·································9

四、参考资料····························································10

本次课程设计我选择了唐诗宋词网页的设计，在本次设计的首页中我使用了

marquee代码来使首页滚动显示欢迎语句，在首页中我插入了制作精美的flash动画以显示出唐诗宋词给人带来的魅力，点击首页的右下部的唐诗宋词链接即可进入主要页面欣赏唐诗宋词。

在主要页面中我使用了框架来布局网页，将页面分成左右两个框架，左边框架名为leftFrame主要用于显示诗词目录，右边框架名为mainFrame主要用于显示诗词内容，通过点击左边框架中的诗词链接可以控制右边框架中显示相应的诗词内容。另外左边框架中还有返回首页按钮，可以点击此按钮进入首页欣赏首页的flash动画。

关键词：框架 flash marquee

一、网站结构

二、网站目录

三、网页代码及预览图

1.首页（index.html）

代码：

html

PUBLIC

XHTML

1.0

Transitional//EN

background-image: url(images/zhuzi.jpg); background-color: #F6FFFC; background-repeat: repeat-x;

#apDiv1 { position:absolute; left:225px; top:154px; width:601px; height:482px; z-index:1;

}

#apDiv2 { position:absolute; left:227px; top:64px; width:682px; height:55px; z-index:2;

}

#apDiv3 { position:absolute; left:935px; top:477px; width:241px; height:81px; z-index:3;

} a:link { color: #FF0000; text-decoration: none; }

a:visited { text-decoration: none; color: #FF0000; }

a:hover { text-decoration: none; }

a:active { text-decoration: none; }

#apDiv4 { position:absolute; left:915px; top:180px; width:234px;

height:94px;

}

#apDiv5 { } -->

孤舟蓑笠翁，独钓寒江雪。

诗词内容预览图：

四、参考资料

[1]梁芳等编.《网页设计与制作》.清华大学出版社，2008.11 [2]李冰等编.《超炫网页设计》.北京希望电子出版社，2003.02