圖形的設(shè)計和HTML和的CSS.

2013年08月06日 TAG: 網(wǎng)站設(shè)計

在這篇文章中，我將把重點放在只是兩個的課程：一個介紹性的圖形的設(shè)計和一個介紹性的HTML和的CSS。當然。（，如網(wǎng)站。序號網(wǎng)站域名排名的策略時間規(guī)劃，移動臺第一次，的信息體系結(jié)構(gòu)，的可用性，用戶-中心的的設(shè)計，JavaScript和jQuery的，內(nèi)容管理系統(tǒng)和所以）的概念Forth被有價值的的，，，，，并應(yīng)被覆蓋在課程中。然而，這些主題是典型的（或至少應(yīng)該是）覆蓋在單獨的課程在大多數(shù)的大學課程，所以，此處沒有提及。

創(chuàng)建設(shè)計

在大多數(shù)干部學院學報JOURNAL的Web的設(shè)計方案中，學生們將服用一個療程，有關(guān)創(chuàng)建作為一個單一的的在（（如Photoshop）或Fireworks）的軟件中的圖形的網(wǎng)站的的布局。學生們可能會開始與現(xiàn)有的網(wǎng)站的截圖，自己的圖像和內(nèi)容分層，創(chuàng)造了獨特的設(shè)計，或者他們可能會創(chuàng)建一個從頭開始設(shè)計。

這個類背后的想法是健全的。一旦學生掌握了基本知識與軟件的工作，當然會產(chǎn)生可用性的討論，顏色，布局，字體，負空間，圖像質(zhì)量和安置這么多，不涉及代碼。它可讓的學生，以想象一個Web頁面在他們的的腦海中，而不正在太在意如何該網(wǎng)頁將被編碼的。當學生確實開始編碼該頁面的時，他們將有的技能，以澄清他們想要的東西，以構(gòu)建的在書面形式的代碼的一個行之前，。

在這個過程中，學生經(jīng)常有麻煩超出畫布的理解發(fā)生了什么。如果設(shè)計為960像素寬，會發(fā)生什么時，顯示器是1200像素寬？通常解決的背景顏色或重復(fù)圖形。學生被很少會問到他，會發(fā)生什么情況，如果該的顯示器是比960像素窄。

大多數(shù)學生，如果問起一個窄的窗口，指出整個頁面底部的滾動條，提醒游客，擴大自己的瀏覽器，看到完整的設(shè)計。他們并不認為，按鈕是否太接近基于觸摸導(dǎo)航，例如，或文字的大小在不同的屏幕尺寸可能會有所不同。然而，在本課程中的學生可以，被引導(dǎo)到認為約這些問題的。

許多設(shè)計工作室，專注于響應(yīng)式設(shè)計不使用譜曲，像那些在這個類中產(chǎn)生的，作為其發(fā)展過程中的一部分了。相反的，他們更喜歡以使用的HTML和CSS-基于的comps，以展示出的看看的一個網(wǎng)站到一個客戶端的。那么，為什么教基于圖像的譜曲學生嗎？

該的原因是的是，在這一點上在他們的的發(fā)展，學生不不一定知道的HTML和CSS阱，如果在所有。通過刪除代碼從圖片中，注重培養(yǎng)學生的設(shè)計原則，包括平面設(shè)計和用戶體驗。一旦他們學習的HTML和CSS，他們可能永遠不會創(chuàng)建一個基于圖像-的的的樣稿，再次。然而，在這個過程中，他們已經(jīng)學會了如何瀏覽的Photoshop和/或煙花，他們已經(jīng)學會了在比賽環(huán)境中工作的肯定和否定 - 所有這些都是寶貴的經(jīng)驗。

下面是一些你可以分配改善這一類及獨立于設(shè)備的設(shè)計工作，為學生準備的任務(wù)：

