网页设计(CS5)-第2讲-规划和创建站点

合集下载

第2章创建站点

2.2.2 定义站点
1．站点面板
在Dreamweaver CS5的编辑窗口，选择“窗口”→“文件”菜单，即可打开站点面板，如图
所示。
在站点面板中，用户可以选择菜单“站
菜单栏插入面板文档工具栏网页名称
浮动面板组
文档编辑窗口
属性面板状态栏信息显示
Dreamweaver CS5的操作界面
（1）菜单栏

2．复制站点
若要复制当前站点，可以使用文档窗口或站点
面板中“站点”菜单的“编辑站点”命令，打开
“编辑站点”对话框。选中要复制的站点名称，单
击“复制”按钮即可对当前站点进行复制操作。
在Dreamweaver CS5中删除一个站点非常容易，
在弹出的“管理站点”对话框中，单击“删除”按
钮就可以删除选中的站点。
注意：此删除操作并未真正删除站点文件夹和其中的
内容，而只是无法再用Dreamweaver管理该文件夹
而已。如果需要再次用Dreamweaver管理该文件夹，
只要用新建站点的方式再次将该文件夹指定为站点根目录即可。
为了避免在不同类型和版本的浏览器中出现某些元素不能正常显示的现象，在站点发布前必须设置浏览器的兼容性。

（3）测试站点
在将站点上传到服务器并宣布已经可供浏览之前，
改站点名称、设置参数选项等编辑操作，可以利用
上面的方法打开“管理站点”对话框，选中一个站
点后单击“编辑”按钮，即可打开该“站点设置对象”对话框。

4．删除站点

2．Dreamweaver的视图
单击工具栏上的“设计”按钮，即显示设计视图；使用工具栏中的“代码”按钮，则可以很方便地切换到代码视图，以便查看当前编辑网页的 HTML源代码；如果需要同时查看代码视图和设计视图，可以单击工具栏上的“拆分”按钮，此时 Dreamweaver将同时在窗口中显示代码视图和设计视图。

第二章 DWCS5基本操作

15
在设计页面时需要设置页面元素的位置或对齐页面元素，Dreamweaver CS5提供了“标尺”和“网格”功能。选择“查看”|“标尺”|“显示”命令，可以在文档中显示“标尺”，选择“查看”|“网格”|“显示网格”命令，可以在网页文档中显示网格，如图所示。重复操作，可以隐藏显示标尺和网格。
16
在Dreamweaver CS5中，使用跟踪图像功能可以载入某个网页的布局(或图片)，然后借助该网页的布局来安排正在制作的网页布局。选择“查看”|“跟踪图像”|“载入”命令，打开“选择图像源文件”对话框，如图2-33所示。
17
18
每一个网页都是由HTML脚本所组成的*.html文件，一个完整的HTML网页文件包含head和body两个部分，head 部分包括许多不可见的信息，例如语言编码、版权声明、关键字等，使用Dreamweaver CS5，可以设置这些信息。
1
Dreamweaver CS5是一款专业的网页制作软件，可以制作单独的网页文件，但制作网页的根本目的是为了构建一个完成的网站。Dreamweaver既是一个网页的创建和编辑工具，又是一个站点创建和管理的工具。因此，在创建网页之前必须规划和设计好网站。本章主要讲述了 Dreamweaver CS5的一些基本操作，包括规划和创建站点以及网页文件的基本操作。
10
创建了本地站点后，就可以创建文档并将保存在站点文件夹中。在创建和编辑文档时，Dreamweaver CS5会自动生成文档的HTML代码和JavaScript代码，使用 Dreamweaver代码编辑器可以测试和编辑这些代码。 Dreamweaver CS5提供了多种创建文档的方法，可以创建一个新的空白HTML文档，或使用模板创建新文档。同时，还提供了功能强大的“新建文档”对话框来满足用户创建不同类型的文档的需求。创建网页文档打开和保存网页文档

网页设计与制作 DreamweaveCs5第二讲

