Dreamweaver设计指南.pptVIP

Dreamweaver 设计指南 1 .DreamWeaver简介 Dreamweaver是可视化的网页开发工具，利用它可以轻而易举地制作出跨越平台和浏览器限制的网页。 提供的“所见即得”的友好编辑功能，能编写ASP、JSP、CFML甚至PHP程序，从而创建动态网站系统。 1 .1 工作界面 由两个部分组成，即页面编辑器和站点管理器。 1.1.1 页面编辑器分为五个部分：菜单栏、工具栏、控制面板、文件工作区、状态栏。其中控制面板有属性面板、对象面板、样式面板、帮助面板等。 站点管理器的构成 站点管理器左侧窗口显示了站点地图，右侧窗口显示了当前网站中的文件列表。一般来说，在做站点时应先建立好站点，再开始网页的制作，这样可以保证页面内文件链接的正确性。 网站的制作流程 整个网站的制作流程： 在Photoshop或者Fireworks中作出效果图→切图→在Dreamweaver中添加文字，定义样式。 使用Dreamweaver制作静态站点的流程： 站点文件夹命名→新建站点→创建首页文件→定义页面属性→插入表格→定义页面大小→添加内容→插入导航条→添加链接→定义及应用CSS→添加动态交互→链接站点各个页面。 需要掌握的技术 1　分析站点的方法 2　使用模板 3　表格的应用技巧 4　在代码视图设计 5　实用的代码片断 6　层和时间轴 7　使用颜色 8　库 以上是一个静态网站建设流程和需要掌握的技术。 第2节 创建站点 2.1 创建本地站点 2.1.1利用建站向导构建站点； 2.1.2利用增强方式构建站点； 2.2 管理站点内容 2.2.1 打开本地站点； 2.2.2 编辑站点属性； 2.2.3 操作站点文件； 2.3 文件的上传与下载 本地站点的建立 步骤： 在本地硬盘盘新建一个文件夹 在Dreamweaver中定义站点 新建文件和文件夹 给文件和文件夹命名。 设计首页文件 在文件命名和站点结构方面，养成良好的习惯很重要。 首页默认的文件名，取决于申请的主页空间，一般是index.htm,index.html,default.htm等。同类型的文件，最好放在一个文件夹中，例如把图片文件，都放在image文件夹中。把一个栏目的所有文件放在一个文件夹中，在链接网页和维护时，会很方便。文件和文件夹的命名，可以用栏目名称的拼音或英文，团队开发时，有统一的命名规则相当重要。例如论坛这个栏目的命名都是用bbs名称。 设置页面属性 “页面属性”对话框让您可以指定页面的默认字体家族和字体大小、背景颜色、边距、链接样式及页面设计的许多其他方面。您可以为创建的每个新页面指定新的页面属性，也可以修改现有页面的属性 默认情况下，Dreamweaver 使用 CSS（层叠样式表）设置文本格式。 颜色决定了一个网站在美工方面是否成功。DW提供了强大的颜色选取功能。可以精确定义只要是网页设计中成立的颜色。流行的网页设计配色，采用黑、白、灰这些无彩色作基调，采用一种精确的有彩色作为主色调，大多使用一种颜色的渐变，让人感觉只有一种有彩色。 跟踪图像的使用 版式设计 常用版式（分栏结构）： LOGO（标志） Banner（横幅） 导航栏 导航菜单 网页内容 版权声明。 常见的分栏结构，还有三分栏，四分栏。下面是一个三分栏的结构 Logo和Banner的行业规范 LOGO: 88×31， 120*90，120*60也是小图标的标准尺寸 。 Banner：468×60(全尺寸Banner)，234×60（半尺寸按钮）。 每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K 。 实际中尺寸并不受标准的限制。常见的LOGO在页面的左上方，Banner在页面的右上方。 页面布局用表格 打开“插入表格”对话框，设置行数为1，列数为1，宽度选776像素，边框为0 。 做一个在800×600分辨率下满屏幕显示的页面，可以选择一个近似的值：“宽768高430”，“宽776高434”等。用像素为单位的表格，大多是把表格设置为居中对齐。选中表格，在属性面板选择对齐方式为居中对齐。 使用布局表格注意事项： 只有完全下载一个表格的内容，才能在IE中显示出来。 如果页面文件小，可以只有一个表格放内容。如果页面文件很大，可以从上到下放几个宽度相同的表格，分别放不同的内容，这样就会一个一个显示表格里面的内容，不用等整个网页的内容下载完。 第3节 插入表 格 3.1 插入表格 Cell padding (单元格边框):单元格内容与单元格内边缘之间的像素数。 Cell spacing (单元间距):单元格之间的距离 对话框将保留