|
网络发烧友
|
1#
大 中
小 发表于 2007-1-4 12:34 只看该作者
首页的实现-dreamweaver构建blog
163K网站系统官方论坛5 Q% D8 `- |" J, v
163k团购网站系统官方服务论坛; Q5 Y0 n( F5 j ^( v& @) e
现在，万事俱备，应该着手doking’s blog的页面设计和前台的实现。bbs.163k.com3 c4 R; J6 ^& I. r, _
4.1 基本页面设计为互联网事业发展提供源动力！. @' Z9 e: `6 T1 L) E6 l
这里，不是要谈网页艺术创造的知识，而是讲解在 mx2004中构建网站内页的思路和方法。团购网站系统,团购网程序( ^$ C I3 ?" y/ p( N3 J9 b
4.1.1 网站设计思路团购网站系统,团购网程序2 P' o- ?- b# |$ ?$ X
每个网页开始前，一般要在firworks或在photoshop等图像设计软件中设计好基本页面设计，图4-1-1就是photoshop中设计好的基本页面设计图。163k团购网站系统官方服务论坛: ~) a* Z% \. } t: R1 g8 q
: {- z4 w6 o( P2 ]7 M3 @bbs.163k.com图4-1-1 doking’s blog基本页面设计图bbs.163k.com7 a, \7 \) {2 \# E) M3 ~) F
在图4-1-1中序号①画上红色方圈部分的是网页的左边栏目，目前是空白的，它的栏目在以后章节中会一一添加上去的，序号②画上红色方圈部分的是网站的导航条，它是由第三章建立的dkblog.mdb数据库中的lm表动态生成的。基本思路已清楚后，开始构建立网站的模板。163k团购网站系统官方服务论坛8 d0 ~2 f; a0 h3 H0 o* u
4.1.2 构建网站模板
/ A ^5 D) M/ @# z163k团购网站系统官方服务论坛 设计思路：构建网站模板，统一网站网页设计。网站的栏目菜单内容由于数据表动态lm生成，也方便网站栏目菜单内容的修改。
$ @0 s v0 V- O- Z0 b* p163k团购网站系统官方服务论坛 （1）打开【文件】→【新建】，打开【新文档】的对话框，选择“类别：”为“模板页”，选择“模板页：”为“asp.net vb 模板”,结果如图4-1-2所示。
8 N1 z# d* ]' k7 J. T为互联网事业发展提供源动力！
5 o/ `7 e7 `' @! A0 }0 a5 N0 |163K网站系统官方论坛图4-1-2 新建模板对话框163K网站系统官方论坛$ B6 T1 `/ {* p/ {" a2 t
（2）单击“创建”按钮，插入图层，在其属性窗口中，把id设为“main”，把“左（l）”和“上（t）”设为0px，把“宽（w）”设为100%，把对齐方式设为居中。这样是为了把网页居中。为互联网事业发展提供源动力！" Y0 z+ H5 e( p
（3）插入一个表格，把id设为“bodyt”，设宽为780像素（这个是根据你的基本页面设计图的宽度而设计的），单位格的边距和间距设置为0，边框粗细设为0。
# g7 m$ h, U5 @: i+ ?" W1 s为互联网事业发展提供源动力！ （4）把“bodyt”表格第二行的垂直对齐方式设为顶端，再拆分为2列，第1列的宽度设为220px，第1列的宽度设为560px（分配列的宽度也是根据你的基本页面设计图而分配的），把第1列的背景颜色设为rgb（236,236,236）。bbs.163k.com# w+ s) K h- X5 N
（5）给“bodyt”表格的第一、三行分别插入相应的背景图，把第一行的的垂直对齐方式设为底部，水平对齐方式设为右边。
% T3 j! U# a0 A/ w! v7 R+ m3 V为互联网事业发展提供源动力！ （6）还可以根据需要设计好标题、字体大小，连接字体的颜色或或配色方案等。, E: B; H! d" A! Y
（7）建立网站的导航条。团购网站系统,团购网程序" j! L2 i) U/ T3 A/ b
①启动access2003，打开dkblog.mdb，在lm表的lm字段中按顺序输入、3d设计、网页设计、网络编程等4个记录，如图4-1-3 所示。
/ f7 K9 C* [" g, g( p6 y163K网站系统官方论坛
; R7 X2 C/ N% K5 a$ j" Q5 r- lbbs.163k.com图4-1-3 lm表数据录入
2 Y( F7 z: P5 J团购网站系统,团购网程序 ②返回，切换到【行为】面板，单击“+”按钮，在下拉菜单中选择“数据集”，如图4-1-4所示。163K网站系统官方论坛3 s H; }3 e4 J$ ?% V7 E
 6 Y! w' P0 h' ]0 w" ]
