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

黄 冈 师 范 学 院 提高型实验报告 实验课题 （实验类型：■ 综合性  专题资讯□设计性  □应用性） 实验课程 实验时间  网络程序设计 2010 年 12 月 16 日 学生姓名 胡建丽、王璇、吴姗、陈莎专业班级 计科 200802 班 200826140202 200826140203 学 号 200826140204 200826140215 一、 实验目的和要求 1、 目的： 模拟 Adode 公司为 CS4 Web Premium 套装软件所设计的一个专题资讯页面，采用一种简化的设计方法，摒弃了原页面混乱的结构、 复杂的样式和冗余的脚本。 2、 要求： 整个主题页以黑色为基调，并适当辅助 Dreamweaver 界面原有的经典绿，以及现在 CS4 版本的灰色系，同时在右上角点缀一点白色以求得视觉的平衡，以减缓黑色给人的压抑感觉。 本例在模仿原页面的设计风格的基础上借用了原页面信息，但要重新 设计结构，清除了结构中 CSS 与 HTML 混杂的现象，并借组 Dreamweaver 提供的 Spry 技术以及 jQuery 技术设计了页面的收缩面板、 下拉菜单和移动信息等动态效果。 二、 实验条件 1、 硬件环境：方正电脑四台 2、 软件环境： windowsXP ， dreamweaver 8. 三、 实验原理分析 1、 网站设计需求分析： Adode 网站 经 历了 三次 大的 改版 历程 ，早 期 （在 没 有 收购 Macromedia 之前）网站的设计风格比较简朴，设计思路比较单纯，仅仅是简单产品信息的陈列。在推出 CS （Creative suite ）套装之后，整个网站页面以浅灰色为主调， 并以典型大家圆角分块进行设计。 再后来升级 CS ３版本，网站采用以黑色为主色调，各个分区不再那么明显，而是以开放设计思路进行设计，整个网站设计风格具有酷，动，活的特点。 本例是模仿 Adode 公司推出 CS4 系列套装软件后所设计的主题新闻页面，选用 Web Premium 套装软件的专题宣传页面为蓝本进行设计。 2、 网站设计采用的技术： Spry 技术以、 jQuery 技术。 3、 规划思路： 在构思了页面布局的轮廓之后，应完全摒弃设计效果对于 HTML 结构的影响。 为实现这样的设计目标，我们分两步走：第一步，设计宏观结构，即网页基本结构， 构建页面布局的基本轮廓；第二步，微观设计，即设计页面的局部区域结构，此时 可以考虑信息的显示要求。 四、 实验方案或步骤 1、实验方案（设计思想） （1） 页面的结构设计 为了实现设计目标，将结构设计分为两步： 第一步：设计宏观结构，即网页基本结构，构建页面布局的基本轮廓。 第二步：设计微观结构，即设计页面的局部区域结构，此时可以考虑信息的显示需求。 （2） 网页的布局设计和布局思想 在布局时可遵循这样的设计思路：理清结构布局模型，统一标签默认显示样式，设计基本布局，设计模块的局部样式，最后考虑使用 CSS 解决浏览器兼容性问题。 布局思路 ：页面结构布局为四行二列固定宽度版式，但在实际浏览器中所呈现的是三行三列布局样式，由于整个页面结构嵌套比较多，相互关系复杂，我们要注意： 网页宽度和显示效果由外框（ div id=wrap ）负责，内部子框以流动方式自然排列。 借助 margin属性调整 div id=header框和 div id=top 框的位置。 借助 float 属性 实现 div id=main 框内 两个子框（ div id=content 和 div id=right ）浮动显示。 对于 div id=right 框内包含的五个子信息块也采用外层布局方法和效果，以流动和浮动来设计它们的显示。 （3） 网页的样式设计 统一页面标签的样式，本实验使用的是常用的标签进行默认样式统一设置。 定义类样式。 分析基本局部设计，在页面包含框中定义页面显示宽度，并局中对齐。考虑到在 body 中已经定义了文本局中，在该包含框中还需恢复文本的左对齐默认设置。 为了实现 div id=header包含框和 div id=top 包含框显示位置的倒置，需注意： 两个框的高度要明确，或至少固定一个框的高度。 使用 margin 属性作为力， 推动两个包含框实现错位显示。 要保证错位移动时恰到好处，必须设置 div id=top 的高度等于 div id=header包含框留出的空白高度。 为了避免下面包含框因为 div id=header包含框和 div id=top 换位置而错误的上移，导致布局出现重叠问题，需要为 div id=top 定义 margin-bottom 属 性，其取值最少应该为 div id=header的高度。 在主体区域包含了两个并列显示