Web基础实训报告

Web基础实训报告

目录

一、实训简介............................................................................................................... 2

二、实训内容............................................................................................................... 3

1、HTML.................................................................................................................. 3

2、CSS.................................................................................................................... 3

3、JavaScript...................................................................................................... 3

4、jQuery.............................................................................................................. 4

5、jQuery easyUI................................................................................................ 4

6、jQuery easyUI的基本插件........................................................................... 4

(1)基本插件............................................................................................... 4

(2)布局管理器........................................................................................... 6

(3)菜单和按钮........................................................................................... 7

(4)表单....................................................................................................... 7

(5)窗口....................................................................................................... 7

(6)数据表格和树形菜单........................................................................... 8

三、实训过程............................................................................................................... 8

1、实训.................................................................................................................. 8

(1)内容....................................................................................................... 8

(2)目的....................................................................................................... 8

2、实践.................................................................................................................. 8

(1)制定网站主题....................................................................................... 8

(2)网站简介............................................................................................... 9

(3)收集素材............................................................................................... 9

(4)网站规划............................................................................................... 9

(5)网站制作............................................................................................... 9

(6)网站测试............................................................................................... 9

3、编写文档.......................................................................................................... 9

四、实训总结............................................................................................................... 9

一、实训简介

Web本意是蜘蛛网和网的意思。在这个遍布网络的世界里,Web网络成为不可或缺并且极其重要的一部分。Web功能强大,其内容包括存储在世界各地Internet计算机中的大量文档的集合。Internet将海量的信息以某种关联的文档形式组织在一起,每一个文档将会以主页的形式展现,这些主页是一种超文本信息,通过超链接进行连接。

Web标准并不是一个单一的标准,而是一个系列的标准的集合。Web标准中具有代表性的几种语言有:XML可扩展标记语言、XHTML可扩展超文本标记语言、CSS层叠样式表、DOM文档对象模型、JavaScript脚本程序设计语言等。

本次实训主要是学习jQurey,它是一个优秀的JavaScript框架,是轻量级的js库,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

本次实训的目的是通过对JavaScript的学习,学会使用HTML标记语言,通过CSS对页面的布局,在HTML基础上,使用JavaScript开发交互式动态Web网页。能够熟练使用JavaScript语言和jQurey对网页界面实现动画效果,让网页能够动态显示,美观大方。

二、实训内容

1、HTML

HTML是超文本标记语言,互联网传输的标准语言。HTML具有很大的兼容性,例如<li>并不一定要用</li>来对其进行关闭,因此使用起来比较方便。

2、CSS

CSS是层叠样式表的简称。为了弥补HTML在显示属性上的不足,W3C协会制定了这一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式,并增加了新的概念,例如类、层等,还可以对文字进行重叠、定位等操作。它提供了更为丰富多彩的样式;同时CSS可集中进行样式管理。另外,CSS允许将样式定义单独存储于样式文件中,这样就可以进行样式管理,不仅便于样式管理,还可以在多个HTML文件共享样式定义。一个HTML文件允许引用多个不同的CSS样式文件中的样式定义。在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制

3、JavaScript

在HTML基础上,使用JavaScript可以开发交互式动态Web网页

4、jQuery

jQuery是一个优秀的Javascript框架。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是,它的文档说明很全,而且各种 应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可

5、jQuery easyUI

easyui是一个基于jquery的集成了各种用户界面的插件。

使用easyui不需要写太多javascript代码,一般情况下只需要使用一些html标记来定义用户接口。

easyui非常简单,但是功能非常强大

6、jQuery easyUI的基本插件

(1)基本插件

简单载入器-easyloader

使用方法:

1.  easyloader.base = '../';    // set the easyui base directory  

2.  easyloader.load('messager', function(){        // load the specified module  

3.      $.messager.alert('Title', 'load ok');  

4.  });  

一般拖动-draggable

使用方法:

1.  <div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">  

2.   

脚本语言:

1.  $('#dd').draggable({  

2.      handle:'#title'  

3.  });  

拖动至容器-droppable

使用方法:

1.  <div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;"></div>  

脚本语言:

