导图社区 WEB网站开发设计师产品设计流程

WEB网站开发设计师产品设计流程

WEB网站开发设计师产品设计流程主要阐述了设计师产品演示所包含的内容，视觉设计师GUI和网页制作前端的知识点，对网站开发设计感兴趣的小伙伴可以看看哟。

编辑于2022-11-03 14:15:05 广东

网页设计
网站开发
WEB网站…
WEB网站

凝

他的近期作品查看更多>>

WEB网站开发设计师产品设计流程

社区模板帮助中心，点此进入>>

凝

他的近期作品查看更多>>

相似推荐
大纲

互联网9大思维
- 33.9k
- 907
- 2.4k
- 388
MindMaster
产品立项报告
- 7.8k
- 900
- 338
- 13
江边朝阳
组织架构-单商户商城webAPP 思维导图。
- 14.6k
- 3
- 184
- 10
Kacyun
域控上线
- 1.6k
- 162
- 11
- 4
jackrao
产品经理如何做好项目管理
- 6.9k
- 48
- 209
- 10
issen
python思维导图
- 5.4k
- 525
- 242
- 7
(*^▽^*)
经验分享：产品经理必懂的产品思维
- 4.9k
- 402
- 231
- 12
(*^▽^*)
产品诞生过程
- 3.5k
- 216
- 274
- 16
(*^▽^*)
产品周期图
- 4.0k
- 491
- 237
- 6
(*^▽^*)
css
- 1.2k
- 1
- 43
- 3
A张舫

WEB网站开发设计师产品设计流程

业务员

产品经理

设计师（产品演示DEMO）

视觉设计师GUI 6000-16000

办公软件

思维软件

图像处理软件

手绘功底

网页制作（前端） 3000-15000

办公软件

图像处理软件

网站搭建技术

HTML 结构

符号

尖括号（斜杠）

尖括号包含标签名（预设的名称）斜杠代表标签名称的结束

空格

分隔标签的属性

等号

给属性赋值

引号

值用引号包含

叹号

提示作用（注释的书写）

！！！！！注意：符号要成对书写

dreamweaver有符号提示

常用标签

页面结构标签

<html> <head> <title></title> </head> <body> </body> </html> 说明：标签是嵌套关系此关系类似于家族关系，如： <爸爸> <大儿子> <孙子></孙子> </大儿子> <二儿子></二儿子> </爸爸> 总结：父辈与子辈的关系

块（block）级别标签

<div></div> 容器标签特点：独占一行空间默认情况下，div有宽度值，宽度为100% 默认情况下，div没有高度值，高度依存子级

... 标题字标签特点：字号比较大单词： font 字体 size 大小字体有加粗设置单词： weight 加重 bold 加粗上下文之间有一定空间

<p></p> 段落标签特点：上下文之间有一定空间

无序列表标签特点：上阵不离父子兵 ul上下文之间有一定空间列表内容有缩进现象，并且内容前面有个点的修饰

定义列表特点：上阵不离父子兵，可以dl和dt 或dl和dd一同使用 dd内容前面有缩进现象

总结：块级别标签特点：独占一行空间默认情况下，有宽度值，宽度为100% 默认情况下，没有高度值，高度依存子级

内联（inline）标签

<span></span> 小容器标签特点：在一行内显示没有宽度和高度属性（不支持宽度和高度）

<a></a> 链接标签例： <a href=""></a> href属性指向链接地址文件特点：链接文本的样式由属性href决定单词：text 文本 style 样式链接文字是有颜色的，默认是蓝色，点击过后是紫色的。链接文字下方有个下划线修饰单词：underline 下划线 decoration 修饰鼠标指向链接，光标会变成手指向的样式单词： mouse 鼠标 cursor 光标 pointer 指向

<b></b> 文本加粗 <strong></strong> <i></i> 斜体字 <em></em> <u></u>下划线 <s></s> 删除线 <sup></sup>上标字 <sub></sub>下标字

其他

单标签（元素标签）

<input>输入标签

<img>插入图像标签属性： <img src="图像地址" alt="图像的说明文本" title="图像的提示说明">

注意：网站里用的图像必须保存在该网站文件夹里

特殊符号

会用鼠标插入就可以了

表单标签

CSS 修饰

CSS使用

使用HTML标签的style属性来进行CSS书写例：

语法：示例： color:#ff0000;font-size:30px; 总结：冒号：分隔CSS属性和值分号：分隔属性空格：分隔同一属性的多个值

使用HTML标签<style></style>来进行CSS书写例： <style> CSS内容 </style>

外部调用CSS文件，可直接用鼠标操作

CSS常用属性

文本相关

color 文本颜色

font-size 字体大小

font-weight:bold 字体加粗

font-style:italic 字体倾斜

text-decoration:underline 文本修饰

font-family 字体设置

text-indent 首行缩进

text-align 文本对齐

line-height 行高（设置行间距）

letter-spacing 字符间距

块相关

width 宽度

height 高度

background-color 背景颜色

border:solid #f00 3px; 描边（该描边为外部描边）

border-top 上描边

border-bottom 下描边

border-left 左描边

border-right 右描边

