???????? (Web site)

1
?????????????????

• ???
• ????????? ??????????

2
????????????

• ???????????????????????????????????
• ??????????????????????????????????????????????????
  ?????
• ????????????????????????????? ??????????

3
???????

• ????????????????????????
• ?????????????????????????????
• ???????????????????
• ????????? 13 ??????????????????
• ?????????????????????
• ?????????????????

4
????????????????????????

• ???????? (Web site)
• ?????????????????????????????????????????????? ?
  ????????????????
• ??????? (Web page)
• ????????????????? ?????????????????? ?
  ???????????????
• ?????? (Home page)
• ?????????????????? ? ????????????

5
?????????????????????????????????????

• ????????????? (Simplicity)
• ???????????????????? ?????????????????????????????
  ???
• ??????????????????????????????????????????????????
  ???????????????
• ???????????? (Consistency)
• ??????????????????????????????????????????????????
  ????????????????? ???????????????????????
  ?????????????? ????????????? ????????
• ???????????????????????????????????????
  ?????????? ??????????????????????????????

6

• ????????????????? (Identity)
• ????????????????????????????????????
• ??????????????????????????????????????????????????
  
• ???????????????????? (Useful Content)
• ??????????????????????????????????????????????????
  ??????????????
• ??????????????????????????????????????????????????
  ????

7

• ?????????????????????????? (User-Friendly
  Naviagtion)
• ??????????????????????????????????????????????????
  ???????? ?????????????????????????????????????????
  ????????????
• ??????????????????????????????????????
• ?????????????????? (Visual Appeal)
• ??????????????????????????????????????????????????
  ?????????????? ? ???? ???????????????
  ?????????????????? ??????????? ???????

8

• ?????????????????????? (Compatibility)
• ??????????????????????????????????????????????????
  ????
• ??????????????????????????????????
  ????????????????????????????????????
• ??????????????????????????????????????????????????
  ????????? ? ?????????????????????
• ????????????????? (Design Stability)
• ???????????????????????????????????
• ????????????????????????????????????????

9

• ??????????????????????? (Functional Stability)
• ???????????????? ? ???????????????????????????????
  ???????????????????????? ???? ?????????????
  ???????????? ???????
• ???????????????????????????????

10
??????????????????????????????????????

• ???????????????????????? ??????????????????????
• ???????????????????? ????????????????????????
• ????????????????????????? ??????????
• ????????????????? ??????????

11
???????????????????

• Webmaster
• ?????????????????????????????? ???????
  ??????????????????????
• Information Architect
• ??????????????????????????????????????????????????
  ?????
• Designer
• ????????????????????????????????????
  ????????????????? ?
• HTML and JavaScript Coder
• ?????????????????????????????????????????????? ?
• ???????? ????????????????? ????????????????????

12

• Developer/Programmer
• ????????????????????????????????? ?
• ?????????????????????????????????
• System Administrator
• ??????????????? ???????????????????
  ????????????????????????????????????????????
• ??????????????????????????????????????????????????
  ?????????
• Content Editor/Writer
• ?????????????? ?????????????????????????????????
  ??????????????????

13
???????????????????

• ????????????? HTML???????????????????????????
  (Text Editor) ????????? ???? ??????? NotePad
  ??????????????? (Tag) ??????? HTML ????????????
  ?????????????????????????????????????????????????
  HTML ??????
• ?????????????????????????????????????????????????
  ? WYSIWYG (What-You-See-Is- What-You-Get) ????
  Dreamweaver, FrontPage ???????

14
?????????????????????????

• Macromedia Dreamweaver
• Microsoft FrontPage
• Allaire HomeSite
• CoffeeCup
• GoLive
• HotDog Pro
• HotMetaPro
• NetObjects Fusion

15
Macromedia Dreamweaver

• ??????????????????????????????????????????????????
  ????? ? ???????????????????????????????? HTML
• ???????????????????????????????????????????????
• ??????????????????????????????????????????????????
  ????????????????????
• ??????????????????????????????????????????????????
  ??????????????????????????????????????????????????
  ??

