11 12
发新话题
打印

[攒机咨询] 网站设计

网站设计

网站设计八步骤 " w% d0 y+ T$ R( a

) ?+ y; T. A" D% P* Z, I易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!由于目前所见即所得类型的工具越来越多,使用也越来越方便,所以制作网页已经变成了一件轻松的工作,不像以前要手工编写一行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站,可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为什么呢?常言道:“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。
6 J5 h" ]) F  n( F易舒社区|张江大学城论坛8 @  [/ N3 T5 u; L5 u
一、确定网站主题   k' t4 a3 B: |. R: z9 J' q  {
% l) v0 m5 a; W! U. ^1 C' B
网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站那样做得内容大而全,包罗万象。你没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的特色,这样才能给用户留下深刻的印象。网站的主题无定则,只要是你感兴趣的,任何内容都可以,但主题要鲜明,在你的主题范围内内容做到大而全、精而深。
4 B1 Q+ k/ i3 k- q0 h易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!
5 A9 l5 h  P) \) u/ U& w- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!二、搜集材料 易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学, F% [" z6 B! A" G- e
% _' G  s1 p; P
明确了网站的主题以后,你就要围绕主题开始搜集材料了。常言道:“巧妇难为无米之炊”。要想让自己的网站有血有肉,能够吸引住用户,你就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来,也可以从互联网上搜集,然后把搜集的材料去粗取精,去伪存真,作为自己制作网页的素材。
7 |8 B* E$ G" s0 {' xwww.eshu.org$ f! p* m2 X% U( g' }7 y
三、规划网站
; ^' e, K9 S3 d& b! Z+ ?0 zwww.eshu.org
( ~6 G0 n' u7 n- {易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页才能有个性、有特色,具有吸引力。如何规划网站的每一项具体内容,我们在下面会有详细介绍。 四、选择合适的制作工具
0 u$ p7 I5 A* f* M易舒社区|张江大学城论坛
  k) x7 t. S- k: `易舒社区|张江大学城论坛尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多,首先就是网页制作工具了,目前大多数网民选用的都是所见即所得的编辑工具,这其中的优秀者当然是Dreamweaver和Frontpage了,如果是初学者,Frontpage2000是首选。除此之外,还有图片编辑工具,如Photoshop、Photoimpact等;动画制作工具,如Flash、Cool 3d、Gif Animator等;还有网页特效工具,如有声有色等,网上有许多这方面的软件,你可以根据需要灵活运用。
! w! c" O4 p3 p, pwww.eshu.orgwww.eshu.org* F$ U' I) F5 W+ o
五、制作网页 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!  q6 @* s' d3 B- i2 ]/ Z

3 I7 T& }. ]  w* w7 m  nwww.eshu.org材料有了,工具也选好了,下面就需要按照规划一步步地把自己的想法变成现实了,这是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出现问题时好修改。在制作网页时要多灵活运用模板,这样可以大大提高制作效率。 www.eshu.org$ W/ Q1 G. G( s8 d. }$ r

2 a8 s, P; ^3 M5 R4 `% ewww.eshu.org六、上传测试
8 k/ L' x4 v  i; x# y2 bwww.eshu.org  \% F# Q2 a. h# |# e
网页制作完毕,最后要发布到Web服务器上,才能够让全世界的朋友观看,现在上传的工具有很多,有些网页制作工具本身就带有FTP功能,利用这些FTP工具,你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后,你要在浏览器中打开自己的网站,逐页逐个链接的进行测试,发现问题,及时修改,然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友,让他们来浏览。 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!; V2 @9 [" ]& w" E( I0 p

4 }- |, E2 f% @* e' H易舒社区|张江大学城论坛七、推广宣传
' @' e9 w+ W" @2 a) lwww.eshu.orgwww.eshu.org4 Q, G7 I2 p% Q! f" d" M+ m
网页做好之后,还要不断地进行宣传,这样才能让更多的朋友认识它,提高网站的访问率和知名度。推广的方法有很多,例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。
* |4 ?. Q( v3 X5 Vwww.eshu.org- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!7 {2 b) m6 R. a5 l8 b  ]4 j9 r) ~4 `
八、维护更新
7 q4 a6 i# e7 V易舒社区|张江大学城论坛
# y! x9 j! A9 g3 e易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学网站要注意经常维护更新内容,保持内容的新鲜,不要一做好就放在那儿不变了,只有不断地给它补充新的内容,才能够吸引住浏览者
0 c9 H0 w" u  Pwww.eshu.org★要想学做网页,首先得了解制作网页的工具。 易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学. f" e  ~  ?% |3 F6 [$ y' u; a

) |5 K# V% L6 i" J  S$ f) I- w制作网页主要有以下一些工具 www.eshu.org' y. Z8 b' a+ @- q: `: z  P

( S& Z9 @2 [4 }, X: F. G- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!Frontpage:office自带的一个工具,操作简单,实用,学起来比较轻松,功能不咋地,我不太喜欢。 8 o+ U. P- h4 e" c* v9 a7 s
- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!& F6 k# }  R4 P7 s: \7 X* ^  A- p
Dreamweaver:这是网页三剑客之一,专门制作网页的工具,可以自动将网页生成代码,是普通网页制作者的首选工具,界面简单,实用功能比较强大。建议初学者选用。
/ h7 X9 ]- S' s: I% p) @www.eshu.org
) a8 \0 \* g$ S2 B3 `4 y易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!另外一个工具就是代码编辑工具,例如写字本、EditPlus等,这些工具主要编辑asp等动态网页。 易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学7 ]$ v! ?* j7 z! y5 z8 D+ a
易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!5 z% D# @2 c2 u9 _. r* T4 E
此外还有一些网络编程工具,javascript、java编辑器等。 易舒社区|张江大学城论坛' p0 X% J6 N4 F* m; S' }0 m
易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学3 o$ |2 b$ Q1 Y) H; d; j1 X! v8 V
网页制作也是一个比较吃香的行业,要真正做一个好的网站,还必须有良好的设计功底。所以还得学很多边缘性的软件,例如photoshop、flash等。
, [7 M6 {) J8 Q( A& v! Wwww.eshu.org/ H, j% |; E! s9 }; E) r
大型的网站往往还需要数据库的支持,所以还得懂数据库。sql、甲骨文等。
/ A+ N0 V/ E' F5 O: P6 U$ r易舒社区|张江大学城论坛
& u: k) S6 p& {/ f: @, ?- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!总之,掌握好网页制作,能独立完成一个网站的制作工作,那就不要考虑吃饭问题。随便混就好了!
6 n6 j/ y- W, E  C" }. f1 z7 B - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!5 ^0 q* o7 B  C, c/ J& w
★可以结合 Dreamwaver 和 Photoshop 来制作网页。 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!! [: u. y, z8 |: W0 h" J, k
易舒社区|张江大学城论坛0 e! X4 A1 |3 S$ }) K
Dreamwaver 可以到这里下 30天试用版,不过要先登记一个免费帐号,http://www.macromedia.com/cfusio ... product=dreamweaver
0 p& @2 H# l% }0 L易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学★在网上有这方面的教程
: \; M7 M4 f0 h: g, V8 Q易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学教程 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!) i5 |+ \+ O( o4 ]" K* V
http://www.nease.net/xhelp/ ! @  D* {% |  H6 a; x
http://school.jz173.com/(中国建站专家) www.eshu.org2 U" S3 @- m1 Q5 n" {# a+ I9 O
主页和个人空间 易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!( T3 ?, z; \' X$ _  A  G7 b% k: Z9 T
http://home4u.china.com/(中华网) 易舒社区|张江大学城论坛. A' [2 o" W4 G& q+ W. r
http://www.35.com/yumingzc/yumingzc.asp 易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!% r( |; L. k  y9 ~( r( p7 R' q
建议使用网页制作三剑客Dreamweawer+Firework+Flash 或使用Frontpage
www.eshu.org 张江大学城论坛 易舒社区 Eⓢⓗⓤ.ⓞⓡⓖ

TOP

首先学用frontpage
+ W  z# ?; a: p) D易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!熟悉html代码
7 A6 D, f" N# J% |: I易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!建议初学者使用微软office家族的frontpage制作
2 t2 U+ ]4 D6 ^' r0 a; `- p6 F, gfrontpage2003中文版下载地址 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!& R3 Q2 G' y! u( {+ b+ r
http://www.mbsky.com/SoftView/SoftView_5843.html
6 X7 }. d  C% Z$ L  O( wwww.eshu.org使用frontpage制作网页的简明视频教程 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!4 }. x+ H$ m7 w! P
http://www.hongen.com/pc/homepage/fp2k/fp2k0101.htm
# W9 p, o7 t' E- Z5 H* V0 J. E: d- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!
7 M0 j. ~( L3 B- J' {' J然后学习(推荐)asp php
; L& M: i, s& C" R( s以及vbscript 或者javascript脚本
6 U) x4 t1 d* ?, h! I7 v2 N易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学期间学习一点数据库知识 易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学+ [& k/ N: g6 H2 T2 J/ P) k  }
学习期间可以多下载别人做好的程序源代码 尝试读懂并修改 易舒社区|张江大学城论坛3 `* k( P! [* e2 v4 g  d* d+ c4 a- r* U
自学要求 英语要过关 计算机基础知识不能太差
: g' _3 _- _$ `+ r: f# c5 J- M# H易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学否则 建议去专门的短期培训班学习
1 {4 |4 P' t) n. z( H5 Q4 y7 Pwww.eshu.org推荐你一个网站,可以教会你如何制作网页!
' p0 t. r# Q0 M- t, h- C- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!www.eshu.org" s& G( z* L1 @$ W* e7 j0 b
网页制作网址大全 易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!0 ?3 Y& P$ |- b7 A9 u5 K- O* k
http://www.soww.com/page/060.htm
" T4 c4 X6 r. W- q, l' J易舒社区|张江大学城论坛推荐你一个网站,可以教会你如何制作网页!
4 b# h+ B1 u8 Z. F易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学讲了网站建设的一般步骤,还有相应的教程 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!% M8 @( h; H4 C  D
地址是 易舒社区|张江大学城论坛* _" P  [. r1 d! s# ]; F
http://edu.itbulo.com/zhuanti/stwebdesign/
www.eshu.org 张江大学城论坛 易舒社区 Eⓢⓗⓤ.ⓞⓡⓖ

TOP

一. 网页制作基本技术
9 E. E- M4 a) \6 ?# g易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!1 r: J+ R- t7 C
网页制作的基本要点是:学会在网页中插入表格、图片、动画、视频文件等。 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!) I! K6 V! g7 |/ r  x
- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!' Y+ `/ r) n2 s3 U7 z
下面以“氢气的性质和用途”网页制作为例,简介应用FrontPage制作网页的基本方法。 易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学1 `4 A" G$ U$ r

  k9 s2 }, H& F2 Q1 Gwww.eshu.org在“氢气的性质和用途”网页中我们将插入“氢气球”、“氢能汽车”等图片。插入“纯净的氢气安静燃烧,不纯氢气点燃爆炸”等FISAH动画,插入“氢气燃烧”的视频录像。
) g' e$ l! t- [) [
1 C" x2 [: H7 {www.eshu.org1.建立文件夹
  x7 R! b+ e, G* m7 ]/ t% E# n易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学
1 `, l" b+ E/ m& z+ M- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!制作网页前,要收集素材,并将收集的素材放在自建的文件夹中。
. o9 k" I8 N5 O  x  Jwww.eshu.org
# U* V: D- M9 v+ {8 b- d* b5 Y易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!这里我们先在E盘建立一个H2文件夹,在H2文件夹中再建立SC文件夹,将收集到的素材放在SC文件夹中(图1)。 9 G/ w; o% h$ y% d. z; g

