$7.49 .com domain with free InstantPage Website Builder$1.99 Web Hosting   捷飞网络官方淘宝店   Godaddy 优惠码
返回列表 发帖
分享到:

教你用Photoshop (PS)-制作网页模板

我睇到好多PS教程,点解就无网页方面噶?
; @0 Z% A. [* ?. s稳佐个以前做噶PS网页教程发上黎俾大家了解下啦。3 R5 G. n5 c# Y# U4 x
软件中好多术语唔系好易理解,我就用好通俗的写法黎描述。
: E: S3 K! ]# ]$ {: d! Z6 g6 Y, v& e- I* F) H# S  D
注意:图片看不清的请点击图片放大!5 @  r: D: {) J% L# y; ~
8 b. e* Z: {8 v- P
我找了一个简单的页面做例子,先看看:* t: @8 x  A  d

, z; w7 x- ?, u/ @; l1 F3 O模板如下:& Z* I" H+ t  A5 K& }
首先,在您的电脑上下载和安装Dreamweaver和Photoshop,版本越新越好!
0 p; V7 S! Y; I0 ~9 |  j1、打开Photoshop在(文件)中(新建)弹出对话框,定义宽620高415分辨率72,RGB颜色背景内容透明,注意全部选择像素,然后确定。这个大小规格适合屏幕800X600分辨率和1024X760分辨率浏览。' i" D* W+ K0 r; n# G) g4 o
* |" O- k0 a7 d- `. y
2、在文件中(打开)JPG格式的照片。% o9 [0 ?5 A2 C0 \2 B

& F" `8 K- t3 }3 i3、用移动工具将照片移动拉到新建的透明文件上去。( k( ?; Z/ a' W  j! h

+ g" }) R* F0 w# q, [* @4、在(编辑)中选择(自由变换)来调整好照片在新建文件上的大小和位置。
( m' P) C: S$ H  Y, @3 |7 e& k6 D' U8 j8 ^9 \" ]; G
5、选择(历史画笔)在照片图层上点右键,在弹出的对话框上选择20号干介画笔,利用画笔在照片图层边上画出不均匀的边缘。
3 i$ ^$ o5 k" i6 m) }% e2 T: [6 p7 ^! o) u, I: V
6、在照片图层上选择(图层样式)弹出对话框选择(投影),根据调试不透明度、距离、扩展、大小设置出照片在背景上的边缘投影。
* M- u2 A$ n) c
3 H- M' J$ _& |$ U; O( N7、在(形状)工具中选择正方形在背景图层上建立一个正方形状,大小适中,调整好形状颜色。注意:形状要设置在照片图层后面,这样才不会遮挡照片。
. n# g0 S5 X$ n$ r: h. q, C: g7 H' l0 N7 y6 Y/ I5 v
8、使用前面和照片一样的工具——选择(历史画笔)在形状图层上点右键,在弹出的对话框上选择20号干介画笔,利用画笔在形状图层边上画出不均匀的边缘。选择(图层样式)弹出对话框选择(投影),根据调试不透明度、距离、扩展、大小设置出和和照片一样的效果,形状在背景上的边缘投影。5 |/ {/ J7 y/ y. k9 _5 o
: V% f8 c. m1 N9 f+ k
9、选择(形状)工具的方形在背景上做一个形状填满整个透明背景,把形状颜色设置为灰色取代背景。  {/ X/ H4 `2 C
9 l* \0 o) k$ t7 O  o
10、利用(形状)工具栏中的(弯箭头)形状做滚动条上和下按钮,再利用形状栏中(圆直径)形状做四个角落的图钉。

11、图钉的加工在图钉形状层(图层样式)选择投影、斜面和浮雕、在浮雕样式中选择(浮雕效果)。+ c+ m4 H4 e2 Y9 q) Z$ q( T. e

, f% h: I1 n# _- z' t12、利用(文字)工具在上面写上引索目录。
. P2 q* }7 O4 A1 y  O2 i5 J/ B* T" e# y" @& N6 \
13、利用切片工具将整个图面规划“支解”,注意切片位置。关于切片,有些网页设计高手很讲究,最主要是切片的走向和位置的分配,在网页中切片越小下载的速度越快。; H. K/ T* Z; k0 z! Y- y! I
8 r% T* K; ~3 B. w; p
14、使用WED所有格式保存方式保存,命名index,保存类型为HTML。
# i9 L3 z# k4 ^9 Q+ y4 p
  E( m  H3 ]) F& @+ s) s5 e; _: d% m15、保存到本地磁盘的文件有2个,一个是HTML文件,一个是IMAGES文件夹。! r  k4 u) X# U- ?7 D
" Z0 A* J7 w; U' @
16、打开Dreamweaver软件,点(编辑站点)。 - B6 A  G3 p, p2 U- T' C

# N2 P) E: A# ^17、在弹出的对话框点新建,在(站点定义)上任意写上站点名称如:我的主页。
7 w- |6 U/ E8 p7 m' `* L+ h8 P3 S( N7 u. c1 j
18、在(编辑文件第2部分)可以随机不选。
/ c% M( o( }+ P: T1 Z2 P6 v% \2 S
19、在(编辑文件第3部分)选上(使用FTP或RDS直接在服务器上进行编辑),下面一条选项可以随机,也可以在本地磁盘上建文件夹。
4 g$ |; c1 n! v8 ~3 S5 A( B
1 c* B$ e2 T, a  p+ J20、在(编辑文件 测试文件)填上你的(服务器主机或FTP地址)、(FTP用户名)、(FTP密码),然后点(测试连接)会出现对话框:已成功连接。2 @: G5 C3 p$ r4 t1 V4 F

6 N4 ~' \5 q( z; L9 M. U21、上一步完成以后出现以下截面,点(连接按钮),选(远程视图),可以在下面看到远端服务器根目录(WWWroot),最后点(转换按钮)去到上传文件截面。
' J1 \/ k, {& d4 j: z$ |5 T9 `; ]% g2 G& s
22、在这个截面我们可以清楚的看到左边(远端站点)和右边(本地文件),我们只要在右边本地文件中找到用PS做好的(index.html)和(images)文件夹,分别用鼠标点住拖到左边远端服务器根目录上放开,就可以完成上传。完成上传以后点(转换按钮)回来编辑截面。
' u* h6 j# f! B
0 W2 z; \0 m5 v+ L2 B" @" @0 N+ U9 v5 u! |23、在编辑截面中要选上(远程视图)直接在服务器上进行编辑;在远程视图文件夹中找到刚才上传的(index.html),双击打开;首先把背景设置成黑色(在下一节介绍),把页面中的一块切片剪切掉(黑色部分),因为要在这个位置上放一个滚动栏调用其它页面(后面介绍);在上面的目录使用热点连接,使引索连接到其它页面。
5 l) f. ~) v9 u+ _4 d8 N" |7 j+ `9 |1 q, t( m) |. l+ l
24、在页面最下方位置(图片以外)点右键再点(属性)会弹出(页面属性)对话框,把标题写上(标题是状态栏显示的该页面标题),把背景设置成黑色(#000000)。0 J. @+ o% s9 A9 r

) R6 h* u  ~! S4 ^25、在(index.html)文件上面点右键,点(新建文件),把命名为(index2.htm)。

TOP

26、双击(index2.htm)打开文件进行编辑,在页面上点右键点(属性)如前面所讲的设置颜色(如蓝色),在页面上写字然后在(文件)中(全部保存)。把这个文件名(index2.htm)复制到下面滚动栏代码中(如代码中红色部分)。
, u6 X/ H3 l& F- U
5 S) b4 r; p" ~滚动栏代码:
  1. <STYLE type=text/css>

  2. .opacity     { filter: alpha(opacity=100) }

  3. </STYLE>
  4. <SCRIPT>   
  5. function movstar(a,time){
  6. movx=setInterval("mov("+a+")",time)
  7. }
  8. function movover(){
  9. clearInterval(movx)
  10. }

  11. function mov(a){
  12. scrollx=new_date.document.body.scrollLeft
  13. scrolly=new_date.document.body.scrollTop
  14. scrolly=scrolly+a
  15. new_date.window.scroll(scrollx,scrolly)

  16. function o_down(theobject){
  17. object=theobject
  18. while(object.filters.alpha.opacity>60){
  19. object.filters.alpha.opacity+=-10}
  20. }
  21. function o_up(theobject){
  22. object=theobject
  23. while(object.filters.alpha.opacity<100){
  24. object.filters.alpha.opacity+=10}
  25. }
  26. function wback(){
  27. if(new_date.history.length==0){window.history.back()}
  28. else{new_date.history.back()}
  29. }
  30. </SCRIPT>

  31. <body bgcolor="#c6e2e3">
  32. <CENTER><IFRAME border=0 name=new_date marginWidth=0 frameSpacing=0 marginHeight=0 src="index2.htm" frameBorder=0 noResize width=275 scrolling=no height=200 vspale="0"></IFRAME><IMG onmouseup=movover();movstar(-1,20) class=opacity onmousedown=movover();movstar(-3,2) onmouseover=movstar(-1,20);o_down(this) onmouseout=movover();o_up(this) height=30 alt=上src="http://aason.5151j.net/sy/wenzan/images/s.gif" width=13 border=0><IMG onmouseup=movover();movstar(1,20) class=opacity onmousedown=movover();movstar(3,2) onmouseover=movstar(1,20);o_down(this) onmouseout=movover();o_up(this) height=30 alt=下src="http://aason.5151j.net/sy/wenzan/images/x.gif" width=13 border=0></CENTER>
复制代码

美国VPS、域名代购:http://tu8l.taobao.com

TOP

27、打开文件(index.htm)点击(代码编辑)按钮转换到代码编辑页面,把上面代码复制到56行的确切位置上(至于为什么要放在56行,在这里没办法解释,我想会使用Dreamweaver的人都知道)。这是一个滚动栏代码,代码中包括了调用的一个页面和两个滚动按钮(gif部分),在代码中还可以设置滚动栏的大小和滚动速度。1 H! U0 _8 S5 t" `+ P$ F* h) V  _

4 I) S  C( C. _( U. ?28、代码放好以后,可以直接点(文件)点(保存全部)。
6 F3 d) y9 B9 T
; @0 F8 y; l# c; Y8 G' q6 `  {- n# E打开域名。最后完成如下:
5 G5 ?% v* h: O# h) k3 \+ I3 C2 k7 f0 u9 X
这个例子只能让大家了解一下,具体作业时其中好多细节还是要自己摸索同发挥。有唔明白噶地方请跟贴啦。

TOP

返回列表
Namecheap
Namecheap.com - Cheap domain name registration, renewal and transfers - Free SSL Certificates - Web Hosting
互联网安全