web前端开发项目PPT课件.ppt
合集下载
web前端开发项目ppt
用户操作简单ul设计理念11项目选题概述22项目分工及完成情况33项目原型展示44ul设计方案55网页编码目录contents66用户使用指南77项目总结网站源码网站页面兼容性展示用户角度使用指南11项目选题概述22项目分工及完成情况33项目原型展示44ul设计方案55网页编码目录contents66用户使用指南77项目总结顶部logonavbannerbody相关链接尾部整体布局以divfloatposition为主css样式以单个图片为主网页切片网页编码网页编码11项目选题概述22项目分工及完成情况33项目原型展示44ul设计方案55网页编码目录contents66用户使用指南77项目总结summary请输入您的文字可复制粘贴项目总结谢谢观看此课件下载可自行编辑修改供参考
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
5
用户使用指南
6
网页编码
7
项目总结
Ul设计理念
基本理念
配色方案
I. 网 站 域 名 ：
II. 网站名称：xxx
III. 网站类型：展示产品 类企业网站
I. 主色调：黑色 II. 辅助色：灰色 III. 点睛色：黄色 IV. 背景色：白色
风格选择
I. 网页以图片为主，文 字加以补充，使浏览 者一目了然
II. 网页以白色为背景， 黑色为主色，可以减 少视觉上的疲劳
表达寓意
I. 网页展示简约大方 II. 色彩搭配清新美观 III. 用户操作简单
目录
CONTENTS
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
5
用户使用指南
6
网页编码
7
项目总结
Ul设计理念
基本理念
配色方案
I. 网 站 域 名 ：
II. 网站名称：xxx
III. 网站类型：展示产品 类企业网站
I. 主色调：黑色 II. 辅助色：灰色 III. 点睛色：黄色 IV. 背景色：白色
风格选择
I. 网页以图片为主，文 字加以补充，使浏览 者一目了然
II. 网页以白色为背景， 黑色为主色，可以减 少视觉上的疲劳
表达寓意
I. 网页展示简约大方 II. 色彩搭配清新美观 III. 用户操作简单
目录
CONTENTS
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
Web前端开发——简单讲解(完整版) ppt课件
ppt课件
11
扩展主要快捷键列表
Alt+. 闭合当前标签 Ctrl+Shift+A 选择光标位置父标签对儿 Ctrl+Shift+[ 折叠代码 Ctrl+Shift+] 展开代码 Ctrl+KT 折叠属性 Ctrl+K0 展开所有 Ctrl+U 软撤销 Ctrl+T 词互换 Tab 缩进 自动完成 Shift+Tab 去除缩进
Ctrl+Shift+↑ 与上行互换 Ctrl+Shift+↓ 与下行互换 Ctrl+K Backspace 从光标处删除至行首 Ctrl+Enter 光标后插入行 Ctrl+Shift+Enter 光标前插入行 Ctrl+F2 设置书签 F2 下一个书签 Shift+F2 上一个书签
ppt课件
12
界面
从上到下：标题栏、菜单栏、tab控制栏、编辑区、状态栏 从做到右：分别是边栏、编辑区、MiniMap
菜单栏：各种命令，各种设置。
Tab栏：很多编辑器都有的，如果文件编辑过未保存，右上角有个小圆点提示保存，如果未保存关
了也不用害怕，ST2很贴心，会帮我们自动保存。
编辑区：这是我们主要的工作区域，ST2支持代码自动缩进，代码折叠功能。
6
前3个，大家都知道，第4个，show unsaved changes，显示未保存的修改，红色减 号表示删去的内容，绿色加号表示新增的内容
ppt课件
7
Open Containing Folder…，打开包含此文件的文件夹，这个很方便找到相关的文件 Copy File Path，复制文件路径，方便我们复制路径到浏览器中查看 Auto-Format Tags on Selection 格式化选中的文档，方便我们更清晰的查看代码结构， 虽然ST2有自动缩进功能，但是当我们粘贴进一段没有格式化过的代码，就需要这个能了， 这个功能要安装了Tag这个插件才会出现。 人性化设计：ST2虽然还是beta版中，但是有很多设计细节还是值得称赞的，比如点击一 个标签或者括弧，会在起始处显示下划点线，方便看清代码结果，每一层嵌套代码间都有 竖线，起到视觉辅助的作用。
《WEB开发技术》PPT课件
虚拟主机之间完全独立，并可由用户自 行管理，可以大大地缓解互联网上IP及服 务器等资源的不足，同时降低用户的硬 件费用、网络维护费用和通讯服务费用。
选择虚拟主机的要素:技术需要,空间大小
a
21
• 得到FTP地址，把源代码上传到FTP. 所谓FTP:FTP（File Transfer Protocol）是文件传输协议的简称。
• TCP（Transmission Control Protocol，传输控制协议）
• IP（Internet Protocol，网际协议）
a
12
2.利用DNS查询到对 应的IP地址；
浏览器与Google服务器利用TCP协议 建立连接；
浏览器利用HTTP协议向Google发送 请求；
IIS的安装
a
18
如何在网络中发布网站
• 为了在自己的电脑上调试自己编的网页程序要配置环境 • IIS(Internet Information Service)信息服务.
在Windows组件中安装IIS. 在管理工具中可以运行IIS.通过IIS配置虚拟目录实现对源代码的预览修改等
a
19
• 为开发的网站申请域名 了解域名首先了解IP:像电话有电话号码一样,接入Internet的计算 机也有一个由授权机构分配的号码即IP地址
a
6
域名分为英文域名和中文域名
英文域名又分为国际域名和国内域名
如：GOOGLE公司的域名收购 GOOGLE公司的中文域名的抢注（谷
歌） “神州七号”域名的抢注
a
7
IP地址和域名具有等价性，通过DNS（Domain Name System ）域 名服务器对相应的域名进行解析成为对应的IP地址.
选择虚拟主机的要素:技术需要,空间大小
a
21
• 得到FTP地址，把源代码上传到FTP. 所谓FTP:FTP（File Transfer Protocol）是文件传输协议的简称。
• TCP（Transmission Control Protocol，传输控制协议）
• IP（Internet Protocol，网际协议）
a
12
2.利用DNS查询到对 应的IP地址；
浏览器与Google服务器利用TCP协议 建立连接；
浏览器利用HTTP协议向Google发送 请求；
IIS的安装
a
18
如何在网络中发布网站
• 为了在自己的电脑上调试自己编的网页程序要配置环境 • IIS(Internet Information Service)信息服务.
在Windows组件中安装IIS. 在管理工具中可以运行IIS.通过IIS配置虚拟目录实现对源代码的预览修改等
a
19
• 为开发的网站申请域名 了解域名首先了解IP:像电话有电话号码一样,接入Internet的计算 机也有一个由授权机构分配的号码即IP地址
a
6
域名分为英文域名和中文域名
英文域名又分为国际域名和国内域名
如：GOOGLE公司的域名收购 GOOGLE公司的中文域名的抢注（谷
歌） “神州七号”域名的抢注
a
7
IP地址和域名具有等价性，通过DNS（Domain Name System ）域 名服务器对相应的域名进行解析成为对应的IP地址.
Web前端开发实例教程PPT课件(共13章)第7章 JavaScript编程基础
document.write(typeof 3*2 + "<br>");
/输出/NaN
document.write(typeof false + "<br>");
//输出boolean
document.write(typeof varX + "<br>");
//输出undefined
document.write(typeof [1,2,3] + "<br>");
7.4.3 运算符和表达式
4．布尔（逻辑）运算符和布尔表达式 布尔运算符有：&&（与）、||（或）、!（非、取反）、?:（ 条件）。 逻辑表达式是由逻辑运算符组成的表达式。逻辑表达式的结 果只能是布尔值，即true或false。 5．位运算符和位表达式 位运算符分为位逻辑运算符和位移动运算符。
7.4.3 运算符和表达式
7.1 JavaScript概述
7.1 JavaScript概述
JavaScript是一种脚本语言，是一种介于HTML与高级编程语言 （Java、VB和C++等）之间的特殊语言。客户端脚本常用来响应用 户动作、验证表单数据，以及显示各种自定义内容，如对话框、动 画等。
JavaScript是一种基于对象（Object）和事件驱动（Event Driven），并且具有安全性能的脚本语言。它可与HTML、CSS一起 实现在一个Web页面中链接多个对象，与Web客户交互的作用，从 而开发出客户端的应用程序。
<script type="text/javascript" src="路径/脚本文件名.js"></script>
web前端开发ppt课件
Web前端开发
NO.2 Web标准？Xhtml？
Xhtml（html）语法规则：
属性不能简写（<input checked="checkeame 属性（<img src="picture.gif" id="picture1" />）
在 "/" 符号前添加一个额外的空格，以使你 的 XHTML 与当今的浏览器相兼容
5
Web前端开发
NO.1 Web前端开发设计？？ 网页设计师、Web前端设计师与网站开发 工程师、交互设计师等区别： 网站开发工程师：掌握ASP、PHP、.NET、 JSP等开发语言，熟悉运用Access、SQL语 言、SQL数据库等；对IIS、Apache等服务 器有一定的理解等
6
Web前端开发
1
2
Web前端开发
NO.1 Web前端开发设计？？
网页设计师、Web前端设计师与交互设计 师、网站开发工程师等的区别： 网页设计师是指精通Photoshop、 CorelDRAW、Flash、Illustrator、 Dreamweaver等多项网页设计工具的网页 设计人员
3
<![endif]--> 结语：积累经验解决兼容问题
22
Web前端开发
NO.4 html标签/元素和属性
HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 标签是由尖括号包围的关键词，比如 <html> HTML 标签通常是成对出现的，比如 <p> 和 </p>
web前端知识介绍PPT课件
HTML+CSS 初识web前端和HTML
1
本节任务
知 识
• 什么是Web前端
导 入
• Web前端开发工具
• 浏览器的介绍
• HTML是什么
• HTML的文档结构
• W3c介绍
• Html发展史
• Xhtml1.0规范
• 常用标签的讲解
• 属性的讲解
2
知 Web前端开发语言介绍
识
讲 解
1. Web前端：浏览器展现给用户的所有东西 (设计+布局+特效+交互)
6
HTML 文档结构
知 识
讲 <!DOCTYPE HTML>
解
<html>
<head></head>
<body>hello world</body>
</html>
<!DOCTYPE HTML> 网页的DTD声明，告诉浏览器按照指定的标准来解
析网页，这里指的是w3c标准。如果不写DTD声明，浏览器认为这是一
HTML 4.0 –
1997年12月18日,W3C推荐标准
HTML 4.01(微小改进) –
1999年12月24日,W3C推荐标准
XHTML 1.0 –
发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布
XHTML 1.1 –
于2001年5月31日发布
XHTML 2.0
3
知 开发工具介绍
识 讲 解
1. 三种常用的 IDE：Dreamweaver、HBuilder、Webstorm 2. 建议使用HBuilder => 速度快，代码提示好，基于eclipse开发，
1
本节任务
知 识
• 什么是Web前端
导 入
• Web前端开发工具
• 浏览器的介绍
• HTML是什么
• HTML的文档结构
• W3c介绍
• Html发展史
• Xhtml1.0规范
• 常用标签的讲解
• 属性的讲解
2
知 Web前端开发语言介绍
识
讲 解
1. Web前端：浏览器展现给用户的所有东西 (设计+布局+特效+交互)
6
HTML 文档结构
知 识
讲 <!DOCTYPE HTML>
解
<html>
<head></head>
<body>hello world</body>
</html>
<!DOCTYPE HTML> 网页的DTD声明，告诉浏览器按照指定的标准来解
析网页，这里指的是w3c标准。如果不写DTD声明，浏览器认为这是一
HTML 4.0 –
1997年12月18日,W3C推荐标准
HTML 4.01(微小改进) –
1999年12月24日,W3C推荐标准
XHTML 1.0 –
发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布
XHTML 1.1 –
于2001年5月31日发布
XHTML 2.0
3
知 开发工具介绍
识 讲 解
1. 三种常用的 IDE：Dreamweaver、HBuilder、Webstorm 2. 建议使用HBuilder => 速度快，代码提示好，基于eclipse开发，
Web前端开发实例教程PPT课件(共13章)第11章 jQuery基础
11.5.2 什么是jQuery选择器
一个典型的jQuery选择器的语法格式为：
$(selector).methodName();
其中，selector是一个字符串表达式，用于识别DOM中的元素 ，然后使用jQuery提供的方法集合加以设置。
多个jQuery操作可以以链的形式串起来，语法格式为：
$(selector).method1().method2().method3();
<head> <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
</head>
11.2.2 编写一个简单的jQuery程序
在页面中引入jQuery库后，通过$()函数来获取页面中的元素 ，并对元素进行定位或效果处理。在没有特别说明下，$符号即为 jQuery对象的缩写形式。 【例11-1】编写一个简单的jQuery程序
$(".class");
其中，class为要查询元素所用的CSS类名。例如，要查询使用 CSS类名为digital的元素，可以使用下面的jQuery代码：
$(".digital");
11.6.4 复合选择器
复合选择器的使用方法如下：
$(" selector1,selector2,…,selectorN");
11.3.2 jQuery对象和DOM对象的相互转换
1．jQuery对象转换成DOM对象 jQuery提供了两种转换方式将一个jQuery对象转换成DOM对象 ：[index]和get(index)。 1）jQuery对象是一个类似数组的对象，可以通过[index]方法 得到相应的DOM对象。 2）jQuery本身也提供了get(index)方法，可以得到相应的DOM 对象。
Web前端开发实例教程PPT课件(共13章)第10章 HTML5的API应用
10.2.4 绘制图形
【例10-8】绘制图像。页面中依次绘制了5幅图像，分别实现 了原图使绘制、图像缩小、图像裁剪、裁剪区域的放大和裁剪区域 的缩小效果。
习题10
1．使用HTML5拖放API实现购物车拖放效果，如图10-9所示。 2．使用canvas元素绘制圆饼图，如图10-10所示。 3．使用canvas元素绘制一个商标，如图10-11所示。 4．使用canvas元素绘制填充文字和轮廓文字，如图10-12所示。 5．使用canvas元素绘制一个径向渐变图形，如图10-13所示。
10.1.2 拖放事件
3．拖放事件的生命周期和执行过程 从用户在元素上单击鼠标左键开始拖放行为，到将该元素放 置到指定的目标区域中，每个事件的生命周期如表10-3所示。
10.1.3 数据传递对象dataTransfer
dataTransfer对象用于从被拖放元素向目标元素传递数据，提 供了许多属性和方法。 【例 10-1】拖放示例。用户拖动页面中图片放置到目标矩形中。
draggable属性设置为true时仅表示该元素允许拖放，但并不 能真正实现拖放，必须与JavaScript脚本结合使用才能实现拖放。
10.1.2 拖放事件
1．拖放元素事件 事件对象为被拖放元素，拖放元素事件如表10-1所示。
10.1.2 拖放事件
2．目标元素事件 事件对象为目标元素，目标元素事件如表10-2所示。
fillRect(x, y, weight, height);
（2）绘制矩形轮廓 strokeRect()方法用来绘制矩形的轮廓，语法格式为：
strokeRect(x, y, weight, height);
10.2.4 绘制图形
【例10-2】绘制填充的矩形和矩形轮廓。
Web前端开发实例教程PPT课件(共13章)第12章 jQuery动画与UI插件
12.6.2 自动完成
【例12-5】通过使用自动完成实现根据用户的输入，智能显示 查询列表的功能，如果查询列表过长，则可以通过为autocomplete 设置max-height来防止菜单显示太长。
12.6.3 标签页
标签页（Tabs）是一种多面板的单内容区，每个面板与列表 中的标题相关，单击标签页，可以切换显示不同的逻辑内容。 标签页（Tabs）必须在一个有序（<ol>）或无序（<ul>）列表
习题12
4．使用jQuery UI折叠面板插件制作如图12-14所示的页面。页面加 载后，折叠面板中的每个子面板都带有图标，单击“切换图标”按钮 ，隐藏子面板的图标，可以反复切换图标的显示与隐藏状态。 5．使用jQuery UI自动完成插件制作如图12-15所示的页面。在文本 框中输入关键字，实现“分类”智能查询。 6．通过使用日期选择器（Datepicker）插件选择日期并格式化，显 示在文本框中，在选择日期时，同时提供两个月的日期供选择，而 且在选择时，可以修改年份信息和月份信息，如图12-16所示。
$(selector).slideToggle(speed,callback)
12.4.3 交替伸缩效果
【例12-3】滑动效果示例。单击“向下展开”按钮，div元素中 的内容从上往下逐渐展开；单击“向上收缩”按钮，div元素中的内容 从下往上逐渐折叠；单击“交替伸缩”按钮，div元素中的内容可以向 下展开也可以向上收缩。
12.5.3 jQuery UI的使用
在网页中使用jQuery UI插件时，需要将解压之后的jquery-ui1.12.1.custom文件夹复制到网页所在的文件夹下，然后在网页的 <head>区域添加jquery-ui.css文件、jquery-ui.js文件及 external/jquery文件夹下jquery.js文件的引用，代码如下：
Web前端开发实例教程PPT课件(共13章)第3章 网页的布局与交互
【例3-2】跨行跨列表格示例。
3.1.4 表格数据的分组
表格数据的分组标签包括<thead>、<tbody>和<tfooter>，主要 用于对表格数据进行逻辑分组。 【例3-3】表格分组示例。
3.1.5 调整列的格式
1）<colgroup>标签：对表格中的列组合，以便对其进行格式化。 2）<col>标签：对表格中一个或多个列定义属性值，通常位于 <colgroup>元素内。 【例3-4】列格式示例。
高等学校规划教材
Web前端开发实例教程（第2版）
——HTML5+CSS3+JavaScript+jQuery
第3章 网页的布局与交互
目录
3.1 表格元素table 3.2 使用结构元素构建网页布局 3.3 页面交互元素 3.4 分区元素div 3.5 范围元素span 3.6 表单
3.1 表格元素table
div元素是一个块级元素，通常使用div元素来组合块级元素， 这样即可使用样式对它们进行格式化。由于div元素没有明显的外观 效果，因此需要为其添加CSS样式属性。div元素的格式为：
<div id="控件id" class="类名">文本、图像或表格</div>
3.4 分区元素div
【例3-13】使用div元素组织网页内容示例。
<textarea name="名称" rows="行数" cols="列数"> 初始文本内容
</textarea>
3.6.6 多行文本元素textarea
3.1.4 表格数据的分组
表格数据的分组标签包括<thead>、<tbody>和<tfooter>，主要 用于对表格数据进行逻辑分组。 【例3-3】表格分组示例。
3.1.5 调整列的格式
1）<colgroup>标签：对表格中的列组合，以便对其进行格式化。 2）<col>标签：对表格中一个或多个列定义属性值，通常位于 <colgroup>元素内。 【例3-4】列格式示例。
高等学校规划教材
Web前端开发实例教程（第2版）
——HTML5+CSS3+JavaScript+jQuery
第3章 网页的布局与交互
目录
3.1 表格元素table 3.2 使用结构元素构建网页布局 3.3 页面交互元素 3.4 分区元素div 3.5 范围元素span 3.6 表单
3.1 表格元素table
div元素是一个块级元素，通常使用div元素来组合块级元素， 这样即可使用样式对它们进行格式化。由于div元素没有明显的外观 效果，因此需要为其添加CSS样式属性。div元素的格式为：
<div id="控件id" class="类名">文本、图像或表格</div>
3.4 分区元素div
【例3-13】使用div元素组织网页内容示例。
<textarea name="名称" rows="行数" cols="列数"> 初始文本内容
</textarea>
3.6.6 多行文本元素textarea
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CONTENTS
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
5
用户使用指南
6
网页编码
7
项目总结
LOGO Ul设计理念
基本理念
配色方案
I. 网 站 域 名 ：
II. 网站名称：xxx
III. 网站类型：展示产品 类企业网站
I. 主色调：黑色 II. 辅助色：灰色 III. 点睛色：黄色 IV. 背景色：白色
前端开发
项目分析
xxx组
目录
CONTENTS
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案目总结
前言
台电科技是一家知名IT资讯企业。 台电科技始终 坚持品质至上的原则，精益求精，不断创造应用需求的 同时坚持提升产品性能及技术含量。多年来，台电科技 通过严格的技术和品质把关，使产品下线良品率达到 99.8%，常规情况下用户故障率低于千分之五。同时， 台电科技一直与国际一流生产厂保持着良好的技术交流 和合作关系。
目录
CONTENTS
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
5
用户使用指南
6
网站编码
7
项目总结
LOGO
项目分工
标题
内容
标题
内容
项目 分工
标题
内容
标题
内容
目录
CONTENTS
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
5
用户使用指南
6
网站编码
7
项目总结
目录
风格选择
I. 网页以图片为主，文 字加以补充，使浏览 者一目了然
II. 网页以白色为背景， 黑色为主色，可以减 少视觉上的疲劳
表达寓意
I. 网页展示简约大方 II. 色彩搭配清新美观 III. 用户操作简单
目录
CONTENTS
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
5
用户使用指南
以div、float、position为主
网页切片
以单个图片为主
目录
CONTENTS
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
5
用户使用指南
6
网页编码
7
项目总结
LOGO
项目总结
Summary
请输入您的文字，可复制粘贴
谢谢观看
精选
15
6
网页编码
7
项目总结
LOGO 用户角度使用指南
网站 源码
网站 页面
兼容性 展示
目录
CONTENTS
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
5
用户使用指南
6
网页编码
7
项目总结
LOGO
网页编码
网页编码
整体布局
顶部、logo、nav、banner、 body、相关链接、尾部
CSS样式
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
5
用户使用指南
6
网页编码
7
项目总结
LOGO Ul设计理念
基本理念
配色方案
I. 网 站 域 名 ：
II. 网站名称：xxx
III. 网站类型：展示产品 类企业网站
I. 主色调：黑色 II. 辅助色：灰色 III. 点睛色：黄色 IV. 背景色：白色
前端开发
项目分析
xxx组
目录
CONTENTS
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案目总结
前言
台电科技是一家知名IT资讯企业。 台电科技始终 坚持品质至上的原则，精益求精，不断创造应用需求的 同时坚持提升产品性能及技术含量。多年来，台电科技 通过严格的技术和品质把关，使产品下线良品率达到 99.8%，常规情况下用户故障率低于千分之五。同时， 台电科技一直与国际一流生产厂保持着良好的技术交流 和合作关系。
目录
CONTENTS
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
5
用户使用指南
6
网站编码
7
项目总结
LOGO
项目分工
标题
内容
标题
内容
项目 分工
标题
内容
标题
内容
目录
CONTENTS
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
5
用户使用指南
6
网站编码
7
项目总结
目录
风格选择
I. 网页以图片为主，文 字加以补充，使浏览 者一目了然
II. 网页以白色为背景， 黑色为主色，可以减 少视觉上的疲劳
表达寓意
I. 网页展示简约大方 II. 色彩搭配清新美观 III. 用户操作简单
目录
CONTENTS
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
5
用户使用指南
以div、float、position为主
网页切片
以单个图片为主
目录
CONTENTS
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
5
用户使用指南
6
网页编码
7
项目总结
LOGO
项目总结
Summary
请输入您的文字，可复制粘贴
谢谢观看
精选
15
6
网页编码
7
项目总结
LOGO 用户角度使用指南
网站 源码
网站 页面
兼容性 展示
目录
CONTENTS
1
项目选题概述
2
项目分工及完成情况
3
项目原型展示
4
Ul设计方案
5
用户使用指南
6
网页编码
7
项目总结
LOGO
网页编码
网页编码
整体布局
顶部、logo、nav、banner、 body、相关链接、尾部
CSS样式