1 / 22

大学计算机基础

大学计算机基础. 主讲人 联系方式. 第 5 章 网页设计. 通过本章的学习，您将会掌握以下知识 5.1 网页制作的语言和工具 5.2 网页制作步骤 5.3 网页中的文本和超链接 5.4 网页中的图像和多媒体 5.5 表单的制作 5.6 网页版面设计 5.7 网页的特效制作 5.8 站点发布与管理. 5.1 . 1 网页制作语言. HTML ( Hyper Text Maker Language) 是一种超文本标记语言，用来描述 WWW 上的超文本文件。. HTML 文本的基本结构. HTML 文本的基本结构.

irma-cooley
Download Presentation

大学计算机基础

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 大学计算机基础 主讲人 联系方式

  2. 第5章 网页设计 • 通过本章的学习，您将会掌握以下知识 • 5.1 网页制作的语言和工具 • 5.2 网页制作步骤 • 5.3 网页中的文本和超链接 • 5.4 网页中的图像和多媒体 • 5.5 表单的制作 • 5.6 网页版面设计 • 5.7 网页的特效制作 • 5.8 站点发布与管理 武汉科技大学城市学院

  3. 5.1.1 网页制作语言 • HTML ( Hyper Text Maker Language) 是一种超文本标记语言，用来描述WWW上的超文本文件。 武汉科技大学城市学院

  4. HTML文本的基本结构 武汉科技大学城市学院

  5. HTML文本的基本结构 武汉科技大学城市学院

  6. 5.1.2 网页制作工具之一 武汉科技大学城市学院

  7. 网站与网页 • 万维网(WWW)上用浏览器观看的每个屏幕页面都是“网页”； • 网站是能够被人用浏览器访问并包含组织好的一组网页，也称为“站点”； • 网站一般由硬件和软件两部分组成，我们教材中主要讨论这“组织好的一组网页”的软件部分； • 例如：“google.htm”是网页加上”google.files”才是完整的； • 演示无”google.files”打开网页的情况； 武汉科技大学城市学院

  8. 网站与网页 • 网站需要服务器驱动，网页则只需要服务器空间。 网站支持邮件服务器，网页无法提供该功能。 • 综上所述网站是以数据为核心，以服务器为基础的浏览者-管理员-系统管理员相互关联、相互促进、有机制约的信息化整体。网页则是静态页面各自为政，仅仅提供链接的HTML文件。 武汉科技大学城市学院

  9. 网站的制作流程 武汉科技大学城市学院

  10. 美术字：计算机应用基础 一张动画 显示自己的能力 展示自己的风采 字幕：自己设计网页 和网页的关系 HTML 超级链接： 超级链接：网页的设计和制作 超级链接：个人网页的发布 网页内容及版面布局的设计 武汉科技大学城市学院

  11. 网页内容的设计 HTML文件名： "index.htm" 网页名称： "网页的设计和制作" 网页背景： 带有纹理的灰色大理石 网页上有文字： "计算机应用基础课程" "展示自己的风采"、"显示自己的能力" 上面两句话之间插入一张恰当的图形 滚动的字幕内容： "自己制作网页" 超级勾链文字： “HTML和网页的关系” 勾链到另一网页："html和网页.htm" 超级勾链文字： “网页的设计和制作” 勾链到另一网页："设计和制作.htm" 超级勾链文字： “个人网页的发布” 勾链到另一网页："网页发布.htm” 武汉科技大学城市学院

  12. 布局注意的原则 • 页面布局的平衡，不要太挤也不要太空； • 页面色彩的平衡，重点突出，不要太单调，也不要太花里胡哨； • 页面不宜过长，不便于观察； • 选用的图像内容要恰当，应该有助于内容的展开； • 适当使用动画可以增加网页页面的美观和生动； • 等等 武汉科技大学城市学院

  13. 收集素材 • 网上下载一些材料，特别是适用的图片 • 或者从一些光盘的资料库、图片库中挑选， • 在本例中： • 背景采用文件"bg.gif"； • 动画采用文件"0861.gif"； • 为了使文字比较美观，采用艺术字表现文字 • 可以预先在Word软件或PowerPoint软件中制作好，以备使用 • 艺术字被粘贴到网页中将变成一张图片 • 素材选用的内容在网页制作过程中可以不断改变，以期达到最好的效果。 武汉科技大学城市学院

  14. 收集素材 动画用的0861.gif 背景用的bg.jpg 用艺术字写的标题文字 用艺术字写的左右用文字 武汉科技大学城市学院

  15. 注意事项 • 一般来说这些素材所涉及的文件应该放在同一个子目录以及它的下级子目录中 • 便于调用和管理 • 便于该网页的浏览 • 便于向Web Server上传发布 武汉科技大学城市学院

  16. 5.3 网页中的文本格式与超链接 • 文本的输入;关于软回车和硬回车 • 文本的粘贴; • 超连接的类型: • 内部链接：同一站点内不同页面之间的超级链接; • 外部链接：当前页面链接到Internet上其他站点; • 书签（锚点）链接：链接到该网页自身某个特定位置; • 热区的制作和链接; • 链接路径：网址或本地链接的文件夹或文件名。 武汉科技大学城市学院

  17. 5.3.1添加文本 • 创建文本 • 插入特殊文本元素 • 换行符、水平线、特殊符号、段落缩进空格和注释 • 编辑文本 • 添加项目列表和编号列表 武汉科技大学城市学院

  18. 1、设置字体 2、添加字体 3、设置大小 4、设置颜色 5、设置样式 6、段落格式 5.3.2 字符格式标记 武汉科技大学城市学院

  19. 2、添加字体的过程 武汉科技大学城市学院

  20. 5.4网页中的图像与多媒体 5.4.1 在网页中插入图像 5.4.2 为图像增加替代文本 5.4.3 图像处理 5.4.4 插入网页背景图 5.4.5 在网页中加入多媒体 武汉科技大学城市学院

  21. 网页布局的原则 • 醒目性：指用户把注意力集中到网页的内容 • 创造性：有鲜明个性，有新的创意 • 造型性：维持整体外型上的稳定感和均衡性 • 明快性：指准确、快速转达网站的构成内容 • 可读性：指网页的内容让人明了 归结为 统一、协调、流动、强调、均衡。 武汉科技大学城市学院

  22. 谢 谢 ！ 武汉科技大学城市学院

More Related