1.  $('#dd').droppable({  

2.      accept:'#d1,#d3'  

3.  });  

缩放-resizable

使用方法:

1.  <div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div>  

脚本语言:

1.  $('#rr').resizable({  

2.      maxWidth:800,  

3.      maxHeight:600  

4.  });  

分页-pagination

使用方法:

1.  <div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>  

脚本语言:

1.  $('#pp').pagination({  

2.      total:2000,  

3.      pageSize:10  

4.  });  

搜索框-searchbox

使用方法:

1.  <input id="ss" class="easyui-searchbox" style="width:300px"  

2.          data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input>  

3.            

脚本语言:

4.  <script type="text/javascript">  

5.      function qq(value,name){  

6.          alert(value+":"+name)  

7.      }  

8.  </script>  

进度条-progressbar

使用方法:

1.  <div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>  

脚本语言:

1.  $('#p').progressbar({  

2.      value: 60  

3.  });  

(2)布局管理器

控制面板-panel

选项卡-tabs

可伸缩面板-accordion

布局面板-layout

(3)菜单和按钮

菜单-menu

链接按钮- linkbutton

菜单按钮- menubutton

分隔按钮- splitbutton

(4)表单

表单- form

表单验证- validatebox

自定义组合框- combo

可装载组合框- combobox

组合树- combotree

组合表格- combogrid

数字验证框- numberbox

日期组合框- datebox

日期时间组合框- datetimebox

日历- calendar

调节器- spinner

数字调节器- numberspinner

时间调节器- timespinner

(5)窗口

窗口- window

对话窗口- dialog

消息窗口- messager

(6)数据表格和树形菜单

数据表格- datagrid

属性表格- propertygrid

树形菜单- tree

树形表格- treegrid

三、实训过程

1、实训

老师给我们讲解了本次实训的主要内容和实训目的

(1)内容

学习jQurey,它是一个优秀的JavaScript框架,是轻量级的js库,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

(2)目的

通过对JavaScript的学习,学会使用HTML标记语言,通过CSS对页面的布局,在HTML基础上,使用JavaScript开发交互式动态Web网页。

2、实践

每个人自己设计一个动态网站,使用HTML编写网页、CSS布局、jQurey实现动态效果。

(1)制定网站主题

网站主题——健康生活  品质享受

主要是以绿色环保,时尚品质为主题,倡导人们健康生活。

(2)网站简介

在本网站中,可以浏览到各种精品家居用品、绿色食品、健康养生、低碳环保等内容。在该网站中,可以注册成为我们的会员,享受精品家居、绿色食品优惠;可以浏览健康养生内容,上传养生心得;学习低碳生活,绿色环保等。

(3)收集素材

在网上收集了有关绿色环保,品质家居等相关的文字、图片、动画等素材。

(4)网站规划

本网站是由一个主页和多个子网页组成。主页和子页都采用CSS布局,主页和子页中设有超链接,可以在各个网页中自由切换。

(5)网站制作

使用Dreamweaver 8和Macromedia Fireworks 8进行网站制作和图片修改。

(6)网站测试

将制作好的网站运行在浏览器上,检查预期功能是否实现。

3、编写文档

对实训过程编写《实训报告》。

对设计的网站编写《网站设计报告》

四、实训总结

通过这次网页课程设计激发学习兴趣,调动学习的自觉性,自己动脑、动手,动口,运用网络资源,结合教材及老师的指导,通过自身的实践,创作出积聚个人风格、个性的网页。总体来说,整个网页制作的过程,我学会了很多知识,

在设计网页的这几天里,我充分利用了这次设计的机会,全心全意投入到网页世界,去不断的学习,去不断的探索;同时去不断的充实,去不断的完善自我,在网络的天空下逐渐的美化自己的人生!
    做好页面,并不是一件容易的事,它包括主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次课程设计不是很好,页面过于简单,创新意识反面薄弱,这是我需要提高的地方。需要学的地方还有很多,需要有耐心、坚持,不断的学习,综合运用多种知识,才能设计出好的web页面。

总体来说,通过这次的对网页课程设计,有收获也有遗憾、不足的地方,但我想,我已经迈入了网页设计的大门,只要我再认真努力的去学习,去提高,凭借我对网页设计的热情和执着,我将来设计出的网页会更加专业,更完善。

 

