Dreamweaver网页制作LGYCH01网页设计基础要点.ppt

网页设计 刘颖 数学与计算机学院 教师个人信息 刘颖，讲师 电子科大软件工程硕士 联系我： Phone私人腾讯微博名：留影 电子作业上传E-mail ： pzhxyliuying@163.com 教学目的 《网页设计》是一门工具课，其原则是实用，主要介绍网页和网站的基础知识，网页设计的基本工具，网页设计的基本方法，网站建设和维护的基本步骤等等。希望同学们通过本课程的学习，能够亲手创建起自己的网站。 基本内容 HTML 语言 Dreamweaver Flash（简介） Firework （自学） 教材与参考书目 教材： [1] Dreamweaver网页制作实用教程 ，张新成、缪亮，清华大学出版社，2012年 教学参考书： [2] Dreamweaver网页设计与制作案例教程 ，吴鹏，北京大学出版社，2010年 [3] 中文版DreamweaverCS3网页设计快学易通 ，薛凯、耿跃鹰，机械工业出版社，2009年 第1章 网页设计基础 刘颖 数学与计算机学院 第1章 网页设计基础 1.1 概述 1.2 Internet与HTML 1.3 初识Dreamweaver 1.1 概述 网页的基本概念 网页－－用HTML语言编写的超文本。 热点－－光标会在某些文字或图像上显示为手的形状，也叫超链接。 什么是HTML HTML（Hypertext Marked Language，超文本标记语言），是一种用来制作超文本文档的简单标记语言。 用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作WWW（World Wide Web）的信息表示语言，用于描述网页的格式设计和它与WWW上其它网页的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。 所谓超文本，是指用HTML创建的文档可以加入图片、声音、动画、影视等内容，并且可以实现从一个文件跳转到另一个文件，与世界各地主机的文件连接。 课堂实例―创建和测试第一个网页 在“记事本”窗口中输入以下内容： 初识HTML标签 HTML文档是在普通文件中的文本上加上标签（或者叫标记），使其达到预期的显示效果。当浏览器打开一个HTML文档时，会根据标签的含义显示HTML文档中的文本。其中标签由“标签名称 属性”来表示。 1．HTML标签的结构形态 1）标签 元素 /标签 2）标签 属性名 = 属性值 元素 /标签 3）标签 2．对实例中标签的解释 1）html和/html 2）head和/head 3）title和/title 4）body和/body 网页与网站 网页通常成组出现，并且这组网页之间通过超链接相互组织为反映某个主题的网站。 网站基本结构 网站是由网页组成的，网页之间是由超链接来连接的，其连接方式有三种：线性网站、树状网站、非线性网站 网页的基本分类 以网页的角度来看,一个网站中的众多网页,主要可以分成下列两层: 网页制做的一般过程 选择主题 规划网页（结构与链接关系） 组织素材 选择视觉外观 设计有效的页面布局 制作具体网页 发布网站信息 网站设计与建立的基本原则 （1）准确定位网站的主题、名称，方向明确。 （2）做好网站形象和整体风格的创意设计。 （3）仔细策划网站的栏目模块及其层次结构。 （4）网站内容要精、专、奇、新，不要面面俱到。 （5）灵活运用色彩，发挥其在网页设计中的作用。 （6）导航结构要一目了然，以提高网络的交互性和亲合度。 （7）要注意带宽、浏览器、分辨率等问题。 网页制作工具 一、HTML代码编辑工具 二、所见即所得工具 三、混合型工具 1 DREAMWEAVER 2 FORWORKS 3 FLASH等 1.2 Internet与HTML 1.2.1 Internet与万维网 1.2.2 HTML语言基础 1.2.3 HTML常用标记 1.2.1 Internet与万维网 一、 Internet概述 将地理位置不同的、具有独立功能的多个计算机系统通过通信线路和通信设备互连在一起，由网络软件实现网络资源共享和互相通信的系统叫计算机网络。 计算机网络按照覆盖区域可分为局域网（LAN）和广域网（WAN）。 Internet是将全世界的网络连接在一起形成的国际互联网络，简称“互联网”，我国推荐名称为“因特网”。 Internet的发展历程 20世纪60年代末，美国国防部所属的高级研究规划署ARPA研究并建立了实验性军用计算机网络ARPANet。 70年代，ARPANet网络的应用由军事领域延伸到教育领域，科学家们开始利用ARPANet网络交换信息，共享研究成果。 1983年，TCP/IP协议（即传输控制协议和网际