《二章站点设计与管理ppt课件.ppt》由会员分享，可在线阅读，更多相关《二章站点设计与管理ppt课件.ppt（31页珍藏版）》请在三一文库上搜索。
1、第二章 站点设计与管理,韦妍,网页设计与制作,第二章 站点设计与管理,教学任务,学习Dreamweaver CS4的操作环境,学会创建一个新的网站,1,2,第二章 站点设计与管理,教学重点与难点,学会创建一个新的网站,2,第二章 站点设计与管理,4,2.1Dreamweaver CS4简介,Dreamweaver CS4是由美国Adobe公司推出的，一个可视化网页 设计和网站管理工具软件。 Dreamweaver CS4是一套网页编辑软件，就算没有制作网页的 基础，也能很轻松地利用它制作出漂亮的网页，只要从菜单、面 板中直接套用就可以了，免除了学习HTML标签命令的困扰，也 节省了很多编写源代
2、码的时间。 Dreamweaver CS4有强大的网站管理功能，当修改文件名、移动 或删除文件时，它自动修改相关的链接；它内置FTP功能，可以 直接将文件上传到网站服务器，在网站窗口中可以看到本地端和远程 网站的文件，随时检查两端的差异。,第二章 站点设计与管理,5,2.1Dreamweaver CS4简介,1、启动Dreamweaver CS4 启动Dreamweaver CS4的操作很简单，和其它软件的启动方式基本一致。 (1)单击“开始”菜单按钮，在程序组中选择【程序】【Adobe Dreamweaver CS4】命令，即可启动Dreamweaver CS4软件，如图所示。,第二章 站点
3、设计与管理,6,(2)首次启动Dreamweaver CS4时，会弹出【默认编辑器】对话框，用户可为Dreamweaver CS4设置编辑器，如图所示。,第二章 站点设计与管理,7,(3)在此保持默认设置，单击【确定】按钮，此时将打开Adobe Dreamweaver CS4欢迎屏幕，如图所示。,第二章 站点设计与管理,8,提示：选择欢迎屏幕下方的“不再显示”复选框，再次启动欢迎屏幕即关闭，在菜单栏中选择【编辑】【首选参数】【常规】【显示欢迎屏幕】命令，即可以在下次启动该软件时将重新显示欢迎屏幕。,第二章 站点设计与管理,9,2.1 Dreamweaver CS4的操作环境,和以前版本相比，D
4、reamweaver CS4的工作界面焕然一新，可以说是做了一次脱胎换骨的改进，从界面中可以看到更多的设计元素。另外，Dreamweaver CS4的操作环境非常灵活，用户完全可以根据自己的习惯进行定制。下面对Dreamweaver CS4的操作环境进行详细介绍。 Dreamweaver CS4的工作界面由标题栏、菜单栏、插入面板、文档工具栏、文档编辑区、状态栏、属性面板、面板组、扩展管理器等组成，如图所示。,第二章 站点设计与管理,10,第二章 站点设计与管理,11,工作界面定制: 用户可以根据各自的习惯进行工作界面的定制，在窗口的标题栏右侧面有一个【设计器】按钮，单击它会弹出一个下拉菜单，
5、可以定制【应用程序开发人员】、【经典】、【编码器】、【设计器】等不同的工作界面。,第二章 站点设计与管理,12,2.2创建一个新的网站,1.3.1 新建站点 一个网站由许多相互关联的网页组成，制作网页的根本目的就是制作一个完整的网站。因此在制作网页之前，应该先在本地计算机的磁盘上建立一个网站，然后把这个网站发布到Web服务器上，放在本地的网站称为本地站点，处于internet中的web服务器上的网站称为远程站点。Dreamweaver CS4有一套专业的创建和管理站点的工具，方便设计人员对本地站点和远程站点进行管理。,第二章 站点设计与管理,13,在新建站点之前，首先要进入【站点定义】对话框，
6、进入【站点定义】对话框方法有下列几种： 1文件面板 （1）文件面板中右上方的【管理站点】链接，如图所示。,第二章 站点设计与管理,14,（2）单击文件面板左上方的箭头按钮 ，选择弹出的下拉列表底部的【管理站点】，如图所示。,第二章 站点设计与管理,15,从上述（1）（2）方法中任选一方法都可进入【管理站点】 对话框，执行【新建】【站点】，即可弹出【站点定义】 对话框。,第二章 站点设计与管理,16,第二章 站点设计与管理,17,2站点菜单 （1）执行【站点】菜单【新建站点】命令，即可进入【站点定义】对话框。,第二章 站点设计与管理,18,（2）执行【站点】菜单【管理站点】命令，【管理 站点】对
7、话框，再执行“新建站点”命令，也可进入 【站点定义】对话框。,第二章 站点设计与管理,19,3、进入【站点定义】对话框后，定义本地站点的方法有下列两种： （1）利用【基本】选项卡的站点定义向导。 （2）利用【高级】选项卡，这种方法比较直观快速。,第二章 站点设计与管理,20,下面详细介绍一下利用【基本】选项卡，根据站点定义向导提示定义本 地站点的步骤： (1)进入【站点定义】对话框后，选择【基本】选项卡（如图所示）；,第二章 站点设计与管理,21,(2)设置站点名称为“好可工作室”，在站点的URL文本框中输入网站的域名或IP地址，如果要创建本地站点，则此处可以留空。单击【下一步】按钮。 (3)
8、弹出的对话框中询问是否使用服务器技术，如图所示。由于建立的是静态网站，选择“否，我不想使用服务器技术”单选按钮，单击【下一步】按钮。,第二章 站点设计与管理,22,第二章 站点设计与管理,23,(4)在下一步对话框中，选择“编辑我的计算机上的本地副本，完成后再上传到服务器”单选 按钮。可以单击 按钮设置站点的本地根文件夹的位置，若根文件夹没预先建立好，可此时新建。如图所示。选择设置好后，单击【下一步】按钮。,第二章 站点设计与管理,24,第二章 站点设计与管理,25,(5)在下一步对话框中，显示选择远程服务器连接方式的界面。在“您如 何连接到远程服务器”下拉列表框中选择“无”选项，如图所示。单
9、击 【下一步】按钮。,第二章 站点设计与管理,26,(6)此时，出现确认信息界面，显示前面已经设置完成的内容，单击 【完成】按钮，如图所示。,第二章 站点设计与管理,27,(7)返回到【管理站点】对话框，如图所示。单击【完成】按钮，本地站点创建完成，在【文件】面板中的【本地视图】窗口中会显示该站点的名称和根文件夹。,第二章 站点设计与管理,28,2.3项目实训,1、上网浏览网页，了解该网站的布局和内容。 2、从网上下载一些自己喜欢的动画、图片，为网页制作做准备。 3、创建本地站点，并把自己收集到的资源放到该站点中。,第二章 站点设计与管理,29,4.实训案例效果,第二章 站点设计与管理,30,2.4本章小结,本章介绍了网页设计的基础。讲解了网页的相关概念，Dreamweaver CS4的安装和启动；重点讲解了Dreamweaver CS4的操作环境和创建一个新网站的方法与技巧。通过本章的学习和上机实训的练习读者可以快速地熟悉Dreamweaver的工作界面和操作流程，熟练地架构好一个新的网站。,Thank You!,网页设计与制作,