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

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例三十、相册网站 一、案例整体目标及要求 （一）案例目的 通过实践项目培养我们的动手能力，提高网页制作能力和水平，灵活运用HTML+CSS+DIV技术，本案例的主题是相册网站。 （二）案例要求 网页以相册网站为主题，采用HTML+CSS+DIV，它大致分为3个模块。大体结构是上、左、右，网页的left部分是不动的。以CSS+DIV技术结合JavaScript完成静态页面的设计和制作。 二、案例解决方案 1、页面导航 首页、关于、联系、图标、logo五个模块。 效果图： 关键代码： body div class=header ! div class=header-left div class=logo a href=index.html img src=images/logo.jpg (3).jpg alt=/a /div div class=top-nav ul li class=active a href=index.html 首页/a/li lia href=about.html class=black1 关于/a/li lia href=contact.html class=black4 联系/a/li /ul /div p class=footer-classTemplate by a href=/ target=_blankW3layouts/a /p /div ! ! div class=header-top div class=logo-in a href=index.htmlimg src=images/logo.png alt=/a /div div class=top-nav-in span class=menuimg src=images/menu.png alt= /span ul li class=active a href=index.html HOME/a/li lia href=about.html class=acblk1 ABOUT/a/li lia href=contact.html class=black4 CONTACT/a/li /ul script $(span.menu).click(function(){ $(.top-nav-in ul).slideToggle(500, function(){ }); }); /script /div div class=clear /div /div 2、首页 效果图: 以图片的特效来显示。 关键代码如下： div class=content div class=content-grid a href=single.html class=b-link-stripe b-animate-go thickbox img src=images/pi.jpg / div class=b-wrapper h2 class=b-animate b-from-left b-delay03 spanCool App Design/span pdevelopment, mobile/p i /i /div /a /div a href=single.html class=b-link-stripe b-animate-go thickbox img src=images/pi1.jpg / div class=b-wrapper h2 class=b-animate b-from-left b-delay03 spanCool App Design/span pdevelopment, mobile/p i /i /h2 /div /a /div div class=content-grid a href=single.html class=b-link-stripe b-animate-go thickbox img src=images/pi2.jpg / div class=b-wrapper h2 class=b-animate b-from-left b-delay03 spanCool App Design/span pdevelopmen