2016-11-27 58 views
-5

我被認爲是網頁設計的新手,我發現在我的教育漏洞。我的教授使用Dreamweaver教我們,並簡單地使用它,因爲Dreamweaver做了80%的工作(這是通過商學院,效率是重點而不是質量)。

儘管我在課堂上得分高,但這並沒有教會我什麼。我正在做更多的網頁設計,目前我無法理解如何編程來解決各種設備問題。我想知道的是代碼示例,文章(我發現了一些,但沒有任何有用的東西),或者其他可能有助於填補我的空洞的東西。

我想專業處理代碼,處理屏幕寬度,瀏覽器和其他可能影響網頁的設備怪癖。基本上我缺乏格式化的好習慣。感謝您的耐心和時間!網頁設計的做法,以最好地處理各種設備

+2

你沒有。您編寫了一個響應式設計,在CSS中使用斷點來滿足屏幕中不同的大小。除了不同的圖像大小(可能還有其他一些非常具體的項目),你不會在任何地方使用「px」。您可以使用'em'或'%'作爲尺寸,並且可以爲屏幕變得太窄而無論什麼元素設置斷點。你不關心瀏覽器的類型,因爲你至少檢查所有主要的瀏覽器,並確保它在所有瀏覽器中都能正常工作。你不會像Dreamweaver一樣使用垃圾,並且確保遵循標準並使用語義HTML。 – junkfoodjunkie

+2

在現代網絡中存在CSS中的媒體查詢,用於爲不同的屏幕尺寸定義不同的樣式。 Bootstrap或Foundation等很多現代框架已經使這一點變得簡單。 SASS也很有趣,如果你想專業做事。 –

回答

1

這裏有一些很好的建議,雖然提到的一些事情可能會導致你一些混淆,因爲你會第一次研究響應式設計。首先,您可以使用px尺寸,並且您並不總是必須使用em的。您選擇的測量值取決於您的設計以及您希望如何響應。 SASS絕對值得學習,但現在它與你學習響應式設計無關。

在YouTube上有無數的教程(try this channel)關於構建基本的響應式網站。如果你想學習響應式網頁設計,並真正理解背後的原則,那麼我會推薦這本書Responsive Web Design。它很短的閱讀,但是一個很好的資源。

另外你提到你的編程技巧有限,所以我假設你只有基本的HTML。雖然本質上HTML很容易理解,但當談到構建響應式網站時,您確實需要額外關注語義標籤,而不僅僅是HTML的佈局。這又取決於你的設計,以及你希望你的網站在不同的屏幕尺寸上看起來如何,當你開始構建你的第一個項目時,爲什麼我已經提到了你的HTML佈局的重要性,這將變得更加清晰。

+0

非常感謝!我會研究這些鏈接。我確實理解了html語義標籤,並使用css來解釋一些設備怪癖,但不多。大多數人猜測我的工作是因爲我說我的老師吸吮教學。我試圖要求在代碼級別教授一些東西,並且她吹噓說企業需要量化,然後可以做到質量。當然,我們從來沒有達到質量部分....非常失望。無論如何,再次感謝你! –

+0

出於好奇你在學什麼? –

+0

該課程是通過位於格里利的UNC的Monfort商學院授課的基礎網頁設計。 –

-1

如果您想要考慮多個設備及其特定寬度,您可能正在尋找media queries,這是CSS中使用的一種標記類型。

媒體查詢以指定寬度創建斷點,僅當屏幕高於/低於指定寬度時才應用某個css。這將允許您爲多個設備創建不同的觀看體驗。

但是,媒體查詢將無法處理動態更改的大小(請考慮調整瀏覽器大小)。爲此,您需要對響應式網頁設計進行一些研究。