网页设计框图

1、网页设计中怎样插入动态图

动态图是GIF扩展名的图片，你只需使用img标签就行了。

<img src="图片地址" width="宽度" height="高度" alt="图片说明" />

2、网页效果图怎么制作？

　平面广告和网站页面设计的宗旨就是吸引眼球，符合平面视觉冲击特点，如何设计一款有特色、另类能吸引眼球的作品是摆在平面设计人员和photoshop爱好者面前的难题

现在以一款网页平面设计效果图为实例，讲解网页设计方面的创意知识，从网页效果图布局创意、颜色选择，裁减效果图和制作网页特效等方面来学习。下面我们就一起来学习吧。

首先声明一下，这款网页效果图在得到朋友许可后拿来制作教程实例，切勿抄袭和用做其他用途。先看效果图0。

一、 创意设计思路

一个网站在制作前需要确定网站风格、网站主题、和主色调，在没有确切的方案之前，最好不要贸然动手制作，不然最后的结果很可能是以失败而告终。

笔者决定从关键字"路行""独自行走"加上是暗色系的要求上下手，敲定颜色采用沙漠黄，沙漠很容易让人联想到孤单；板式确定为户外广告的样式沙漠黄配合生锈的广告牌。符合"颓废""艰辛路途"主题。

二、 网站效果图及LOGO的制作。

1、LOGO的样式采用的是图形和字符的组合。汉字LOGO的字体不是下载的字体，是笔者用钢笔工具画出来的字体。如图1和1-1。

　钢笔工具勾勒出图1的行走的人样式，填充红色，然后调整混合模式"斜面和浮雕"选择浮雕效果、雕刻清晰、深度1、方向上、大小2，其他默认。这LOGO 的创意是，一个人在崎岖不平的路上坚持自己的方向，配合网站的英文加中文名字，构成一个形象LOGO，刚好"路"字和"行"字采用红色，突出了路行。

文字LOGO笔者用钢笔工具勾画出字的各个部件，然后拼接在一起，这里只给出"路"字的方法，"行"字方法如同。[next]

2、制作布局参考图。如图2

　3、根据布局效果图，新建文件大小1000X765，填充黑色。布局中的"显示区域"为广告牌是要挂到墙上的，使用"石头材质"放置在页面最上方来制作石板墙；使用"锈迹皮革材质"制作"显示区域""LOGO"区域的边框（注：一些材质的制作方法省略，平时可自行制作也可去图片站下载保存，用的时候方便），将LOGO区域的边框复制一层，调整不透明度为60%放置到LOGO曾下方，这样大体的框架就完成了。如图3和3-1。

（图5）

（图6）

4、找来一张沙漠公路的图片，把这张图片进行聚焦处理。点图4示例的按扭进入"以快速蒙版编辑模式"，选择渐变，渐变模式为"径向渐变"在图中间向两边拉，屏幕会出现一团红色；然后再点"以标准模式编辑"画面会出现一个圆圈选择区域，按"DELETE"删除即可。如图4和图4-1。

（图7）

（图8）

　5、在"路"图片上方新建一层，按住CTRL+"路"图层，单击新建的图层，填充颜色4E341B，调整为暗系沙漠黄。如图5。

（图9）

制作文字LOGO牌。找来图5-1中的灰色材质，在"LOGO边框"下面新建一层，然后在其之上新建一层，放置沙漠图片，将其混合模式修改为"颜色"然后打开一开始制

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

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

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

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

4、网页制作怎么进行图文混排

要实现图文混排其实很简单，如果是使用dreamweaver 的话，插入图片的时候会有一个对齐的选项，如左对齐，就是图片在左侧，然后文字从右面包围图片。反之亦然。

如果不是使用dreamweaver，直接用记事本编辑，直接给img加上align=left或者align=right就可以了。

当然了，更复杂的混排还可以通过表格或者层来实现。

5、网页设计页面线形图和框架结构图的区别

框图的制作是快速而廉价的，特别是当你使用诸如UXPin、Balsamiq、Axure这样的软件来制作的时内候。当容然，线框图也理当是在设计之初就使用这些工具来制作。
比起创建一个完整细致高保真的线框图，搜集反馈信息来得更加重要。为什么这么说呢？
一般而言，大家更注重软件的功能、信息架构、用户体验、用户交互流程图、可用性，这些东西，而不是考虑这些因素的美学特征。同时，在这种情况下，根据需求进行修改也无需涉及代码调整和图形编辑。

6、网页设计图是什么

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

7、网页设计的规划书

一、实验目的和要求
综合应用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,并钩选自动播放和循环。

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、网页设计是不是就是做图？

网页来设计是不是就是自做图？只能说是有一部分，那么什么是网页设计呢？

什么是网页设计，

网页设计是一种视觉体验的设计，特别讲究编排布局和视觉交互，网页设计不等同平面设计，它们和平面设计有许多不同之处。网页设计是版式设计通过文字、图形的空间组合，表达出和谐与美。想学网页设计的就直接点它，都给你安排好了一份资料。

“网页设计（web design，又称为Web UI design，WUI design，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。”

网页设计一般分为三种大类:功能型网页设计、形象型网页设计、信息型网页设计。设计网页的目的不同，应选择不同的网页策划与设计方案。

网页设计是互联网发展的产物，虽然移动端已是主流，但网这重要地位重要地位。