16
Microsoft FrontPage

• ????????????????????????????????????? ?
  ??????????? Office
• ??????????????????????? Wizard
• ??????????????????????????????? ????
  ??????????????????????????????????????????
  ???????????????????????? ????????????????????
• ??????????????????????????????????????????
• ????????????????????????????????????????????????
  ??????????????????????????????????

17
Allaire HomeSite

• ?????????????????????? HTML ??????????????????????
  ?? Tag Insight ??? Function Insight
  ??????????????????????????????????????????????????
  ??????????????????
• ??????????????????????????????????????????? HTML

18
????????? 13 ?????????????????????????

• Phase 1 ???????????????? (Research)
• 1. ???????????? ??????????????????????????????
• 2. ?????????????? ??????????????????????????????
  ????
• 3. ???????????? ????????????????????????????????
  ??????????????
• ?????????????
• 1. ???????????????????????
• 2. ????????????????????
• 3. ???????????????????

19

• Phase 2 ???????????? (Site Content)
• 4. ?????????????????????
• 5. ??????????????????????
• ?????????????
• ???????????????????????
• ?????????????????????????
• ????????????????????????????

20

• Phase 3 ?????????????????????? (Site Structure)
• 6. ?????????????
• 7. ????????????????????
• 8. ??????????????????
• ?????????????
• ?????????????????????
• ?????????????????
• ?????????????

21

• Phase 4 ?????????????????????? (Visual design)
• 9. ?????????????????????????
• 10. ?????????????????????????????????
• ?????????????
• ???????????????????????
• ???????????????????????????????
• ??????????????????????????
• ??????????????????????????

22

• Phase 5 ????????????????? (Production and
  Operation)
• 11. ?????????????????
• 12. ???????????????
• 13. ?????????????????????
• ?????????????
• ??????????????????
• ????????????????????????????????????
• ??????????????????????????

23
???????????????????????

• ?????????????????????????? (Website Structure
  Design)
• ??????????????????????? (Website Interface Design)

24
??????????????????????????

• Site Map
• ???????????????????????????????
  ???????????????????????????????????????????????
• ??????????????????????????????????????????????????
  ???????
• ????????????????????????????????????????
  ?????????????????????????
• ??????????????????????????????????????????????????
  ???????? ?????????????????????????? (Top Down
  Thinking)

25

• Site Map ?????
• ??? ? ??????????????????????????????
• ??? ? ???????????????????????????????
  ???????????????
• ????????????? Site Map ???????????????????????????
  ???? ?
• ???????????????????? Site Map ???

26
?????????????????????

• ?????????????????? ????????? Navigation
  ??????????????????
• ?????????? ???????????????????
• ????????????? ????????????????? ??????????
• ???????????????????
• ?????????????????????????
• ?????????????????????????? ????????????

27

• ??????????????????????????????
• ?????????????????????????? 75 KB
• ???? Flash ?????????? 120 KB
• ????????????????????????????????????? (Theme)
  ???????????????? ??????????????????

28
?????????????????

• ??? Content
• ??? Image
• ??????

29
??? Content

• ???????????????????????????? ? ???????????????????
  ??????
• ?????????????????????
• ?????????????????????????? HTML
• ?????????? ?????????????????

30
??? Image

• ??????????????????????????????????
  ??????????????????????? ? (Slice Image)
  ????????????? ???????????????????????????
  ?????????
• ???????????????????????????? ?????????????????????
  ???????????? ??????????????????????
• ???????????????????????????? ?????????????????????
  ????
• ????????????????????????????????

31
??????

• ???????????????????????? Content ?????? Image

32
??????????????????????????????

• ????????????????????????????????
• ???????????????????????????????
• ?????????????????????????????????????????
• ??????????????????????????? (URL)
  ?????????????????????
• ??????????????????????????????????????????????????
  
• ?????????????????????????
• ????????????????????????????????

33

• ???????????????????????
• ????????????????????????????????????
• ????????????????
• ???????????????? ??????? 8 ?????? ?????????? 90
  ????????????????????????