網頁布局如何更加合理,個人網站中表單製作和框架結構詳解

2020-12-20 湉湉愛科技

歡迎關注支持,你的關注將是我持續創作的動力,謝謝!本篇將介紹的是製作表單和框架結構的分享,有興趣的朋友可以了解一下!

製作表單

網頁上的表單就是項目選擇等控制和可以輸入的表項組成的欄目,這些我們都可以成為表單。在Web上,我們可以通過表單提交反饋信息和交流。不管是在Web資料庫,還是應用程式裡,我們都可以用表單來進行交互這些界面。

我們有著各式各樣的輸入表單(FORM),用<FORM>創建的表單裡也會有很多常用的標記,但這些標記不能獨立的完成交互作用,除此之外還有很多的控制項。

使用框架來進行網頁布局

布局網頁中有一項必不可少的工具之一就是框架技術。框架技術能將我們的瀏覽器從整個區域劃分到多個獨立自主的區域裡去,多個網頁集中到一個網頁裡但並不混亂,我們可以將不同的內容劃分好,放在不同的模塊裡面,這樣不僅可以在顯示頁面的不同屬性,還很自由的豐富了網頁的設計,方便了網頁的自由變化。

框架的結構

框架集和框架頁共同構成了框架。框架頁是Web被分隔開的各個部分,雖然是被分割開了,但是每個頁面都是完整而獨立的,這些被共同組成的網頁就是框架集(也被稱為框架組)。但這個用來亂加的數量、尺寸大小、結構等屬性的框架集也是其實也是一個網頁文件。

一般我們稱框架頁為子框架,框架集為父框架,框架集分為很多種各式各樣的結構,除了簡單的頂部框架、左側框架、垂直框架等這些常見的框架以外。我們還可以根據自己的網站風格和個人喜好嵌套出一個自己嶄新自由設計的更加複雜的框架結構。

雖然框架結構有很多的優點也很實用,但是也存在一些小小的弊端,對於一些版本低的瀏覽器或者是不支持框架結構的瀏覽器。我們的框架頁面信息是顯示不了的。

而且為了實現框架的整體的視覺效果,我們必須要在不同的框架中仔細精確地對其每個頁面的圖像元素。

用Dreamweaver可以清晰明了的看見網頁的排版布局,代碼的框架結構。在寫代碼製作網頁的過程也省了很多麻煩。

框架結構的文件格式

其實和框架結構的網頁是和一般的HTML文件相似的,只是在文檔裡面,如果要是使用了<FRAMESET>,就不可以再使用<BODY>標記了。框架裡的所有內容都應該是在<FRAMESET>和</FRAMESET>之間,框架結構也是有開始和結束標記的。但是老版本的瀏覽器可能不會支持瀏覽結構。

框架結構標記的使用

框架結構的功能一般是定義一個框架容器。用<FRAMESET>和</FRAMESET>舉例子,例舉一下<FRAMESET>的主要屬性值。

在<FRAMESET>裡可以包含多個框架結構,能使用它的屬性進行分割。

說明窗口分割的情況可以用rows屬性和cols屬性,前者是橫向分割,後者是縱向分割。它們可以用來指定一系列的值。這些值可以用像素點、百分比、剩餘值和他們的混合形式表示。

6.3.3 FRAME標記

<FRAME>格式的功能室在網頁中定義框架,FRAME標記是一個單一的標記。有六個主要的屬性來表述不同的子窗口的風格。