2.3.1什么是CSS？ CSS也被称为层叠样式表。是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，可以将内容与表现形式分开。使用 CSS 可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。直接在dreamweaver中输入文字并设置属性面板如图2-19。
图 2-23 类
2．标签（重新定义特定标签的外观）重定义特定 HTML 标签的默认格式设置。当读者选择该选项时，可以在 “标签”项的下拉菜单中选择一个标签或直接输入一个标签。如图2-24。
3．高级（ID、伪类选择器等）为具体某个标签组合或所有包含特定 Id 属性的标签定义格式设置。提供的选择器包括 a:active、a:hover、a:link 和 a:visited四种，如图2-25。
【表格概述】
表格是控制网页页面布局最有力的工具。使用表格可以对列表数据进行布局，布局网页文本、图像、媒体等。 Dreamweaver提供了3种方式来查看和操作表格：标准视图、扩展视图、布局视图。本章重点是：表格的基本操作和布局视图下表格的操作。
2.1 表格基础
2.1.1 表格和单元格 1. 表格表格是用于在网页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。表格由三个基本部件组成：行、列、单元格。具有宽度、高度、间距、边框等属性。 2. 单元格表格由一个或多个单元格构成，单元格是指表格内的每个小格子。 2.1.2 表格结构如图2-1所示的表格。其各参数值如下：行：2。列：3。单元格数目：6。宽度：400。高度：200。间距：10。图 2-1 表格结构边框：5。

网站开发与设计(--基于Dreamweaver-CS5)

Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><st一yle个ty完pe整="的texHt/cTsMs"L> 文件由标题、段落、列表、表格、和单词即嵌入的各种对<ti象tle所>无组标成题。这文些档逻</t辑itle上>统一的对象被称为元素，HTML 使用标记来分割并</h描ea述d>这些元素，实际上整个 HTML 文件就是由元素与标记组成的。 HTM<Lbo的dy元>素和标记在书写时不分大小写。HTML 代码分 3 部分：
示用户将其拷贝到当前站点下，单击“确定”按钮插入图像。
02. 在“属性”面板中可以对图像的替换文本？、大小、对齐方
式、边距等进行设置。
03. 源代码： <div
align="left"><img
2.2.2 插入鼠标经过图像 src="images/mzxj/hsl/hsl_1.jpg" alt="演示 1" width="300"
过载其入他缓相存关，以软便件不进发行生图延像迟编。辑。
0023.. 单源击代“码使：用 Firework 最优化”按钮、以及“编辑”部分的其
他按钮预、、加进行相载关的编辑图。

Dreamweaver CS5.5中文版案例教程第2章

Dreamweaver是最佳的站点创建和管理工具，使用它不仅可以创建单独的文档，还可以创建完整的站点。具体操作步骤如下。
2.6 知识与技能梳理
一个网站的建立通常要遵循以下顺序：首先是合理规划站点，这是创建任何网站的前提，在创建网站之前必须先明确站点目标、用户及站点结构；其次是构建本地站点和远程站点；接着是站点的测试、维护与管理；最后是站点的上传与发布。
第2章站点的搭建与管理
站点是一系列文件的组合，这些文件通过各种链接联系起来。Dreamweaver CS5.5 是创建和管理站点的工具，使用它不仅可以创建单独的文件，还可以创建完整的站点。本章主要讲解创建站点、管理站点地图、设置站点的参数，以及规划与构建站点结构等内容。
2.1 创建本地站点
2.1.1 使用“管理站点”向导创建站点
重要工具：管理站点、弹出菜单工具。核心技术：通过创建本地站点，将位于本地的文件夹当作远程站点的镜像，最后上传至服务器，完成网站的上传。实际应用：使用“管理站点”向导搭建站点、编辑和管理站点。
2.2.4 删除站点如果不再需要利用Dreamweaver对某个本地站点进行操作，则可以将其从站点列表中删除，具体操作步骤如下。
2.3 管理站点中的文件
2.3.1 创建文件夹和文件网站每个栏目中的所有文件被统一存放在单独的பைடு நூலகம்件夹内，根据包含的文件多少，又可以细分到子文件夹里。
2.3 管理站点中的文件
2.3.2 移动和复制文件同大多数的文件管理一样，Dreamweaver CS5.5也可以利用剪切、复制和粘贴功能来实现对文件的移动和复制，具体操作步骤如下。
2.4 管理站点地图
站点地图是以树形结构图方式显示站点中文件的链接关系。在站点地图中可以添加、修改、删除文件之间的链接关系。

网页设计第2章 Dreamweaver CS5基础