第二篇:web开发基础实训

web开发基础实训》报告

           

(2012-2013学年第二学期)

 

二〇##年十二月三十日

网上书店

实训时间:2012.4.9-2012.4.13

实训地点:十三机房

实训目的:通过实验主要培学生的动手能力,提高学生运用HTML语言编写静态网页能力的水平,掌握HTML和CSS语言的应用,为学生学习动态网页打下坚硬的基础。

实训步骤:

一、首面制作

1、  Head设计

Html主要代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>网上书店</title>

<link rel="stylesheet" type="text/css" href="style1.css" />

</head>

<body>

<div id="wrap">

       <div class="header">

         <div class="logo"><a href="index.html"><img src="images/logo.gif" alt="" title="" border="0" /></a></div>           

        <div id="menu">

            <ul>                                                                      

            <li class="selected"><a href="index1.htm">首页</a></li>

            <li><a href="index2.htm">关于我们</a></li>

            <li><a href="index3.htm">书籍</a></li>

            <li><a href="#">特价书籍</a></li>

            <li><a href="#">我的帐户</a></li>

            <li><a href="#">用户注册</a></li>

            <li><a href="index3.htm">书籍价格</a></li>

            <li><a href="#">联系我们</a></li>

            </ul>

        </div>          

 </div>

        <div class="center_content">

         <div class="left_content">

              

            <div class="title"><span class="title_icon"><img src="images/bullet1.gif" alt="" title="" /></span>特色书籍</div>

       

               <div class="feat_prod_box">

           

                   <div class="prod_img"><a href="#"><img src="images/prod1.gif" alt="" title="" border="0" /></a></div>

               

                <div class="prod_det_box">

                       <div class="box_top"></div>

                    <div class="box_center">

                    <div class="prod_title"></div>

                    <p class="details">全面、详细地介绍了web开发实用技术基础知识,内容包括web的相关概念、html及xml基础、网页与网站设计基础、dreamweaver cs4工具、web客户端脚本语言设计、基于asp.net的服务器端程序设计以及基于jsp的服务器端程序设计等。

