ps美工软件课件素材课程dreamwver-库dreamweaver笔记

1、Dreamweaver 笔记：主讲老师：南柯老师一、认识网页的结构切片工具按 C 切换切片工具和切片选择工具，选中的切片按 del 删除，视图清除切片1）、结构划分逐级划分原则（先整体后局部，由大到小）2）、图像导出1 像素（px）原则二、网页的 html（标记|元素）语法格式：内容1、 html 超文本标记语言2、 head 网页的头文件信息（网页的属性）3、 meta 网页的语言编码 Utf-8（防止乱码）4、 title网页的标题5、 body 网页内容（浏览器窗口内出现的内容）6、 div 区块（盒子）a)宽：100%撑满b)高：默认为 0；根据内容自适应c)独立成行并列关系兄弟关系嵌

2、套关系父子关系有背景的网页搭建方式：（两级嵌套）A、一级：给 height（高）和背景B、二级：给 width（宽）和居中（margin:0 auto;）7、img 前景图A、属于网页的内容，可以占位，写在结构中B、属于单C、在书写的时候紧贴 div，多张并列时不用换行8、h 系列标题 最大 C+1 最小 C+6h1h6 的使用要体现文档内容结构具有 div的全部特征；自带文字大小，自带粗体，间距9、p 段落文本C+S+p具有 div的全部特征；自带间距10、br 强制换行符单Shift+回车11、ul无序列表li列表项具有 div的全部特征，自带间距和列表符，自带填充清除列表符，在样式中：u

3、l list-style:none;12、a文字 自带颜色和下划线13、span 局部范围设置的两大类型A、块级1、独立成行，可以设置尺寸（宽高），边框，和留白2、Div，h1h6，p，ul，liB、行级标记（内联）1、不独立成行，宽高不生效，边框生效，留白只有横向，没有纵向2、img，br，a，span如何转换类型：Display:块级（block） |行级（inline）UC 导航样式：ul： 右浮动li： 左浮动，宽度 92px；文本居中；a： 文字大小，颜色，下划线，行高，转块，左间距导航结构搭建特点：ul整体导航布局li导航项结构布局（经常被指定 float）a导航（经常被指定具体的

4、导航文字样式），如需扩大点击范围，a 需转块导航在设计的时候，要么导航项的宽度一致，要么导航项的留白一致路径1）、绝对路径站外2）、相对路径站内./返回上一级3）、邮件 点我 4）、技术页内跳转A、在你要跳转的位置用做一个记号B、在要点击的后面跟随一个名，井号保留页内文字特殊字符“”菜单html特殊字符空格“&;C+S+空格14、form表单15、input 输入框文本框type=”text”value=”初始化值”框type=”password”单选框type=”radio”name=”编组”多选框type=”checkbox”name=”编组”提交按钮type=”submit”value=

5、”按钮文字”重置按钮type=”reset”16、select 下拉列表option下拉选项17、textarea 文本域（多行文本）18、label 表单标注（扩大选择范围）三、网页样式1、书写位置1）样式在之前，应用样式 把样式引出2）外部样式新建一个css 文件，保存到首页同级目录下，放在 css 文件夹内，在首页（要关联样式的文件）中，css 面板最标），选择 css 文件即可，点击附加样式表（链条图2、关联对象（找对象）CSS 选择器名称 属性名:属性值;1）、选择器结构：样式：divwidth:1100px;2）、id 选择器结构：样式：#id 名 样式 在一级拆分用 id 起名，

6、id 名称不要重复3）、class 选择器结构：样式：.class 名 样式 应用在二级及以后拆分，class 名称可以重复使用4）、群组选择器选择器 a,选择器 b,选择器 n 样式 有相同的样式给到不同的盒，用逗号隔开，最后一个不需要逗号5）、后代选择器选择器 a选择器 b 样式 选择器 a 一定要是选择器 b 的父级盒，a 和 b 是包含和被包含的关系6）、通配符选择器* margin:0; padding:0;选择器的优先级（权重）条件 1：当有多个不同的选择器对同一个对象进行样式指定条件 2：并且有相同的属性，赋予不同的值选择器1Class 选择器10ID 选择器1007）、伪类选择

7、器A、a:link默认样式B、a:visited已样式C、a:hover鼠标悬停样式D、active按住时样式L-V-H-A3、css 属性1）、width 宽度（盒的内容的宽度）盒的宽度=width + padding-left + padding-right + border-left + border-right盒的高度=height + padding-top + padding-bottom + border-top + border-bottom2）、height高度3）、float浮动A、加浮动的盒脱离正常文档流，不再独立成行，宽度变为自适应B、加浮动的盒一定是并列关系C、做水平