相關焦點

  • 《製作表單網頁》教案
    知會表單網頁的用途和基本構成要素。掌握簡單表單網頁製作的基本操作方法。【教學重點】 製作表單。【教學難點】 根據需求確定表單要素,並設置合適的控制項屬性。任務驅動法,講授法,合作探究。      新課導入,提出任務  →  新知探究,分析任務   →  完成任務,鞏固提高  →  展示評價  1.新課導入,提出任務在前幾節課,同學們已經學習了如何創建「發布網頁」,我們在日常的生活中,僅僅學會發布信息是遠遠不夠的,通常我們還需要學會如何去搜集信息。
  • 網頁設計:關於CSS框架網頁的設計!
    css框架也漸漸被重視了,因為大家都認識到:從具象的表現中抽出抽象的模塊來重複使用,是減少用戶下載、方便團隊及個人開發最重要的手段。  b) 布局 layout.css   定義頁面是二欄還是三欄,是全屏還是1024×768……   一個網站的設計可能有很多種布局,但是大多數都是由幾個具有復用性的布局組成,選擇性的引入所需要的布局,可以很快地應用所期望的頁面布局。
  • 如何用網頁製作軟體快速生成網站?
    新手如何製作出一個美觀漂亮、功能實用的網站?這就需要你用到網頁製作軟體了。網頁製作軟體有哪些?不同的人群有不同的適用軟體。如果你懂一些編程知識,那麼可以考慮用網頁製作軟體dreamweaver來編輯網頁。
  • 簡單的學生個人網頁製作教程
    現在製作個人網頁越來越流行,你會發現很多設計師、媒體人、職場人都建立了自己的網站,用來積累粉絲、展示作品、或者找工作。那麼不懂技術知識、也沒有太多資金的學生,可以建立自己的網站嗎?當然也是可以的!其實個人網站建立的原理都差不多,不懂技術的情況下,可以使用自助建站系統,快速生成個人網站。個人網頁製作教程如下:進入「上線了」官網註冊帳號後選擇【創建網站】,再選擇一個「個人」或者「作品集」模板。
  • 學生如何製作一個個人網頁?
    隨著各種自助建站工具興起,網站建設的門檻也在不斷降低,不再是碼農或大企業專屬,即使是不懂技術、沒什麼資金的普通學生,也可以順利生成自己的網站!那麼學生的個人網頁製作如何才能做好呢?下面就跟大家分享下製作教程以及保持網站高質量的方法。
  • HTML網頁表單製作詳細講解
    表單是一個網站和訪問者開展互動的窗口,我們現在就給大家介紹一下表單的一些基本知識和表單美化方法。初識表單表單可以用來在網頁中發送數據,特別是經常被用在聯繫表單-用戶輸入信息然後發送到Email中。表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡伺服器來放置HTML,你能夠自助地找到一些簡單的教程,開發一個伺服器端的程序使一個發送到Email的表單工作。
  • 期末複習繼續:網頁設計與製作
    優點:1.提供了一個完整的Web站點製作和管理方案;2.更是一個專業的Web站點創立和管理工具;3.為用戶提供了更加快捷的製作網頁的途徑缺點:1.它生成的HTML代碼的冗餘度很高,造成HTML文件過大,下載時間增加;2.模版的自動化程度太高,用戶的自由度太小FrontPage只適合構件不太複雜而複合站點模版的網站27、Dreamweaver最大的特點
  • 網頁製作中對版面設計的見解
    希望本文能給網站建設朋友們一點小小的幫助,當然本文主要談的就是網站製作中網頁的版面構造、元素、圖片......最後能夠形成統一的視覺識別。1、課題研究背景在網絡高速發展的今天,網站成為信息的一種主要傳播媒介。那麼網站建設不僅要把握好網站整體界面設計,網站框架設計,網站優化技巧,更重要的是一種綜合運營能力,包括審美,用戶體驗,創新,管理。
  • HTML+CSS+JavaScript網頁設計課程的教與學
    二、教學目標 通過本課程的學習,使學生對網頁設計的基本原則、欄目和目錄結構定義、主流頁面布局方法、導航製作、圖文排版、色彩理論等進行詳細了解。掌握網站規劃、設計、製作、管理、發布的相關技術及網頁製作的操作技能;並熟練運用HTML中的文字、連結、列表、表格、表單、圖像、多媒體、框架標記及屬性設計出框架網頁、表單網頁、多媒體動態網頁;掌握使用css技術進行網頁布局的基本方法。
  • 研究性學習《網頁製作》課題總結
    (二)課題研究的意義1、激發學生對網頁製作的興趣,以及了解網站開發的流程。2、使學生學會分析,評價別人的作品,能夠欣賞別人的作品,適當表達個人觀點。3、培養學生的創造力和鍛鍊學生的動手能力,為以後進一步學習網站開發相關知識奠定一定的基礎。
  • HTML元素中的屬性1——零基礎自學網頁製作
    超連結元素中還有一個控制連結頁面打開的屬性叫做target,是用來控制新打開頁面窗口的位置。下面我們就看看target屬性為_blank和_parent的情況下的不同。本篇教程針對完全沒有基礎的網頁製作學習者,利用碎片時間學習,只要我們堅持,必然可以完成網頁製作的學習,為未來學習更加複雜的內容打下基礎!喜歡的小夥伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!
  • 個人網站製作的六個步驟,教你如何把製作的網站發布到網際網路
    一般比較流行和大部分的網頁就是①網站頭部+網站導航欄+內容+版塊一般新浪的或者網頁還有一些瀏覽器都是用這種設計方法,因為內容相對來說要佔據很大一部分的版塊,大型網站都常用於這種結構。在網頁製作的過程中,網頁文件的製作是最大的工程量,所以我們要設置很多個欄目,把頁面文件分類保存在不同的文件夾裡面,分別存放欄目的各個文件,這樣管理和維護起來都會方便許多。網站主頁製作不管是從技術的難度上,還是從藝術品味上,主頁製作都是最重要的。
  • 網頁設計布局包括哪些類型?
    建站離不開網頁設計,而網頁布局則是重中之重,其實布局可以說是一個網站的基礎,網頁設計布局是為了吸引用戶和提高網站的用戶體驗。在進行網頁設計布局時網頁內容是需要進行有機整合和分布的,以此來達到某種視覺效果。而設計網頁的目的不同,就有不同的網頁布局,那麼網頁設計布局都包括哪些類型呢?
  • Div+CSS布局設計 網站設計的優點分析
    業界越來越關注DIV+CSS的標準化設計,大到各大門戶網站,小到不計其數的個人網站,在Div+CSS標準化的影響下,網頁設計人員已經把這一要求作為行業標準。DIV本身就是容器性質的,你不但可以內嵌table還可以內嵌文本和其它的HTML代碼 CSS是Cascading style Sheets的簡稱,中文譯作「層疊樣式表單」,在主頁製作時採用CSS技術,可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。只要對相應的代碼做一些簡單的修改,就可以改變同一頁面的不同部分,或者頁數不同的網頁的外觀和格式。
  • 個性化網頁怎麼製作?5個步驟來教你
    網頁怎麼製作?在形形色色的各種網站中,如果想快速吸引到訪客的目光,網頁需要精心設計才行。在不懂設計知識的情況下,你也能製作出好看個性的網站哦!下面就來看看製作網頁完整步驟吧。第一步:建站系統選擇不懂技術和設計的情況下,你就需要用到自助建站系統了,需要找專業的網頁製作公司的模板,這樣可以讓你零基礎做出一個比較美觀的網站。比如「上線了」建站系統,後臺都是可視化操作,模板設計感強,簡潔典雅,做出來的網站效果也非常好。
  • UX與UI:它們如何在網頁設計中一起工作
    在過去的文章中,我們使用了設計房屋的類比來說明網站設計的過程。UX被最好地描述為架構(規劃,結構),而UI是室內設計(樣式,顏色,外觀和感覺)。我們想進一步研究與UX與UI相關的精確方面和可交付成果,因為了解它們與您和網站訪問者之間的關係可以幫助您更好地了解設計過程和設計師。
  • 網頁表單的Web標準解決方案
    首頁 > 教程 > 關鍵詞 > 網頁最新資訊 > 正文 網頁表單的Web標準解決方案
  • 如何做出精美的網站界面?
    html是整個界面的基礎,你要熟悉裡面的各種標籤,表格、輸入框、表單、按鈕、文本域、單選框、多選框等等。2、掌握CSS。CSS就是寫樣式的。html的各種標籤怎麼擺,怎麼放,都由CSS控制。3、掌握JavaScript。JavaScript是一種腳本語言,它用來操縱html元素和css樣式的。
  • 2018年十大輕量級的CSS框架為構建快速網站
    如果你正在尋找一個新的CSS框架為你的下一個前端開發項目,請閱讀一個開發人員對一些流行的選擇的評論。當建立一個網站時,使用CSS框架是一個真正的節省時間的方法,因為它為你提供了每個網頁設計師在製作網站時需要的工具。
  • 網站設計中的線框圖是什麼?
    繪製網站的線框圖是開發設計網站的第一步。也是網站視覺外觀進行初步表達的一種形式。它是網站建設項目進行中的藍圖,用來傳達策劃和設計思想,用來表現網頁的布局和核心元素。更深層次地講,線框圖對於決定用戶怎樣跟界面交互有十分重要的作用。什麼是線框圖?