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

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例三十三、孙燕姿的字谜城市网站 一、案例整体目标及要求 （一）案例目的 通过实践项目培养我们的动手能力，提高网页制作能力和水平，以及提升我们对于网页的理解程度。灵活运用css样式以及div盒子，提高对dw的掌握。此次实训我选择的主题是孙燕姿的姿迷城市。 （二）案例要求 网页以孙燕姿歌迷城市为主题，采用HTML+CSS+DIV来网页布局，它大致分为5个模块。大体结构是上、左、右，网页的head部分是不动的，中间部分来显示不同页面的内容。 二、案例解决方案 1、页面导航 分为首页、咨询详情两个模块。 2、首页 效果图: ①看到的首先是燕姿最近的动态，可以链接到详细信息，然后是简介。 = 2 \* GB3 ②下面显示则是燕姿专区，展示燕姿照片及演唱会情况。 关键代码如下： !--表单代码开始-- form id=form1 name=form1 method=post action= p id=p1 label for=textfield/label 用户名： input type=text name=textfield id=textfield / input type=radio name=radio id=radio value=radio / label for=radio/label 自动登录 找回密码/p p id=p1 label for=textfield2/label 密码：nbsp; input type=text name=textfield2 id=textfield2 / input type=submit name=button id=button value=登录 / /p div id=zhuce1 h3a href=#注册/a/h3 /div /form !--表单代码结束-- !--导航延伸代码开始-- div class=wrapper div class=head div class=topNav div class=topNavList a href=#讨论区/a a href=#燕姿专区/a /div /div div class=subNavWrapper div class=subNavSet div class=subNav sub0 spani class=subBgTopLeft/ii class=subBgBotLeft/i/span ul li a href=#详情/a a href=#资讯/a /li /ul /div div class=subNav sub1 spani class=subBgTopLeft/ii class=subBgBotLeft/i/span ul