站点按站点文件夹所在位置分为两类：本地站点和远程站点。本地站点是指本地计算机上的一组文件，远程站点是远程Web服务器上的一组文件。创建本地站点首先要在本地硬盘上新建一个文件夹或者选择一个已经存在的文件夹作为站点的文件夹，那么这个文件夹就是本地站点的根目录。
2.2.2新建和保存网页
1．新建网页文档 2．保存网页文档
2.5网页文档头部信息设置
META标签位于在网页<head>…</head>标签之间，用来记录当前页面的相关信息，如作者和版权信息、搜索关键字等，它也可以用来向服务器提供信息，如页面的失效日期、刷新时间间隔等。 META标签分为http-equiv属性和name 属性。name属性主要用于描述网页，如Keywords（关键字）、description （网站内容描述）等。http-equiv属性类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容，如Refresh（刷新）等。
第2章 Dreamweaver CS5基础
网页设计与制作 Dreamweaver CS5 标准教程邢帅教育
本章学习主要内容：

1.Dreamweaver CS5工作界面 2.创建网站站点 3.管理站点文件和文件夹 4.管理站点 5.网页文档头部信息设置学习QQ群69364320
2.6课堂案例-慈善救助中心
案例学习目标：学会创建站点、管理站点文件和文件夹。案例知识要点：创建站点、移动文件、重命名文件。素材所在位置：光盘/案例素材/ch02/课堂案例-慈善救助中心。案例效果如图2-29所示。
2.5网页文档头部信息设置
2.5.1插入搜索关键字 2.5.2设置描述信息 2.5.4插入版权信息 2.5.3设置刷新时间可以指定浏览器在一定的时间后重新加载当前页面或转到不同的页面，比如论坛网站中通常要定时刷新页面，以便实时反映在线用户信息、离线用户信息以及动态文档的实时改变情况。

《Dreamweaver CS3网页制作》第2章站点的创建与管理

前进
站点定义文件的扩展名为 .ste。
删除站点
选择“站点→管理站点”命令，打开“管理站点”对话框，选择要后退删除的站点，单击“删除”按钮。
提示
站点被删除后，只是删除了站点的定义信息，硬盘中相应位结束置的文件和文件夹并不会被删除。
2.4 操作站点文件
创建网站目录结构
目录
在“我的电脑”或“资源管理器”中创建。
网站发布和更新维护
前进
网站的规划流程:
后退
确定网站的主题
规划网站的栏目及目录结构
收集素材
确定网站的风格
结束
2.2 创建站点
目录
站点的分类
概念：站点可以简单地理解为存放网页及各种
素材的文件夹。
前进
本地站点
按地理位置远程站点
站点的分类
后退
静态站点
按站点的交互性动态站点
结束
创建本地站点
选择“站点→新建站点”命令
直接用鼠标拖动
后退
右单击，在快捷菜单中选择“编辑→删除”命删除文件(夹) 令
按Delete键
结束
上机实训
实训1：新建一个以自己姓名命名的个人站点，该站点使用“ASP JavaScript”服务器技术, ，站点保存在“D:\ktsj\site”文件夹中，使用“文件”面板新建首页文件“index.html”和图像文件夹 “images”，在“我的电脑”中查看相应目录的变化。实训2：将上题中创建的站点使用“管理站点”功能将其导出，将导出的站点定义文件通过网络或移动存储设备拷贝到其他计算机中，使用“管理站点”功能将其导入。实训3：新建站点 “奥运资料”，站点保存在“D:\ktsj\ aytp”文件夹中,将该站点中的beijing.html改名为index.html，并浏览该网页。实训4：删除站点“奥运资料”中的lx.html和wj.html文件，并将 fnll.jpg文件移动到image文件夹中。

网站建设与网页制作_第二章_认识Dreamweaver CS5

