我们是如何设计个网站？

Web Design课来到这学期的一半，我们的功课就是设计网页啦～
对象是65岁以上的老人～主题任选，注重于图形用户界面咯～
但我们班的都遇到了一些问题，没达到老师说提出的要求～
有些组花了很多时间去设计那个网站，却没得在课堂呈现～
对于我们自己的组，是很幸运的，因为可以出来呈现～哈哈…

不过，这一次的后期制作有点赶工，因为周末日有工作～
所以不太理想啦～但是还是要谢谢婉晶同学和征安同学～
因为这个构思是综合了我们三个人的Idea～辛苦大家啦～
好吧～先来告诉大家我们设计一个网站是，怎么样的呢？

首先，是有两个过程～这是先后的问题啦～
第一个过程就是知道对象，订下目的方向和选择类型
第二个过程就是版面，用户界面，字体，颜色，图案
不过有了第一个过程之后当然是做搜寻啦～Research~

我觉的无论你做什么？Research是很重要的～或许有些人
很厉害，觉得不用做什么research的啦～浪费时间，无聊～
但我觉得Research是很重要的一个环节，在你做任何设计前；
所谓知己知彼，百战百胜！你并不懂这世界到底发生着什么
你怎么去设计，做出，符合这世界的东西呢？个人风格？
或许对于一些行列是可以这样，随心所欲啦～但多数是不～

在做research的过程中，我发现了很多的东西，当然也漏了些
东西，谢谢老师的提醒，那就是在用户界面方面和科技方面，
我并没有去做搜寻，那时我们对用户界面是大概的了解而已～
所以重点方向在于我们的对象和目的～在游览到眼花缭乱之际

我找到2战结束（1945），是现在65岁人出生的时候～
第一台电脑是在2战过后才发明的（1946年2月15日）ENIAC；
1976年发明出Apple的第一个电脑 Apple I ; 79年有个人电脑；
1983年是MS-Dos面世的时候接着是Window 95,98 ,me, XP；
最早的网络是在1962年ARPANET（60年代冷战后出现的）
1972年已经有Email, FTP,Telnet，最早的网络工具～
1986年开始有56kbps的网速在大学，政府与学术机构内～
还有1991年订下10月1日是国际老年人日，因为人口老龄化～

除此之外，还找人全世界的人口分布，教育背景，文化等～
由于范围太广泛了，所以我们主要是以亚洲老人为我们的对象～
如果我们做全球性的一个网站，很难达到一个平衡点和标准～
主要是拉近老人与子女之间的关系和平衡提高老人的生活素质～
研究了些老人的心理和身理部分，发现到的确是有些障碍存在～
也因为顾虑多，想太多，从而局限了我们的设计～有待进步咯～
以近代的些科技来说，有些东西，老年人未必都能适应上手啦～

这是些个人的看法咯～还没真正的做研究和调查的东西～哈哈
要做多做搜查～科技每一天都在进步，每一天都有不一样的东西
设计一个网页必须结合这些东西，再来就是对症下药去配
这样才是个成功的网站～它好比一幅画，一道菜，一个产品
不美丽，不好看，不好吃，不好使用就没人要啦～

现在的趋势就是趋向简单，使用方便，干净专业加美观啦～
哈哈～还是需要花多点时间去研究这一块东西～
网络的世界，并不容易满足所有的人，所以成功的背后都有着
他们的一个故事～未来的世界会是怎样的呢？哈哈～

忘记说我们网站的名称！哈哈～
很多人都是做子公司，子网站啊～
但我们做人家网站的爸爸，阿公～
Oldbook～哈哈～给老人家的网站!
这纯属功课sample～不要告我～哈哈…

网页设计

我们每天上网游览，上FB，看戏，听歌，玩游戏；
但你们知道这些网站的每一页是怎么来的吗？
是那些懂电脑的人设计好好，打好好的吗？
我们这些使用者就滑动下老鼠，按按就行啦？

上Google输入你想找的几个关键字，不用几秒
就会弹出一大堆搜寻结果给你～按进去的每个网
都不一样；有些进去会很吸引；但有些还没认真看，
就想把他给关了～相信大家会有这些经验吧～

