网站规划与设计课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,Dreamweaver,Dreamweaver 是美国MACROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。,8/8/2024,4,DreamweaverDreamweaver 是美国MAC,简介,Dreamweaver、FLASH 以及在DREAMWEAVER 之后推出的针对专业网页图像设计的FIREWORKS，三者被MACROMEDIA 公司称为DREAMTEAM(梦之队)，足见市场的反响和MACROMEDIA 公司对它们的自信。说到DREAMWEAVER 我们应该了解一下网页编辑器的发展过程，随着互联网(Internet)的家喻户晓，HTML 技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD 中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点.,8/8/2024,5,简介Dreamweaver、FLASH 以及在DREAMW,Dreamweaver优点,1最佳的制作效率Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。,8/8/2024,6,Dreamweaver优点1最佳的制作效率Dre,2网站管理 使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。,8/8/2024,7,2网站管理 使用网站地图可以快速制作网站雏形、设计,3无可比拟的控制能力 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，Cold Fusion，iCAT，Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。,8/8/2024,8,3无可比拟的控制能力 Dreamweaver是唯,Dreamweaver缺点,一、难以精确达到与浏览器完全一致的显示效果。也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来；,8/8/2024,9,Dreamweaver缺点一、难以精确达到与浏览器完全一,二、页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的HTML代码 都在您的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干净、准确的HTML代码，又具备则见则所得的高效率、直观性，一直是网页设计师梦想。在DREAMWEAVER之前，FRONTPAGE98一直被人们认为是最好的所见即所得网页编辑器，但是它同样继承了所见即所得的种种劣性。,8/8/2024,10,二、页面原始代码的难以控制性，比如您在所见即所得编辑器中制,规划站点,1.站点规划的规则,2.建立本地站点,3.站点导入导出复制删除,8/8/2024,11,规划站点1.站点规划的规则8/20/202311,一站点规划的规则,一般来说，在规划站点结构时，应该遵循以下一些规则。,(1).文档分类保存,如果一个复杂站点，它有很多文件，我们必须使用分类保存是它更清晰。,(2).合理地命名文件名称,为了方便管理，文件夹和文件的名称最好要有具体的含义。,(3).本地站点与远程站点结构统一,为了方便管理，在设置本地站点时，应该将本地站点与远程站点的结构设计保持一致。,8/8/2024,12,一站点规划的规则一般来说，在规划站点结构时，应该遵循以下,二建立本地站点,在建立站点之前，我们要知道所有的文件夹、资源和特定的文件都包含在站点中。因此，首先在硬盘上建立一个新文件夹作为本地根文件夹，用来存放相关文档。如在F 盘根目录下创建一个名为MyWeb 的文件夹，在MyWeb 文件夹里再创建一个名为images 的文件夹，用来存放网站中甬道的图象文件。,(1).给站点起个名字，网址无所谓,(2).不适用任何服务器端技术,(3).选择本地的副本,(4).网络连接不需要,(5).完成站点定义,(6).定义默认图像文件夹(以后的图片均会自动存在这里),也可以使用高级定义站点，更加的方便。,8/8/2024,13,二建立本地站点 在建立站点之前，我们要知道所有的文,三导入和导出与复制删除站点,a)站点导入、导出,b)站点复制、删除,c)注意：不要删除了站点源副本,8/8/2024,14,三导入和导出与复制删除站点a)站点导入、导出8/20/,插入图片,1.插入图像,a)在常用工具栏点击图象按钮，插入。或者菜单插入图象,b)点击属性设置图象属性,2.图像占位符,3.交互式图像,4.图像背景,8/8/2024,15,插入图片1.插入图像8/20/202315,插入图片,1.插入图像,2.图像占位符,当用户制作网页时，在页面某个位置需要插入一幅图片。但一时找不到自己喜欢合适的图片，这就需要用到Dreamweaver8 的占位符功能。图象占位符并不是在浏览器中显示的最终图象，它知识一种临时的、替补的图形。用户不仅可以设置图象占位符的大小和颜色，还可以为图象占位符号提供文本标签。插入图像占位符-找到替换的替换掉,3.交互式图像,4.图像背景,8/8/2024,16,插入图片1.插入图像8/20/202316,插入图片,1.插入图像,2.图像占位符,3.交互式图像,用于创建交互式图象的两幅图象大小必须相同。否则交换的图象再显示时会进行压缩或展开以适应原有图象的大小，这样容易造成图象的失真。在网页中使用交互式图象，可是网页更生动。插入鼠标经过图像-选择原始图像和经过图像,4.图像背景,8/8/2024,17,插入图片1.插入图像8/20/202317,插入图片,1.插入图像,2.图像占位符,3.交互式图像,4.图像背景,在Dreamweaver 中，设置网页背景有两种方法：一种时设置背景颜色，另一种时设置背景图象。,修改-页面属性（Ctrl+J）,8/8/2024,18,插入图片1.插入图像8/20/202318,插入图片,1.插入图像,a)在常用工具栏点击图象按钮，插入。或者菜单插入图象,b)点击属性设置图象属性,2.图像占位符,3.交互式图像,4.图像背景,8/8/2024,19,插入图片1.插入图像8/20/202319,表格应用,1.创建表格,2.表格的应用,a)存放文本,b)存放图片,3.选定表格、行、列、单元格元素,4.设置表格、行列、单元格属性,5.添加和删除行或列,6.单元格的合并及拆分,8/8/2024,20,表格应用1.创建表格8/20/202320,表格应用,1.创建表格,2.表格的应用,3.选定表格、行、列、单元格元素,在对表格元素进行操作之前，必须先选定表格元素。,(1).选定整行,(2).选定整列,(3).选定整个表格；修改-表格-选择表格，左上右下角，点击标签,4.设置表格、行列、单元格属性,5.添加和删除行或列,6.单元格的合并及拆分,8/8/2024,21,表格应用1.创建表格8/20/202321,超级链接,1.什么是URL,2.路径,3.创建各种超链接,8/8/2024,22,超级链接1.什么是URL8/20/202322,超级链接,超级链接是指站点内不同网页之间，站点与Web 之间的链接关系。它可以使站点内的网页成为有机的整体，还能够使不同站点之间建立联系。超级链接由两部分组成：链接载体(源端点)和链接目标（目标端点）。,一个完整的主页是由多网页文档构成的，这些网页文档是分别独立的，而将这些独立的网页文档联系起来的组带，就是超级链接。超级链接的目标可以是另外一个网页，页可以是同一网页的不同位置。,8/8/2024,23,超级链接超级链接是指站点内不同网页之间，站点与Web 之间的,超级链接,1.什么是URL,URL 中文翻译为统一资源定位器。URL 是Internet 上用来描述信息资源的字符串。一个URL 分为3 个部分：协议代码，装由所需文件的计算机地址和主机资源的具体位置。,scheme:/host:post/path/filename,scheme 指的是http,ftp,file,mailto,news,gopher,telnet 七种,host 指的是IP 地址或计算机名称,post 指的是服务器端口,path 指的是文件路径,filename 指的是文件名,:80/index.php,8/8/2024,24,超级链接1.什么是URL8/20/202324,超级链接,路径,创建超级链接时必须了解链接与被链接的路径。在一个网站中，路径通常由3 种表达方式：绝对路径，根目录相对路径，文档目录相对路径。,(1)绝对路径:c:/windows/index.htm,(2)根目录相对路径：/web/index.htm,(3),文档目录相对路径：index.htm,8/8/2024,25,超级链接路径8/20/202325,超级链接,创建各种超链接,(1).网页与网页的连接。,(2).与互链网链接,(3).电子邮件链接,(7).FTP 链接,(4).创建空链接,(5).下载链接,(6).锚记链接,8/8/2024,26,超级链接创建各种超链接8/20/202326,表单,表单由两个重要组成部分组成：一时描述表单的HTML 源代码；二时用于处理用户在表单中输入信息的服务器应用程序客户端脚本，如JSP，ASP.net 等。下面主要向大家介绍了表单的使用，希望读者通过对内容的学习，了解表单的组成，掌握表单与表单对象的创立。,8/8/2024,27,表单表单由两个重要组成部分组成：一时描述表单的HTML 源代,表单,1 表单的创建及修改,(1).执行插入-表单或者表单快捷面板,(2).修改表单,8/8/2024,28,表单1 表单的创建及修改8/20/202328,表单,2,创建表单对象,Dreamweaver 表单可以包括标准表单对象。Dreamweaver 中的表单对象有文本域，文本,区域，输入框，按纽，图象域，复选框，跳转彩单等等。,在创建表单之前，必须创建表单区域，将所有的表单对象放入其中,(1).文本域插入文本域,(2).插入多行文本域,(3).插入密码域,(4).复选框,8/8/2024,29,表单2创建表单对象8/20/202329,表单,(5).单选按纽,(6).列表和菜单,(7).图象域,(8).表单按纽,(9).标签,(10).字段集,8/8/2024,30,表单(5).单选按纽8/20/202330,框架,一使用预设的框架集,(1).插入-HTML-框架,(2).快捷面板-布局-框架,二使用自定义框架,(1).查看-可视化助理-框架边框,三框架的基本操作,(1).直接拖动边框即可实现增加框架页面,(2).反之也可以删除框架页面,(3).按住Alt+Shift 可以可以选择其中一个框架页操作,8/8/2024,31,框架一使用预设的框架集8/20/202331,