网页设计与制作基本知识第一章.pptVIP

本章学习方法指引 在开始网页设计制作的实际操练之前，应先了解网站开发、网页制作的相关基础知识，如网页和URL的概念、网站建设开发的流程、有关网站和页面设计的一些原则和建议，以及为了后续的网页制作技巧的提高需要预先掌握的一些HTML语言的基本知识。 在本章的实验课中，开始为个人（小组）网页构思主题和风格，规划站点的层次结构和设计版面布局，并且从多种渠道为作品网站搜集各种媒体素材。 1.1网页制作入门知识-- WWW基本概念 网页、网页文件和网站 WWW（World Wide Web，万维网）服务是现在Internet上最热门的服务之一，它是一种交互式图形界面的Internet服务，具有强大的信息连接功能。 网页是网站的基本信息单位，是用HTML语言编写而成的，由文字、图片、动画、声音等多种媒体信息以及链接组成的，可在WWW上传输，能被浏览器识别显示的文本文件，其扩展名是.html或.htm。 网站由众多不同内容的网页构成，通常把进入网站首先看到的网页称为首页或主页（Homepage）。 1.1网页制作入门知识-- WWW基本概念 HTTP协议与统一资源定位器URL 1.1网页制作入门知识-- WWW基本概念 超文本 是一种把一些信息根据需要连接起来的信息管理技术，人们可以通过一个文本的链接指针打开另一个相关的文本。网页的出色之处在于能够把超链接嵌入网页中，使用户能够从一个网页站点方便的转移到另一个网页站点。 超链接 是WWW上的一种链接技巧，内嵌在文本或图像中。通过已定义好的关键字和图形，只要单击某个图标或某段文字，就可以自动链接到相对应的其他文件。将鼠标指针移至超链接上时，鼠标的指针通常会变成手指状。 1.1网页制作入门知识-- 网站建设步骤 1. 确定网站建设的目标 2. 确定网站的主题、风格 3. 规划网站的主要结构 4. 搜集准备素材 5. 制作网页并形成站点 6. 服务器空间和域名的申请 7. 网站的测试与上传 8. 网站的宣传推广、更新和维护 1.1网页制作入门知识--网页设计要点 页面版面布局的设计 主次分明、中心突出 大小搭配、相互呼应 图文并茂、相得益彰 动静有度、对称平衡 网站的设计原则 标准色彩不要多过三个，拥有一个主色调。 重视网站目录结构的管理。 网站的链接层次不要超过三层。 网页的长度应限定在三个整屏内。 网站的导航要清晰。 1.1网页制作入门知识--网页设计要点 网页中色彩的使用 不同的色彩适用于不同的心理用途，在制作网页时颜色是需要花费大量时间去重新选择和调整的元素。（本书所附光盘 “本书范例\第1章\原始文件” 中提供了配色选择卡以供参考） 1.1网页制作入门知识--网页制作的常用工具 网页页面制作的常用工具 Dreamweaver FrontPage 辅助美化的工具 Fireworks Photoshop Flash 1.1网页制作入门知识 课后练习与思考 为自己的作品网站选定主题及设计风格，初步规划出站点的各栏目名称、各页面间的层次结构和主要页面的版面布局，最后用Word将这些内容制作成一个“网站设计构思文档”。 1.2 HTML语言基本知识 通过浏览器看到的网页都是由HTML语言构成的。HTML语言是一种建立网页文件的语言，它通过标签式指令，将影像、声音、图片和文字等链接起来。 1.2 HTML语言基本知识-- HTML文件结构分析 实例结构分析 参看教材所附光盘中的 “本书范例\第1章\原始文件\myfirstpage.txt” 1.2 HTML语言基本知识--基本概念与语法规则 HTML标记 HTML标记是HTML语言中最基本的单位。标记总是封装在由小于号（）和大于号（）构成的一对尖括号之中，如body。标记有双标记和单标记之分。 双标记 由“始标记”和“尾标记”两部分构成，必须成对使用 ，例如title /title标记。 单标记 只需单独使用就能完整地表达意思，最常见的单标记是p,它表示一个段落的结束，并在段落后面加一空行。 1.2 HTML语言基本知识--基本概念与语法规则 标记属性 标记可以拥有自己的属性,从而能够包含更多额外的信息。 例如body bgcolor=“red”，表示整个页面在浏览器中的背景为红色。 很多标记内可以拥有多个属性，其语法是：标记 属性1 属性2 属性3 … 例如hr size=3 align=left width=75% 1.2 HTML语言基本知识--常用标记 文本格式标记 参看“教材所附光盘中的本书范例\第1章\原始文件\文本标记综合实例.txt” 。 1.2 HTML语言基本知识--常用标记 图像与多媒体标记 图像标记 格式：img src=图像文件地址 1.2 H