静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 企业案例29（16页）

PAGE

PAGE 217

企业案例

静态网页制作（Dreamweaver）

所在系别： 计算机技术系

所属专业： 计算机网络技术

指导教师: 张亚静

专业负责人： 孙志成

案例二十九、中华诗词网

一、案例整体目标及要求

（一）案例目的

过实践项目培养我们的动手能力，提高网页制作能力和水平，灵活运用Dreamweaver软件，了解CSS和JS。本案例的主题是中华诗词网。

（二）案例要求

创建主页面和分链接，浏览色彩搭配的效果，页面是否美观，分析如何使用框架和利用Dreamweaver软件创建模板和布局表格，最后，主要是细化各个页面，对各个页面的图像、表格、链接进行适当的调试，是站点更加美观，并上传和测试整个站点运作情况，做好所有链接工作。

二、案例解决方案

1、页眉

分为登录、注册、简体中文、繁体中文、切换到旧版五个模块。

效果图：

2、logo

效果图:

①首先看到的是网页logo，然后是网站的搜索栏，可以搜索信息。

关键代码如下：

<div class="logo clearfix">

<div class="logo1">

<a href="#">

<img src="images/index_logo1.png">

</a>

</div>

<div class="logo2">

<img src="images/index_logo2.png">

</div>

<form action="#" class="search">

<input type="text" name="keyword" value="" class="search_input" placeholder="请输入关键字">

<input type="submit" class="search_btn" value="搜索">

</form></div>

导航条

效果图：

关键代码如下：

<!--导航条-->

<div class="nav">

<ul class="clearfix">

<li><a href="#" class="hover" >首页</a></li>

<li><a href="#">新闻中心</a></li>

<li><a href="#">诗词学院</a></li>

<li><a href="#">诗人档案</a></li>

<li><a href="#">结集出版</a></li>

<li><a href="#">专题展示</a></li>

<li><a href="#">诗词论坛</a></li>

<li><a href="#">诗友会</a></li>

<li><a href="Untitled-2.html">新诗园地</a></li>

<li><a href="#">诗意生活</a></li>

</ul>

</div>

CSS：/*导航条*/

.nav{

width:100%;

height: 51px;

background-color: #1a1a1a;

}

.nav ul{

width:1200px;

margin:0 auto;

}

.nav ul li{

float:left;

width:120px;

}

.nav ul li a{

display: block;

color:#fff;

line-height:51px;

text-align: center;

}

.nav ul li a:hover{

background-color: #a4040e;

}

.nav ul li a.hover{

background-color: #a4040e;

}

4.首页

效果图：

分为页眉、logo、导航条、图片轮播、最新资讯、新诗园地、诗意生活以及页脚。

关键代码如下：

<!--轮播-->

<div class="main1 clearfix">

<div class="left">

<ul>

<li><a href="#" >

<img src="images/936f9bcac420c05439e91f66e5b258e4.jpg" alt="第三届“诗词中国”启动仪式暨影响力诗人发布活动举行"/>

<div class="zh_wen">

<span>第三届“诗词中国”启动仪式暨影响力诗人发布活动举行</span>

</div>

</a></li>

<li><a href="#" >

<img src="images/95b04e0170025253c568ff.jpg" alt="探寻诗歌本真 第二届北京诗歌节在京落幕"/>

<div class="zh_wen">

<span>探寻诗歌本真 第二届北京诗歌节在京落幕</span>

</div>

</a></li>

</ul>

<ol> <!--有序列表-->

<li></li>

<li></li>

</ol>

</div>

<!--图片右侧-->

<div class="right">

<div class="zhuanti_box">

<div id="slideBox2">

<div class="J_slide">

<ul class="J_slide_trigger">

<li class="">诗界动态</a></li>

<li class="">诗赛征稿</a></li>

</ul>

<div class="J_slide_clip">

<ul class="J_slide_list">

<li class="J_slide_item">

<a href="#">2017中国诗词春晚（网络）将在承德举办</a>

<a href="#">金翅膀—中国梦”首届全国诗歌大赛在京揭晓</a>

<a href="#">张新泉：从纤夫铁匠到"鲁奖"诗人 人生何其短文学何其大</a>

<a href="#">“诗词中国”创作基地落户广东江门</a>

<a href="#">【语音直播公告】古典诗词的吉尼斯之旅</a>

