网页设计基础知识.ppt

1 安徽财经大学 网页制作基础 网页制作基础教程 主讲 魏苏林Email wei teaching 第1章网页设计基础知识 3 第1章网页设计基础知识 1 1网页制作基础知识1 2DreamWeaver界面介绍1 3创建站点1 3网页文件的基本操作1 4设置页面属性1 5练习制作简单的网页站点 4 1 1网页制作基础知识 网页制作基础知识 网页和网站HTML基础知识Web图像的基础知识网站设计基本流程 5 网页的概念 网页是由HTML 超级文本标识语言 或者其他语言编写的 通过IE浏览器编译后供用户获取信息的页面 它又称为Web页 其中可包含文字 图像 表格 动画和超级链接等各种网页元素 网页是展现各种信息的载体 6 网站的概念 网站就是一个或多个网页的集合 从广义上讲 网站就是当网页发布到Internet上以后 能通过浏览器在Internet上访问的页面 网站是通过超链接连接起来的一些网页的集合 门户网站职能网站专业网站个人网站 7 网页的分类 按所处位置分类按网页在网站中所处的位置可将网页分为主页和子页两类 8 网页的分类 按表现形式分类按网页的表现形式可将网页分为静态网页和动态网页 9 网页中的常用术语 万维网 www 浏览器统一资源定位符 URL 超文本传输协议 HTTP IP地址域名超级链接超级文本标记语言 HTML 10 万维网 www 万维网 www 是WorldWideWeb的中文简称 也称为3W网 它的本质是一种基于超级文本技术的交互式信息浏览检索工具 是Internet提供的应用最普及 功能最丰富 使用方法最简便的信息服务 用户可通过它在Internet上浏览 编辑 传递超文本格式的文件 即 html格式文件 11 浏览器 浏览器是用于阅读网页中信息的一种软件工具 就像使用电脑必须有操作系统一样 InternetExplorer IE NetscapeNavigator NE 腾讯TT浏览器遨游浏览器Foxfire火狐浏览器 12 统一资源定位符 URL URL UniformResourceLocator 主要是用来指定协议 如HTTP或FTP 以及对象 文档 万维网网页或其他目标在Internet的位置和存取方式 通信协议主机名所要访问的网页路径及名称 13 超文本传输协议 HTTP 超文本传输协议 HTTP HyperTextTransferProtocol 是互联网上应用最为广泛的一种网络协议 所有的WWW文件都必须遵守这个标准 设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法 14 IP地址 IP地址用来标识连接到Internet上电脑的指定编号 每一个IP地址对应一台电脑 这与用电话号码标识电话网络中的电话相同 电脑识别的IP地址由32位二进制数值组成 电脑上以十进制数值来显示 一组数值分为4部分 每一部分均不能大于255 中间用 分隔 如61 139 2 69 15 域名 域名就是常说的网址 它也具有惟一性 如百度的网址 网易的网址等就是一个域名 域名由汉语拼音或英文字符加上数字表示 在访问网络时 域名将通过域名服务器转换成IP地址 这种转换是在后台完成的 16 超级链接 超级链接是网页中最常用的元素之一 网页就是通过无数的超级链接才能组成一个网站 超级链接可以链接到网站内部页面 对象 也可以链接到其他网站 大大方便了用户在各个页面对象之间实现跳转 17 超级文本标记语言 HTML HTML HyperTextMarkupLanguage 是一种用户与电脑之间进行交流的文本技术 各种网页均是用HTML语言来描述的 用HTML语言编写的网页文件的扩展名一般为 htm 或 html 18 1 5网页设计的相关知识 设计网页的原则网页设计的一般步骤网页制作的常用工具 19 设计网页的原则 整体规划鲜明的主题善用图像醒目的导航及时更新易记的网站名称动画适量 20 网页设计的一般步骤 规划网站收集整理资源配置站点创建页面测试站点发布站点维护 更新站点 21 网页制作的常用工具 网页设计软件Dreamweaver是目前使用最多的网页设计软件 图像处理软件制作网页图像的软件种类繁多 大多数网页设计人员选择的是Fireworks或Photoshop 动画制作软件网页动画制作中最常用的软件非Flash莫属 通常将Dreamweaver Fireworks Flash俗称网页三剑客 22 1 2Dreamweaver8简介 MacromediaDreamweaver8是一款专业的HTML编辑器 用于对Web站点 Web页和Web应用程序进行设计 编码和开发 无论您是喜欢直接编写HTML代码的驾驭感还是偏爱在可视化编辑环境中工作 Dreamweaver8都会为您提供帮助良多的工具 丰富您的Web创作体验 Dreamweaver8的安装与启动Dreamweaver的工作界面使用Dreamweaver8的帮助 23 Dreamweaver8的安装 24 Dreamweaver8 0的启动和退出 1 启动Dreamweaver8 0在Windows操作系统下 单击左下角的 开始 按钮 从 程序 菜单中选择Macromedia菜单 然后从子菜单中单击 MacromediaDreamweaver8 即可启动 如图所示 25 2 退出Dreamweaver8 0退出Dreamweaver8 0的方法很简单 我们可以有以下几种方式退出编辑界面 1 单击Dreamweaver8窗口右上方的关闭按钮 2 按下 Alt F4 组合键 3 选择 文件 菜单中的 退出 命令 或按快捷键Ctrl Q退出系统 26 Dreamweaver8 0的工作界面 Dreamweaver8的工作界面主要包括有标题栏 菜单栏 文档工具栏 文档窗口 状态栏 插入面版 属性面版和CSS样式面版 本节将主要介绍Dreamweaver8的工作界面 27 标题栏 Dreamweaver8的标题栏在应用程序的最上面 它的左侧用来显示当前正在运行的应用程序名称 它的右侧为最小化 最大化 还原 和关闭按钮 如所示 需要说明的是 标题栏是默认的文档标题UntitledDocument 显示的文件名为Untitled 1 每当用户创建一个新的文档时 Dreamweaver8就会自动以Untitled给出一个默认的名字 当用户保存文件时 系统会提示用户另外命名一个名字 当然用户也可以以默认的名字来保存 28 菜单栏 菜单栏 包括有 文件 编辑 查看 插入 修改 文本 命令 站点 窗口 帮助 10个菜单项 Dreamweaver8菜单选项有以下3种形式 1 子菜单命令 该类命令的名称后面带有一个向右的小三角箭头 当鼠标移动到该类命令上时 就会打开一个子菜单 例如在 插入 菜单下的 媒体 菜单命令 2 开关命令 该命令在命令执行后 命令的左边会加上 的选择标记 例如在 查看 菜单下的 设计 菜单命令 3 对话框命令 该类命令的名称后面带有一个省略号 单击该类命令则会打开一个对话框 29 文档工具栏 文档 工具栏中包含按钮 这些按钮使您可以在文档的不同视图间快速切换 代码 视图 设计 视图 同时显示 代码 和 设计 视图的拆分视图 工具栏中还包含一些与查看文档 在本地和远程站点间传输文档有关的常用命令和选项 30 文档窗口 文档窗口显示当前文档 可以选择下列任一视图 1 设计视图 是一个用于可视化页面布局 可视化编辑和快速应用程序开发的设计环境 在该视图中 Dreamweaver显示文档的完全可编辑的可视化表示形式 类似于在浏览器中查看页面时看到的内容 2 代码视图 是一个用于编写和编辑HTML JavaScript 服务器语言代码 如PHP或ColdFusion标记语言 以及任何其它类型代码的手工编码环境 3 代码和设计视图 可以在单个窗口中同时看到同一文档的代码视图和设计视图 当文档窗口有一个标题栏时 标题栏显示页面标题 并在括号中显示文件的路径和文件名 如果您做了更改但尚未保存 Dreamweaver将在文件名后显示一个星号 31 插入面版 插入面版包含用于创建和插入对象 如表格 层和图像 的按钮 如图1 15所示 当鼠标指针滚动到一个按钮上时 会出现一个工具提示 其中含有该按钮的名称 这些按钮被组织到几个类别中 您可以在 插入 栏的左侧切换它们 当前文档包含服务器代码时 还会显示其它类别 当您启动Dreamweaver时 系统会打开您上次使用的类别 32 属性面版 属性面版可以检查和编辑当前选定页面元素 如文本和插入的对象 的最常用属性 属性面版中的内容根据选定的元素会有所不同 例如 如果您选择页面上的一个图像 则属性面版将改为显示该图像的属性如图像的文件路径 图像的宽度和高度 图像周围的边框等 33 使用Dreamweaver8的帮助 当我们在学习的过程出现问题难以解决时 一个最好的办法就是使用Dreamweaver8的在线帮助 下面我们介绍使用的在线帮助的方法 34 打开帮助系统 选择 帮助 菜单下的 Dreamweaver帮助 就可以打开Dreamweaver8帮助系统 也可以直接按下F1键打开帮助系统 35 使用帮助 使用帮助系统查找所需要的信息可以按以下方法进行 1 若要搜索产品中的帮助 Windows 请执行以下操作 在Dreamweaver帮助中 单击 搜索 选项卡 在文本框中键入一个单词或短语 然后单击 列出主题 双击结果列表中的一个主题 可显示该主题 36 使用帮助 使用帮助系统查找所需要的信息可以按以下方法进行 2 若要使用索引 Windows 请执行以下操作 1 在Dreamweaver帮助中 单击 索引 选项卡 2 滚动到字母列表中的一个索引项 然后双击该项可显示索引信息 37 查看操作相关帮助 在编辑的过程中 有时需要查看当前操作的帮助信息 这时可以按照如下方法操作 1 如果是在对话框中 要查看当前对话框的信息 可以单击对话框的 帮助 按纽 启动帮助系统后将直接跳转到当前操作有关的帮助信息页面上 例如在表格对话框中单击 帮助 按纽 则会显示表格的帮助信息 2 如果是在使用浮动面版进行编辑的过程中 要查看帮助系统 可以单击浮动面版上的按纽 也可以启动帮助系统 并直接跳转到与当前操作相关的帮助页面上 例如在属性面版上单击按纽 将会显示属性的相关帮助信息 38 1 3创建站点 创建本地站点管理站点管理网站中的文件和文件夹 39 创建本地站点 步骤1 在本地硬盘上建立一个用来存放站点的文件夹 命名为 site 该文件夹就是本地站点的根目录 是为网站特别建立的一个文件夹 步骤2 打开Dreamweaver8 0 选择 站点 菜单下的 管理站点 命令 或者选择文件面板中的 管理站点 命令 打开 管理站点 对话框 40 步骤3 单击 管理站点 对话框中的 新建 按钮 在弹出菜单中选择 站点 命令 41 步骤4 单击 站点 命令后 系统会弹出窗口 这是一个定义站点的向导 选择 基本 选项卡 给网站定义一个名称 例如 数学与计算机系 42 步骤5 单击 下一步 按钮 在窗口中设置网站是否使用服务器技术 例如 ASP PHP等 由于我们要制作的是基本的静态网站 所以选择 否 我不想使用服务器技术 单选按钮 43 步骤6 单击 下一步 按钮 开始设置网页的存储方法和存储路径 在上半部分的单选项中选择第一项 编辑我的计算机上的本地副本 完成后再上传到服务器 推荐 如果申请的网站空间支持在线编辑功能 那么可以选择 使用本地网络直接在服务器上编辑 单选项 44 步骤7 完成以上的设置后单击 下一步 按钮 在这里选择连接服务器的方式 以及网页在服务器上的存储位置 45 步骤8 单击 下一步 按钮 在这里选择是否使用 存回 和 取出 选中 是 启用存回和取出 选项 可以多人共同完成网站的维护工作 如果只需一个就能够完成网站的维护工作 可以选择 否 46 步骤9 至此完成了对网站的基本定义 单击 下一步 按钮 Dreamweaver8 0会弹出对话框询问设置的信息是否准确 单击 完成 按钮 本地站点就创建成功了 47 管理站点 1 切换站点Dreamweaver8 0中可以同时存在多个站点 在文件面板左边的下拉列表框中选中某个已创建的站点 就可切换到对这个站点进行操作的状态 48 2 编辑站点如果要对站点进行编辑 可以在 管理站点 对话框中 选择要编辑的站点 然后用鼠标单击 管理站点 对话框中的 编辑 按钮 重新打开 站点定义 向导 根据需要一步一步修改站点的属性即可 49 3 删除站点如果不需要某个站点时 可以将其从站点列表中删除 选择 站点 菜单下的 管理站点 命令 打开 管理站点 对话框 在该对话框中选择一个站点 单击 删除 按钮 即可删除一个站点 对某一个站点进行删除操作后 网站的文件仍保存在硬盘原来的位置上 并没有从硬盘上删除 50 管理网站中的文件和文件夹 1 创建文件夹和文件文件面板通常显示站点中的所有文件和文件夹 但新建的站点中不包含任何文件或文件夹 所有的文件和文件夹都需要新建 在文件面板中站点根目录上单击鼠标右键 然后从弹出的快捷菜单中单击菜单项 新建文件夹 或 新建文件 接着给新的文件夹或文件命名 51 2 重命名文件夹或文件先选中需要重命名的文件夹或文件 然后单击右键 在弹出的快捷菜单中单击 编辑 选项的下级菜单中的 重命名 命令或者按 F2 快捷键 文件夹或文件的名称变为可编辑状态 重新输入新的名称 按Enter键确认即可 3 移动和复制文件从 文件 面板的本地站点文件列表中 选中要移动或复制的文件夹或文件 如果要进行移动操作 在弹出的快捷菜单中单击 编辑 选项的下级菜单中的 剪切 命令 如果要进行复制操作 则执行 编辑 选项的 拷贝 命令 然后执行 编辑 选项下的 粘贴 命令 将文件夹或文件移动或复制到相应的文件夹中 4 删除文件夹或文件要从本地站点文件列表中删除文件夹或文件 先选中要删除的文件夹或文件 然后执行 编辑 选项同上的 删除 命令或按Delete键 这时系统会弹出一个提示对话框 询问是否要真正删除文件夹或文件 单击 是 按钮确认后即可将文件夹或文件从本地站点中删除 52 1 3网页文件的基本操作 创建网页和打开网页保存网页在浏览器中预览网页 53 创建网页和打开网页 1 新建网页单击 文件 菜单下 新建 命令 即可弹出 新建文档 对话框 从 类别 列表框中选择 基本页 选项 然后选择 基本页 列表框中的 HTML 选项 单击 创建 按钮 即可新建一个空白的HTML网页文档 54 2 打开网页单击 文件 菜单选择 打开 命令 弹出 打开 对话框 在该对话框内选中要打开的HTML文档 单击 打开 按钮 即可将选定的HTML文档打开 也可以在 文件 面板上 双击 站点目录 中的网页文件也可以打开网页文件 55 保存网页 在完成创建 编辑的网页之后 关键的一步就是保存网页 否则一切都是徒劳的 保存网页有如下几种方法 单击 文件 菜单选择 保存 命令 可以原名字原路径保存当前的文档 单击 文件 菜单选择 另保存 命令 可弹出 另存为 对话框 利用该对话框可以将当前的文档以其他名字保存 单击 文件 菜单选择 保存全部 命令 可将当前正在编辑的所有文档以原名保存 56 在浏览器中预览网页 单击标准工具栏上的预览按钮或按 F12 可在浏览器中预览所编辑的网页 57 1 4设置页面属性 步骤1 打开Dreamweaver8 0 新建一个网页 或者打开一个现有的网页 选择 修改 菜单下的 页面属性 命令 或者单击属性面板中的 页面属性 按钮 打开 页面属性 对话框 58 步骤2 在 页面属性 对话框中设置 外观 参数 选择 页面属性 中的 外观 选项同