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

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

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

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

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

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

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

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

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

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

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

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

教學(xué)HTML和CSS

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

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

在一個(gè)瀏覽器中標(biāo)準(zhǔn)化。，

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

間接技能

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

• 開源的理念
  ，而不是教給學(xué)生，開源是免費(fèi)的（如啤酒），教他們生存的基礎(chǔ)上貢獻(xiàn)開源項(xiàng)目。介紹GitHub上，并解釋人們?nèi)绾慰梢韵螺d，叉，并在網(wǎng)上發(fā)布自己的代碼。學(xué)生了解與開放源碼社區(qū)，并讓他們最看重的這些社區(qū)類型的捐款。
• 在線投資組合

  這些都已經(jīng)集成對在現(xiàn)在為幾個(gè)幾年者的的課程中中，，，但他們往往，以被用來更多的由設(shè)計(jì)師比由開發(fā)人員。隨著投資組合中，觀眾可以專注于視覺設(shè)計(jì)本身，而不是對碼或后面的工作理念。確保學(xué)生習(xí)慣于張貼代碼審查（鏈接到自己的GitHub頁面是一個(gè)很大的觸摸）。

  有學(xué)生解釋他們一直試圖解決的問題，為什么他們把他們做的方法來解決這些問題。博客應(yīng)需要，讓學(xué)生可以追蹤有趣的文章，新方法的問題，感興趣的代碼段等等。鼓勵(lì)開發(fā)一家專業(yè)從事的的社會-媒體的存在的的學(xué)生，以，專注于他們的的的的代碼和工作。

• 理解和修改別人的的代碼
  作為開放的的的源仍會繼續(xù)，，以獲得在的企業(yè)的世界的接納和尊重，的能力，，以理解別人的代碼，，并，以修改它將加大在的重要性。
• 識別趨勢
  是什么我們?nèi)绾谓咏黈eb開發(fā)的游戲換，傳遞什么潮流？我們什么樣的技能應(yīng)該現(xiàn)在被學(xué)習(xí)嗎？（總有新的東西去學(xué)習(xí)。）
• 學(xué)習(xí)如何學(xué)習(xí)到的技術(shù)
  學(xué)生可以并不總是指望一個(gè)老師到勺子喂他們什么，他們接下來需要，以知道的。他們需要要弄清楚如何來學(xué)習(xí)，恕不的課程或書籍，在為了，以留上的切削的邊緣的。幫助學(xué)生牧師有趣的博客和社交媒體資源，為尋找技巧和技術(shù)。

對于教學(xué)理念的新的學(xué)生的指引

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

• 提供一個(gè)概述。
  在更大的Web的宇宙中，飛度感興趣的話題。例如，什么是HTML？是什么的縮寫？它是在哪里？HTML可以站在自己作為一個(gè)網(wǎng)頁？誰需要了解HTML？如何用HTML CSS適合嗎？，請勿花很長的的在此的概述中。我們的想法是定向的學(xué)生，給予大畫面。細(xì)節(jié)將得到填補(bǔ)，因?yàn)樗麄兊恼Z言。這種材料可以通過幻燈片或白板。一如往常，讓學(xué)生參與討論，并觀看了混亂。確保他們明白概述移動代碼之前，否則代碼將沒有任何意義。
• 寫代碼的類。
  在一個(gè)人的教學(xué)環(huán)境，我喜歡打開一個(gè)文本編輯器和項(xiàng)目代碼的開銷，我的學(xué)生跟隨著他們的電腦。這讓他們從事。有些學(xué)生發(fā)現(xiàn)，他們不鍵入沿與我同井，無論是，因?yàn)樗麄冇幸粋€(gè)不同的的的的學(xué)習(xí)的風(fēng)格或較差的的打字的技能。在這些情況下，我鼓勵(lì)他們，以支付密切的注意，，而有些其他人將寫用鋼筆和紙張的筆記和代碼片段。如果你是網(wǎng)上教學(xué)，我會做同樣的類型的介紹，用畫外音的的使用Camtasia捕捉到我的代碼在屏幕上。在這兩種情況下，您的文件提供給所有學(xué)生，使他們可以看到你的作品。評論經(jīng)常在自己的代碼，讓他們明白你的說明和例子。
• 撰寫編寫一個(gè)一點(diǎn)在一個(gè)時(shí)間的，慢慢地使得的例子更復(fù)雜的。
  不要引入了太多的許多項(xiàng)目，在一旦。例如，當(dāng)你介紹的CSS，HTML標(biāo)簽開始寫作風(fēng)格。造型車身標(biāo)簽可以控制整個(gè)Web頁面，包括背景顏色，字體，大小，等寫一個(gè)屬性的時(shí)間，保存更改，每次在瀏覽器中顯示，讓學(xué)生清楚地看到哪一行CSS控制頁面上的元素。
• 請問沿的方式的問題。
  詢問學(xué)生，，以想出與一個(gè)可能會遇到的時(shí)，建設(shè)一個(gè)“頁，在確認(rèn)如何，以做它之前，中的挑戰(zhàn)的解決方案，以。如果他們能解釋一下的想法在概念上，那么代碼變得也容易的。對于個(gè)例子，，如果你已經(jīng)樣式化了一個(gè)Web頁面的的的身體與藍(lán)色的的文本，問你是如何將做出的主要的的的航向的紅色。如果的同學(xué)可以解釋，你會需要以某種方式改變文本的在的H1標(biāo)記中到是紅色的的的，然后他們正在做的得非常好。然后，你會簡單地需要向他們展示如何，，以寫那個(gè)作為代碼。
