网页制作技巧:从切图到网页生成全攻略

  鉴于很多朋友问到如何切图这个问题,又鉴于这个问题可大可小,一两句话是绝对讲不清楚的,所以今天有空闲在家里就举一个简单的例子来说明这个问题吧!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,自己实践一下!

时间: 2024-10-29 15:30:42

网页制作技巧:从切图到网页生成全攻略的相关文章

恶意网页之注册表后门—注册表使用全攻略之十九_注册表

恶意网页之注册表后门-注册表使用全攻略之十九 浏览器顽固不改, 修改注册表成功,重新启动后又恢复到被修改的状态 主要是修改注册表后留后门,目的让你修改注册表好像成功,重新启动后又恢复到被修改的状态. 这主要是在启动项里留了后门,大家可以打开注册表到 HKCU\Software\Microsoft\Windows\CurrentVersion\Run HKCU\Software\Microsoft\Windows\CurrentVersion\RunOnce HKCU\Software\Micro

四大技巧八大区域开店选址好全攻略

核心提示:正确选择店址,是开店赚钱的首先条件.一个经营项目很好的店铺,若选错了店址,那小则影响生意兴隆,大则还可能导致"关门大吉".因此,开店选址很重要,这一步走得对与否,决定了日后店铺的赚与赔. 常有创业者抱怨,项目确定了,资金到位了,合作人找好了,万事具备,只欠落实店铺这股"东风"了.特别对初次开店的创业者来说,要在短时间内找到地段.租金等各方面都合适的店铺,真是难上加难.那么,如何寻找创业的这份"黄金宝地"呢? 近来年,随着市场需求的增速,

Linux下Makefile的automake生成全攻略_unix linux

文/余涛 作为Linux下的程序开发人员,大家一定都遇到过Makefile,用make命令来编译自己写的程序确实是很方便.一般情况下,大家都是手工写一个简单Makefile,如果要想写出一个符合自由软件惯例的Makefile就不那么容易了. 在本文中,将给大家介绍如何使用autoconf和automake两个工具来帮助我们自动地生成符合自由软件惯例的Makefile,这样就可以象常见的GNU程序一样,只要使用"./configure","make","ma

巧妙运用Dreamweaver进行网页制作技巧

dreamweaver|技巧|网页 巧妙运用DW进行网页制作技巧--熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style.虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同. 1.灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用

网页制作技巧24条

01.让背景图不滚动 IE浏览器支持一个 Body 属性 bgproperties,它可以让背景不滚动: 〈Body Background="图片文件" bgproperties="fixed"〉 02.让你的网页无法另存为 <noscript><iframe alt=网页制作技巧24条 src=*></iframe></noscript> 03.让IFRAME框架内的文档的背景透明 <iframe alt=网页

CSS网页制作技巧:IE浏览器下li的默认高度问题

文章简介:CSS网页制作技巧:IE浏览器下li的默认高度问题. 昨天,在家打开IE7浏览器看"视频导航网"的时候,发现居然有排版错误. 用F12开发者工具看了下,发现 li 的默认高度既然不统一? 用工具看了下,发现火狐高度解析统一为33px,而IE7解析高度根据字的不一样,默认解析的高度为30px,纯数字的解析高度为31px;中英文组合的解析高度为32px; 解决方法一:给LI设置高度后,IE7正常了,但IE6问题依然存在.原来,LI里面还嵌套着A标签,给A也设置一个高度后问题解决.

CSS网页制作技巧:兼容主流浏览器的背景颜色透明

文章简介:CSS网页制作技巧:兼容主流浏览器的背景颜色透明. 以前都是用jquery来写背景透明,方法简单,但是有缺点,脚本没加载完时,背景颜色是不透明的.如果换成在css里写好的话,效果就很好了..transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是: opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持f

网页制作技巧:清除浮动和图片水平垂直居中

文章简介:网页制作技巧:清除浮动和图片水平垂直居中. 1.如何清除浮动 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2: #test{display:block;zoom:1;overflow:hidden;} #test为浮动元素的父元素.zoom:1也可以替换为固定的width或height 方法3: #test{zoom:1;} #test:after{display:block;clear:both;visibility:hidden;hei

网页制作技巧:数据过多时不会影响页面布局

文章简介:网页制作技巧:数据过多时不会影响页面布局. 着网站的迅速发展,对用户交互体验需要也越来越高,web前端开发者需要考虑更多,怎样通过前端的控制,让用户数据更高效的显示.要达到的目标是:数据过多时,不会影响页面布局解决方法:1,在不影响布局的情况下,可以选择,数据自动换行a.设置宽度限制:可以使用width值和max-width最大宽度值.b.内容自动换行:word-wrap:break-word(中文,英文语句,长串字母都能实现);注意点:长串字母实现前提,必须将宽度限制直接添加到"文本