静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 企业案例23.docVIP

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例二十三、我的大学 一、案例整体目标及要求 （一）案例目的 通过实践项目培养我们的动手能力，提高网页制作能力和水平，灵活运用HTML+CSS+DIV、JS技术，我选择的主题是大学的一些经历。 （二）案例要求 以HTML+CSS+DIV技术来做成静态页面，通过掌握HTML、CSS基本知识，来灵活运用DIV+CSS布局方式搭建网页布局；熟练地使用网页制作开发工具；掌握网站建设的基本方法和技巧。 二、案例解决方案 1、页面导航 分为我的首页、我的中学、我的大学、有你陪伴、旅行日记、未来你好、我的欢喜、我还爱你八个模块。 效果图： 2、首页 效果图: 首先看到的是首页，然后是网站的其他内容，可以链接到详细信息 ②利用js脚本，将图片放到表格中，实现图片滚动的效果。 关键代码如下： !—大图轮播循环代码开始-- link rel=stylesheet type=text/css href=css/style.css/ link rel=stylesheet href=css/orbit-1.2.3.css link rel=stylesheet href=css/lanrenzhijia.css script type=text/javascript src=js/jquery-1.5.1.min.js/script script type=text/javascript src=js/jquery.orbit-1.2.3.min.js/script script type=text/javascript $(window).load(function() { $(#featured).orbit(); }); /script div id=featured a href=img src=images/hhh.jpg/aa href=img src=images/hhh.jpg/a /div /div !—大图轮播循环代码结束-- 效果截图： !--无缝循环代码结束-- style img{ border:none;} .gd_img{ width:100%; text-align:left; position: relative; padding-top:10px; line-height:120%; margin-bottom:10px; margin-top:20px; margin-left:30px; } .gd_img a{ color:#000;text-decoration: none;} .gd_img a:hover{ color:#FF0000; } .gd_img td.a.img{ } .gd_img .caseb{position:absolute; margin-top:-9px;} .gd_img #tupian td{ padding-right:12px; width:110px; } .gd_img #tupian td img{ width:130px; height:220px; overflow:hidden; } /style DIV id=demo class=hdo gd_img style=OVERFLOW: hidden; WIDTH: 600px; HEIGHT: 240px TABLE cellPadding=0 align=left border=0 cellspace=0 TBODY TR TD id=demo1 vAlign=top TABLE cellSpacing=0 cellPadding=4 width=2150 border=0 id=tupian TBODY TR TD align=middleA class=a1 href=#IMG src=images/22.jpg BR高校联盟/A/TD TD align=middleA class=a1 href=#IMG