• 這是很難，以保持的東西簡單，且易于的，，以使他們的復(fù)雜的。，
  學(xué)生們將問，沿的方式的復(fù)雜的問題。對于個(gè)例子，，他們可能會注意到沿那件紅色可以被書面作為＃FF0000，紅色或rgb的（255,0,0），，并會問，的區(qū)別是什么它們之間的的的方式！嘗試，以避免一個(gè)場景例如作為這個(gè)早期的的上的。出示一個(gè)單一的的的的方式來寫顏色（我建議＃FF0000），，，，并且不再訪此問題，直到學(xué)生已經(jīng)掌握了了這個(gè)方法。也許以后的課程中，學(xué)生們會發(fā)現(xiàn)別人的示例代碼中的RGB（255,0,0），在這一點(diǎn)上，解釋的差異，將是快速和容易。但在剛開始的時(shí)候一點(diǎn)是有道理的，有多少要記住，太多的信息可以壓倒。
• 語法是具有挑戰(zhàn)性的。
  期初學(xué)生忘記關(guān)閉標(biāo)簽，忘記分號，完全彌補(bǔ)標(biāo)簽和許多其他錯(cuò)誤。查找這些錯(cuò)誤中吸取教訓(xùn)有時(shí)是容易的的和其他倍的具有挑戰(zhàn)性的。我想向大家介紹的話題驗(yàn)證還算早在這個(gè)過程中，從而使學(xué)生有一件容易的的的的的方式來檢查他們的的的工作。在開始的時(shí)候中，您可能會需要，以指向出來中丟失，額外的或未閉合的的的的的語法，但教他們從一開始就的健壯的的調(diào)試技術(shù)，將幫助他們顯著。
• 管理文件是一個(gè)挑戰(zhàn)。

  對于在介紹性的HTML和CSS的課程的的最的學(xué)生，文件管理是一個(gè)恒定的的的的問題。一些區(qū)分信息保存在硬盤驅(qū)動器與一個(gè)拇指驅(qū)動器上保存，有些人可能不知道的文件和文件夾的區(qū)別就會有麻煩。在教學(xué)如何來管理一個(gè)網(wǎng)站，的上的文件之前，，，，您可能需要來解釋的基本面。我盡量保持項(xiàng)目的所有文件在一個(gè)文件夾在桌面上開始，因?yàn)閷W(xué)生通常可以找到桌面，一個(gè)單一的文件夾離開混亂的小房間。所有的HTML，圖像和CSS，然后保存在該文件夾中。它在第一次的易于管理的功能的，，因?yàn)榈膶W(xué)生們將需要只有極少數(shù)的為他們的的第一個(gè)的幾個(gè)網(wǎng)站的資產(chǎn)。學(xué)生感覺像一個(gè)文件夾越來越混亂，他們希望一些更多的組織的時(shí)候，他們將掌握如何連結(jié)兩個(gè)文件，插入圖像等。他們怎么會知道的代碼應(yīng)該看起來和工作，一些代碼，如果不工作，他們會合理地認(rèn)為罪魁禍?zhǔn)资且环N畸形的路徑。

• 請記住，，你是不是為一個(gè)客戶端進(jìn)行設(shè)計(jì)。

  有才華的教練之間的一個(gè)常見的錯(cuò)誤是美麗的，使他們在課堂范例網(wǎng)頁，調(diào)整到好，從一開始就和跨瀏覽器兼容。不幸的是，那是不是了這一點(diǎn)。初學(xué)者也能輕松網(wǎng)上沖浪，發(fā)現(xiàn)美麗的設(shè)計(jì)。此外，您還是 - 指導(dǎo)教師的在這種方式，，你不不得不來證明你的的競爭力，。你的任務(wù)是向他們展示清楚每一行代碼做什么，以及它是如何影響網(wǎng)頁，無論是在外觀和功能。當(dāng)我在寫代碼與學(xué)生，，我中插入一個(gè)很多猙獰的的的的背景的顏色和在的CSS中的邊界，來展示出的概念。我鼓勵(lì)學(xué)生用同樣的方法來調(diào)試CSS。不要放棄太多的CSS太快。學(xué)生將推動使事情變得更漂亮的自己，毫無疑問 - 其中許多將是平面設(shè)計(jì)師和他們早期的網(wǎng)頁是多么的丑陋，會恨。然而，當(dāng)學(xué)生看到你的進(jìn)步在他們的設(shè)計(jì)中，從第一個(gè)HTML頁面的一些基本的CSS樣式和最后一個(gè)完整的布局，沒有造型，他們將耐心等待與你，如果你解釋某個(gè)特定的問題是復(fù)雜的或過早點(diǎn)。

• 您自己的職業(yè)生涯奠定了基礎(chǔ)，
  平面設(shè)計(jì)，HTML和CSS的關(guān)鍵技能，專業(yè)設(shè)計(jì)師的工作，每一天。寫作干凈，高效的的的代碼時(shí)，了解如何來調(diào)試問題，的，研究更好的的方式，以解決的的問題，解決跨-瀏覽器兼容性問題的-這些都是在生活中一個(gè)前端-開發(fā)人員的的基本概念。我看到學(xué)生從入門導(dǎo)師不良大打折扣。你的工作是非常重要的，所以，慢慢走，新材料，確保學(xué)生有扎實(shí)的理解，移動到下一個(gè)話題之前。

當(dāng)前標(biāo)題：圖形的設(shè)計(jì)和HTML和的CSS.
網(wǎng)頁網(wǎng)址：http://www.muchs.cn/news20/78670.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站策劃、網(wǎng)站營銷、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)