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