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

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

PAGE

PAGE 217

企业案例

静态网页制作（Dreamweaver）

所在系别：计算机技术系

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

指导教师: 张亚静

专业负责人：孙志成

案例三十、相册网站

一、案例整体目标及要求

（一）案例目的

通过实践项目培养我们的动手能力，提高网页制作能力和水平，灵活运用HTML+CSS+DIV技术，本案例的主题是相册网站。

（二）案例要求

网页以相册网站为主题，采用HTML+CSS+DIV，它大致分为3个模块。大体结构是上、左、右，网页的left部分是不动的。以CSS+DIV技术结合JavaScript完成静态页面的设计和制作。

二、案例解决方案

1、页面导航

首页、关于、联系、图标、logo五个模块。

效果图：

关键代码：

<body>

<!>

</div>

<ul >

</ul>

</div>

<p class="footer-class">Template by <a href="/" target="_blank">W3layouts</a> </p>

</div>

<!>

</div>

<ul >

<li><a href="about.html" class="acblk1"> ABOUT</a></li>

<li><a href="contact.html" class="black4" > CONTACT</a></li>

</ul>

$("span.menu").click(function(){

$(".top-nav-in ul").slideToggle(500, function(){

});

</script>

</div>

</div>

2、首页

效果图:

以图片的特效来显示。

关键代码如下：

<span>Cool App Design</span>

<p>development, mobile</p>

</div>

</a>

</div>

<span>Cool App Design</span>

<p>development, mobile</p>

</h2>

</div>

</a>

</div>

<span>Cool App Design</span>

<p>development, mobile</p>

</div>

</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

效果截图：

代码：

<TBODY>

<TR>

<TBODY>

<TR>

</TR>

</TBODY>

</TABLE>

</TD>

</TR>

</TBODY>

</TABLE>

</div>

var speed1=25//速度数值越大速度越慢

document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML

function Marquee1(){

if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)

document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth

else{

document.getElementById("demo").scrollLeft++

}

var MyMar1=setInterval(Marquee1,speed1)

document.getElementById("demo").onmouseover=function () {clearInterval(MyMar1)}

document.getElementById("demo").onmouseout=function () {MyMar1=setInterval(Marquee1,speed1)}

</SCRIPT>

</div>

<p class="footer-class-in">Copyright ? 2015 Kappe Template by <a href="/" target="_blank">W3layouts</a> </p>

</div>

</body>

二级页面之关于

效果截图：

关键代码：

</div>

</div>

<!>

</div>

<span>青春留不住，此处为你留。</span></p>

<span> 留驻美好瞬间，给你永恒记忆，串起生活每一天。</span></p>

<span> 让我们用最唯美的照片来为你留住最温馨的回忆。</span></p>

<span> 美化你爱的回忆，留住你快乐的记忆。</span></p>

<span> 让永不褪色的记忆，都留在陈氏册相馆。</span></p>

<p>设计师照相师</p>

</div>

</a>

</div>

</div>

</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<h5>Front end</h5>

</div>

</div>

<h4 class="author">首席设计师 - CEO 陈尽阳</h4>

</div>

<p>感恩国家的培养护佑！</p>

<p>感恩父母的养育之恩</p>

<p>感恩老师的辛勤教导</p>

<p>感恩同学的帮助和关心</p>

<p>感恩农夫的辛勤劳作和所有付出的人</p>

<p>让我们快乐的生活在感恩的世界。用我给你一个另外的你。</p>

</div>

</ul>

</div>

</div>

<p class="footer-class-in">Copyright ? 2015 Kappe Template by <a href="/" target="_blank">W3layouts</a> </p>

</div>

</body>

</html>

二级页面之联系：

效果图：

关键代码：

$("span.menu").click(function(){

$(".top-nav-in ul").slideToggle(500, function(){

});

</script>

</div>

</div>

<!>

<h1>有缘千里来相会</h1>

<p> 因为你的到来使我们丰壁生辉，

相遇即是有缘

我么么会用我么么服务是你心情愉快

.</p>

</div>

</div>

</div>

</div>

</div>

</div>

<p class="footer-class-in">Copyright ? 2015 Kappe Template by <a href="/" target="_blank">W3layouts</a> </p>

</div>

</body>

</html>

三、案例主要技术指标

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

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

CSS+DIV布局

JavaScript实现网页动态效果

四、案例实施进度

进度安排

内容安排

第一天

上午

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

下午

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

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

第二天

上午

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

下午

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

第三天

上午

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

下午

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

第四天

上午

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

下午

完善并测试网页，

第五天

上午

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

下午

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

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

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

最新文章

热门文章

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

最新文章

热门文章

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