+ d& E2 ~' c  {# q( E2 {+ ]5 {www.eshu.org易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!* S7 U- b% Q, j
2.收集素材 易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学# U4 _5 o. q5 }) {" z# U# x$ T
www.eshu.org$ Z1 H7 Q' R- u9 R4 j  d
素材可从购买的光盘上复制,也可从网上搜索下载。 易舒社区|张江大学城论坛/ n5 u6 \, ?* o3 T

5 M7 u$ |! z- D" l9 V易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!2.1视频素材的收集
' n& C' F$ L1 ]5 @) ywww.eshu.org易舒社区|张江大学城论坛0 s! z3 h$ N  c) ?9 I/ O7 k+ ~
“氢气的性质”录像是我们从初中化学VCD光盘上复制的。
& c! b$ W/ O9 X: B# L! qwww.eshu.org易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学  g. u' b9 U" W9 N2 v; \
方法是,用资源管理器打开VCD光盘文件,在MPEGAV文件夹中找到所需的MUSIC07.DAT文件并复制到SC文件夹中,并改文件后缀名为MUSIC07.mpeg(图2) 易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学+ B1 R: a) @  q! ]% |  Z8 u

0 r" G+ ~! b: M% Q4 Z6 b4 Z2 Cwww.eshu.org
/ x- Q  n+ _2 j; J- ]) F易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学2.2网上图片的收集 易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学  ?! o7 ^$ o# A/ g# j