8、布局的盒要浮动，全部加浮动D、加浮动后不再占位，需要给父级盒一个高来撑开E、水平排布的盒宽度总和不要超过父级盒的宽4）、margin间距（盒外）A、盒居中margin:0 auto;margin: 40px;一个值表示一圈都有 40px 的留白op 上 margin-bottom 下 margin-left 左margin-right 右marg5）、background （背景色|背景图）A、背景不属于内容，装饰意义更大，写在样式中B、背景不占位，盒有多大，背景就铺多大1）、background-image（1）、位置：文件为 web 所用格式（C+S+A+s）预设：JPG 高点击“”选择名

9、称文件夹（2）、格式：仅限图像；切片：选中的切片（3）、文件命名（不要中文，不要数字开头，不要特殊符号包括空格，如需使用，只可以用减号或下划线）2）、background-color背景色(1)、16 进制色值#FF0000-F00#ef01a6 不可缩写(2)、英文单词(3)、transparent 透明3）、background-repeat背景图重复平铺no-repeat 不重复|repeat-x 横向平铺 |repeat-y纵向平铺4）、background-ition背景图定位（1）、x 轴 y 轴（x 轴往右为正，y 轴往下为正）（2）、横向： leftcenterright纵向：

10、topcenterbottom6）、border 边框（外描边）值：颜色 粗细线类型线型：solid 实线|dashed 虚线 |dotted 点线border-top上线border-left左线border-right右线border-bottom 下线7）、padding 盒内填充在做留白时，优先选择 padding8）、font-family字体（使用网页安全字体）先英文后中文，多个字体用逗号隔开9）、font-size字号（网页默认字体大小 16px）10）、font-weight 粗体normal 正常|bold 加粗11）、color文字颜色12）、text-align文本（和文

11、字）的对齐方式left 左对齐|center 居中对齐|right 右对齐|justify 两端对齐盒居中：margin:0 auto;文字内容居中：text-align:center;背景图居中： background-ition: center center;13）、line-height 行高14）、text-decoration文本装饰线underline 下划线none 取消下划线line-through 删除线|15）、text-transform 文本的大小写转换uppercase 全部大写|lowercase 全部小写|capitalize 首字母大写16）、font-styl

12、e斜体italic 斜体normal 正常|17）、background-colorrgba(r, g, b, a);例：rgba(0,0,0,0.5);兼容版浏览器 CSS3.0RGB：红绿蓝三原色a:，取值范围：0118）、ition 定位A、absolute 绝对定位a)、应用绝对定位的盒不再占位，宽度变为自适应b)、默认以浏览器的四个角为坐标原点，通过 left, right, top, bottom 改变B、relative 相对定位a)、应用相对定位后，绝对定位的盒就以它的四个角为坐标原点b)、相对定位依然占位c)、相对定位一定是绝对定位盒的父级盒d)、相对定位一定是有固定尺寸的e

13、)、的调整，往盒内为正值，往盒外为负值（值设置在绝对定位盒上）绝对定位应用步骤：1、谁要遮盖其他元素，给谁应用ition:absolute 绝对定位2、找有固定尺寸的父级盒应用ition:relative 相对定位3、回到绝对定位盒上，通过 left, right, top, bottom 中的两个方向（横向一个，纵向给一个）改变C、fixed 固定定位a)、应用固定定位后，宽度变为自适应，不再占位b)、默认以浏览器的四个角为基点19)、z-index 特殊定位的层级调整 （没有，只针对特殊定位盒）20)、box-shadow 盒阴影 兼容版浏览器 CSS3.0值：x 轴偏移y 轴偏移投影羽化

14、（大小）投影颜色21)、vertical-align垂直居中（只针对行级）浏览器兼容性设置：（IE，火狐，谷歌苹果，）1、字体2、加后，会自带边框在样式中加入公共样式： img border:none;22）、cursor 鼠标的指针poer 手型23）、letter-spacing 字间距24）、border-radius圆角边框 CSS3.0一个值表示四个角都有圆角，四个值：左上角 右上角 右下角左下角25）、resize 针对多行文本改变大小改变大小resize:none;26）、outline表单元素的轮廓线取消轮廓线outline:none27）、clear 清除（浮动）A、在一组并

15、列浮动的盒后面添加一个盒B、在样式中添加.clear clear:both;响应式笔记一、html51、header页眉2、nav导航3、footer页脚4、article文章5、aside侧边栏6、mp4flvsrc=”地址”autoplaycontrols/7、audio音频 mp3二、css3.0 样式1、text-shadow 文字阴影text-shadow:0px 0px 2px red;x 轴偏移y 轴偏移投影羽化 投影颜色2、查询火狐浏览器 C+S+m 响应式模式mediascreenand(max-width:980px)小于等于 980px 宽度时的样式类型|设备类型screenmax-width不大于（小于等于）3、transition 过渡transition: all ease 0.3s 1s;过渡属性过渡速度 动画执行时间 延迟时间ease-in 加速ease-outease-in-o