《设计个人网页Dreamweaver》由会员分享，可在线阅读，更多相关《设计个人网页Dreamweaver（21页珍藏版）》请在金锄头文库上搜索。
1、011设计个人网页Dreamweaver CS4个人网页如同个人简历或者个人的记事本一样，它既可以 显示用 户的一些个人信息，也可以帮用 户记录一些琐事。个人网页与企业类、门户类网页 相比， 显得比较随意、独特。它主要展现与个人相关的个性，如网上可看到很多名人的个人站点。本章将介绍如何使用 Dreamweaver 的表格和框架等工具对个人网页进行布局，以及在网页中插入文本、图 像和超链接的方法。1.1 构建本地站点在创建网页之前，应该先创建一个用于管理网 页的站点， 该站点的目 录可以创建在本地计算机磁盘中的任意文件夹。另外，用户也可以直接通过创建的方法与远程服务器链接，创建远端站点。1.1.
2、1 建立本地站点Dreamweaver 可以 对站点以及站点内的各种文档和资源进行有效的管理。例如，创建站点，修改已有站点的各种属性，创建站点中的文档和编辑文档内容等。除此之外，Dreamweaver 还可以将整个站点及站内各种文档通过 FTP 或其他一些传输方式上传到远程服务器中。如果用户设计的是动态网站， Dreamweaver 还可以对 各种动态网站程序进行调试和修改。在创建站点时，需要注意以下几点。 在创建站点文档时，应将网站中的相同文件归放入同一个文件夹中，以便于文件的查找和使用。例如，图像文件常常放置在 images 目录中，脚本代码文件常常放置在 scripts 目录中。 对于不
3、同栏目或者子站点，也应分目录存放，使站点的目录有序，便于整理和修改。 目录的层次不宜过深。 目录的命名应得当、便于理解。例如，一般常用英文或汉语拼音来命名。并且，在命名过程中应避免使用中文名称或过长的英文目录名。对于英文缩写或汉语拼音缩写应慎用，以防止造成误解。创建本地站点时首先应在本地计算机的磁盘中建立相应的物理目录（即指定文件夹）。例如，在本地计算机的“本地磁 盘（F ：）”盘中， 创建 XNML 文件夹，然后在 该文件夹 下创建 site 文件夹。建立好目 录后，ASP+Dreamweaver CS4+CSS+Ajax 动态 网站开发典型案例2ASP+Dreamweaver CS4+CS
4、S+Ajax动态 网站开 发 典型案例提示提示即可用该目录作为 Dreamweaver 站点的本地根文件夹。在本章以及之后的所有章节中，如无特殊声明，站点的根文件夹都是“f:XNMLsite” ，而每一章的实例都放置在相应数字的文件夹内。在 Dreamweaver CS4 的工作环境中 ，执行【站点】| 【新建站点】命令， 如图 1-1 所示。此时，将弹出【站点定义为】对话 框， 选择【高级】选项卡。在 该选项卡中，左侧为创建的站点的一些类别，如本地信息、远程信息、测试服务器等。然后，选择【本地信息】类别，并在右侧设置【站点名称】为“ XNML”、【本地根文件夹】为“ f:XNMLsite”等
5、，如图 1-2 所示。在设置完站点信息后，单击【确定 】按钮，即可完成本地站点的设置。 这时，在 Dreamweaver CS4 的环境的【文件】面板中，将显示创建名为 XNML 的站点，如图 1-3 所示。单 击 本 地 站 点 图 1-2 设置本地站点信息 图 1-3 本地站点 XNML如果本地计算机中已安装了 IIS 服务器，用户还可以使用站点的定义来配置动态站点，配置方法将在后面的章节中进行介绍。1.1.2 管理站点文件创建站点后，用户就可以在该站点中 创建网页文件了。除此之外，用户还可以对本地站点进行编辑，如修改本地站点的名称，更改站点的目录等。在 Dreamweaver CS4 中
6、，执行【 站点】|【管理站点】命令，将 弹出【管理单 击 图 1-1 新建站点图 1-4 【管理站点】对话框3第 1 章 设计个人网页Dreamweaver CS4 01提示站点】对话框，如图 1-4 所示。在该对话框中提供了 6 个对站点进行管理的操作，如下所述。1新建单击【新建】按钮，可以创建如同上述所介 绍的站点，或者 创建“ FTP 与 RDS 服务器”。例如，当选择“FTP 与 RDS 服务器” 选项时， 则弹出【配置服务器】对话框，并配置与 FTP 服务器相连接的 内容。远端站点是指存放在 Internet 服务器上的站点，这种网站是对外开放的，任何浏览者都可以打开该站点。当然，远
7、端站点也可以使用 Dreamweaver CS4 直接进行编辑和管理，但是由于网速和磁盘储存形式等原因，这种方法的使用者并不多。2编辑单击【编辑】按钮，打开【站点定义为 】对话框，可以在该对话框中对本地站点进行编辑，如图 1-5 所示。编辑完毕后，单击【确定】按钮，将保存对站点的编辑操作，并返回【管理站点】对话框。然后单击【完成】按钮，完成 对所有站点的编辑操作。3复制如果想创建多个结构相同或者类似的站点，可以利用站点的可复制性。用户可以从一个基站点中复制出多个相同结构的站点，然后根据需要分别针对各站点进行编辑，以达到快速创建站点的目的。例如，在【管理站点】对话框中，选择一个站点作为基站点，然
8、后单击【复制】按钮，复制出多个与该站点结构相同的站点，并出现在【管理站点】对话框的站点列表中，如图 1-6 所示。这时，在列表中选中复制出来的站点，单击【编辑】按钮，即可对其进行编辑，如修改名称等。最后在【管理站点】对话框中单击【完成】按钮，完成对站点的复制操作。4删除对于已经创建完成的站点，或者 创建有误的站点，可以将其 删除。例如，选择要删除的本地站点，然后在【管理站点】对话框中单击【删除】按钮，将弹出提示对话框，单击 【是】按钮，即可删除选中的本地站点，如图 1-7 所示。 单 击 选 择 选 择 单 击 单 击 输 入 图 1-5 编辑站点ASP+Dreamweaver CS4+CSS
9、+Ajax 动态 网站开发典型案例4ASP+Dreamweaver CS4+CSS+Ajax动态 网站开 发 典型案例提示提示图 1-6 复制站点 图 1-7 删除站点在 Dreamweaver CS4 的【管理站点】对话框中的站点列表中删除站点后，该站点名称将从站点列表中被删除，但该站点下的所有文件还存在于本地的磁盘中。5导出通过 Dreamweaver CS4，可以将站点信息以.ste 扩展名的格式导出， 这样用户就可以在各计算机和软件版本之间移动站点，或者与其他用户共享。在【管理站点】对话框中，选定一个站点，然后单击【导出】按钮。这时系统将弹出【导出站点】对话框，确认保存目录并输入文件名
10、称后，单击【保存】按钮，即可将站点保存 为扩展名为.ste 的文件，如 图 1-8 所示。6导入【导入】按钮的功能与【导出】按钮的功能正好相反，通 过单击【导 入】按钮，可以 载入扩展名为.ste 的文件，并将站点的名称显示到列表框中。例如， 单击【导入】按钮，将 弹出【导入】对话框， 选择导入的文件（*.ste），再单击【打开】按钮，如 图 1-9 所示。单 击 单 击 图 1-8 导出站点 图 1-9 导入站点在导入站点定义文件时，如果当前站点列表中已含有相同名称的站点名称，这时将弹出对话框，提示用户该站点已存在。单击【确定】按钮，站点将自动重新命名，并在该名称后面添加数字加以 区分。1.
11、1.3 本地资源本地资源是指在本地站点中，创 建网页时所使用的网页元素，如图片、Flash 动画、所有网 页使用过的颜色和脚本文件等。站点中的所有资源都可以从【资源】面板中找到，该面板默认嵌入在【文件】面板中。单 击 图 1-10 【资源】面板5第 1 章 设计个人网页Dreamweaver CS4 01提示例如，执行【窗口】|【资源】命令（或按 F11 键），即可打开或者关 闭 【资源】面板，如图 1-10 所示。从图 1-10 中可以看出，在【资源 】面板的左侧有 9 个功能按钮， 单击 后即可在面板的列表框中显示出相应的资源文件。这 9 个功能按钮的详细说明如表 1-1 所示。表 1-1
12、 【 资 源 】 面 板 中 的 功 能 按 钮图 标 名 称 功 能图像 显示当前站点中的图像文件，如 jpg、gif、png 等格式的文件颜色 显示当前站点中所有网页或脚本代码中出现过的颜色URLs 显示当前站点中所有网页或脚本代码中创建的超级链接地址SWF 显示当前站点中所有 Flash 文件Shockwave 显示当前站点中所有音频文件，如 MP3、WAV、WMA 等格式的文件影片 显示当前站点中所有视频文件，如 FLV、AVI、RM 等格式的文件脚本 显示当前站点中所有脚本文件，如扩展名为.js、.css、.vbs 等文件模板 显示当前站点中所有 Dreamweaver 模板文件，其
13、扩展名为.dwt库 显示当前站点中所有库项目文件，其扩展名为.lbi在【资源】面板的上面还有两个选项按钮，分别为【站点】和【收藏 】。这两个选项按钮的功能 如下。 站点 选择该选项按钮后，在【资源】面板的显示区域中将显示当前站点中所有的资源文件。 收藏 选择该选项按钮后，显示区域中将显示收藏过的站点中的资源。收藏的资源仅限于当前站点的所有资源。在【文件】或【资源】面板中，右击站点中的资源文件，并执行【添加到收藏】命令，即可将其添加到收藏夹中。也可以单击【资源】面板右下角的【添加到收藏夹】按钮 ，将选中的资源文件添加到收藏夹中。1.2 设计个人简介网页个人简介网页是个人网页的组成部分之一。通 过
14、该网页，网站的设计者可以对自己进行简单的介绍，使网站的浏览者了解自己。个人简介网页通常由网站设计者的照片、个性化的 头像以及一些介绍性的文本组成。1.2.1 插入文本文字是网页中最重要的元素之一，也是网 页的主要内容，它以平淡、直白的方式 传达信息。在网页中只有文本信息的情况下，可以使用 Dreamweaver 的文本编辑功能 设置文本的 样式和属性，使网 页更加具有吸引力。1插入文本在页面（文档）中插入文本，与在 Word 中编辑文本一样，需要先输入文本，再 对所输入的内容进行ASP+Dreamweaver CS4+CSS+Ajax 动态 网站开发典型案例6ASP+Dreamweaver C
15、S4+CSS+Ajax动态 网站开 发 典型案例提示提示提示设置。而在输入时，可以通过如下两种方式。 直接输入方式创建 HTML 文档，并在【设计】视图中将光标定位到要输入文本处，直接输入文本即可，如图 1-11 所示。如果输入的是中文，Dreamweaver 会自动对输入的文本换行；如果输入的是英文，Dreamweaver 不会对输入的文本自动换行，这时需要用 Ctrl+Enter 组合键强制进行换行。 复制输入方式用户还可以从其他程序或者文本文件中复制或者剪切一段文本，然后粘贴在 Dreamweaver 的文档窗口中。例如，在 Word 窗口中 选中需要粘贴的文本，按 Ctrl+C 组合键
16、复制选中的文本。然后切换到Dreamweaver 窗口中，将光标定位于需要插入文本的位置，再按 Ctrl+V 组合键即可。2设置文本属性在 Dreamweaver 中，使用【属性】面板或者【文本】菜单可以对文本的尺寸、颜色和样式进行设置，使页面文本更加美观。在设置字体之前，应该先选中文档中的文本，然后再设置文本的属性。例如，选中“沁园春雪”文本，在【属性】面板中单击 CSS 按钮 ，选择【目标规则】下拉列表， 设置其为“ ”，然后选择【字体】下拉列表，设置其为“ 华文行楷”字体，如 图 1-12 所示。单 击 选 择 单 击 图 1-11 直接输入文本 图 1-12 设置字体如在【字体】下拉列表中找不到该字体，可以执行【编辑字体列表】命令，在弹出的【编辑字体列表】对话框
