导航:首页 > 万维百科 > 网页设计版图

网页设计版图

发布时间:2020-07-24 11:31:55

1、网页设计好后的切图是什么意思呢

切图就是把用设计软件设置好的图片切成相应的大小,切图后再把图片上传就可以可以加快显示速度,不用等整个图片都下载以后显示。

PS切图步骤:

1、打开PS,然后点击切片工具。

2、点击切片工具后,就可以把图片切成需要的大小。

3、切好图片后,点击导出web所用格式。

4、进入导出web所用格式页面,按住shift键把所有切片都选中。

5、导出格式设置为JPEG。

6、最后点击存储就可以了。

2、网页设计图是什么

网页设计图就是要把网页做成什么样子的一张图,可以是手工在白纸上画的,也可以是用电脑软件制作的。效果多种多样,根据不同的行业进行分析之后制作的。想知道怎么样,可以直接看别人的网站做出来是什么样的,再分析一下是否符合用户需求,方便用户浏览?
步骤是分析行业用户需求,设计内容分布去满足这些用户的需求,画出一张图。
我觉得就这么简单,虽然看起来不怎么专业,但是能解决用户的一些实际的问题了。

3、用PS做一个网页设计图

挺简单的,现在fireworks中做下PSD图,然后在DW中处理一下就行了

我也有现成的,加些分留个邮箱可以发给你。。。。

网站分为好多类型,像个人主页、门户、论坛等,你可以选择其中的一个来做。。如果你是新手的话,那就做个个人主页吧,比较自由,做成什么样的都可以。。。。
如果你的程序搞的比较好的话,那就做个论坛吧、

4、网页设计的规划书

一、实验目的和要求
综合应用Dreamweaver 8的基础知识创建和编辑网页。
二、实验内容及步骤
(1) 在“文件”中新建一个网页,在“插入面板”的“布局”中,新建“左侧和嵌套的顶部框架”框架,并使框架网页符合下列要求。
① “文件”中的“框架集”另存为,保存框架集时,把框架集文件名改为index.htm。
② 在“框架浮动面板”中选中左框架,在“文件”中选择“保存框架页”,同时给左框架文件命名为left.htm,在框架浮动面板中选中左框架,在“修改”中将“页面属性”中设置背景图像为bg0035.jpg以及左框架的列宽度为320像素。
③在框架浮动面板中选中顶框架,在“文件”中选择“保存框架页”,顶框架文件名为top.htm,选中顶框架,“属性面板”中设置行高度为65像素。
④ 选中主框架,在“属性面板”中设置主框架页面的“滚动”方式为自动,[源文件]为本地站点中的网页文件main.htm。
⑤ 分别选中3个框架,在“属性面板”,“页面属性”中将三个框架网页的页面属性“左边界”、“顶部边界”、“边界宽度”、“边界高度”设为0,在“文件”中选择“保存全部”,将全部框架文件保存在本地站点中。

(2) 用photo子文件夹中的图像创建网站图像册,其要求如下。
①新建一个网页,在“命令”中“创建网站相册”,在弹出的窗口中设置标题为“名画——人类的精神粮食”,省略副标题。
②在①弹出的窗口中继续设置页面图像的缩略图尺寸为100*100像素;每行列数我为6列;缩略图像文件格式为.jpg。
③在①弹出的窗口中继续设置“源图像文件”为本地站点根文件夹中的photo子文件夹,“目标文件夹”为本地站点根文件夹,其他参数默认。
④在“页面属性”中用img文件夹中的文件bg0029.jpg设置网页背景图像。
⑤插入“库”项目:在页面中插入层,点击“文件浮动面板”,“资源”中选择“库”,选中库项目return,按下”插入”按钮。
⑥在“文件”中选择“另存为”,保存网页文件,以index1.htm为名保存在本地站点的根文件夹中。

(3) 新建一个网页,命名为 fg1.htm,并将此文件保存本地站点根文件夹中。打开文件fangao.dwt.
①将 “梵高的故事.doc”中的文字内容复制粘贴到网页文字可编辑区域的蓝色框中,并在模板左侧2个图像可编辑区域中,单击可编辑区域,在“插入”中选择“图像”,选择img文件夹中的tu1_3.jpg和tu2_3.jpg,模板顶部标题可编辑区域输入文字“梵高的故事”。
②在“属性面板”中选择“样式”,“附加样式表”,附加本地站点根文件夹中的外部层叠样式表文件format.css,选中网页标题,在“属性面板”样式中选择title作用于网页标题,同样方法将样式format作用于网页中的其他文字,样式filter作用于图像文件tu1_3.jpg和tu2_3.jpg。
③把光标放在要插入的位置,在“插入”中选择“命名锚记”,输入名称”aa”,在网页中最后一段的文字“镶板画”中间插入用于超链接的名为“aa”的站点。
④在页面左下角插入层, 在“文件浮动面板”的“资源”中选择“库”,选中库项目return,按下”插入”按钮。