网站建设与网页制作
1.2 创建站点
1.2.1 站点设计和规划 ※ 网站站点目录对站点的目录安排是指在服务器上按照层次结构为每一个信息块建立单独的文件夹。息块建立单独的文件夹。
网站建设与网页制作
1.2 创建站点
1.2.2 创建站点 1.使用向导搭建站点 1.使用向导搭建站点
网站建设与网页制作
网站建设与网页制作
1.2 创建站点
1.2.1 站点设计和规划 ※ 功能模块划分 1.自顶向下划分： 1.自顶向下划分：自顶向下划分
确定网站需要的分支，即栏目。按照从上到即栏目。下，从粗到细的原则进行信息模块划分。信息模块划分。
网站建设与网页制作
1.2 创建站点
1.2.1 站点设计和规划 ※ 功能模块划分 2.自底向上划分： 2.自底向上划分：自底向上划分
精品课件
第二章认识 Dreamweaver CS5
昆明理工大学七星少年
网站建设与网页制作
本章内容
Dreamweaver Cபைடு நூலகம்5 操作环境创建和管理站点
1 3 2
3
创建简单网页
文档工具栏
网站建设与网页制作
菜单栏
浮动面板组
文档编辑窗口
属性面板
Dreamweaver CS5 的工作界面
网站建设与网页制作
将整个非常复杂的网站制作任务变得清晰流畅；将整个非常复杂的网站制作任务变得清晰流畅；提高网站的容错性和扩展性，减少制作过程中多余的工作量；提高网站的容错性和扩展性，减少制作过程中多余的工作量；起到承前启后的作用；起到承前启后的作用；
网站建设与网页制作
1.2 创建站点
1.2.1 站点设计和规划 ※ 网站网页关系设计每张网页是一个信息片断；每张网页是一个信息片断；网页之间的关系：网页之间的关系：

《DreamweaverCS5网页设计》课件

第2章目录
设置页面的标题和编码： 1. 选择“修改”→“页面属性”，或者在属性检查器中单击 “页面属性”。 2. 在“页面属性”对话框中，单击“标题/编码”类别，如图 2.1所示。 3. 在“标题”框中，指定页面标题。也可以使用文档工具栏来指定页面标题。 4. 从“编码”下拉列表框中选择文档中字符所用的编码。 5. 单击“确定”。
第1章目录
8／183
1.2 设置Dreamweaver站点
1.2.1 Dreamweaver工作流程规划和设置站点组织和管理站点文件设计网页布局向页面添加内容通过手动编码创建页面针对动态内容设置Web应用程序创建动态页测试和发布
第1章目录
9／183
1.2 设置Dreamweaver站点
第10章制作ASP动态网页
3／183
第1章 Dreamweaver CS5 使用基础
1.1 认识Dreamweaver CS5工作区 1.2 设置Dreamweaver站点 1.3 创建和管理站点文件
4／183
ቤተ መጻሕፍቲ ባይዱ
1.1 认识Dreamweaver CS5工作区
1.1.1 启动Dreamweaver CS5 启动Dreamweaver CS5：单击“开始”，指向“所有程序”，然后单击 “Adobe Dreamweaver CS5”。在“开始”菜单或任务栏中为这个软件添加一个快捷方式。 1.1.2 工作区布局概述工作区中主要包括以下元素。欢迎屏幕。应用程序栏。文档工具栏。标准工具栏。编码工具栏。样式呈现工具栏文档窗口属性检查器标签选择器面板组插入面板文件面板
第1章目录
13／183

网站开发与设计(--基于Dreamweaver CS5)

网站开发与设计——基于Dreamweaver CS5一．使用Dreamweaver 创建站点1.1搭建与设置站点1.1.1 搭建站点1.1.2 设置站点1.2创建站点内容1.3制作网页的工作准备双击“文件”面板中的index.htm 文件，进入页面编辑窗口。

查看形式有三种：代码、拆分、设计。

在站点中创建如图目录：文件夹内容 behavior 层与行为 css 样式表使用 form 插入表单 frame 框架页面建立 images 图像 imgtext 图文元素 media 多媒体 table 表格创建 index.html 网站首页面在源代码视图中显示的代码结构如下：1.3.1 设置页面标题1.3.2 查看和编辑头内容编辑：※插入刷新（类上）设置延迟时间以及跳转的URL或刷新。

※设置页面属性01.执行菜单栏中的“修改>页面属性”命令，打开“页面属性”对话框，如图：02.设置外观：☆字体、字号、文本颜色☆背景颜色或图片（避免平铺：不重复）☆页面边距☆源代码部分属于CSS层叠样式表范畴03.设置连接：☆字体、字号、连接颜色（未访问、已访问等）☆下划线04.设置标题（一般不再此处设置，后面介绍）05.设置标题/编码（采用默认即可）06.设置跟踪图像（利用背景草图引导网页设计）二．制作简单的多媒体图文界面2.1制作文字页面2.1.1文字输入与编辑2.1.2插入水平线和日期水平线01.单击“插入>HTML>水平线”按钮，在页面中插入水平线。

