ps简易网页制作步骤
Ⅰ 57自学网 中用photoshop软件制作简单网页的小技巧怎么找不到了
原文内容如下:
教你一招制作简单网页的小技巧
一篇文章配上一个漂亮的版面,可以使人耳目一新或着是一种视觉享受。版面设计可以用photoshop软件制作,用PS制作网页版面可以很好的控制和调整网页框架的布局或色彩的协调搭配,也便于整体的修改和局部的细致刻画,使网页更具个性化。
用PS制作网页前,应对制作的网页有个初步的构思,等把大的色块做好后,再调整色块间的明暗度、对比度、饱和度进行调整,而后再把小的插件放到网页上,先整体后局部的制作过程。由于网络空间受文字字数(4000字)或图片大小(500KB)的限制,所以在网页框架的制作中尽量的简化其结构,图片的格式也尽量的选择GIF格式。还要考虑空间文章区像素的大小,本人空间的文章区宽度是950像素,所以本人的网页框架图片一般设置为920像素。
让我们先来了解一下版面布局的步骤:
一.草案新建页面就象一张白纸,没有任何表格,框架和约定俗成的东西,你可以尽可能的发挥你的想象力,将你想到的"景象"画上去(我们建议您用一张白纸和一支铅笔,当然用作图软件photoshop等也可以)。这属于创造阶段,不讲究细腻工整,不必考虑细节功能,只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张,最后选定一个满意的作为继续创作的脚本。
二.粗略布局 在草案的基础上,将你确定需要放置的功能模块安排到页面上。(注:功能模块我们在"首页设计-引子"中提过,主要包含网站标志,主菜单,新闻,搜索,友情链接,广告条,邮件列表,计数器,版权信息等)。注意,这里我们必须遵循突出重点、平衡谐调的原则,将网站标志,主菜单等最重要的模块放在最显眼,最突出的位置,然后在考虑次要模块的排放。
三.定案将粗略布局精细化,具体化。(靠你的智慧和经验,旁敲侧击多方联想,才能作出具有创意的布局。)
网页框架完成后,下一步就是做成适应网页框架的背景图,可以用PS将整图切割成4部分(图1)(这里你可以根据自己的构思,进行切割)背景图1为LOGO区域,(LOGO制作)背景图2为过渡区,也可以把1-2区域合并为一个区域,本人的意图是为了减少LOGO区域背景图的文件的大小,背景图3为文章区,这里应注意图片上下的衔接,因该区域的高度是根据文章内容而定的,背景图4为网页的底部。
2、将文章区的对齐方式分别设置为“默认”、“顶部对齐”,可以使用“格式”-“段落”调整文字的边距。
3、左侧的文章连接区的对齐方式设置为“居中”“顶部对齐”,插入若干行单元格,将连接的文章放置该去。
Ⅱ 用photoshop做网页方法
800*600我一般宽会设成,1024*768 宽度会设成 1000px,高度当然要看内容多少来定。
布局就不好说了 要看设计者的喜好、习惯、网站的功能、设计风格来定了。
接下来就是切图了,切图是个很麻烦但又很关键的步骤。切图前必须考虑好图片大小(大图为了浏览时能顺利打开最好切割成N小快),是否为背景图(有的图很大,但实际上都是小图片的平铺效果,所以遇到这种图只取小图,在网页中设为背景就可以了)。除此之外还要考虑是否可以用图片以外的元素代替,比如有的纯色块完全没必要用图片,只要在网页中调整表格的颜色就可以得到相同的效果。photoshop有专门的切割工具,按需要把设计好的网页切割好后用ctrl+alt+shift+s保存,就会生成一个html文件了,你会发现html的图片文件夹里已经有你切好的一块一块的小图片。浏览这个web页面,显示的效果和ps中的完全一致,似乎布局已经完成了。
但Dreamweaver现在才刚刚开始排的上用场,因为网页毕竟不是纯粹的图片,还需要文字、flash、声音等元素的添加,Dreamweaver要做的就是继续完善你的页面,图片越少越好,该删的删、该设背景的设为背景该用表格颜色代替的用颜色代替。
哇塞 想想都麻烦^ ^
归根结底 photoshop 是用来构图设计的,而Dreamweaver是为了完成并完善图片到网页的转换过程。
Ⅲ 如何用photoshop进行网页制作
HTML+CSS+JS,这是广义上的网页三元素,HTML负责骨骼,CSS负责血肉,JS负责行为动作。其中浏览器中表现的版画面约等于(html+css),但权仅仅拥有他们是表现不出设计师们大脑中天马行空,不拘一格的想象力的,因此才引入了PSD作为设计稿。
这就好比,你完全自己DIY一个高达,你需要先有一副高达图片(PSD),再通过图片中的表现自己搭建支撑的骨架(HTML),再用各式喷漆、马克笔(CSS)去勾画、完善细节。
那么回到问题上来,怎么用PS做网页?假定adobe体系中,PS永远只能设计网页,而Dreamweaver才能制作网页,但是依然要你自己根据设计去解构设计然后划分网页骨架,具体到html上就是根据不同的页面表现来写Div标签,制作Button按钮,用CSS控制他们的大小和位置以及表现。更进一步的话,大部分前端会手写html和css代码,因为DW有各式包括启动速度,冗余代码之类的问题。
至于响应式,这又是基于成型的html以后另一个话题了,但还是html+css,只不过通过UA检测来适应不同终端的不同展现。
Ⅳ 怎么用ps做简易的网页
专业的制作网页软件是
Dreamweaver
,做一个
静态网页
也是简单的很,内含模板的
Ⅳ 网页制作!中学生PS网页制作,学校要求做一个简单的网页作业,请高手教教简单的制作过程!
<html>
<head>
<title>一个简单的网页</title>
</head>
<body>
这是我做的网页作业
</body>
</html>
———
你把以上代码复制到记事本里,然后把记事本的扩展名改成***·html,就可以了,最终它是IE的图标显示(除安装了网页编辑软件),好了希望能帮到你…
Ⅵ 在Photoshop中如何制作网页
soso问问里答案:
首先是在Photoshop中制作网页的框架。网页中的元素有很多,像Banner条、文本框、文字、版权、Logo、广告等。尽量把这些相对独立的元素放在不同的图层中,这样方便以后的再编辑。
不过图层一多,就显得很凌乱,可建立多个图层组来进行管理。单击图层面板右上角的小三角按钮,从弹出菜单中选择“新建组”,在随后出现的对话框中为新建组取一个名称(如:“网页顶部”),确定即可。这时图层面板中多出一个文件夹图标,即图层组。把相关联的图层都拖放到同一组中,比如网页顶部的所有元素,标题、菜单、Logo等都放到“网页顶部”组中。同样方法可以建立多个组,在组的下面还可以建立子组。
点击图层组前面的小三角,就可以像文件夹一样展开或折叠它,这样图层面板就显示干净利落得多,要修改某个元素也能很容易找到。对同一组中的所以图层可以方便地进行统一操作,如整体复制、删除、隐藏、合并等。
小提示:
★如果你想借鉴某个网页的设计,不妨把它截成图片放在最下面的图层中,再拉出多个参考线划出网页的大致版式,再在此基础之上边参考边制作自己的网页。
从Photoshop到Dreamweaver的转换
在Photoshop中设计好之后,下面就要用切片工具把它转换成网页。有些人在切片之前喜欢合并图层,其实没有必要,合不合并图层对最终生成的网页没有多大影响,反而会妨碍以后的编辑修改。
第1步:我们最终需要的,只是Photoshop中制作的图形和框架。选择切片工具(快捷键为K),把需要的每个图形独立切分出来。每切分出一个图形,在它的左上角会显示出切片编号。
第2步:在工具箱右击切片工具,从弹出菜单中选择“切片选择工具”,用它可以选取、移动切片,并可以调整切片的大小。右击某个切片还可以删除或划分这个切片。
第3步:切分出所有图片后,执行“文件→存储为Web所用格式”命令,打开存储对话框,根据需要设置好图片的格式、调色板等参数后,点击右上角“存储”按钮调出保存对话框,选择HTML网页格式,使用默认设置,选择“所有用户切片”,保存即可。
第4步:在Dreamweaver中打开刚才保存的网页,添加文字并进行各种编辑修改就可以了。怎么样,简单吧!注意:Photoshop导出的实际上就是一个大的表格,所有空白的地方也都会转换为图片填充,在DW中编辑时,直接删除这些图片再添加相应的内容即可。
小提示:
★在Photoshop中编辑好图形后,点击工具箱最下面的按钮(快捷键为Ctrl+Shift+M),可以转到ImageReady里进行编辑,在这里,切片工具的功能更为强大,输出的图形控制也更丰富。
Ⅶ PS怎么制作网页
1photoshop
.fireworks
设计网页的
2DM.网页排版的
3flash
制作网页flash的
你可以慢慢学学
Ⅷ 网页制作基本步骤
确定风格、颜色、内容,
确定板块分类
确定框架
确定模板
确定各版块内容、排版
测试
上传到空间
Ⅸ 从ps切片到做成网页具体的操作步骤初学者,望高手指点!!!
PS的切片工具适合内容较为简单的页面,页面图片过多,会导致切图后生成的冗余图片过多,不利于网页制作的最基本原则:页面文件大小控制。
静态页面制作的步骤一般是:
1.搭建目录
根据需要建立设计的目录文件夹,如:css(存放css样式文件),js(存放javascript文件),images(存放网站风格的图片文件),demo/uploads(存放演示数据)
【注意:这里有两个大的图片目录,网站的修饰图片存放在images目录下,演示的图片存放在demo或uploads目录下,很多程序员都不愿意去动你的静态目录,直接后果是很多演示图片数据被当作网站图片上传了。导致上传的时候压缩包很大!】
2.建立首页页面和全局样式
接下来就是在根目录新建index.html文件,并引用对应的css文件,js文件资源。
在这一步,你要制作好页面的版式布局,一般是使用css书写,例如,可以建立一个layout.css来放置这些样式,内容就是侧边宽度,内容区域宽度,左浮动、右浮动,清除浮动等内容。
你还要设计一下全局样式,一般放在common.css中,主要定义全局字体、字号,颜色,链接颜色,各种颜色的文本,各种修饰的文本,等...
然后你还需要为页面添加样式,页面比较少可以直接在common.css继续添加,页面比较多,则可以建立新的css,例如:index.css首页的样式,about.css关于我们的样式,ucenter.css用户中心的样式。这里你要设置页面内容的样式,如标题、边框、背景、图片宽高等~
【注意:html的书写尽量整洁,规范,注释齐全,css同样如此】
3.分离模板,完善其他页面
当你的首页完成后,差不多页面的模板已经出来了,通常,我们会把页面的头部,内容和页脚分离为:header.html,page.html,footer.html。这样,你就无需重复书写头部和页脚的模板代码了,当然,如果你的侧边栏也是固定的,你还可以分离出sidebar.html这样的模板页。
根据你的模板页,你就可以新增和完善其他页面的制作了。
4.兼容性测试,代码优化
兼容性测试可以分散在制作过程中,也可以最后统一验证。通常,你需要验证多个浏览器,IE6、IE8、chrome、火狐等~
代码优化,你要适当的精简你的代码,把重复的代码整合起来,把冗余的标签优化好,同时,你还要注意好命名的规范,尽量使用英文命名,而不是拼音或简拼命名。
到这儿你的静态目录就搭建好了,程序人员看到后就明白是怎么回事了,他可以很轻松的分离你的html到程序中,另外你的注释齐全,他或许还会夸你几句!:)
Ⅹ 简单网站的制作步骤
要想学做网页,首先得了解制作网页的工具。
制作网页主要有以下一些工具
Frontpage:office自带的一个工具,操作简单,实用,学起来比较轻松,功能不咋地,我不太喜欢。
Dreamweaver:这是网页三剑客之一,专门制作网页的工具,可以自动将网页生成代码,是普通网页制作者的首选工具,界面简单,实用功能比较强大。建议初学者选用。
另外一个工具就是代码编辑工具,例如写字本、EditPlus等,这些工具主要编辑asp等动态网页。
此外还有一些网络编程工具,javascript、java编辑器等。
网页制作也是一个比较吃香的行业,要真正做一个好的网站,还必须有良好的设计功底。所以还得学很多边缘性的软件,例如photoshop、flash等。
大型的网站往往还需要数据库的支持,所以还得懂数据库。sql、甲骨文等。
总之,掌握好网页制作,能独立完成一个网站的制作工作,那就不要考虑吃饭问题。随便混就好了!
网站设计八步骤
由于目前所见即所得类型的工具越来越多,使用也越来越方便,所以制作网页已经变成了一件轻松的工作,不像以前要手工编写一行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站,可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为什么呢?常言道:“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。
一、确定网站主题
网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站那样做得内容大而全,包罗万象。你没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的特色,这样才能给用户留下深刻的印象。网站的主题无定则,只要是你感兴趣的,任何内容都可以,但主题要鲜明,在你的主题范围内内容做到大而全、精而深。
二、搜集材料
明确了网站的主题以后,你就要围绕主题开始搜集材料了。常言道:“巧妇难为无米之炊”。要想让自己的网站有血有肉,能够吸引住用户,你就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来,也可以从互联网上搜集,然后把搜集的材料去粗取精,去伪存真,作为自己制作网页的素材。
三、规划网站
一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页才能有个性、有特色,具有吸引力。如何规划网站的每一项具体内容,我们在下面会有详细介绍。 四、选择合适的制作工具
尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多,首先就是网页制作工具了,目前大多数网民选用的都是所见即所得的编辑工具,这其中的优秀者当然是Dreamweaver和Frontpage了,如果是初学者,Frontpage2000是首选。除此之外,还有图片编辑工具,如Photoshop、Photoimpact等;动画制作工具,如Flash、Cool 3d、Gif Animator等;还有网页特效工具,如有声有色等,网上有许多这方面的软件,你可以根据需要灵活运用。
五、制作网页
材料有了,工具也选好了,下面就需要按照规划一步步地把自己的想法变成现实了,这是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出现问题时好修改。在制作网页时要多灵活运用模板,这样可以大大提高制作效率。
六、上传测试
网页制作完毕,最后要发布到Web服务器上,才能够让全世界的朋友观看,现在上传的工具有很多,有些网页制作工具本身就带有FTP功能,利用这些FTP工具,你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后,你要在浏览器中打开自己的网站,逐页逐个链接的进行测试,发现问题,及时修改,然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友,让他们来浏览。
七、推广宣传
网页做好之后,还要不断地进行宣传,这样才能让更多的朋友认识它,提高网站的访问率和知名度。推广的方法有很多,例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。
八、维护更新
网站要注意经常维护更新内容,保持内容的新鲜,不要一做好就放在那儿不变了,只有不断地给它补充新的内容,才能够吸引住浏览者。
网页制作教程:
FONTRPAGE的
http://www.cqzxzx.cn/it/hongen/pc/jc-down/homepage/fp2k.zip
dreamweaver的
http://www.cqzxzx.cn/it/hongen/pc/jc-down/homepage/dreamweaver.zip