其实每个网页都是经过设计的～好不好就另当别论～
哈哈～网页设计是目前的一个趋势和蛮火红的行业～
只因网络已经普遍化，人们的需求提升了～要求高～
所以，市场上和课程上我们就有了这个东西啦～

还没接触到网页设计时，是觉得制作一个网页的背后～
是存在许许多多的代码啦～程序啦～符号啦～复杂哦～
果然不出我所料，但随着科技的发达和发明，现在简单些
也方便了些，只需要多练习和背些代码就可以了，因为
他就像数学一样，公式是死的，看你怎么去玩和用～

现在来到教学的时间啦～以下是我个人整理的简短资料：
网页设计就是这样的一个东西：
标识语言> 设计、建模、执行过程> 电子格式信息> 互联网> 图形用户界面（GUI）> 浏览

简单来说，网页设计的目的就是产生网站，什么是网站呢，就是服务器内的一系列网页的组合，终端用户发出请求后，服务器通过传输特定的网页向用户传输所需的信息。简单的信息如文字，图片（GIFs， JPEGs，PNGs）和表格，都可以通过使用HTML/XHTML/XML放置到网站页面上。而更复杂的信息如vector graphics,动画，视频，声频则需要插件程序例如Flash, QuickTime, Java run-time environment,等等，这些插件程序也是通过HTML/XHTML/XML植入网页的。

随着浏览器和W3C标准一致性的改善，XHTML/XML（可扩展标识语言）与CSS（层叠样式表）共同用作网页内容的设计已经被广泛的接受和使用。最新的标准和建议则是朝着浏览器的能力扩充和改善发展，使之能够不需要插件程序也能够给用户传输多媒体信息和更多的选择。

通常，网页可以分为静态网页和动态网页。

静态网页页面上的内容和格式一般不会改变，只有网管可根据需要更新页面。

动态网页的内容随着用户的输入和互动而有所不同，或者随着用户、时间、数据修正等而改变。网页上的内容也可以由用户通过使用客户端描述语言 (JavaScript、JScript、Actionscript）来改变。当然更普遍的是由服务器端的描述语言（Perl、PHP、ASP、JSP、 ColdFusion等)进行编译，从而对动态网页的内容进行改变。无论是客户端还是服务器端的改变都需要使用较为复杂的应用软件。

随着信息技术的更加专业化，越来越明显的倾向表明，网页设计和网站的发展会逐渐成为两个不同的领域。

网页是借助于美术构图与程序互动、动画等方式向大众推广相关信息的媒体，所以网页设计包括了幾大部分：

• 版面构图（見平面設計）
• 程序开发（見網頁應用程式）
• 網站內容管理（見內容管理系統、資訊架構學）

簡史

HTML

超文本标记语言（Hypertext Markup Language） 網絡的資訊越來越多，網站須有引人注意的外觀，才能增加人次，達到宣傳的目的。人們開始注意網頁的外觀，HTML亦因此變得更複雜、更具彈性。表格，原本是更整齊展現資料的工具，變成了排版工具。CSS的出現令以表格為基礎的外觀設計被視為過時。伺服器方面的技術亦改變了網絡的構造，使用者可以選擇其瀏覽方式、外觀。Flash的出現為設計師和媒體創作人開創了新路。除了引人的外觀之外，亦有一個重要的考慮點：網路無障礙，即使用者能否容易讀取資訊。

XHTML

由于XML的可构造性，XHTML 1.0在2000年1月26日成为W3C的推荐标准，即HTML将会随着时间而淘汰。

外觀的影響

流動性 對 固定排版

大部分網站設計師原本是每處地方都有絕對限界的平面設計師。可是在網頁瀏覽器，卻不能控制某些因素，特別是瀏覽器的闊度。

有些設計師將其網頁定義在固定大小的表格中，每部分的寬度都有精確的數據，一般使用確定的值，這就是固定排版了。然而有人認為這不好，因為這種設計罔顧使用者的設定，他們使用流動性排版，網頁的寬度使用百分比定義寬度，因此網頁會依瀏覽器的螢幕解析度而改變。 但是流動性的排版對於日益增大的螢幕就不一定合適，因為人的眼睛進行橫向閱讀時，過長的文字會增加閱讀的困難度，反之大約在十幾個字即換行的文章，瀏覽者會更好吸收其內容。

