网页设计与制作教程（HTML+CSS+JavaScript） 教学配套课件 刘瑞新 第12章 购物商城后台管理页面的制作.pdfVIP

网页设计与制作教程 网页设计与制作教程 （HTML+CSS+JavaScript） （HTML+CSS+JavaScript） 机械工业出版社同名教材 机械工业出版社同名教材 配套电子教案 配套电子教案 第12章 购物商城后台管理页面 第12章 购物商城后台管理页面 12.1 商城后台管理登录页面的制作 12.1 商城后台管理登录页面的制作 12.2 查询商品页面的制作 12.2 查询商品页面的制作 12.3 添加商品页面的制作 12.3 添加商品页面的制作 12.4 页面的整合 12.4 页面的整合 12.1 商城后台管理登录页面的制作 12.1 商城后台管理登录页面的制作 商城后台管理登录页面是管理员在登录表单中输入用户 商城后台管理登录页面是管理员在登录表单中输入用户 名和密码进而登录系统的页面，该页面的效果如图12-1所 名和密码进而登录系统的页面，该页面的效果如图12-1所 示，布局示意图如图12-2所示。 示，布局示意图如图12-2所示。 12.1 商城后台管理登录页面的制作 12.1 商城后台管理登录页面的制作 1．前期准备 1．前期准备 （1）建立目录 （1）建立目录 （2）新建网页 （2）新建网页 （3）页面素材 （3）页面素材 将后台管理页面需要使用的图像素材存放在新建的 将后台管理页面需要使用的图像素材存放在新建的 images目录下。 images目录下。 （4）外部样式表 （4）外部样式表 在新建的style目录下建立一个名为style.css的样式表 在新建的style目录下建立一个名为style.css的样式表 文件。 文件。 12.1 商城后台管理登录页面的制作 12.1 商城后台管理登录页面的制作 2．制作页面 2．制作页面 （1）公共属性的CSS定义 （1）公共属性的CSS定义 （2）页面整体的制作 （2）页面整体的制作 （3）页面内容区域的制作 （3）页面内容区域的制作 （4）页面结构代码 （4）页面结构代码 12.2 查询商品页面的制作 12.2 查询商品页面的制作 查询商品页面是管理员在有哪些信誉好的足球投注网站栏中输入关键字后，通过 查询商品页面是管理员在有哪些信誉好的足球投注网站栏中输入关键字后，通过 系统有哪些信誉好的足球投注网站找出符合条件的商品列表页面。查询商品页面的效 系统有哪些信誉好的足球投注网站找出符合条件的商品列表页面。查询商品页面的效 果如图12-5所示，布局示意图如图12-6所示。 果如图12-5所示，布局示意图如图12-6所示。 12.2 查询商品页面的制作 12.2 查询商品页面的制作 1．前期准备 1．前期准备 在建立商城首页的准备工作中，用户曾经在网站根目录 在建立商城首页的准备工作中，用户曾经在网站根目录 中建立了一个专门存放JavaScript脚本的目录js，这里提前 中建立了一个专门存放JavaScript脚本的目录js，这里提前 将查询商品页面中需要用到的脚本文件calender.js复制到 将查询商品页面中需要用到的脚本文件calender.js复制到 目录js中。 目录js中。 2．制作页面 2．制作页面 （1）页面整体的制作 （1）页面整体的制作 （2）页面欢迎信息区域的制作 （2）页面欢迎信息区域的制作 （3）页面Logo和信息中心文字的制作 （3）页面Logo和信息中心文字的制作 （4）页面主体内容区域的制作 （4）页面主体内容区域的制作 （5）页面底部区域的制作 （5）页面底部区域的制作 （6）页面结构代码 （6）页面结构代码 （7）添加JavaScript脚本实现网页特效 （7）添加JavaScript脚本实现网页特效 12.3 添加商品页面的制作 12.3 添加商品页面的制作 添加商品页面是管理员通过表单输入新的商品数据，然 添加商品页面是管理员通过表单输入新的商品数据，然 后提交到网站数据库中的页面。添加商品页面的