02.在“属性”面板中设置水平线的基本属性。

单击“属性”面板中的“快速标签编辑器”按钮，设置水平线颜色，eg：<hr color=#B10067 />03.其他属性，直接在“属性”面板设置即可。

2.1.3插入特殊字符2.2制作图文混排页面2.2.1插入并编辑图像插入图像01.单击“插入>图像”按钮，弹出“选择图像源文件”对话框，选择文件即可。

在Dreamweaver CS5中创建本地站点

在Dreamweaver CS5中创建本地站点1. 在本地硬盘上新建一个文件夹或者选择一个已经存在的文件夹作为站点的文件夹，那么这个文件夹就是本地站点的根目录。

如果是新建的文件夹，那么这个站点就是空的，否则这个站点就包含了已经存在的文件。

2. 启动Dreamweaver CS5，点击“站点”菜单，选择“新建站点”项，或者选择“管理站点”项，在“管理站点”对话框中点击“新建”按钮，打开“站点设置对象”对话框，如下图所示：3. 在左边选择“站点”项：∙站点名称：输入网站的名称。

网站名称显示在站点面板中的站点下拉列表中。

站点名称不会在浏览器中显示，因此可以使用喜欢的任何名称。

本例使用站点文件夹的名称：Dw CS5教程。

∙本地站点文件夹：放置该网站文件、模板以及库的本地文件夹。

在文本框中输入一个路径和文件夹名，或者点击右边的文件夹图标选择一个文件夹。

如果本地根目录文件夹不存在，那么可以在“选择根文件夹”对话框中创建一个文件夹，然后再选择它。

当Dreamweaver CS5在站点中决定相对链接时，是以此目录为标准的。

4. 在左边选择“本地信息”项，如下图所示：∙默认图像文件夹：设置站点图片存放的文件夹的默认位置。

∙链接相对于：默认为选择文档。

∙Web URL：输入网站完整的URL。

∙区别大小写的链接检查：选择此项，在检查链接时，则会有字母大小写的区分。

∙启用缓存：选择此项，会创建一个缓存以加快资源面板和链接管理功能的速度。

如果不选择此项，Dreamweaver CS5在创建站点时会询问是否想创建一个缓存。

提示：其它项可以根据需要设置，也可以在以后点击“站点”菜单，选择“管理站点”项，在“管理站点”对话框中点击“编辑”按钮，打开“站点设置对象”对话框进行设置。

5. 设置完毕，点击“保存”按钮。

6. 打开站点面板，可以看到我们刚才新建立的站点：Dw CS5教程。

如下图所示：。

第二课规划和创建站点

课前导读
❖ 基础知识 ❖ 重点知识 ❖ 了解知识
❖ 规划站点 ❖ 创建站点 ❖ 管理站点
课堂讲解
在进行网页制作之前，应先创建站点，以便利用站点的管理功能对站点中的文件进行管理或测试。创建站点首先要做的就是规划站点，然后通过 Dreamweaver MX 2004的站点管理功能创建站点的框架，包括主页、分支页面和相应的文件夹等。
➢本地站点。
➢远程站点。
➢测试站点。
规划站点结构
规划站点结构是指利用不同的文件夹，将不同的网页内容分门别类地保存，它是设计站点的必要前提。合理地组织站点结构，可加快对站点的设计，提高工作效率，节省工作时间。
通常，在制作站点时首先应在本地硬盘上创建一个文件夹，然后在制作过程中，将所有创建和编辑的网页内容都保存在该文件夹中。当要发布站点时，将这些文件上传到Web服务器上即可。另外，如果站点比较大，则需要建立子文件夹以存放不同类型的网页内容，如在about文件夹中存放与公司简介相关的网页内容，在product文件夹中存放关于公司产品方面的网页内容。
上机实战
❖ 规划装饰公司站点结构 ❖ 创建站点 ❖ 创建主要文件夹及文件
本课上机实战主要练习站点的规划、导航草图制作、本地站点的创建、文件和文件夹的创建等操作。在进行站点规划前，读者应收集并参考相关的网站，了解该类网站所包括的基本栏目，以及栏目的划分方式；在进行导航草图的制作时，应参考其制作方法，最好能确定各文件夹及文件的名称；在创建本地站点时，应先确定站点的名称及存储位置。
规划站点
❖ 站点的概念 ❖ 规划站点结构 ❖ 导航草图制作 ❖ 创建制作草图
站点的概念
一系列通过各种链接关联起来的网页文档就构成了站点，它可以大到整个网站，也可以小到一个网页。严格地说，站点也是一种文档的磁盘组织形式，它同样是由文档和文档所在的文件夹组成。