Flash

Adobe Flash這套軟件能夠很輕易做到一些華麗的圖像效果，亦可以進行編程，因此近年來出現在不少網站上。有些網站更以Flash完全代替HTML。

可是Flash帶來的問題不少：

• 搜索引擎不能記錄Flash的內容
• 盲人不能透過屏幕阅读器來取得其內容

所以大部分人都不會以Flash為主要設計，Flash通常成了首頁的開場畫面或網站內的小遊戲。

两种设计模式

从前一般网页都使用表格进行排版设计，这样作的优点在于设计制作速度快，尤其在可视化网页编辑器，如Microsoft FrontPage中，这样设计显得直观而方便，然而这讓越来越复杂的版面需要许多不断嵌套的表格设计，致使网页代码变得冗长复杂，使文件体积增大，且不容易被搜索引擎查找。同时，这样做也不利于大型网站的改版工作。

于是随着主流網頁瀏覽器對CSS的支援度提高，近年来兴起了一种新的网页设计模式。被业界称为“网页重构”的革命，其核心在于分隔网页的風格和內容(en:Separation of style and content)，指標記語言(如HTML,XML)負責定義頁面的內容，但不可以定義任何涉及網站外觀(風格)的東西。而網站風格就由另外的CSS檔案負責。在排版方面，新的模式提倡使用由CSS定义的DIV进行页面排版，而将表格还原为排列数据的最初功能。這種模式有很多好處，例如可以協助搜尋引擎查找網頁的情況，减小文件提及提高浏览速度，且由于一个CSS档案可以控制多个页面，这也给改版带来了很大方便。

由于W3C是该模式极力的倡导者，于是业界鉴定网页是否符合W3C标准，就可以在W3C网站自动检测该网站的情况。

这种模式也有缺点，其中一個弱點就是，在不同瀏覽器出來的效果会有分別，但这种情况主要是由于微软的Internet Explorer对CSS文档的支持有众多缺陷造成的。另一方面，開始設計CSS時，並不能清楚看到目標，因此显得不直观。

是不是有好多正常人看不懂的名词呢？哈哈～没那么简单咯～

下一篇将会分享我如何设计个网站的过程和经验啦～

敬请期待～哈哈～加油～^^

UI - User Interface

wUI (User Interface) It was a term of Computer Technology~
The reason I post this word, because we spend whole class time
to understand it~What is it mean & is it work with us? Haha~
For more easy to know it, I will pose with Chinese to explain it~
Our mother tongue will help us more easily to know the meaning~

用户介面或使用者介面（user interface，縮寫UI)，是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。

用户介面是介於使用者與硬體而設計彼此之間互動溝通相關軟體，目的在使得使用者能夠方便有效率地去操作硬體以達成雙向之互動，完成所希望借助硬體完成之工作，用户介面定義廣泛，包含了(A) 人机交互與(B) 圖形使用者介面，凡参与人類與機械的信息交流的领域都存在着用户介面。用户和系统之间一般用面向问题的受限自然语言进行交互。目前有系统开始利用多媒体技术开发新一代的用户界面。

組成要素

• 基本要素：必須有人類感官與'作用體所產生輸出、輸入與運作內容三方互動設計。
• 用戶介面使得用户与系统之间双向的信息传递成为可能:

• 輸入：允許使用者操作執行一套系統。
• 輸出：允許系統向使用者传达操作效果。

• 人性要素 (Human Factor)：

人類感官知覺、心理情緒、認知、學習、記憶、反應、以及處理資訊的模式、個別背景之差異等等每一項都和用戶介面有密切的關係，直接或間接地影響用戶介面的效能。

• 輔助與說明：

適當的說明文件，不管是線上的或是傳統的文件。讓使用者明瞭系統究竟可以做與如何來達成工作。並讓使用者能夠花最少的時間在介面的熟悉上，而將時間投注於完成其預定之工作項目。最簡單的輔助說明就是圖形或符號。

• 由此產生以下區別:
  • 功能性界面
  • 情感性界面
  • 环境性界面

注释：