<a href="#">“百年新诗与今天学术研讨会”在京召开</a>

<a href="#">陈平原：北大流行的是深受欧美影响的“现代诗”</a>

<a href="#">2016年全国诗书画家创作年会评稿会议在京召开</a>

<a href="#">挑战吉尼斯“最大规模诗词大赛”接力参赛赢唐诗日历</a>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

<!--新诗园地-->

<div class="main3">

<div class="main3_content clearfix">

<div class="main3_bt">

<img src="images/index_bt3.png">

</div>

<div class="left">

<div class="main3_bt1 clearfix">

<span>诗人推荐</span>

<a href="#">更多>></a>

</div>

<div class="main3_shiren1 main3_shi_jj clearfix">

<a href="#">

<img src="images/215752294207c963ef4da037d11a7b83.jpg"></a>

<div class="main3_shi_jj1">

<span>西川</span>

<p style="overflow: hidden;">西川，1963年出生于江苏徐州，1985年毕业于北京大学英文系。美国艾奥瓦大学2002年访问学者。现执教于北京中央美术学院人文学院。西川自80年代起即投身于全国性的青年诗歌运动。他和海子，骆一禾被誉为北大三诗人。出版作品有《深浅》，《大河拐大弯》等。其创作和诗歌理念在当代中国诗歌界影响广泛。</p>

</div>

</div>

<div class="main3_shiren2 main3_shi_jj clearfix">

<a href="#">

<img src="images/2ca85f1fb340d34f9b3bcb99ec1d4a03.jpg"></a>

<div class="main3_shi_jj1">

<span>戴望舒</span>

<p style="overflow: hidden;">戴望舒（1905-1950），1932年《现代》月刊创刊，他在上面发表许多著、译作。出版的诗集有《我底记忆》（1929）、《望舒草》（1933）、《望舒诗稿》（1937）、《灾难的岁月》（1937）、《戴望舒诗全编》（1989）。</p>

</div>

</div>

<div class="main3_shiren3 main3_shi_jj clearfix">

<a href="#">

<img src="images/2a433ca976159b24afc1eb.jpg"></a>

<div class="main3_shi_jj1">

<span>余秀华</span>

<p style="overflow: hidden;">余秀华，1976年生于湖北省钟祥市石牌镇横店村，诗人。1998年，余秀华写下了第一首诗《印痕》，截至2015年1月，余秀华已写了2000多首诗。诗歌主题多关于爱情、亲情、生活感悟，以及她的残疾和无法摆脱的封闭村子。</p>

</div>

</div>

<div class="main3_shiren4 main3_shi_jj clearfix">

<a href="#">

<img src="images/688c731f96c15178ee5dd12754b5cdbe.jpg"></a>

<div class="main3_shi_jj1">

<span>芒克</span>

<p style="overflow: hidden;">芒克（原名姜世伟），1950年11月出生。朦胧诗人的代表之一，生于沈阳，1956年全家迁到北京市。1969年到河北省白洋淀插队。1978年底与北岛共同创办文学刊物《今天》，并出版了处女诗集《心事》。1987年与唐晓渡、杨炼组织了“幸存者诗歌俱乐部”，并出版刊物《幸存者》。诗集有《阳光中的向日葵》（1988）、《芒克诗选...</p>

</div>

</div>

<div class="main3_shi_ren clearfix">

<ul>

<li>

<img src="images/215752294207c963ef4da037d11a7b83.jpg" class="hover" >

</li>

<li>

<img src="images/2ca85f1fb340d34f9b3bcb99ec1d4a03.jpg" >

</li>

<li>

<img src="images/2a433ca976159b24afc1eb.jpg" >

</li><li><img src="images/688c731f96c15178ee5dd12754b5cdbe.jpg" >

</li>

</ul>

</div>

</div>

新诗园地

为二级页面效果图为：

其中主要内容为新诗资讯和诗人推荐。

关键代码：

<!--新诗园地-->

<div class="news_neirong">

<div class="news_banner">

<a href="#" >

<img src="images/5129e7f0c45839e2d2fb9d83d14cd0f9.png" title="yuandi"></a>

</div>

<!--新诗资讯-->

<div class="yuan_content1 clearfix">

<div class="yuan_bt clearfix">

<img src="images/yuan_zixun.png">

