เว็บดีไซน์ (งานที่ต้องทำ)

Page 1

ภภ4 ภภ! " ! #$! % 1 ' $ " ŕ¸

1.1 : ภ!"# $ภ% &$ (National Abilympics)

! 7 8 & !9 :; # 1 <= 6 9 ; ภ# ; 1 Style sheet B #!7B 5 ;ภ& #D EF • DGB Style sheet • Main page ( ภ& F G !) • List page • Top page • Contest Outline page ( ภ) • Opinions/Comments page ( ! $ B ) * 9 :; :EQ 7 S7 9T! ภ!"# $ภ% &$ 9 ; % : ภU B ! ! < # & B V $ WU $Q! # ! $ $Q! B !

1.2 9 # 9GB # • 2 9GB # ; #; C:\webpage 9 ; % %"Q# EF 1) %"Q#S7 V & "#[ U # ภ\U B & ! ;# ภU A $! ] ( % SomchaiChokedeeA) 2) %"Q#S7 V & "#[ U # ภ\U B & ! ;# ภU B $! ] ( % SomchaiChokedeeB) • !"Q#: 9 :; # 1-6 E; #; B :=ภ#!7BD 9GB # & ! # 1) B & !9 :; # 7 :=ภD 9GB # & ! # 2) 1.3 #ภ: Q D • html #!7B # % Q # & #D EF : ภ<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> • ภภ#!7Bภภ[ U & #D EF : ŕ¸


<HTML lang=sens> • Header #!7B Header & #D $% &'ภ- # ภU (Letter code) <META http-equiv ="Content-Type" content="text/html; char set =UTF-8"> - [ U :EQ % (Used language) <META http-equiv="Content-Language" content="en"> - S7 (Author name) <META NAME="author" CONTENT=" %"Q#S7 & EF">