# N; r, F9 f3 t9 A$ g易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!利用搜索引掣可在网上得到所需的图片资料。
0 v5 D; @1 a  f) y: g  k- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!
  T( p* h/ q: z( h4 G易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学这里应用google.com来搜索图片。 www.eshu.org$ \5 {& J7 T$ K5 v6 S

6 M' ?: a6 t2 t# b易舒社区|张江大学城论坛在浏览器地址栏中键入google.com,打开页面后再在搜索栏中分别键入关键词“氢气、氢气球、氢电池”等。将找到的图片另存到SC文件夹中(图3)。
4 R2 ^2 X0 L- P. H/ s易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学
* O& v. Z! A3 D" ?1 `; c' W6 _- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!2.3网上动画素材的收集: www.eshu.org: k6 w1 d$ z2 p/ q/ t4 k& E

: b! _( k% s- W8 k; v课件类FLASH动画素材一般要到专题网站去收集。各学科的专题网站很多,例如中小学教育教学网(K12.COM.CN)搜集课件很方便。本网页中应用到的FLASH动画有“氢气的验纯(文件名:geh2.SWF)”、“氢气还原氧化铜微观过程(文件名:hecuo.SWF)”等,收集过程是:进入先得化学资源网(http://www.yeschool.net/phd/),在“搜索”窗中键入“氢气”,在搜索到的“匹配记录中”找到自己想要的素材并下载(图4)。 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!! F( N( v% ?! B( k& W# o( Y9 L, I

) m+ S2 F6 p& L9 S. N( N7 Mwww.eshu.org此时用鼠标右键单击“下载”文字,在弹出的菜单中选择“目标另存为”可将动画文件下载到本机指定文件夹中。
1 ^9 U0 s# ?6 I# l. w% W% xwww.eshu.org
2 N8 Q! C( {# I8 ]易舒社区|张江大学城论坛如果FLASH动画素材是在浏览器网页中看到的(嵌入在网页中),选择另存网页的方式,不能把FLASH动画另存下来。这时可打开浏览器工具栏的“工具”菜单,找到“Initernet”选项,在“常规标签”中间部分“Initernet临时文件”中打开“设置”按钮,再在弹出的对话框中选择“查看文件”,即可打开网页浏览器平台自带的“临时文件夹(Temporary Internet)”该文件夹产生的文件是按时间顺序排列的,最后时间内打开的网页,其临时文件在该文件夹的最后部分,所以在该文件夹中的最后部分文件中寻找FLASH动画特有的图标 ,逐一打开看,可找到你需要的动画,再选中该文件复制后,粘贴到素材文件夹中(图5)并重命名文件名。
, U4 b# w& J' ]2 A( L易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学
; V0 m2 f! K/ [) d2 q8 o6 N9 g易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!3.制作网页
/ N1 n. F% o' P( @$ b) M* A4 f0 s易舒社区|张江大学城论坛
) Y! S. w1 u0 d4 Kwww.eshu.org3.1打开FrontPage程序 " ^, g  [7 q8 a# _. e

; U1 B& |5 O8 b" n! \( u$ dwww.eshu.org鼠标指向开始菜单,在程序中找到Microsoft FrontPage 程序,单击即打开FrontPage程序。 2 s  G  D' @1 ?3 @3 B
易舒社区|张江大学城论坛  d. f1 U7 e! r8 u
3.2创建网页 www.eshu.org4 Q: D$ Y! X1 A+ x' |6 e

8 U6 I! j; u5 g' \www.eshu.org鼠标指向文件,在下拉菜单中单击新建。在弹出菜单中选中普通网页,单击确定。
5 I5 b0 F0 M% J7 t' jwww.eshu.orgwww.eshu.org/ e4 R( L, s4 {7 a4 ^
易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学6 E: x2 |1 C# C) z' ~
命名网页文件名为“氢气”,存盘,存盘路径E:\H2\ 。
% ]6 G' E2 {# p2 |' V! y易舒社区|张江大学城论坛www.eshu.org: k/ e2 q" V8 J- `, @. N/ g, n
3.3网页制作 易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!5 \% Y# {% ~8 b. z' z$ ?% g$ z
易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学5 v# Q# R! b" u: E% n
3.3.1插入表格 易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!' N# s8 @5 Z$ h" J( u# j& ?/ z& W

7 L# g( Z/ W: n5 r+ R1 @- Ewww.eshu.org我们用PowerPoint制作演示文稿时,可以将文本框或图片、表格等放在工作区的任意位置,但用FrontPage制作网页时,就不能将这些对象随心所欲地放在页面上了。
) L* E1 q# A1 Z5 _- h8 X' ?易舒社区|张江大学城论坛- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!, t. V. E5 k6 c& `# M  `4 B5 Y' @
为使各对象能在页面的一定位置上放置,在用FrontPage制作网页时,常用表格的单元格把页面划分成一个个区域,文字或图片等对象就填充在单元格中。即单元格起到了固定对象位置的作用。 易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!4 W4 Q: `9 J. `$ A

( E( t- e) {. d( P  K( S单击插入表格按钮,选定行、列数,即可插入表格,有时在大的单元格中,还需插入小的表格,进一步把大单元格的区域分成小的单元格(图8)。 易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学  D+ N  X' `2 k
易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!+ ^7 m$ t& y" Y. ]
( i" \& R2 C3 k: e" l, u
一般情况下表格的框线不需要在页面上出现,可单击鼠标右键,修改表格属性,将单元格边距、单元格间距、粗细都设置为零。
3 {  I7 F( q9 A' G/ S& t易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学
) R# b" T, H, Y- {0 `7 ]+ f4 ^易舒社区|张江大学城论坛www.eshu.org3 U3 V  r) |' v! R
在表格的单元格中可写入文字,调整文字的字体、大小、颜色。也可设置单元格的背景颜色。“氢气的性质和用途”网页上插入的表格及文字排列如图10所示。图中明、暗相间的区间为初始插入的表格的单元格,各区间中的分割线为在此单元格中再插入的表格的单元格。没有文字的单元格中将插入图片或动画。 易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学0 v' ?% p+ n. h* ~0 ^
易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学' C5 F$ @& z' q- H0 k. W8 C" F, B
+ L: a$ P$ n5 }
3.3.2插入图片 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!- v" G+ M/ f  o7 U( G7 \

- h0 U5 N) w. t* g. [* Q易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学网页中可插入后缀名为GIF和JPG等格式的图片。GIF图片又分为静止图片和动画图片。在本网页中的原子模型、红色线条、电视机画面就是GIF动画图片(文件名为052.GIF 、0182.GIF、0354.GIF);网页中气球、氢能汽车、氢气的实验室制法等图片都是JPG格式的静止图片(文件名为qq.JPG 、HYBRIDFO.JPG 、0356.JPG)。
+ d; r) @$ N' R  _6 x- pwww.eshu.org
- q& n; Y& R0 K1 t+ G3 T易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!插入图片的操作是将光标停在需插入图片的单元格中,在“文件”栏中选中“插入”,在下拉列表中选中“图片——来自文件”,再在弹出的对话框中找到图片所处的文件夹及文件名,再单击“确定”即可(图11)。 易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!' D6 K% x6 ^5 F$ Z2 ~9 _; {
3 I+ L" y  W  T% F: q
3.3.3插入FLASH影片或视频影片 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!: e' c* \; N$ T/ y5 y

# e0 C* }/ M8 n4 }# e- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!应用“插入”下拉菜单的“高级”选项,可在单元格中插入后缀名为SWF、AVI、MPEG等影片文件。 7 c% f( D) G8 ], g8 ~+ e
易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学# v8 X( C9 l7 W. m% B3 @$ g
在本网页中,我们插入的FLASH影片有“氢气的验纯”(文件名:geh2.SWF)、氢气还原氧化铜微观过程(文件名:hecuo.SWF)。
9 l( i7 [2 X8 q; p  V易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学* a' b( e8 y" c9 g8 E' A
插入FLASH影片的操作是将光标停在需插入图片的单元格中,在“文件”栏中选中“插入”,在下拉列表中选中“高级——插件”,再在弹出的“插件属性”对话框中单击“数据源”右边的“浏览”,找到需插入的FLASH影片,再单击“确定”即可(图12)。 易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!6 `5 z1 a# q5 Z

; g& ?% b/ F+ F  e- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学! x' R4 }1 {$ @% E% c3 a- d
图12 往文本“氢气的验纯”下方的单元格中插入FLASH影片(文件名:geh2.SWF)
+ J1 W9 C. I+ ?! S# z易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!
% |' A) o& D- f+ j8 S5 X易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学在单元格的位置插入插件后,生成一个插头接口的标记 。 易舒社区|张江大学城论坛8 q( `% p3 T, Q' S
易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!: B# s. m1 f7 X4 C; ~: a' ^3 ^% F
从光盘VCD上拷贝的视频录像(.AVI、.MPEG),要插入网页中时,可在“插入”菜单栏中直接选“影片”选项,在弹出对话框中找到有关文件选择“打开”即可。 易舒社区|张江大学城论坛4 Z, l8 o& s( {, J

9 A5 K# e; @' I- G/ F' ZAVI、MPEG格式的文件容量一般较大,直接插入到网页中时,会严重影响网页打开的速度,故一般不适宜在网页中直接插入,对这类影片可采用超级链接的方式进行下载播放。
3 h" g4 ?1 g4 d; Pwww.eshu.org
" ?4 Y# Y6 L. W" y' i" F7 Y* e易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学3.3.4超级链接设置
% C* N5 G& ~. O! Y5 L' gwww.eshu.org
! ?8 p, ^9 i5 `- B6 wwww.eshu.org网页制作的一个重要步骤就是对有关的文本、图片设置超级链接。在本网页中看不到的网页、图片、视频、网站等可以应用超级链接的方式发出指令在浏览器窗口中打开。
7 s+ M$ _' }( {) v易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!- s/ }1 I# m+ d& p4 g, {
在本网页中,图片超级链接有:图片“氢能汽车”——链接到另一更大的“氢能汽车”图上(文件名:HYBRIDFO1.JPG)、图片“电视机”——链接到“氢气的性质”录像片(文件名:MUSIC07.MPEG),图片“氢气的实验室制法”——链接到FLASH影片“氢气的实验室制法”(文件名:zh2.SWF),图片“中国新能源网”——链接到中国新能源网(网址:http://newenergy.org.cn),两个放大镜图片分别链接到“氢气的验纯”、“氢气还原氧化铜的微观过程”的FLASH动画上(文件名:geh2.SWF、hecuo.SWF);在本网页中文本的超级链接有:“氢氧混合气点燃爆炸演示”——链接到“氢氧混合气点燃爆炸演示”(文件名:bc1.SWF),“氢氧混合气点燃爆炸微观解释”——链接到“氢氧混合气点燃爆炸微观解释”(文件名:bc2.SWF)。
) ]9 v. D- h& G- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!2 l6 J6 E4 P3 U$ c
超级链接是非线性超文本结构的网站及网页的核心。
# w& |5 Q. `* Z) M8 _7 g- q1 Xwww.eshu.org
# B! @% M3 v' i# |: i易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学设置超级链接的方法是:先选中图片或文本,单击鼠标右键,在弹出的菜单中选中“超级链接”,弹出“创建超级链接”窗口,再选中URL窗右边的“制作一个指向您计算机的超级链接”按钮,弹出“选择文件”对话框,选中需链接的文件,或在URL窗口中直接键入网址、文件的路径名,(图13、图14)。 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!; [4 T0 K& U. o
- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!: S) y; I; c& w$ N4 H

9 T2 b9 S' @0 y' i: j) K图13 对图片“氢能汽车”进行超级链接设置(指向文件HYBRIDFO1.JPG) 易舒社区|张江大学城论坛$ Z: ]9 }5 a4 ]+ K8 P
  j/ W# k4 w# n1 Q
易舒社区|张江大学城论坛/ {4 f/ U' S) T* x& C6 q- g; ~
图14 对图片“中国新能源网”设置链接,键入网址:http://www.newenergy.org.cn . R1 s6 K: P% o

$ `& b7 H# {, A9 ]) `, a2 t5 T易舒社区|张江大学城论坛
7 E; h  q7 z( ~. d# ?2 ~) ^易舒社区|张江大学城论坛这里要注意的是,编辑超级链接时,“目标框架”一般不用“默认值”而是选择“新建窗口”以便网页的浏览(图15)。 易舒社区|张江大学城论坛/ }+ ]) N. |8 r) s

) |; }4 j! ~$ ]易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学最后还想说一下滚动字幕的制作,选中需要滚动的文字,鼠标指向“插入”菜单,在上拉列表中选中“组件——字幕”,单击弹出对话框中的确定按钮即可。
9 |' D. ?/ {0 l: ~4 S, n易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!
# v6 b: D! N1 B7 q9 q% Z易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!到此,一个网页就基本制作完成了。如何知道网页在浏览器中的浏览效果呢,在FrontPage窗口的左下方有三个窗口切换标签: ,普通窗口就是我们的工作区,HTMH窗口可查看网页源代码,预览窗口可随时查看制作的网页在浏览器中的效果(图16)。 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!; K3 d* \( X+ B" S2 S1 G  z

& I( ?; P( j# l( l! h9 f1 xwww.eshu.org
* C. ]" @6 Q, m) z6 v- a, W- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!图16 “氢气的性质和用途”网页在浏览器中的图象 www.eshu.org8 s9 b3 F3 o3 n; g- x' I# J
易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学2 J$ h5 s: O# H# k9 S& S8 p8 b" _
4.将存放网页及素材的文件夹转换成WEB文件夹 www.eshu.org" m9 s+ y2 L$ h$ \1 \& {; G( Q
易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!6 d( Y8 b1 G# C' X9 F$ d
我们是在H2文件夹中建立的SC文件夹基础上制作网页的,这样的网页的各种链接一般是绝对路径关系,如果把H2文件夹换一个位置(如复制到D盘),再打开该文件夹中的氢气.HTM网页,就可能打开的是一个有一些图片看不到,单击一些链接无响应的缺损网页,这样的网页是不能放在网站上对外发布。这样的文件夹叫非WEB文件夹。
# Q  e3 U: X2 S  T4 o7 h' c: B: v易舒社区|张江大学城论坛
" I) B6 I- L8 }% S9 o4 }如果把存放网页及素材的自定义文件转换成WEB文件夹,则文件夹中的网页与各链接文件的关系就会变成相对路径关系,这样把该文件夹不管放到什么目录下,该网页在被打开时都不会有缺损,且超级链接都能正确响应。 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!4 n( r- ~5 ]4 \8 a: ?" n
) G" c( N0 j# r* i% M* }* y
如何将非WEB文件夹“H2”转换成WEB文件夹呢。操作很简单。 易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!( C% J9 h) q# u2 C9 {/ H

+ t1 W" J- k( R6 N* G+ \8 c1 I0 r* g打开在FrontPage 程序后,单击“文件——打开站点”出现打开站点对话框,在“查找范围”窗口中找到E:\H2文件夹,单击“打开”(图17), 易舒社区|张江大学城论坛; O+ o9 s' F, T2 X% X6 w
www.eshu.org$ u5 P5 _8 d3 M1 D' B- k
易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!3 I) {' [" F9 |+ T
图17 以站点形式打开H2文件夹
7 T( u% z9 _3 ~8 H, b易舒社区|张江大学城论坛
3 \$ I+ h0 j) ?- m& m易舒社区|张江大学城论坛这时会再弹出一个“向文件夹中添加FrontPage信息”对话框,问:是否向H2文件夹中添加FrontPage信息(图18)?单击“是”,会自动生成文件夹列表并打开网页“氢气.htm”(图19),这时文件夹“H2”就转换成了WEB文件夹,在该文件夹中自动生成四个文件夹:用来存放图片和网页等文件的images和_private文件夹,含有超级链接信息的隐藏文件夹_vti_cnf和_vti_pvt。在本网页制中过程中,我们已经将素材文件放在了SC文件夹中,所以images和_private文件夹可以删除。但_vti_cnf和_vti_pvt切不可删除(图20)。 易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学3 n8 F% `% Q4 F8 q6 J: ?$ s

6 l. k5 k8 m1 M: p' H$ |) D: P- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!当H2文件夹转换成WEB文件夹后,其中的网页“氢气.htm”上的超级链接关系即转换成相对路径关系,该文件夹放在任何目录下,网页打开时不会缺损。 易舒社区|张江大学城论坛) _; N# V; w8 h# Z
www.eshu.org* E+ f/ j7 N' O# d1 s, R
5.网页(网站)发布 www.eshu.org6 G; O# R: H4 S" p

/ C+ ?3 _( j2 t* ^& ]/ G易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!有时我们要把已经制成的网页或网站存放到特定的文件夹之中。成为可对外发布的网页或网站。例如,我们想把“氢气.htm”网页发布到“氢气”文件夹之中。 www.eshu.org( A; E  \5 t) Y( J
易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!* ]4 l4 [% b, A# w8 D- @* `- ]
“氢气. htm”,网页的路径是E:\H2\氢气.htm,在H2文件夹中还有SC素材文件夹,我们用到的图片、动画、视频文件都放在这个文件夹中。
& V  [- p9 H3 y9 T- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!
, _6 o) T; @4 T. N. e易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学先在E盘建立一个文件夹,命名为“氢气”,这就是我们将要把网页发布后存放的文件夹。在FrontPage 程序中打开网页氢气. htm,鼠标指向文件,在下拉菜单中选中“发布站点”,弹出“发布站点”对话框,单击“指定站点位置”窗口右边的浏览按钮,找到e:\氢气,选中后,用鼠标单击“打开”,再单击“发布”按钮,出现确认对话框,单击“是”,“H2”文件夹中的有关文件就会导入到“氢气”文件夹中,“发布完成(图21、图22、图23)。 易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学. n/ y: d  u1 H* r5 ^5 l5 w
www.eshu.org) j; I; F! S6 t  a3 C, q! U2 q9 r" M
注意有些网站的服务器不支持中文路径,建立文件夹及网页文件时最好用英文名称或数字名称。
2 H0 q7 |( j& d! Q易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学
3 D  d; p, t- d6 K" w& M6 C& qwww.eshu.orgwww.eshu.org* t' M/ Y/ e) I5 J% B% B
图23 成功发布站点 6 [8 o3 A* {5 D+ P0 N0 }- {# \5 X
易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学# ~; s9 r7 s- ~+ [
我们在光盘H2文件夹中放了两个网页,一个是“氢气的性质和用途”(文件名:氢气.htm),另一个是“氢气的性质和用途”的表格文件(文件名:氢气网页表格.htm),在第二个文件中有部分图片及链接,是不完整的网页。读者不妨试一试:在FrontPage 程序中打开第二个文件,照着我们前面网页制作的方法介绍,把它制作成与第一个文件画面,链接关系一样的htm文件,并发布。
6 T4 t. u2 `- M5 I* L8 ~- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!( D5 {$ ], e( X

4 [2 d4 ]+ ~8 E$ V. Ywww.eshu.org
( N8 ^4 f% k% g" n# N" |- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!二. 制作网页的注意事项
% @+ @( K- k# C" E- o6 h* g' J3 c, |1 e, i5 H  [. B
应用于课堂教学或专题学习网站的网页与平时在网上浏览的公司网页相比,有较大的区别。
. j% l: F* x' o+ b2 f易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!
5 f* B5 z- B& g4 X9 z) U9 z; }4 r易舒社区|张江大学城论坛页面设计上,构图要力求简明,图形、标题、文字标注三者并重,不能像公司网站的主页,看得人眼花缭乱。 1 b2 V$ {# I  ^( L5 y! b
易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学. E  b3 N4 u' i2 r: t* i
动画要适当,不要一打开网页到处都在动,让人不知看什么地方是好。
9 y" S8 b3 R. }; i易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学
! B, Z$ J) S9 X2 p% D主题要鲜明,一个网页一个主题。
- p( L) Q0 M' c% |3 B3 {2 c易舒,博客,论坛,学生社区,张江,大学城,大学生,上海,中医药大学6 C  r3 s$ l  s0 H% s- I6 ^
文字不宜多。一个页面不要超过300字,字要大一些。
www.eshu.org 张江大学城论坛 易舒社区 Eⓢⓗⓤ.ⓞⓡⓖ

TOP

做网站首先是个体力活

TOP

干啥啊?有比赛啊??
喜欢酸的甜,就是真的我,哦耶!

TOP

业余时间学习一下还满不错的~~~

TOP

额。只要肯花时间。
; i# ~/ i: y9 \$ h+ M易舒社区|张江大学城论坛
0 }2 [& G, P& [5 f" k做个网站。不难额...
●莪等誰說,寶貝我帶伱囬家"

TOP

引用:
引用第4楼圆咚咚于2007-06-23 22:23发表的 :- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!5 d6 w5 w. W- A2 c: E# j/ e
干啥啊?有比赛啊??
6 d$ X( }) M' c2 U9 fwww.eshu.org为易舒做首页 有没有兴趣啊? 呵呵
www.eshu.org 张江大学城论坛 易舒社区 Eⓢⓗⓤ.ⓞⓡⓖ

TOP

引用:
引用第7楼oAmAo于2007-06-25 10:48发表的 :
- ^8 {& ^/ \" pwww.eshu.org
* p. P7 n4 i; Q# C' V易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!为易舒做首页 有没有兴趣啊? 呵呵
# l9 V9 |6 K. i& `, G( g我暑假自学一下看看会有什么成果

TOP

引用:
引用第6楼粉紫er于2007-06-24 02:04发表的 : ( z0 n! U: ~1 j+ n7 Z
额。只要肯花时间。
5 Z/ d8 B  u* N6 @9 z, X- 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!$ K0 J) t1 m4 U
做个网站。不难额...
# w  S2 ^0 m9 Q: z易舒社区 - 张江大学城论坛|属于张江大学城社区学生们自己的网上家园!做一个网站并不难,但是做一个好网站却并不容易,有的时候花了时间也不一定能做好,还要看你怎么做,用什么软件做。有些还会涉及到一些编程的东西,那就不简单了。 www.eshu.org' D7 ~* h. {; k( f: a+ Y* H- @
FrontPage 还有Dreamwaver用来做网页的吧。一个网站好像要涉及很多东西的吧~~

TOP

 11 12
发新话题