在12個大小均勻的列建立一個設(shè)計，
這是一個偉大的時間來解釋關(guān)于電網(wǎng)和它們是如何工作的。讓學生建立基于這個網(wǎng)格的設(shè)計，展示他們的理解。
顯示版本的設(shè)計，
如果設(shè)計看起來單程960像素，它是如何看1200像素？320？767？HAVE學生在他們的的設(shè)計中中使用相同的內(nèi)容，重新排列為這些不同的屏幕環(huán)境中。一定要問清楚，關(guān)于過渡-設(shè)計移動767至320像素，會發(fā)生什么？
問關(guān)于照片的問題。
如此美妙地伸展頁面頂部960像素的照片，大橫幅什么樣子767像素？960和767像素之間會發(fā)生什么事？
鼓勵學生思考觸摸，
這是特別重要的，在較小的屏幕尺寸，但臺式機和筆記本電腦都趨向觸摸。鼓勵學生來構(gòu)建導(dǎo)航適合對脂肪的的手指，對于例如。
淡化切片。
不是想著關(guān)于的意象對于一個網(wǎng)站作為源的COMP的，，而是請考慮它它的的自己的原型。會有不能切片可能會，需要在所有的，，因為影像可能會需要要生成的在為不同的屏幕尺寸的的幾種不同尺寸中。即使背景圖形可以產(chǎn)生自己獨立的文件中。通過，不強調(diào)切片，你也淡化這個網(wǎng)站的設(shè)計比賽的核心。響應(yīng)式設(shè)計，排版設(shè)定一個目標或方向，但需要調(diào)整，以適應(yīng)空間，320，767和960之間的像素和超越。

需要注意的是一些公司正在設(shè)計一個靈活的環(huán)境中，不使用代碼的問題上。當這些程序是更穩(wěn)定的的時，他們可能會是值得一納入學院的課程設(shè)置。

教學HTML和CSS

在一個典型的的的HTML和CSS課程中，學生的學習它也標記之間的及呈列方式的的差異。在過去的過程中，該術(shù)語中，學生們學會從零起步，操縱HTML，CSS和的圖像文件的，來創(chuàng)建一個Web頁。他們的布局將通常是完全自定義的，，并通常，，他們將關(guān)于的花車和作為的這個過程中的一部分的定位的中學習。瀏覽器兼容性可能會遇到上眼。不要敬畏互聯(lián)網(wǎng)”是一個夢幻般的的的教的一些相當有用的的的HTML和的CSS基礎(chǔ)知識的的學習資源，的。

從根本上說，沒有什么是錯的的與這個類中。學生將離開知道如何手工代碼符合標準的HTML和CSS。但是，它確實需要一些修改考慮到現(xiàn)代設(shè)計技術(shù)：

在一個瀏覽器中標準化。，