(4) 新建网页文件,并将此文件以fg2.htm为名保存在本地站点的文件夹中。
①在“属性面板”的“页面属性”中设置页面背景图像为bg0029.jpg,在“插入”中选中“表单”中的“表单”。在“属性面板”中设置表单的名称为:“调查”,动作为:答题学生本人的邮件地址,方式为:POST。
②输入文字“问卷调查”,选中文字在“属性面板“中设定”居中”,并设置文字格式。
③在“插入”中选择“表单”,“文本域”,在表单的第2行,插入文本域。设置标签文字为“姓名”,确定.选中文本域,在“属性面板”中设置“字符宽度”为20,“类型”为单行,“最多字符数”为20。
④在“插入”中选择“表单”,“单选按钮组”,在同一行中再插入单选按钮组,单选按钮组的名称为“性别”。将标签改为”男\女”,在属性面板中设置标识是“男”的单选按钮的“初始状态”为已勾选,“选定值”为“男”。标识为“女”的单选按钮的“初始状态”为未勾选,“选定值”为“女”。
⑤在“插入”中选择“表单”,“文本区域”,在表单的第3行中插入多行文本域,在弹出的窗口中设置标签文字为“谈谈你对本网站的观感:”。换行后,插入多行文本域,选中该文本域,在属性面板中设置其“字符宽度”为50,“类型”为多行,“行数”为10,“换行”为默认,“初始值”为“请发表您的浏览观感”。
⑥在“插入”中选择“表单”,“按钮”,在表单的第5行居中插入2个按钮,在“属性面板”中并分别将它们的“标签”和“动作”设为:递交表单和重设表单。
⑦在页面左下角插入层, 在“文件浮动面板”中选择“资源”,“库”,选中库项目return,按下”插入”按钮。

(5) 打开网页首页文件index.htm。
①点击顶部框架,在“插入”中选择“媒体”中的flash,在顶部框架中插入Flash文件fgl.swf。
②在“插入面板”的“布局”中选择“绘制布局表格”,在左框架的上半部分画布局表格,在其中画5个布局单元格分别选中,在“属性面板”中设置大小为93*63像素,在“插入”中选择“鼠标经过图像”,在其中分别插入“鼠标经过图像”,在弹出的窗口中设置其“原始图像”文件分别为tu1_2.gif、tu2_2.gif、tu3_2.gif、tu4_2.gif、tu5_2.gif,“鼠标经过图像”文件分别为tu1_1.gif、tu2_1.gif、tu3_1.gif、tu4_1.gif、tu5_1.gif。
③在左框架的下半部分按样张画三个层,属性设置为210*150大小,在这个3层中插入3幅图像分别是tu1_3.gif、tu2_3.gif、tu3_3.gif,选中3个层,在“修改”中选择“排列顺序”中设置3个层重叠,分别将3个层选中,在右键菜单中选择添加到时间轴,在3幅图像的动画条中插入适当的关键帧,在“属性”中更改关键帧处的可见性,制作时间轴控制3幅图像轮流显示的时间轴动画,每幅图像显示的时间为1s,并钩选自动播放和循环
④在“文件浮动面板”的“资源”中选择“库”中,选中库项目return,点击面板右下角的”编辑”按钮,选中它,在“属性面板”中设置其与首页index.htm建立链接,并使首页index.htm在复框架中显示,目标_parent,然后“修改”中选择“库”的“更新页面站点”。
⑤在首页文件index.htm被浏览时播放声音文件Applause.wav。
⑥将文件保存
.

(6) 按下列要求为左框架中的5个图像按钮添加行为和超链接。
①选中图像,在“行为面板”中选择行为“Ondblclick”.然后“添加行为”,“控制shockwave或flash”,操作:停止, 在“行为面板”中选择行为Onclick,“添加行为”“控制shockwave或flash”,操作:播放,可达到以下效果:双击该图像,停止播放顶部框架中的Flash文件fg1.swf,单击该图像,开始播放顶部框架中的Flash文件fg1.swf。
②选中第2个鼠标经过图像在“属性面板”添加超链接,链接至index1.htm,选择“目标”为“mainframe”可达到以下效果:单击此图像是链接网站相册文件index1.htm,并使该文件在主框架中显示。
③选中图片在“属性面板”中设置链接为fg1.htm#aa,目标为_mainframe,即可单击此图像时链接到文件fg1.htm的锚点“aa”上,并使该文件在主框架中显示。
④给网页左框架第4个鼠标经过图像添加超链接,选中图片,在“属性面板”中设置链接至fg2.htm, 目标为_mainframe,即可单击此图像时链接到文件fg2.htm上,并使该文件在主框架中显示。
⑤选中图像,在行为面板中选择行为“Ondblclick”, “添加行为”“控制”shockwave或flash,操作:停止;选择行为“Onclick”, “添加行为”“控制”shockwave或flash,操作:播放。使双击该图像,停止播放左框架底部的时间轴动画,单击该图像,开始播放左框架底部的时间轴动画。

