网页设计(基础篇)1.0

PHP教程 Page1 内容概要 HTML结构及常用标签简介表格表单和框架CSS样式表网站设计和页面布局技术 PHP教程 Page2 HTML文件的基本结构 HTML文档的结构 我的第一个网页HelloWorld HTML网页 头部部分 主体部分 标签标记HTML文档的开始和结束 网页标题 网页内容 可以是文本 图像等 这部分包含文本 图像和链接 它包括在 标签内 这部分包括标题和其他说明信息 包括在 标签内 PHP教程 Page3 使用记事本创建网页 使用记事本创建网页的步骤 1 打开记事本2 输入HTML代码3 保存为 html或 htm文件 注意格式问题4 打开网页预览效果 使用记事本创建网页 PHP教程 Page4 标签 网页标题 网页页面中出现乱码 那如何消除乱码使其正常显示 使用标签 简体中文 gb2312繁体中文 big5纯英文网页 iso 8859 1 可以避免页面中的乱码 PHP教程 Page5 页面背景色或背景图像 HelloWorld 为了使页面美丽大方 网页背景要尽量地浅 HelloWorld 网页背景色彩 网页背景图像 PHP教程 Page6 文本相关标签 字体 字号标题标签 标签特殊符号行的控制段落标签换行标签 使用了 换段了 设置了字体的大小和颜色 换行了 特殊符号 PHP教程 Page7 字体 字号相关标签 标题标签 1 2 3 4 5 6说明 到字体大小依次递减 一级标题二级标题三级标题四级标题五级标题六级标题 H1到H6标签用于指定不同级别的标题 PHP教程 Page8 字体 字号相关标签 标签特殊符号 字体的大小值 字体的颜色 字体的类型 PHP教程 Page9 字体 字号相关标签 手机充值 IP卡 电话卡移动Allrights 空格效果 PHP教程 Page10 淘宝集市欢迎您 淘宝网首届翠友会 行的控制相关标签 段落标签段 Paragraph 可以看作是空行 换行标签换行 换段了 换行了 PHP教程 Page11 图像标签 常见的图片格式介绍 PHP教程 Page12 图像标签 图像的基本语法 鼠标移到图像上 出现的提示性文字 图像的位置 图像的宽度 图像的高度 为图像添加的提示性文字 PHP教程 Page13 图像标签 图像与文本的对齐方式 图像与文本居中对齐 还可以取top bottom值 请点击广告进入明星专区 图像和文本居中对齐 PHP教程 Page14 文字布局 内容分隔标签项目列表和编号有序列表无序列表预格式文本标签 水平分隔线 有序列表 无序列表 用了预先定义好的格式 PHP教程 Page15 如何使用内容分隔标签 线的厚度值 线的宽度 标签用于在页面上绘制水平线 线的颜色 PHP教程 Page16 如何使用列表 无序列表语法列表项内容 有序列表语法列表项内容 注册步骤 填写信息收电子邮件注册成功新人上路指南如何激活会员名 如何注册淘宝会员 注册时密码设置有什么要求 支付宝认证 PHP教程 Page17 预格式文本标签 如何实现如下图所示的页面中的文字效果 使用标签可以实现 PHP教程 Page18 如何使用预格式文本标签 腾讯 QQ币 QQ幻想 30元卡一口价 26 45元运费 卖家承担运费剩余时间 5天宝贝类型 全新卖主声明 货到付款 可试用10天 HTML中代码格式与浏览器中显示效果一样 PHP教程 Page19 页面链接标签 链接到其他页面 免费注册 链接内容 链接的地址 链接到其他页面 免费注册 登录 单击 免费注册 之后链接到的页面 PHP教程 Page20 页面链接标签 链接到其他页面相对路径指定从根目录到文件的完整路径 绝对路径指定相对于当前文件的文件位置 在同一个文件夹下有两个html文件 从一个文件超链接到另一个文件的路径有几种方式 两种方式 相对路径和绝对路径 PHP教程 Page21 页面链接标签 要链接到同一目录 C HTML 下的页面 可编写或 相对路径名 绝对路径名 PHP教程 Page22 页面链接标签 链接到本页面锚记标签用于使用户 跳 到文档的某个部分HTML的NAME属性用于创建锚标记主题名称为达到这种跳转效果 请在HREF参数中使用该标记主题名称 PHP教程 Page23 锚记标签 链接到其他页面 新人上路 新人上路指南 1 定义锚标记 2 链接到锚标记所在位置 PHP教程 Page24 页面链接标签 电子邮件链接要链接电子邮件 可在链接标签中插入 mailto 邮箱地址 站长信箱 PHP教程 Page25 滚动标签 滚动文字或图像 滚动延迟时间 滚动对象的方向 说明 scrolldelay 表示滚动延迟时间 默认值为90 direction 表示滚动的方向 默认为从右向左 PHP教程 Page26 滚动标签 水平滚动垂直滚动Avon化妆品雅诗兰黛 水平向左移动 垂直向上移动 图片和文字同时垂直向上移动 声明滚动文字结束 声明滚动文字 水平滚动 开始 并且将会以默认方式从右向左滚动 PHP教程 Page27 表格的基本语法 单元格内容 border用来设置表格边框尺寸大小 PHP教程 Page28 跨行跨列的表格 跨3列 跨3行 PHP教程 Page29 跨行跨列的表格 学生成绩表英语数学语文959889 COLSPAN n 属性表示跨多少列 PHP教程 Page30 跨行跨列的表格 早上菜谱食物鸡蛋饮料牛奶甜点开心粉 rowspan n 属性表示跨多少行 PHP教程 Page31 跨行跨列的表格 手机充值 IP卡办公设备 文具各种卡的总汇铅笔彩笔打印刻录 PHP教程 Page32 表格的美化修饰 PHP教程 Page33 设置表格的尺寸和边框 品牌商城笔记本电脑办公设备 文具 耗材惠普华硕打印机刻录盘 width用来设置表格的宽度height用来设置表格的高度 border用来设置表格边框尺寸大小 bordercolor用来设置表格边框颜色 PHP教程 Page34 设置背景 笔记本电脑办公设备 文具 耗材 background属性用来设置表格的背景图片 bgcolor属性用来设置表格 行 列的背景色 EBEFFF 是用RGB表示的一种颜色值 RGB指的是红绿蓝 下图就是RGB颜色对照表 PHP教程 Page35 设置对齐方式 笔记本电脑办公设备 文具 耗材惠普华硕打印机刻录盘 align属性用来设置表格 行 列的对齐方式 PHP教程 Page36 填充属性和间距属性 border 边框的厚度 cellpadding 单元格填充 cellspacing 单元格间距 PHP教程 Page37 设置填充属性和间距属性 border 边框的厚度 cellpadding 单元格填充 cellspacing 单元格间距 PHP教程 Page38 笔记本电脑办公设备 文具 耗材 cellspacing属性用来设置表格内框宽度cellpadding属性用来设置表格内填充距离 填充之后的效果 PHP教程 Page39 表单 提供搜索工具 PHP教程 Page40 表单 反馈信息 PHP教程 Page41 表单 注册用户 PHP教程 Page42 表单包含的控件 单行文本输入框 TEXT 单选按钮 RADIO 复选框 CHECKBOX 下拉列表 SELECT 重置按钮 RESET 提交按钮 SUBMIT 多行文本框 TEXTAREA 密码框 PASSWORD PHP教程 Page43 表单页面的基本结构 METHOD post或get ACTION METHOD 指定提交后 由服务器上那个处理程序处理 指定向服务器提交的方法 一般为post或get方法 post方法比较安全 ACTION URL PHP教程 Page44 表单元素的统一格式 指定元素的类型 可为TEXT RADIO SUBMIT等 控件的名称 控件的初始值 控件的初始宽度 控件中输入的最多字符个数 控件是否被选中 PHP教程 Page45 表单元素的逐一介绍 文本框基本语法 名字 单行文本输入框 字符宽度为20 文本区的宽度 输入元素的默认值 文本输入框 PHP教程 Page46 表单元素的逐一介绍 密码框基本语法 密码区宽度 初始密码 密码框 密码 密码框 22个字符宽度 PHP教程 Page47 表单元素的逐一介绍 单选按钮基本语法 初始值 单选按钮 默认选中 性别 男 设置此单选按钮被选中 PHP教程 Page48 表单元素的逐一介绍 复选框基本语法 复选框 复选框名 复选框值 聊天 设置此复选框被选中 PHP教程 Page49 表单元素的逐一介绍 列表框基本语法 说明 size确定列表中可同时看到的行数 selected默认被选中的可选项 PHP教程 Page50 表单元素的逐一介绍 出生日期 日 设置此输入框最多只能输入四个符号 设置 选择月份 选项默认被选中 PHP教程 Page51 表单元素的逐一介绍 按钮基本语法 按钮名称 按钮类型可为button submit 按钮上的标签 单击按钮 控件的值被重置为value属性中指定的初始值 PHP教程 Page52 表单元素的逐一介绍 多行文本框基本语法文本框中的内容 文本框的名字 文本框的列数 文本框的行数 欢迎阅读服务条款协议 本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务 本服务协议双方为淘宝与淘宝网用户 本服务协议具有合同效力 淘宝的权利和义务 6行40个字符宽度的多行文字域 PHP教程 Page53 表单元素的逐一介绍 文件域基本语法 PHP教程 Page54 框架 广告栏顶部框架 top htm 导航栏左侧框架 left htm 详细内容页面右侧框架 main htm 框架的边框 框架集页面 FrameSet htm PHP教程 Page55 框架使用场合 页面的一个固定部分显示徽标或静态信息 在另一个固定部分显示导航部分详细内容 在此处显示详细内容 页面中此部分是变化的 PHP教程 Page56 框架的基本结构 框架页面的基本语法 边框尺寸大小 将窗口分割成左中右3个部分 可选 将窗口分割成上下2个部分 可选 第一个窗口要显示的网页 PHP教程 Page57 框架的基本结构 rows cols框架 将窗口分割成上中下3部分 窗口边框的宽度 如果要在浏览器中创建左中右三个窗口 该如何实现 每个窗口对应一个页面 以及一个框架集页面 总共需要几个HTML页面文件 PHP教程 Page58 创建多个复杂的窗口 要实现如下图所示的窗口 该如何制作 1 分成上下两个窗口2 把下面的窗口分成左右两个窗口 top窗口 left窗口 right窗口 PHP教程 Page59 创建多个复杂的窗口实现步骤如下 1 创建一个HTML页面 top html 2 创建一个HTML页面 left html 3 创建一个HTML页面 right html 4 新建多框架HTML页面 Frame Sets html PHP教程 Page60 设置无框架边框 不显示滚动条 禁止调整框架大小 框架名称 便于超文本链接锚标签target属性所引用 Frame Sets html PHP教程 Page61 设置窗口链接的显示位置 target目标窗口属性name 显示的窗口名 target属性指定了所链接的文件出现在名称为 窗口名 的框架窗口里 target属性指定了所链接的文件出现在名称为 rightframe 的框架窗口里 PHP教程 Page62 设置窗口链接的显示位置 target目标窗口属性四个特殊的窗口显示在新窗口显示在本窗口显示在父窗口显示在整个浏览器窗口 PHP教程 Page63 设置窗口链接的显示位置 新启一个窗口打开文件 right html PHP教程 Page64 top html left html right1 html或right2 html frame sets html 编写如下图所示效果对应的html代码 PHP教程 Page65 为什么需要CSS样式表 HTML标签的外观样式比较单一颜色只有黑白字体类型和大小无变化样式表的作用相当于华丽的衣服 内容相同 外观不同 PHP教程 Page66 为什么需要CSS样式表 样式表能实现内容与样式的分离 方便团队开发 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 PHP教程 Page67 样式表的基本语法 样式表的基本结构 P color red font size 30px font family 隶书 声明文档样式表结束 文档样式表开始 类型为CSS样式 样式规则 选择器 样式规则P color red font size 30px font family 隶书 PHP教程 Page68 样式表的基本语法 样式规则P color red font family 隶书 font size 24px 静夜思床前明月光 疑是地上霜 我是郭德刚 低头思故乡 本页面中所有的P标签都应用了此样式 所有的段落都采用P样式 保证风格统一 用分号隔开 选择器 如何编写此样式 字体类型为律书 大小24px PHP教程 Page69 样式表的基本语法 red color red font family 隶书 font size 24px 如果想使其他标签和P标签应该采用相同的样式 需要为它们定义一个共享样式 类样式 class 类名 样式规则 PHP教程 Page70 样式表的基本语法 样式规则 red color red font family 隶书 静夜思床前明月光 疑是地上霜 我是郭德刚 低头思故乡 CLASS类选择器 为类选择器定义的样式规则 应用类选择器class 类名 和标签要应用同一样式 如何实现这样的样式效果 字体类型都为隶书 PHP教程 Page71 常用的样式属性 文本属性 PHP教程 Page72 常用的样式属性 P font size 12px font family 宋体 text align left bigFont font size 16px color red 新闻 设搜狐为首页 9月1日 世锦赛刘翔12秒95夺冠成就大满贯 我国实施不安全食品召回制度遏制非法出口 声明P标签样式 声明名称为bigFont类样式 它可被多个标签共享 应用类样式用class 类名 PHP教程 Page73 常用的样式属性 背景属性 table background image url images type back1 jpg background repeat no repeat 设置背景图像为images文件夹下的type back1 jpg 设置背景图像不平铺 PHP教程 Page74 常用的样式属性 方框属性 margin right右边界 margin left左边界 margin top上边界 margin bottom下边界 margin border padding border width边框的宽度 padding left左填充 padding bottom下填充 PHP教程 Page75 常用的样式属性 方框属性 PHP教程 Page76 常用的样式属性 textBorder border width 1px border style solid 名字 密码 文本框为实线边框 边框宽度为1像素 PHP教程 Page77 常用的样式属性 特殊样式 超连接 a link color FF0000 未被访问的链接红色 a visited color 00FF00 已被访问过的链接绿色 a hover color FFCC00 鼠标悬浮在上的链接橙色 a active color 0000FF 鼠标点中激活链接蓝色 PHP教程 Page78 常用的样式属性 A color blue text decoration none A hover color red 诺基亚 摩托罗拉联想 戴尔 超链接文本的样式 鼠标在超链接上悬停时 超链接文本变为红色 PHP教程 Page79 练习 编写如下图所示效果对应的HTML代码 细边框solid样式 无下划线的超连接样式 鼠标在超链接上悬停时 超链接文本变为红色 PHP教程 Page80 常用的样式属性 要实现下图图片按钮的效果 该如何编写样式规则 按钮的边界 边框 填充值均为0px 使用background image margin border padding height width和font size属性 按钮背景图像与按钮宽度 高度大小一样 字体大小14px 综合例子 制作图片按钮 PHP教程 Page81 常用的样式属性 picButton background image url images back jpg border 0px margin 0px padding 0px height 23px width 82px font size 14px 背景图像为images文件夹下的back jpg 设置按钮上的字体大小为14像素 PHP教程