网页设计与制作第10章 网络鞋城后台管理页面.ppt

第10章 网络鞋城后台管理页面 鞋城后台管理登录页面是管理员在登录表单中输入用户名、密码和验证码进而登录系统的页面，该页面的效果如图10-1所示，布局示意图如图10-2所示。 10.1 制作后台管理登录页面 1．前期准备 （1）建立目录 （2）新建网页 在admin目录下新建后台管理登录页面login.html、查询商品页面search.html、添加商品页面addgoods.html和会员管理页面manage.html。 （3）页面素材 将后台管理页面需要使用的图像素材存放在新建的images目录下。 （4）外部样式表 在新建的style目录下建立一个名为style.css的样式表文件。 10.1 制作后台管理登录页面 2．制作页面 （1）样式的定义 （2）页面结构代码 10.1 制作后台管理登录页面 查询商品页面是管理员在有哪些信誉好的足球投注网站栏中输入关键字后，通过系统有哪些信誉好的足球投注网站找出符合条件的商品列表页面。查询商品页面的效果如图10-5所示，布局示意图如图10-6所示。 10.2 查询商品页面的制作 1．前期准备 打开css目录下的新建的样式表文件style.css，准备添加图书查询页面使用的CSS规则。 2．制作页面 （1）页面整体的制作 （2）页面欢迎信息区域的制作 （3）页面Logo和信息中心文字的制作 （4）页面主体内容区域的制作 （5）页面底部区域的制作 （6）页面结构代码 10.2 查询商品页面的制作 添加商品页面是管理员通过表单输入新的商品数据，然后提交到网站数据库中的页面。添加商品页面的效果如图10-12所示，布局示意图如图10-13所示。 10.3 添加商品页面的制作 在前面讲解的网络鞋城的相关示例中，都是按照某个栏目进行页面制作的，并未将所有的页面整合在一个统一的站点之下。读者完成网络鞋城所有栏目的页面之后，需要将这些栏目页面整合在一起形成一个完整的站点。 这里以网络鞋城驴友天地页面为例，讲解一下整合栏目的方法。由于在最后两章的综合案例中建立了网站的站点，其对应的文件夹是D:\example\ch9，因此可以按照栏目的含义在D:\example\ch9下建立驴友天地栏目的文件夹tour，然后将前面章节中做好的驴友天地页面及素材一起复制到文件夹tour中。 采用类似的方法，读者可以完成所有栏目的整合，这里不再赘述。最后还要说明的是，当这些栏目整合完成之后，记得正确地设置各级页面之间的链接，使之有效地完成各个页面的跳转。 10.4 页面的整合