1、在網頁製作中,通常用什麼來控制文本,圖片等各種元素的位置
網頁中的常見元素主要包括以下幾種類型：文本、圖象、動畫、視頻音樂、超鏈接、表格、表單和各類控制項等。
一、文本：文字能准確地表達信息的內容和含義，且同樣信息量的文本位元組往往比圖象小，比較適合大信息量的網站。
二、圖像：在網頁中使用GIF, JPEG(JPG), PNG三種圖象格式，其中使用最廣泛的是GIF和JPEG兩種格式。
說明：當用戶使用所見即所得的網頁設計軟體在網頁上添加其他非GIF, JPEG, 或PNG格式的圖片並保存時，這些軟體通常會自動將少於8位顏色的圖片轉化為GIF格式，或將多於8位顏色的圖片轉化為JPEG.另外，JPG圖片是靜態圖，GIF則可以是動態圖片
三、動畫：主要指由FLASH軟體製作的動畫,由於其是准流媒體文件,加上矢量動畫,文件小,使其在網路運行具有強大優勢,是網頁設計者必學的軟體。
四、聲音和視頻：用於網路的聲音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。很多瀏覽器不要插件也可以支持MIDI,WAV和AIF格式的文件，而MP3和RM格式的聲音文件則需要專門的瀏覽器播放。視頻文件均需插件（如REALONE、MEDIA PLAYER）支持，用於網路的視頻格式主要有ASF、WMV、RM等流媒體格式。
五、超級鏈接：從一個網頁指向另一個目的端的鏈接。
六、表格：在網頁中表格用來控制網頁中信息的布局方式。這包括兩方面：
1、是使用行和列的形式來布局文本和圖像以及其他的列表化數據；
2、是可以使用表格來精確控制各種網頁元素在網頁中出現的位置。
七、表單：用來接受用戶在瀏覽器端的輸入，然後將這些信息發送到用戶設置的目標端。表單由不同功能的表單域組成，最簡單的表單也要包含一個輸入區域和一個提交按鈕。
根據表單功能與處理方式的不同，通常可以將表單分為用戶反饋表單，留言簿表單，搜索表單和用戶注冊表單等類型。
八、導航欄：導航欄就是一組超級鏈接，這組超級鏈接的目標就是本站點的主頁以及其他重要網頁。導航欄的作用就是引導瀏覽者游歷站點，同時首頁的導航欄，對搜索引擎的收錄意義重大。
九、網頁中除了以上幾種最基本的元素之外，還有一些其它的常用元素，包括懸停按鈕，Java特效，ActiveX等各種特效。它們不僅能點綴網頁，使網頁更活潑有趣，而且在網上娛樂，電子商務等方面也有著不可忽視的作用。
2、網頁設計的幾個要素是什麼？
(一)圖片要素
圖片並不適合於所有的網頁，而是和網頁的主要內容有關，有些網站，來訪者並不在意網頁是否可以做出精美的圖片，他們所關心的只是網站中的內容，如果加入大量的圖片，來訪者反而覺得過多的圖片會影響訪問的速度;而像游戲網站、風景名勝網站和影視介紹網站，則需要大量精美的圖片作為依託。在這類網站中，圖片是一個極其重要的要素，如果這類網站少了做工精美的圖片，那麼整個網站都會顯得黯然失色。要做出精美漂亮的圖片，就需要設計者熟練掌握圖形圖像設計軟體，還要有一定的美術基礎和創意技巧。
(二)排列方法要素
網頁的排列方法也叫做網頁布局，這是網頁設計中尤為重要的一環。網頁作為一種版面，既有文字又有圖片，文字有大有小，有標題和正文之分，圖片有橫豎之別。我們要用完美的格式將文字和圖片同時展現給來訪者，而不能將其簡單地羅列在一起，給人一種雜亂無章之感。關於網頁布局，常見的有「國」字型、標題正文型、拐角型、左右框架型、上下框架型、綜合框架型等多種方式，我們要根據網頁的內容來進行選擇。如網頁內容豐富繁雜，就需要考慮用「國」字型或拐角型，而如果網頁內容比較少則可以選擇標題正文型。關於網頁布局，我們要靈活多變地來進行設計，這樣才能不斷提高和豐富我們的網頁。
(三)主色調要素
主色調要素也就是色彩要素，色彩在網頁中佔有很大的比重。我們在進行網頁主頁設計時，利用合理清新的色彩可以彌補主頁上的其他不足。當然，在網頁頁面的色彩搭配選擇上與網站的主題是分不開的，一個網站在色彩的選擇上不能太多也不能太少，這樣既可以避免瀏覽者因色彩過多而迷失方向，也不至於色彩單調而乏味。
3、網頁設計中如何讓一大圖放在一個小格子里？
將圖片設置為塊元素
然後給圖片添加邊框添加內邊距 【如果小格子可以設置圖片大小】
可以實現上述效果
4、網頁設計中的元素有哪些？
1.塊級元抄素 div，p，ul，ol，dt，dd，h1_h6
獨佔一行
寬度追隨父容器的寬度
可以設置寬度高度
2. 行內元素span. a. font
在一行上進行顯示
設置寬度高度無效果
3. 行內塊元素
img. input.
能夠在一行上顯示
能夠設置寬度、高度
5、網頁設計應該如何布局
網頁布局類型
網頁布局大致可分為「國」字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型，下面分別論述。 1.
「國」字型:也可以稱為「同」字型，是一些大型網站所喜歡的類型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內
2. 拐角型:這種結構與上一種其實只是形式上的區別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。
3. 標題正文型:這種類型即最上面是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。
4. 左右框架型:這是一種左右為分別兩頁的框架結構，一般左面是導航鏈接，有時最上面會有一個小的標題或標致，右面是正文。我們見到的大部分的大型論壇都是這種結構的，有一些企業網站也喜歡採用。這種類型結構非常清晰，一目瞭然。
5. 上下框架型:與上面類似，區別僅僅在於是一種上下分為兩頁的框架。
6. 綜合框架型:上頁兩種結構的結合，相對復雜的一種框架結構，較為常見的是類似於「拐角型」結構的，只是採用了框架結構。 7.
封面型:這種類型基本上是出現在一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個「進入」的鏈接甚至直接在
首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現在企業網站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。
8. Flash型:其實這與封面型結構是類似的，只是這種類型採用了目前非常游戲行的Flash，與封面型不同的是，由於Flash強大的功能，頁面所表達的信息更豐富，其視覺效果及聽覺效果如果處理得當，絕不差於傳統的多媒體。
9. 變化型:即上面幾種類型的結合與變化，比如本站在視覺上是很接近拐角型的，但所實現的功能的實質是那種上、左、右結構的綜合框架型。
6、網頁中最重要的布局元素是什麼
1.文字
雖然有時候可能一個頁面的文字沒有幾個，但你可千萬別小瞧文字的作用。字體的選擇，字體的大小、間距以及多種字體如何自然地搭配都是決定你設計的關鍵因素。在同一個頁面有限的文字區域內你所用到的字體樣式絕對不止一種，甚至會有三四種，這是為了打破單一字體給用戶帶來的單調感。字體的搭配是將兩種或更多字體通過合理的排版達到最佳效果的過程。對於很多初學者來說，他們覺得選擇只用選擇漂亮字體就夠了，事實上，選擇漂亮的字體並不難，如何讓它們完美地搭配在一起，相得益彰，這才是應該好好下功夫的地方。
2.圖片
圖片可以說是一個網站的核心了，許多設計師都會把大量的精力放在圖片設計上，因為很多用戶在瀏覽網頁的時候停留的時間不會太久，更不會花太多時間閱讀你的內容。這個時候，一張好看的圖片就能夠快速有效地抓住用戶的眼球。大家所熟知的蘋果公司官網大部分都是這樣的套路，直接將產品的圖片呈現在大家面前，沒有過多的贅述，反而會讓用戶覺得簡潔明了。
交互設計在網頁設計中有著相當好的勢頭，那麼在設計交互的時候，必定會涉及到許多的頁面、組件。由於這么多的組件元素要排列在同一個頁面上，要考慮的情況也就多了許多。在做交互設計之前，你必須站在用戶的角度考慮，菜單導航應該在哪個地方最清晰可見？組件應該通過什麼樣的方式展現用戶才會覺得方便？組件和組件之間要怎樣排布才會不影響用戶的視覺效果？這就要求網頁設計師有一個流暢的原型設計過程，通過藉助一些原型設計工具（Axure，Mockplus, Justinmind等）來設計出合理、帶來良好用戶體驗的交互設計。
4.視頻和動畫
如果一個網頁只有文字和圖片這樣靜態的元素，難免少了一些生氣。現如今，視頻和動畫的製作成本很低，網路傳播性強，與社交媒體網站的兼容性好，甚至在一定程度上，視頻和動畫傳播的有效信息比文本還要多。於是，在網頁設計排版中，視頻和動畫也會被設計師們加入其中。但要注意的是，視頻或者和動畫設計在同一個版面上不能出現太多，最好一到兩處就可以，否則會讓用戶感到眼花繚亂，甚至它們會喧賓奪主，導致顧客找不到你產品的重點。
7、網頁設計中,屬於常用布局的塊狀結構是什麼
塊級元素按照其應用於結構還是內容分為三種：結構化塊狀元素，終端塊狀元素，多目標塊狀元素。
一.結構化塊狀元素
這類元素用於構造文檔的結構，一個好的文檔結構對於搜索引擎和應用其他技術（如JavaScript）都是十分有利的。它們沒有語義上的含義，僅僅劃分出了文檔的組織方式，並沒有體現文檔的內容。
主要的結構化塊狀元素
* <ol>
* <ul>
* <dl>
* <table>
支持結構化的元素
* <li>
* <dt>
* <dd>
* <caption>
* <thead>
* <tbody>
* <tfoot>
* <colgroup>
* <col>
二.終端塊狀元素
這類元素用於從結構轉向內容，它們擁有語義上的含義，能夠表明內容的性質。終端塊狀元素屬於結構的終點，它們不能再包含其他塊級元素，只能包含文本或行級元素。
終端塊狀元素
* <h1>...<h6>
* <p>
* <blockquote>
* <dt>
* <address>
* <caption>
三.多目標塊狀元素
所謂多目標指的是可以自由的擴展或嵌套文檔的結構，以可以終端的形式出現。當多目標塊狀元素以結構化的方式使用時就含有結構化的內涵，以終端的形式使用就含有語義的內涵。
多目標塊狀元素既可以包含塊狀元素，也可以包含內容（文本與行級元素的組合為內容），但不能同時包含兩者。應該把內容放在塊狀元素中。塊狀元素不應作為行級元素與文本的兄弟元素，受HTML校驗器的限制，目前還沒辦法檢驗出此種情況，但是應該避免。
多目標塊狀元素
* <div>
* <li>
* <dd>
* <td>
* <form>
* <noscript>
在談論CSS布局時，我們需要提前知道一些東西。對於html各種標簽/元素，可以從塊的層面做一個分類：要麼是block(塊元素)，要麼是inline(內聯元素)：
block元素的特點：
* 總是另起一行開始；
* 高度，行高以及頂、底邊距都可控制；
* 寬度預設是它所在容器的100%，除非設定一個寬度。
inline元素的特點：
* 和其它元素都在一行上；
* 高度，行高以及頂、底邊距不可改變；
* 寬度就是它所容納的文字或圖片的寬度，不可改變。
下面對它們的性質及應用做進一步說明：
◎塊元素(block element) 通常作為其它元素的容器，它可以容納內聯元素和其它塊元素。
我們知道默認情況下，塊元素會順序以每次另起一行的方式往下排，而通過CSS控制其樣式，我們可以改變這種默認布局模式，把塊元素擺放到你想要的位置上 去。需要指出的是，table標簽也是塊元素的一種，基於table表格和基於CSS+DIV的布局，在使用者看來除了頁面載入速度的差別（table在 所有內容元素載入完成後才顯示），沒有其它的差別。但是從頁面的源代碼來看，這種差異就非常大了。基於良好結構理念設計的CSS布局源碼，至少能讓沒有 web開發經驗的用戶很容易找到連續的頁面內容。從這個角度來說，CSS layout code應該有更好的美學體驗。
我們可以把模塊化的DIV想像成一個個box，然後把它們按自己的意願排列組成完整的內容，網頁布局設計就是遵循了同樣的模式。
塊元素(block element) HTML標簽分類明細
* address - 地址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄列表
* div - 常用塊級容易，也是css layout的主要標簽
* dl - 定義列表
* fieldset - form控制組
* form - 交互表單 （只能用來容納其它塊元素）
* h1 - 大標題
* h2 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
* noscript - 可選腳本內容（對於不支持script的瀏覽器顯示此內容）
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
◎內聯元素(inline element) 一般都是基於語義級(semantic)的基本元素，只能容納文本或者其它內聯元素。
為了比較明確的表現出 block 與 inline 的區別，我們可以利用它們各自的代表元素div和span的演示進行說明：
XXXXXXXXX
This's a DIV layout
XXXXXXXXX
div另起一行，它的形狀不受內部文字的影響
XXXXXXXThis's a span layoutXXXXXXX 所有元素在一行，span剛好包容文字
內聯元素(inline element) HTML標簽分類明細
* a - 錨點
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字體
* br - 換行
* cite - 引用
* code - 計算機代碼(在引用源碼的時候需要)
* dfn - 定義欄位
* em - 強調
* font - 字體設定(不推薦)
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤文本
* label - 表格標簽
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義範例計算機代碼
* select - 項目選擇
* small - 小字體文本
* span - 常用內聯容器，定義文本內區塊
* strike - 中劃線
* strong - 粗體強調
* sub - 下標
* sup - 上標
* textarea - 多行文本輸入框
* tt - 電傳文本
* u - 下劃線
* var - 定義變數
◎可變元素 是基於以上兩者隨環境而變化的，它的基本概念就是根據上下文關系確定該元素是塊元素還是內聯元素。一旦確定了它的類別，它就遵循塊元素或者內聯元素的規則限制。
可變元素 HTML標簽分類明細
* applet - java applet
* button - 按鈕
* del - 刪除文本
* iframe - inline frame
* ins - 插入的文本
* map - 圖片區塊(map)
* object - object對象
* script - 客戶端腳本
但是通過CSS，我們可以擺脫上面表格里HTML標簽歸類的限制，自由地在不同標簽/元素上 應用我們需要的屬性。例如，我們可以對塊元素[ ul ]標簽加上 display:inline 屬性，讓原本垂直的列表水平顯示，這在我們設置Blog導航條時得到了廣泛應用；我們也完全可以把內聯元素[ cite ]加上 display:block 這樣的屬性，讓它也有每次都從新行開始的屬性。
8、如何運用網頁設計中對齊原則
西安UIpark
視覺上遵從保持尺寸和邊緣的一致性。
對齊可以讓一個網站頁面看起來比較規范整齊。對齊一般有三種方式：左對齊、居中對齊、右對齊。
在網頁當中運用比較多的是居中對齊和左對齊，大篇幅的右對齊可讀性上比較差，所以出現的頻率不高，小部分的出現還是有的。不管是哪種方式的對齊，網頁中對齊後的文本一定要考慮可讀性的問題，千萬不要本末倒置。
對齊在網頁中的運用無非還是上面那三種對齊方式，正常情況下我們要注意的對齊有這些：元素的對齊、文字的對齊、圖片的對齊、區塊布局的對齊。
1、元素對齊
元素的對齊指的是網頁中的一些按鈕、圖標、搜索框等網頁中的元素統一採用一種對齊方式對齊。
用主頁來舉例，可以看到圖標部分都是居左對齊的，元素上的對齊分布讓整個界面看起來整齊簡潔，內容劃分也變得比較明確，可讀性強，方便瀏覽者瀏覽。
一個網頁當中，會有很多元素，而元素的對齊可以讓整個界面變得井然有序，元素過於隨意擺放沒有規律，會讓界面雜亂無章。
2、文字的對齊
文字的對齊方式也不外乎上面三種，左對齊是最常見的，居中對齊常出現在文章詳情的標題部分，右對齊文字出現的頻率小一點，不會以大篇幅出現，大部分在登陸注冊或是產品詳情界面中常見。
左對齊的方式適合人們的閱讀習慣，在網頁中也比較常見，這里不多講了。
居中對齊是進幾年隨著html5流行起來，越來越多設計師用居中對齊作為一些區塊內容展示的方式。
可以看到，蘋果官網在產品介紹頁面，文字用得比較多的是這種居中對齊。這樣的對齊方式有個好處就是讓瀏覽者的視線集中在該區塊內容上，其次從樣式上的不對稱感可以增加界面的層次感和設計感。但是文字居中對齊不適用於文字內容太多的區塊。
右對齊常見到的是在一些小的細節中，比如登陸注冊界面、底部導航區塊等，仔細看看還是可以發現有一些地方用到了右對齊。
惠普商城注冊界面中輸入框提示文字全部都是居右對齊，讓提示信息和輸入框看起來更為整體和舒服。在注冊界面上的設計，大部分設計都是提示信息居右對齊，包括蟬知注冊界面也是這樣的設計方式，不信可以打開網站看看。
3、圖片的對齊
圖片對齊也不外乎上面說的三種方式，圖片對齊好處理一些，主要根據網頁想表達的內容去做對齊，以達到好的視覺展示效果。所以在不同的情況下，可以採用不同的對齊方式。
在當當的圖書展示頁中，列表展示方式下圖片在圖片的左邊，文字在圖片的右側。
在大圖展示方式下，可以看到產品圖是居中展示的。所以就算是同一個網站也不會只用一種對齊方式，對齊比較靈活，就算是同個頁面，也可能為了視覺效果而採用兩種或三種對齊方式，這個根據整個界面的效果而定。
4、區塊布局的對齊
上面講的小元素對齊重要，那大的區塊對齊也很重要。視覺上的對齊，可以讓瀏覽者快速的瀏覽到相應的內容。小元素不對齊會顯得亂，大區塊不對齊會讓整個界面沒有秩序感。
這樣的情況最常出現在一些產品展示的網站當中，設計這個網頁的設計師說他們刻意追求不對稱感。按鈕的不對齊，和區塊的不對齊，讓整個界面顯得很粗糙。在不是瀑布流的情況下，這種區塊大幅度出現在界面當中的時候，對瀏覽者來說就是一種折磨。
說到區塊的對齊，不得不提的柵格系統，柵格系統可以讓一個網站看起來有秩序感。很多人不喜歡柵格系統，覺得限制他們自己的創意。
事實上，柵格的運用可以很靈活，分多少欄全看設計師的設計。
用當當的登陸界面給大家總體分析一下，在當當網的界面當中，有左對齊、居中對齊和右對齊，其實這些概念大家都懂，就是不知道怎麼合理的運用到各個網頁當中。
可以看到整個界面的層次區分圖，這是人視覺停留的內容層次圖，通過層級關系的分析，我們可以找到一定的規律：
第一眼是居中顯示的，當視線提留到1區時，1區的內容是右對齊，視線轉移到2區時，2區內容是左對齊。3區則是為了平衡界面有左對齊也有右對齊。
因此可見，對齊也是有層次的，不同層次內容可以採用不同的對齊方式。
對齊相比較之前的其他設計原則來說，會比較簡單也好理解，但是在具體的實踐過程中，還需要設計師們去思考和設計。對齊，不僅可以在信息層級上一致，而且會更有氣勢。
總之，在做網站的時候要以內容為主旨，界面設計一定是要方便用戶快速找到他們想要的。其次使用正確的對齊方式，讓界面更為整齊，信息更為明確。
9、網頁排版的設計技巧有哪些？
1、網頁排版的設計技巧——凝聚你的設計
設計一個完整的頁面布局有時真的是令人生畏——有太多的空間要填充!當面對一個更大的布局時，我們下意識地將每個元素放在一個更大的尺寸中，這樣當每個元素填滿整個布局時，它會讓人感到舒適。但這種方法不是設計!這里，我們提供了一個更好更簡單的解決方案。
與其想“更大”，我們應該想“我們能變得更小嗎?”我們能集中一點精力嗎?”。把你的設計集中在中間。設計如此簡單，你可以很容易地創建一個強大的視覺焦點。
2、網頁排版的設計技巧——圖片與文本
下次你設計手冊的時候，試試“面對面”的風格!我們的設計不是關於商標或公司的首字母縮寫，而是使用漂亮的圖形來組織布局。關鍵是要保持簡潔——大空白，大尺寸的數字圖像，沒有雜亂的背景，干凈，簡潔的文字。
在網頁排版的設計技巧中，太多的閃光燈、顏色、下拉菜單框、圖片等會讓遊客無所適從——離開是最好的選擇。所以問題是，對於網頁設計師來說，如何設計一個網站，讓訪問者可以選擇留下。想知道更多關於ui設計的設計素材與技巧，可以點擊本站的其他文章進行學習。