动态网站制作指南 [  QQ表情  ]
[ 投票调查 ]
[ 企业邮箱 ]
[ 网站空间 ]
网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
ASP源码 | .Net源码 | PHP源码 | JSP源码 | JAVA源码 | CGI源码 | VB源码 | C++源码 | Delphi源码 | PB源码 | VF源码 | 汇编 | 服务器
电脑书籍下载:程序设计书籍 | 数据库教程书籍 | 平面与多媒体书籍 | 网络通讯书籍 | 系统管理书籍 | 网络安全书籍 | 认证考试书籍
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > Dreamweaver教程
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
文章搜索服务
邮件订阅
输入你的邮件地址,
你将不会错过任何关于:
[ Dreamweaver教程 ]的信息



本月文章推荐
.水平细线的几种制作方法.
.DreamweaverMX Ultradev探索(3-1).
.DreamwaverMX与ASP.NET(一).
.Dreamweaver构建Blog全程实录(9).
.Dreamweaver MX 2004设计留言本实.
.Dreamweaver构建Blog全程实录(4).
.Dreamweaver教程:Dreamweaver的.
.ASP.NET与DreamweaverMx结合.
.教你如何用dreamweaver制作滚动字.
.Dreamweaver超级技巧之文字特效.
.DreamweaverMX打造留言本(四).
.DreamwaverMX与ASP.NET(五).
.Ultradev实例教程:5 做一个相对简.
.用Dreamweaver 8 搞定“web标准”.
.Dreamweaver实例:随机播放背景音.
.Dreamweaver MX 2004从零开始(7).
.Dreamweaver技巧十二招.
.Dreamweaver CPU使用100%的解决方.
.Dreamweaver构建Blog全程实录(10.
.Dreamweaver如何制作浮动广告.

Dreamweaver:从网页模版切图到网页生成全攻略

发表日期:2006-4-9 |


  鉴于很多朋友问到如何切图这个问题,又鉴于这个问题可大可小,一两句话是绝对讲不清楚的,所以今天有空闲在家里就举一个简单的例子来说明这个问题吧!OK,让我们开始:

  step1:在PhotoShop中打开设计稿,如下图

 

  选择工具板上的slice切片工具,先大刀阔斧的切上一番!技巧: 大面积的色块单独切成一块,尽可能的保持在水平线上的整齐(这个问题你们在后面的制作页面中深有感触)切好的图如下所示:

  step2:在PhotoShop中选择file-save for web...来输出,这里要注意一些参数的选择:

  我们来看看红线所标识的1,2,3部分,将1所示的切片工具选中,然后点选2所示的图片,在3所示的地方选择色值,如果色彩单一可以选择尽量小的色值位;(为什么要这样??)答案:这样会大大减小文件的大小,同时又能比较好的保持图片的色彩;设置好后点OK输出文件,这里的文件包括了一个htm和images文件夹,如图:

  这里候你的页面才算完成了一半,接下来在Dreamweaver里建立站点:

  step3:定义站点:

  在图示左边的site name中为站点起一个名字,如example
然后在下面的local root folder中选择我们刚才导出的站点所以的文件夹;站点建好后在site map中我们看到:

  (为什么要建立站点?)建立站点可以使我们养成一种很好的习惯,就是把一个网站所包含的文件,文件夹有条理的放在一起,同时我们很容易的将这个站点移动到其它地方而不用对文件路径进行任何改写!(当然如果你实在不想建立站点也没人强求你,我在事际工作中就遇到这样的同事,没有习惯为页面建立站点,当然后果的要麻烦少少了)

  step4:重新制作页面表格(为什么?)通常在photoshop中直接导出的htm文件是不可以直接使用的,因为有些地方在实际运用时要作调整,比如有动态文字的地方,我们需要在页面中输入页不是使用图片,那么图片就要把它拿走,如果你在直接生成的htm中拿走不想要的图片再加上你想要的东西,你们发现页面将变得惨不忍睹,整个页面可能完全乱了套!
好了,先来分析一下导出的htm文件吧:


  根据这个页面表格所示,我们在新的页面中建立一个三行一列的表格:

  注意,把cellpadding,cellspacing,border三项值设为0,这个很重要;因为图片中我们不希望看到空隙和错位;然后再在第一行中插入一个三行两列的表格,并合并左边三列的表格,如图:

  插入表格的时个要注意对比原htm文件中的内容,思考为什么这样做;
接下来在第二行中插入一个二行二列的表格,按上面的方法合并左边的格子,并在右边格子的第一行插入一个一行五列的表格如图示:

  最后在下面一行插入一个三行二列的表格,并将图示中1,2外分别合并:


  最后得到的页面应该是这样的:

  好了,现在我们的任务就是往表格里面加图加内容了!这里就不再赘述了!(其实已经赘述得够多了!)

  还要提醒大家注意的是在加图片和内容时,表格单元格的align,valign这两个属性非常重要,要不遗余力的运用它们来帮你做事!OK,自己实践一下!


上一篇:ASP.NET与DreamweaverMx结合 人气:12433
下一篇:Dreamweaver:图片应用技巧 人气:15372
浏览全部Dreamweaver的内容 Dreamweaver插件下载 常用网页广告代码全集
  最新网站源码 最新软件下载
2008-7-5 360安全卫士 V4.2.0.1004
2008-7-5 PHPDug v2.0 多国语言版
2008-7-5 乘风电影程序 v3.69 (SQL)
2008-7-5 乘风电影程序 v3.69
2008-7-5 wfTextImage文字图像组件 v1.5
2008-7-5 ZY music! v1.1.0705
2008-7-5 FavShop网店系统 v1.0
2008-7-4 天空网络电影系统SKYUC v2.5.1 B
2008-7-4 Drupal v7.x-dev Build 080704
2008-7-5 AgileMessenger即时通讯工具 v1.
2008-7-5 GoodCalculator2.0版固件计算器
2008-7-5 RepoName源地址搜索工具 v1.21b
2008-7-5 AgileMessenger即时通讯工具 v1.
2008-7-5 TouchCopy多媒体管理软件 v3.13完
2008-7-5 VideosTone视频铃声 v1.1汉化破解
2008-7-5 TouchPad触摸板 v4.44破解版
2008-7-5 VideosTone破解补丁 v1.0
2008-7-5 Feeds GoogleReader客户端 v0.4.3


  发表评论
姓 名: 验证码:
内 容:
[ 汉字翻译拼音 ] [ 广告代码 ] [ 符号对照表 ] [ 进制转换 ] [ 经典小工具 ] [ 个税计算 ] [ 汉字简繁转换 ] [ 普通单位换算 ] [ 公制单位换算 ]
[ 生辰老黄历 ] [ 国内电话区号 ] [ 国家代码与域名缩写 ] [ 文字加密解密 ] [ 健康查询 ] [ 万年历 ] [ 手机号码查询 ] [ ip搜索 ] [ Google PR查询 ]
业务联系 | 广告刊登 | 频道合作 | 投稿荐稿 | 联系方式 | 加入收藏 | RSS订阅
Copyright © 2000-2008 www.knowsky.com All rights reserved | 网络实名:动态网站制作指南 | 沪ICP备05001343号
ホームページ制作 不動産検索システム 求人情報