静态网页制作（Dreamweaver）静态网页制作（Dreamweaver）企业案例17

时间：2020-09-06 12:18:22　来源：勤学考试网本文已影响人

PAGE

PAGE 217

企业案例

静态网页制作（Dreamweaver）

所在系别：计算机技术系

所属专业：计算机网络技术

指导教师: 张亚静

专业负责人：孙志成

案例十七、游戏网站

一、案例整体目标及要求

（一）案例目的

通过通过案例培养学生的动手能力，提高网页制作能力和水平，灵活运用HTML+CSS+DIV、JavaScript技术，本案例的主题是游戏网站。

（二）案例要求

网页以游戏界面为主题，采用HTML+CSS+DIV、table来网页布局，它大致分为5个模块。大体结构是上、中、下，网页的head部分和结尾部分是不动的。

二、案例解决方案

1、head部分

分为主页、关于、网络日志、图库、联系我们等个6模块。

效果图：

2、首页

效果图:

《1》首先看到的是3张醒目带有轮播特效的图片。

《2》下面显示则是找到的一些比较火的游戏任务使用无缝滚动的图片。（利用js脚本，将图片放到表格中，实现图片滚动的效果）。

关键代码如下：

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

<li>

</div>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

效果截

= 3 \* GB3 ③底部则显示的是版权信息及邮箱。（在版权信息后面加入了超链接邮箱可以直接发送邮件）

关键代码：

<p>当一个人玩游戏的时候，他玩的是什么？

流行的答案是“寂寞”。而根据罗切斯特大学的研究，游戏之所以让人上瘾是因为它满足了人的心理需要。不管是寂寞论还是心理论，根本上都是说，电脑游戏，是loser的天堂。

我不这么看，我敬重那些玩游戏上瘾的人，他们忠诚于游戏，有承诺感。</p>

</div>

<p>如果您还有什么好的图片或者其他建议，欢迎发给我们。不胜感激！</p>

</div>

</div>

<p>© 不能被抄袭，本人有个人所有权！<a href="#">官网</a> </p>

</div>

图库

这是一个二级页面，构成用的是主页的头部，下面有一个大标题，底下则是一些游戏的图片，供欣赏.底部仍然是主页的底部。

截图如下：

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</div>

jQuery(function($) {

$(".swipebox").swipebox();

});

</script>

三、案例主要技术指标

利用HTML标签完成网页结构的搭建

CSS选择器及盒子模型的灵活运用

CSS+DIV布局

JavaScript实现网页动态效果

四、案例实施进度

进度安排

内容安排

第一天

上午

明确网站主题，应力求简洁，要点明确，要以简单的画面和语言告诉浏览者，站点的主题。收集网页素材，确定栏目，决定网站结构，通过小组讨论，画出网页草图。

下午

确定内容安排，将每个页面的草图设计完成。

相关的文字工作录入完毕，定义好本地站点，将资料保存。

第二天

上午

用Photoshop将网页草图实现，决定网站的配色方案，可以借鉴其他网站。对各个网页可以分工实现。

下午

制作网页中所需要的Flash。将在PS中完成的图片切片，保存。

第三天

上午

主页的设计主要是对版面进行合理布局，利用DIV+CSS进行合理定位。通过文字图形的空间结合，表达出和谐与美。利用DW，设计网页的排版方式，把各个切片放入DW中的DIV。

下午

将相应的内容，放入网页的对应位置。完成二级页面的制作，注意与主页的和谐统一，并对各页内容进行充实；适当搜集一些网页JS特效，做出适合自己站点的特效。

第四天

上午

修改并完善已经做好的网页，同时完成网页之间超级链接的设置。多页面之间的链接，特别是关系十分密切的有上下文关系的页面，设计时一定要含有向前和向后的按钮，便于浏览者的访问

下午

完善并测试网页，

第五天

上午

对于已完成网站，进一步进行修改，完成案例报告书的书写。

下午

检查每个小组的网页，以及案例报告，并打分。

相关热词搜索：企业 网页制作 静态案例

静态网页制作（Dreamweaver）静态网页制作（Dreamweaver）企业案例17

最新文章

热门文章

静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 企业案例17

最新文章

热门文章

静态网页制作（Dreamweaver）静态网页制作（Dreamweaver）企业案例17