新版第3章HTML网页设计基础ppt课件.ppt

电子商务网站建设高怡新编著 上海建桥学院2020年3月28日 第3章HTML网页设计基础 3 1认识和使用HTML3 2HTML常用标记3 3HTML表单标记3 4用DREAMWEAVER设计HTML 第3章HTML网页设计基础 3 1认识和使用HTML 3 1 1什么是HTMLHTML是一个结构化的文本标记语言 使用各种不同的标记符号来分别标识和设定不同的网页元素 每一个网页元素一般由一对标记 用尖括号表示的开始标记和结束标记 以及夹在这一对标记中的内容所组成 一个HTML元素的形式可表示为 内容注意 1 有些网页元素没有内容 即控元素 如等2 有些网页元素不需要结束标记 如 等3 1 2HTML文档基本架构网页标题这是正文部分 3 1认识和使用HTML HTML文档中以为一级标记 其中可包含三种二级标记 和 而和两者中只能出现其中一种 其他低级网页元素标记只能嵌套出现在这两个标记中 注意 1 HTML不区分字母大小写 除非个别网页元素的属性值 2 HTML对于连续空格 Tab键和回车键只接受一个 除非出现在元素中 3 HTML对于网页元素的界定只依据其开始和结束标记 在开始标记中设置多个属性应以空格 Tab键和回车键分隔 4 HTML对于有些符号表示必须用半角双引号括起或用特殊标记表示 如空格用 或 表示等P72 5 HTML文档中可用表示注释 6 HTML文档中的网页元素标记可以嵌套 但不能交叉 3 1认识和使用HTML 3 1 3创建一个简单的HTML文档由于HTML文档是一个纯文本文件 可用任何能进行文本编辑的编辑器 如记事本 写字板和Word等 要求用户熟知HTML语法标记 目前 广泛使用可视化的网页制作软件 如FrontPage和Dreamweaver等 能提供方便的图形操作界面 实现 可见即所得 能自动生成HTML文档 例1请用Word编写一个HTML文档 ch3 01 htm 能在浏览器一不同字体 颜色和大小的文字显示自己基本信息 学号 姓名 性别 地址 手机号码和Email地址等 3 2HTML常用标记 3 2 0通过网页制作熟悉HTML常用标记 补充 动态网页的功能通常是通过在传统HTML文档中嵌入的脚本程序实现的 为了进一步学习动态网页的制作 必须较好熟悉掌握HTML语言 在以后网页设计的过程中 建议使用查看 代码菜单命令 查看相应的HTML代码 Dreamweaver 以下简记为DM 是目前最流行的专业级网页设计工具 使用DM制作网页一般先要建立一个站点和选择网页类型模板 1 创建一个站点利用Dreamweaver设计网页前 应先创建一个网站 其步骤如下 选择站点 新建站点菜单命令选择新建本地信息站点 并输入站点名称和选择站点目录注意 1 可利用站点 管理站点菜单命令 建立 修改 复制和移除站点 2 设计网页必须先用站点 打开站点菜单命令打开网页所在的站点2 制作网页网站建设的主要工作就是在站点中制作网页 文件 新建文件 可在出现的空白页面上制作网页文件 从模板新建 选择页面模式 可在出现模式页面上制作页面 3 2HTML常用标记 3 2 1段落类标记1 标题标记P69标题文字2 分段标记P69文字3 换行标记P69文字4 横线标记P695 文本块标记P70文字例2编写一个网页 ch3 02 htm 尽可能多使用上述段落标记 仿照P71显示一家网上商店的欢迎页面 3 2HTML常用标记 3 2 2文字格式标记1 字体标记P71文字2 特殊字符标记P72字符 用字符串 表示 例3编写一个网页 ch3 03 htm 尽可能多使用使用上述文字格式标记 仿照P73显示不同字体 颜色和大小的文字页面 3 2HTML常用标记 3 2 3列表标记1 无序列表标记P73列表项1列表项2 列表项n2 有序列表标记P74列表项1列表项2 列表项n例4编写一个网页 ch3 04 htm 尽可能多使用上述列表标记 仿照P75显示一家网上商店的商品信息页面 3 2HTML常用标记 3 2 4表格标记P75h1h2 d11d12 d21d22 例5利用DW制作P78显示的网页 ch3 05 htm 阅读生成的HTML代码 熟悉上述表格标记的使用 3 2HTML常用标记 3 2 5超链接标记P78用作超链接的文字或图像例6编写一个网页 ch3 06 htm 仿照P75显示页面 包含文字和图片的超级链接 链接目标包括Internet网页 本机非站点中网页文件和自己的邮箱 并在站点中为放置网页中的图片建立一个虚拟目录picture 3 2 6框架标记P79框架标记将浏览器窗口分成多个区域 每个区域可显示一个HTML文件 注意 1 设计框架网页时 保存网页文件必须明确当前操作对象是何框架 2 利用框架标记嵌套 可设计形式多样的框架 3 2HTML常用标记 例7编写一个框架网页 frame1 htm 其中划分成品字形三个框架 上方框架显示网页top htm 其中居中显示文字 框架网页应用 左下方框架显示网页ch3 07 htm 其中出现仿照P81的列表形式链接 单击其中链接 链接页面将显示在右下方框架中 右下方框架初始显示网页ch3 08 htm 其中显示仿照P81文字 HTML范例展示 3 2 7样式标记P82使用样式标记 可减少网页HTML文档中重复标记 使页面风格统一 并提高网页制作的效率 HTML标记 属性名称 属性值 属性名称 属性值 HTML标记 属性名称 属性值 属性名称 属性值 样式标记块中常用的属性可见P82表3 1DW具有层叠样式表CSS功能 利用所提供一系列格式设置规则 定义 可层叠 的样式 能灵活 方便 精确地控制页面外观 更好地提高网页制作的效率 3 2HTML常用标记 3 2 8其他标记1 格式保留标记文本内容2 图像标记3 嵌入JavaScript标记JavaScript脚本4 嵌入VBScript标记VBScript脚本程序或 3 3HTML表单标记 3 3 1表单定义格式表单是网页中提供给用户进行数据输入的界面 在商务网站的许多网页中都包含表单 它接受用户输入的数据 并提供给Web应用程序处理 其中 Name属性设置表单名 当一个网页中包含多个表单是必须用不同表单名区分 action属性指出被本表单激活 接受并处理表单输入数据的Web应用程序的URL 通常是相应的ASP JSP或PHP等程序 method属性指定表单数据传送给Web应用程序的方式 get方式把表单数据组成以 和 符号隔开的字符串作为参数附在应用程序URL后传递给应用程序 post方式把表单数据包装成文件传递给应用程序 由于get方式保密性差 传输数据量受限 故仅在特殊场合使用 3 3HTML表单标记 表单中的元素可有数据输入域Input 单行文本框 密码输入框 复选框 单选钮 按钮 列表框Select 下拉列表框 滚动列表框 多行文本框Textarea等 一个表单元素一般放置在一个段中 表单元素 或者一段中的换行之后 表单元素3 3 2常用表单域标记1 标记其中 type属性可取下列值 text单行文本框 接受文本输入 Value属性为初始或输入文本 size属性为文本框宽度 maxlength属性为输入最多字符数password密码输入框 接受密码输入 Value属性为输入密码文本 size属性为文本框宽度 maxlength属性为输入最多字符数 3 3HTML表单标记 radio单选钮 在同名一组只能作唯一选择 Value属性为提交给应用程序值 checked属性设置默认选定checkbox复选框 可选或不选 Value属性为提交给应用程序值 checked属性设置默认选定button按钮 Value属性为按钮标题 单击后实现自定义功能submit提交按钮 Value属性为按钮标题 单击后激活指定应用程序 并提交表单数据reset重置按钮 Value属性为按钮标题 单击后清空表单输入数据hidden隐藏表单输入域 用于以隐藏方式向指定应用程序传输数据2 标记文字文字 3 3HTML表单标记 其中 name属性设置列表框的名称size属性设置列表框中显示的列表项数 其默认值为1multiple属性设置是否可选择多个列表项文字定义列表框中的各列表项 其中可用selected参数设置默认选中3 标记 其中 name属性设置多行文本框