<a href="#">更多>></a>

</div>

<div class="yuan1_left">

<div class="example22">

<ul>

<li>

<img src="images/20f663760891010dff65f22aa8e2c17a.png" alt="“纪念新诗诞生百年：新诗与外国诗歌译介学术研讨会”"/>

<div class="jj">

<span>“纪念新诗诞生百年：新诗与外国诗歌译介学术研讨会”</span>

</div>

</li>

</ul>

</div>

</div>

<div class="yuan1_right">

<ul>

<li class="clearfix">

<div class="date">

<span>11-10</span>

<font>2016</font>

</div>

<div class="yuan1_jj">

<a href="#">“纪念新诗诞生百年：新诗与外国诗歌译介学术研讨会”在扬州举行</a>

<p>2016年11月5日至11月6日，由北京大学中国新诗研究所、首都师范大学中国诗歌研究中心和扬州虹桥文化艺术交流中心、虹桥书院、扬州市作家协会联合主办的“纪念新诗...</p>

</div>

</li><li class="clearfix">

<div class="date">

<span>09-23</span>

<font>2016</font>

</div>

</ul>

</div>

</div>

<!--诗人推荐-->

<div class="yuan_content3">

<div class="yuan_bt clearfix">

<img src="images/yuan_bt3.png">

<a href="#">更多>></a>

</div>

<div id="content">

<div id="content_inner">

<ul id="slides1">

<li>

<div class="content">

<img src="images/215752294207c963ef4da037d11a7b83.jpg" />

<span>西川</span>

<p>原名刘军，出生于江苏徐州，知识分子写作诗群代表诗人...</p>

<a href="#">了解详情</a>

</div>

</li>

<li>

<div class="content">

<img src="images/2ca85f1fb340d34f9b3bcb99ec1d4a03.jpg" />

<span>戴望舒</span>

<p>中国现代派象征主义诗人，翻译家。</p>

<a href="#">了解详情</a>

</div>

</li>

登录

这是一个网站的登录页面，效果图如下：

关键代码：

<!--主体-->

<base target="_self">

<div class="login_content">

<form id="login" action="/Public/login.html" method="post">

<input type="hidden" name="gid" value="0">

<div class="login_bt">

<span>手机登录</span>

</div>

<div class="login_input">

<label>手机号码：</label>

<input type="text" name="mobile">

</div>

<div class="login_input">

<label>密码：</label>

<input type="password" name="password">

</div>

<div class="forgin clearfix">

<a href="#" class="forgin1">忘记密码？</a>

<a href="#" class="forgin2">立即注册</a>

</div>

<div class="login_suc">

<a href="#">登录</a>

</div>

</form>

</div>

三、案例主要技术指标

利用HTML标签完成网页结构的搭建

CSS选择器及盒子模型的灵活运用

CSS+DIV布局

JavaScript实现网页动态效果

四、案例实施进度

进度安排

内容安排

第一天

上午

明确网站主题，应力求简洁，要点明确，要以简单的画面和语言告诉浏览者，站点的主题。收集网页素材，确定栏目，决定网站结构，通过小组讨论，画出网页草图。

下午

确定内容安排，将每个页面的草图设计完成。

相关的文字工作录入完毕，定义好本地站点，将资料保存。

第二天

上午

用Photoshop将网页草图实现，决定网站的配色方案，可以借鉴其他网站。对各个网页可以分工实现。

下午

制作网页中所需要的Flash。将在PS中完成的图片切片，保存。

第三天

上午

主页的设计 主要是对版面进行合理布局，利用DIV+CSS进行合理定位。通过文字图形的空间结合，表达出和谐与美。利用DW，设计网页的排版方式，把各个切片放入DW中的DIV。

下午

将相应的内容，放入网页的对应位置。完成二级页面的制作，注意与主页的和谐统一，并对各页内容进行充实；适当搜集一些网页JS特效，做出适合自己站点的特效。

第四天

上午

修改并完善已经做好的网页，同时完成网页之间超级链接的设置。多页面之间的链接，特别是关系十分密切的有上下文关系的页面，设计时一定要含有向前和向后的按钮，便于浏览者的访问

下午

完善并测试网页，

第五天

上午

对于已完成网站，进一步进行修改，完成案例报告书的书写。

下午

检查每个小组的网页，以及案例报告，并打分。