我建議你的工作與Firefox或Chrome作為的標準的瀏覽器在課堂上，，因為他們是可用的Mac和PC上，并都是的最符合標準的。告訴學生，這是唯一的的的瀏覽器，它重要的為的目的的這個類中?？鐬g覽器的問題應(yīng)處理后，一旦學生了解HTML和CSS的工作完全在這個瀏覽器中。當交叉-瀏覽器問題時被盡快介紹的太，學生得到感到困惑，還不清楚的，是否一個特定的的的問題是由于到瀏覽器或者只是糟糕形成的代碼。
示教HTML5。
學生應(yīng)該學會如何，以紀念與章節(jié)中，的旁白，導(dǎo)航，的頁眉和頁腳從一開始就的高達的文檔。
教：CSS3和所有類型的選擇。
確保學生只要他們能夠理解媒體查詢。引入相鄰的兄弟選擇器，子選擇器，通用選擇器，各種偽類等等。再次，擔心有關(guān)瀏覽器的支持的少信息的是，，因為這些學生已經(jīng)有多年在畢業(yè)前。
盡早納入基于網(wǎng)格的思想，
即使學生不能編寫自己的電網(wǎng)，他們當然可以建立布局一邊想著12列，使用em和/或百分比寬度和大小。有學生的的代碼的標準形狀的的的頁面，比如作為兩個-和三個-柱的布局，帶或不帶的頁眉，頁腳和橫向的的導(dǎo)航的，而不是離開學生的開放的，以編寫代碼任何類型的布局。了解的貿(mào)易-權(quán)衡的設(shè)計和的代碼之間的是很重要的的，所以則始終尋址那些。
只要學生掌握的花車和定位，教如何編寫一個網(wǎng)格，
因為學生一直在思考網(wǎng)頁設(shè)計基于網(wǎng)格的原則，這種轉(zhuǎn)變應(yīng)該是相當快的。
響應(yīng)式設(shè)計現(xiàn)在是一個簡短的講座，不長個，
學生現(xiàn)在能夠齊心協(xié)力基于網(wǎng)格的布局和媒體查詢。他們可能已經(jīng)遇到過沿的方式的圖像-調(diào)整大小的的問題，，，但如果沒有的是，這是的的時間來討論他們。
現(xiàn)在是時候來討論瀏覽器的兼容性。
現(xiàn)在，學生已經(jīng)掌握了有效的，符合標準的，反應(yīng)靈敏的代碼，現(xiàn)在是時候想想瀏覽器的兼容性。一種方式來介紹，這是支持HTML5標簽不當或CSS3圓角元素，如工作。
CSS的的預(yù)處理是一個熱門話題。
集中化的的CSS變量，是一個偉大的的主意，并被綁定到是的一個核心的的的CSS技能，雇主所需由的缺乏勞工，在接下來的的一年或兩年。（有人說這是已經(jīng)在這里的。）某些LESS和Sass都的的概念，（例如作為集中式變量的和邏輯），也郵政編碼或者按照聯(lián)邦州一個一門課程在JavaScript和jQuery的上的平穩(wěn)地過渡到，在其中，類似的概念，就能取得重要的的。
占地響應(yīng)式設(shè)計框架是不是一個壞主意，
如果有時間留在課堂，這是一個偉大的主題探索。我建議如果你教過少，或者如果你教基金會薩斯覆蓋引導(dǎo)。學生將學習如何以讀取別人的代碼（一項重要的技能！），以及如何以閱讀文檔;他們也將學習新的的技術(shù)，（作為以及作為探索）的使用成文的的，開放的的-源代碼的框架的的正片和底片。最后，為自己的目的，他們將學習如何自定義此代碼。

間接技能

由家現(xiàn)代化的前端-的Web開發(fā)的，我已經(jīng)涵蓋了直接塑造的的技能。我也建議涵蓋一些間接的技能，這些課程或其他課程的學生參加的一部分。

開源的理念
，而不是教給學生，開源是免費的（如啤酒），教他們生存的基礎(chǔ)上貢獻開源項目。介紹GitHub上，并解釋人們?nèi)绾慰梢韵螺d，叉，并在網(wǎng)上發(fā)布自己的代碼。學生了解與開放源碼社區(qū)，并讓他們最看重的這些社區(qū)類型的捐款。
在線投資組合
這些都已經(jīng)集成對在現(xiàn)在為幾個幾年者的的課程中中，，，但他們往往，以被用來更多的由設(shè)計師比由開發(fā)人員。隨著投資組合中，觀眾可以專注于視覺設(shè)計本身，而不是對碼或后面的工作理念。確保學生習慣于張貼代碼審查（鏈接到自己的GitHub頁面是一個很大的觸摸）。

有學生解釋他們一直試圖解決的問題，為什么他們把他們做的方法來解決這些問題。博客應(yīng)需要，讓學生可以追蹤有趣的文章，新方法的問題，感興趣的代碼段等等。鼓勵開發(fā)一家專業(yè)從事的的社會-媒體的存在的的學生，以，專注于他們的的的的代碼和工作。
理解和修改別人的的代碼
作為開放的的的源仍會繼續(xù)，，以獲得在的企業(yè)的世界的接納和尊重，的能力，，以理解別人的代碼，，并，以修改它將加大在的重要性。
識別趨勢
是什么我們?nèi)绾谓咏黈eb開發(fā)的游戲換，傳遞什么潮流？我們什么樣的技能應(yīng)該現(xiàn)在被學習嗎？（總有新的東西去學習。）
學習如何學習到的技術(shù)
學生可以并不總是指望一個老師到勺子喂他們什么，他們接下來需要，以知道的。他們需要要弄清楚如何來學習，恕不的課程或書籍，在為了，以留上的切削的邊緣的。幫助學生牧師有趣的博客和社交媒體資源，為尋找技巧和技術(shù)。

