网站设计说明书
网站名称: 枫叶介绍
设计大师: 张远峰
创建时间:2012/12/22
一、制作该网站的理由以及设计思路:
古有“水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊;自李唐来,世人盛爱牡丹”,予独爱枫叶,枫叶之优美,世间无与伦比。在世界众多的红叶树种中,枫树的秋叶独树一帜,极具魅力。为了表达我对枫叶的独爱,我以枫叶为主题制作了这个网站,是想借这个网站来表达我的情感。就制作了这个网站,我希望当我或者我的同学看到的这个网站的时候,对枫叶有更深的了解,像我一样地能享受她的美姿。
设计思路:通过百度百科对枫叶的阐述,我自己收集各种相关资料,把网页大致分成6个部分,分别介绍枫叶的用途、植物地标、作品描写、枫叶趣谈、相关记载、枫叶资料等来全方位进行介绍。
二、设计流程
网站主要以自己喜爱的东西而制作并且是按照我喜欢的简约风格进行布局,并根据,相应要求到网上寻找相应的图片素材以及应用到 PS 图片设计,同时,我设计了该网页的设计理念图标,名为Maple Design,最后应用 HTML网站设计技术使用 DIV+CSS+框架进行页面布局的定位设计。
三、使用的工具与技术
网页制作工具 : DreamweaverCS4和EditPlus。
多媒体设计制作工具:Photoshop 。
应用到的设计技术: HTML 、 CSS 、javascript、部分超纲代码引用等。
四、页面结构布局
(1) 首页布局、网站 Logo、幻灯片展示切换
页面链接
站点介绍
页面介绍
联系方式
页面底部
(2)其他页布局与首页雷同,只不过内容不一样。
五、心得体会:
在制作的过程中遇到了很多困难,不过,还好,我终于把这个网页做好了,虽然里面的内容不是很华丽,但我还是在用心做,做完效果符合我喜欢的简约风格。
六、以上是我的网页说明,想了解更清楚的话,可以看我的网站。
七、部分截图和主要代码:
部分有技术重要的代码主要是首页和左框架(部分超纲内容为网上引用模仿,绝不是直接
复制)和内页conact的代码还有CSS外部样式代码,其他页面与首页相似。
首页的代码如下:
<html>former什么意思
<head>
<script type="text/javascript" src="../links/jquery-1.4.2.js"></script>
落伍的英文
<script type="text/javascript" src="../links/slider.js"></script>popsoft
<link href="../links/piture move.css" rel="stylesheet" type="text/css" />
<link href="../links/common.css" rel="stylesheet" type="text/css" />
kaixing
<meta http-equiv="Content-Type" content="text/html; chart=gb2312">
<title>枫叶</title>
kef> 先知 <link rel="stylesheet" type="text/css" href="../links/style.css">
</head>
<body>
<div id="main_container">
<div class="parrot"></div>
<div class="main_content">
<div id="header">
<div class="logo"><a href="#"><imgsrc="../images/logo.gif" alt="" title="" border="0"></a></div>
scream是什么意思
</div>
<div class="top_center_box"></div>
<div class="center_box">
<div id="menu_tab">
<ul class="menu">
<li><a href="Introduction of maple.html" class="nav_lected"> Home </a></li>
<li class="divider"></li>
<li><a href="../Inside page/用途.html" class="nav">枫叶的用途</a></li>
<li class="divider"></li>
<li><a href="../Inside page/植物地标.html" class="nav">植物地标</a></li>
<li class="divider"></li>
<li><a href="../Inside page/作品描写.html" class="nav">作品描写</a></li>
<li class="divider"></li>
<li><a href="../Inside page/枫叶趣谈.html" class="nav">枫叶趣谈</a></li>
<li class="divider"></li>
<li><a href="../Inside page/枫叶资料.html" class="nav">相关记载</a></li>
<li class="divider"></li>
<li><a href="../Inside page/枫叶资料.html" class="nav">枫叶资料</a></li>
<li class="divider"></li>
<li><a href="../Inside page/contact.html" class="nav"> contact </a></li>
<li>
<script type="text/javaScript">
Date=new Date();
document.write(Date);
Hours();
if (time<12){
document.write('-Good Morning')
}
el if((12<time)&&(time<18)){
document.write('-Good afternoon')
}
el if(time>19){
document.write('-Good evening')
}
</script>
</li>
</ul>
</div>
<div class="middle_box2">
<div class="middle_box_text_content">
<div class="middle_box_title">
<div class="content_right">
<div class="ad" >
做鬼脸表示什么<ul class="slider" >
<li><a href="#"><imgsrc="../images/buttom_0.jpg"/></a></li>
<li><a href="#"><imgsrc="../images/buttom_1.jpg"/></a></li>
<li><a href="#"><imgsrc="../images/buttom_2.jpg"/></a></li>
<li><a href="#"><imgsrc="../images/buttom_3.jpg"/></a></li>
</ul>
政治考纲
<ul class="num" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
<p class="middle_text"></p>
</div>
</div>
<div class="left_content">
<div class="calendar_box">
<div class="calendar_box_content">
<h1><b>Introduction of maple</b></h1>
<p>
<a href="#"><imgsrc="../images/8.jpg"/></a>
</p>
</div>
</div>
<div class="news_left">
<h1>枫叶的用途&&地标</h1>
safety什么意思
<div class="news_box">
<div class="calendar">用途</div>
<div class="news_content">
<p><span>观赏价值······</span><br>
树姿优美,叶形秀丽,秋季叶渐变为红色或黄色,还有青、紫色,为著名的秋色叶树种。可作庇荫树、行道树、或风景园林中的伴生树,与其它秋色叶树或常绿树配置,彼此衬托掩映,增加秋景色彩之美。</p>
<a href="#" class="read_more">read more</a>
</div>
</div>
<div class="news_box">
<div class="calendar2">地标</div>
<div class="news_content">
<p><span>枫叶之国······</span><br>
加拿大国花为枫树叶、(Sugar maple)。该国境内多枫树、素有“枫叶之国”的美誉。
加拿大国旗图案
长期以来,加拿大人民对枫叶有着深厚的感情,视美丽的枫叶为宝。枫叶作为加拿大的标志,可追溯到1700年前后。</p>
<a href="#" class="read_more">read more</a>
</div>
</div>
</div>
</div>
<div class="right_content">
<h1>作品描写&&枫叶趣谈</h1>
<div class="project_box">
<a href="#"><imgsrc="../images/p1.gif" alt="" title="" class="left_img" border="0"></a>
<p>
<span>作品描写:</span><br>
- 中国古诗意象<br><br>
- 美术作品中<br><br>