HTML精品教程资料：05-项目案例：制作1号店网站
- 格式：pptx
- 大小：3.09 MB
- 文档页数：36
下载文档原格式
合集下载
Web编程基础(HTML+CSS)项目实战教程 教案-模块1 网站的设计与策划
模块1 网站的设计与策划
课程名称Web编程基础课时2课时
授课班级软件技术、计算机应用、移动开发专业
授课地点一体化教室授课形式做学教一体教学单元模块1-1 网站的概述
教学目标知识目标
理解网页与网站的相关概念；
掌握Web资源开发技术中，典型的HTML、CSS、
JavaScript技术在网页设计中的作用。
能力目标
能够区分网页与网站的关系；
能够区分服务器与客户端的关系。
素质目标
激发学生学习兴趣
引导学生团队合作
教学重点难点及措施教学重难点：
认识网页与网站；
Web前端开发技术。
措施：
通过上机操作加强学习和补充案例进行巩固。
教学方法做学教一体任务驱动线上线下混合教学教学任务掌握网站相关概念、网页开发工具
模块1 网站的设计与策划
课程名称Web编程基础课时2课时
授课班级软件技术、计算机应用、移动开发专业
授课地点一体化教室授课形式做学教一体教学单元模块1-2 网站的概述
教学目标知识目标
掌握使用网页编辑工具；
掌握常用的浏览工具及浏览HTML文档的方
法。
能力目标
能够掌握网页设计原则
能够灵活运用开发工具创建一个完整的Web
项目。
素质目标
激发学生学习兴趣
引导学生团队合作
《Web编程基础》教案。
《HTML5教程》课件
块级元素
如`<div>`、`<p>`、`<h1>`-`<h6>` 、`<ul>`、`<ol>`等，会在页面上占 据一定区域，并与其他块级元素并排 显示。
内联元素
语义化标签
如`<header>`、`<footer>`、 `<article>`、`<section>`等，用于描 述页面内容结构，使代码更具可读性 。
拖放API
HTML5提供了拖放API， 允许用户拖动元素并在目 标位置放下。
自定义拖放
开发者可以自定义拖放行 为，实现各种交互效果。
增强用户体验
拖放功能可以增强用户体 验，提高网页交互性和可 用性。
本地存储
Web存储API
HTML5引入了Web存储API，允 许在客户端存储数据，包括会话
数据和持久数据。
<html>标签是整个HTML文档的 根元素。
<head>标签内包含文档的元数 据，如<meta charset="UTF8">设置字符编码为UTF-8。
HTML5文档的基本结构包括 `<!DOCTYPE html>`、 `<html>`、`<head>`和 `<body>`等标签。
<body>标签内包含网页的可见 内容，如文本、图片、链接等。
HTML5性能优化
HTML5引入了许多新的技术和 特性，如Web Workers、Web Sockets和Server-Sent Events
等，可以实现更高效的网页性 能。
使用Web Workers可以在后台 线程中运行JavaScript，避免阻
如`<div>`、`<p>`、`<h1>`-`<h6>` 、`<ul>`、`<ol>`等，会在页面上占 据一定区域，并与其他块级元素并排 显示。
内联元素
语义化标签
如`<header>`、`<footer>`、 `<article>`、`<section>`等，用于描 述页面内容结构，使代码更具可读性 。
拖放API
HTML5提供了拖放API， 允许用户拖动元素并在目 标位置放下。
自定义拖放
开发者可以自定义拖放行 为，实现各种交互效果。
增强用户体验
拖放功能可以增强用户体 验，提高网页交互性和可 用性。
本地存储
Web存储API
HTML5引入了Web存储API，允 许在客户端存储数据，包括会话
数据和持久数据。
<html>标签是整个HTML文档的 根元素。
<head>标签内包含文档的元数 据，如<meta charset="UTF8">设置字符编码为UTF-8。
HTML5文档的基本结构包括 `<!DOCTYPE html>`、 `<html>`、`<head>`和 `<body>`等标签。
<body>标签内包含网页的可见 内容，如文本、图片、链接等。
HTML5性能优化
HTML5引入了许多新的技术和 特性，如Web Workers、Web Sockets和Server-Sent Events
等，可以实现更高效的网页性 能。
使用Web Workers可以在后台 线程中运行JavaScript，避免阻
用HTML语言制作简单的网页
电子科技大学电子工程学院标准实验报告（实验）课程名称用HTML语言制作简单的网页电子科技大学教务处制表电子科技大学实验报告学生姓名：万羽学号：2902103035 指导教师：伍瑞钦一、实验室名称：科B457二、实验项目名称：用HTML语言制作简单的网页三、实验原理：1.网页（1）网页就是在浏览器上看到的一页，网页也称为Web页。
（2）主页通常是进入网站首先浏览的网页，具有引导用户浏览整个网站内容的作用。
（3）超链接是网页中的特殊标记。
它指向了WWW中的其他资源，如其他网页、网页的另一个段落、声音文件等。
这些资源可以位于自己的计算机上，也可以位于其他计算机上。
用作超链接的标记可以是一段文字、一幅图像，也可以是一幅图像的一部分。
在浏览网页时，单击超链接就可以跳转到超链接所指向的资源。
超链接像一根一根的线一样，将各种网页链接在一起，形成一个庞大的信息网。
2.HTML语言（1）HTML语言就是超文本标记语言，是网页制作的基础，也是基本的工具，使用其他任何工具制作的网页，最终都要以HTML方式存储在计算机里。
（2）HTML的脚本可用任何一种文本编辑器进行编写，如记事本、Microsoft Word等。
保存时要将脚本保存成纯文本格式，扩展名必须是.htm。
（3）HTML脚本的基本结构。
HTML脚本总是以<html>标记开头，</html>标记结尾，在<html>和</html>标记之间是HTML的所有内容，一般情况下它分为两部分：头部和主体。
头部总是由<head>和</head>标记定义的，其中包含了HTML脚本的标题和说明信息；头部下面是HTML脚本的主体部分，它以<body>作为起始标记，</body>作为结束标记，其中所包含的就是在浏览器中所看到的内容，包括文字、图片、动画等。
3.FrontPageFrontPage是一种简单易学的Web管理和网页制作的软件。
网页设计与制作项目教程(HTML+CSS+Bootstrap)项目二
• ７. ＨＴＭＬ 文档
上一页 下一页 返回
任务一 初识 HTML
• ＨＴＭＬ 文档用来描述网页. ＨＴＭＬ 文档包含ＨＴＭＬ 标签和纯 文本. ＨＴＭＬ 文档也被称为网页. 完整的ＨＴＭＬ 文档至少包括< ｈｔｍｌ > 标签、< ｈｅａｄ > 标签、< ｔｉｔｌｅ > 标签和< ｂｏ ｄｙ >标签.
• ＨＴＭＬ４. ０ 同样也加入了很多特定浏览器的元素和属性. 但是同 时也开始“清理” 这个标准. 把一些元素和属性标记为过时. 建议不 再使用它们.
上一页 下一页 返回
任务一 初识 HTML
• ＨＴＭＬ５ 草案的前身名为Ｗｅｂ Ａｐｐｌｉｃａｔｉｏｎｓ １. ０. 于２００４ 年由ＷＨＡＴＷＧ 提出. 于２００７ 年被Ｗ３Ｃ 接 纳. 并成立了新的ＨＴＭＬ 工作团队. 在２００８ 年１ 月２２ 日. 第 一份正式草案发布.２０１２ 年１２ 月１７ 日. 万维网联盟(Ｗ３Ｃ) 正式宣布凝结了大量网络工作者心血的ＨＴＭＬ５ 规范已经正式定 稿. Ｗ３Ｃ 的发言稿称:“ＨＴＭＬ５ 是开放的Ｗｅｂ 网络平台的奠 基石.” ２０１３ 年５月６ 日. ＨＴＭＬ５.１ 正式草案公布. 该规范 定义了第五次重大版本. 第一次要修订万维网的核心语言: 超文本标 记语言(ＨＴＭＬ). 在这个版本中. 新功能不断推出. 以帮助Ｗｅｂ 应 用程序的作者. 努力提高新元素互操作性. ２０１４ 年１０ 月２９ 日. 万维网联盟宣布. 经过几乎８年的艰辛努力. ＨＴＭＬ５ 标准规范最 终制定完成了. 并已公开发布.
上一页 下一页 返回
任务一 初识 HTML
• ５. ＨＴＭＬ 发展历史 • 超文本标记语言(第一版): １９９３ 年６ 月作为互联网工程工作小组
上一页 下一页 返回
任务一 初识 HTML
• ＨＴＭＬ 文档用来描述网页. ＨＴＭＬ 文档包含ＨＴＭＬ 标签和纯 文本. ＨＴＭＬ 文档也被称为网页. 完整的ＨＴＭＬ 文档至少包括< ｈｔｍｌ > 标签、< ｈｅａｄ > 标签、< ｔｉｔｌｅ > 标签和< ｂｏ ｄｙ >标签.
• ＨＴＭＬ４. ０ 同样也加入了很多特定浏览器的元素和属性. 但是同 时也开始“清理” 这个标准. 把一些元素和属性标记为过时. 建议不 再使用它们.
上一页 下一页 返回
任务一 初识 HTML
• ＨＴＭＬ５ 草案的前身名为Ｗｅｂ Ａｐｐｌｉｃａｔｉｏｎｓ １. ０. 于２００４ 年由ＷＨＡＴＷＧ 提出. 于２００７ 年被Ｗ３Ｃ 接 纳. 并成立了新的ＨＴＭＬ 工作团队. 在２００８ 年１ 月２２ 日. 第 一份正式草案发布.２０１２ 年１２ 月１７ 日. 万维网联盟(Ｗ３Ｃ) 正式宣布凝结了大量网络工作者心血的ＨＴＭＬ５ 规范已经正式定 稿. Ｗ３Ｃ 的发言稿称:“ＨＴＭＬ５ 是开放的Ｗｅｂ 网络平台的奠 基石.” ２０１３ 年５月６ 日. ＨＴＭＬ５.１ 正式草案公布. 该规范 定义了第五次重大版本. 第一次要修订万维网的核心语言: 超文本标 记语言(ＨＴＭＬ). 在这个版本中. 新功能不断推出. 以帮助Ｗｅｂ 应 用程序的作者. 努力提高新元素互操作性. ２０１４ 年１０ 月２９ 日. 万维网联盟宣布. 经过几乎８年的艰辛努力. ＨＴＭＬ５ 标准规范最 终制定完成了. 并已公开发布.
上一页 下一页 返回
任务一 初识 HTML
• ５. ＨＴＭＬ 发展历史 • 超文本标记语言(第一版): １９９３ 年６ 月作为互联网工程工作小组
第2章 HTML入门(网页制作案例教程课件)
2020/7/26
2.2 创建第一个HTML文件
• HTML可以使用任何文本编辑器，如Windows“ 记事本”或“写字板等”进行编辑，代码输入 后，一定要把文件的扩展名保存为“.htm”或 “.html”。
图2-2 2020/7/26 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
属性值，这里是颜色值(粉红色)
bgcolor就是<body>标记的属性，用于设置背景色
2020/7/26
2.1.2 标记及其属性
• 如果一个标记有多个属性，属性和属性之间用 空格隔开 。
• 标记在使用时，应注意以下几点：
– HTML标记不区分大小写
– 使用“<!--”和“-->”标记将HTML文档中注解内容括 起来
</head>
<body> <font size=1>1号字体</font><p> <font size=2>2号字体</font><p> <font size=3 color=red>3号字色红体</font><p> <font size=4 color=blue>4号蓝色字体</font><p> <font size=5 color=orange>5号橙色字体</font><p> <font size=6 color=yellow face="黑体">6号黄色黑体字体</font><p> <font size=7 color=green face="隶书">7号绿色隶书字体</font><p> <font size=+2 color=purple face="宋体">+2号紫色宋体字体</font><p
2.2 创建第一个HTML文件
• HTML可以使用任何文本编辑器，如Windows“ 记事本”或“写字板等”进行编辑，代码输入 后，一定要把文件的扩展名保存为“.htm”或 “.html”。
图2-2 2020/7/26 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
属性值，这里是颜色值(粉红色)
bgcolor就是<body>标记的属性，用于设置背景色
2020/7/26
2.1.2 标记及其属性
• 如果一个标记有多个属性，属性和属性之间用 空格隔开 。
• 标记在使用时，应注意以下几点：
– HTML标记不区分大小写
– 使用“<!--”和“-->”标记将HTML文档中注解内容括 起来
</head>
<body> <font size=1>1号字体</font><p> <font size=2>2号字体</font><p> <font size=3 color=red>3号字色红体</font><p> <font size=4 color=blue>4号蓝色字体</font><p> <font size=5 color=orange>5号橙色字体</font><p> <font size=6 color=yellow face="黑体">6号黄色黑体字体</font><p> <font size=7 color=green face="隶书">7号绿色隶书字体</font><p> <font size=+2 color=purple face="宋体">+2号紫色宋体字体</font><p
网页设计与制作实践 第5版 模块1 创建站点与制作商品简介网页
【任务1-1-1】启动Dreamweaver与初识其工作界面
7
面 板 组 ： Dreamweaver 包 “文件”面板：网站是多个网页文件、图像文件、程序文件等有机联 括多个面板，这些面板都有 系的整体，要有效地管理这些文件及其联系，需要一个有效的工具， 不同的功能，将它们叠加在 “文件”面板便是这样的工具。 一起便形成了面板组。
5
Dreamweaver工作界面的布局与组成如图所示。
标题栏：显示网页的标题和网页文档 的存储位置。
菜 单 栏 ： Dreamweaver 的 菜 单 栏 包 含10类菜单：“文件”“编辑”“查 看”“插入”“修改”“格式”“命 令”“站点”“窗口”和“帮助”。
“插入”面板：显示“插入”面板的 方法是：选择“窗口”→“插入”， 在 Dreamweaver 主 界 面 的 右 侧 将 显 示“插入”面板。
HTML5+CSS3网页设计与制作实践（项目式）（第5版）
模块1 创建站点与制作商品简介网页
制作网页之前，应该先在本地计算机磁盘上建立一个站点，使用站点对网页文档、样式 表文件、网页素材进行统一管理。
1 学会新建网页文档和设置网页的页面属性
学习目标
2 学会在网页中插入空格、文本换行符和特殊字符
熟悉浏览器窗口的基本组成元素和网页的基本组成 3
浏览器是用户浏览网页的软件，支持多种具有交互性的网络服 务，是人们通过网络进行交流的主要工具。目前流行的浏览器为 Chrome、Firefox等。
【任务1-1-2】认识浏览器窗口的基本组成和网页的基本组成元素 9
浏览器窗口主要由网页标题、菜单栏、命令栏、地址栏和网页窗口等部分组成。Internet Explorer（简称IE）浏览器窗口如图1所示，Chrome浏览器窗口如图2所示。
iH5基础教程：HTML5编辑器介绍
iH5基础教程：HTML5编辑器介绍一、公司介绍iH5是国际领先的HTML5制作工具和服务平台，你可以使用iH5轻松制作具有丰富动态效果的HTML5网页应用，可视化操作界面，无需编程基础。
二、网站结构1、注册登录页面填写信息注册账号或点击右上角进入登录页面。
2、ih5首页（1）作品推荐点击封面可查看作品，点击左上角可收藏此作品，点击右上角可获得作品二维码与作品链接，点击关注可关注作品的作者。
查看作品时，点击右上角可全屏观看，还可以关注作者或联系作者。
关注的设计师会出现在首页目录系统消息之下。
点击精品模板，可以按分类查看模板，点击下载按钮可下载模板，下载后将保存到您的个人主页下面，下载付费模板需充值V币，模板下载后不能另存为或再次发布成为模板。
（2）学习使用点击首页右下角学习使用按钮，可进入教学页面。
按基础篇、初级篇、中级篇、高级篇查看教学视频，也可以功能/应用详解。
（3）新建案例点击右下角新建案例或点击首页左上角帐户名进入个人页面，可以创建新的案例，进入编辑器页面。
（4）账户信息点击首页右上角帐户名可进入个人页面，查看作品，点击点击首页右上角帐户名旁边的下拉箭头可查看账户信息、充值V币和付费服务。
点击组件服务的升级按钮，可查看付费服务详情。
（5）编辑与发布逻辑作品编辑以及发布功能新增“编辑中”和“已发布”模块。
新建作品并保存后，可以在“编辑中”模块中对作品进行修改，只有在编辑页面中点击“发布”按钮后，作品才会被保存在“已发布”模块中，同时也只有发布后的作品才能获取分享链接与二维码。
值得注意的一点是，发布后的作品是无法取消发布和修改的，但“编辑中”模块里会有一个与之相对应的作品，只要对其进行修改并发布就可以更新发布后的作品啦（但如果仅仅保存，“发布后”中作品的内容的是不会被更替的）三、iH5的作用四、编辑器介绍1、菜单栏（1）舞台放缩：“放缩”用于放缩舞台的显示大小。
显示比率分别可以将舞台缩放到50%、60%、70%、80%、90%、100%、110%、120%，当舞台大于页面可现实范，围时，可以缩小舞台显示大小，查看整体效果。
HTML（超文本标记语言）是制作网页的基础HTML标记是HTML...
第1章HTML基础HTML(超文本标记语言)是制作网页的基础。
HTML标记是HTML的核心与基础，用于修饰、设置HTML文件的内容及格式。
一个HTML文件中包含了所有将显示在网页上的文字信息。
其中也包括对浏览器的一些指示，如文字应放置在何处，显示模式如何等。
如果还有一些图片、动画、声音或是任何其他形式的资源，HTML文件也会告诉浏览器到哪里去查找它们，以及它们将放置在网页中的什么位置。
教学目标通过对本章的学习，读者应了解和掌握HTML的各种标记和语法，并能够使用HTML 设计简单的静态网页。
教学重点与难点●使用HTML设计静态网页●编辑网页文本格式●创建超链接●使用表格●使用列表1.1 网页基础知识Internet是从Interconnected Networks延伸而来的，是跨国界的网络。
Internet把世界各地数以千万计的计算机和传输线路连接在一起构成一个网络。
通过它可以交换信息、共享资源，并以此为基础实现各种计算机通信应用项目。
在Internet中，网页是它的重要组成部分，本节首先介绍一些与网页相关的名词和概念。
1.1.1 万维网——WWWWWW(World Wide Web)即环球信息网，也可以称为Web，中文名字为“万维网”。
用户在使用浏览器来访问Web的过程中，无须关心一些技术性的细节即可得到丰富的信息资料。
WWW 是Internet上发展最快和目前使用最广泛的一种服务。
ASP动态网站开发教程• 2 •简单的说，WWW是漫游Internet网的工具，它把Internet上不同地点的相关信息聚集起来，通过WWW浏览器(比如IE，Internet Explorer)检索，无论用户所需的信息在什么地方，只要浏览器为用户检索到之后，就可以将这些信息(文字、图片、动画、声音等)“提取”到用户的计算机屏幕上。
1.1.2 超文本传输协议——HTTPHTTP(HyperText Transfer Protocol)即超文本传输协议，它是WWW服务器上使用的最主要协议。
1号店案例分析
目录1号店案例分析 (1)一、1号店网站的背景分析 (1)1、1号店简介 (1)2、创始人简介 (2)3、1号店企业文化 (2)4、1号店发展历程 (2)5、1号店企业现状 (3)6、1号店特征 (3)二、1号店网站策略分析 (4)1、战略目标 (4)2、目标用户 (5)3、产品或服务 (5)三、1号店网站商务模式分析 (6)1、盈利模式 (6)2、核心竞争力 (6)四、1号店网站网络营销分析 (7)1、低价竞争 (7)2、市场推广 (8)3、会员营销 (8)4、多种促销手段 (8)5、物流配送 (8)1号店案例分析一、1号店网站的背景分析1、1号店简介1号店，电子商务型网站，2008年7月11日，“1号店”正式上线，开创了中国电子商务行业“网上超市”的先河。
公司独立研发出多套具有国际领先水平的电子商务管理系统并拥有多项专利和软件著作权，并在系统平台、采购、仓储、配送、和客户关系管理等方面大力投入，打造自身的核心竞争力。
以确保高质量的商品能以低成本、快速度、高效率的流通，让顾客充分享受全新的生活方式和实惠方便的购物体验。
2、创始人简介2.1于刚博士，现任1号店董事长，创始人之一：曾任Dell全球副总裁，主管Dell全球在亚太地区的USD$180亿采购和物流业务；曾任亚马逊Amazon全球副总裁，管理其全球供应链包括配送、采购、库存和库容；曾在美国创立科莱高科技公司，任总裁和董事长，2002年公司出售给埃森哲;曾任美国德州大学奥斯汀分校迈康管理学院讲席教授，物流研究中心主任，不确定情况下决策研究中心主任；2.2刘峻岭先生，现任1号店CEO，创始人之一：曾任戴尔Dell公司全球副总裁,戴尔Dell中国大陆及香港地区总裁，管理20亿美元的业务规模。
3、1号店企业文化1号店企业文化很简单，称之为“八字箴言”：诚信INTEGRITY, 顾客CUSTOMER,执行EXECUTION和创新INNOVATION。
项目案例-1号店首页
20/32
完成时间：10分钟
制作焦点轮播图和左右侧模块4-4
功能测试
页面排版、布局合理，页面与效果图一致 焦点轮播图和左右侧模块效果美观
21/32
共性问题集中讲解
常见问题及解决办法 代码规范问题 调试技巧
共性问题集中讲解
22/32
制作商品展示区3-1
食品饮料模块
使用标题标签制作标题及图片说明 使用定位制作按钮 图片与文本的排版设计
共性问题集中讲解
17/32
制作焦点轮播图和左右侧模块4-1
使用制作菜单横向导航 使用列表制作所有商分分类竖向导航
18/32
完成时间：15分钟
制作焦点轮播图和左右侧模块4-2
制作焦点轮换图 使用定位和列表相结合的方式实现
19/32
完成时间：10分钟
制作焦点轮播图和左右侧模块4-3
使用列表实现【社区】内容 使用表单实现话费快充 使用高级选择器实现CSS样式
10/32
网页整体布局3-2
需求说明
设置页面整体背景颜色、页面body、列表去掉内外边距、字体
样式等通用样式
LOGO和搜索部分、菜单导航、食品饮料模块、个护厨卫模块几
个模块的宽度一致，居中对齐等
设置通用的样式等
统一设置padding和margin值为0，解决由于padding和
margin带来的兼容性问题
8/32
开发计划
网页整体布局 制作网站导航 制作焦点轮播图和左右侧模块 制作商品展示区：食品饮料、个护厨卫 制作网站版权
完成时间：10分钟 完成时间：20分钟 完成时间：35分钟 完成时间：30分钟 完成时间：10分钟
9/32
整体布局页面3-1
HTML精品教程资料：05-项目案例：制作1号店网站
35/38
问题及作业
集中问题&课后作业
36/38
16/38
用例1：网站公用部分3-3 功能测试 页面按照效果图完成
鼠标移至超链接上时显示效果正确 鼠标移至“正品保障”等图标上时显示动画正确 字体颜色、背景图标等设置无误
17/38
共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧
共性问题集中讲解
18/38
用例2：网站首页2-1
移入时设置放大动画[25分钟]
讲解需求说明
19/38
用例2：网站首页2-2 功能测试 页面排版、布局合理，页面与效果图一致
超链接效果设置正确 动画显示正确 字体颜色、背景颜色等整体美观
20/38
共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧
共性问题集中讲解
21/38
用例3：搜索列表页2-1
4/38
问题分析2：网站文件结构
根目录
css
images
goods
home
index
login
register
5/38
问题分析3：网页布局 整体布局
页面整体为上中下布局 部分页面中间又分为左右布局 使用DIV来布局网页结构，整体页面布局使用标准文档
流布局，局部布局使用浮动定位
6/38
难点分析1：局部布局
素并添加背景图
讲解需求说明
28/38
用例5：制作登录页2-2 功能测试 页面排版、布局合理，页面与效果图一致
鼠标移入“更多合作网站账号登录”的小图标显示有 背景的图标显示正确
表单初步验证属性使用正确 整体页面效果美观
29/38
共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧
问题及作业
集中问题&课后作业
36/38
16/38
用例1：网站公用部分3-3 功能测试 页面按照效果图完成
鼠标移至超链接上时显示效果正确 鼠标移至“正品保障”等图标上时显示动画正确 字体颜色、背景图标等设置无误
17/38
共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧
共性问题集中讲解
18/38
用例2：网站首页2-1
移入时设置放大动画[25分钟]
讲解需求说明
19/38
用例2：网站首页2-2 功能测试 页面排版、布局合理，页面与效果图一致
超链接效果设置正确 动画显示正确 字体颜色、背景颜色等整体美观
20/38
共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧
共性问题集中讲解
21/38
用例3：搜索列表页2-1
4/38
问题分析2：网站文件结构
根目录
css
images
goods
home
index
login
register
5/38
问题分析3：网页布局 整体布局
页面整体为上中下布局 部分页面中间又分为左右布局 使用DIV来布局网页结构，整体页面布局使用标准文档
流布局，局部布局使用浮动定位
6/38
难点分析1：局部布局
素并添加背景图
讲解需求说明
28/38
用例5：制作登录页2-2 功能测试 页面排版、布局合理，页面与效果图一致
鼠标移入“更多合作网站账号登录”的小图标显示有 背景的图标显示正确
表单初步验证属性使用正确 整体页面效果美观
29/38
共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧
day20190904一号店网页HTML+CSS
day20190904⼀号店⽹页HTML+CSS1.知识要理⼀理。
梳理。
当天讲了什么内容？当天我学习到了什么内容？看懂。
所有的学习型从模仿开始。
1.看懂代码，看懂思路，学思路，多问⾃⼰问题，为什么要这么写？下⼀步为什么要这么写？因果。
2.多练多敲。
熟能⽣巧。
勤能补拙。
2.只有认真专⼼对⼀件事情付出百分之两百的耐⼼才能看起来毫不费⼒。
昨天看到⼤神⾹⼀直在研究琢磨看代码。
所有的收获都是努⼒应得的。
⼀份耕耘，⼀份收获。
坚定。
笃定。
相信⾃⼰，不卑不亢，不骄不躁，遇见困难，敢于向别⼈求助。
3.导⼊的图⽚是服务器端的图⽚。
⼀号店⽹页：pagehome.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>1号店⾸页</title> <link rel="stylesheet" href="css/homePage.css" /> </head> <body> <div id="con"> <header></header> <section> <div class="gg"> <ul> <li>中秋送礼图鉴</li> <li>营养早餐</li> <li>宠物⾷品</li> <li>垃圾分类</li> </ul> </div> <div class="div_mid"> <!--新⼈通道--> <div class="new_person_channel"> <a href="https:///yhd/active/33KCN39KAit5hcQDiaoHaa8L39aX/index.html" target="_blank"> <imgsrc="///img/jfs/t1/32471/30/11988/36501/5cb6a33fEbce59d62/1a19815975696690.png" alt=""> </a> </div> <!--超级单品--> <!--注释 div>ul>li*10>a>div*2--> <div class="superSingle"> <ul> <li> <a href=""> <div></div> <div></div> </a> </li> <li> <a href="///1-213582735" target="_blank" title="⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机" class="superSingle_a" > <div class="single_top"> <div class="s_bz"></div> <img class="single_top_img"src="https:///n12/s450x450_jfs/t1/38380/33/14819/163868/5d5cfd47Ead7dbce4/ba321cf10e37f9ee.jpg" alt=""> </div> <div class="single_bottom"> <div class="s_title">⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机</div> <div class="s_bar"> </div> <div class="s_con"> <div class="s_num"> <span class="s_num_unit">￥</span> <span class="s_num_act">718</span> <span class="s_num_underline"> <span class="s_num_unit">￥</span> <span class="s_num_line">798</span> </span> </div> </div> </div> </a> </li><li><a href="///1-213582735" target="_blank"title="⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机"class="superSingle_a" ><div class="single_top"><div class="s_bz"></div><img class="single_top_img"src="https:///n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt=""> </div><div class="single_bottom"><div class="s_title">⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机</div><div class="s_bar"><div class="s_progress" style="width:14% "></div></div><div class="s_con"><div class="s_num"><span class="s_num_unit">￥</span><span class="s_num_act">718</span><span class="s_num_underline"><span class="s_num_unit">￥</span><span class="s_num_line">798</span></span></div></div></div></a></li><li><a href="///1-213582735" target="_blank"title="⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机"class="superSingle_a" ><div class="single_top"><div class="s_bz"></div><img class="single_top_img"src="https:///n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt=""> </div><div class="single_bottom"><div class="s_title">⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机</div><div class="s_bar"><div class="s_progress" style="width:14% "></div></div><div class="s_con"><div class="s_num"><span class="s_num_unit">￥</span><span class="s_num_act">718</span><span class="s_num_underline"><span class="s_num_unit">￥</span></span></div></div></div></a></li><li><a href="///1-213582735" target="_blank"title="⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机"class="superSingle_a" ><div class="single_top"><div class="s_bz"></div><img class="single_top_img"src="https:///n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt=""> </div><div class="single_bottom"><div class="s_title">⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机</div><div class="s_bar"><div class="s_progress" style="width:14% "></div></div><div class="s_con"><div class="s_num"><span class="s_num_unit">￥</span><span class="s_num_act">718</span><span class="s_num_underline"><span class="s_num_unit">￥</span><span class="s_num_line">798</span></span></div></div></div></a></li><li><a href="///1-213582735" target="_blank"title="⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机"class="superSingle_a" ><div class="single_top"><div class="s_bz"></div><img class="single_top_img"src="https:///n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt=""> </div><div class="single_bottom"><div class="s_title">⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机</div><div class="s_bar"><div class="s_progress" style="width:14% "></div></div><div class="s_con"><div class="s_num"><span class="s_num_unit">￥</span><span class="s_num_act">718</span><span class="s_num_underline"><span class="s_num_unit">￥</span><span class="s_num_line">798</span></span></div></div></div></a></li><li>title="⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机"class="superSingle_a" ><div class="single_top"><div class="s_bz"></div><img class="single_top_img"src="https:///n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt=""> </div><div class="single_bottom"><div class="s_title">⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机</div><div class="s_bar"><div class="s_progress" style="width:14% "></div></div><div class="s_con"><div class="s_num"><span class="s_num_unit">￥</span><span class="s_num_act">718</span><span class="s_num_underline"><span class="s_num_unit">￥</span><span class="s_num_line">798</span></span></div></div></div></a></li><li><a href="///1-213582735" target="_blank"title="⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机"class="superSingle_a" ><div class="single_top"><div class="s_bz"></div><img class="single_top_img"src="https:///n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt=""> </div><div class="single_bottom"><div class="s_title">⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机</div><div class="s_bar"><div class="s_progress" style="width:14% "></div></div><div class="s_con"><div class="s_num"><span class="s_num_unit">￥</span><span class="s_num_act">718</span><span class="s_num_underline"><span class="s_num_unit">￥</span><span class="s_num_line">798</span></span></div></div></div></a></li><li><a href="///1-213582735" target="_blank"title="⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机"class="superSingle_a" ><div class="single_top"><div class="s_bz"></div><img class="single_top_img"src="https:///n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt=""><div class="single_bottom"><div class="s_title">⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机</div><div class="s_bar"><div class="s_progress" style="width:14% "></div></div><div class="s_con"><div class="s_num"><span class="s_num_unit">￥</span><span class="s_num_act">718</span><span class="s_num_underline"><span class="s_num_unit">￥</span><span class="s_num_line">798</span></span></div></div></div></a></li><li><a href="///1-213582735" target="_blank"title="⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机"class="superSingle_a" ><div class="single_top"><div class="s_bz"></div><img class="single_top_img"src="https:///n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt=""> </div><div class="single_bottom"><div class="s_title">⾂源LK-80-12DC 电动抽油泵12V24V⼤功率550W柴油泵⼤流量⾃吸泵加油机</div><div class="s_bar"><div class="s_progress" style="width:14% "></div></div><div class="s_con"><div class="s_num"><span class="s_num_unit">￥</span><span class="s_num_act">718</span><span class="s_num_underline"><span class="s_num_unit">￥</span><span class="s_num_line">798</span></span></div></div></div></a></li></ul></div></div><!-- 懂你想要 --><!--交集选择器class="con_width mod_you_like understand_want wrap mod_lift_floor"--> <div class="con_width mod_you_like understand_want wrap mod_lift_floor"> <div class="under_log"> <img src="https:///statics/index/images/dongni.png" alt="" > <p class="u_log_font">可能⽐你⾃⼰更懂你</p> </div><div class="you_like_list"><li><div class="you_like_list_li_top"><img src="https:///n6/s250x250_jfs/t1/31476/39/13580/157238/5cbbcf88E649d97b0/b4b79ebe569b79d4.jpg" /></div><div class="you_like_list_li_bottom"><p class="single_tit text_limit_limp">【品牌特惠】帽⼦男夏天户外防晒透⽓凉帽⽹帽遮阳帽男⼠太阳帽鸭⾆帽棒球帽潮⽩⾊ 87款⽹帽可调节</p></div><div class="you_like_list hidden"></div></li><li></li><li></li><li></li><li></li><li></li></ul></div></div></section><footer><!--div#foot>div.div_*3--><div id="foot"><div class="div_foot_top"><!-- a[href='javascript:;']*4>img+b+span [额外添加span标签前] --><!-- a[href='javascript:;']*4>img+span.b_span>(b+span) [额外添加span标签后] --><a href="javascript:;"><img src="img/1.jpg" alt="" /><span class="b_span"><b>正品保障</b><span>正品⾏货放⼼选购</span></span></a><a href="javascript:;"><img src="img/2.jpg" alt="" /><span class="b_span"><b>满86包邮</b><span>满86元免运费</span></span></a><a href="javascript:;"><img src="img/3.jpg" alt="" /><span class="b_span"><b>售后⽆忧</b><span>7天⽆理由退货</span></span></a><a href="javascript:;"><img src="img/4.jpg" alt="" /><span class="b_span"><b>准时送达</b><span>收货时间由你做主</span></span></a></div><div class="div_foot_mid"><!-- div.div_foot_mid_*2 --><div class="div_foot_mid_left"><!--列表信息--><!-- dl*4>dt+dd*5>a --><dl><dt>新⼿⼊门</dt><dd><a href="">购物流程 </a></dd><dd><a href="">订单查询 </a></dd><dd><a href="">服务协议及隐私说明 </a></dd><dd><a href="">⽹站地图 </a></dd></dl><dl><dt>⽀付⽅式</dt><dd><a href="">货到付款 </a></dd><dd><a href="">⽹上⽀付 </a></dd><dd><a href="">礼品卡⽀付</a></dd><dd><a href="">其它⽀付 </a></dd></dl><dl><dt> 配送服务</dt><dd><a href="">配送进度查询 </a></dd><dd><a href="">商品验货与签收</a></dd></dl><dl><dt> 相关规则</dt><dd><a href="">平台规则 </a></dd><dd><a href="">退换货政策</a></dd><dd><a href="">发票制度 </a></dd><dd><a href="">帮助中⼼ </a></dd></dl></div><div class="div_foot_mid_right"><!--⼆维码--><!--div*2>p+img--><div><p>APP更优惠</p><img src="https:///front-homepage/index/images/qryhd.png?1=1" alt="APP更优惠" /></div><div><p>加微信查订单</p><img src="https:///img/jfs/t15403/130/239695202/5772/891e9fb1/5a2798bbN479da3df.jpg" alt="加微信查订单" /> </div></div></div><div class="div_foot_bottom"><p><a href=""> 沪ICP备16050468号 </a>|<a href=""> 经营证照 </a>|<a href=""> 互联⽹药品信息服务资格证(沪)-经营性-2017-0006 </a>|<a href=""> 违法和不良信息举报电话：0527-88100253 </a>|<a href=""> 沪B2-20170039 </a>|<a href=""> 沪公⽹安备 31010502002939号 </a>|<a href=""> 友情链接 </a>|<a href=""> 出版物经营许可证 </a>|<a href=""> 增值电信业务经营许可证 </a></p><p> Copyright© 1号店⽹上超市 2007-2019，All Rights Reserved</p><p><img src="img/CgQCr1PQy1CAF7vaAABDexsiEYM24800.jpg" alt="" /><img src="img/CgQCrlPYTqCASlHXAAAd82JE0eA31000.png" alt="" /><img src="img/ChEi1FYXHcOAVk_WAAAL2r2-yfo10200.jpg" alt="" /><img src="img/ChEi2lh171KAJrGlAAALl_uZt0E75600.jpg" alt="" /></p></div></div></footer></div></body></html>margin: 0px auto;padding: 0px;}/*background-color: #F5F5F5;*/#con {width: 1366px;overflow: hidden;background-color: #F5F5F5;}header {width: 1200px;height: 100px;background: lightblue;}/*section⽹页主体中的轮播⼴告*/.gg {width: 1366px;height: 300px;background: no-repeat url("///img/jfs/t1/77276/15/8655/96360/5d6736baEa757f6f4/f16793fd23b7aaaa.jpg"); background-size: contain;/*⾃适应图⽚⼤⼩*/margin: auto;/*给⽗级容器定义相对定位元素*/position: relative;}.gg ul {list-style: none;display: flex;color: #666;width: 500px;/*给⼦元素定位绝对定位元素*/position: absolute;bottom: -8px;left: 390px;}.gg li {width: 100px;height: 30px;background: white;margin: 10px;text-align: center;line-height: 30px;font-size: 12px;}.gg li:hover {cursor: pointer;background: #666;color: white;}/*.div_mid*/.div_mid{width: 1024px;}/*超级单品样式*/section .superSingle{width: 1070px;height: 370px;background: #EE3A42;margin-top: 10px;}section .superSingle ul{display: flex; /* 将ul⽗级容器下所有的⼦元素放置⼀⾏显⽰,⼦元素的宽度会压缩 */section .superSingle li{list-style: none;width: 210px;height: 216px;background: white;margin-top: 5px;}/*去除超级单品的第⼀个li标签的背景颜⾊*/section .superSingle li:first-of-type{background-color: transparent; /*设置背景颜⾊为透明⾊*/}section .superSingle .single_top img{width: 110px;height: 110px;margin-left: 50px;}section .superSingle li a{text-decoration: none;font-size: 12px;color: #666;}section .superSingle .single_bottom .s_title{/* 多余⽂本省略... */width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.s_con{width: 120px;}section .superSingle li:hover{/*变形_缩放*/transform: scale(1.05);/*transform: translateX(1px); */ /*变形_平移*//*设置过渡效果*//*transition: all linear 1s; */}/*底部 */footer{margin-top: 90px;}footer .div_foot_top{width: 1100px;}footer .div_foot_top a{display: inline-block;text-decoration: none;width: 250px;margin-left: 20px;}footer .div_foot_top a .b_span{/*display: block;*/ /*b标签⾏内元素更改成块级元素*/vertical-align: top; /* vertical-align 垂直居中,只对⾏内元素有效 */footer .div_foot_top a span{font-size: 14px;color: #666666;display: inline-block;width: 120px;}footer .div_foot_top a .b_span b{font-weight: bold;font-size: 16px;color: #333;display: inline-block;margin-top: 12px;}footer .div_foot_top img{/*设置过渡效果*/transition: all linear 1s;}footer .div_foot_top img:hover{/*变形_旋转 */transform: rotate(360deg);}footer .div_foot_mid {display: flex;width: 1200px;/*设置边框头部样式*/border-top: 1px solid #999;padding-top: 10px;margin-top: 10px;}footer .div_foot_mid .div_foot_mid_left{width: 700px;display: flex; /* 给当前元素的⼦元素设置和浮动⼀样的效果,但该元素还在标准⽂档流中 */ }footer .div_foot_mid .div_foot_mid_left a{text-decoration: none;font-size: 12px;color: #666;}footer .div_foot_mid .div_foot_mid_left a:hover{color: orangered;}footer .div_foot_mid .div_foot_mid_left dt{height: 32px;padding: 0 8px;font-size: 14px;color: #666;line-height: 32px;overflow: hidden;font-family: "Microsoft YaHei";color: #666;font-weight: bold;}footer .div_foot_mid .div_foot_mid_left dd{padding: 0 8px;}footer .div_foot_mid .div_foot_mid_right{width: 300px;}footer .div_foot_mid .div_foot_mid_right p{ font-size: 16px;font-weight: bold;padding: 5px 0px;color: #666666;}footer .div_foot_bottom{text-align: center;}footer .div_foot_bottom p:nth-of-type(1) a{text-decoration: none;color: #666666;font-size: 12px;}/*后代选择器 */footer .div_foot_bottom p:nth-of-type(1) a:hover{ color: red;}footer .div_foot_bottom p:nth-of-type(2){ padding: 10px;font-size: 14px;color: #333;}/*⽹页 section*/section .under_log{text-align: center;margin-top: 90px;}section .under_log img{width: 390px;height: 65px;}section .under_log .u_log_font{width: 155px;height: 22px;font-family: PingFangSC-Regular;font-size: 16px;color: #999;letter-spacing: 1px; /*字体间隙*/}/*background: pink;height: 500px;* */section .you_like_list{background: pink;height: 500px;width: 1150px;}section .you_like_list ul{display: flex;}section .you_like_list li{list-style: none;width: 168px;height: 236px;background-color: white;}section .you_like_list li img{width: 150px;height: 136px;margin: 9px;}/*设置交集选择器样式的写法 */.single_tit.text_limit_limp{width: 150px;height: 20px;margin:2px 9px;font-size:14px ;color: #333333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.you_like_list_li_bottom{/* background: red;*/height: 78px;}.you_like_list.hidden{width: 168px;height: 78px;background: white;display: none;}section .you_like_list li:hover{ border: 1px solid red;}section .you_like_list li:hover .hidden{ transform: translateY(-100px);/*transition: all linear 1s;*/ display: block;}。
静态HTML网页制作
第五章静态HTML网页制作5.1 HTML文件编辑环境介绍5.1.1常用名词在学习网页制作之前，我们有必要先了解一些常用的概念。
（1）WWW万维网“万维网”（Word Wide Web）简称WWW，这是号称除了报纸、广播、电视外的第四大传播媒体。
（2）Browser浏览器要观看万维网上的内容，一个必要条件是要有一个万维网浏览器。
目前常用的浏览器是微软（Microsoft）公司的Internet Explorer（简称IE），网景公司（Netscape）的Communicator （通讯家），还有Opera等。
（3）WebPage网页当你浏览一个网站时，网站中的每一页都称为一个“网页”。
网页是用来显示各种数据与信息的，它由文字、图片、声音、动画等组件组成。
每个网页都是一个文件，我们通过浏览器可以查看其内容。
（4）HomePage主页当你上网浏览某个网站时，我们进入网站最先看到的网页称为“主页”，也叫作“首页”，这有点像自己家的门面一样。
一般的网站管理者为了吸引上站者的眼球，都将主页做得很炫、很漂亮。
（5）Web Site网站“网站”就是用来存放网页文件的地方，通过浏览器便可以浏览网站上面的网页。
（6）Hypertext超文本“超文本”文件本身是一个文本文件，但其内容和一般文本文件又不一样，除了有一般信息内容之外，还有一些加注性描述用来产生特殊效果，在显示文件时，浏览器先根据加注性描述对信息内容进行处理，最后才把结果展示给浏览者。
这种文件当然也可以用一般的文字编辑软件打开，但却看不到加注性描述所产生的特殊效果，因为一般的文字编辑软件不能像浏览器那样根据加注性描述对信息内容进行处理。
（7）Hyperlink超级链接万维网能风行全球当然有其原因：美丽而动态的画面，方便而简易的使用界面，精彩而富于变化的内容，这些都是它的引人之处；但除了这些之外，它还有一个成功的利器，即它的无限的超级链接能力。
譬如它具有网站内部网页间彼此连接的能力，我们称为“内部超级链接”，还可以连接到其他网站，我们称之为“外部超级链接”。
淘宝店铺装修教程之HTML基础代码介绍
淘宝店铺装修教程之HTML基础代码介绍一、HTML基础代码介绍每一个动物、每一个生物都有自己的语言，而计算机也不例外，同样有自己的语言，在计算机繁杂的编程语言中，最简单最容易理解的就属HTML语言，在淘宝店铺里所有的店铺装修无疑都是靠这样一种语言来完成的（当然同样也要靠图片设计工具），虽然现在有很多的辅助工具来帮助我们进行直观的设计，但学习HTML还是对店铺装修有很大帮助的，HTML为超文本连接，他是目前网络上应用最为广泛最为基础的一种描述性语言，目前进行对网页进行编辑的最好的工具为“Macromedia Dreamweaver 8”，利用这款软件我们可以进行非常直观的将网页进行界面式设计，但有些时候在调试代码或者修改一小段代码的时候，我们则必须懂得这些代码的意思，下面我就来讲解一下HTML的一些基础。
“因为是作为店铺装修用所以我只教对店铺装修有用的代码”例1、<html><head><title>淘宝网</title></head><body><p>你好，我是淘宝网的忠实店家</p></body></html>例子解析：以上是一个完整的基础网页代码，所有的编写必须遵守以上规则，网页必须是以<html>开头以</html>结尾<head></head>之间是文本头信息，可以显示在网页的浏览器最顶端的标题栏里，例子中网页标题栏会显示”淘宝网”<body></body>是最主要的部分，绝大部分的编辑都要在这里面进行，是网页的主体。
<p></p>是文本标签，在网页中会显示“你好，我是淘宝网的忠实店家”大部分编辑必须遵循<>开头</>结尾。
二、HTML在淘宝中的应用在淘宝的编辑器里，过滤了很多功能，如”javascripts”的脚本语言，这是因为怕有一些不法店主利用这个语言来编写病毒或进行网页跳转等等，但我们还是可以有很多功能可用，下面我逐一介绍主要功能。
一号店网网页设计分析报告
一号店网页设计分析报告一、网站风格1.商城色调处理一号店网站的色彩红色为主，产生热情、活力的感觉，充满欢乐的气氛。
这点我们俺皆团可以借鉴。
2.商城LOGO一号店的LOGO简约大方，右侧有最热的营销商品。
此点俺皆团可以借鉴，右侧留出后期更改的空间。
3.广告条和搜索栏一号店利用五周年的有利时间优势，大力做广告，相比，俺皆团有点单调，我们可以借鉴此点，加大宣传力度，提升我们的品牌价值。
一号店俺皆团二、进入网站1. 开始购物的页面选择城市，单击“开始购物”按钮，进入一号店主页面。
对于俺皆团这样的本土团购网站，此步可省。
2.登陆界面点击登陆，出现如下界面，此界面有多账号快捷登陆显示。
俺皆团可借鉴此项功能，方便用户，免注册。
二、商城首页导航（“口”字型布局）导航栏各要素设计的好坏，决定着用户是否能方便使用网站。
导航要素应该设计的直接而明确，并最大限度为用户的方便考虑。
一号店设计的优点在于：分类细致，品种齐全。
功能强大，便利群众。
俺皆团的界面设计需建立在团队交互研究探讨的基础上，不断查缺补漏，完善功能。
一号商城手机通讯、数码电器购物车新手入门一号团食品饮料、酒水、果蔬登陆我的一号店配送方式名品特卖进口食品、进口牛奶一号专享支付方式电器城美容化妆、个人护理一号团售后方式礼品卡母婴用品、玩具品牌旗舰自助服务服装馆厕所清洁、洗涤剂公告帮助信息药品商城家居家纺、锅具餐具新闻满百包邮生活电器、汽车生活友情推荐正品保证电脑外设、办公用品售后无忧1.上方导航俺皆团的上方导航可以参照一店，具体顺序需要讨论决定。
1.1 首页轮播焦点图，加大宣传力度，收取商家广告费，可借鉴。
1.2一号商城/2/点击此链接进入新的页面一号商城。
一号店与一号商城的区别类似于淘宝网与淘宝商城。
淘宝网的C2C店铺是个人对个人的，而淘宝商城的B2C店铺(也就是商城)是以公司的形式注册的，在淘宝商城开店的店主，每卖一件东西都必须向淘宝支付佣金。
因此商城不仅可以凭借各大品牌的集聚来扩大自己的知名度，而且也是公司收入的重要手段。
HTML+CSS+JavaScript项目3 “网上花店”专题页制作_0519_lianrui
【任务3-1】知识点讲解
2、引入CSS样式表
（3）链入式 链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表 文件中，通过<link />标记将外部样式表文件链接到HTML文档中，其基 本语法格式如下：
该语法中，<link />标记需要放在<head>头部标记中，并且必须指定 <link /> href="CSS 文件的路径" type="text/css" rel="stylesheet" /> <link 标记的三个属性，具体如下：
项目3网上花店专题页制作css选择器css高级特性css核心基础css文本相关样式html任务任务31css核心基础任务任务32css控制文本样式任务任务33css高级特性任务任务34制作网上花店专题页?目录知识引入需求分析使用html修饰页面时存在很大的局限和不足例如维护困难不利于代码的阅读等
项目3 “网上花店”专题页制作
*{ margin: 0; padding: 0; } /* 定义外边距*/ /* 定义内边距*/
【任务3-2】CSS控制文本样式
知识引入
学习HTML时，可以使用文本样式标记 及其属性控制文本的显示样式，但是这种方 式繁琐且不利于代码的共享和移植。为此， CSS提供了相应的文本样式属性。使用CSS 可以更轻松方便的控制文本样式，下面将对 常用的文本样式属性进行详细讲解。
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
【任务3-1】知识点讲解
3、CSS基础选择器
（4）通配符选择器 通配符选择器用“*”号表示，他是所有选择器中作用范围最广的， 能匹配页面中所有的元素。其基本语法格式如下： 例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML 标记的默认边距。 *{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2/38
任务描述 制作1号店网站
首页 搜索列表页 商品详情页 登录页 注册页
3/38
问题分析1：整体开发思路
网页制作步骤
制作网站公用部分（网站导航和版权部分） 制作1号店首页（index.html） 制作搜索列表页（searchList.html） 制作商品详情页（ detail.html ） 制作登录页（ loginpage.html） 制作注册页（ registerpage.html）
移入时设置放大动画[25分钟]
}
11/38
开发计划3-1
用例1：制作网站公用部分
网站导航
完成时间：30分钟
网站版权
完成时间：20分钟
用例2：制作网站首页
全部商品分类
完成时间：20分钟
轮播图
完成时间：20分钟
快讯
完成时间：15分钟
热门产品
完成时间：20分钟
进口生鲜
完成时间：25分钟
12/38
开发计划3-2
用例3：制作搜索列表页
使用过渡给“天天低价”列表项添加动画
讲解需求说明
15/38
用例1：网站公用部分3-2
分析 使用无序列表制作顶部导航和主导航菜单 使用过渡给“天天低价”列表项添加动画
提示
<div class="b_btm_bg b_btm_c">
<ul class="b_btm">
<li>
<a><img src="images/b1.png" width="62"
项目案例： 制作1号店网站
本课目标
学完本次课程后，你能够：
会使用float属性进行多列的网页布局 会使用position属性定位网页元素 会使用字体样式和文本样式排版网页文本 会使用背景属性设置网页元素的背景 会使用盒子模型属性设置网页元素 会使用无序列表制作导航、列表信息 会使用CSS3属性制作网页动画效果
全部品牌
完成时间：30分钟
浏览历史
完成时间：20分钟
商品列表
完成时间：30分钟
用例4：制作商品详情页
全部商品分类
完成时间：30分钟
用户还喜欢
完成时间：15分钟
推荐搭配
完成时间：15分钟
商品属性
完成时间：50分钟
13/38
开发计划3-3
用例5：制作登录页 用例6：制作注册页
完成时间：20分钟 完成时间：20分钟
使用无序列表布局网页的局部结构
常用于导航菜单或列表 主导航菜单
商品列表
新闻列表
ቤተ መጻሕፍቲ ባይዱ
7/38
难点分析2：局部布局 使用定义列表进行局部布局
常用于二级菜单列表、图文混排、标题与解释性内容相 混排的情况
<dt>标签 <dd>标签
8/38
难点分析3：语义化表单
制作表单并验证
登录、注册页面
<form action="#"> <div class="tableItem"> <span class="userPhone">手机号</span> <input type="text" required placeholder="手机号"/> </div> <div class="cf"> <div class="tableItem onlyItem fl"> <span class="userPhone">手机号</span> <input class="" type="text" required placeholder="手机号"/> </div> <a class="tableText fr" href="#">获取验证码</a> </div> <div class="tableItem"> <span class="setPass">设置密码</span> <input type="password" required placeholder="密码"/> </div>
9/38
难点分析4：页面居中显示 使用margin属性设置网页在浏览器中居中显示
#wrap { width:982px; margin:0 auto;
}
10/38
难点分析5：清除浮动防止父元素边框塌陷 使用CSS来设置外层<div>去除浮动产生的影响
.clear:after{ content: ''; display: block; clear: both;
练习 需求说明
网页主体内容最上方是一个商品列表[20分钟]、焦点轮播图[15分 钟]、快讯列表[20分钟]等组成的三栏布局，使用浮动让它们排列 在一行
使用<div>和无序列表排版热门商品模块，使用float属性、定位 属性、字体属性、文本属性等美化、定义热门商品内容[20分钟]
横条“满199减100”广告使用图片布局 “进口•生鲜”模块使用<div>和无序列表布局，里面的图片鼠标
height="62"/></a>
<div><h2>正品保障</h2>正品行货 放心购买</div>
</li>
…
.b_btm li img{ transition: all 3s;}
.b_btm li img:hover{ transform: rotate(360deg) scale(1.2); }
4/38
问题分析2：网站文件结构
根目录
css
images
goods
home
index
login
register
5/38
问题分析3：网页布局 整体布局
页面整体为上中下布局 部分页面中间又分为左右布局 使用DIV来布局网页结构，整体页面布局使用标准文档
流布局，局部布局使用浮动定位
6/38
难点分析1：局部布局
14/38
用例1：网站公用部分3-1
指导
需求说明
使用无序列表制作顶部导航，鼠标移动到“客户服务”上时弹出下拉 列表框，使用文字、文本、背景、浮动等属性定位、美化网页元素
使用search类型的表单元素来布局网页搜索框
使用无序列表制作“天天低价”列表的内容，并且要求鼠标移入“天 天低价”图片时，图片旋转360°，同时放大1.2倍
16/38
用例1：网站公用部分3-3 功能测试 页面按照效果图完成
鼠标移至超链接上时显示效果正确 鼠标移至“正品保障”等图标上时显示动画正确 字体颜色、背景图标等设置无误
17/38
共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧
共性问题集中讲解
18/38
用例2：网站首页2-1
任务描述 制作1号店网站
首页 搜索列表页 商品详情页 登录页 注册页
3/38
问题分析1：整体开发思路
网页制作步骤
制作网站公用部分（网站导航和版权部分） 制作1号店首页（index.html） 制作搜索列表页（searchList.html） 制作商品详情页（ detail.html ） 制作登录页（ loginpage.html） 制作注册页（ registerpage.html）
移入时设置放大动画[25分钟]
}
11/38
开发计划3-1
用例1：制作网站公用部分
网站导航
完成时间：30分钟
网站版权
完成时间：20分钟
用例2：制作网站首页
全部商品分类
完成时间：20分钟
轮播图
完成时间：20分钟
快讯
完成时间：15分钟
热门产品
完成时间：20分钟
进口生鲜
完成时间：25分钟
12/38
开发计划3-2
用例3：制作搜索列表页
使用过渡给“天天低价”列表项添加动画
讲解需求说明
15/38
用例1：网站公用部分3-2
分析 使用无序列表制作顶部导航和主导航菜单 使用过渡给“天天低价”列表项添加动画
提示
<div class="b_btm_bg b_btm_c">
<ul class="b_btm">
<li>
<a><img src="images/b1.png" width="62"
项目案例： 制作1号店网站
本课目标
学完本次课程后，你能够：
会使用float属性进行多列的网页布局 会使用position属性定位网页元素 会使用字体样式和文本样式排版网页文本 会使用背景属性设置网页元素的背景 会使用盒子模型属性设置网页元素 会使用无序列表制作导航、列表信息 会使用CSS3属性制作网页动画效果
全部品牌
完成时间：30分钟
浏览历史
完成时间：20分钟
商品列表
完成时间：30分钟
用例4：制作商品详情页
全部商品分类
完成时间：30分钟
用户还喜欢
完成时间：15分钟
推荐搭配
完成时间：15分钟
商品属性
完成时间：50分钟
13/38
开发计划3-3
用例5：制作登录页 用例6：制作注册页
完成时间：20分钟 完成时间：20分钟
使用无序列表布局网页的局部结构
常用于导航菜单或列表 主导航菜单
商品列表
新闻列表
ቤተ መጻሕፍቲ ባይዱ
7/38
难点分析2：局部布局 使用定义列表进行局部布局
常用于二级菜单列表、图文混排、标题与解释性内容相 混排的情况
<dt>标签 <dd>标签
8/38
难点分析3：语义化表单
制作表单并验证
登录、注册页面
<form action="#"> <div class="tableItem"> <span class="userPhone">手机号</span> <input type="text" required placeholder="手机号"/> </div> <div class="cf"> <div class="tableItem onlyItem fl"> <span class="userPhone">手机号</span> <input class="" type="text" required placeholder="手机号"/> </div> <a class="tableText fr" href="#">获取验证码</a> </div> <div class="tableItem"> <span class="setPass">设置密码</span> <input type="password" required placeholder="密码"/> </div>
9/38
难点分析4：页面居中显示 使用margin属性设置网页在浏览器中居中显示
#wrap { width:982px; margin:0 auto;
}
10/38
难点分析5：清除浮动防止父元素边框塌陷 使用CSS来设置外层<div>去除浮动产生的影响
.clear:after{ content: ''; display: block; clear: both;
练习 需求说明
网页主体内容最上方是一个商品列表[20分钟]、焦点轮播图[15分 钟]、快讯列表[20分钟]等组成的三栏布局，使用浮动让它们排列 在一行
使用<div>和无序列表排版热门商品模块，使用float属性、定位 属性、字体属性、文本属性等美化、定义热门商品内容[20分钟]
横条“满199减100”广告使用图片布局 “进口•生鲜”模块使用<div>和无序列表布局，里面的图片鼠标
height="62"/></a>
<div><h2>正品保障</h2>正品行货 放心购买</div>
</li>
…
.b_btm li img{ transition: all 3s;}
.b_btm li img:hover{ transform: rotate(360deg) scale(1.2); }
4/38
问题分析2：网站文件结构
根目录
css
images
goods
home
index
login
register
5/38
问题分析3：网页布局 整体布局
页面整体为上中下布局 部分页面中间又分为左右布局 使用DIV来布局网页结构，整体页面布局使用标准文档
流布局，局部布局使用浮动定位
6/38
难点分析1：局部布局
14/38
用例1：网站公用部分3-1
指导
需求说明
使用无序列表制作顶部导航，鼠标移动到“客户服务”上时弹出下拉 列表框，使用文字、文本、背景、浮动等属性定位、美化网页元素
使用search类型的表单元素来布局网页搜索框
使用无序列表制作“天天低价”列表的内容，并且要求鼠标移入“天 天低价”图片时，图片旋转360°，同时放大1.2倍
16/38
用例1：网站公用部分3-3 功能测试 页面按照效果图完成
鼠标移至超链接上时显示效果正确 鼠标移至“正品保障”等图标上时显示动画正确 字体颜色、背景图标等设置无误
17/38
共性问题集中讲解 常见问题及解决办法 代码规范问题 调试技巧
共性问题集中讲解
18/38
用例2：网站首页2-1