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

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

PAGE

PAGE 217

企业案例

静态网页制作（Dreamweaver）

所在系别：计算机技术系

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

指导教师: 张亚静

专业负责人：孙志成

案例二十二、清水岩网站

一、案例整体目标及要求

（一）案例目的

flash动画和网页特效等提高学生运用所学的理论知识和技能、最终提升学生开发网站的综合能力。

（二）案例要求

使用CSS+DIV对网页进行布局，通过合资模型设置网页元素的显示效果，以JavaScript特效提升网页动态效果。

二、案例解决方案

1、页面导航

分为清水岩、公司简介、产品一览、新闻中心、联系我们、在线留言、招商加盟七个模块。

效果图：

关键代码：

<ul>

</ul>

2、首页

效果图:

3、公司简介

效果图:

关键代码

<title>清水岩护肤品公司简介</title>

</head>

<body>

<ul>

</ul>

</div>

</div>

</div>

<ul>

</ul>

</div>

<p>河北省石家庄市商贸有限公司</p>

<span>河北省石家庄市商贸有限公司专门从事纯天然植物护肤产品的研发、制造、销售，加盟与服务。利用国际<img class="box_right_a1" src="images/about_1_03.jpg" />尖端的提纯技术，在国内率先将植物成份和植物精油运用于护肤产品在全国以有加盟店二十余家，针对肌肤的老化等问题，依托瑞士尖端生物科技和传承百年的中医精髓护肤配方配合，成全国以有加盟店二十余家，针对肌肤的老化等问题，依托瑞士尖端生物科技和传承百年的中医精髓护肤配方配合，成功研制活细胞护肤系列产品，真正的帮助细胞恢复平衡，提高细胞组织修复与复原能力，彻底解决随着年龄的增长，皮肤出现的暗黄、皱纹、色斑、松弛等问题。凭着卓越的功效和领先的技术，Rinsing Rocke(清水岩)活细胞护肤系列产品赢取了顾<img class="box_right_b2" src="images/about_2_07.jpg" />客的高度信任，成和领先的技术，Rinsing Rocke(清水岩)活细胞护肤系列产品赢取了顾客的高度信任，成为追求美丽人生和高品质生活人士的忠诚选择。，为产品打下了及其扎实的基础.</span>

</div>

产品一览

效果图

关键代码

<title>清水岩护肤品产品展示</title>

</head>

<body>

<ul>

</ul>

</div>

</div>

</div>

<div>

</span>

<span>

</span>

<span>

</span>

<span>

</span></div>

</span>

</div>

5、新闻中心

效果图:

关键代码：

<title>清水岩护肤品新闻中心</title>

</head>

<body>

<ul>

</ul>

</div>

</div>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</div>

</div>

<ul>

<li>地址：河北省石家庄市商贸有限公司</li>

</ul>

</div>

</div>

</div>

<p>版权信息：河北省石家庄市商贸有限公司</p>

</div>

</body>

</html>

6、联系我们

关键代码

<title>清水岩护肤品联系方式</title>

</head>

<body>

<ul>

</ul>

</div>

</div>

</div>

<ul>

</ul>

</div>

<ul>

<li>地 址:河北省石家庄市商贸有限公司</li>

</ul>

</div>

</div>

</div>

<ul>

<li>地址：河北省石家庄市商贸有限公司</li>

</ul>

</div>

</div>

</div>

<p>版权信息：河北省石家庄市商贸有限公司</p></div>

</div>

</html>

7、在线留言

效果图

关键代码

<title>清水岩护肤品联系留言</title>

</head>

<body>

<ul>

</ul>

</div>

</div>

</div>

<ul>

</ul>

</div>

<tbody>

<tr>

<span class="onShow">请输入姓名</span> <div id="nameTip" class="onShow"></div></td>

</tr>

<tr>

</tr>

<tr>

<span class="onShow">请输入QQ号码</span> <div id="lxqqTip" class="onShow"></div></td>

</tr>

<span class="onShow">请输入电子邮箱</span> <div id="emailTip" class="onShow"></div></td>

</tr>

<tr>

<span class="onShow">请输入联系电话</span> <div id="telTip" class="onShow"></div></td>

</tr>

<tr>

</select>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody></table>

</form>

</div>

</div>

<ul>

<li>地址：河北省石家庄市商贸有限公司</li>

</ul>

</div>

</div>

</div>

<p>版权信息：河北省石家庄市商贸有限公司</p>

</div>

</body>

</html>

8、招商加盟

效果图

关键代码

<title>清水岩护肤品招商加盟</title>

</head>

<body>

<ul>

</ul>

</div>

</div>

</div>

<ul>

</ul>

</div>

<p><span>护肤品招商加盟项目|敏感肌肤专用护肤品代理|

</span></p>

<p><span>无添加护肤品加盟项目|植物化妆品加盟项目|</span></p>

<p><span>微信护肤品代理加盟|护肤品代理加盟|</span></p>

<p><span>正品护肤品进货渠道|厂家货源化妆品代理加盟项目|</span></p>

</div>

</div>

<ul>

<li>地址：河北省石家庄市商贸有限公司</li>

</ul>

</div>

</div>

</div>

<p>版权信息：：河北省石家庄市商贸有限公司</p>

</div>

</body>

</html>

9、版权信息及邮箱。

关键代码：

<ul>

<li>地址：河北省石家庄市商贸有限公司</li>

</ul>

</div>

</div>

</div>

<p>版权信息：河北省石家庄市商贸有限公司</p>

</div>

三、案例主要技术指标

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

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

CSS+DIV布局

JavaScript实现网页动态效果

四、案例实施进度

进度安排

内容安排

第一天

上午

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

下午

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

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

第二天

上午

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

下午

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

第三天

上午

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

下午

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

第四天

上午

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

下午

完善并测试网页，

第五天

上午

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

下午

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

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

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

最新文章

热门文章

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

最新文章

热门文章

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