A) 人机交互（Human–Computer Interaction or Human–Machine Interaction，簡稱HCI或HMI），是一門研究系统與用户之間的互動關係的學問。系统可以是各种各样的机器，也可以是计算机化的系统和软件。人机交互界面通常是指用户可见的部分。用户通过人机交互界面与系统交流，並進行操作。小如收音機的播放按鍵，大至飛機上的儀表板、或是發電廠的控制室。人机交互界面的设计要包含用户对系统的理解（即心智模型），那是为了系统的可用性或者用户友好性。

B) 图形用户界面（Graphical User Interface，簡稱 GUI，又稱图形用户接口）是指采用图形方式显示的计算机操作用戶介面。与早期计算机使用的命令行界面相比，图形界面对于用户来说在视觉上更易于接受。然而這介面若要透過在顯示器的特定位置，以「各種美觀、而不單調的視覺訊息」提示使用者「狀態的改變」，勢必得比簡單的文字訊息呈現，花上更多的計算能力，計算「要改變顯示器哪些光點，變成哪些顏色」。

GUI 概要

在图形用户界面中，计算机画面上显示窗口、图标、按钮等图形，表示不同目的之动作，用户通过鼠标等指针设备进行选择。

组成

桌面

在启动时显示，也是界面中最底层，有时也指代包括窗口、文件浏览器在内的“桌面环境”。在桌面上由于可以重叠显示窗口，因此可以实现多任务化。一般的界面中，桌面上放有各种应用程序和数据的图标，用户可以依此开始工作。桌面与既存的文件夹构成里面相违背，所以要以特殊位置的文件夹的参照形式来定义内容。比如在微软公司的Windows XP系统中，各种用户的桌面内容实际保存在系统盘（默认为C盘）:\Documents and Settings\[用户名]\桌面 文件夹里。

墙纸，即桌面背景。可以设置为各种图片和各种附件，成为视觉美观的重要因素之一。

視窗

应用程序为使用数据而在图形用户界面中设置的基本单元。应用程序和数据在窗口内实现一体化。在窗口中，用户可以在窗口中操作应用程序，进行数据的管理、生成和编辑。通常在窗口四周设有菜单、图标，数据放在中央。

在窗口中，根据各种数据/应用程序的内容设有标题栏，一般放在窗口的最上方，并在其中设有最大化、最小化(隐藏窗口，并非消除数据)、最前面、缩进(仅显示标题栏)等动作按钮，可以简单地对窗口进行操作。

• 单一文件界面（Single Document Interface）

  在窗口中，一个数据在一个窗口内完成的方式。在这种情况下，数据和显示窗口的数量是一样的。若要在其他应用程序的窗口使用数据，将相应生成新的窗口。因此窗口数量多，管理复杂。

• 多文件界面（Multiple Document Interface）

  在一个窗口之内进行多个数据管理的方式。这种情况下，窗口的管理简单化，但是操作变为双重管理。

• 标签

  多文件界面的数据管理方式中使用的一种界面，将数据的标题在窗口中并排，通过选择标签标题显示必要的数据，这样使得接入数据方式变得更为便捷。

菜单

将系统可以执行的命令以 阶层的方式显示出来的一个界面。一般置于画面的最上方或者最下方，应用程序能使用的所有命令几乎全部都能放入。重要程度一般是从左到右，越往右重要度越 低。命定的层次根据应用程序的不同而不同，一般重视文件的操作、编辑功能，因此放在最左边，然后往右有各种设置等操作，最右边往往设有帮助。一般使用鼠标的第一按钮进行操作。

• 即时菜单（又稱功能表）

  与应用程序准备好的层次菜单不同，在菜单栏以外的地方，通过鼠标的第二按钮调出的菜单称为“即时菜单”。根据调出位置的不同，菜单内容即时变化，列出所指示的对象目前可以进行的操作。

图标

显示在管理数据的应用程序中的数据，或者显示应用程序本身。

数据管理程序，即在文件夹中用户数据的管理、进行特定数据管理的程序的情况下，数据通过图标显示出来。通常情况下显示的是数据的内容或者与数据相关联的应用程序的图案。另外，点击数据的图标，一般可以之间完成启动相关应用程序以后再显示数据本身这两个步骤的工作。

应用程序的图标只能用于启动应用程序。

