网站设计与制作PPT课件.ppt

WEB开发 网站设计与制作 Page 2 主要内容 Page 2 Photoshop网页设计 Photoshop网页设计 切图 如何使用PS设计网页 为什么要使用PS设计网页 Page 3 为什么要使用Photoshop设计网页 效果图 便于审阅 易修改 Page 4 如何使用Photoshop设计网页 排版 网页布局 配色 网页设计的注意事项 网页中图片格式 网页设计实例分析 Page 5 网页的布局设计流程 1 按照一定的规律把网页中图像和文字等页面元素排列到最佳的位置 也可以称为网页排版 门户类综合类 企业类 艺术类 Page 6 常见的网页布局结构 1 国字 型布局 国 字型布局由 同 字型布局进化而来 因布局结构与汉字 国 相似而得名 其页面的最上部分一般放置网站的标志和导航栏或Banner广告 页面中间主要放置网站的主要内容 最下部分一般放置网站的版权信息和联系方式等 Page 7 常见的网页布局结构 2 T型布局T型布局结构因与英文大写字母T相似而得名 其页面的顶部一般放置横网站的标志或Banner广告 下方左侧是导航栏菜单 下方右侧则用于放置网页正文等主要内容 Page 8 Page 9 常见的网页布局结构 3 标题正文型标题正文型布局的布局结构一般用于显示文章页面 新闻页面和一些注册页面等 Page 9 常见的网页布局结构 4 左右框架型布局左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构 其布局结构主要分为左右两侧的页面 左侧一般主要为导航栏链接 右侧则放置网站的主要内容 Page 10 常见的网页布局结构 6 综合框架型综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术 Page 11 常见的网页布局结构 7 POP布局POP布局是一种颇具艺术感和时尚感的网页布局方式 页面设计通常以一张精美的海报画面为布局的主体 Page 12 常见的网页布局结构 8 FLASH布局FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式 在这种布局中 大部分甚至整个页面都是Flash Page 13 配色 1 网站整体定位 配色不要太杂LOGO字体12px14px版块安排 确定主体颜色 基本色调普通连接 三种同类色 导航栏连接 Page 14 网页设计的注意事项 Page 15 网页设计的注意事项 Page 16 网页设计的注意事项 Page 17 网页设计的注意事项 Page 18 网页设计的注意事项 Page 19 Page 20 网页设计的注意事项 Page 20 Page 21 网页设计的注意事项 Page 21 网页设计的注意事项 Page 22 网页设计的注意事项 网页中图片的格式 Page 23 实例分析 Page 24 HTML CSS DIV CCS选择器 CSS盒状模型 HTML简介 定义 HTML HyperTextMark upLanguage 即超文本标记语言或超文本链接标示语言作用 为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起 形成有机的整体 简介 1 HTML文本是由HTML命令组成的描述性文本 HTML命令可以说明文字 图形 动画 声音 表格 链接等 2 HTML是网络的通用语言 一种简单 通用的全置标记语言 不需要用任何专门的软件来建立HTML页面 你所需要的只是一个记事本以及HTML的工作常识 3 HTML只不过是组合成一个文本文件的一系列标签 Page 25 HTML CSS DIV CCS选择器 CSS盒状模型 AdobeDreamweaver可视化网页编辑工具 见演示 AdobeDreamweaver 简称 DW 中文名称 梦想编织者 是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器 它是第一套针对专业网页设计师特别发展的视觉化网页开发工具 利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页 AdobeDreamweaver使用所见即所得的接口 亦有HTML 标准通用标记语言下的一个应用 编辑的功能 它有Mac和Windows系统的版本 随Macromedia被Adobe收购后 Adobe也开始计划开发Linux版本的Dreamweaver了 Dreamweaver自MX版本开始 使用了Opera的排版引擎 Presto 作为网页预览 Page 26 HTML CSS DIV CCS选择器 CSS盒状模型 AdobeDreamweaver可视化网页编辑工具 见演示 Page 27 HTML入门 HTML页面以标签开始 以结束 在它们之间 整个页面有两部分 标题和正文 标题词 夹在和标签之间 这个词语在打开页面时出现在屏幕底部最小化的窗口 正文则在和之间 即所有页面的内容所在 页面上显示的任何东西都包含在这两个标签之中 请看结构示例 最简单的网站源码示例html 1 html 我的网站网站内容 Page 28 HTML入门 HTML文件与普通的纯文本文件的最大不同在于一些用 包含的东西 例如 我们把他们叫做标签 通常情况下HTML标签都是成对出现的 例如 可以看到它们只相差一个 我们把类似的没有 的标签叫做起始标签 而它对应的有 的则叫终止标签 终止标签与起始标签只相差一个 符号 Page 29 HTML入门 表格层列表链接 常见的对应标签 Page 30 熟悉HTML 常用 标签 标签注释标签用来在源文档中插入注释 注释会被浏览器忽略 您可使用注释对您的代码进行解释 这样做有助于您在以后的时间对代码的编辑 Page 31 熟悉HTML 常用 标签 标签标签定义文档与外部资源的关系 标签最常见的用途是链接样式表 Page 32 熟悉HTML 常用 标签 标签标签用于定义客户端脚本 比如JavaScript script元素既可以包含脚本语句 也可以通过src属性指向外部脚本文件 必需的type属性规定脚本的MIME类型 document write HelloWorld Page 33 熟悉HTML 常用 标签 标签标签用于为HTML文档定义样式信息 在style中 您可以规定在浏览器中如何呈现HTML文档 type属性是必需的 定义style元素的内容 唯一可能的值是 text css style元素位于head部分中 Page 34 熟悉HTML 常用 标签 h1 color red p color blue Page 35 熟悉HTML 常用 标签 标签body元素定义文档的主体 body元素包含文档的所有内容 比如文本 超链接 图像 表格和列表等等 Page 36 熟悉HTML 常用 标签 标签标签可以把文档分割为独立的 不同的部分 它可以用作严格的组织工具 并且不使用任何格式与其关联 如果用id或class来标记 那么该标签的作用会变得更加有效 Page 37 熟悉HTML 常用 标签 用法是一个块级元素 这意味着它的内容自动地开始一个新行 实际上 换行是固有的唯一格式表现 可以通过的class或id应用额外的样式 不必为每一个都加上类或id 虽然这样做也有一定的好处 可以对同一个元素应用class或id属性 但是更常见的情况是只应用其中一种 这两者的主要差异是 class用于元素组 类似的元素 或者可以理解为某一类元素 而id用于标识单独的唯一的元素 Page 38 熟悉HTML 常用 标签 标签标签定义段落 p元素会自动在其前后创建一些空白 浏览器会自动添加这些空间 您也可以在样式表中规定 Thisissometextinaveryshortparagraph Page 39 熟悉HTML 常用 标签 标签指向w3school的超链接 W3School Page 40 熟悉HTML 常用 标签 标签标签呈现粗体文本效果 标签是基于内容的样式标签的物理版本 但它没有后者的扩展意义 标签明确地将包括在它和其结束标签之间的字符或者文本变成粗体 如果某种加粗的字体不可用 浏览器将使用一些其他的表现方法 例如反相显示或者加下划线等 Page 41 熟悉HTML 常用 标签 标签标签被用来组合文档中的行内元素 sometext someothertext Page 42 熟悉HTML 常用 标签 标签可插入一个简单的换行符 标签是空标签 意味着它没有结束标签 因此这是错误的 在XHTML中 把结束标签放在开始标签中 也就是 请注意 标签只是简单地开始新的一行 而当浏览器遇到标签时 通常会在相邻的段落之间插入一些垂直的间距 Page 43 熟悉HTML 常用 标签 标签定义文档中已被删除的文本 adozenis2012pieces请与标签配合使用 来描述文档中的更新和修正 一打有二十十二件 Page 44 熟悉HTML 常用 标签 标签标签定义有序列表 咖啡牛奶茶 Page 45 熟悉HTML 常用 标签 标签标签定义无序列表 CoffeeTeaMilk Page 46 熟悉HTML 常用 标签 标签标签定义了定义列表 definitionlist 标签用于结合 定义列表中的项目 和 描述列表中的项目 计算机用来计算的仪器 以视觉方式显示信息的装置 Page 47 熟悉HTML 常用 标签 到标签 标签可定义标题 定义最大的标题 定义最小的标题 这是标题1这是标题2这是标题3这是标题4这是标题5这是标题6 Page 48 熟悉HTML 常用 标签 标签img元素向网页中嵌入一幅图像 请注意 从技术上讲 标签并不会在网页中插入图像 而是从网页上链接图像 标签创建的是被引用图像的占位空间 标签有两个必需的属性 src属性和alt属性 Page 49 熟悉HTML 常用 标签 标签标签用于搜集用户信息 根据不同的type属性值 输入字段拥有很多种形式 输入字段可以是文本字段 复选框 掩码后的文本控件 单选按钮 按钮等等 Firstname Lastname Page 50 熟悉HTML 常用 标签 标签标签为input元素定义标注 标记 label元素不会向用户呈现任何特殊效果 不过 它为鼠标用户改进了可用性 如果您在label元素内点击文本 就会触发此控件 就是说 当用户选择该标签时 浏览器就会自动将焦点转到和标签相关的表单控件上 标签的for属性应当与相关元素的id属性相同 Page 51 熟悉HTML 常用 标签 标签MaleFemale Page 52 熟悉HTML 常用 标签 标签select元素可创建单选或多选菜单 当提交表单时 浏览器会提交选定的项目 或者收集用逗号分隔的多个选项 将其合成一个单独的参数列表 并且在将表单数据提交给服务器时包括name属性 VolvoSaabOpel Page 53 熟悉HTML 常用 标签 标签标签定义HTML表格 简单的HTML表格由table元素以及一个或多个tr th或td元素组成 tr元素定义表格行 th元素定义表头 td元素定义表格单元 Page 54 熟悉HTML 常用 标签 HTML表单中有两种类型的单元格 表头单元格 包含表头信息 由th元素创建 标准单元格 包含数据 由td元素创建 标签定义HTML表格中的行 tr元素包含一个或多个th或td元素 Page 55 熟悉HTML 常用 标签 MonthSavingsJanuary 100 Page 56 CSS基础 什么是CSS 中文翻译为样式表 它的作用简单的说 就是可以使你在同一页面里使用不同的超链接样式 更神奇的是 用CSS 仅仅改变一个文件就可以改变数百个网页的外观 个性化的表现而不损失访问者 所有这些都因为网页样式表的强大和灵活特性 Css会使代码更整洁Css简单 规则简单Css复杂 应用范围广 Page 57 CSS基础 Css 样式表 由若干个样式规则组成 以告诉浏览器怎样去呈现一个文档样式规则嵌入网页的几种方式 一 在head标签中加载一个CSS文件示例 此例使用了link标签 content font size 12px menu font size 10px color FFFFFF Page 58 CSS基础 外部调用好处你可以不修改页面 只修改 css文件而改变所有页面的样式 外部调用缺点碰到网络不顺畅的情况 页面打开以后 链接的样式表没有加载成功 这种情况造成的后果 不仅仅是页面文字的颜色 大小等等样式无法显示 更麻烦的是很可能造成整个页面的布局乱了套 Page 59 CSS基础 嵌入方式选择首页完全采用嵌入的方法 其他页面均采用链接的方式 优点 这样可以保证首页在网络状况不好的情况下仍然能够正确显示 缺点 修改样式时需要修改外部样式表和首页内嵌的样式表两个地方 Page 60 CSS基础 样式规则组成如下 选择符 声明声明由 属性 值 单一选择符的多个声明应该用分号隔开 选择符 属性1 值1 属性2 值2 示例 CSS例子H1 font size 14px H2 font size 12px color blue 上述的样式表告诉浏览器用14号字体去显示一级标题 用大 蓝色字体去显示二级标题 Page 61 CSS基础 注意事项 CSS的选择符区分大小写 如 header和Header是两个不同的元素最后一条声明可以没有分号结束 但为了修改方便 最好也加上为了方便阅读 将一条声明写成一行 Page 62 CSS基础 选择符分类 一 类型选择符指的是HTML中的元素 如ph1h2table二 类选择符用户自定义的选择符号 以英文 开始如 menu引用方式class 类选择符名称如三 Id选择符和类选择符相似 只不过是以 开始 如 menu引用方式id id选择符名称如内容 Page 63 CSS基础 选择符分类 四 包含选择符E1E2 属性 值 意义是选择所有被E1包含的E2注 E1E2可以为类选择符 ID选择符示例 html 6 html Page 64 CSS基础 区别 类选择符和ID选择符区别类选择符可以重复使用 并可以用在任意元素上 ID选择符是唯一的 重复利用不会报错 但不合规范 Page 65 CSS基础 伪类和伪元素 除了标签选择符 id选择符 class选择符之外 CSS也还有一种选择符 伪类和伪元素选择符伪类选择符是基于一组预定于性质的选择符 html元素可以占有这些预定义性质伪类 link未跟踪的链接 visited以前访问过的链接 hover指向的元素 例如通过鼠标 active被激活的元素 例如激活的链接 示例a link color FF0000 未被访问的链接红色 a visited color 00FF00 已被访问过的链接绿色 a hover color FFCC00 鼠标悬浮在上的链接橙色 a active color 0000FF 鼠标点中激活链接蓝色 注 由于CSS优先级的关系 后面比前面的优先级高 在写a的CSS时 一定要按照a link a visited a hover a actived的顺序书写 Page 66 CSS基础 分组 五 可以将同样的定义用于多个选择符 不同的选择符用英文的 分开Div p menu font size 12px 六 通配选择符可以为所有元素设定统一的属性 margin 0auto Page 67 CSS基础 选择符注意事项 1 空格是有效的 如果有超过一个以上的空格 其它的会被忽略 只保留一个 特别是声明字体的时候 空格一定不能省略 s1 font italicnormalbold11ptarial menu border 1pxsolidred 2 对于未声明的属性和方法 将会被忽略 Page 68 层叠和重要性 不同的规则应用于同一元素时 按前后顺序来决定权重 后写的优先采用p color blue p color red 特殊性 如果作者需要某个规则为最高权重 则要标示 重要规则 p color blue important p color red 特殊性 Page 69 单位和值 值是对属性的描述 而单位是值的基础 menu font size 10 颜色p color red 浏览器只支持16种p color ffcc00 十六进制 如3组各自两位的相同可以缩写 fc0长度像素PX百分比 Page 70 单位和值 字体 Page 71 背景 包括背景颜色 背景图片及背景图片如何重复显示器 Page 72 Css盒模型 什么是 模型 本质特征的抽象 Page 73 Css盒模型 每个HTML元素都可以看做是装了东西的盒子 盒子里面的东西与盒子的边框之间的距离即填充 padding 盒子本身有边框 border 每个盒子与其它盒子之间的距离称为边界 margin Page 74 Css盒模型 所有页面中的元素都可以看成一个盒子 占据着一定的页面空间 可以通过调节盒子的边框和距离等参数 来调节盒子的位置 一个盒子模型由content 内容 border 边框 padding 内边距 margin 外边距 这4个部分组成 Page 75 属性值的简写形式 如果给出2个属性值 前者表示上下边框的属性 后者表示左右边框的属性 如果给出3个属性值 前者表示上边框的属性 中间的数值表示左右边框的属性 后者表示下边框的属性 如果给出4个属性值 依次表示上 右 下 左边框的属性 即顺时针排序 例如 border color redgreen border width 1px2px3px border style dotteddashedsoliddouble Page 76 border border一般用于分离元素 计算元素实际的宽和高时 要将border也考虑进去 border的属性主要有3个 color width style实例 1 html Page 77 2 3border 如果希望在某段文字结束后加上虚线用于分割 而不是用border将整段话框起来 可以通过单独设置border bottom来完成 实例 1 html Page 78 padding padding用于控制content与border之间的距离 如果在之前实例的基础上 加入padding bottom的语句 就可以实现如下效果 实例 1 html在设置4个方向的padding时也可以简写 实例 1 html Page 79 margin margin是指元素与元素之间的距离 同样在实例1的基础上 加入margin bottom的语句 实现如下效果 Page 80 行内元素之间的水平margin 当两个行内元素紧邻的时候 他们之间的距离为第1个元素的margin right加上第2个元素的margin left 实例 3 htmlspan left margin right 30px background color a9d6ff span right margin left 40px background color eeb0b0 Page 81 块级元素之间的竖直margin 两个产生换行效果的块级元素的竖直距离不再是margin bottom与margin top的和 而是两者中的较大者 实例 块元素1块元素2 Page 82 父子关系的margin