《网页制作实验报告-专题资讯》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、黄冈师范学院提高型实验报告实验课题（实验类型：■综合性专题资讯□设计性□应用性）实验课程实验时间网络程序设计2010年12月16日学生姓名胡建丽、王璇、吴姗、陈莎专业班级计科200802班200826140202200826140203学号200826140204200826140215一、实验目的和要求1、目的：模拟Adode公司为CS4WebPremium套装软件所设计的一个专题资讯页面，采用一种简化的设计方法，摒弃了原页面混乱的结构、复杂的样式和冗余的脚本。2、要求：整个主题页以黑色为基调，并适当辅助Dreamwe

2、aver界面原有的经典绿，以及现在CS4版本的灰色系，同时在右上角点缀一点白色以求得视觉的平衡，以减缓黑色给人的压抑感觉。本例在模仿原页面的设计风格的基础上借用了原页面信息，但要重新设计结构，清除了结构中CSS与HTML混杂的现象，并借组Dreamweaver提供的Spry技术以及jQuery技术设计了页面的收缩面板、下拉菜单和移动信息等动态效果。二、实验条件1、硬件环境：方正电脑四台2、软件环境：windowsXP，dreamweaver8.三、实验原理分析1、网站设计需求分析：Adode网站经历了三次大的改版历程，早期（在

3、没有收购Macromedia之前）网站的设计风格比较简朴，设计思路比较单纯，仅仅是简单产品信息的陈列。在推出CS（Creativesuite）套装之后，整个网站页面以浅灰色为主调，并以典型大家圆角分块进行设计。再后来升级到CS３版本，网站采用以黑色为主色调，各个分区不再那么明显，而是以开放设计思路进行设计，整个网站设计风格具有酷，动，活的特点。本例是模仿Adode公司推出CS4系列套装软件后所设计的主题新闻页面，选用WebPremium套装软件的专题宣传页面为蓝本进行设计。2、网站设计采用的技术：Spry技术以、jQuery技

4、术。3、规划思路：在构思了页面布局的轮廓之后，应完全摒弃设计效果对于HTML结构的影响。为实现这样的设计目标，我们分两步走：第一步，设计宏观结构，即网页基本结构，构建页面布局的基本轮廓；第二步，微观设计，即设计页面的局部区域结构，此时可以考虑信息的显示要求。四、实验方案或步骤1、实验方案（设计思想）（1）页面的结构设计为了实现设计目标，将结构设计分为两步：第一步：设计宏观结构，即网页基本结构，构建页面布局的基本轮廓。第二步：设计微观结构，即设计页面的局部区域结构，此时可以考虑信息的显示需求。（2）网页的布局设计和布局思想在布局

5、时可遵循这样的设计思路：理清结构布局模型，统一标签默认显示样式，设计基本布局，设计模块的局部样式，最后考虑使用CSS解决浏览器兼容性问题。布局思路：页面结构布局为四行二列固定宽度版式，但在实际浏览器中所呈现的是三行三列布局样式，由于整个页面结构嵌套比较多，相互关系复杂，我们要注意：网页宽度和显示效果由外框（）负责，内部子框以流动方式自然排列。借助margin属性调整框和框的位置。借助float属性实现框内两个子框（

6、和）浮动显示。对于框内包含的五个子信息块也采用外层布局方法和效果，以流动和浮动来设计它们的显示。（3）网页的样式设计1)统一页面标签的样式，本实验使用的是常用的标签进行默认样式统一设置。2)定义类样式。3)分析基本局部设计，在页面包含框中定义页面显示宽度，并局中对齐。考虑到在body中已经定义了文本局中，在该包含框中还需恢复文本的左对齐默认设置。4)为了实现包含框和包含框显示位

7、置的倒置，需注意：两个框的高度要明确，或至少固定一个框的高度。使用margin属性作为力，推动两个包含框实现错位显示。要保证错位移动时恰到好处，必须设置的高度等于包含框留出的空白高度。为了避免下面包含框因为包含框和换位置而错误的上移，导致布局出现重叠问题，需要为定义margin-bottom属性，其取值最少应该为的高度。5)在主体区域包含了两个并列显示的栏

8、目，实现并列显示只需要浮动显示即可。6)页脚区域利用背景图像和背景色设计了一种错位感觉，从而实现与主体信息区域很紧密的结合。2、实验步骤：（1）页面结构设计：1)宏观结构设计：