《网页设计与制作实用技术（第二版）-电子教案-齐建玲 CH2》由会员分享，可在线阅读，更多相关《网页设计与制作实用技术（第二版）-电子教案-齐建玲 CH2（25页珍藏版）》请在金锄头文库上搜索。
1、通过本章学习，应该掌握以下内容： 规划站点结构的方法 Dreamweaver CS5的基本操作 利用Dreamweaver CS5创建站点的方法 站点的基本操作,第2章 创建站点,2.1 规划站点结构,1按照文件的类型进行规划,按照文件的类型规划，就是将不同类型的文件分别存放在不同的文件夹下。,2按照网页主题进行规划,按照网页主题，对站点结构规划，可以使网站条理更清晰，便于日后更好地管理站点。,下面是建立目录结构的一些建议：,（1）不要将所有文件都存放在根目录下，会造成文件管理混乱,（3）按栏目内容建立子目录,（2）在每个主栏目目录下都建立独立的images目录,（4）目录的层次不要太深,（5
2、）不要使用过长的目录,（6）不要使用中文目录,Dreamweaver是Macromedia公司的出品的一款“所见即所得”的网页编辑工具。与FrontPage不同，Dreamweaver采用的是Mac机浮动面版的设计风格，对于初学者来说可能会感到不适应。一旦习惯了其操作方式后，就会发现Dreamweaver的直观性与高效性是FrontPage所无法比拟的。,2.2 利用Dreamweaver CS5创建站点,2.2.1 Dreamweaver CS5简介,1Dreamweaver CS5的界面,Dreamweaver CS5的起始页,Dreamweaver CS5的操作界面,（1）菜单栏 菜单栏
3、提供了所有的菜单命令，是提供软件最完整功能的方式。 （2）工具栏 工具栏提供了常用命令的快捷启动方式，例如可以使用工具栏中的“标题”框方便地设置网页的标题。 （3）插入面板 插入面板是Dreamweaver CS5中新添的部件，其实就是Dreamweaver 4中的对象面板，在其中包含一些用于创建不同类型对象的按钮。,（4）浮动面板 浮动面板是一种方便操作的界面方式，使用者可以随时获得特定功能。 （5）文档窗口 文档窗口是显示用户所编辑文档的地方，显示结果与文档在浏览器中显示的结果基本相同。 （6）属性面板 属性面板上显示的是被选取对象或文本的各种属性，在属性面板上还可以检查和编辑当前选定页面
4、元素的属性。 （7）状态栏 状态栏用于显示网页的一些基本信息，如网页大小、显示比例和估计下载时间等。,2Dreamweaver的视图,单击工具栏上的“设计”按钮，即显示设计视图；使用工具栏中的“代码”按钮，则可以很方便地切换到代码视图，以便查看当前编辑网页的HTML源代码；如果需要同时查看代码视图和设计视图，可以单击工具栏上的“拆分”按钮，此时Dreamweaver将同时在窗口中显示代码视图和设计视图。,2.2.2 定义站点,在Dreamweaver CS5的编辑窗口，选择“窗口”“文件”菜单，即可打开站点面板，如图所示。 在站点面板中，用户可以选择菜单“站点”“新建站点”命令创建新站点，也可
5、以使用“站点”“管理站点”命令对已有的站点进行管理。,1站点面板,（1）选择“站点”“新建站点”命令，弹出“站点设置”对话框， 也可选择“站点”“管理站点”命令，打开“管理站点”对话框，单击“新建站点”按钮打开该对话框；还可以在站点面板中单击 按钮，在弹出的菜单中选择“站点”“新建站点”命令打开该对话框。 （2）输入站点名称和根目录的位置 （3）单击“保存”按钮,2创建站点,演示创建站点的方法,在站点面板中打开工具栏的“文件”下拉列表框，选择需要打开的站点，文件窗口中即会显示该站点文件夹和文件信息。,2.2.3 站点的基本操作,1打开站点,若要复制当前站点，可以使用文档窗口或站点面板中“站点”
6、菜单的“编辑站点”命令，打开“编辑站点”对话框。选中要复制的站点名称，单击“复制”按钮即可对当前站点进行复制操作。 执行复制站点操作后，系统会自动复制一个所选择的站点，并且会为复制的站点加上一个“复制”字样的站点名称。,2复制站点,如果要更改当前站点设置，比如对站点进行修改站点名称、设置参数选项等编辑操作，可以利用上面的方法打开“管理站点”对话框，选中一个站点后单击“编辑”按钮，即可打开该“站点设置对象”对话框。,3编辑站点,在Dreamweaver CS5中删除一个站点非常容易，在弹出的“管理站点”对话框中，单击“删除”按钮就可以删除选中的站点。,4删除站点,注意：此删除操作并未真正删除站点
7、文件夹和其中的内容，而只是无法再用Dreamweaver管理该文件夹而已。如果需要再次用Dreamweaver管理该文件夹，只要用新建站点的方式再次将该文件夹指定为站点根目录即可。,（1）申请域名和主页空间 网站的发布首先要考虑的是以什么样的域名发布，发布在什么地方，即要申请域名和主页空间。 （2）设置浏览器的兼容性 为了避免在不同类型和版本的浏览器中出现某些元素不能正常显示的现象，在站点发布前必须设置浏览器的兼容性。,5发布站点,（3）测试站点 在将站点上传到服务器并宣布已经可供浏览之前，最好先在本地计算机上对其进行一下测试，因为在站点或者网页中可能会存在许多问题。 站点的测试主要包括：查看
8、超链接、验证超链接、修复超链接、更新超链接及测试网络连接等。 （4）测试网络连接 如果在访问或打开一个服务器上的站点时遇到一些问题，则可以通过测试网络连接来检查主机名称、本地主机、IP地址、TCP/IP协议等设置。,（5）在本地计算机上发布站点 测试完站点后，如果觉得把站点发布到服务器上的时机还不成熟，那么可以先在本地机上发布以测试效果。 （6）在服务器上发布站点 在本地计算机上设置完浏览器的兼容性、测试完站点后，就可以在服务器上正式发布精心制作的站点了。 发布站点的方法有很多种，例如FTP上传或各大站点提供的文件管理器等。,如果要新建一个新的网页文件，可以按照以下两种方法进行操作。 （1）打
9、开Dreamweaver CS5起始页，单击“新建”栏中的HTML按钮，即可打开一个新网页。 （2）单击“文件”“新建”命令，将弹出“新建文档”对话框。,2.2.4 网页的基本操作,1新建网页,如果要打开现有网页文件，可以按照以下4种方法： （1）在Windows的资源管理器中打开。 （2）在Dreamweaver CS5起始页中，单击“打开”按钮。 （3）在Dreamweaver CS5起始页中。单击“文件”“打开”命令。 （4）将要打开的网页文件拖动到Dreamweaver CS5文件名所在的位置。,2文件的打开,保存网页文件的方法随保存文件的目的不同而不同。 （1）如果同时打开了多个Dr
10、eamweaver CS5窗口，而保存的目的只是保存文件，则切换到要保存的文档所在的窗口，然后选择“文件”“保存”菜单命令。 （2）如果所需要保存的网页文件中带有框架文件，而保存的目的是保存该网页文件中所有的文件，则应该选择“文件”“保存全部”菜单命令，然后按提示保存所有的框架文件。,3保存文件,（3）如果希望将一个网页文档以模板的形式保存，切换到要保存的文档所在的窗口，选择“文件”“另存为模板”菜单命令，则会打开“另存为模板”对话框。 网页没有存盘时，在文档窗口的标题栏的圆括号内，显示的文件名后会出现一个星号*，网页一旦存了盘，则文档窗口的标题栏的圆括号内显示当前的文件名及所在的文件夹。,预览网页可用如下方法之一。 （1）按“F12”键。 （2）在工具栏单击 按钮，在弹出的菜单中选择“预览在IExplore”项。 （3）选择“文件”“在浏览器中预览”“IExplore”命令。,4预览网页,Dreamweaver CS5的站点面板,返 回,E N D,