三、实验中遇到的问题及解决方法
1.起初插入的flash动画始终无法显示,插入的main.htm中有个别图象无法显示,通过改变绝对路径,完成显示效果.
2.做超链接时,链接的无效果,通过改变链接途径达到链接效果。
3.在做最后一步的六个图片的超链接时,添加行为和控制shockwave或flash,多次操作和调试都无法成功,后来经过请教同学,知道是在“行为面板”中选择行为“Ondblclick”.然后“添加行为”,“控制shockwave或flash”,操作:停止,再在“行为面板”中选择行为Onclick,“添加行为”“控制shockwave或flash”,操作:播放,即可达到要求的效果。
4.在做3副图象轮流显示的时间轴动画时,开始不会做,后来知道是在右键菜单中选择“添加到时间轴”,在3幅图像的动画条中插入适当的关键帧,在“属性”中更改关键帧处的可见性,制作时间轴控制3幅图像轮流显示的时间轴动画,每幅图像显示的时间为1s,并钩选自动播放和循环。

5、正常网页制作背景图片应该多大?

1、背景最好是能够做到自动延伸,现在的显示器是越来越大,分辨率也慢慢的变大了,现在用1600*900分辨率的也不少,我的就是,当然也有人用1280*768、1024*768等,所以网页设计的背景一般是不会设计成固定尺寸的,你可以做成可循环平铺的图片或者渐变颜色,直接是一种颜色那就更方便了;

2、其实网页设计一般所说的尺寸指的是主体框架的尺寸,就拿现在这个百度知道的页面距离,中间的主体部分无论是浏览器怎么伸展,主体内容的宽度是保持不变的,我查看了一下css代码,这个主体框架的宽度是980px;

3、你设计的时候把主体部分设置成980-1000px就差不多了,毕竟现在使用1024*768分辨率以下的人已经毕竟少了。

6、网页设计如何定义图片的位置和大小

网页设计在初始要界定出网页的尺寸大小.就像绘画给出一块画版来.这样才能方便设计. 网页的尺寸受限于两个因素:一个是显示器屏幕.显示器现在种类很多,以17寸为主流, 正在朝19寸及宽屏的方向发展.但目前也有为数不少的15寸显示器.另一个是浏览器软件,就是我们常用的IE,遨游,Firefox等.
高度:
高度是可以向下延展的,所以一般对高度不限制. 对于一屏来说,一般没有一个固定值,因为每个人的浏览器的工具栏不同,我见过有的浏览器工具栏被插件占了半个屏幕,所以高度没有确切值。
宽度:
1、在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。 2、在Firefox下,宽度的分率辨减19。比如1024的宽度-19就变成1005 3、在Opear下,宽度的分率辨减23。比如1024的宽度-23就变成1001 注:Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。
所以如果是1024的分辨率,你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点.也方便做一些浮动层的设计.
如果是800的分辨率一般都设成770。但也有设成760的.
这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化所以 800的分辨率一般设定760左右,1024的设定990左右.

网页设计标准尺寸:
1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。
2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
3、在ps里面做网页可以在800*600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740*560左右
4、在PS里做的图到了网上就不一样了,颜色等等方面,因为WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广,所以自然会有失色的现象.
页面标准按800*600分辨率制作,实际尺寸为778*434px 页面长度原则上不超过3屏,宽度不超过1屏 每个标准页面为A4幅面大小,即8.5X11英寸
全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px 另外120*90,120*60也是小图标的标准尺寸
每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K
标准网页广告尺寸规格
一、120*120,这种广告规格适用于产品或新闻照片展示。 二、120*60,这种广告规格主要用于做LOGO使用。 三、120*90,主要应用于产品演示或大型LOGO。 四、125*125,这种规格适于表现照片效果的图像广告。 五、234*60,这种规格适用于框架或左右形式主页的广告链接。

