网页设计与制作第一课

网页设计与制作第一课：网页设计基础一、网站的概述1、网页与网站

浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站。

举例：(搜狐网)

(百度网)

(优酷网)

等等。。。（这里点开网页具体讲解什么是网页，什么是网站如何输入网址进入网页）2、浏览网页的工具-浏览器浏览器：用于打开显示网页的软件。最常见的是Windows系统自带的IE

浏览器。

还有火狐Firefox、360安全浏览器、遨游、腾讯TT等等。1）网址：用于定位某个网站某个页面的一串字符，通常是这种格式

/nba.shtml2）主页：访问网站时，默认打开的第一个页面就是主页也叫首页。（这里讲解一下浏览器到底是什么东西）一、网站的概述3、认识网页的组成元素一、网站的概述1、制作网站的流程

规划网站类型及主题→搜集资料素材→使用软件进行网页制作→测试及发布。二、初识Dreamweaver2、认识Dreamweaver

是当前最流行、最方便的网页设计和网站开发工具软件。

Dream：梦想

weaver：织布者，织工

Dreamweaver：梦想编辑者。通过这个工具，实现编辑网页的梦。

早期是Macromedia公司推出的“网页三剑客”之一。“网页三剑客”指的是

Dreamweaver、Flash、Fireworks这三个软件，它们这三个集合起来，就像

江湖中最厉害的剑客一样，成为了网站开发中的专用利器。它集网页制作和

管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师

特别开发的可视化网页开发工具，前两年Macromedia公司被Adobe公司收购，

DMCS6是最新推出的版本。二、初识Dreamweaver【操作演示】启动Dreamweaver实例：制作一个简单文字网页页面

(两种方法对照，直接制作和代码制作，做最简单的文字内容，告诉学生两种方法都可以实现，他们的优缺点，让他们了解有两种方法就可以了，后面主要还是直接用设计界面)三、Dreamweaver的用户界面

“文件”工具栏

状态栏

属性面板

不同的网页元素，属性面板的内容也会不同。面板组

【操作演示】：工作窗口的设置、保存、恢复

关闭Dreamweaver基本网页的文件类型为HTML文档，保存的文件扩展名为“.html”1.创建网页文档（HTML文档）

文件→新建→新建文档→常规→类别→基本页2.保存指定文件（编辑中的文件如果文件名后面带有“*”号，表示未保存）

文件→保存（或Ctrl+S)

文件→另存为

文件→保存全部注意：1、网页文件要用英文或数字进行命名，莫用中文。

2、基本网页的扩展名为.html四、网页文件的基本操作3.打开已建的HTML文档文件→打开右击文件，选择Dreamweaver打开。拖动到Dreamweaver4.关闭文件文件→关闭还未保存的网页（*），关闭时会提示你是否保存。其他操作：1）多个编辑文件的切换选择2）预览编辑中的网页(快捷键F12)四、网页文件的基本操作【操作演示】：1.新建一个网页，输入本人的名字，性别，年龄，爱好等内容2.保存该网页，名字命名为“个人网页”。3.打开刚保存的网页，删除里面关于年龄的内容，再次保存。4.在浏览器中预览。5.检查无误后，关闭该文档。五、创建站点1、什么是站点

Dreamweaver的站点是一种管理网站中所有相关联文件的工具。通过站点可以对网站的相关页面及各类素材进行统一管理，还可以以使用站点管理实现将文件上传到网页服务器，测试网站。

站点简单的说就是一个文件夹。在这个文件夹里包含了网站中所有用到的文件。我们通过这个文件夹（站点），对我们的网站进行管理，有次序，一目了然。【操作演示】：

创建站点1)《我的个人网页》

站点根目录为D：/myweb2)设置默认图像文件夹六、管理站点1、在“文件”面板中实现以下操作选择编辑网页文件创建文件或文件夹剪切、粘贴、复制、删除、重命名文件或文件夹2、站点管理编辑站点复制站点删除站点【操作演示