( ) ( & B & # : & ! #ภB ภ: $Q :EQ!$D ภ#;7 [ ; & ภ& $ # S7 #

ภ%

$ & % z 9 :; #:EQ 7 : F ! % # 1-6


*% "+ 1 : ภStyle sheet Style sheet & ! #ภ& #D EF - DGB {stylesheet.csss :EQ B ภ$Q & | EF - ภ{bodys : & F margins } ; B V 45%7 - ภ( 4Paragraphs : & F font style V {normal,s font weight V {normal,s font size V {100%,s line height V {180%,s B color V {black.s - ภ{Heading 1s: & F font style V {normal,s font weight V {bold,s font size V {170%,s line height V {normal,s text disposition V {center,s B color V {black.s - ภ{Heading 2s: & F font style V {normal,s font weight V {bolds, font size V {130%s, line height V {normals B color V {blues - ภ{Heading 3s: & F font style V {normal,s font weight V {bold,s font size V {100%,s line height V {normal,s and & F color V {blue.s ∗ 8 ! &$ # & # {table,s {data cell,s B {header cells D <7ภ& F D E; #; B DGB {stylesheet.csss :EQ 9 ;!E ;B #E; & #D EF table{ font-style: normal; font-weight: normal; font-size: 90%; line-height:normal; color:black; border:1px solid #CCCCCC; border-collapse:collapse; margin-bottom:10px; } td{ padding:5px; border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; }

th{ padding:5px; border-bottom:1px solid #CCCCCC;


border-right:1px solid #CCCCCC; background-color:#CCFFFF; text-align:center; }


*% "+ 2 : Main page Main page & ! ;B #E; & #D EF. - & F %"Q#DGB {index.htmls - & F page title V {7th International Abilympicss - G ! V 2 G !9 ; & F # #. G ! 150 $ภ}B D! ภG !B B border V {0s (W7 ; ) - & F %"Q# G ! V {menus ( list page) - & F %"Q# G !B V {mains ( top page Contest Outline page B Opinions/Comments page) - DGB {list.htmls G ! ;B #E; %EF 9 :; 3 - DGB {gaiyo.htmls G !B }=Q <7ภV # ภ;B #E; %EF 9 :; 4 - & F title attribute :EQ ! ! & B frame tag - & # †# ภ‡] ภภ8E:EQ ˆ ; }# :EQD! ภ% G !


*% "+ 3 : List page List page & ! ;B #E; & #D EF - & F %"Q#DGB V {list.htmls - & F page title V {navigations - & F E "F B V EG† ( Light blue. ) - & F page title V {navigations - % DGB {stylesheet.csss style sheet - 7 # !& !:EQ 7 B 9 ; % DGB Text %"Q# {list.txts. :EQ

-

(Introduction of International Abilympics / Introduction of Skills Contests / Opinions/ Comments) % DGB {logo.gifs }=Q V 9B9ภภ!"# $ภ% &$ - International Abilympics. 7 [ 9B9ภEF & # !E 60 x 60 $ภ}B B & # #;7 } ; # %"Q# "Q# & # & F alternative text V {Abilympics logos %"Q# "Q# & # V {7th International Abilympicss B & # V {Heading 1s & "#B$ & # E; %$ B & B$ & # / Q "Q# !E ; :EQ ! ! ‰B‰ ภB$Šภ:EQB$ & # :EQB$ G ! {mains


*% "+ 4 : Top page.

Top page & ! ;B #E; & #D EF - & F %"Q#DGB V {gaiyo.htmls - & F page title V {Introduction of the International Abilympicss - % DGB {stylesheet.csss style sheet - 7 & ![ B 9 ; % #!7B ภDGB text %"Q# {gaiyo.txt lists :EQ - (ภ# # [ & #; B "Q# # & : F D! & # ภ# $ .) - "Q# {Introduction of International Abilympicss & F V {Heading 2s - # {Event Schedules, {Contest Schedules, {International Abilympics Previously Helds B {Contact for Inquiriess & F V {Heading 3s - # !#‹$ ; # {Introduction of International Abilympicss V # ! [: paragraph - ;ภ# {Contest Schedules V # ! [: list - & {International Abilympics Previously Helds header cell & # line ภB row ŕ¸



*% "+ 5 : Contest Outline page

Contest Outline page & ! ;B #E; & #D EF - & F %"Q#DGB V {kyougi.html s - & F page title V {Introduction of Contest Categoriess - % DGB {stylesheet.csss style sheet - 7 & "#& ![ B 9 ; % DGB text %"Q# {kyougi.txts B DGB 7 %"Q# {photo01.jpgs, {photo02.jpgs B {photo03.jpgs - (ภ# # [ & #; B "Q# # & : F D! & # ภ# $ ) - "Q# {Introduction of Skills Contestss & F V {Heading 2s - & # separator line & # ! "Q# {Introduction of Skills Contestss - & F {Heading 3s : ภ# [: # - 7 B # ! & B [: # & # #;7 1 ; # - # 7 & # !E !ภ160 $ภ}B - 7 & B & # #;7 } ;9 ;ภ& F style attribute B & "#& # #;7 - & F alternative text & B 7 EF 7 photo01.jpg ( Web page) & F V {Creating Web Pagess 7 photo02.jpg ( Word processing) & F V {English Word Processings B 7 photo03.jpg ( Database) & F V {Data Processings - separator line & {Creating Web Pagess B {English Word Processors



*% "+ 6 : Opinions/Comments page

Opinions/Comments page & ! ;B #E; & #D EF - & F %"Q#DGB V {kanso.htmls - & F page title V {Opinions/Comments pages - % DGB {stylesheet.csss style sheet - 7 & "#, text box B Â?! 7 & #; 9 ; % DGB text %"Q# {kanso.txts.:EQ (ภ# # [ & #; B "Q# # & : F D! & # ภ# $ ) - "Q# {Opinions/Commentss & F V {Heading 2s - separator line & "Q# - # ! {Let us know your opinions and comments if any. Enter your name and contestant number, too.s & F V paragraph - text label %"Q# {Opinions/Commentss B ภB # # ! 60 : 5 < - text label %"Q# {Names B ภB # # ! 30 & # ภU - text label %"Q# {Contestant Number (mandatory) s B ภB # # ! 10 & # ภU - #‹$ ; text label 9 ; % label tag - & F ภE-mail D :EQ # aaa@dsd.go.th - # ! {Personal information including Â?Â?s & [ - # ! {Personal Information Protection Policys %$ } ; B B$ D <= DGB {thaijin.htmls & D! & # DGB . {thaijin.htmls =F !


*% "+ 7 : L $L ! #$! % ก9 :; # 1-6 B ก:EQ E; #; B % D# E;D #; #$ ก

;- % ; =F % ก # G !##ก B & 7 ; Style sheet : F EF & # $ &$& ! "Q# D & #D EF. - 9 :; EF : B ก $F ก : 9 :; # 1 <= 6. B : F - ก ##ก & # $ 8 : F ก % B ก <= - ! < %

$ & D


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.