六、392*72,主要用于有较多图片展示的广告条,用于页眉或页脚。 七、468*60,应用最为广泛的广告条尺寸,用于页眉或页脚。 八、88*31,主要用于网页链接,或网站小型LOGO。 广告形式 像素大小 最大尺寸 备注 BUTTON 120*60(必须用gif) 7K 215*50(必须用gif) 7K 通栏 760*100 25K 静态图片或减少运动效果 430*50 15K 超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果 巨幅广告 336*280 35K 585*120 竖边广告 130*300 25K 全屏广告 800*600 40K 必须为静态图片,FLASH格式 图文混排 各频道不同 15K 弹出窗口 400*300(尽量用gif) 40K BANNER 468*60(尽量用gif) 18K 悬停按钮 80*80(必须用gif) 7K

流媒体 300*200(可做不规则形状但尺寸不能超过300*200) 30K 播放时间 小于5秒60帧(1秒/12帧) 网页中的广告尺寸 1.首页右上,尺寸120*60 2.首页顶部通栏,尺寸468*60 3.首页顶部通栏,尺寸760*60 4.首页中部通栏,尺寸580*60 5.内页顶部通栏,尺寸468*60 6.内页顶部通栏,尺寸760*60 7.内页左上,尺寸150*60或300*300 8.下载地址页面,尺寸560*60或468*60 9.内页底部通栏,尺寸760*60 10.左漂浮,尺寸80*80或100*10

7、网页设计工作多数用ps还是ai,有什么有缺点

多数用到PS,但AI也用,有事PS处理不了的,就用AI,软件不同,功能自然也不同,PS处理位图的,AI是矢量图形处理软件,当网页中出现像素特别小的logo标志时,一般会选择用AI来做。
PS是位图,AI是矢量图,位图与矢量图的区别和优缺点:
位图就是你看到普通图片那种,颜色信息丰富,但放大会模糊并且有马赛克块;
矢量图是可以无限放大都不会模糊和马赛克的;但好像颜色控制不好;经常会很鲜艳和单调
PS是最优秀的专业图像编辑软件,做出的图是位图。位图是点或像素方式来记录图像的,因此图像由许多小点组成。优点是色彩显示自然、柔和、逼真。缺点是图像在放大或缩小的转换过程中会产生失真,且随着图像精度提高或尺寸增大,所占用的磁盘空间也急剧增大。位图放大后图像会变得模糊。
而AI,或者CorelDraw、Freehand等是用于绘制矢量图形的软件,矢量图,是以数学方式来记录图形的,由软件制作而成。优点是信息存储量小,与分辨率完全独立,在图形的尺寸放大或缩小过程中图形的质量不会受到丝毫影响。缺点是用数学方程式来描述图形,运算比较复杂,且所制作出的图形色彩显得比较单调,图形看上去比较生硬,不够柔和逼真。
在图形的复杂程度不大的情况下,矢量图具有文件短小,可无级缩放等优点。
接下来,现在对比PS和AI两软件,看一下它们的应用吧。
Photoshop是非常优秀的专业图像处理软件,一直占据着图像处理软件的领袖地位,是平面设计、建筑装修设计、摄影后期、三维动画制作及网页设计等的必用软件。其惊人的功能也引起广大业余图像处理爱好者的强烈兴趣。
Illustrator作为全球最著名的图形软件,以其强大的功能和体贴的界面已经占据了便于矢量编辑软件中的大部分份额。据不完全统计,全球有67%的设计师在使用Illustrator进行艺术设计。无论你是线稿的设计者和专业插画家、生产多媒体图像的艺术家,还是互联网页在线内容的制作者,都可以用到Illustrator。但并不局限于用它进行广告作品、报纸插图、海报宣传画等侧重矢量图效果的表现。它的位图处理功能依然强大。

8、html网页设计里面怎么平铺背景图片?

html网页设计里面平铺背景图片的代码如下:
<html>
<body>
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">
<img src="pictures/background.jpg" width="100%" height="100%"/>
</div>
</body>
</html>
网页背景默认是平铺整个屏幕的,可能有以下原因导致不能平铺:

1、图片不够大,又background属性不能拉伸图片;
2、只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> ;
3、body的background属性去掉,要不然会被遮住。

9、html网页设计里面怎么平铺背景图片

html网页设计里面平铺背景图片的代码如下:
<html>
<body>
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">
<img src="pictures/background.jpg" width="100%" height="100%"/>
</div>
</body>
</html>
网页背景默认是平铺整个屏幕的,可能有以下原因导致不能平铺:

1、图片不够大,又background属性不能拉伸图片;
2、只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> ;
3、body的background属性去掉,要不然会被遮住。

10、网页设计图片主流尺寸

浏览器全屏打开后网页实际的内容区域离屏幕两边有一定空白,网页做的时候一般宽九百多像素吧,自己看着做吧。

与网页设计版图相关的知识