电子商务网页制作-项目站点创建新体验培训课件

• 链接颜色：文本链接的颜色。
• 背景：页面背景颜色。
• 活动链接颜色：文本活动链接的颜色。
• 文本：文本的颜色。
• 边距和边距高度：距离页面左、上的距离,高
• 已访问链接：已经访问过的文本链接的颜色。 度单位默认为像素。
修改网页属性
３ ．链接（CSS）
在“链接（CSS）”分类中，可以设置如下属性：
1.普通文字 在Dreamweaver CS5中插入普通文字的方法很简单，和在记事本、Word等文
字软件的方法相似，在出现光标的地方，选择合适的输入法，便可以直接输入文字， 也可以通过复制粘贴的方式插入文字。
文本的输入和编辑
2.换行 在输入文字时，按Enter键，文字另起一段，此时与上一行文字直接空出一行的
1．HTML文本设置 HTML文本设置在“HTML属性面板”中进行：
文本的修饰
• 格式：可以对所选文字或者是文字所在的整个段落设置成之前预先设置好的标题格 式。通过下拉菜单选中设置：
• 类：可以对所选文字套用已经定义好的类，可以在CSS选项卡中新建类，也可以重 命名类。文字类可以通过类的名称呈现出设置的效果，更方便选择合适的类：
测试服务器信息。远端文件夹是存储文件的位置，这些文件用于测试、生产、 协作等。远端文件夹通常位于远端Web服务器上。Dreamweaver将该文件夹 称为“远端站点”。
本地文件夹和远端文件夹使设计者能够在本地磁盘和Web服务器之间传输 文件，从而轻松管理Dreamweaver站点中的文件。
３、测试服务器文件夹 测试服务器文件夹是Dreamweaver处理动态网页的文件夹。
文本的修饰
• 字体：Dreamweaver CS5默认的字体很少，一般只有宋体这一种字体，如果在网 页中需要用到其他字体，可以在字体列表的最后一行选择“编辑字体列表”，将弹 出“编辑字体列表”对话框，可以在此添加本机所安装的字体。
小贴士 在实际操作中，因为网页在互联网上可能会被不同配置的客户端浏
• 目标规则：Dreamweaver CS5中，文字的格式设置一定要用CSS样式表，在目标 规则中需要选择套用的样式表，如果没有已经存在的样式表，则需要选中“新CSS 规则”后，创建新的CSS样式表，样式表可以存在于该页面中，可以创建新的样式 表中。当然也可以编辑已经存在的样式表，但编辑后，之前套用该样式表的字体， 也将自动套用新的样式表格式。
创建站点步骤
步骤１：在Dreamweaver CS5窗口中打开“站点”菜单，选择“新建站点”命 令，将打开“站点设置对象”对话框
在“站点”选项卡中，可以设置站点名称和本地站点文件夹，站点名称可以 自己定义，一般定义为与站点主题相关的名称；本地站点文件夹非常重要，一定 要设置为前面创建的本地文件夹。
修改网页属性
６．跟踪图像 在“标题/编码”分类中，可以设置网页的跟踪图像。
小贴士 跟踪图像是Dreamweaver一个非常有效的功能，它允许设
计者在网页中将原来的平面设计稿作为辅助的背景。这样， 就可以非常方便地定位文字、图像、表格、层等网页元素在 该页面中的位置了。
网页预览
网页制作完成后要在浏览器中预览最终效果，在文档工具栏中单击预览按钮，选 择预览使用的Hale Waihona Puke Baidu览器即可打开浏览器预览网页。
• 大小：文字的大小，默认单位为像素。 • 文本颜色：文字的颜色。 • 背景颜色：页面背景颜色。 • 背景图像：背景图片的位置链接。 • 重复：背景图片的显示是否重复。 • 左右上下边距：页面距离左右上下的距离。
修改网页属性
2．外观（HTML）
在“外观（HTML）”分类中，可以设置如下属性：
• 背景图像：背景图片的位置链接。
打开站点
当我们同时在制作几个网站时，不同的站点都会在Dreamweaver中保留， 我们需要打开某个站点时，可以通过“管理站点”对话框来完成。 在Dreamweaver窗口中打开“站点”菜单，选择“管理站点”命令，打开“管 理站点”对话框。
在“管理站点”对话框中选择需要打开的站点名称，单击“完成”按钮即 可打开该站点。
文本的修饰
• 链接：将选定文字设置为链接，可以链接到页面或其他网页元素。有关链接的内容 将在后面专门讲解。
• 粗体、斜体：设置文字的粗体和斜体。 • 项目列表、编号列表：设置段落的项目编号或列表编号。 • 内缩区块、删除内缩区块：设置文字或段落缩进或凸出。
文本的修饰
2．CSS文本设置 CSS文本设置在“CSS属性面板”中进行：
在后面我们经常会用到“另存为”命令。
网页文件操作
3．关闭网页 单击菜单栏下网页标题旁的关闭按钮即可关闭该网页。
网页文件操作
4．删除网页 在文件面板中选择要删除的网页，按Delete键，将弹出提示框确认是否删除，
单击“是”后即可删除该网页。
修改网页属性
打开“修改”菜单，选择“页面属性”命令，或按快捷键<Ctrl>+J，或者单击 属性面板中的“页面属性”按钮，将弹出“页面属性”对话框。
电子商务 网页制作
DW
项目三 站点创建新体验
项目目标
• 说出什么是站点； • 创建、编辑和管理站点； • 进行文本的添加和编辑； • 插入和简单编辑图像； • 插入和编辑表格。
什么是站点？
站点可以简单的理解成为存放站内信息的文件夹，是一组网页文档的集 合。设计者通过各种链接把这些网页联系在一起，浏览者通过不同的链接， 可以从一个网页到另一个网页，从而实现对整个网站的访问。网页制作的第 一步不是制作一个网页，而是创建一个新的站点。
编辑站点
当需要重新进行站点设置时，可以单击“管理站点”对话框中的“编辑”按 钮，选择后将重新弹出“站点设置对象”对话框，可以对站点重新进行设置。
复制站点
单击“管理站点”对话框中的“复制”按钮，将生成选定的站点的复制站点。
删除站点
单击“管理站点”对话框中的“删除”按钮，将弹出警告框提示是否确定删 除，单击“是”按钮后将删除选定的站点。
创建站点步骤
步骤２：单击“高级设置”选项卡，在其中的“本地信息”子选项卡中设置默 认图像文件夹为本地文件夹中的“images”子文件夹
对于制作本地站点而言，只需要进行上述的设置就可以了，其余的选项都 采用默认设置即可，不需要再去专门设置。
创建站点步骤
步骤３：设置完成后，单击“保存”按钮，站点创建完成，这时可以在窗口右 侧的文件面板中看到站点中的文件和文件夹
网页文件操作
小贴士 文件名通常使用小写英文字母，不使用空格、特殊符号，不允
许使用中文！ 文件命名尽量以这四种方式命名：汉语拼音，汉语拼音缩写，
英文，英文缩写，以方便通过文件名直观的了解页面内容。 切忌用默认的untitled-1、untitled-2等方式命名文件，作为初学
者，你需要养成很好的文件命名习惯！
距离，表明重新开始一个段落。按Shift+Enter键，文字另起一行，此时与上一行文 字之间没有空行，文字分行，不分段。 3.空格
在输入文字中，按空格键，只能增加一个空格，此时需要在“插入栏”的“文本 ”选项中单击“不换行空格”才能连续插入多个空格。
文本的修饰
文本的修饰主要在文本的属性面板中设置。在Dreamweaver CS5中，文本属性 面板与之前版本的区别在于将文字的属性分为“HTML”和“CSS”两部分。HTML 是对文字直接编辑，而CSS则是给该文字添加样式表，有关CSS的内容我们将在后面 的章节中详细讲解。
网页文件操作
小贴士 在“文件”菜单里有“保存”和“另存为”两个命令，首次保
存网页时，选择“保存”或“另存为”命令都会弹出“另存为”对 话框，提示设计者设置保存位置和文件名；对于已经保存过的网页 进行再次编辑时，选择“保存”命令直接将所作的修改保存到原网 页文档，而选择“另存为”命令则再次弹出“另存为”对话框，可 以重新设置保存位置和文件名。
1、本地文件夹 本地文件夹是网站设计者的工作文件夹，设计过程中使用和处理的所有文
档都存储在这个文件夹中。它一般位于本地计算机上，也可以位于网络服务器 上。Dreamweaver将该文件夹称为“本地站点”。
只需要建立本地文件夹就可以将其定义为Dreamweaver的“本地站点”。
创建站点文件夹
２、远端文件夹 如果要向Web服务器传输文件或开发Web应用程序，还需添加远端站点和
创建站点文件夹
在创建站点之前，我们应该新建一个本地文件夹用于存放网站的各种文件 ，在本地文件夹内部再创建若干个子文件夹对网站文件进行分类管理，比如网 站图像存放在“images”文件夹中。
小贴士 子文件夹的名称一般使用便于记忆的英文单词或缩写
来命名，如： “images”文件夹用于存放网站图像； “style”文件夹用于存放样式表文件； “swf”文件夹用于存放网站动画； “data” 文件夹用于存放数据库方面的内容。
导出和导入站点
单击“管理站点”对话框中的“导出”按钮，将导出当前的站点，用于网站备份。 单击“管理站点”对话框中的“导入”按钮，可以导入之前导出过的备份站点。
站点的操作
活动小结
在制作网页之前我们需要先创建站点。在本次活动中我们了解了站点的 概念，着重学习了创建站点的方法和步骤，同时还学习了站点相关的一系列 操作，包括站点的打开、编辑、复制、删除、导入和导出，这些操作对我们 以后管理站点是非常有用的。
４ ．标题（CSS） 在“（标题CSS）”分类中，可以设置如下属性：
标题字体的格式、大小和颜色，设置标题1至标题6后，在字体属性面板中直接指 定文字为某号标题后，该文字直接套用该标题的属性。
修改网页属性
５ ．标题/编码 标题和编码：对于任何一张页面来说，标题都非常重要，它能在浏览者浏览该网
页的时候了解该网页的内容，如果页面没有设置标题，则默认标题名为“无标题文档 ”，而不能直接的表达出该页面的内容，因此我们建议每个页面都应该设置标题。
• 链接字体：链接文字的字体格式和加粗倾斜属性。 • 已访问链接颜色：已经访问过的文本链
• 大小：字体的大小，默认单位为像素。
接的颜色。
• 链接颜色：文本链接的颜色
• 活动链接颜色：文本活动链接的颜色。
• 变换图像链接颜色：变换图像链接时文本的颜色。 • 下滑线样式：链接时是否显示下划线。
修改网页属性
网页文件操作
1．新建网页文件 方法一：在起始页的“新建”栏中单击“HTML”选项，即可新建一个名为
“Untitled-1”的空白网页
网页文件操作
方法二：打开“文件”菜单，选择“新建”命令，或按快捷键<Ctrl>+N，将 弹出“新建文档”对话框，选择“空白页”中的“HTML”项，在“布局”中选择 “无”，单击“创建”按钮即可新建一个空白网页。
也可以直接按快捷键F12打开浏览器预览网页。
文本的输入和编辑
文本包括所有的汉字、西文字母、各种可显示的符号、数字等，与漂亮的图片、 动画和交互式按钮相比，虽然文本显得过于普通，但它却是网页中最重要的内容。因 为文本表达信息准确完整、易于理解、下载迅速，是向浏览者传递信息的主要途径。 特别是对于电子商务网页，无论是展示企业形象还是传达产品信息都离不开文本，文 本的编辑是制作网页时首先要考虑的问题。
修改网页属性
在该对话框中可以设置网页的各种属性，如页面文字的设置、页面背景的设置 、页面边距的设置、链接文字的设置以及标题编码的设置等，根据属性分类不同， 分为六个类别。 1．外观（CSS） 在“外观（CSS）”分类中，可以设置如下属性 • 页面字体：设置页面字体格式。可以快速定义整张页面的字体。
网页文件操作
方法三：在文件面板中的站点目录上单击右键，在弹出的快捷菜单中选择“新 建文件”，将新建一个名为“Untitled.html”的文件，需要重新命名。
网页文件操作
2．保存网页 打开“文件”菜单，选择“保存”命令，或按快捷键<Ctrl>+S，将弹出“另
存为”对话框，选择保存的位置并输入保存文件名，单击“保存”按钮即可将网页 保存。
小贴士 创建站点就是创建一个特殊的文件夹，有关网站的所有
内容，如子文件夹、网页文档、组件、图片和其它网站相关 的文档等等，都存放在该文件夹中。
另外，“站点”和“网站”是一个东东，只是说法不同 而已！
创建站点文件夹
Dreamweaver站点由三种类型的文件夹组成，这三种文件夹有可能是同一 个文件夹，也可能不是，这取决于开发环境和所开发的网站类型。