第一章DW站点建立.doc

如有侵权，请联系网站删除，仅供学习与交流第一章DW站点建立【精品文档】第 8 页第一部分：网络编辑实务之一网站建设第一章 网站规划与网页设计第一节 站点建设教学目的：站点规划与站点的创建，是为网页制作前必须进行的设计，以便以后对整个网站维护与管理。是极其重要前提。时间安排：4课时教学重点：站点建设教学方式：讲授+指导教学过程：序言DW是美国著名的多媒体软件开发商MACROMEDIA公司推出的一套专业可视化网页开发工具。它与FLASH、FIREWORKS并称为“网页三剑客”，其中FALSH是用来制作网页动画，FIREWORKS是用来网页图像制作，而DW是用于网页开发，可以用于各类素材的集成与发布，可视性强，而且支持FLASH、SHOCKWAVE、ACTIVE等许多外部媒体的发布，再加上使用简单、方便，到目前为止，全世界范围超过60%的专业网页设计师都在使用这款软件来开发网页，编织他们的梦想。界面如下菜单栏：包含10类主菜单，涵盖了几乎DW所有的功能。插入栏，包含很多可以插入的按钮。文档工具栏：提供各种文档窗口的视图（如“设计”视图和“代码”视图）文档窗口：显示当前创建和编辑的文档。属性面板：用于查看和设置属性面板组：是各种面板的组合，不需要的可以暂时关闭。知识点：规划站点：DW是一个创建站点和管理站点工具，因为使用它不仅可以制作精美WEB网页，而且可以创建完整的WEB站点。为了达到最好效果，在设计网页之前，首先都必须对站点进行设计和规划。这个规划包括站点结构和导航系统的规划，网页模板和库的使用等等。站点规划好之后，就可以根据规划绘制出一个网站结构草图，以便于有一个清晰的思路。如何创建站点。在正式开始制作网页之前呢，最好先定义一个新网站。这样做目的是可以利用站点窗口对站点文件进行管理。也可以尽可能减少一些错误出现。比如路径出错或者链接出错。（特别是对于我们这些初学者，更要注意条理性与结构性，一个文件放这里，另外一放那里。或者所有文件都放在同一文件夹里，这样显得很乱，而且容易出错,所以创建站点是非常必要的。1、创建本地站点所谓本地站点就是本地硬盘中存放远程网站所有文档的地方（文件夹）。建立网站的通常做法是：在本地硬盘建立一文件夹用来存放网站的所有文件，以后就直接在这个文件夹中创建和编辑文档，那么等待网页设计和测试好之后，再把他们拷贝到网站上提供给浏览者来浏览。也即：在Dreamweaver中制作网站，您必须定义一个本地站点，它是您的计算机上任意位置的一个文件夹。之所以一定要定义它，是为了告诉Dreamweaver您的文件存放位置，然后Dreamweaver就会将所有的设置针对该地址设置。具体操作为：步骤1：在本地硬盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。这个站点可以是空的，也可以是非空的。步骤2：基本：1站点管理站点 新建站点基本（基本选项是指导用户一步一步地完成站点设置，如果用户宁愿在没有指导情况下编辑站点信息，则可以随时单击高级选项卡）站点名称（为你的网站建立一个名字，这个名字仅仅起到识别的作用，不会在浏览器上显示，与网站发布后真正的名字无关，例如，这里起名叫“My Site”，而实际上我的网站的名字叫“雅心居”）在对话框中选择是否使用服务器技术-因为我们现在建立是一个静态站点，因为选择否，我不想使用服务器技术-下一步-默认编辑到我计算机上本地副本-点击本地根文件夹框右边的文件夹标志，在你的硬盘上查找并选择相应的文件夹（即设置站点在本地硬盘的位置，在硬盘上选择一个目录来存放站点的文件目录）（提示最好选择E或者F盘，不要放C盘）不连接服务器-完成）.注意：站点文件夹的名称必须是小写英文字母，不允许有空格和汉字，比如：c:mywebs高级：图示如下如图：2点击OK，本地站定义完成，Dreamweaver会自动导入站点的所有文件及信息。您可以在站点视窗中的本地站点窗口中查看。 2、定义远程站点我们学习了如何创建本地站点，但要别人浏览到网站，还必须把本地站点内容放到远程服务器上。浏览者通过单击网站域名或IP地址，才能浏览到网站上内容，所以创建远程站点，进行网站上传可以说是建设网站的最终步骤。无论您制作的是个人主页还是公司网站，所有的文件都需要上传到网站服务器才能提供给访问者。在Dreamweaver中内置了FTP工具，因此你无须切换到其他软件就可以连接网站主机，上传更新您的站点。FTP：（File Transfer Protocol）,文件传输协议.要使用Dreamweaver中的FTP功能，就必须定义站点的外部信息，具体操作方法为：1管理站点编辑站点远程信息在访问下拉菜单里选择 FTP 方式 2根据上传空间服务商提供的信息来填写相关的信息。输入FTP相关信息例如： FTP主机地址（比如：）、主机目录或默认的远端文件夹(/public_html)、FTP登录用户名(申请时的用户名)、Password（FTP登录密码） 下图为定义FTP方式示例：图：定义FTP方式的外部站点如果您是在局域网内操作不需要FTP方式，您可以选择 本地网络 方式。或者您已经熟悉使用其他的FTP软件而不愿意使用Dreamweaver内置的FTP功能，因此您可能只是在本地机操作，但我仍然建议您选择此方式定义一个外部文件夹，从而起到备份站点文件的作用。与FTP定义方式相类似，您只需要在 访问中选择本地/网络 方式，然后选择一个远端文件夹。3.点击连接到远端主机。如果连接上了，左边显示远端站点的内容，右边显示本地站点的内容。新建站点到此结束。4.打开本地站点和编辑站点属性管理站点编辑-进行编辑第二节 站点内容编辑一、创建站点文件1打开站点，在站点下建立文件。右键单击站点文件夹新建文件untitled.htm（我们给这个无标题页面起个名字，一般情况下首页的名字是“index.html”。浏览器打开某个网站，一般是先找“index.html”，再找“index.htm”这个顺序是服务器决定的，而且绝大多数服务器都遵循这个原则，而且一般用户是无权修改这种设定。所以在制作网站的时候，我们最好把网站的第一页命名为index.html或index.htm.2.把untitled.htm修改为index.htm(主页),双击主页文件index.htm，回到编辑区域，在标题栏里输入名字：我的主页，然后保存（ctrl+s）.注意：页面的名称必须是小写的英文字母。htm是文件的后缀，也就是这网页文件的类型说明，表示这个网页是静态的htm文件，也可以用后缀html表示，以后大家一定记住将网页的后缀改为htm或html，否则上传到服务器上，浏览器就无法打开上传的网页。3 同1，2,分别建立不同的页面。比如：interest.htm;photo.html;resume.htm.,并分别回到编辑区域给标题命名与保存。4 在站点地图中显示文件标题站点面板中视图站点地图-显示网页标题。二、创建站点下的文件夹右键单击站点文件夹新建文件夹。比如：image,flash,等。文件夹不需要保存。提示：文件夹与文件的名称不允许出现汉字和标点符号三、查看站点地图：查看站点地图是在Dreamweaver 8的“文件”面板的“视图”下拉列表框中选择“地图视图”选项。四、编辑网页文件1双击我的主页，进入编辑区域。打开窗口属性面板。（在网页编辑中，经常打开是属性面板与站点文件夹）2 修改页面属性选择页面背景的图片与颜色等确定。在页面输入文字。比如：我的主页 我的兴趣 我的相册 我的简历 设置文字属性。选中文字在下面属性面板设置其属性（颜色、大小、粗细、位置）。添加各种字体关于字体：注意：别人的系统上未必装有与你相同的字体，所以不要将一些特殊的字体加到列表中使用，如果真需要特殊字体，必须做成图片之后再使用。（民生学院主页文字显示）关于换行：（1）换行 自动换行：在输入文字时，若某一行的长度超过了Dreamweaver窗口的显示范围，文字将自动换到下一行。 利用“Enter”键换行：在输入文字后按“Enter”键，文字成段，且上下段之间空一行。 利用“Shift+Enter”键换行：如果想要将文字手动换行，中间又不能出现空白行，可以按“Shift+Enter”键。3.图片的插入与应用将插入点放到文档中要插入对象的位置上。选择对象面板上的图像按钮，这时就出现一个对话框，要求你从磁盘上选择对象文件。选择要插入的图像文件，同时在对话框里设置url的类型。此时出现一个对话框：你愿意将该文件复制到你的根文件夹里吗？点确定。保存到站点文件夹里的image文件夹里。在文档里出现插入的图片。修改属性。保存，浏览效果。提示：GIF和JPEG是网页上常用的图象文件格式，在使用时采用以下规则：需要图片保存为透明的背景，或者希望图象在显示时交错出现，或者是颜色不多，线条清楚的图片，选择GIF格式；而全彩的连续色调，没有明显边缘的图，则应选择JPEG格式。4.动画插入与应用 .swf 将插入点放到文档中要插入对象的位置上。选择对象面板上的FLASH按钮，这时就出现一个对话框，要求你从磁盘上选择对象文件。选择要插入的动画文件，同时在对话框里设置url的类型。此时出现一个对话框：你愿意将该文件复制到你的根文件夹里吗？点确定。（只有当flash文件在站点下的根文件夹里，才能在你所制作的网页上正常显示），然后保存在站点文件夹的flash文件夹里。（如果没有flash文件夹，可以在此时建立，要养成不同的文件放入不同文件夹的习惯）保存过后，FLASH动画就插入文档中了，在属性面板上播放，并调整动画的宽高。保存，F12浏览效果。注意：FLASH动画必须是SWF格式，名称不能有中文显示。5.视频的插入与应用：asf格式、wmv格式使用mediaplayer进行播放，要不就是rm格式用RealPlayer播放。480*360 ，420*363,320*240WAV格式视频：插入媒体-ActiveX属性设置如图FLV格式视频：插入媒体-FLASH视频属性设置如图效果图：6.插入水平线。有时，但靠段落来区分文章是不够的，这时需要插入一条分隔线，使页面区分更鲜明。选择要插入的地方，然后选择对象面板里水平线按钮直接插入。可以通过属性面板来修改其的长宽，极其所在的位置。7.插入EMail 选择对象面板上的插入邮件按钮，输入文本与邮件地址。8.插入特殊符号四、超链接：超链接简介 超链接是WWW技术的核心，是网页中最重要、最根本的元素之一。超链接能够使多个孤立的网页之间产生一定的相互联系，从而使单独的网页形成一个有机的整体。（1）什么是超链接 所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。 按照链接路径的不同，网页中超链接一般分为以下3种类型： 内部链接、锚点链接和外部链接。如果按照使用对象的不同，网页中的链接又可以分为：文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等。 （2）合理安排超链接 合理安排超链接在网页的制作中是非常重要的。采用什么结构的链接会直接影响到网页的布局。 在这里给大家一些设计链接的建议。 避免孤立文件的存在：应该避免存在孤立的文件，这样能使将来在修改和维护链接时有清晰的思路。 在网页中避免使用过多的超级链接：在一个网页中设置过多超链接会导致网页的观赏性不强，文件过大。如果避免不了过多的超链接，可以尝试使用下拉列表框、动态链接等一些链接方式。 网页中的超链接不要超过4层：链接层数过多容易让人产生厌烦的感觉，在力求做到结构化的同时，应注意链接避免超过4层。 页面较长时可以使用书签：在页面较长时，可以定义一个书签，这样能让浏览者方便地找到想要的信息。设置主页或上一层的链接：有些浏览者可能不是从网站的主页进入网站的，设置主页或上一层的链接，会让浏览者更加方便地浏览全部网页。1.文字链接：链接硬盘上的文件：选中文字属性面板链接后的文件夹选择站点文件夹选择index文件（或者站点下的图片）保存F12（浏览）OK.2.图片链接 热点链接a. 选中-属性-设置链接地址b. 热点链接 ：建立热区，插入一新的图片属性面板地图：有三个热区，选择其中一个在图像上建立热区，设置热区属性；目标：_blank.链接：硬盘上图片或者其它有效地址。保存，F12浏览。c.插入交互式图象。插入交互式图象-鼠标经过图像选择原始图像，鼠标经过的图像，输入文本解释，链接地址，确定，并保存，F12浏览。3.网站链接：在页面上输入新浪网易等选中新浪属性面板链接后直接输入地址：，恩回车键CTRL+S存盘F12浏览效果。4.邮箱链接：给我联系联系我们选中文字属性面板链接后mailto:hyl1974.Ctrl+S存盘F12浏览效果.5.文件链接：WORD， PDF，文件下载6.创建空链接空链接是一个未指定目标的链接，Dreamweaver 的行为面板中列出了许多行为，这些行为相当于使用JavaScript编写的程序或函数，要想对文本设置行为，首先为文本建立空链接，这样行为才有效。 为文本建立超链接时，只要先在文档窗口选定文本，然后在属性面板中的“链接”栏中输入一个数值符“#”即可。建立空链接的目的就是为了应用行为，其他情况下不必建立空链接。7.创建锚点链接在一些内容很多的网页中，设计者常常在该网页的开始部分以网页内容的小标题作为超链接。当浏览者单击网页开始部分的小标题时，网页将跳到内容中的对应小标题上，免去浏览者翻阅网页寻找信息的麻烦。其实，这是在网页中的小标题添加了锚点，再通过对锚点的链接来实现的。锚点，也称为书签，用来标记文档中的特定位置，使用其可以跳转到当前文档或其他文档中的标记位置。在网页中加入锚点包括两方面的工作，一是在网页中创建锚点，另一个是为锚点建立链接。 创建锚点的步骤如下：将光标移到需要加入锚点的地方，一般是将光标放置在一行或是一段文字的开头部分；点击在弹出的对话框中输入相应的锚点名称。单击“确定”按钮。 执行完上述操作之后，则在光标处出现一个代表锚点的图标。 锚点命名要求： 只能使用字母和数字，锚点命名不支持中文。虽然在插入锚点对话框中能输入中文，但在属性面板上显示的则是一堆乱码，且在为锚点添加链接的时候，也无法工作。 锚点名称的第1个字符最好是英文字母，一般不要以数字做为锚点名称的开头。 锚点名称区别英文字母的大小写。 锚点名称间不能含有空格，也不能含有特殊字符。 链接锚点创建锚点后，还必须链接锚点。选择想要链接到锚点的文字或图片在属性面板中的“链接”文本框中，输入“#”和锚点名称。或者在属性面板中拖拽“指向文件”，移动鼠标到相应的锚点位置上。 在链接锚点时，应注意以下事项： 在#和锚点名之间不要留有空格，否则链接会失败。 符号#必须是半角符号，而不能为全角符号作业与练习：1 建立站点2 编辑站点下的文件3 如何实现图文混排？在DW里面首先在文本中间位置直接插入相应的图片,之后,设置图片属性框的 "对齐"选项.左对齐或右对齐，自己看效果教后小结：注意事项：1. 站点根文件夹不允许有汉字和标点符号，空格，只能是英文小写字母2. 所有的站点下文件名称不允许出现中文汉字，可以是字母或者数字，否则，在浏览器下页面不能正常显示。3. 每做一步，需要保存CTRL+S，浏览效果F124. 练习水平线和特殊字符的插入