《网页制作技术教程-第一章 网页制作基础》由会员分享，可在线阅读，更多相关《网页制作技术教程-第一章 网页制作基础（28页珍藏版）》请在金锄头文库上搜索。
1、第四章 电子表格Excel 网页制作技术教程 第1章 网页制作基础 本 章 教 学 目 的 1 熟悉网页的基本概念及网页的制作工具 2 熟悉Dreamweaver 8 的工作界面 3 掌握HTML命令 4 掌握站点的创建和管理 目 录 第一讲 网页制作的基本概念及窗口 第二讲 HTML命令及站点的创建 WWW World Wide Web 万维网的英文缩写 它以 超文本 方式将 Internet上的数据连接在一起 使用户能以简单的方式交换世界各地的信 息 WWW服务的出现 使得Internet风行全球 其主要原因是 即使不懂计 算机的人也能借助浏览器在网上获得信息 可以在家里上网购物 炒股 聊
2、天 办理银行转账 收发信件等 它的服务主要是通过网页来实现的 网页 Web 在浏览器上看到的画面叫网页 进入网站后所看到的第一 个页面称为主页 Home page 一般网上能识别的主页名称为 index htm index html 或index asp 网页是用HTML语言或其他语言编写 的 它的出色之处在于能够把超链接嵌入其中 使多个网页通过超链接方 式关联在一起 网站 Site 就是一组相关网页的集合 设计者设计了几个网页 并且 经过组织规划 让网页彼此相连 以便让Internet上的人都能看到 这样 的完整结构称为网站 所以 当有人说要制作主页时 通常指的是要建立 一个网站 并非单指一
3、个页面 1 1 1 网页制作的基本概念 URL Uniform Resource Locator 统一资源定位符 简单地说 它就网络上一 个网站的完整地址 每个主页都对应一个唯一的URL 这样主页在网上才能被 访问到 URL是有统一规则的 它的语法格式如下 协议名称 服务器主机名称 通信端口 文件目录 文件名称 其中协议名称就是这个 URL所连接的网络服务器名称 例如 Http就是指WWW上的 存取方式 HTML 是英文Hyper Text Markup Language的缩写 翻译成中文是 超文本标 识语言 它通过各种各样的标识来编排超文本信息 HTML文件基本上就是一种文 本文件 可以用简
4、单的文字编辑器 如记事本 写字板 来编写 文件的扩展名为 html 有些网络中的服务器的操作系统只支持8 3的文本格式 既文件的扩展名只 能为三个字符 所以文件的扩展名也可以为 htm 浏览器 Browser 是安装在计算机上的一种软件 通过它可以文便地看到Internet 上提供的各种信息和服务资源 常用的浏览器有两种Internet Explorer和Netscape Communicator 简称为IE和NC 超文本 Hypertext 指具有超级链接功能的文件 它可以将文件中已经定义好的关 键字 通过鼠标的单击取得该关键字的相关解释 目前大多数的文件是以超文本的 方式提供给用户的 超链
5、接 Hyperlink 是 WWW上的一种链接方式 通过单击某个图标或某段文字 就可以自动连接相对应的其他文件 从一个网页跳转到另一个网页 1 1 2 常见的网页制作软件 1 所见即所得的网页编辑工具 网页制作编辑工具的作用就是用直观的方式制作网页 现在的网页编辑工具绝大 多数都是所见即得的 即我们实际操作的结果就是最终生成的网页 HTML文档 的效 果 也就是说 网页编辑工具将HTML代码的生成自动化了 最常见的网页编辑工具是Frontpage Dreamweaver 另外一个工具就是代码编辑工具 例如写字本 EditPlus等 这些工具主要编辑asp等动态网页 此外还有一些网络编程工具 j
6、avascript java编辑器等 2 素材处理工具 1 Photoshop 2 Fireworks 3 Flash 1 1 菜单栏 菜单栏 Dreamweaver8Dreamweaver8的菜单栏里包括有文件 编辑 查看 插入 修改 文本 命令 的菜单栏里包括有文件 编辑 查看 插入 修改 文本 命令 站点 窗口 帮助等站点 窗口 帮助等1010个菜单项 单击每个菜单项均会弹出一个下拉菜单 其中每个个菜单项 单击每个菜单项均会弹出一个下拉菜单 其中每个 菜单项又包括若干命令 单击该菜单命令即可 如图所示 菜单项又包括若干命令 单击该菜单命令即可 如图所示 2 对象面板 网页的内容虽然多种多
7、样 但它们都可以称为网页元各素 简单的网页元素如文字 图像 表格等 复杂的如导航 程序等 插入 工具栏的功能主要就是在网页中插 入各种类型的网页元素 如图所示 3 编辑窗口 编辑窗口是编辑网页时的主要窗口 新建或打开一个网页后 即可显示 在图像文 件夹中 所示的窗口 它主要由项目选择标签 文档工具栏 编辑区域 状态栏 标 尺 垂直和水平扩展按钮等组成 1 项目选择标签 当打开多个网页文件时 将为每个文件显示一个标签 单击其 中任意一个标签则可以在编辑区域 中显示该文件的内容 并进行编辑 而且选择标 签的右侧有3个按钮 可实现最小化 还原及关闭当前窗口 1 2 Dreamweaver 8 的工作
8、界面 2 文档工具栏 主要用于切换编辑区域视图模式 设置网页标题 进行标签验证及浏览 器中浏览网页等 如图所示 其中各选项的功能及含义如下 按钮 显示代码视图 可在编辑窗口中直接输入HTML代码 按钮 显示代码视图和设计视图 可在编辑窗口中同时进行代码 和页面设计 按钮 显示设计视图 可在编辑窗口中进行页面设计 文本框 用于设置网页标题 按钮 对网页进行浏览器错误检查 按钮 对网页中的标签进行验证 按钮 对站点中的文件进行管理 按钮 在浏览器中预览和调试网页 按钮 刷新设计视图 按钮 隐藏或显示文件中的内容 标尺 网格和辅助线等对象 按钮 隐藏或显示层外框 表格宽度 表格边框和框架边框等可视化
9、助理对象 3 编辑区域 编辑网页和编写网页代码的区域 该区域有代码 拆分和设计3种视图 模式 4 状态栏 位于编辑区域的下方 其中包括标签选择器 选取工具 手形工具 缩放 工具 设置缩放比率下拉列表框 窗口大小栏和文件大小栏等项目 5 水平和垂直标尺 编辑网页时方便查看或定位网页中元素的坐标位置 6 垂直和水平扩展按钮 分别位于编辑区域的或侧和下方 用于显示或隐藏编辑窗 口右侧的浮动面板及下方的属性面板 以扩展编辑窗口的宽度和高度 7 属性 面板 用于查看和更改当前选择对象的各种属性 根据选择对象的不同 属性 面板中设置的项 目也不同 如图所示 5 浮动面板组 浮动面板组是停靠在编辑窗口右侧的
10、浮动面板的集合 如图所示 1 3 HTML命令 HTML 是Hyper Text Markup Language 超文本标记语言 的缩写 用HTML语言编制的 文档为HTML文档 其文档扩展名通常是 htm或 html 1 3 1 HTML语言的基本语法 标记是HTML语言的标签符号和用标签符号构成的各种元素的统称 用来界定各种单元 用一对尖括号 中间包含若干字符命令表示 前一个 为起始标记 后一个 为结束标记 单元的名称和属性写在起始标记内 HTML的标记及其属性有以下语法规则 1 HTML 标记 最外层的标记 语法规则 HTML HTML 属性 VERSION String 2 HEAD
11、标记 用来标记HTML文档的页首 语法规则 HEAD HEAD 3 TITLE 标记 设置网页标题 语法规则 TITLE TITLE 4 BODY 标记 标注HTML文档的正文 语法规则 BODY BODY 属性 BACKGROUND URL指定用于网页背景图片文件的地址 BGCOLOR RRGGBB 指定背景色彩 TEXT RRGGBB 指定非可链接文字的色彩 LINK RRGGBB 指定可链接文字的色彩 ALINK RRGGBB 指定正被鼠标点击的可链接文字的色彩 VLINK RRGGBB 指定已被鼠标点击的可链接文字的色彩 提示 RRGGBB是指色彩红 绿 蓝的值 用16进制数码表示 根
12、椐规范前面需加 5 HN 标记 标注文档正文的各级标题 语法规则 HN HN 属性 ALIGN left right center justify 6 P 标记 显示段落标记 语法规则 P P 属性 ALIGN left center right 7 BR 标记 强制换行标记 语法规则 BR 8 PRE 标记 预格式化文本标记 语法规则 PRE PRE 属性 WIDTH n 常用的HTML标记符如下 段落标记符 换行标记符 居中标记符 下划线标记符 加粗标记符 斜体表记符 标题标记符 n取1 6之间的正整数 无序列表标记符 列表项标记符 常用表格标记符如下 定义表格 定义行 定义表头 定义数据
13、 表格属性如下 跨多列 跨多行 边框 表格大小 第二讲 HTML命令和创建站点 1 3 2 HTML文档的基本结构 一个HTML文档是由标记和文本内容组成 其结构如下 任务1 1 1 创建简单的HTML文件 操作要求 在 D root unit1 新建文件夹y1 01 然后创建一个 新的HTML文件 并保存HTML文件到 D root unit1 y1 01 文件名为 Y1 0A html 操作步骤 1 打开 D root unit1 单击鼠标右键 选择 新建 文件夹 菜单命令 命名为y1 01 2 启动Dreamweaver 选择 创建新项目 HTML 菜单命令 3 选择 代码 项 4 输入
14、如下代码 简单HTML文件的编写教程 全国计算机信息高新技术考试 第1章 网页制作基础 本章主要介绍网页的基本概念及HTML语言等 1 1 网页的基本概念 1 2 HTML命令 1 2 1 HTML语言的基本语法 1 2 2 HTM语言的基本结构 5 按F12 运行后结果将如教材所示 至此 操作完毕 1 4 站点的创建 1 4 1站点的规划 在制作网页之前 应先对要制作的网站的站点进行规划和创建 这样就可利用站点的管理 功能对站点中的文件进行管理或测试 1 认识站点 在Dreamweaver 8中提供了本地站点 远程站点和测试站点3种类型的站点 通过本地站 点和远程站点可以在本地磁盘和Web服
15、务器之间传输文件 通过测试站点可以对动态站点 进行测试 1 本地站点 本地站点是用户工作的目录 是存放用户网页 素材等的本地文件夹 在制作一般网页时 只需建立本地站点即可 2 远程站点 若需要不连接Internet就能对所建的站点进行测试 可以在本地电脑上创建远程站点模拟真 实的Web服务器环境进行测试 3 测试站点 测试站点主要是对动态页面进行测试时使用 是Dreamweaver处理动态页面的文件夹 Dreamweaver使用此文件夹生成动态内容并在工作时连接到数据库 2 规划站点结构 规划站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存 合理地组织站 点结构 可提高工作效率 在规
16、划站点结构时应先在本地磁盘上创建一个文件夹作为站点的根目录 所有在制作过 程中创建和编辑的网页都应当保存在该文件夹中 在发布站点时 只需将此文件夹中的 所有内容上传到Web服务器上即可 如果站点结构复杂 内容较多 则还需建立子文件 夹 以存放不同内容的网页 在站点规划中合理地为文件和文件夹进行命名也非常重要 好的名称容易理解 能够表 达出网页的内容 可以采用与文件或文件夹内容相对应的英文或拼音来命名 且避免使用长 文件名和中文 比如图片文件夹可以命名为images或tupian 制作网页所需的图片或动画等文件存放的位置也是规划站点结构时应考虑的 如果是大型 站点 可在站点根目录下创建一个名称为images的文件夹 用以存放主页中用到的图片和 动画 3 制作导航流程 做好站点的规划后 就可以根据规划制作一个导航流程图 以便理清思路 制作时可直接 在纸上粗略地绘出导航流程图 如图所示是一个音乐网站最初的导航草图 海外中国主题 曲 天籁之音 网站首页最新动态流行音乐古典音乐原声碟电影音乐民族音乐人物作曲家 歌星 4 绘制页面草图 制作好导航流程图后 接下来应确定整个站点的页面风格 也就是设计
