网页制作实验报告-专题资讯

黄冈师范学院提高型实验报告实验课题专题资讯（实验类型：■综合性□设计性□应用性）实验课程网络程序设计实验时间2010学生姓名胡建丽、王璇、吴姗、陈莎专业班级计科200802班学号200826140202200826140203200826140204200826140215

实验目的和要求目的：模拟Adode公司为CS4WebPremium套装软件所设计的一个专题资讯页面，采用一种简化的设计方法，摒弃了原页面混乱的结构、复杂的样式和冗余的脚本。要求：整个主题页以黑色为基调，并适当辅助Dreamweaver界面原有的经典绿，以及现在CS4版本的灰色系，同时在右上角点缀一点白色以求得视觉的平衡，以减缓黑色给人的压抑感觉。本例在模仿原页面的设计风格的基础上借用了原页面信息，但要重新设计结构，清除了结构中CSS与HTML混杂的现象，并借组Dreamweaver提供的Spry技术以及jQuery技术设计了页面的收缩面板、下拉菜单和移动信息等动态效果。实验条件硬件环境：方正电脑四台软件环境：windowsXP，dreamweaver8.实验原理分析网站设计需求分析：Adode网站经历了三次大的改版历程，早期（在没有收购Macromedia之前）网站的设计风格比较简朴，设计思路比较单纯，仅仅是简单产品信息的陈列。在推出CS（Creativesuite）套装之后，整个网站页面以浅灰色为主调，并以典型大家圆角分块进行设计。再后来升级到CS３版本，网站采用以黑色为主色调，各个分区不再那么明显，而是以开放设计思路进行设计，整个网站设计风格具有酷，动，活的特点。本例是模仿Adode公司推出CS4系列套装软件后所设计的主题新闻页面，选用WebPremium套装软件的专题宣传页面为蓝本进行设计。网站设计采用的技术：Spry技术以、jQuery技术。规划思路：在构思了页面布局的轮廓之后，应完全摒弃设计效果对于HTML结构的影响。为实现这样的设计目标，我们分两步走：第一步，设计宏观结构，即网页基本结构，构建页面布局的基本轮廓；第二步，微观设计，即设计页面的局部区域结构，此时可以考虑信息的显示要求。实验方案或步骤实验方案（设计思想）页面的结构设计为了实现设计目标，将结构设计分为两步：第一步：设计宏观结构，即网页基本结构，构建页面布局的基本轮廓。第二步：设计微观结构，即设计页面的局部区域结构，此时可以考虑信息的显示需求。网页的布局设计和布局思想在布局时可遵循这样的设计思路：理清结构布局模型，统一标签默认显示样式，设计基本布局，设计模块的局部样式，最后考虑使用CSS解决浏览器兼容性问题。布局思路：页面结构布局为四行二列固定宽度版式，但在实际浏览器中所呈现的是三行三列布局样式，由于整个页面结构嵌套比较多，相互关系复杂，我们要注意：网页宽度和显示效果由外框（<divid="wrap">）负责，内部子框以流动方式自然排列。借助margin属性调整<divid="header">框和<divid="top">框的位置。借助float属性实现<divid="main">框内两个子框（<divid="content">和<divid="right">）浮动显示。对于<divid="right">框内包含的五个子信息块也采用外层布局方法和效果，以流动和浮动来设计它们的显示。网页的样式设计统一页面标签的样式，本实验使用的是常用的标签进行默认样式统一设置。定义类样式。分析基本局部设计，在页面包含框中定义页面显示宽度，并局中对齐。考虑到在body中已经定义了文本局中，在该包含框中还需恢复文本的左对齐默认设置。为了实现<divid="header">包含框和<divid="top">包含框显示位置的倒置，需注意：两个框的高度要明确，或至少固定一个框的高度。使用margin属性作为力，推动两个包含框实现错位显示。要保证错位移动时恰到好处，必须设置<divid="top">的高度等于<divid="header">包含框留出的空白高度。为了避免下面包含框因为<divid="header">包含框和<divid="top">换位置而错误的上移，导致布局出现重叠问题，需要为<divid="top">定义margin-bottom属性，其取值最少应该为<divid="header">的高度。在主体区域包含了两个并列显示的栏目，实现并列显示只需要浮动显示即可。页脚区域利用背景图像和背景色设计了一种错位感觉，从而实现与主体信息区域很紧密的结合。实验步骤：页面结构设计：宏观结构设计：<divid="wrap"><divid="header"><h1></h1><p></p></div><divid="top"><h2></h2><formaction="#"method="get"></form><ulid="nav1"></ul><ulid="nav2"></ul></div><divid="main"><divid="content"><divid="ad"></div><divid="left"><ulid="hint"></ul><divid="tab"></div></div><divid="right"><h2></h2><p></p></div><divid="highlight"><h3></h3><divid="roll"></div></div><divid="content-footer"><divid="col-a"></div><divid="col-b"></div><divid="col-c"></div></div></div><divid="sub"><h2></h2><h3></h3><ul></ul><dl></dl><h3></h3></div></div><divid="footer"><ul></ul><pid="copyright"></p><pid="terms"></p><pid="searchengine"></p></div></div>微观结构设计：区分标题和文本<divclass="AccordionPanel"><divclass="AccordionPanelTab">为何购买套件版本?</div><divclass="AccordionPanelContent"><h4>提高投资回报</h4><p>比较所需的个别产品,您会发现AdobeCreativeSuite4的折扣相当大</p><h4>扩大您的创作调色板</h4><p>工具越多,您积累的新技能可以激发更大的创作潜力并增加就业机会。</p><p><ahref="#">帮助我选择一个版本</a></p></div></div>页面右侧的微观结构<divid="right"><h2>重新定义Web设计和开发中的非凡境界</h2><pclass="p1">使用AdobeCreativeSuite4WebPremium软件创建各种数字体验,包括交互式网站、应用程序、用户界面、演示文稿和移动设备内容。</p><divid=”id1”><p>作为一名经验丰富的Web设计人员和开发人员,Adobe的PaulBurnett指出了CreativeSuite4WebPremium中的工作流程优势。</p></div><divid="vid2"><arel="modal"href="#"><imgsrc="images/inline_002.jpg"alt="文本"width="200"height="120"></a><p>Adobe的ColinFleming赞誉拥有多款工具的优势,并解释它们如何在CreativeSuite4中配合使用。</p></div><divclass="clear"></div><h4>充分表现自我</h4><p>借助技术进步为您的创意注入活力,它们通过激发灵感的色彩选择和功能强大的图形设计人员工具集增强了您的原创概念。编辑带有视觉反馈的音频,进一步提高项目层次,记录下每个步骤。</p><h4>跨方法工作</h4><p>与您的小组默契互动,跨方法实现创意输出并且无需重新创建资源。</p><h4>在线获得灵感</h4><p>借助CreativeSuite4WebPremium中新的在线沟通选项补充创意、优化协作。与同事及客户共享您的构思;浏览、创建和共享协调的颜色主题;充分利用帮助内容和社区制作的教程。</p><p><ahref="#"class="button">查看所有功能</a></p>布局和样式设计统一标签样式body{text-align:center;margin:0;padding:0;font-size:12px;}aimg{border:none;}ul,ol,dl,li,dt,dd{margin:0;padding:0;list-style-type:none;}a{border:none;text-decoration:none;}a:hover{text-decoration:underline;}网页包含框样式#wrap{width:998px;margin:0auto;text-align:left;}Header和top包含框样式#header{width:100%;height:112px;background:url(topbg.png)no-repeatcenter;margin-top:70px;}#top{height:70px;width:100%;margin-top:-182px;margin-bottom:112px;position:relative;background-color:#000;}主体样式#main{background:url(mainbg.gif)repeat-ylefttop;width:100%;clear:both;}#content{width:793px;float:left;}#sub{width:205px;float:right;}#footer{background:#424242url(footerbg.png)lefttopno-repeat;padding:82px02em2em;}页脚样式#footer{background:#424242url(footerbg.png)lefttopno-repeat;padding:82px02em2em;}实验结果与分析（小结）此处主要是强调页面中的左边的折叠面板部分，这里我们使用Spry技术设计折叠面板，每当鼠标经过时就会将折叠面板中的部分显示出来，从而让我们看到良好的动态效果，同时我们可以在SpryAssets/SpryAccordion.css样式表中随意修改折叠式面板的显示样式和风格。在实验中，我们需要修改JavaScript脚本设置，主要为：由于折叠面板的高度是固定的，这对于所包含内容不定的面板来说是非常不方便的，不过我们可以在调用脚本函数中添加一个参数即可。VarAccordion=newSpry.Widget.Accordion(“Accordion1”在SpryAssets/SpryAccordion.js脚本文件中修改折叠面板响应的动作，默认事件为单击响应，我们将其改为当鼠标移动则自动展开和收缩。在默认状态下，如果折叠式面板获取焦点总会在包含框周围显示一个虚线框，在与页面格格不入，我们须将此处的粗线框去掉。图中我们看到的折叠面板组中第一个面板内是一组产品列表信息，这些信息包含不同的图标，当鼠标移过时会高亮显示图标。这是页面中的“亮点”模块，它是使用jQuery设计的一个左右推动的动态效果，当单击左侧的按钮时，则面板向左移动，而单击右侧的按钮时，则面板向右移动，这种动态效果直接使用JavaScript会比较难实现，因此我们用到了jQuery技术来实现。这是在IE浏览器中打开的页面，由于结构嵌套比较复杂，且浮动布局和流动布局混合使用，因此在浏览器中存在模块重叠和移位等现象。我们的解决方法是在结构中增加清除层，凡是浮动的元素都在后面添加