DreamweaverCS5自学教程第二课：制作网页的基本操作.doc

第二课：制作网页的基本操作2-1 添加文本1
1、网页文本的输入方式
(1)、导入预先保存的文档
(2)、直接输入或复制粘贴
2、首页命名
3、网页的背景图
片通过下方的页
面属性来设置。

2-2 添加文本2
1、在网页中添加一个能自动更新的日期时间。

2、在网页中连续输入多个空格的设置。

在“编辑”菜单中选择“首选参数—常规--允许多个连续的空格”，确定。

3、添加水平线。

选中需要添加的位置，选择“插入—HTML—水平线”
在下放的属性面板中设置水平线
水平线的颜色需要通过代码进行设置，<hr>代码表示一条水平线，括号内加空格设置属性，保存后预览即能看见设置的效果。

4、特殊字符的插入。

2-3 编辑文本
1、网页文件中的文本输入、删除、复制和粘贴等编辑与DOC文档的操作相似。

2、搜索网页中查找或替换某一字词
搜索结果的显示点击每一项即显示精确位置替换和撤销Ctrl+Z。

网页设计与制作第2章站点的创建与管理

图2-5管理站点链接
第2.2章
创建站点
2、站点定义在“站点定义”对话框，定义本地站点的方法有以下两种：若要使用站点设置向导来设置站点，请单击“基本”选项卡，然后按照提示进行操作。若要直接设置本地文件夹、远程文件夹和测试文件夹（用于处理动态页），请单击“高级”选项卡，选择“本地信息”类别，然后设置各个选项。注：设置位于您计算机上的工作站点时，“高级”选项卡的“本地信息”类别中，只有前两个选项是必需设置的。方法一：介绍基于“基本”选项卡定义本地站点的步骤： Step1：进入“站点定义”对话框后，选择“基本”选项卡。设置站点名称为 “webtest”，在站点的url文本框中输入网站的域名或ip地址，如果是创建本地站点，则此处为空白，单击“下一步”，如图2-6所示。 Step2：在弹出的对话框中询问是否使用服务器技术，如果创建的是静态网站，则选择“否，我不想使用服务器技术”单选按钮。如图2-7所示。
第2.2章
创建站点
图2-8 选择站点存放位置
图2-9 选择存放到服务器的位置
第2.2章
创建站点
Step5：显示前面已经设置的内容，单击【完成】。如图2-10所示。 Step6：返回到“管理站点”对话框，单击【完成】按钮，本地站点创建完成，显示该站点的名称，如图2-11所示
。
图2-10 显示设置信息
第2.2章
创建站点
2.4.2创建远程站点创建了本地 Web 站点后，下一步就是通过将文件上传到远程文件夹来发布该站点。远程文件夹是internet上存储站点的位置，这些文件用于测试、生产、协作和发布。远程站点可通过在“基本”选项卡中向导提示的方式创建也可以通过“高级”选项卡直接输入信息的方式来创建。下面以“高级”选项卡中FTP的方式为例介绍远程站点的创建方法： Step1：选择“站点”>“管理站点”。 Step2：单击“新建”并选择“站点”以设置新站点，或选择现有的 Dreamweaver 站点并单击“编辑”。 Step3：单击“高级”选项卡，从“访问”弹出式菜单中，选择“FTP”。如图2-14所示。 Step4：在“FTP主机”文本框中，输入要上传的 FTP服务器的主机名。 Step5：在“主机目录”文本框中，输入远程站点上用于存储公开显示的文档的主机目录（文件夹）。 Step6：在“登录名”和“密码”文本框中，输入用于连接到 FTP 服务器的登录名和密码。

Dreamweaver CS3网页制作基础教程第02章规划、创建和管理站点

