中职高教版高二《网页设计与制作》任务5.3 站内搜索页面设计课件

项目5 制作宝贝详情 任务5.3 站内搜索页面设计 1 CONTENTS 01 活动1 站内搜索页面制作 02 活动2 设置网页站内搜索功能 01 站内搜索页面制作 “天猫超市”官网 “京东”官网 【官方网站举例】 4 【站内搜索的功能】 在大数据潮流下的电商平台，既要给买家呈现足够的信息量，又要让每一位买家能精准地获取自己的信息。在宝贝详情页中设置站内搜索功能，是提高用户体验的最好途径。站内搜索就像是一个网站或商城的快捷通道，可以帮助买家快速找到所需要的产品。通常，我们把一个电子商务平台是否具备站内搜索功能，作为衡量该电商网站专业性和品牌度高低的重要标准。一般来讲，详情页的站内搜索在形式上包括两个要件：搜索入口和搜索结果页面。其中，最核心的技能是如何有效地将搜索结果呈现在买家面前。 6 【作业步骤】 （1）建立站点。 （2）打开详情页。 （3）制作搜索功能框。 （4）样式美化。 （5）预览。 7 【作业助手】文本域属性设置 1、设置文本域的字体 <input type="text" style="font-size:28px; font-family:'微软雅黑 Light'; color:#F00;" />大小：28像素， 字体：微软雅黑，颜色：红色。 2、设置文本域的背景色 <input type="text" style="background-color:#999" /> 背景颜色：灰色 3、文本域的虚线边框设置 <input type="text" style=" border:dotted 1px #333333" /> 文本域边距为虚线的，1像素灰色的。 8 4、文本域的实线边框设置 <input type="text" style=" border:solid 2px #333333" /> 文本域边距为实线的，2像素灰色的。 5、设置文本域的背景图 <input type="text" style=" background-image:url(bg.jpg); /> 为文本域设置背景图片。 6、设置文本域的高宽 <input type="text" style=" width:300px; height:60px" /> 文本域宽为300像素和高为60像素。 【作业助手】文本域属性设置 9 问题： 上述文本域属性设置采用哪一种样式表？ 请简述3种样式表的区别？ 如果改成文本区域的属性，可在代码中如何修改？ 10 一、相同点 1.文本域和文本区域都是用来输入文本信息的表单元素； 2.都能应用CSS样式； 3.都有禁用和只读等属性。 【知识链接】文本域和文本区域的区别 11 二、不同点 文本域是用于文本字段，主要用于输入和显示姓名、密码、住址和电话等等，一般单行显示。 文本区域主要用于输入和显示留言内容和备注信息等多行信息，可以设置上下滚动条。如图所示： 【知识链接】文本域和文本区域的区别 12 拓展训练1 13 拓展训练2 14 02 设置网页站内搜索功能 在网页的站内搜索功能实现上，电子商务平台和其他交互平台所考虑的需求点应该是不一样的。电子商务平台站内搜索在功能设置上主要考虑人性化与便利性；在内部结构上需要考虑系统的反应速度与稳定性。要做出专业性和功能性强大的搜索页面，这需要扎实的专业知识和丰富的实践经验。对于初学者而言，了解网页站内搜索的原理和掌握网页站内搜索功能的设计与制作的基本步骤更为重要。 【思考】 17 【作业步骤】 (1)建立站点。 (2)打开详情页。 (3)修改表单提交动作。 (4)修改文本域的NAME值。 (5)插入隐藏域。 (6)预览并完善。 18 表单form的属性简介 添加一个表单时会有一串表单的代码，如下所示： <form name="表单名称"action="动作"method="post" target="目标"></form> 方法：设置将表单内的数据发送到服务器所使用的方法，包括以下三类： (1)默认：使用浏览器的默认设置将表单数据发送到服务器，通常情况下，浏览器的默认设置为GET。 (2) GET：将值附加到请求这个页的URL中， 发送附加在URL上的信息， 但由于对发送的数量作了限制， URL的长度被限制在8192个字符以内， 所以不推荐使用此方法。 (3) POST：在HTTP请求中嵌入表单数据， 此种方法在发送数据的数据量上没有强加限制，也是现在普遍使用的方法。 19 操作小贴士1 ①TN是指在百度注册的名字，值即为你在百度上的注册名。主要用于百度搜索引擎统计发送搜索请求的次数，从而给予推广人TN名适当奖励。在百度联盟里 快取的代码的TN就是k 注册的名字。 ②TN的默认名是“BDS”。如果TN值填写BD