当前位置：文档之家 › 网页设计(CS5)-第2讲-规划和创建站点

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

  • 格式：ppt
  • 大小：3.74 MB
  • 文档页数：26

下载文档原格式

  / 26

合集下载

第2章创建站点

第2章创建站点

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

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

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

4．删除站点

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

第二章 DWCS5基本操作

第二章 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第二讲

网页设计与制作 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)

网站开发与设计(--基于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 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基础

网页设计第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章 站点的创建与管理

《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

网站建设与网页制作_第二章_认识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网页设计》课件

《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 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中创建本地站点

在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

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章 站点的创建与管理

图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章 规划、创建和管理站点

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

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课件

规划和创建站点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章

Dreamweaver CS5网页设计教程第2章

设置段落格式
设置CSS字体格式
（2）设置对齐方式
Dreamweaver中的对齐方式包括左对齐、右对齐、居中对齐和两 端对齐等。
设置段落格式
设置CSS字体格式
（3）设置文本缩进
文本缩进是指文本与页面边缘的距离，其设置方法很简单，只需 选择文本或将插入点定位到该文本中，单击“属性”面板中的 按钮，单击“内缩区块”按钮 可增加缩进距离；单击“删除内缩 区块”按钮 可减少缩进距离。
选择需要添加项目符号的段落，单击“属性”面板中的 钮，然后单击“项目列表”按钮 。 按
创建列表
编辑项目符号和编号
无论是项目符号还是编号，只要选择了相应的段落，并在“属性” 面板中单击 按钮，均可在打开的“列表属性”对话框中进行设 置。
设置水平线
在需要插入水平线的位置的前一段定位插入点，选择【插入】/ 【HTML】/【水平线】菜单命令。
为网页中的文本设置HTML字体格式的操作非常简单，选择文本 后，在操作界面下方的“属性”面板中单击 按钮，然后通过调 节面板中的参数进行设置即可。
设置文本字体格式
设置CSS字体格式
在“属性”面板中进行设置。
设置段落格式
设置CSS字体格式
（1）设置标题格式
选择需设置格式的标题文本（也可选择其他文本），单击“属性” 面板中的 按钮，在“格式”下拉列表框中选择需要的标题格式 即可。
第2章 输入与格式化 文本
高等职业院校立体化精品系列规划教材
学习目标
知识目标
● 掌握文本段落的输入与换行分段的操作。 ● 熟练设置文本格式的方法。 ● 熟悉项目列表的设置和水平线的创建方法。
课堂实例预览
主要内容
1
2 3 制作“公司简介”页面 制作“企业文化”页面 实训——制作“快乐旅游”网站首页
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

站点管理
编辑站点、复制站点、删除站点
网页设计·第2讲
5 设置默认图像文件夹
操作演示
文件面板 ↓ 站点管理 ↓ 编辑
网页设计·第2讲
Dreamweaver CS5
第2讲· 规划和创建站点
归纳与小结
了解站点的基本概念
掌握创建与管理站点的方法
学会设置默认图片文件夹
第2讲· 作业
步骤1：新建站点，站点名称“作业” 步骤2：选择第1讲建立好的“姓名+学号”文件夹作为本地站点文件
（网页文件名通常使用小写英文，不能使用空格，最好不要使用 特殊字符，不用中文）、首页名（index.html）
网页设计·第2讲
3 创建站点
什么是站点
Dreamweaver的站点是一种管理网站中所有相关联文件
的工具。通过站点可以对网站的相关页面及各类素材进行统
一管理，还可以以使用站点管理实现将文件上传到网页服务 器，测试网站。 站点简单的说就是一个文件夹。在这个文件夹里包含了 网站中所有用到的文件。我们通过这个文件夹（站点），对 我们的网站进行管理，形成树状结构，脉络清晰。
第2讲·规划和创建站点
Dreamweaver CS5
Dreamweaver CS5
第2讲· 规划和创建站点
1 2 3 4 5 网站的规划与设计 规划站点结构的原则 创建站点 管理站点 设置默认图像文件夹
1 网站的规划与设计
网站的目标定位
题材
内容
网站名称
网站域名
网页设计·第2讲
1 网站的规划与设计
第2讲· 作业
步骤3：在“姓名+学号”文件夹下建立“image”文件夹
第2讲· 业
步骤4：将“image” 设置为默认图像文件夹
第2讲· 作业
步骤4：将“image”文件夹设置为默认图像文件夹
第2讲· 作业
步骤5：在“作业”站点下，建立“ch1”、“ch2”文件夹，并在ch2 中新建1个网页，命名为ch2.html，将ch1.html拖至ch1 ，ch1.jpg拖至 image
网站的风格与形象
网站的风格—— 建立在有价值的内容之上； 明确希望网站留给浏览者的印象； 着手建立和加强网站印象 网站的形象—— 标志；标准色彩；标准字体
网页设计·第2讲
1 网站的规划与设计
网站的目录结构
注意不要将所有的文件都存放在根目录下 要按栏目内容建立子目录 要在每个主目录下都建立独立的图片目录
第2讲· 作业
步骤6：
“ch2.html”的内容与要求
在“ch2.html” 中输入文字，字体设置为黑体并加粗，字 号24，设置背景颜色或图片 在“ch2.html”网页文件中插入图片，在【页面属性】中 将左边距设置为0
第2讲· 作业
最终作业文件目录效果
THANKS !
网页设计·第2讲
1 网站的规划与设计
网站信息的准备与搜集
文字信息、图像、动画、视频和音频
网页设计·第2讲
1 网站的规划与设计
网页设计·第2讲
1 网站的规划与设计
网站信息的准备与搜集
文字信息、图像、动画、视频和音频
网页设计·第2讲
2 规划站点结构的原则
原则一：用文件夹来保存文档 原则二：使用合理的文件名
网页设计·第2讲
3 创建站点
创建站点 A. 基本方式
在【管理站点】对话框中单击【新建】按钮，从弹出菜单中选 择【新建】命令，弹出对话框，如下一页图所示。
网页设计·第2讲
3 创建站点
定义站点名称与本地站点文件夹
网页设计·第2讲
3 创建站点
创建站点 B.其他方式
在某个盘的根目录下建立一个站点文件夹，可以在Dreamweaver
中将其定义为站点。
任务描述：本单元将通过一个个人网站的创建，学习网站从规划 到建立的流程，自己动手，打造属于自己的站点。
网页设计·第2讲
3 创建站点
任务完成后如下图所示：
网页设计·第2讲
4 管理站点
在“文件”面板中实现以下操作
选择编辑网页文件 创建文件或文件夹 剪切、粘贴、复制、删除、重命名文件或文件夹
目录的层次不要太深
网页设计·第2讲
1 网站的规划与设计
网站的栏目和版块
网站的栏目相当于一个突出显示网站内容的大纲索引。版块
的概念则要比栏目大一些，每一个版块都有自己的栏目。例
如，搜狐的站点分为新闻、时尚、体育和汽车等版块，而每 一个版块下面都有自己的主栏目。 网站的栏目和版块划分要 服从并体现网站主题。一般的做法是将网站的主题按一定的 方法分类并将其作为网站的主栏目。这样可使网站看起来更 具有专业性，主题鲜明，容易给人留下深刻的印象。

相关主题