</p>

                    <a href="#" class="more">- 更多 -</a>

                    <div class="clear"></div>

                    </div>

                   

                </div>   

            <div class="clear"></div>

            </div>    

           

           

               <div class="feat_prod_box">

           

                   <div class="prod_img"><a href="#"><img src="images/prod2.gif" alt="" title="" border="0" /></a></div>

               

                <div class="prod_det_box">

                       <div class="box_top"></div>

                    <div class="box_center">

                    <div class="prod_title">产品名称</div>

                    <p class="details">全面、详细地介绍了web开发实用技术基础知识,内容包括web的相关概念、html及xml基础、网页与网站设计基础、dreamweaver cs4工具、web客户端脚本语言设计、基于asp.net的服务器端程序设计以及基于jsp的服务器端程序设计等。</p>

                    <a href="#" class="more">- 更多 -</a>

                    <div class="clear"></div>

                    </div>

                   

                </div>   

            <div class="clear"></div>

            </div>     

           

           

           

           <div class="title"><span class="title_icon"><img src="images/bullet2.gif" alt="" title="" /></span>新品书籍</div>

           <div class="clear"></div>

           <div class="new_products">

          

                    <div class="new_prod_box">

                        <a href="#">产品名称</a>

                        <div class="new_prod_bg">

                        <span class="new_icon"><img src="images/new_icon.gif" alt="" title="" /></span>

                        <a href="#"><img src="images/thumb1.gif" alt="" title="" class="thumb" border="0" /></a>

                        </div>          

                    </div>

                   

                    <div class="new_prod_box">

                        <a href="#">产品名称</a>

                        <div class="new_prod_bg">

                        <span class="new_icon"><img src="images/new_icon.gif" alt="" title="" /></span>

                        <a href="#"><img src="images/thumb2.gif" alt="" title="" class="thumb" border="0" /></a>

                        </div>          

                    </div>                   

                   

                    <div class="new_prod_box">

                        <a href="#">产品名称</a>

                        <div class="new_prod_bg">

                        <span class="new_icon"><img src="images/new_icon.gif" alt="" title="" /></span>

                        <a href="#"><img src="images/thumb3.gif" alt="" title="" class="thumb" border="0" /></a>

                        </div>          

                    </div>         

           

            </div>

                    

        <div class="clear"></div>

        </div><!--end of left content-->

       

        <div class="right_content">

                      

                    

       

             <div class="title"><span class="title_icon"><img src="images/bullet3.gif" alt="" title="" /></span>有关图书</div>

             <div class="about">

             <p>

             <img src="images/about.gif" alt="" title="" class="right" />

             全面、详细地介绍了web开发实用技术基础知识,内容包括web的相关概念、html及xml基础、网页与网站设计基础、dreamweaver cs4工具、web客户端脚本语言设计、基于asp.net的服务器端程序设计以及基于jsp的服务器端程序设计等。

             </p>

            

             </div>

            

             <div class="right_box1">

            

                  <div class="title"><span class="title_icon"><img src="images/bullet4.gif" alt="" title="" /></span>促销</div>

                    <div class="new_prod_box">

                        <a href="#">产品名称</a>

                        <div class="new_prod_bg">

                        <span class="new_icon"><img src="images/promo_icon.gif" alt="" title="" /></span>

                        <a href="#"><img src="images/thumb1.gif" alt="" title="" class="thumb" border="0" /></a>

                        </div>          

                    </div>

                                        <div class="new_prod_box">

                        <a href="#">产品名称</a>

                        <div class="new_prod_bg">

                        <span class="new_icon"><img src="images/promo_icon.gif" alt="" title="" /></span>

                        <a href="#"><img src="images/thumb2.gif" alt="" title="" class="thumb" border="0" /></a>

                        </div>          

                    </div>                   

                   

                    <div class="new_prod_box">

                        <a href="#">产品名称</a>

                        <div class="new_prod_bg">

                        <span class="new_icon"><img src="images/promo_icon.gif" alt="" title="" /></span>

                        <a href="#"><img src="images/thumb3.gif" alt="" title="" class="thumb" border="0" /></a>

                        </div>          

                    </div>             

            

             </div>

            

             <div class="right_box2">

            

                  <div class="title"><span class="title_icon"><img src="images/bullet5.gif" alt="" title="" /></span>种类</div>

                 <div class="clear"></div>

                <ul class="list1">

                <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="#">文化教育</a></li>

                <li><a href="#">专业书籍</a></li>

                <li><a href="#">人文社科</a></li>

                <li><a href="#">语言文字</a></li>                                             

                </ul>

               

                  <div class="title"><span class="title_icon"><img src="images/bullet6.gif" alt="" title="" /></span>Partners</div>

                <div class="clear"></div>

                <ul class="list2">

                <li><a href="#">accesories</a></li>

                <li><a href="#">books gifts</a></li>

                <li><a href="#">specials</a></li>

                <li><a href="#">hollidays gifts</a></li>

                <li><a href="#">accesories</a></li>

                <li><a href="#">books gifts</a></li>

                <li><a href="#">specials</a></li>

                <li><a href="#">hollidays gifts</a></li>

                <li><a href="#">accesories</a></li>                             

                </ul>     

            

             </div>        

            

       

        </div><!--end of right content-->

        </div>

        <div class="clear" ></div>

 <div class="footer">

         <div class="left_footer"><img src="images/footer_logo.gif" alt="" title="" /><br /> <a href="http://www.cssmoban.com/" title="free templates">cssmoban</a></div>

        <div class="right_footer">

        <a href="#">首页</a>

        <a href="#">关于我们</a>

        <a href="#">服务</a>

        <a href="#">隐私声明</a>

        <a href="#">联系我们</a>

      

        </div>

     

 </div>     

   

</div>

</body>

</html>

Htm2主要代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>网上书店</title>

<link rel="stylesheet" type="text/css" href="style1.css" />

<style type="text/css">

<!--

.STYLE9 {

       font-size: medium;

       font-weight: bold;

}

