《dreamweaver设计指南》由会员分享，可在线阅读，更多相关《dreamweaver设计指南（32页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver 设计指南1 .DreamWeaver简介Dreamweaver是可视化的网页开发工具，利用它可 以轻而易举地制作出跨越平台和浏览器限制的网页。提供的“所见即得”的友好编辑功能，能编写ASP、 JSP、CFML甚至PHP程序，从而创建动态网站系统。n 1 .1 工作界面由两个部分组成，即页面编辑器和站点管理器。 1.1.1 页面编辑器分为五个部分：菜单栏、工具栏、控 制面板、文件工作区、状态栏。其中控制面板有属性面 板、对象面板、样式面板、帮助面板等。站点管理器的构成站点管理器左侧窗口显示了站点地图，右 侧窗口显示了当前网站中的文件列表。一般 来说，在做站点时应先建立好站
2、点，再开始 网页的制作，这样可以保证页面内文件链接 的正确性。网站的制作流程整个网站的制作流程：在Photoshop或者Fireworks中作出效果图 切图在Dreamweaver中添加文字，定义样式 。 使用Dreamweaver制作静态站点的流程：站点文件夹命名新建站点创建首页文件 定义页面属性插入表格定义页面大小 添加内容插入导航条添加链接定义及应 用CSS添加动态交互链接站点各个页面。需要掌握的技术l1 分析站点的方法l2 使用模板l3 表格的应用技巧l4 在代码视图设计l5 实用的代码片断l6 层和时间轴l7 使用颜色l8 库 以上是一个静态网站建设流程和需要掌握的技术。第2节 创建
3、站点2.1 创建本地站点2.1.1利用建站向导构建站点；2.1.2利用增强方式构建站点； 2.2 管理站点内容2.2.1 打开本地站点；2.2.2 编辑站点属性；2.2.3 操作站点文件； 2.3 文件的上传与下载本地站点的建立l步骤： 在本地硬盘盘新建一个文件夹 在Dreamweaver中定义站点 新建文件和文件夹 给文件和文件夹命名。共用资源文件夹共用资源文件夹分用资源文件夹分用资源文件夹设计首页文件l在文件命名和站点结构方面，养成良好的习 惯很重要。 首页默认的文件名，取决于申请的主页空 间，一般是index.htm,index.html,default.htm等 。同类型的文件，最好放
4、在一个文件夹中，例 如把图片文件，都放在image文件夹中。把一 个栏目的所有文件放在一个文件夹中，在链接 网页和维护时，会很方便。文件和文件夹的命 名，可以用栏目名称的拼音或英文，团队开发 时，有统一的命名规则相当重要。例如论坛这 个栏目的命名都是用bbs名称。设置页面属性l“页面属性”对话框让您可以指定页面的默认 字体家族和字体大小、背景颜色、边距、链 接样式及页面设计的许多其他方面。您可以 为创建的每个新页面指定新的页面属性，也 可以修改现有页面的属性l默认情况下，Dreamweaver 使用 CSS（层 叠样式表）设置文本格式。l颜色决定了一个网站在美工方面是否成功。 DW提供了强大的
5、颜色选取功能。可以精确定 义只要是网页设计中成立的颜色。流行的网页 设计配色，采用黑、白、灰这些无彩色作基调 ，采用一种精确的有彩色作为主色调，大多使 用一种颜色的渐变，让人感觉只有一种有彩色 。l跟踪图像的使用版式设计l常用版式（分栏 结构）：lLOGO（标志）lBanner（横幅）l导航栏l导航菜单l网页内容l版权声明。 常见的分栏结构，还有三分栏，四 分栏。下面是一个三分栏的结构Logo和Banner的行业规范lLOGO: 8831， 120*90，120*60也是小 图标的标准尺寸 。lBanner：46860(全尺寸Banner)， 23460（半尺寸按钮）。l每个非首页静态页面含图
6、片字节不超过60K ，全尺寸banner不超过14K 。l实际中尺寸并不受标准的限制。常见的 LOGO在页面的左上方，Banner在页面的右 上方。页面布局用表格l打开“插入表格”对话框，设置行数为1，列 数为1，宽度选776像素，边框为0 。l做一个在800600分辨率下满屏幕显示的页 面，可以选择一个近似的值：“宽768高430” ，“宽776高434”等。用像素为单位的表格， 大多是把表格设置为居中对齐。选中表格， 在属性面板选择对齐方式为居中对齐。 使用布局表格注意事项：l只有完全下载一个表格的内容，才能在IE中 显示出来。l如果页面文件小，可以只有一个表格放内 容。如果页面文件很大，
7、可以从上到下放几 个宽度相同的表格，分别放不同的内容，这 样就会一个一个显示表格里面的内容，不用 等整个网页的内容下载完。 第3节 插入表 格 3.1 插入表格lCell padding (单元格边框):单元格内 容与单元格内边缘之间的像素数。lCell spacing (单元间距):单元格之间 的距离l对话框将保留输入值作为以后插入表 格的默认值3.2 表格及其元素的基本操作3.2.1选择表格及其元素p选择整个表格： u 单击单元表格左上角（十字光标）.或在表 格的右边缘及下边缘.或单元格内边框的任何地 方单元（平行线光标） u 修改表格选择表格 u 选 标签 p选择单元格 Ctrl+鼠标单
8、击；html标签。p调整表格的单元格大小 调整表格大小时，所有单元格按比例改变 大小。 方法：选择表格，拖动一个选择手柄。p改变行或列的大小 上下拖动行的底边线；左右拖动列的右边 线p添加行或列 菜单；修改 表格插入行或列p删除行或列 见菜单p分割与合并p剪切、复制、粘贴单元格 选定的单元格必须组成矩形才能被剪切或 复制； 若被选择的单元格组成了表格的某些行或 列，剪切会把选中的行或列也删除，否则近删 除单元格内容和格式note 若粘贴单元格，只要剪切板中的内容于选 定单元格兼容，目标单元格内容将被替换p只删除单元格内容执行以下操作p1选定单元格p2菜单编辑清除 或按Delete键p2.7输入
9、文字或插入其它对象p2.8自动套用表格格式 1选定表格 2菜单“命令”格式化表格 p排序 选定表格 命令排序表格 3.设置表格及其元素属性第4节 文本与样式p4.1键入文本 插入特殊字符l“文本”面板中的对应按钮 输入空格lCtrl+Shift+Space，实际是在代码中自动添加了代 码 。l中文全角模式 添加段落换行： 按 Enter 键 。实际上在文字前后加了标签。 插入日期l“常用”面板上的插入日期按钮 ，可选“储存时自动更新” 插入列表l 1选中文本（或光标至于段落中）l 2属性检查器上 “无序/有序列表按钮”p4.2设置文本属性 定义格式（属性检查器“格式“下拉列表 ）l定义段落 l
10、 设置标题l 预定义（pre） 为字符设置字体 设置选定文本的超级链接l直接键入URLl单击文件夹图标选定页面l拖动“指定文件”图标指向站点窗口中文件lshife+鼠标拖动文件站点窗中的文件插入图像l在网页中插入一幅图片时，图片文件必须 位于当前站点中*。l在对象面板中选择插入图片图标，此时系 统将打开“选择图像源文件”对话框。找到需 要插入的图片文件。lDreamWeaver支持常用的网页图片格式有 扩展名为GIF、JPG、JPEG、PNG的图像文件。插入鼠标变换图片该图片对象的特点是当鼠标经过该图片时， 图片内容会自动更新。实际上，它是由两幅图 片组成的，一幅为主图片，显示在页面中；一 幅
11、为滚动图片，当鼠标经过图片所在区域时显 示。单击对象面板中的图标，或者选择【插入 】菜单的【图像对象】- 【鼠标经过图像】命 令可实现该操作。创建图片热点在插入的图片上，可以是交换式图片， 可以把图片分为若干个区域，每个区被称 为“热点”，可以为每个热点指定相关的链 接。当单击某个热点时，系统显示相关的 网页。当绘制完热区后，属性面板会显示 热区的属性。还可以调整热点区尺寸。常用代码：加入收藏夹l 加入收藏常用代码：设本站为首页l将本站设为首页网页上的光标可以改变吗？ l定义css样式，改变“扩展 ”视觉效果光标中的选 项就改成相应的鼠标样式了 。或在需要改变鼠标样式的 地方方插入:style
12、=“cursor: 鼠标样式“ lauto 自动改变样式 lcrosshair 精确定位“+“ ldefault 默认指针 lhand 手形 lmove 移动le-resize 箭头朝右方 lne-resize 箭头朝右上方lnw-resize 箭头朝左上方 ln-resize 箭头朝上方 lse-resize 箭头朝右下方 lsw-resize 箭头朝左下方 ls-resize 箭头朝下方 lw-resize 箭头朝左方 ltext 文本“I”形 lwait 等待 lhelp 帮助把光标变成自定义的光标lIE6支持自定义cursor 语法格式： cursor:url(图标) /cur或是ani文 件. cur就是WINDOWS中的光标(cursor)文件。 ani是WINDOWS中的动画光标（图标）文件 。 如：.body cursor:url(006.ani)照片背景l把自己或朋友的照片作为页面的背景让大家看到，是有点 令人激动的事情，但浏览器对图片的自动重复排列却使这一 愿望难以实现。这里我们在网页文件的 之间加入下面的CSS语句:l l l如何隐藏状态栏里出现的LINK信息?l请使用如下代码： 赵明炬的主页