2.1 规划站点
熟悉网站制作流程、了解网页布局以及网页色彩搭配的基本知识是做好站点规划的基本条件。
2.1.1 网站制作流程
前期策划网页制作网站发布网站推广后期维护
2.1.2 网页布局的基本方式
“国”字型 “匡”字型 “三”字型 “川”字型标题文本型框架型封面型 Flash型
2.1.3 网页色彩搭配的原理
2.2 创建站点
定义站点设置首选参数创建文件夹和文件
2.2.1 定义站点
定义站点的过程中，需要注意以下问题。 • 【基本】选项卡和【高级】选项卡 • 服务器技术的使用 • 关于文件的使用方式
2.2.2 设置首选参数
一、【常规】分类
2.2.2 设置首选参数
二、【不可见元素】分类
2.2.2 设置首选参数
三、【复制/粘贴】分类
2.2.2 设置首选参数
四、【新建文档】分类
2.2.3 创建文件夹和文件
一、文件夹和文件的命名规则汉语拼音，如“jianjie.htm” 拼音缩写，如“gsjj.htm” 英文缩写，如“asp.htm” 英文原义，如“BookList.htm” 以上命名方式有时会与数字、符号组合使用，如“Book1.htm”、“Book_1.htm”
网页色彩搭配应该遵循以下原理。色彩的鲜明性色彩的独特性色彩的适宜性色彩的联想性网页色彩搭配应该注意以下技巧。同一色系用两种色彩同种色调用黑色和一种彩色在对网页色彩进行搭配时要注意以下几点。网站的标准色不宜过多要了解哪些颜色适合哪些类型的站点在设计中要考虑主要访问群的背景和构成
第2章规划、创建和管理站点
本章将首先介绍规划站点的方法，然后介绍在Dreamweaver CS3中创建和管理站点的方法。

Dreamweaver CS5 网页设计与应用(第2版)第1章初识Dreamweaver

在“管理站点”对话框中删除站点的具体操作步骤如下。（1）在“管理站点”对话框左侧的站点列表中选择要删除的站点。（2）单击“删除”按钮即可删除选择的站点。
1.2.3 定义新站点
创建本地站点的步骤（1）选择“站点 > 管理站点”命令，启用“管理站点”对话框。（2）在对话框中单击“新建”按钮，在弹出的菜单中选择“站点”命令，弹出“站点设置对象未命名站点1”对话框。在对话框中，设计者通过 “基本”选项卡建立不同的站点，对于熟练的设计者而言，通常在对话框 “高级”选项卡的“本地信息”分类中，根据需要设置站点。
1.1 工作界面
Dreamweaver的工作区将多个文档集中到一个窗口中，不仅降低了系统资源的占用，还可以更加方便地操作文档。Dreamweaver CS5的工作窗口由5部分组成，分别是“插入”控制面板、“文档”工具栏、“文档” 窗口、控制面板组和“属性”控制面板。Dreamweaver的操作环境简洁明快，可大大提高设计效率。
1.3.2 编辑站点
有时用户需要修改站点的一些设置，此时需要编辑站点。例如，修改站点的默认图像文件夹的路径，其具体的操作步骤如下。
（1）选择“站点 > 管理站点”命令，启用“管理站点”对话框。（2）在对话框中，选择要编辑的站点名，单击“编辑”按钮，弹出“站点设置对象未命名站点1”对话框，选择“高级设置”选项卡，此时可根据需要进行修改，单击“确定”按钮完成设置，回到“管理站点”对话框。（3）如果不需要修改其他站点，可单击“完成”按钮关闭“管理站点”对话框。
开始页面
“首选参数”对话框
1.1.2 不同风格的界面
选择 “窗口 > 工作区布局”命令，弹出其子命令菜单，选择“经典”或“编码器”命令。选择其中一种界面风格，页面会发生相应的改变。

规划和创建站点ppt课件

权重。
外链建设
03
通过与其他优质站点建立友情链接，提高站点知名度和权重。
社交媒体运营策略制定
平台选择
内容规划
根据目标用户群体特征，选择合适的社交媒体平
台进行运营。
制定内容发布计划，包括文字、图片、视频等
多种形式的内容。
互动策略
通过评论、点赞、转发等方式与用户互动，提高用户粘性和活跃度。
数据分析
用户反馈收集及改进方向
反馈渠道
我们会提供多种用户反馈渠道，包括在线表单、邮件、电话等，方便用户随时向我们提供反馈和建议。
改进方向
我们会认真听取用户的反馈和建议，对站点进行持续改进和优化。包括改进页面设计、提高用户体验、增加新功能等。我们会不断努力，为用户提供更好的服务。
感谢您的观看
THANKS
图标设计
使用简洁明了的图标，帮助用户快速理解和操作站点功能。
素材库
建立统一的素材库，方便站点内各页面共享和使用优质素材。
04
站点功能实现与测试
前端开发技术选型及实现过程
技术选型
根据项目需求和团队技术栈，选择合适的前端开发框架，如
React、Vue或Angular。
组件化开发
采用组件化开发思想，将页面拆分为多个可复用的组件，提高开发效率和代码可维护性。
定期分析社交媒体运营数据，调整策略，提高
运营效果。
06
站点维护与更新计划
数据备份、安全防护措施介绍
数据备份
为了防止数据丢失，我们会定期对站点数据进行备份。备份内容包括数据库、文件、图片等所有重要数据。我们会采用多种备份方式，确保数据的完整性和安全性。
安全防护措施