對于教學理念的新的學生的指引

許多優(yōu)秀的網(wǎng)頁設(shè)計師和開發(fā)人員發(fā)現(xiàn)教學初學者繁瑣和困難。問題的部分原因是一個高層次的開發(fā)人員都知道這么多的信息沒有意識到這一點。當是的最后一個的的時間一家專業(yè)的認真不得不，以想到有關(guān)語法，檔案管理，的順序在一個的的風格的負債表內(nèi)，正確的標記為一個頁面的樣式，并等等來回嗎？專業(yè)人員會遇到這些問題每天多次，但他們都是新的開始學生。

提供一個概述。
在更大的Web的宇宙中，飛度感興趣的話題。例如，什么是HTML？是什么的縮寫？它是在哪里？HTML可以站在自己作為一個網(wǎng)頁？誰需要了解HTML？如何用HTML CSS適合嗎？，請勿花很長的的在此的概述中。我們的想法是定向的學生，給予大畫面。細節(jié)將得到填補，因為他們的語言。這種材料可以通過幻燈片或白板。一如往常，讓學生參與討論，并觀看了混亂。確保他們明白概述移動代碼之前，否則代碼將沒有任何意義。
寫代碼的類。
在一個人的教學環(huán)境，我喜歡打開一個文本編輯器和項目代碼的開銷，我的學生跟隨著他們的電腦。這讓他們從事。有些學生發(fā)現(xiàn)，他們不鍵入沿與我同井，無論是，因為他們有一個不同的的的的學習的風格或較差的的打字的技能。在這些情況下，我鼓勵他們，以支付密切的注意，，而有些其他人將寫用鋼筆和紙張的筆記和代碼片段。如果你是網(wǎng)上教學，我會做同樣的類型的介紹，用畫外音的的使用Camtasia捕捉到我的代碼在屏幕上。在這兩種情況下，您的文件提供給所有學生，使他們可以看到你的作品。評論經(jīng)常在自己的代碼，讓他們明白你的說明和例子。
撰寫編寫一個一點在一個時間的，慢慢地使得的例子更復(fù)雜的。
不要引入了太多的許多項目，在一旦。例如，當你介紹的CSS，HTML標簽開始寫作風格。造型車身標簽可以控制整個Web頁面，包括背景顏色，字體，大小，等寫一個屬性的時間，保存更改，每次在瀏覽器中顯示，讓學生清楚地看到哪一行CSS控制頁面上的元素。
請問沿的方式的問題。
詢問學生，，以想出與一個可能會遇到的時，建設(shè)一個“頁，在確認如何，以做它之前，中的挑戰(zhàn)的解決方案，以。如果他們能解釋一下的想法在概念上，那么代碼變得也容易的。對于個例子，，如果你已經(jīng)樣式化了一個Web頁面的的的身體與藍色的的文本，問你是如何將做出的主要的的的航向的紅色。如果的同學可以解釋，你會需要以某種方式改變文本的在的H1標記中到是紅色的的的，然后他們正在做的得非常好。然后，你會簡單地需要向他們展示如何，，以寫那個作為代碼。
這是很難，以保持的東西簡單，且易于的，，以使他們的復(fù)雜的。，
學生們將問，沿的方式的復(fù)雜的問題。對于個例子，，他們可能會注意到沿那件紅色可以被書面作為＃FF0000，紅色或rgb的（255,0,0），，并會問，的區(qū)別是什么它們之間的的的方式！嘗試，以避免一個場景例如作為這個早期的的上的。出示一個單一的的的的方式來寫顏色（我建議＃FF0000），，，，并且不再訪此問題，直到學生已經(jīng)掌握了了這個方法。也許以后的課程中，學生們會發(fā)現(xiàn)別人的示例代碼中的RGB（255,0,0），在這一點上，解釋的差異，將是快速和容易。但在剛開始的時候一點是有道理的，有多少要記住，太多的信息可以壓倒。
語法是具有挑戰(zhàn)性的。
期初學生忘記關(guān)閉標簽，忘記分號，完全彌補標簽和許多其他錯誤。查找這些錯誤中吸取教訓有時是容易的的和其他倍的具有挑戰(zhàn)性的。我想向大家介紹的話題驗證還算早在這個過程中，從而使學生有一件容易的的的的的方式來檢查他們的的的工作。在開始的時候中，您可能會需要，以指向出來中丟失，額外的或未閉合的的的的的語法，但教他們從一開始就的健壯的的調(diào)試技術(shù)，將幫助他們顯著。
管理文件是一個挑戰(zhàn)。
對于在介紹性的HTML和CSS的課程的的最的學生，文件管理是一個恒定的的的的問題。一些區(qū)分信息保存在硬盤驅(qū)動器與一個拇指驅(qū)動器上保存，有些人可能不知道的文件和文件夾的區(qū)別就會有麻煩。在教學如何來管理一個網(wǎng)站，的上的文件之前，，，，您可能需要來解釋的基本面。我盡量保持項目的所有文件在一個文件夾在桌面上開始，因為學生通?？梢哉业阶烂?，一個單一的文件夾離開混亂的小房間。所有的HTML，圖像和CSS，然后保存在該文件夾中。它在第一次的易于管理的功能的，，因為的學生們將需要只有極少數(shù)的為他們的的第一個的幾個網(wǎng)站的資產(chǎn)。學生感覺像一個文件夾越來越混亂，他們希望一些更多的組織的時候，他們將掌握如何連結(jié)兩個文件，插入圖像等。他們怎么會知道的代碼應(yīng)該看起來和工作，一些代碼，如果不工作，他們會合理地認為罪魁禍首是一種畸形的路徑。
請記住，，你是不是為一個客戶端進行設(shè)計。
有才華的教練之間的一個常見的錯誤是美麗的，使他們在課堂范例網(wǎng)頁，調(diào)整到完美，從一開始就和跨瀏覽器兼容。不幸的是，那是不是了這一點。初學者也能輕松網(wǎng)上沖浪，發(fā)現(xiàn)美麗的設(shè)計。此外，您還是 - 指導(dǎo)教師的在這種方式，，你不不得不來證明你的的競爭力，。你的任務(wù)是向他們展示清楚每一行代碼做什么，以及它是如何影響網(wǎng)頁，無論是在外觀和功能。當我在寫代碼與學生，，我中插入一個很多猙獰的的的的背景的顏色和在的CSS中的邊界，來展示出的概念。我鼓勵學生用同樣的方法來調(diào)試CSS。不要放棄太多的CSS太快。學生將推動使事情變得更漂亮的自己，毫無疑問 - 其中許多將是平面設(shè)計師和他們早期的網(wǎng)頁是多么的丑陋，會恨。然而，當學生看到你的進步在他們的設(shè)計中，從第一個HTML頁面的一些基本的CSS樣式和最后一個完整的布局，沒有造型，他們將耐心等待與你，如果你解釋某個特定的問題是復(fù)雜的或過早點。
您自己的職業(yè)生涯奠定了基礎(chǔ)，
平面設(shè)計，HTML和CSS的關(guān)鍵技能，專業(yè)設(shè)計師的工作，每一天。寫作干凈，高效的的的代碼時，了解如何來調(diào)試問題，的，研究更好的的方式，以解決的的問題，解決跨-瀏覽器兼容性問題的-這些都是在生活中一個前端-開發(fā)人員的的基本概念。我看到學生從入門導(dǎo)師不良大打折扣。你的工作是非常重要的，所以，慢慢走，新材料，確保學生有扎實的理解，移動到下一個話題之前。