下载首页 | 资讯中心 | 下载分类 | 最近更新 | 排 行 榜 | 国产软件 | 国外软件 | 汉化补丁 |
文章搜索: 分类 关键字 收藏本站设为首页
您的位置:首页网页制作网页制作 → Dreamweaver 入门:创建基于表格的页面布局__教程
Dreamweaver 入门:创建基于表格的页面布局__教程
日期:2007-1-6 11:09:06 人气:130     [ ]
上一页 [1] [2] [3] [4] [5] 下一页
 

本文章介绍如何在 Macromedia Dreamweaver 8 中创建基于表格的页面布局。页面布局将确定您的页面在浏览器中会如何显示,例如,显示菜单、图像和 Macromedia Flash 内容将如何放置。表格是用于在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。您可以使用表格快速轻松地创建布局。在本教程中,您将在一个新的 Dreamweaver 文档中创建若干表格。这些表格的行和单元格实际上用作您将在以后添加的内容的"容器框"。

检查设计草样

通常,创建 Web 站点并不是以打开 Dreamweaver 并立即对页面进行布局开始的。创建 Web 站点的初始工作从纸张或图形编辑应用程序(如 Macromedia Fireworks)开始。图形设计人员通常会画出 Web 站点综合图形的草图(也称为"草样"),以便向客户展示并确保站点的初始构思能让客户满意。

设计草样由客户要求其 Web 站点具有的任意数目的页面元素组成。例如,客户可能会提出:"页面顶端要有徽标,要有能链接到其它页面的导航功能,有用于联机存储的部分和可以插入视频剪辑的位置。"根据这些讨论,设计人员开始对站点布局进行规划,并制作满足客户要求的示例页面草图。

本教程向您提供为 Cafe Townsend(一个需要制作 Web 站点的虚构餐馆)设计的、完整的和符合要求的设计草样。作为 Web 设计人员,您需要对草样进行转换,使之最终形成可以使用的 Web 页面(通常需要其他图形设计人员与 Flash 开发人员的帮助)。

您可以看到,图形设计人员已经向您提供了 Web 页面设计草样,其中包括一些内容区域和图形方案。在下面的部分,您将使用 Dreamweaver 展示此设计。

您也可以打开原始草样文件以便在计算机屏幕上查看该设计草样。可以在 cafe_townsend 文件夹(在教程:设置站点和项目文件中已将该文件夹复制到了硬盘上)的 fireworks_assets 文件夹中找到设计草样 homepage-mockup.jpg。在创建页面时,还可以打印草样以便随时查看。

创建并保存新页面

建立站点并检查设计草样后,您就可以开始创建 Web 页面了。首先您将创建一个新页面,并将它保存到您的 Web 站点的本地根文件夹 cafe_townsend 中。该页面最终将成为虚构餐馆 Cafe Townsend 的主页。

如果您尚未创建本地根文件夹 cafe_townsend,则必须先完成创建,然后再继续。

在 Dreamweaver 中,选择"文件">"新建"。

在"新建文档"对话框的"常规"选项卡上,从"类别"列表中选择"基本页",从"基本页"列表中选择"HTML",然后单击"创建"。

选择"文件">"另存为"。

在"另存为"对话框中,浏览至定义为站点的本地根文件夹的 cafe_townsend 文件夹并打开该文件夹。

在教程:设置站点和项目文件中,您在名为 local_sites 的文件夹中创建了此文件夹。

在"文件名"文本框中输入 index.html,然后单击"保存"。

文件名即出现在应用程序窗口顶部的标题栏中。

在新文档顶部的"文档标题"文本框中,键入 Cafe Townsend。

这就是页面的标题(与文件名不同)。站点访问者在 Web 浏览器中查看页面时将在浏览器窗口的标题栏中看到此标题。

选择"文件">"保存"来保存该页面。

[page_break] 

插入表格

接下来,您将添加一个表格,用于放置文本、图形和 Macromedia Flash 资源。

在页面上单击一次,在页面左上角放置插入点。

选择"插入">"表格"。

在"插入表格"对话框中,执行下面的操作:

在"行数"文本框中,输入 3。

在"列数"文本框中,输入 1。

在"表格宽度"文本框中,输入 700。

在"表格宽度"弹出式菜单中,选择"像素"。

在"边框粗细"文本框中,输入 0。

出处:本站原创 作者:佚名
 阅读排行
01.精美qq空间横幅代码
02.最酷qq个性女生网名
03.最新又有免费QQ秀啦《..
04.巧用透明FlaSh扮靓你的..
05.花之神匠代码(最新代码..
06.最新QQ空间免费导航
07.最新免费个人形象设置..
08.最新qq空间flash代码m..
09.CSS技术结合图像实现动..
10.Photoshop光影魔术师:..
11.QQ音速种子狂刷
12.最新QQ空间透明代码
13.PS实例教程:教你制作结..
14.Photoshop光影魔术师:..
15.制作背景图__教程
16.用Photoshop制作漂亮的..
17.如何获得QQ音速种子
18.≤QQ空间代码≥在日志..
19.网页浮动广告的制作代..
20.用Photoshop制作大红灯..
21.常用CSS
22.Photoshop给靓丽美女打..
 推荐文章
·Photoshop 表现技法之..
·快速将你的相片矢量化..
·PHOTOSHOP制作炽热的太..
·用Photoshop制作美丽的..
·流行杀手的娃娃工厂__..
·打造8号台球__教程
·PHOTOSHOP制作待机MM图..
·用Photoshop帮MM做纹身..
·PHOTOSHOP美眉着色绝招..
·PHOTOSHOP花露的制作_..
·PHOTOSHOP渐变工具的巧..
·PHOTOSHOP手绘奥兰多-..
·高难度抠图两种方法__..
·Photoshop高尔夫球的制..
·Photoshop打造精美玉佩..
Eqxia_COM下载站 版权所有 Copyright© 2001-2005 Www.eqxia.COM, All Rights Reserved.