第四章 制作五月花鲜花礼品网.pptVIP

在这个部分的制作过程中，主要设置鲜花编号、市场价格和会员价格显示在文本输入框中，但是框入框的边框宽度为0，而会员价格的字体颜色为#FF9900，字体加粗显示。 * 按钮设置图片样式，即设置按钮的背景图像，并且设置边框宽度为0，鼠标悬停在按钮上时呈手状，即设置光标的视觉效果为hand。 注意代码的红色部分。 * 介绍完前面的页面实现思路及对应的知识点后，本页面总结制作商品详情页需要用到的技能点，并让学员独立制作页面，教员辅导。 对于学生存在的问题：教员根据学员普遍问题，集中再讲解、强调，并且对于共性的问题，可以统一讲解。 * 指导子阶段： 详细的向学员描述制作购物车页面的一些需求，必要时可以打开网页向学员展示网页效果，让学员看到具体的页面效果。 例如： 1、图片、鲜花编号、商品名称一行的背景图像 2、页面字体颜色 3、每显示一行商品下方的实线 4、数量显示在输入框中，且居中显示等 要对以上的所有内容进行详细的描述，这些效果都必须实现。 * 指导子阶段： 页面分为6大部分，分别是导航、搜索、所购商品的显示等内容、版权。 可以参照首页的布局方式，首先创建一个层，ID为main，页面中所有的内容均在这个层中。 其次在main中创建4个层，ID分别为top、search、mid和end，top用来显示网站LOGO和导航，search用来显示快速搜索部分，mid用来显示所购商的显示信息，end用来显示页面链接和版权声明，即版权部分。 根据以上的分析，即设计出PPT上的页面分布图。 在制作过程中，top、search、main和end中的内容和样式都可以直接使用首页制作完居的内容。 * 指导子阶段： 在购物车页面主要介绍如何实现文字在文本输入框中居中显示，并且巩固按钮以图片的方式，并且当鼠标悬停在按钮上时，鼠标呈手状。 * 练习子阶段： 介绍完前面的页面实现思路及对应的知识点后，本页面总结制作购物车页面需要用到的技能点，并让学员独立制作页面，教员辅导。 对于学生存在的问题：教员根据学员普遍问题，集中再讲解、强调，并且对于共性的问题，可以统一讲解。 * 指导子阶段： 详细的向学员描述制作会员登录页的一些需求，必要时可以打开网页向学员展示网页效果，让学员看到具体的页面效果。 例如： 1、由于网站最上方的导航和下方的版权部分，在前三个页面中都已经制作，在这个页面中主要制作会员登录部分 2、用户名输入框和密码输入框大小一致，并且实现细边框样式 3、会员登录部分可以使用表格布局 要对以上的所有内容进行详细的描述，这些效果都必须实现。 * 指导子阶段： 页面分为6大部分，分别是导航、搜索、会员登录部分、版权。 可以参照购物车页面的布局方式，首先创建一个层，ID为main，页面中所有的内容均在这个层中。 其次在main中创建4个层，ID分别为top、search、mid和end，top用来显示网站LOGO和导航，search用来显示快速搜索部分，mid用来显示所购商的显示信息，end用来显示页面链接和版权声明，即版权部分。 根据以上的分析，即设计出PPT上的页面分布图。 在制作过程中，top、search、main和end中的内容和样式都可以直接使用首页制作完居的内容。 * 指导子阶段： 在用户登录页面主要介绍如何实现设置输入框的长度和高度，以及它的边框样式，并且巩固按钮以图片的方式，并且当鼠标悬停在按钮上时，鼠标呈手状。 * 练习子阶段： 介绍完前面的页面实现思路及对应的知识点后，本页面总结制作会员登录页面需要用到的技能点，并让学员独立制作页面，教员辅导。 对于学员存在的问题：教员根据学员普遍问题，集中再讲解、强调，并且对于共性的问题，可以统一讲解。 * 介绍虚拟目录的创建过程，可以由教员带领完成也可以教员讲解后，学员自己完成，学员会创建即可 * * 实现思路2---使用CSS设置页面内容 数量居中显示在文本输入框中 删除按钮以图片形式显示 制作五月花鲜花礼品网购物车页面（三） .shop-in { text-align: center; height: 16px; width: 30px; } .delete { background-color: #FFFFFF; background-image: url(image/del.gif); background-repeat: no-repeat; height: 16px; width: 16px; border: 0px; cursor: hand; } 制作五月花鲜花礼品网购物车页面（四） 训练技能点 DIV+CSS布局页面 使用CSS设置文本输入框的大小及文本显示形式 使用CSS设置按钮样式及鼠标效果 制作购物车页面 根据推荐步骤实现购物车页面 30分钟