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