.STYLE10 {

       font-size: x-large;

       color: #663300;

}

.STYLE12 {color: #663300}

.STYLE16 {color: #660000}

-->

</style>

</head>

<body>

<div id="wrap">

       <div class="header">

         <div class="logo"><a href="index.html"><img src="images/logo.gif" alt="" title="" border="0" /></a></div>           

        <div id="menu">

            <ul>                                                                      

            <li class="selected"><a href="index1.htm">首页</a></li>

            <li><a href="index2.htm">关于我们</a></li>

            <li><a href="index3.htm">书籍</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>

            </ul>

        </div>          

 </div>

        <div class="center_content"><!--end of left content-->

          <!--end of right content-->

</div>

        <div class="clear" ></div>

 <div class="footer">

   <table width="898" height="1102" border="0" cellpadding="0" cellspacing="0">

     <tr>

       <td height="48" colspan="2"><div align="center"><span class="STYLE9 STYLE10"><img src="images/bullet6.gif" width="30" height="30" />关于我们</span></div></td>

     </tr>

     <tr>

       <td height="48" colspan="2"><span class="STYLE12"><img src="images/bullet3.gif" width="26" height="25" /> <span class="STYLE9">公司简介</span></span></td>

     </tr>

     <tr>

       <td width="451" height="194">&nbsp;&nbsp;&nbsp;&nbsp;<span class="STYLE12">&nbsp;&nbsp;&nbsp; &nbsp;“韬智网”隶属于南宁韬智图书有限公司,是广西区内新一代图书产品消费服务网站。我们拥有强大的采购优势、丰富的电子商务管理服务经验和最先进的互联网技术为您提供最新最好的图书产品。</span></td>

       <td width="447"><img src="images/20069281229329[1].jpg" width="448" height="213" /></td>

     </tr>

     <tr>

       <td height="58" colspan="2"><span class="STYLE9"><img src="images/bullet1.gif" width="26" height="25" /><span class="STYLE12"> 公司的成立源起</span></span></td>

     </tr>

     <tr>

       <td colspan="2">&nbsp;&nbsp;

         <div align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="STYLE16">南宁韬智图书有限公司成立于1993年10月10日,它的前称分别是:教育科学出版社西南南宁图书发行公司、南宁教育图书发行社。南宁韬智图书有限公司是一家民营的、实行有限责任制的独立经济实体。公司主要开发、销售教辅类图书,是广西区内最大的民营图书连锁企业。公司总部设于南宁市仙葫开发区,以南宁市琅东广西图书批发市场(金湖路53—109号)的直营店为中心店,向区内外图书市场辐射,逐步在柳州、玉林、梧州、桂林、贺州、贵港、来宾、桂平、平乐、横县等市、县开办了10余家直营式的连锁店,以及众多的准加盟式连锁店(大客户),形成了具有相当规模的“韬智图书”品牌连锁经营网络。韬智书店是专业、全面的中小学教育书店,书店经营的图书品种已达万余种,其中主营的《教材1+1》、《教材全易通》、《教材完全解读》、《五年中考三年模拟》、《天利38套》、《轻巧夺冠》、《全能学练课时达标》、《教材精习》、《黄冈小状元作业本》、《达标练测100分》、《中华题王》、《精英教程100分攻略》、《邹慕白字帖》、《庞中华字贴》、《黑蓝皮英语》、《星火英语》、《新概念英语》、北斗地图册等产品年年销量前列!除经营图书和电子产品之外,韬智书店近年更引进学生文具和办公用品,物美价廉,优惠不断,欢迎广大新老顾客前来选购。</span></div></td>

     </tr>

     <tr>

       <td height="54" colspan="2"><span class="STYLE9"><img src="images/bullet2.gif" width="26" height="25" /> <span class="STYLE12">我们的产品定位</span></span></td>

     </tr>

     <tr>

       <td height="85" colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="STYLE12">本韬智网站所登陆的图书产品是以0-19内岁基础教育类相关产品为主,其产品物美价廉,优惠不断,更有购书抽奖活动,欢迎广大顾客朋友前来订购。</span></td>

     </tr>

     <tr>

       <td height="62" colspan="2"><span class="STYLE9"><img src="images/bullet4.gif" width="26" height="25" /> <span class="STYLE12">我们承诺</span></span></td>

     </tr>

     <tr>

       <td height="209"><img src="images/1353393w1-14[2].jpg" width="451" height="192" /></td>

       <td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="STYLE16">我们承诺提供权威的资讯、最低的价格和便捷的购物方式,为您打造全新的e时代购物新体验!我们承诺严格按照国家法规政策正规经营,经营的产品皆为正规渠道引进合法缴税的正版图书产品,质量保证并有着完善的退货与售后服务制度。为了让您更准确全面的了解您所需要的商品,我们的每一件商品都提供实样的高清晰数码照片、详尽的技术性能指标和制造厂商的介绍。同时采用多种便捷的支付方式和安全快速的配送体系,通过先进的互联网技术进行订单的实时跟踪,并保证每一位客户资料的安全与保密。</span></td>

     </tr>

     <tr>

       <td height="87" colspan="2">

          <div class="right_footer">

        <a href="#">首页</a>

        <a href="#" class="STYLE12">关于我们</a>

        <a href="#">服务</a>

        <a href="#">隐私声明</a>

        <a href="#">联系我们</a>        </div>

           

          <div class="left_footer STYLE12"><img src="images/footer_logo.gif" alt="" title="" /><br /> <a href="http://www.cssmoban.com/" title="free templates">cssmoban</a></div>

          <p>&nbsp;</p></td>

     </tr>

     <tr>

       <td colspan="2">&nbsp;</td>

     </tr>

   </table>

 </div>     

   

</div>

</body>

</html>

Html主要代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>网上书店</title>

<link rel="stylesheet" type="text/css" href="style1.css" />

</head>

<body>

<div id="wrap">

       <div class="header">

         <div class="logo"></div>           

        <div id="menu">

            <ul>                                                                      

            <li class="selected"><a href="index1.htm">首页</a></li>

            <li><a href="index2.htm">关于我们</a></li>

            <li><a href="index3.htm">书籍</a></li>

            <li><a href="特价书籍index1.htm">特价书籍</a></li>

            <li><a href="#">我的帐户</a></li>

            <li><a href="注册会员index1.htm">用户注册</a></li>

            <li><a href="#">书籍价格</a></li>

            <li><a href="#">联系我们</a></li>

            </ul>

        </div>          

 </div>

        <div class="center_content">

         <div class="left_content">

              

            <div class="title">

              <p><span class="title_icon"><img src="images/bullet1.gif" alt="" title="" /></span>百科            </p>

</div>

       

               <div class="feat_prod_box">

                 <img src="images/kg3.jpg" width="137" height="177" /> <img src="images/kg4.jpg" width="137" height="176" /> <img src="images/kg2.jpg" width="126" height="176" />

<div class="prod_img"></div>

               <div class="clear"></div>

            </div>    

          

               <div class="feat_prod_box">

           

                   <div class="prod_img"></div>

                   <p>美食类 </p>

                   <p><img src="images/jk2.jpg" width="137" height="177" />    <img src="images/美食.jpg" width="137" height="177" />    <img src="images/美食3.jpg" width="137" height="177" /></p>

                   <div class="clear"></div>

            </div>     

          

           <div class="title"><span class="title_icon"><img src="images/bullet2.gif" alt="" title="" /></span>心理类</div>

           <div class="clear"></div>

           <div class="new_products">

          

                    <div class="new_prod_box">

                        <a href="#">产品名称</a>

                        <div class="new_prod_bg">

                        <span class="new_icon"><img src="images/new_icon.gif" alt="" title="" /></span><img src="images/xl1.jpg" width="107" height="112" /></div>          

                    </div>

                   

                    <div class="new_prod_box">

                        <a href="#">产品名称</a>

                        <div class="new_prod_bg"><img src="images/xl2.jpg" width="113" height="111" />

                        <span class="new_icon"><img src="images/new_icon.gif" alt="" title="" /></span></div>          

                    </div>                   

                   

                    <div class="new_prod_box">

                        <a href="#">产品名称</a>

                        <div class="new_prod_bg">

                        <span class="new_icon"><img src="images/new_icon.gif" alt="" title="" /></span><img src="images/xl3.jpg" width="108" height="115" /></div>          

                    </div>         

           

            </div>

         

           

        <div class="clear"></div>

        </div><!--end of left content-->

       

        <div class="right_content">

                  

       

             <div class="title"><span class="title_icon"><img src="images/bullet3.gif" alt="" title="" /></span>有关图书</div>

             <div class="about">

             <p>

             <img src="images/about.gif" alt="" title="" class="right" />

             本书店本着为生活提供方便,为广大读者提供生活中最需要最贴近自己的图书,我们有健康类、心理类、美食类等等多种类图书,欢迎大家订阅。

             </p>

            

             </div>

            

             <div class="right_box1">

            

                  <div class="title"><span class="title_icon"><img src="images/bullet4.gif" alt="" title="" /></span>促销</div>

                    <div class="new_prod_box">

                        <a href="#">产品名称</a>

                        <div class="new_prod_bg"><img src="images/kg.jpg" width="115" height="139" />

                        <span class="new_icon"><img src="images/promo_icon.gif" alt="" title="" /></span></div>          

                    </div>

                   

                    <div class="new_prod_box">

                        <a href="#">产品名称</a>

                        <div class="new_prod_bg"><img src="images/yy.jpg" width="110" height="148" />

                        <span class="new_icon"><img src="images/promo_icon.gif" alt="" title="" /></span></div>          

                    </div>                   

                   

                    <div class="new_prod_box">

                        <a href="#">产品名称</a>

                        <div class="new_prod_bg"><img src="images/养殖.jpg" width="100" height="155" />

                        <span class="new_icon"><img src="images/promo_icon.gif" alt="" title="" /></span></div>          

                    </div>             

            

             </div>

            

             <div class="right_box2">

            

                  <div class="title"><span class="title_icon"><img src="images/bullet5.gif" alt="" title="" /></span>种类</div>

                 <div class="clear"></div>

                <ul class="list1">

                <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="#">文教类</a></li>

                </ul>

               

                  <div class="title"><span class="title_icon"><img src="images/bullet6.gif" alt="" title="" /></span>Partners</div>

                <div class="clear"></div>

                <ul class="list2">

                <li><a href="#">accesories</a></li>

                <li><a href="#">books gifts</a></li>

                <li><a href="#">specials</a></li>

                <li><a href="#">hollidays gifts</a></li>

                <li><a href="#">accesories</a></li>

                <li><a href="#">books gifts</a></li>

                <li><a href="#">specials</a></li>

                <li><a href="#">hollidays gifts</a></li>

                <li><a href="#">accesories</a></li>                             

                </ul>      

            

             </div>        

                   

        </div><!--end of right content-->

        </div>

        <div class="clear" ></div>

 <div class="footer">

         <div class="left_footer"><img src="images/footer_logo.gif" alt="" title="" /><br /> <a href="http://www.cssmoban.com/" title="free templates">cssmoban</a></div>

        <div class="right_footer">

        <a href="#">首页</a>

        <a href="#">关于我们</a>

        <a href="#">服务</a>

        <a href="#">隐私声明</a>

        <a href="#">联系我们</a>

      

        </div>

      

 </div>     

   

</div>

</body>

</html>

实训体会:

一周的实训转瞬即逝,在这短暂的时间里,我们在老师的指导和帮助下,对于网页设计与制作有了进一步的了解。通过这次实训我已经掌握了制作简单网页的过程,基本熟悉了各种软件的综合使用方法。

在这几天的学习当中和同学讨论制作网站。同时学到了许多关于网页制作的相关知识,也让我体会到了团结的重要意义,我觉得在制作过程中,发现自己学的东西太欠缺了,要学习有条不紊,要学习冷静思索,多去学习一点网页制作的技术,以备我以后的制作之路。

实践出真理,实训的日子过去了,从理论和操作中融合了我们平时所学的知识,为我们的学习和工作铺垫了精彩的一幕。因此,我坚信,用心去做自己认为应该做的事,努力开拓我们的极限,没有什么是不可能的,我们要更加的去努力。