第1章 Dreamweaver CC网页设计基础

第1章DreamweaverCC网页设计基础1.1网页设计基础1.1.1网页设计的发展历史一、第一张网页二、基于表格的网页1.1网页设计基础三、基于Flash的网页设计四、基于表格的网页1.2网页的基本概念一、网站网站是一个存放在网络服务器上的完整信息的集合体。它包含一个或多个网页，这些网页以一定的形式连接成一个整体。二、网页简单地说，用户通过浏览器看到的任何一个画面都是网页，网页从本质上讲是一个HTML文件，而浏览器正是用来解读这种文件的工具。三、主页主页也可以称之为首页。它既是一个单独的网页，又是一个特殊的网页，作为整个网站的起始点和汇总点，是浏览者浏览某个网站的入口四、静态网页所谓的静态网页，是指该用户不论从何时何地浏览网页，该网页所呈现的画面和内容都是不变的，这类网页仅供浏览，不能传达信息给网站以让网站做出响应。如果需要更改网页内容就必须修改源代码然后再上传到服务器上。五、动态网页所谓动态网页，是指网页能够按照用户的操作做出动态响应，如网页上常见的留言板、论坛等。动态网页能根据不同时间访问的来访者显示不同的内容。1.1网页设计基础1.1.2网页设计的基本概念六、超链接所谓的超链接，是指从一个网页指向一个目标的连接关系，该目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一幅图片、一个电子邮件地址、一个文件，甚至是一个应用程序。1.1网页设计基础一、分析阶段分析阶段是指根据用户或设计者的需要来确定Web站点的目标和类别。在设计之前要确定网站的类别，例如，有的网站设计是为了更好地宣传公司以提高公司的形象，有的是为了树立政府部门的形象，还有的是为了体现私人个性化。二、设计阶段设计阶段是指根据站点的目标整理出站点的内容框架以及逻辑结构图。目标确定后，先把目标细化，并初步收集整理出站点目标所需要包含的内容，形成站点设计的需求纲要，然后画出站点的结构图。三、实现阶段实现阶段是指使用网页制作工具完成页面的制作。在网页的制作过程中会使用到许多工具，如Dreamweaver、Fireworks、Flash、Photoshop、imageready等。四、测试阶段测试阶段是指使用浏览器测试网页的效果和正确性。网页制作完毕后，需要在浏览器中进行网页测试，看看制作的网页效果如何以及是否能在浏览器中正确显示。1.1网页设计基础1.1.3网页设计的基本流程五、维护阶段维护阶段是指把经过测试后准确无误的网页上传并发布到Internet上。为了让网页吸引更多浏览者的眼球，网页需要时常更新的，还要对其进行定期的维护和修改。1.1网页设计基础一、HTML文档特征（1）标签都用“”和“”框起来。（2）标签一般情况下是成对出现的，结束标签比起始标签多一个“/”。如“html”和“/html”，第一个叫开始标签，第二个叫结束标签。（3）标签可以嵌套，但是先后顺序必须保持一致。二、HTML文档格式一个完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象，这些对象统称为HTML元素。HTML中使用标签来分割并且描述这些元素，HTML文件就是由各种HTML标签和元素组成的。1.2认识HTML语言1.2.1HTML的基本概念一、文本在HTML中，文本标签为font，与之对应常用的属性有color（定义字体的颜色）、size（定义文字的大小）和face（定义文字的字体）等。二、标题标题标签可以区分文章段落，使页面呈现出丰富的层次感。标题标签有6个级别，从h1到h6。h1为一级标题，h6为六级标题，强调方式依次减弱。三、图像在HTML中，图像是由img标签定义的，用于插入图像。常用的属性有src（定义图像所在的地点和文档名称）、alt（设置替换文本）、aling（设置对齐方式）、width（定义图像的宽）和height（定义图像的高）等。四、链接链接是非常重要的标签，在HTML中锚标签a用来定义链接。常用的属性有target（定义打开链接地址的方式）、href（定义链接到的地址）等。五、表格在HTML中，table标签用来定义表格。一个表格使用tr标签划分为若干行，使用td标签将每一行划分为若干单元格。1.2认识HTML语言1.2.2常用HTML的标签1.2认识HTML语言1.2.3典型实例──设计“滚动图片展示”网页1.2认识HTML语言1.2.3典型实例──设计“滚动图片展示”网页1.导入图像1.2认识HTML语言1.2.3典型实例──设计“滚动图片展示”网页2.设计滚动效果3.预览网页1.3DreamweaverCC网页设计基础1.3.1DreamweaverCC的操作基础1.Dreamweaver发展简介Dreamweaver先后开发了Dreamweaver4.0、DreamweaverCS3、DreamweaverCS4、DreamweaverCS5和DreamweaverCC等版本。1.3DreamweaverCC网页设计基础2.DreamweaverCC界面介绍（1）起始界面。1.3DreamweaverCC网页设计基础（2）操作界面。1.3DreamweaverCC网页设计基础1.3.2典型实例──设计“公司宣传”主页1.3DreamweaverCC网页设计基础1.创建站点1.3DreamweaverCC网页设计基础2.创建文档1.3DreamweaverCC网页设计基础3.设置页面属性1.3DreamweaverCC网页设计基础4.布局网页1.3DreamweaverCC网页设计基础5.添加内容1.3DreamweaverCC网页设计基础6.设置超链接