网页制作教程课件

网页制作技术 课程定位与课程内容 一 课程定位 信息技术基础 网页美术基础 平面图形图像处理 数据库应用技术 网页特效 Web程序设计 网站建设 专业基础课程 是网站开发的基础课程 企业网站开发 教学大纲 教材与教参 一 教学大纲提要 4学时 任务一网页基础4学时 任务二表格及布局4学时 任务三插入页面元素12学时 任务四框架与层8学时 任务五网页美化与特效8学时 任务六表单4学时 任务七模板与库30学时 实训 授课计划 教材特点 1 本教材适合高职高专的网页设计与规划教学 2 教材采用模块化教学 目标任务驱动 案例操作步骤 知识点详解四层结构引导学生完成网页设计的每一环节 机械工业出版社出版的高职高专教材 DreamweaverCS3网页设计案例教程 二 教材 教学大纲 教材与教参 1 网页设计与制作 人民邮电出版社2 网络资源 三 教参 5 课程内容 模块 技能培养 素质提高 6 考核方式1 出勤 10 2 课堂表现 上课及上机实验 20 3 平时作业 20 4 阶段测试 10 5 考试成绩 实训 40 作业上交 压缩包名称例 01a 考核方式 任务一网页基础 网页制作技术 主要内容 子任务1初识网页与网页设计软件 一 子任务2网页的基本操作与站点管理 二 三 二 二 1 网站与网页的关系网页 web 即HTML文件 也就是网站上的某一个页面 它是一个纯文本文件 是向浏览者传递信息的载体 构建网页的基本元素包括文本 图像和超链接 其他元素包括声音 动画 视频 表格 导航栏 表单等 网站 Website 它是指在互联网上 根据一定的规则 使用HTML等工具制作的用于展示特定内容的相关网页集合 它建立在网络基础之上 以计算机 网络和通信技术为依托 通过一台或多台计算机向访问者提供服务 平时所说的访问某个站点 实际上访问的是提供这种服务的一台或多台计算机 子任务1初识网页与网页设计软件 10 一 网页与网站的相关知识 普通静态网页的工作流程 2 网页的类型普通静态网页指在发送到浏览器之前不会被应用程序服务器修改的Web页 也就是说 当站点访问者请求该网页时 页面内容不会发生更改 子任务1初识网页与网页设计软件 11 2 网页的类型动态网页是在发送到浏览器之前由应用程序服务器自定义的网页 动态网页要在经过服务器的修改后才被发送到请求它的浏览器 网页发生更改的特性便是称其为动态的原因 动态网页的工作流程 子任务1初识网页与网页设计软件 12 3 组成页面的元素文本 网页中信息的主要表达方式 图像 常用的有三种格式 GIF JPEG和PNG 动画 常见的包括两种 GIF动画 Flash动画 视频和音频 种类很多 例如 AVI RM mp3等 超级链接 是在一个网站中的各网页之间进行跳转的媒介 导航栏 用于引导访问者浏览站点 表格 用于布局文本和图像以及其他的列表化数据和精确控制各种网页元素在网页中出现的位置 表单 访问者与网站交互的桥梁 子任务1初识网页与网页设计软件 文本 文本是网页信息的主体 网页中的信息主要是以文本为主的 它能准确地表达信息的内容和含义 子任务1初识网页与网页设计软件 图像 图像在网页中具有提供信息 展示形象 美化网页 表达风格的作用 有了图像看到的的网页而丰富多彩 现在网络上使用的绝大多数图片和图像是gif jpeg和png文件格式 子任务1初识网页与网页设计软件 最常用和最简单的方式 用自己网站的英文名称采用不同的字体 字母的变形设计制作为网站的标志 网站logo欣赏 新浪网 当当网 亿邮网 百度网 三星网 欧莱雅网 清华同方电脑网 子任务1初识网页与网页设计软件 Banner是用于宣传站内某个栏目活动的广告 一般要求制作成动画形式 由于动画能够吸引更多注意力 将介绍性的内容简练的加在其中达到宣传的效果 子任务1初识网页与网页设计软件 表单是用来收集站点访问者信息的域集 子任务1初识网页与网页设计软件 表格是网页排版的灵魂 子任务1初识网页与网页设计软件 框架是网页的一种组织形式 将相互关联的多个网页的内容组织在一个浏览器窗口中显示 子任务1初识网页与网页设计软件 20 一 网站的规划期1 定位主题 题材和内容 网站名称等 2 资料搜集 文字信息 图像 动画 音频视频等 3 结构设计 设计网站的栏目及目录结构 注意不要将所有的文件都存放在根目录下 要按栏目内容建立子目录 要在每个主目录下都建立独立的图片目录 目录的层次不要太深 4 形象设计 网站风格 标志 颜色 标准字体等 5 确定版面布局 设计首页及各分页二 网站的制作期 使用Dreamweaver制作首页及分页 三 网站的后期维护 测试网站 申请域名 上传网站内容及管理 子任务1初识网页与网页设计软件 21 启动了解工作界面 子任务2网页的基本操作与站点管理 22 站点的分类Dreamweaver建立的站点可以分为本地站点 LocalSite 和远程站点 RemoteSite 两种 通常在本地计算机的硬盘中建立本地站点 将网页存放在本地站点 方便设计制作 管理和调试 完成网站设计制作以后 再将本地站点的所有内容上传到Web服务器中设定的 供互联网用户浏览访问的位置 称为远程站点 子任务2网页的基本操作与站点管理 制作网站的第一步 建立站点站点的作用 方便管理网站的内容 牢记 不要将所有文件都放在根目录下 这样做会使文件管理混乱 上传速度慢 按栏目内容建立子目录 次要栏目视情况而定 对于需要经常更新的栏目可以建立独立的子目录 而一些相关性强 不需要经常更新的栏目 可以合并放在一个统一的目录下 所有程序一般都放在特定目录中 所有需要下载的内容也最好放在一个子目录下 在每个主目录下都建立独立的images目录 为每一个栏目建立一个独立的images目录是最方便管理的 而根目录下的images目录只是用来放首页和一些次要栏目的图片 注意 目录的层次不要太深 不要使用中文目录 不要使用过长的目录名 目录要做到 见名之义 等 24 子任务2网页的基本操作与站点管理 audio 放置音频文件css 放置样式doc 放置word文档downloads 放置给客户下载的文件flash 放置动画images 放置图片library 放置库项目Template 放置模板news 放置新闻video 放置视频文件 25 子任务2网页的基本操作与站点管理 26 例 某企业网站规划 进行本地站点的创建与管理 在上例中任取一个页面进行页面属性的设置并观察Html代码的变化 27 六 网页文件的运行 在浏览器运行 直接打开网页文件 在Dreamweaver中 可以通过 文件 在浏览器中预览 iexplore运行 直接单击 F12 运行 点击 文档 工具栏中的快捷按钮运行 28 小结与作业 静态网页与动态网页Html基本概念网页设计与制作的基本流程DreamweaverCS3工作界面如何创建本地站点并进行管理对页面属性进行设置代码文件头 title 标记的设置如何运行网页文件上机实验1 任务二使用表格规划网页布局 主要内容 认识表格创建表格编辑表格使用表格规划网页布局 一 认识表格 表格与单元格的关系是整体与局部的关系 如同砌墙的砖和砌好的墙一样 在上面3行3列的表格中一共有9个单元格 32 1 两种方法直观设计 指用所见即所得的方式直接在文档页面中添加文本 图形及其他对象 并设置它们的属性 所得到的效果与在Web浏览器中所浏览到的效果相似 代码设计 指通过使用HTML语言编写代码来生成网页 通过各种标记描述不同的内容 说明段落 标题 图像及字体等在浏览器中的显示效果 二 网页的设计方法 33 2 HTML基本语法HTML标记 HTML文件所需的最基本的标记 书写为和 HEAD标记 文件头标记 以开始 以结束 TITLE标记 标题标记 用于指定网页的标题 它只能出现在HEAD标记之间 其格式为网页标题 二 网页的设计方法 34 BODY标记 用于标识网页主体 其中包含一个网页中除标题外的所有对象 格式为 文件主体 hx标记 用于标记文本的标题 包括H1 H6 共6级标题 如一级标题的格式为 标题文本转行标记 BR标记 作用是强迫文本转行 而且不产生空行 该标记没有终止标记 段落标记 P标记 用于分开正文 使其独立成段 便于浏览器识别 以开始 以结束 二 网页的设计方法 35 超级链接标记 格式为 字符串批注标记 由括起 页面结构 标题 不能在正文显示在正文显示 二 网页的设计方法 表格的HTML标记 表格的标记 table 用于定义一个表格 tr 用于定义表格的行用于定义表格中的单元格 tr table 说明 1 各个标记都是成对出现的 2 之间出现的是单元格的具体内容 表格的HTML标记 表格 单元格的属性 1 表格 单元格的大小width 表示宽 单位为像素或百分比 默认为自动调整 height 表示高 单位为像素 默认为自动调整 2 表格边框的宽度及颜色border 表示边框的宽度 单位为像素 bordercolor 表示边框的颜色 使用十六进制颜色值或英文颜色名称 注意 bordercolor也可设置某一单元格边框的颜色 表格的HTML标记 表格 单元格的属性 3 表格的水平摆放位置align 属性值有left 左对齐 center 居中对齐 right 右对齐 4 单元格的水平对齐方式align 属性值有left 左对齐 center 居中对齐 right 右对齐 默认为左对齐 5 单元格的垂直对齐方式valign 属性值有top 上对齐 bottom 下对齐 middle 居中 默认为居中对齐 表格的HTML标记 表格 单元格的属性 6 表格的及单元格的背景色 背景图片bgcolor 背景色属性background 背景图片属性7 表格的cellspacing 间距 cellpadding 边距 填充 cellspacing属性用来指定表格各单元格之间的空隙 cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小 二 创建表格 要在网页中创建表格 选择 插入记录 表格 命令 打开 表格 对话框 或者单击 常用 插入栏上的 表格 按钮 打开 表格 对话框 如图所示 三 编辑表格 创建表格后 可以对表格进行编辑 包括合并和拆分单元格 添加和删除单元格 设置单元格和表格属性等 并且可以导入和导出表格 选择表格编辑表格和单元格 调整大小 添加删除 合并拆分 属性设置 剪切复制粘贴单元格 表格的其他操作 排序 导入导出表格式数据 四 使用表格规划网页布局 在网页设计中 页面布局是一个非常重要的部分 有了好的布局 整个网页才可能美观 大方 实用 DreamweaverCS3提供了多种方法来创建和控制网页布局 使用表格的 布局模式 就是最常用 最实用的方式之一 表格的 布局模式 来源于表格 但是在布局模式中简化了使用表格进行网页布局的过程 避免了使用传统的方法创建基于表格的页面布局时经常出现的一些问题 如定位不准 不易调整等 使用布局单元格和表格 布局模式 设置布局表格和单元格格式 五 小结 表格的heml标记如何插入一个表格如何编辑表格的形式 属性设置 拆分合并单元格 如何使用表格布局布局表格和单元格格式的设置 任务三插入文本和图像 复习表格布局 本章要点 插入文本设置文本格式创建列表插入图像设置图像属性创建鼠标经过图像创建网页导航条 一 插入文本 1 认识 文本 插入栏使用 文本 工具栏 可以快速的插入各种类型的文本 单击插入栏上的 文本 选项卡 打开 文本 插入栏 如图所示 2 插入文本 在DreamweaverCS3中输入文本是非常简单的 其输入方式与其它文本处理软件中的文本输入方式十分类似 直接输入文本排列方式自左向右 自动换行 段落结束时 用Enter键分段 段落中分行 用Shift Enter键输入换行符 复制和粘贴文本 粘贴与选择性粘贴 导入文本 文件 导入 Word文档 Excel文档 输入特殊字符 插入 工具栏中 文本 选项卡中的 复制和粘贴Html代码 3 插入水平线 将光标定位在要插入水平线的位置 选择 插入记录 HTML 水平线 命令 在Html代码相应位置输入 在属性面板中设置水平线属性 或者直接编写Html代码 设置水平线颜色 在Html代码中 里 添加color属性 例如 或 4 插入日期 将鼠标光标定位到需要添加日期或时间的位置 选择 插入记录 日期 命令 打开 插入日期 对话框 或选中 插入 工具栏中的 常用 选项卡 单击 日期 按钮 打开 插入日期 对话框 可进行星期 日期和时间格式的设置 若选中 储存时自动更新 复选框可在每次保存文档时都更新添加的日期 二 编辑文本 1 文本格式的设置设置字体 使用属性检查器中的 字体 下拉列表框 设置字形 使用属性检查器中的 粗体 和 斜体 按钮 设置字号 使用属性检查器中的 大小 下拉列表框 2 改变文本颜色在属性检查器的 文本颜色 文本框中输入颜色代码或者单击拾色器按钮 在弹出的颜色调板中单击所需的颜色块 3 段落格式的设置对齐方式 使用属性检查器中的 左对齐 居中对齐 右对齐 两端对齐 按钮 凸出与缩进 使用属性检查器中的 文本凸出 和 文本缩进 按钮 4 查找和替换文本选择 编辑 查找和替换 命令 打开 查找和替换 对话框 完成相关设置后 按需要单击 查找下一个 查找全部 替换 或 替换全部 按钮 以完成查找或替换 三 创建列表 列表是指将具有相似特性或某种顺序的文本进行有规则的排列 列表常应用在条款或列举等类型的文本中 用列表的方式进行罗列可使内容更直观 在文档窗口中 可以用现有文本或新文本创建编号列表 项目列表和定义列表 1 编号列表 编号列表前面通常有数字前导字符 可以是英文字母 阿拉伯数字或罗马数字等符号 将鼠标光标定位在要创建编号列表的位置 单击属性面板中的 编号列表 按钮或选择 文本 列表 编号列表 命令 然后输入列表项目文本 按Enter键可创建其他列表项目 或者将鼠标光标放在要创建列表的文本中 再单击 编号列表 按钮 可将现有的文本段落创建为列表 2 项目列表 项目列表前面一般用项目符号作为前导字符 将鼠标光标定位在要创建项目列表的位置 单击属性面板中的 项目列表 按钮或选择 文本 列表 项目列表 命令 或者将鼠标光标放在要创建列表的文本中 再单击 项目列表 按钮 3 定义列表 定义列表前面没有项目符号或数字前导字符 将鼠标光标定位在要创建定义列表的位置 选择 文本 列表 定义列表 命令 4 嵌套列表的创建 在列表中再创建列表 选择要嵌套的列表项目 单击属性检查器中的 缩进 按钮或选择 文本 缩进 命令 使其向右缩进并创建一个单独的列表 然后对缩进的文本应用新的列表类型或样式 四 插入图像与属性设置 图像是网页中非常重要的内容 在Dreamweaver中 可以在页面中插入图像 并利用软件自带的功能设置各种图像效果 例如导航栏 链接和鼠标经过效果等 1 网页中常见的图像格式网页中常用的图像文件格式有JPEG JPG GIF和PNG这3种 2 为网页添加图像 直接插入图像选择 插入记录 图像 命令 弹出 选择图像源文件 对话框 在 选取文件名自 选项组中选择图像文件的来源 然后选择所需的文件 或单击 插