第二课-规划网站及创建站点课件

第二课-规划网站及创建站点
4
了解网站的开发流程
收集素材
1、网站需求分析
明确了网站的主题以后，就要围绕主题搜集素材。
素材包括：图片、音频、文字、视频和动画等
素材的准备既可以从图书、报刊、光盘、网络上得来的，也可是自己制作的，素材搜集要去粗取精、
去伪存真，才能为己所用
第二课-规划网站及创建站点
5
了解网站的开发流程
面板组状态栏
12
利用Dreamweaver 创建站点
教师演示操作步骤，学生操作
第二课-规划网站及创建站点
13
第二课-规划网站及创建站点
Thanks
14
7
了解网站的开发流程
2、设计制作网站页面
页面设计原则：网页设计一定要按照先大后小、先简单后复杂的顺序来制作
即：先把整体的结构设计好，在完善局部的结构设计，先设计ห้องสมุดไป่ตู้单内容，在设计复杂内容，便于修改
第二课-规划网站及创建站点
8
了解网站开发流程
01
网站需求分析
02
设计制作网站页面
03
网站的发布
第二课-规划网站及创建站点
第二课、轻松上路
规划网站及创建站点
第二课-规划网站及创建站点
站点规划
初步设计网站的组织结构图
第二课-规划网站及创建站点
2
了解网站开发流程
01
网站需求分析
确
收规
定
集划
网
素网
站
材站
主
题
第二课-规划网站及创建站点
3
了解网站的开发流程
确定网站主题
1、网站需求分析
• 网站主题就是网站所要表达的核心内容，网站必须有明确的主题才能充分表现个性和情趣，才能办出特色给浏览者留下深刻的印象

Dreamweaver CS5网页设计教程第2章

设置段落格式
设置CSS字体格式
（2）设置对齐方式
Dreamweaver中的对齐方式包括左对齐、右对齐、居中对齐和两端对齐等。
设置段落格式
设置CSS字体格式
（3）设置文本缩进
文本缩进是指文本与页面边缘的距离，其设置方法很简单，只需选择文本或将插入点定位到该文本中，单击“属性”面板中的按钮，单击“内缩区块”按钮可增加缩进距离；单击“删除内缩区块”按钮可减少缩进距离。
选择需要添加项目符号的段落，单击“属性”面板中的钮，然后单击“项目列表”按钮。按
创建列表
编辑项目符号和编号
无论是项目符号还是编号，只要选择了相应的段落，并在“属性” 面板中单击按钮，均可在打开的“列表属性”对话框中进行设置。
设置水平线
在需要插入水平线的位置的前一段定位插入点，选择【插入】/ 【HTML】/【水平线】菜单命令。
为网页中的文本设置HTML字体格式的操作非常简单，选择文本后，在操作界面下方的“属性”面板中单击按钮，然后通过调节面板中的参数进行设置即可。
设置文本字体格式
设置CSS字体格式
在“属性”面板中进行设置。
设置段落格式
设置CSS字体格式
（1）设置标题格式
选择需设置格式的标题文本（也可选择其他文本），单击“属性” 面板中的按钮，在“格式”下拉列表框中选择需要的标题格式即可。
第2章输入与格式化文本
高等职业院校立体化精品系列规划教材
学习目标
知识目标
● 掌握文本段落的输入与换行分段的操作。 ● 熟练设置文本格式的方法。 ● 熟悉项目列表的设置和水平线的创建方法。
课堂实例预览
主要内容
1
2 3 制作“公司简介”页面制作“企业文化”页面实训——制作“快乐旅游”网站首页