第9章(383)
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
(6) 单击“下一步”按钮进入结束对话框，其中列出了 设置中的关键信息。如果需要修改设置，可以单击“上一步” 按钮修改对话框中的内容，如图9.6所示。
(7) 单击“完成”按钮，完成本站点的创建。在文件面 板中出现刚才创建的站点，如图9.1所示。
第9章 Dreamweaver网页设计基础
图9.6 结束对话框
第9章 Dreamweaver网页设计基础 图9.7 “管理站点”对话框
第9章 Dreamweaver网页设计基础
9.2.3 文件操作 1．新建文件夹 网站文件夹用于存放和管理网络资源，例如可以创建一
个名为“images”的文件夹，用于存放网站中应用的所有图 片。创建文件夹的具体步骤如下：
(1) 选择“窗口”|“文件”命令或按下F8功能键，打开 “文件”面板，如图9.1所示。
第9章 Dreamweaver网页设计基础
4．属性面板 属性面板用于设置和查看所选对象的各种属性，如图 9.1所示。不同对象的属性面板的参数设置项目不同。 5．插入栏 插入栏用于方便用户在网页制作过程中快速插入网页元 素，默认显示的是常用插入栏。单击不同的选项卡，可进行 插入栏的切换操作，图9.1显示了“常用”插入栏。 6．文档编辑区 文档编辑区用于显示当前正在编辑的网页页面，绝大部 分页面设计都在此区域中进行，例如布局页面元素，插入和 调整图像、表格、文本等。
能反映网站的主题，特别是一个商业网站Logo，从中可以 基本了解到这个网站的类型或者内容。Logo一般出现在页 面的左上端。
第9章 Dreamweaver网页设计基础 2．网站Banner 网站Banner是横幅广告，是互联网广告中最基本的广告 形式，一般位于Logo的右侧。Banner的标准大小为468×60 像素，使用Gif格式的图像文件可以使用静态图形，也可以 使用动画图像。除普通Gif格式外，采用Flash能赋予Banner 更强的表现力和交互内容。
第9章 Dreamweaver网页设计基础 在站点规划中，合理对文件或文件夹进行命名也非常重 要，好的名称容易理解，能够表达出网页的内容。可以采用 与文件或文件夹内容相对应的英文或拼音来命名，避免使用 长文件名和中文。
第9章 Dreamweaver网页设计基础
2．站点的创建 1) 创建本地站点 首先在硬盘的D盘创建文件夹mysite作为根目录，具体 操作步骤如下： (1) 在Dreamweaver CS3中选择“站点”|“新建站点”命 令，打开“未命名站点1的站点定义为”对话框，如图9.2所 示。 (2) 在“基本”选项卡的“您打算为您的站点起什么名 字？”栏中输入“mysite”，在设置“您的站点的HTTP地址 (URL)是什么？”栏时，可为空，如图9.2所示。 (3) 单击“下一步”按钮，在打开的对话框中选择将要 采用的服务器技术，选择“否，我不想使用服务器技术”选 项，如图9.3所示。
第9章 Dreamweaver网页设计基础
9.2 Dreamweaver CS3的基本操作
9.2.1 Dreamweaver CS3工作界面 启动Dreamweaver CS3后，将首先显示一个开始页，新
建或打开一个网页后将打开其工作界面，如图9.1所示。 1．标题栏 标题栏位于Dreamweaver窗口的顶部，显示了软件名称
(5) 单击“下一步”按钮，出现如何连接远程服务器选 择对话框，在这里选择“无”，如图9.5所示。
第9章 Dreamweaver网页设计基础
图9.4 选择“站点mysite的本地根文件夹”对话框
第9章 Dreamweaver网页设计基础
图9.5 选择如何连接远程服务器
第9章 Dreamweaver网页设计基础
第9章 Dreamweaver网页设计基础
9.2.2 本地站点的创建和管理 1．站点的规划 站点的规划指利用文件夹分门别类地保存不同的网页内
容，合理地组织站点结构。 在规划站点时，应先在本地磁盘上创建一个文件夹作为
站点的根目录，在制作过程中创建和编辑的所有网页、图像 文件及网站中用到的其他内容都应保存在该文件夹中。在发 布站点时，只需将此文件夹中的所有内容上传到Web服务器 上即可。如果站点结构复杂，内容较多，则还需建立子文件 夹，以存放不同类别的网页或图像等。
(2) 在网站名称上右击打开快捷菜单，选择“新建文件 夹”命令，输入文件夹的名称images，然后按下Enter键即可 完成文件夹的创建，如图9.8所示。
第9章 Dreamweaver网页设计基础
图9.8 创建文件夹和文件
第9章 Dreamweaver网页设计基础
2．新建文件 (1) 选择“窗口”|“文件”命令或按下F8功能键，打开 “文件”面板，如图9.1所示。 (2) 在网站名称上右击打开快捷菜单，选择“新建文件” 命令，输入文件的名称index.html，然后按下Enter键即可创 建主页文件，如图9.8所示。 (3) 按同样的方法，继续创建子页文件，并把子页文件 放在文件夹下(如放在html文件夹)，如图9.8所示。 注意：若用户右击网站名称，则新建的文件将直接放置 在网站根目录下；若是右击某个文件夹，则新建的文件将放 置在该文件夹中。
第9章 Dreamweaver网页设计基础
2) 管理站点 在Dreamweaver CS3中可以对站点进行各种管理，如修 改站点名称和本地根文件夹等，具体操作步骤如下： (1) 在Dreamweaver CS3选择“站点”|“管理站点”命令， 在打开的“管理站点”对话框中选中需要管理的站点，如图 9.7所示。 (2) 单击“编辑”，在打开的“mysite的站点定义为” 对话框中修改相关参数，完成后单击“确定”，如图9.2所 示。 (3) 单击“编辑站点”对话框中的“完成”按钮，完成 站点编辑。 (4) 如果要删除站点，在“管理站点”对话框中单击 “删除”按钮。
第9章 Dreamweaver网页设计基础
5．JavaScript JavaScript是一种能让网页更加生动活泼的程序语言， 也是目前网页设计中最容易学又最方便的脚本语言之一。
第9章 Dreamweaver网页设计基础
9.1.2 网页组成元素 1．网站Logo 网站Logo是网站形象的重要体现，一个好的标志往往
数一般不要太多，尽可能少于四级，否则会让人感觉繁琐， 也不方便管理。
第9章 Dreamweaver网页设计基础
3．制作网页 网站一般由多个网页链接而成。一般情况下，制作网页 需要配合多种工具，可以使用Dreamweaver布局页面、编排 页面资料、建立超链接、添加多媒体素材以及添加网页特效 等，同时，也可以为素材美化需求而使用Photoshop编修图 像外观等。 4．测试站点 在发布站点前需对站点进行测试。测试站点可根据客户 需求、网站大小及浏览器种类等进行。一般来说，应将站点 移到一个模拟调试服务器上对其进行测试或编辑。
第9章 Dreamweaver网页设计基础
3．HTML HTML(Hyper Text Mark-up Language)即超文本标记语言 或超文本链接标示语言，是为“网页创建和其他可在网页浏 览器中看到的信息”设计的一种置标语言。HTML文件最常 用的扩展名是 .html，但是像DOS这样的旧操作系统限制扩 展名为最多为三个字符，所以.htm扩展名也可使用。 4．Java Java是一种可以撰写跨平台应用软件的面向对象的程序 设计语言，是由Sun公司推出的Java程序设计语言和Java平 台(即JavaSE，JavaEE，JavaME)的总称。
4．文本 无论制作网页的目的是什么，文本都是网页中最基本的、 必不可少的元素。文本是传达信息最重要的方式。 5．图像 图像是文本的说明和解释，在网页的适当位置放置一些 图像，不仅可以使文本清晰易读，而且使得网页更加有吸引 力。 6．Flash动画 Flash动画是网页中最吸引人的地方，好的动画能够使 页面显得活泼生动，从而达到比以往静态页面更好的宣传效 果。
第9章 Dreamweaver网页设计基础
图9.2 站点定义对话框
第9章 Dreamweaver网页设计基础 图9.3 选择服务器技术
第9章 Dreamweaver网页设计基础
(4) 继续单击“下一步”按钮，出现文件保存位置对话 框。在打开的对话框顶部的两个选项中选择第1项。在文本 框中输入站点文件夹的路径D:\mysite或单击文本框旁边的浏 览按钮，在打开的“选择站点mysite的本地根文件夹”对话 框中，找到将要存放站点文件的文件夹，如图9.4所示。单 击“选择”按钮后，就会将选中文件夹的路径加入到文本框 中。
第9章 Dreamweaver网页设计基础
第9章 Dreamweaver网页设计基础
9.1 网站基础知识 9.2 Dreamweaver CS3的基本操作 9.3 网页布局设计基础 9.4 网页文本处理 9.5 网页图像添加与处理 9.6 常用多媒体对象的添加 9.7 创建网页链接
第9章 Dreamweaver网页设计基础
第9章 Dreamweaver网页设计基础 3．导航栏 导航栏是网页的重要组成元素，它的任务是帮助浏览者 在站点内快速查找信息。导航栏可以是简单的文字链接，也 可以是精美的图片或是丰富多彩的按钮。导航的位置一般有 四种：页面的左侧、右侧、顶部和底部。有时候在同一个页 面中运用了多种导航。
第9章 Dreamweaver网页设计基础
第9章 Dreamweaver网页设计基础
5．发布站点 发布站点前，必须在Internet上申请一个主页空间，用 于指定网站或主页在Internet上的放置位置。 发布站点一般是使用FTP(远程文件传输)软件(如 LeapFTP、GuteFTP等)将站点上传到服务器申请的网址目录 下。 6．更新和维护站点 将站点上传到服务器上后，每隔一段时间就应对站点中 的页面进行更新，保持网站内容的新鲜感，以吸引更多的浏 览者。此外，还应定期打开浏览器检查页面元素显示是否正 常以及各种超链接是否正常等。
及当前编辑文档的名称。
第9章 Dreamweaver网页设计基础
标题栏 插入工具栏
文档工具栏
文档编辑区
浮动面板组
属性面板
图9.1 Dreamweaver CS3工作界面
第9章 Dreamweaver网页设计基础
2．文档工具栏 文档工具栏主要用于文档的工作布局切换和预览等操作。 网页元素虽然多种多样，但是都可以称为对象。简单的对象 有文字、图像、表格等，复杂的对象包括导航条、程序等。 大部分的对象都可以通过“插入”工具栏插入到文档中，如 图9.1所示。 3．浮动面板组 浮动面板组是浮动面板的集合，位于窗口右侧，是执行 站点管理和事件添加等操作的场所，如图9.1所示。
第9章 Dreamweaver网页设计基础
9.1.3 网页设计步骤 1．收集资料和素材 在制作网页前应先收集要用到的文字资料、图片素材及
用于增添页面效果的动画等。 2．规划站点 规划站点时，可以将自己假想为浏览者，考虑浏览者如
何访问网站、如何从一个页面跳到另一个页面。 根据浏览者的访问顺序可以将内容设计为树形目录，级
9.1 网站基础知识
9.1.1 基本概念 1．网站(Website) 网站是指在因特网上根据一定的规则，使用HTML等工
具制作的，用于展示特定内容的相关网页的集合。 2．网页 网页是互联网中用于传达信息的Web页面，该页面会显
示文字、图片、声音、视频等内容，从而使浏览者能够在网 页的页面上了解到所需的信息。网页实际上是一个文件，它 存放于互联网中某一台服务器内。
第9章 Dreamweaver网页设计基础
3．打开与预览网页 打开和预览网页是两个不同的操作，打开网页是为了编 辑网页内容，而预览网页是为了查看网页的设计效果。 (1) 打开网页。打开网页的方法很简单，只需在“文件” 面板中双击某个需要打开的文档即可。 (2) 预览网页。在网页设计过程中经常要通过预览器来 浏览网页效果。预览网页的方法是，单击“文档”工具栏中 的“在浏览器中预览/调试”按钮 或按下F12功能键即可。 预览网页时，若网页经过编辑而未执行保存，则将弹出 提示框，询问是否保存修改，而只有在保存修改后才可以打 开浏览器，显示网页页面。
(7) 单击“完成”按钮，完成本站点的创建。在文件面 板中出现刚才创建的站点，如图9.1所示。
第9章 Dreamweaver网页设计基础
图9.6 结束对话框
第9章 Dreamweaver网页设计基础 图9.7 “管理站点”对话框
第9章 Dreamweaver网页设计基础
9.2.3 文件操作 1．新建文件夹 网站文件夹用于存放和管理网络资源，例如可以创建一
个名为“images”的文件夹，用于存放网站中应用的所有图 片。创建文件夹的具体步骤如下：
(1) 选择“窗口”|“文件”命令或按下F8功能键，打开 “文件”面板，如图9.1所示。
第9章 Dreamweaver网页设计基础
4．属性面板 属性面板用于设置和查看所选对象的各种属性，如图 9.1所示。不同对象的属性面板的参数设置项目不同。 5．插入栏 插入栏用于方便用户在网页制作过程中快速插入网页元 素，默认显示的是常用插入栏。单击不同的选项卡，可进行 插入栏的切换操作，图9.1显示了“常用”插入栏。 6．文档编辑区 文档编辑区用于显示当前正在编辑的网页页面，绝大部 分页面设计都在此区域中进行，例如布局页面元素，插入和 调整图像、表格、文本等。
能反映网站的主题，特别是一个商业网站Logo，从中可以 基本了解到这个网站的类型或者内容。Logo一般出现在页 面的左上端。
第9章 Dreamweaver网页设计基础 2．网站Banner 网站Banner是横幅广告，是互联网广告中最基本的广告 形式，一般位于Logo的右侧。Banner的标准大小为468×60 像素，使用Gif格式的图像文件可以使用静态图形，也可以 使用动画图像。除普通Gif格式外，采用Flash能赋予Banner 更强的表现力和交互内容。
第9章 Dreamweaver网页设计基础 在站点规划中，合理对文件或文件夹进行命名也非常重 要，好的名称容易理解，能够表达出网页的内容。可以采用 与文件或文件夹内容相对应的英文或拼音来命名，避免使用 长文件名和中文。
第9章 Dreamweaver网页设计基础
2．站点的创建 1) 创建本地站点 首先在硬盘的D盘创建文件夹mysite作为根目录，具体 操作步骤如下： (1) 在Dreamweaver CS3中选择“站点”|“新建站点”命 令，打开“未命名站点1的站点定义为”对话框，如图9.2所 示。 (2) 在“基本”选项卡的“您打算为您的站点起什么名 字？”栏中输入“mysite”，在设置“您的站点的HTTP地址 (URL)是什么？”栏时，可为空，如图9.2所示。 (3) 单击“下一步”按钮，在打开的对话框中选择将要 采用的服务器技术，选择“否，我不想使用服务器技术”选 项，如图9.3所示。
第9章 Dreamweaver网页设计基础
9.2 Dreamweaver CS3的基本操作
9.2.1 Dreamweaver CS3工作界面 启动Dreamweaver CS3后，将首先显示一个开始页，新
建或打开一个网页后将打开其工作界面，如图9.1所示。 1．标题栏 标题栏位于Dreamweaver窗口的顶部，显示了软件名称
(5) 单击“下一步”按钮，出现如何连接远程服务器选 择对话框，在这里选择“无”，如图9.5所示。
第9章 Dreamweaver网页设计基础
图9.4 选择“站点mysite的本地根文件夹”对话框
第9章 Dreamweaver网页设计基础
图9.5 选择如何连接远程服务器
第9章 Dreamweaver网页设计基础
第9章 Dreamweaver网页设计基础
9.2.2 本地站点的创建和管理 1．站点的规划 站点的规划指利用文件夹分门别类地保存不同的网页内
容，合理地组织站点结构。 在规划站点时，应先在本地磁盘上创建一个文件夹作为
站点的根目录，在制作过程中创建和编辑的所有网页、图像 文件及网站中用到的其他内容都应保存在该文件夹中。在发 布站点时，只需将此文件夹中的所有内容上传到Web服务器 上即可。如果站点结构复杂，内容较多，则还需建立子文件 夹，以存放不同类别的网页或图像等。
(2) 在网站名称上右击打开快捷菜单，选择“新建文件 夹”命令，输入文件夹的名称images，然后按下Enter键即可 完成文件夹的创建，如图9.8所示。
第9章 Dreamweaver网页设计基础
图9.8 创建文件夹和文件
第9章 Dreamweaver网页设计基础
2．新建文件 (1) 选择“窗口”|“文件”命令或按下F8功能键，打开 “文件”面板，如图9.1所示。 (2) 在网站名称上右击打开快捷菜单，选择“新建文件” 命令，输入文件的名称index.html，然后按下Enter键即可创 建主页文件，如图9.8所示。 (3) 按同样的方法，继续创建子页文件，并把子页文件 放在文件夹下(如放在html文件夹)，如图9.8所示。 注意：若用户右击网站名称，则新建的文件将直接放置 在网站根目录下；若是右击某个文件夹，则新建的文件将放 置在该文件夹中。
第9章 Dreamweaver网页设计基础
2) 管理站点 在Dreamweaver CS3中可以对站点进行各种管理，如修 改站点名称和本地根文件夹等，具体操作步骤如下： (1) 在Dreamweaver CS3选择“站点”|“管理站点”命令， 在打开的“管理站点”对话框中选中需要管理的站点，如图 9.7所示。 (2) 单击“编辑”，在打开的“mysite的站点定义为” 对话框中修改相关参数，完成后单击“确定”，如图9.2所 示。 (3) 单击“编辑站点”对话框中的“完成”按钮，完成 站点编辑。 (4) 如果要删除站点，在“管理站点”对话框中单击 “删除”按钮。
第9章 Dreamweaver网页设计基础
5．JavaScript JavaScript是一种能让网页更加生动活泼的程序语言， 也是目前网页设计中最容易学又最方便的脚本语言之一。
第9章 Dreamweaver网页设计基础
9.1.2 网页组成元素 1．网站Logo 网站Logo是网站形象的重要体现，一个好的标志往往
数一般不要太多，尽可能少于四级，否则会让人感觉繁琐， 也不方便管理。
第9章 Dreamweaver网页设计基础
3．制作网页 网站一般由多个网页链接而成。一般情况下，制作网页 需要配合多种工具，可以使用Dreamweaver布局页面、编排 页面资料、建立超链接、添加多媒体素材以及添加网页特效 等，同时，也可以为素材美化需求而使用Photoshop编修图 像外观等。 4．测试站点 在发布站点前需对站点进行测试。测试站点可根据客户 需求、网站大小及浏览器种类等进行。一般来说，应将站点 移到一个模拟调试服务器上对其进行测试或编辑。
第9章 Dreamweaver网页设计基础
3．HTML HTML(Hyper Text Mark-up Language)即超文本标记语言 或超文本链接标示语言，是为“网页创建和其他可在网页浏 览器中看到的信息”设计的一种置标语言。HTML文件最常 用的扩展名是 .html，但是像DOS这样的旧操作系统限制扩 展名为最多为三个字符，所以.htm扩展名也可使用。 4．Java Java是一种可以撰写跨平台应用软件的面向对象的程序 设计语言，是由Sun公司推出的Java程序设计语言和Java平 台(即JavaSE，JavaEE，JavaME)的总称。
4．文本 无论制作网页的目的是什么，文本都是网页中最基本的、 必不可少的元素。文本是传达信息最重要的方式。 5．图像 图像是文本的说明和解释，在网页的适当位置放置一些 图像，不仅可以使文本清晰易读，而且使得网页更加有吸引 力。 6．Flash动画 Flash动画是网页中最吸引人的地方，好的动画能够使 页面显得活泼生动，从而达到比以往静态页面更好的宣传效 果。
第9章 Dreamweaver网页设计基础
图9.2 站点定义对话框
第9章 Dreamweaver网页设计基础 图9.3 选择服务器技术
第9章 Dreamweaver网页设计基础
(4) 继续单击“下一步”按钮，出现文件保存位置对话 框。在打开的对话框顶部的两个选项中选择第1项。在文本 框中输入站点文件夹的路径D:\mysite或单击文本框旁边的浏 览按钮，在打开的“选择站点mysite的本地根文件夹”对话 框中，找到将要存放站点文件的文件夹，如图9.4所示。单 击“选择”按钮后，就会将选中文件夹的路径加入到文本框 中。
第9章 Dreamweaver网页设计基础
第9章 Dreamweaver网页设计基础
9.1 网站基础知识 9.2 Dreamweaver CS3的基本操作 9.3 网页布局设计基础 9.4 网页文本处理 9.5 网页图像添加与处理 9.6 常用多媒体对象的添加 9.7 创建网页链接
第9章 Dreamweaver网页设计基础
第9章 Dreamweaver网页设计基础 3．导航栏 导航栏是网页的重要组成元素，它的任务是帮助浏览者 在站点内快速查找信息。导航栏可以是简单的文字链接，也 可以是精美的图片或是丰富多彩的按钮。导航的位置一般有 四种：页面的左侧、右侧、顶部和底部。有时候在同一个页 面中运用了多种导航。
第9章 Dreamweaver网页设计基础
第9章 Dreamweaver网页设计基础
5．发布站点 发布站点前，必须在Internet上申请一个主页空间，用 于指定网站或主页在Internet上的放置位置。 发布站点一般是使用FTP(远程文件传输)软件(如 LeapFTP、GuteFTP等)将站点上传到服务器申请的网址目录 下。 6．更新和维护站点 将站点上传到服务器上后，每隔一段时间就应对站点中 的页面进行更新，保持网站内容的新鲜感，以吸引更多的浏 览者。此外，还应定期打开浏览器检查页面元素显示是否正 常以及各种超链接是否正常等。
及当前编辑文档的名称。
第9章 Dreamweaver网页设计基础
标题栏 插入工具栏
文档工具栏
文档编辑区
浮动面板组
属性面板
图9.1 Dreamweaver CS3工作界面
第9章 Dreamweaver网页设计基础
2．文档工具栏 文档工具栏主要用于文档的工作布局切换和预览等操作。 网页元素虽然多种多样，但是都可以称为对象。简单的对象 有文字、图像、表格等，复杂的对象包括导航条、程序等。 大部分的对象都可以通过“插入”工具栏插入到文档中，如 图9.1所示。 3．浮动面板组 浮动面板组是浮动面板的集合，位于窗口右侧，是执行 站点管理和事件添加等操作的场所，如图9.1所示。
第9章 Dreamweaver网页设计基础
9.1.3 网页设计步骤 1．收集资料和素材 在制作网页前应先收集要用到的文字资料、图片素材及
用于增添页面效果的动画等。 2．规划站点 规划站点时，可以将自己假想为浏览者，考虑浏览者如
何访问网站、如何从一个页面跳到另一个页面。 根据浏览者的访问顺序可以将内容设计为树形目录，级
9.1 网站基础知识
9.1.1 基本概念 1．网站(Website) 网站是指在因特网上根据一定的规则，使用HTML等工
具制作的，用于展示特定内容的相关网页的集合。 2．网页 网页是互联网中用于传达信息的Web页面，该页面会显
示文字、图片、声音、视频等内容，从而使浏览者能够在网 页的页面上了解到所需的信息。网页实际上是一个文件，它 存放于互联网中某一台服务器内。
第9章 Dreamweaver网页设计基础
3．打开与预览网页 打开和预览网页是两个不同的操作，打开网页是为了编 辑网页内容，而预览网页是为了查看网页的设计效果。 (1) 打开网页。打开网页的方法很简单，只需在“文件” 面板中双击某个需要打开的文档即可。 (2) 预览网页。在网页设计过程中经常要通过预览器来 浏览网页效果。预览网页的方法是，单击“文档”工具栏中 的“在浏览器中预览/调试”按钮 或按下F12功能键即可。 预览网页时，若网页经过编辑而未执行保存，则将弹出 提示框，询问是否保存修改，而只有在保存修改后才可以打 开浏览器，显示网页页面。