河南大学网页设计精讲ppt课件.ppt

网页制作教程 2020 3 31 2 课程简介 网页是网络中一个重要的信息载体 在Internet中的大部分信息都是以网页的形式表现出来 通过网页可以实现网络资源共享和数据传输的功能 工欲善其事 必先利其器 想要自己制作出优秀的网页 就要掌握一种合适的工具 常用的网页制作工具有Dreamweaver FrontPage等 图像处理工具有Photoshop Fireworks CorelDRAW FreeHand等 2020 3 31 3 课程简介 其中 网页三剑客属于主流的制作工具 使用这三个软件可以完成制作网页的所有任务 它包括三个软件 Dreamweaver Fireworks Flash Dreamweaver是制作网页和网站的工具 Fireworks是设计和制作专业化网页图像的工具 Flash是当前最出色的网页动画制作软件 目前比较流行的版本是MacromediaStudio8 0 2020 3 31 4 如何学好这门课 端正学习态度掌握理论知识重视上机操作有效利用网络多动手勤思考 2020 3 31 5 课程要求 考试方法 理论考试40 综合性作业40 考勤20 上机要求 时间 14 30 16 30 地点 二楼机房上机要对号入座 注意带鞋套 保持卫生上机要先注册个人信息遵守考勤纪律 请假必须写假条由于等级考试原因 本周不上机 2020 3 31 6 课程要求 指定教材 网页制作三剑客 Studio8 标准培训教程 上海科学普及出版社课程内容安排 网页制作基础知识Dreamweaver8 0Fireworks8 0Flash8 0 2020 3 31 7 介绍网页制作的相关术语网页构成的基本要素网站建设的基本流程中文版Dreamweaver8操作基础 第1讲网页制作基础知识 2020 3 31 8 一 网页基本概念 什么是网页 WebPage 网页就是一种以超文本和超媒体形式显示信息的载体文件 其中的重要概念就是超级链接 它使网页的信息量更大 阅读起来更加方便 什么是网站 WebSite 网站就是由多个信息相关的网页构成 网页之间通过超级链接互相连接在一起的网络组织 又称为站点 2020 3 31 9 网页制作的相关术语 国际互联网因特网 Internet 统一资源定位器 URL 万维网 WWW 超文本传输协议 HTTP 浏览器超文本标记语言 HTML 主页 2020 3 31 10 Internet简介 Internet是遍布全球的各种网络系统 如 局域网 数据通信网 公用电话交换网等 组织在一起的世界性计算机网络系统 它是通过统一的网络协议TCP IP协议连接在一起所组成的 Internet的功能 电子邮件 文件传输 FTP 远程登录 Telnet 网上查询 IE Netscape Gopher等浏览器 和网上交流 BBS 网络新闻组USENET QQ等 2020 3 31 11 URL地址 URL UniformResourceLocater 即统一资源定位器 俗称 网址 Internet中的各种资源实际上分散在各地的计算机主机中 定位器 Locater 的作用就是要指出这些资源的所在位置 URL就是一个可以带领用户到所要资源的所在位置 并通过适当的方式取得该资源的工具 例如下面的URL地址 其含义是该URL地址使用的通讯协议为HTTP协议 要查找的主机是 在该主机的news文件夹中的china文件夹里 有一个名为index htm的文件 2020 3 31 12 WWW简介 万维网也就是WorldWideWeb 又称WWW 3W 它是Internet世界最为重要的成员之一 WWW是一个基于超文本 Hypertext 和超媒体 Hypermedia 方式的信息检索服务工具 超文本 由文本组成 可以与其它文件相关联 超媒体 可以与多种形式的数据文件相关联 2020 3 31 13 HTTP协议 为了能够实现网络资源的网上传输和共享 就必须制定一个客户端与服务器端双方在交流信息时都能够理解的统一的 共同语言 这就是网络传输协议 它要求每个使用者必须遵循相同的标准 以保证信息和数据的传输畅通无阻 HTTP协议 HypertextTransferProtocol 超文本传输协议 就是实现这一功能的WWW中的主要协议 允许数据以任意的类型 包括多媒体文件 在网络中通信 并支持超文本和超媒体的形式 2020 3 31 14 浏览器 Browser 阅读浏览网页信息的应用程序 它是一个翻译器 它将各种控制字符翻译成合适的屏幕显示方式 从而得到人们最后看到的网页 浏览器有很多种 如 MicrosoftInternetExplorer IE NetscapeNavigator 网景 TencentTraveler 腾讯TT 等 由于各个浏览器对同一控制字符的解释方式不完全相同 所以即使是同一个网页 在不同浏览器下的显示也可能有所不同 网页浏览器 2020 3 31 15 HTML简介 HTML语言 HyperTextMarkupLanguage 超文本标记语言 是一种用于网页制作的排版语言 是用来表示网上信息的符号标记语言 HTML并非是一种编程语言 我们只需要用HTML给文档添加标记 并保存成扩展名为 Html或 Htm的文件 即网页的源文件 发布到网上即可 浏览器可以识别用HTML编写的文件 并将这些HTML符号标记翻译成人们可以识别的信息 就是网页 2020 3 31 16 HTML的编辑环境 HTML是一种纯文本文件 我们可以用任何文本编辑器 包括记事本 写字板 Word WPS 来编辑和创建它 保存时文件扩展名要改成 htm或 html 在网页上点击鼠标右键 选择菜单中的 查看源文件 就可以通过记事本看到网页的HTML内容 2020 3 31 17 网页标题概括了网页内容 能迅速了解网页的大意 加入收藏夹时和使用搜索引擎时显示的结果都是网页的标题 HTML的常用标记 HTML文件开始和结束的标记 HTML文件头标记 可以省略 网页的标题 显示在浏览器窗口的标题栏 可以单独出现 HTML文件主体标记 定义了网页上显示的主要内容与显示格式 我的个人主页 你好 欢迎光临本站 2020 3 31 18 一个HTML文件是由标记组成的 不同的标记代表不同的元素和效果 大多数标记是成对出现的 名称多数是其英文缩写 如 表示一条水平的分割线 表示一个段落 Paragraph 表示一个图片 Image 表示设置字体 HTML的构成 2020 3 31 19 标记的基本格式为 受标记影响的内容其中 1 标记必须用 围住 否则认为是普通文本 表示结束标记 标记字母不区分大小写 2 对一段内容可以用多个标记来共同作用 产生一定的效果 此时 各个标记间的顺序也是任意的 但是不能交叉使用 3 根据需要可以只用该标记的几个属性 也可以不用属性 在使用时属性之间没有顺序 不是所有的标记都有属性和结束标记 如单标记表示换行 标记的格式 2020 3 31 20 标记的使用 例如 这是6号字 隶书 红色 这个标记是用来插入图片的 其中的 代表的是图片的URL地址 例如 该标记的意思是在网页中插入图片pic gif 该图片存放的位置在站点文件夹根目录下的images目录下 2020 3 31 21 二 网页构成的基本要素 在制作网站之前要先了解网页的基本内容 页面标题 Title 网站标志 Logo 页面尺寸 整体造型导航栏 主菜单 主体内容 超级链接版权说明 2020 3 31 22 三 网站建设的基本流程 定位站点风格包括 网站主题 网站名称 网站标志 网站色彩 页面尺寸规划站点结构 网站整体结构 收集建站资料 网上搜索 自己制作 制作网页包括 制作Logo 创建导航栏 制作超级链接 设计网页的框架和版式 添加网页内容 发布与推广网站包括 申请空间 上传网页 推广网站 2020 3 31 23 四 Dreamweaver8简介 Dreamweaver是一种较好的所见即所得的网页编辑工具 它对网页有很强的控制能力 可以直观方便的设计网页 主要优点 使用方便 易学易用 既可以使用可视化的编辑器又可以使用HTML编辑器设计网页 提供了强大的设计工具和模板 不用编写代码就可以快速的创建各种极具动态HTML特性的网页 如动画和分层等 兼容性好 适用于各种平台和浏览器 产生的HTML代码精简高效 2020 3 31 24 Dreamweaver8内容简介 Dreamweaver8的工作界面站点的创建和管理文档的基本操作基本网页制作 插入对象 设置格式等 网页的布局技术 表格 层 框架 表单 模板和库项目的使用行为和时间轴 动态网页技术 2020 3 31 25 Dreamweaver8的工作界面 基本组成 由标题栏 菜单栏 工具栏 编辑区 状态栏 插入面板 属性面板和面板组等组成 插入面板组标准工具栏文档工具栏状态栏 2020 3 31 26 站点的创建和管理 站点 一个网站所有文档的集合 一个设计良好的网站通常具有科学的结构 用不同的文件夹分门别类的保存不同类型的文件 便于管理和更新 Internet服务器 它只是一个逻辑名称 就是用于提供Internet服务 包括WWW FTP E MAIL等 的计算机 主要用于存储我们所浏览的Web站点的文件 远程站点 指存储于Internet服务器上的站点文件 本地站点 在本地计算机的磁盘上构建的站点文件 2020 3 31 27 创建本地站点 在某个驱动器的根目录下新建一个文件夹 用英文命名 作为站点文件夹 用来存放本地站点的相关文件 执行 站点 新建站点 在 站点定义 对话框中进行选择 执行 窗口 站点 或 文件 站点 或按F8快捷键 打开 文件 面板 在面板中管理站点文件 2020 3 31 28 创建站点内容 创建站点时 首页文件 主页 必不可少 首页文件的名称通常为index htm index html default htm或default html 这个名称不能随便起 由你所申请空间的远程服务器决定 如果要给文件插入图片或多媒体文件 需要在站点文件夹下再建立一个images文件夹 便于对图片的管理 2020 3 31 29 管理站点 在站点面板中 单击下拉列表中的 编辑站点 或 站点 编辑站点 可以进行以