1、Dreamweaver 8策划分析、站点理解12/5/202211、是否曾想过，这么多漂亮而且实用的网站是怎么做出来的2、是否曾想过自己做一个主页挂到网上，展示自己的个性魅力呢3、你有blog吗？想让自己的Blog更个性吗？当你上网遨游的时候当你上网遨游的时候12/5/20222关于网站制作，关于网站制作，你了解多少工具？你了解多少工具？有没有辅助工具呢？有没有辅助工具呢？网络技术的发展使得人们对网页所能包含的信息量的要求越来越高 作为网页三剑客之一的Dreamweaver就是一个功能强大，为从多网页设计师所青睐的网页制作利器！12/5/20223网页三剑客简介 nDreamweaver 8
2、acromedia公司推出的网站开发工具主要功能：站点管理，网页排版与编辑等nFireworks 8 acromedia公司推出的网站开发工具主要功能：网页图形图象的制作及修改热点及切片的应用nFlash 8 acromedia公司推出的矢量动画设计软件以上是网页三剑客所学的三门软件因为都与网页制作有关，且功能强大，彼此结合性极好,故称之为：网页三剑客 12/5/20224你心动了吗？12/5/20225静态网页教学安排静态网页教学安排12/5/20226策划与分析策划与分析n建站目的,根据需求确定网站内容；n网站模块规划；n布局结构；n主体风格；n收集网页所用素材；（Fireworks,Fl
3、ash）n利用软件制作网页（Dreamweaver）12/5/20227n项目名称：n主题阐述（创意、风格）n网站模块：n素材来源：n主要技术实现关键步骤：n项目总结：项目实践报告册的提交项目实践报告册的提交12/5/20228网页与网站n网页网页：我们在浏览器中看到的页面，它是一个单个的我们在浏览器中看到的页面，它是一个单个的文件。网页里可以有文字、表格、图像、声音、视频文件。网页里可以有文字、表格、图像、声音、视频等等。等等。后缀是后缀是htm或或html的文件。的文件。n首页首页：网站中的第一个页面成为首页或主页。：网站中的第一个页面成为首页或主页。n网站网站：二个或更多的网页链接在一起
4、就构成了网站：二个或更多的网页链接在一起就构成了网站（也叫站点）。计算机上的网站其实就是一个文件夹。（也叫站点）。计算机上的网站其实就是一个文件夹。12/5/20229n网站（站点）必须网站（站点）必须放在服务器上。放在服务器上。n服务器服务器是一种大容量的计算机，是一种大容量的计算机，与与Internet日夜相连日夜相连。网站与服务器注：注：Internet上有各种服务器，上有各种服务器，,而我们在网上浏而我们在网上浏览到网页在览到网页在WWW服务器上。一台服务器上可以服务器上。一台服务器上可以设多个网站设多个网站,它们对应着不同的域名和它们对应着不同的域名和IP地址。有地址。有些大型网站可
5、能有多台服务器。些大型网站可能有多台服务器。12/5/202210Dreamweaver 8 简介简介Dreamweaver 是 建立 Web 站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合为一个功能强大的工具，使每个级别的开发人员和设计人员都可利用它快速创建界面。开发人员可以将其选择的服务器技术与 Dreamweaver 8配合使用，建立将用户连接到数据库和Web 服务的强大 Internet 应用程序。12/5/202211Dreamweaver 8的启动12/5/202212标题栏标题栏菜单栏菜单栏插入栏插入栏文档工文档工具栏具栏文档窗文档窗口口属性面属性
6、面板板面板组面板组文件面板文件面板视图视图(在文档工具栏上可以切换视图）在文档工具栏上可以切换视图）代码视图：代码视图：设计视图：设计视图：代码代码/设计设计:在进行网页编辑时在进行网页编辑时,由于控制面板的由于控制面板的影响无法看到网页的全貌影响无法看到网页的全貌,可以使用快捷可以使用快捷键键F4快速关闭所有控制面板快速关闭所有控制面板,再按再按F4可以可以恢复原来的状态。恢复原来的状态。12/5/202213标题栏标题栏文件标题文件标题网页存储位置与文件名称网页存储位置与文件名称内容经过修改尚未保存内容经过修改尚未保存 如何修改标题如何修改标题1.2.修改文件标题修改文件标题,它将显示在浏
7、览它将显示在浏览器的标题栏中。器的标题栏中。12/5/202214状态栏状态栏u标签选择器单击可选中该标签及标签中内容标签顺序：从左到右依次向内选择对象的好办法窗口大小u窗口大小(在最大化情况下无法修改)u文档大小和估计下载时间(可在编辑首选参数中修改)12/5/202215首选参数设置首选参数设置 首选参数定义了启首选参数定义了启动动Dreamweaver 8时对时对工作环境的一些默认设工作环境的一些默认设置，置，1、选择主菜单、选择主菜单“编编辑辑”“首选参数首选参数”命命令令2、按、按CtrlU组合键组合键图2-2 “首选参数”对话框12/5/202216练习一：练习一：Dreamwea
8、ver入门入门l启动启动Dreamweaver开始开始程序程序Macromedia Macromedia Dreamweaver 8l打开打开/关闭关闭 站点管理器站点管理器 对象面板、属性面板对象面板、属性面板l熟悉工作环境熟悉工作环境 设置窗口设置窗口12/5/202217网页的基本分类 以网页的角度来看以网页的角度来看,一个网站中的众多网页一个网站中的众多网页,主主要可以分成下列两层要可以分成下列两层:个人主页个人主页兴趣爱好兴趣爱好个人相册个人相册个人收藏个人收藏导航层导航层内容层内容层12/5/202218做网页的几个关键步骤做网页的几个关键步骤l 创建本地站点创建本地站点l 编辑网
9、页编辑网页l 超级链接超级链接l 网页排版网页排版l 发布站点发布站点12/5/202219两个为什么？n 为什么要建站点？为什么要建站点？n 计算机上的站点计算机上的站点 是什么样？是什么样？12/5/202220为什么要建站点？本地站点本地站点网页网页1 1网页网页2 2主页主页网页网页3 3站点站点网页网页1 1网页网页2 2主页主页站点站点？服务器服务器上传上传12/5/202221远程站点和本地站点 网页的开发和制作一般在客户端进行，之后向服务器上传。n本地站点：在开发阶段，临时存放在客户开发端的站点。n远程站点：开发结束后，发布在服务器端存放的站点。12/5/202222计算机上的
10、站点12/5/202223创建站点规划站点 index.htm(或default.htm)picture.htmclothes.htmmusic.htm12/5/202224建立网站初步n建立本地站点 1.目的目的：在本地建立一个文件夹，此文件夹放 置网站用到的所有文件。2.步骤步骤：(1):站点/新建站点/高级 (2):进行如下设置：站点名称-为本地站点命名 本地根文件夹-设置此文件夹的路径 默认图象文件夹-设置此站点图象文件的默认存储路径。（可不设置）HTTP地址-输入网站的网址。（可不设置）注意：当本地站点建立好后，自动显示“站点”面板。12/5/202225实例设计练习n在在D硬新建一
11、个文件夹，给文件夹命名，如硬新建一个文件夹，给文件夹命名，如:mysite。n在在Dw中，选择中，选择“站点站点新建站点新建站点”命令。命令。n输入站点名称输入站点名称（个人网站）（站点名称可以是中文）（站点名称可以是中文）n找到本地根文件夹找到本地根文件夹(D:mysite)n根据规划情况，建立几个空白网页、文件夹根据规划情况，建立几个空白网页、文件夹Try yourself12/5/202226页面属性的设置打开：属性面板页面属性 修改页面属性 注意：链接颜色 跟踪图象：相当于特殊的辅助线，是网页排版 的一种辅助手段，只在网页编辑时可见，对最终结果没有影响。注意与背景图象的区别注意与背景图
12、象的区别12/5/202227预览的概念n作用作用 1.1.上传前在本地浏览器中浏览网页上传前在本地浏览器中浏览网页.(F12).(F12)2.2.不必保存即可预览不必保存即可预览.(.(但为了加快运行速度但为了加快运行速度,最好保最好保 存后预览存后预览)12/5/202228建立站点原则n不要使用不要使用中文中文目录；网络无国界，使用中文目目录；网络无国界，使用中文目录可能对网址的正确显示造成困难。录可能对网址的正确显示造成困难。n不要使用过长的目录；尽管服务器支持长文件不要使用过长的目录；尽管服务器支持长文件名，但是太长的目录名不便于记忆。名，但是太长的目录名不便于记忆。n尽量使用意义明确的目录；便于记忆和管理尽量使用意义明确的目录；便于记忆和管理12/5/202229总结n用DW制作网站的初步，包括站点的建立和编辑，网页文件的建立。（重点）n以后的内容是对网页文件的编辑。12/5/202230