图4-1-4 添加数据集bbs.163k.com a0 ^% g& A: M' J9 K% S
③在弹出【数据集】对话框中，输入数据集名称为“menuda”，在连接下拉菜单中选择“dkconn”，在表格的下拉菜单中选择lm表，选择列为“全部”选项，在排序下拉菜单中选择字段“lmid”，设排序为升序，结果如图4-1-5所示：
7 W5 U/ Z1 A ~" Z& O163k团购网站系统官方服务论坛 163k团购网站系统官方服务论坛0 n( `* k5 i' ^0 _" j
为互联网事业发展提供源动力！7 s/ Z7 x" x+ A2 B7 E7 X2 @$ k
3 l# m5 O6 z$ u163k团购网站系统官方服务论坛 4 bbs.163k.com: R7 |! K0 w: T% z' p) z, G
2 g) f, k5 P- ~! `. t( z5 V1 t为互联网事业发展提供源动力！团购网站系统,团购网程序! H/ r% Q3 |( J8 T5 @: v0 B9 T
图4-1-5 数据集对话框
! H# I& w6 D3 z" Ibbs.163k.com ④单击“测试”按钮，出现如图4-1-6所示的对话框，说明数据集创建成功，单击“确定”按钮完成。163k团购网站系统官方服务论坛 R! S0 a7 |: F1 z
/ n8 `" B8 Z+ j( Ebbs.163k.com 163K网站系统官方论坛6 T0 J# P) V* u7 A
图4-1-6 数据集测试对话框
8 l8 {% R9 d8 }% O5 R团购网站系统,团购网程序 ⑤切换到【绑定】选项卡，展开数据集(menuda)的字段，如图4-1-7所示：
. ], i/ x& ?1 O/ J! i. u" R7 O4 S163k团购网站系统官方服务论坛 - R- j# K; n" m+ m
图4-1-7 绑定选项卡163K网站系统官方论坛; ?/ O+ `* y% t9 H' O! O, l
⑥拖拉lm字段至表格bodyt的第一行，如图4-1-8所示：
2 ?6 A' W' s# m$ ^1 m0 K& obbs.163k.com
+ @6 `, P1 C7 F, }5 C8 C; E2 p) D! x为互联网事业发展提供源动力！图4-1-8拖拉lm字段团购网站系统,团购网程序' h( f0 W: K0 m, C6 M
⑦放开鼠标，这时第一行会增加一段带阴影的字符：{menuda.lm}，在其前输入“主页 | ”，其后输入符号“ | 联系我们”，结果如图4-1-9所示：
9 I$ R3 y. G1 Z# F7 }1 L* Q; U+ ^7 X团购网站系统,团购网程序
- G. t: f1 x- R2 y163K网站系统官方论坛图4-1-9 绑定数据到bodyt表中
. g; y& O) Y/ Y9 I4 t为互联网事业发展提供源动力！ ⑧选择带阴影字符{menuda.lm}和后面的字符“ | ”，选择【插入】菜单→【应用程序对象】→【重复区域】，在弹出【重复区域】的对话框中选择数据集为“menuda”，把显示记录选为“所有记录”，如图4-1-10所示，单击“确定”按钮完成网站导航菜单。为互联网事业发展提供源动力！+ ]( j; x- r( L
 bbs.163k.com9 I: Y4 i2 _( c6 T: a1 \) I
图4-1-10 重复区域对话框为互联网事业发展提供源动力！* Z u0 d5 O; W+ R
（7）把鼠标移到表格bodyt第二行第二列，选择【插入】菜单→【模板对象】→【可编辑区域】，在【新建可编辑区域】对话框中，输入名称为“mainbody”，按下“确定”键，如图4-1-11所示：
9 ~" y$ F: y. b. e) h9 I! ^. @团购网站系统,团购网程序
' U1 y0 \, J* e) M0 U+ T) L团购网站系统,团购网程序图4-1-11 新建可编辑区域
/ P @5 h* |3 }5 V0 B$ @5 W163k团购网站系统官方服务论坛 这样就完成网站模板的初期工作，保存模板为bkblog.dwt.aspx。bbs.163k.com. S9 s0 y" v2 p4 t) ?9 V
4.1.3 首页的页面设计
) O, \7 c( Z6 y为互联网事业发展提供源动力！ 设计思路：完成网站的模板建设工作后，得以它来构建网站和更新网站。为互联网事业发展提供源动力！% H& a9 [. V& ^' o% B0 N
（1）新建“asp.net vb” 动态页，打开【修改】菜单→【模板】→【应用模板到页】，在弹出的【选择模板】对话框中，选择模板“dkblog”，单击“选择”按钮，如图4-1-12所示：bbs.163k.com1 Y3 y1 i6 w% w N
4 j+ {) L! c3 Z* g! v; J) x图4-1-12 选择模板bbs.163k.com! N: a8 R j5 O
（2）把鼠标移到“mainbody”可编辑区域中，插入表格，设其id为“ztre”，其实它设计成如图4-1-13所示，这是每一个学习笔记将要显示的内容。为互联网事业发展提供源动力！6 b' f3 H6 F5 B
`9 c, `" U. \6 x6 f163K网站系统官方论坛
" C5 o/ T6 y6 d! s+ ^; @: P163K网站系统官方论坛
) `" m; b0 C5 T" _$ s1 } 4 bbs.163k.com) {( L1 Z" q6 S
" s( d. e* v4 h% [/ V2 q163K网站系统官方论坛
1 ~& I( P: ~( `, o8 |团购网站系统,团购网程序图4-1-13 每一个学习笔记将要显示的内容
1 b/ Q5 I( K2 ~' K4.2 插入数据集团购网站系统,团购网程序! L1 {1 o! q; W: P# D
这一节讲解的插入数据集可没有上一节讲解的那么简单。首先看看图4-1-13，每个学习笔记将要显示主题、发表时间、笔记分类（即所属分栏目）、作者（姓名）、回复（个数），再来看看zt表其设计图（3.2节中的图3-2-2），只有lmid（分类栏目的id），没有栏目名，这个要连接lm表才能取得；只有yhid（发表者的id），没有作者的姓名，这个要连接yh表才能取得；其它都可以从zt表中获得数据。“好复杂啊！”其实不用担心，在access中就可以解决一切困难。
, I+ Q7 Q- K& o: K% \5 Y163k团购网站系统官方服务论坛 4.2.1 建立数据表连接查询
! P# B/ p9 h1 N Y. |163K网站系统官方论坛 （1）启动access2003，选择【查询】→双击【在设计视图中创建查询】，在弹出的【显示表】窗口，如图4-2-1所示：
6 V8 V0 k0 a' T, wbbs.163k.com 团购网站系统,团购网程序4 {# {& c0 N1 ^/ G3 T
图4-2-1 添加查询连接表163k团购网站系统官方服务论坛5 g( T* }- j+ X: _, w' O' [- q" k
（2）按次序分别添加lm表、zt表、yh表， 结果如图4-2-2所示：
. m) Q+ f7 Y* @0 B: R: x163K网站系统官方论坛 163k团购网站系统官方服务论坛4 b c+ ]# H' G5 @$ b
图4-2-2 数据表连接视图
1 t( s1 i' c9 t) w. }; \163k团购网站系统官方服务论坛 （3）把查询字段设计为，如图4-2-3所示：$ J2 z9 s2 Z6 k& w0 \' ?
 163K网站系统官方论坛, c/ F5 J( a" b7 r$ P# w5 @9 y
图4-2-3 查询字段设计图163K网站系统官方论坛6 S% a4 d6 G$ P( k0 X h6 V
（4）保存这个查询为ztre，完成在access中数据表连接查询。
+ _2 n. B$ ^3 u V) Y% j B163k团购网站系统官方服务论坛 4.2.2 插入数据集163k团购网站系统官方服务论坛. q7 S9 i8 a# m
（1）返回到，切换到【行为】面板，单击“+”按钮，添加数据集ztre，选择表格为刚才在access中新建的查询ztre，其它的有关设置，如图4-2-4所示：163k团购网站系统官方服务论坛2 `* c! [/ Z! Y8 e. I
 163K网站系统官方论坛# D- @6 Y" o2 \
图4-2-4 ztre数据集的设置
* j8 i/ h' g/ o% ?163K网站系统官方论坛 （2）切换到【绑定】选项卡，展开数据集（ztre），拖拉字段ztname替换表格ztre中的“学习笔记主题”，拖拉字段zttime替换“发表时间”，拖拉字段lm替换“分类”，拖拉字段zytext到表格ztre的第二行空白处，设计如图4-2-5所示：163k团购网站系统官方服务论坛4 a" T/ A+ n: i% G; C9 s! Y, P
 团购网站系统,团购网程序" j9 T( d$ H$ W9 U4 s1 Z5 {: L {$ l
图4-2-5 绑定数据到ztre表中团购网站系统,团购网程序" z2 k. i( u8 ~
（3）切换到【行为】面板，可以看已增添了许多动态文本，双击动态文本（ztre.zytext），选格式为“编码—html编码格式”，如图4-2-6所示：
! L" h6 Y) n1 a: W- a. x4 d( Nbbs.163k.com
& e1 j0 {7 y! x! A+ B163k团购网站系统官方服务论坛图4-2-6 设动态文本格式
$ ~* ] G( v$ M3 F6 x" `为互联网事业发展提供源动力！ （4）选择表格ztre的第一、二、三行，并把它们定义的重复区域，其设置如图4-2-7所示。
' Q- v" Y# @! ~163K网站系统官方论坛 bbs.163k.com' U8 ]) [+ v! ^7 j
; M s' @' Q: N, O9 H
, f" p- u0 r% t$ x+ Fbbs.163k.com 4 163k团购网站系统官方服务论坛7 p) D) B+ r( m" M; u9 ]; U& @
9 b3 ` P, f2 E" t8 B4 O; k" l为互联网事业发展提供源动力！
* {: q4 n; P) x5 J9 y图4-2-7 定义重复区域
) p' O+ h% f( X7 v2 ?% v; b2 o/ k 这样就完成了主页插入数据集和数据绑定工作。为互联网事业发展提供源动力！6 i1 e' Q* m0 d& Q+ o. z
4.3 分页显示
, ~$ Y+ K7 i0 J3 r163k团购网站系统官方服务论坛 （1）选择“首页”，在【服务器行为】面板，单击“+”按钮，选择【数据集分页】→【移至第一页】，如图4-3-1所示：团购网站系统,团购网程序8 O( J. V! q, i3 C0 K$ Q
" S& B3 ~ V3 z$ b; v图4-3-1 数据集分页菜单bbs.163k.com: L+ }: N+ z/ l; `4 d4 y8 `, z
（2）在弹出的对话框中，选择数据集为ztre，按“确定”键，如图4-3-2所示：
9 o- f1 O6 K3 ? O团购网站系统,团购网程序 163k团购网站系统官方服务论坛3 u" U1 p$ h- D$ v* h
图4-3-2 移至第一页对话框为互联网事业发展提供源动力！6 L% D5 J$ N7 O2 l
（3）选定“前一页”，定义为数据集分页的“移至前一页”；选定“后一页”，定义为数据集分页的“移至”；选定“最后”，定义为数据集分页的“移至最后一页”。0 Y4 h: G# I" B2 q$ P8 C( J2 [
（4）把“页码”改为“当前页码：”在【服务器行为】面板，单击“+”按钮，选择【显示记录记数】→【显示当前页号】。163k团购网站系统官方服务论坛) P b* u6 P0 W" A
（5）保存了index.aspx，这样就完成了首页的设计工作，在access中给相应zt表、yh表随便输入几个记录，进行浏览器中浏览（下面的章节中如无特别说明，笔记全属于“网络编程”栏目），大概如图4-3-3所示：
( R$ ?2 H5 J% ?. |) M163K网站系统官方论坛
! h' b9 X# ~' E9 Kbbs.163k.com图4-3-3 首页浏览图 为互联网事业发展提供源动力！% d* ]8 c+ ]3 U) z: G$ h
163K网站系统官方论坛( t8 x4 E0 n3 j, D) r
8 G% n% c) i8 E; c T1 Q为互联网事业发展提供源动力！ 4
) L$ }1 z# Y% W% W4 ~: J7 h3 f为互联网事业发展提供源动力！为互联网事业发展提供源动力！2 y8 G- p6 q1 D& q3 r/ j' F3 Q
d7 v) V5 Z) p5 J
|