按钮

菜单中，利用程度高的命令用图形表示出来，配置在应用程序中，成为按钮。

应用程序中的按钮，通常可以代替菜单。一些使用程度高的命令，不必通过菜单一层层翻动才能调出，极大提高了工作效率。但是，各种用户使用的命令频率是不一样的，因此这种配置一般都是可以由用户自定义编辑。

其他

回收站

为了实现文件删除的“假安全”功能而设置了“回收站”（垃圾桶）功能。在文件删除的时候，暂时将其移动到系统特定的地方，一旦用户发现删除错误，还可以将其找回，从而实现防止错误删除的目的。在麦金塔系统中，垃圾桶不仅可以删除文件，还可以进行各种各样对象的删除功能，如将可移动硬盘从系统中移出，将光盘从光驱中取出等等。

应用程序启动器

从图形界面上启动应用程序有很多方式，有好几种操作系统都采用菜单形式的程序启动器。NEXTSTEP和Mac OS X中有一种称为dock的操作面板型的工具，可以存放各种文件和应用程序的信息，并通过鼠标点击调出。

图形用户界面的任务管理

在图形用户界面中，用户操作是以窗口为单位的。除了MDI和Mac OS以外，大多都是「窗口数量=任务数量」。因此在看整体界面的时候，怎样进行任务管理是很重要的。Windows等操作系统中，最常用的方式是在桌面上设置一个棒状的”任务栏“，放置各种窗口的图标和标题，确保系统的可操作性和可视性，方便对窗口进行管理。其他的方法包括，在桌面上的菜单中添加各个窗口管理菜单，在桌面上显示任务的图标，用虚拟桌面的方式表面增加桌面的数量等等。在Mac OS X系统中使用Dock进行任务管理，但是还有Exposé进行窗口一览显示模式的功能。

指针设备的操作

图形用户界面的基本操作是，用指针设备（一般是鼠标）进行指示操作，然后使用设备上的按钮（通常为两到三个）进行动作的激活。因此“位置”和“指示”都非常明瞭，从而实现可视操作。

指示的内容根据位置而不同。在数据管理应用程序中，第一按钮进行指针所在位置数据的选择，而两次连续按钮（所谓“双击”）可以调出预制的应用程序开始处理数据。 第二按钮通常用来显示即时菜单。第二按钮调出的菜单可以再用第一按钮进行选择打操作。第三按钮在X Window System中比较常用。

另外，最近四键、五键鼠标相继问世，各个按钮可以在操作系统中进行动作定义。

图形用户界面与键盘

和命令用户界面一样，键盘在图形用户界面仍是一个重要的设备。键盘不仅可以输入数据的内容，而且可以通过各种预先设置的“快捷键”等键盘组合进行命令操作达到和菜单操作一样的效果，并极大提高工作效率。

图形用户界面与各种设备

除了上述的设备以外，手写板等操作，特别是在图像数据操作中也扮演重要的角色。

触摸屏图形用户界面

现在还有很多一些用户界面，直接用手指、或者特殊的笔端触摸触摸屏上显示的按钮、图标进行各种操作，已经非常普及，如自动取款机ATM，汽车导航、媒体播放器、游戏机等等，一般操作简捷，直观。苹果公司的iPhone手机还有装有多手指操作系统。

It was search from Wikipedia, I think that is more clear now~
If u interest, can go to search it for more details~Haha~
User interface are happening at our life everyday & ways~
Nowadays, it become more popular things to study~
It will growing in the future~

So, Do u know What is UI now?
It call User interface~And,
What u c now at the screen is GUI-
Graphic User Interface~^^

Adobe Dreamweaver

Adobe Dream Weaver - The software we learn at
Web Design Class~It have a lots of code need us
to remember~It was headache~But not bad~Haha~

Learning Web Design you must learn This 2 words:
What is HTML? What is CSS?
Following is a lot of coding need to know~
such as div,hr,href,img,style and etc~

It need more time to practice & remember it~
but not bad to learn it~after create, set, type a lot of code
then preview in Safari, it feel so good~Haha~

Hope to continue learn it~
Thanks for our lecturer give us more time to do it~
Next time may share something with Web Design la ~
Good Nite~^^