padding 填充（内边距）说明：块里的内容与块的边缘之间的距离

padding-top

padding-bottom

padding-left

padding-right

margin 边界（外）注：利用边界可使块在水平方向居中。示例：margin-left:auto;margin-right:auto;

margin-top

margin-bottom

margin-left

margin-right

float 浮动

clear 清除浮动

overflow 溢出示例：overflow:hidden;

其他

display:block; display:inline;

background-image 指定背景图像

background-repeat 控制背景重复

background-position 控制背景位置

position 定位 position:absolute; 绝对定位 position:relative; 相对定位 left:; top:; 左上 right:; bottom:; 右下 z-index 指定层级值，值越大的对象在上面用特殊方式先记再理解： 1、绝对定位一定放在参考对象的里面 2、给参考对象加上属性position:relative;

网页布局

1、行布局（默认布局级）问题：父级与子级共用margin-top值解决： 1用父级padding-top来解决 2改变布局级别问题：上下边界值共用

2、列布局（浮动布局级）

3、定位布局（定位级）

CSS归类整理

选择器的定义

1、标签名做选择器名（直接用原有标签名）示例： div{background-color:red;}

2、类定义（给标签起个类名，自定义的名称）注：类名称前面要加点，如：.box 类名称要和标签名有区别，不用使用标签名，名称的第一个字符不能是数字。在标签里用class属性来调用类名称。如：调用时不能写点如果想要给标签添加多个类，在class中用空格分隔多个类名

3、id定义（给标签起一个唯一的名称）注：id名称前面要加井号，如:#header 此名称一定保证唯一性在标签里用id属性来调用id名称。如：调用时名称前不加井号

选择器定义的优先级：类定义优先于标签定义，id定义是最优先的。

选择器定义的组合使用

不同的人拥有相同属性的时候，使用逗号分隔选择器名称如：div,.box,#header{color:red;}

通过辈分关系设置子级的属性，使用空格将辈分进行分隔。如： div a{color:red;} p a{color:red;}

伪类定义选择器:hover{} 例： div:hover{} a:hover{} div a:hover{}

语法：选择器名{ CSS属性 }

注意事项

不要忘记写"px"

CSS属性后派生的级别高，HTML的属性不能重复使用

优先级

HTML标签关系

默认情况下子级继承父级属性（不是所有属性都默认继承）

子级如果有跟父级一样的属性，子级属性值优先（标签的就近原则）

块的高度由子级决定，块的宽度由父级决定！！！！！

子级浮动，父级未浮动，给父级加overflow:hidden;

搭建顺序是：由外至内，由左至右，由上至下

Javascript/Jquery 行为

jquery

jquery文档的引入利用<script src="jquery.js"></script>标签引入

jquery书写位置在第2个<script></script>书写jquery

jquery语法： $(谁).干什么谁：用之前学过的选择器定义方式来书写，注意名称要加引号干什么：是要学习的jquery方法

必须掌握的语法结构

$(function(){})

事件的使用

click(function(){}) 鼠标单击事件

toggle(fn,fn) 交替点击

mouseover(function(){}) 鼠标经过事件

mouseout(function(){}) 鼠标离开事件

hover(fn,fn) 鼠标经过离开

方法（干什么）

效果

animate(变化,时间) 动画设置

fadeOut() 淡出效果

fadeIn() 淡入效果

hide() 隐藏

show() 显示

修改属性的方法

css({属性:"值"}) css("属性","值") 修改CSS属性

attr("属性","值") 修改html属性

addClass("类名称") 添加类

removeClass("类名称") 移除类

对象查找方法

eq(索引值) 对象位置索引

parent() 找父级

children() 找子级

siblings() 找兄弟

next() 找下一个

prev() 找上一个

index() 对象位置索引例：前面是数组.index(单个对象) $(".btns a").index(this)

文档处理方法

html() 插入html内容

insertAfter() 在之后插入 insertBefore() 在之前插入例：前面的对象.insertAfter(后面的对象)

其他

this 这个

javascript

编程语言

语法

变量

字或词

var声明变量例： var person; 用等号给变量赋值例： person = "大家";

变量的值的数据类型数值类型例：10 字符类型例："teacher" 布尔类型例：true false 是否注：在javascript中字符类型必须加引号

变量的运算数值运算： x=1; y=1; sum=x+y; 字符运算： x="我"; y="是男人"; sum = x+y; 布尔(比较)运算： 3 < 8 "我" == "我"

数组

词组

var 数组名称 = new Array() 数组名称[个数索引] = 值;

Math.floor() 取整数

Math.random() 取0到1之间的随机数

语句

说话

条件语句 if(布尔值){ }else{ }

函数

说一堆话

function 函数名(){执行过程}

方法

提示信息

alert("你好")

prompt("提示","输入信息") 提示方式获取信息

confirm("确认")

var 定时器名=setInterval(过程,时间) 定时器

clearInterval(定时器名) 停止定时器

辅助内容

输出内容的方式

document.title = "值"

html() 插入html内容

书写顺序：先写结构再填内容

主题

后台程序员

测试

单词复习

document 文档

type 类型

parent 父辈

children 子级

siblings 同辈