1、网页制作实例教程 (第3版),Dreamweaver基础（第1章）,1，网页设计基础知识 2，Dreamweaver CS4操作界面 3，网页的HTML代码结构 4，用可视化方法制作一个网页 5，用HTML代码制作一个网页,本章要点：,1.1.1 网页,网页从字面意思上来说就是网络上的页面，是通过浏览器显示信息的文档。一般情况下，网页由文本、表格、图像、超链接、表单、Flash动画等内容组成。网页分为静态网页和动态网页，它们之间的主要区别在于能否与服务器进行交互。静态网页是一个用HTML编写的文件，扩展名是html或htm。动态网页是能与服务器进行交互的网页，文件扩展名主要有三种：asp、js
2、p、php。,1.1 网页设计基础知识,1.1 网页设计基础知识,1，静态网页工作原理,2，动态网页工作原理,1.1.2 网站,网站又被称为站点，是由主页和相关网页构成的超文本信息的集合，通常是一个文件夹，存放网站的所有资源和页面文件 。站点分为本地站点和远端站点，存贮在本地机上的站点文件夹称为本地站点，存贮在因特网服务器上的站点文件夹称为远端站点。网站中一般包含一个主页和若干个子页，访问网站时默认打开的第一个网页称为主页，主页是站点的出发点和汇总点。,1.1.3 因特网,因特网（Internet）是全球最大的、开放的、由众多网络互联而成的计算机网络。,1.1 网页设计基础知识,1.1.5 H
3、TTP协议,TCP/IP 称为“传输控制/网络协议”，是因特网所采用的标准协议。,1.1.6 WWW,WWW 称为“万维网”，由遍布全世界的Web服务器组成，是一个庞大的信息网，每一个存贮在服务器的网站都是WWW中的一个节点。,1.1.4 TCP/IP协议,HTTP协议称为“超文本传输协议”，是在因特网上传输超文本的协议。,1.1.7 URL,URL称为“统一资源定位器”，是网上资源的存放地址。,1.1 网页设计基础知识,1.1.8 FTP协议,FTP 称为“文件传输协议”，用来进行文件的上传和下载。,1.1.10 IP地址,因特网中的每一台计算机有惟一地址，称为IP地址。IP地址由4组数字组
4、成，数字之间用圆点隔开，每一组数字都在0到255之间。 如：“2021029644”就是一个主机服务器的IP地址。,1.1.9 服务器,服务器是提供网络服务的计算机，Web服务器主要用于存贮Web站点和页面。本地机与服务器之间通过各种通信线路连接，以实现相互通信。,1.1 网页设计基础知识,1.1.11 域名,域名是主机地址的文字名称，域名是惟一的，一个域名对应一个IP地址。域名由26个英文字母、10个阿拉伯数字、减号和下划线组成，用圆点分隔成几节，字母不区分大小写。域名分级别，右边为最高级（也称为顶级），从右向左依次降低。,1.1 网页设计基础知识,1.1.12 网站设计,网站设计是指用HT
5、ML把多种媒体信息有效地组织起来，使浏览者高效、便捷地获取这些信息。网站设计主要包括两个方面：（1）信息的处理和组织，内容包括：文字排版、图片制作、平面设计、动画制作、影像制作等；（2）网站的延伸设计，内容包括：网站主题定位、浏览群定位、智能交互、制作策划、形象包装、宣传营销等。,1.1 网页设计基础知识,1.2.1 DreamweaverCS4的特点,（1）可视化编辑界面 （4）跨平台、跨浏览器 （2）强大的站点管理 （5）具有集成性 （3）灵活编写网页 （6）媒体支持能力,1.2 Dreamweaver CS4简介,Dreamweaver CS4由Adobe公司出品，是当今最流行的、功能强
6、大的专业网页制作软件。,1.2 Dreamweaver CS4简介,1.2.2 DreamweaverCS4的起始页,1.2 Dreamweaver CS4简介,1.2.3 DreamweaverCS4的工作窗口,1.2 Dreamweaver CS4简介,1.2.4 DreamweaverCS4的菜单栏,1.2.5 “文件”工具栏,1.2 Dreamweaver CS4简介,1.2.7 状态栏,1.2.6 “插入”面板,1.2 Dreamweaver CS4简介,1.2.8 属性面板,不同的网页元素，属性面板的内容也会不同 。,1.2 Dreamweaver CS4简介,1.2.9 面板组,
7、1.3 设置页面属性,1.3.1 页面属性对话框,“页面属性”对话框左边是“分类”列表，显示6个分类项： 外观（CSS）、 外观（HTML）、链接（CSS）、标题（CSS）、 标题/编码、 跟踪图像。对话框右边显示与分类项对应的设计内容。页面属性作用于整个网页，局部的特殊外观需要专门设置。,1.3 设置页面属性,1.3.2 设置页面的“外观（CSS）”,1.3 设置页面属性,1.3.3 设置页面的“外观（HTML）”,1.3 设置页面属性,1.3.4 设置页面的“链接（CSS）”,1.3 设置页面属性,1.3.5 设置页面的“标题（CSS）”,1.3 设置页面属性,1.3.6 设置页面的“标题
8、/编码”,1.4 Dreamweaver CS4的文件操作,1.4.1 新建文件,1.4 Dreamweaver CS4的文件操作,1.4.2 打开文件,1.4.3 保存文件,1.4.4 关闭文件,1.5 创建第一个网页,1，工作窗口,1.5 创建第一个网页,2，用浏览器预览,1.5 创建第一个网页,3，查看代码,1.6 HTML简介,1.6.1 HTML概述,HTML称为超文本标记语言，它用超链接把因特网里存放在不同计算机上的网站信息联系在一起，形成有机整体。HTML文件不需要编译，由浏览器解释执行。HTML是标记语言，不是程序语言，它的格式非常简单，只是由网页元素和HTML标记组成。标记用
9、来分隔和标记文档中的各个网页元素，元素的显示方式以及元素在网页中的位置由标记属性规定。HTML文件是标准的ASCII文本文件，可以用任意一个文本编辑器打开和编辑，如Windows系统自带的“记事本”。用Dreamweaver CS4可视化编辑的网页，系统会自动给出对应代码。HTML文件扩展名为“ .htm”或者“ .html”。,1.6 HTML简介,1.6.2 HTML标记,HTML标记放在“”之间，“结束标记”带有“/” 。 说明： （1）标记名与“或，后一种写法是xhtml代码书写的规范。 双标记，成对出现，如和。 （4）标记属性加在起始标记中，如 你好 。,1.6 HTML简介,1.6
10、.3 HTML代码的书写规则,（1）HTML代码中所有的符号都是半角符号，代码不区分大小写。 （2）标记中的属性不分先后，属性之间用空格分隔，属性值可以写在双引号中，也可以不用引号直接书写。 （3）标记不能交叉，但可以嵌套。 （4）回车键和空格键在HTML源代码中不起作用。 （5）HTML源代码的注释语句以“”结束。,1.6 HTML简介,1.6.4 HTML文件的基本结构,1.6 HTML简介,1.6.5 用HTML代码建立网页, 用HTML制作网页这是我用HTML代码制作的网页这是我用HTML代码制作的网页,1.7 上机实验,1.7.1 用可视化方法制作第一个网页,1.7 上机实验,1.7.2 制作第一个HTML代码网页,我的第1个HTML代码网页我们生活在网络时代,再见！,
