当前位置:首页> 正文
Dreamweaver教程: 填充页面内容
Dreamweaver教程: 填充页面内容
在向网页填充内容之前,需要准备素材,包括网站的LOGO,Banner,图片,Flash动画,各种按钮,声音文件,用于布局参考的参考图像。把这些内容复制到站点中。教程的实例是把图片复制到站点中的images文件夹,参考图像复制到image文件夹。
简明步骤:准备各种素材复制到站点中→设置页面的跟踪图像→插入表格确定尺寸→布局→从资源面板中把资源拖到页面。
用Fireworks制作一个页面的效果图,或者用一个已经存在的页面做布局的参考。打开本教程示范站点media,打开index.html,设置页面属性,选择跟踪图像,点游览按钮。
选择跟踪图像,这个跟踪图像,是已经做好的图像。也可以是其它网站页面的截图。如果觉得跟踪图像太亮,可以调整跟踪图像的透明度,当透明度为0%时,跟踪图像就看不到了,百分比越小,跟踪图像越不明显。建议设置为50%以下,以便和页面内容区别。
设置了跟踪图像的页面如下图。跟踪图像并不在最终的页面中出现,仅仅是在设计中起辅助作用。
插入一个宽为768的图像,选中这个表格,设置这个表格为居中对齐。
在"查看"菜单,选择"跟踪图像"子菜单,再选择"对齐所选范围",使跟踪图像和表格对齐。
转换到布局选项卡,点"绘制布局表格",在页面参考跟踪图像布局。从上到下,一行一行的画好整个页面的表格。
点"绘制单元格按钮",在布局表格里面绘制单元格。
一个页面做好布局之后,再打开页面属性,图像透明度设置为10%,就可以填充内容了。
打开资源面板,把相应的资源拖到布局单元格中。
在拖放的过程中,会出现选择对话框。可以输入替换文本和链接。
按照这种方法把素材放到页面中。Flash素材可以用类似的方法。文字部分可以手工输入或者从一个文本中复制到单元格中。一个页面的内容就填充好了。
展开全文阅读
相关内容
-
Dreamweaver CC教程:更改窗口大小弹出菜单中列出
Dreamweaver CC教程:更改窗口大小弹出菜单中列出的值,窗口大小...
-
Dreamweaver CC教程:“开始”工作区
Dreamweaver CC教程:“开始”工作区,工作区,教程,显...
-
Dreamweaver CC教程:调整“文档”窗口
Dreamweaver CC教程:调整“文档”窗口的大小,调整,...
-
Dreamweaver CC教程:“文档”窗口概述
Dreamweaver CC教程:“文档”窗口概述,文档,窗口,实...
-
Dreamweaver CC教程:工作区概述
Dreamweaver CC教程:工作区概述,工作区,教程,工具栏,视图,文档...
-
Dreamweaver CC教程:在视图之间切换
Dreamweaver CC教程:在视图之间切换,视图,教程,拆分,选项,选择...
-
Dreamweaver CC教程:显示选项卡式文档|仅在 Mac
Dreamweaver CC教程:显示选项卡式文档|仅在 Mac 上,选项,文档,...
-
Dreamweaver CC教程:重新排列面板
Dreamweaver CC教程:重新排列面板,区域,图标,浮动,教程,排列,...
-
Dreamweaver CC教程:CSS Designer
Dreamweaver CC教程:CSS Designer,属性,文档,媒体查询,教程,选...
-
Dreamweaver CC教程:上下文菜单
Dreamweaver CC教程:上下文菜单,上下文菜单,教程,单击,对象,视...
-
Dreamweaver CC教程:状态栏概述
Dreamweaver CC教程:状态栏概述,状态栏,显示,单击,教程,标签,...
-
Dreamweaver CC教程:插入对象
Dreamweaver CC教程:插入对象,对象,教程,标签,编辑器,视图,文...
-
Dreamweaver CC教程:编辑“插入”面板
Dreamweaver CC教程:编辑“插入”面板首选参数,教程...
-
Dreamweaver CC教程:“文件”面板概述
Dreamweaver CC教程:“文件”面板概述,文件,教程,执...
-
Dreamweaver CC教程:工具栏概述
Dreamweaver CC教程:工具栏概述,工具栏,教程,选项,自定义,视图...