網頁設計筆記-作業練習篇-期末作業首頁篇
文章推薦指數: 80 %
在本範例,接下來的單元分類將以article作區塊分類,每一個區塊皆以id命名,第一個區 ... 由於全世界的人都在使用HTML 來設計網頁(WebPage) 構建網站,所以HTML 的語法 ...
【講義03】期末作業首頁設計/article/section/table
本課程之講義與作業列表
| 【講義01】
| 【講義02】
| 【期中講義|作業】
| 【講義03】
| 【講義04】
| 【期末講義|作業】
| 【講義總覽】
【講義03】期末作業首頁設計/article/section/table
。
作業03範例。
期末作業範例。
本單元為作業03,為期末作業首頁設計,首頁內容通常包含整個網站的概述與精華內容統整。
設定header中的LOGO設計與導覽列設定,以及main區塊內table表格的基本設定,加入區塊,呈現不同分類主題,設定繞圖排文,並加入圖片,增加網頁的豐富性。
綜合期中作業所學,可依期末作業內容,自行設定版面。
準備:
設計多頁式網站,自行設定主題,針對內容,設定配色及主要風格。
可以以主題式網站為主,介紹一個地方文化、特色、美食或喜歡的事物、喜歡的明星、介紹自己,也可延續期中作業主題,使之更完整。
準備網站內容所需之圖與文,需要設計logo、視覺主圖、以及其他頁面內容需要的圖文資料,需要原創或取得授權。
footer請設定個人的專屬版權聲明,並註明『本網頁為作業之用,如有侵權敬請告知』字樣。
學習目標
1.header/nav/LOGO設計與導覽列設定
main主圖的設定
表格的設定
article/section/單元的設定
圖文編排區塊單元
繞圖排文設定
footer版權說明設定
【作業03】步驟與學習重點:
網站基本架構認識
先認識網網站的基本架構。
以下分別就是視覺圖及架構圖來說明:
網頁視覺內容
html架構說明
步驟一:建立hw03-學號資料夾
本次練習共有一個html檔案,一個css檔案,一個放置圖檔的資料夾,分別命名為:
index.html、style.css以及命名為img的資料夾,皆放置於hw03-學號的資料夾內。
網頁作品相關檔案,皆需放置於同一資料夾內
步驟二:head表頭資訊設定
用來作為網頁的描述,不會出現在網頁內容頁。
與之前的作業一樣,直接複製,修改title標題及description描述即可。
步驟三:於header置入LOGO圖檔
網頁內容body最開始,放置自己設計的logo圖檔,請自行設計LOGO圖檔,存成png格式,記得儲存英文檔名,寬度設定約300-400px間,可適當調整大小。
✏html語法
步驟四:導覽列設定/檔案連結
透過CSS,以清單ul及li製作網頁導覽列
延續步驟三,完成header設定,包含logo及導覽列設定。
步驟五:視覺主圖設定
加入main標籤,設定主要內容,並在開頭,放置一視覺主圖,尺寸設定為width="2000",可大於但不要小於2000px,高度可自行設定。
並以class類別命名為mainvisual的div包覆起來,以方便設定CSS:divclass="mainvisual"
✏視覺主圖html語法
步驟六:article區塊設定/第一個區塊『簡介』/設定class=“inner”
article是HTML5的新標籤。
article元素可用於表示頁面上某塊具有一定獨立性的內容,這個內容可以是一篇文章、論壇上的一個帖子/評論、一篇部落格等。
在本範例,接下來的單元分類將以article作區塊分類,每一個區塊皆以id命名,第一個區塊為簡介,命名為profile。
緊接著視覺主圖後面,加入article區塊,設定第一個簡介區塊,放置標題與簡介文字。
與期中作業相同,設定divclass=“inner”,設定固定寬度。
✏article區塊設定html語法
步驟七:第二個區塊html的設定
本區塊無設定底色,因此直接設定以#html設定寬度,接下來包含標題、olli數字編號清單設定及表格的設定
✏第一區塊html語法
✏區塊色塊與固定寬度設定CSS
步驟八:olli數字編號項目清單
在HTML中olli列表清單是一種數字編號項目清單,它的特色是每個項目前方會有阿拉伯數字自動排序,用法與HTML的ulli標籤完全一樣,只有呈現的結果不同,如果你要在網頁內容或文章中使用具有數字自動排序的項目清單,HTMLolli標籤就可以滿足。
✏html語法
HTML(HyperTextMarkupLanguage)超文本標記語言:是一種用於建立網頁的標準標記語言。
HTML是一種基礎技術,常與CSS、JavaScript一起被眾多網站用於設計賞心悅目的網頁。
HTML在1989年時由TimBerners-Lee所發展出來的,在1990年被WWW開始採用,並於1991年提出HTML語法的基本草稿。
由於全世界的人都在使用HTML來設計網頁(WebPage)構建網站,所以HTML的語法必須統一。
全球資訊網協會W3C(TheWorldWideWebConsortium)在1993年推出HTML1.0版,到了1995年2月推出HTML2.0版。
步驟九:表格設定
表格是網頁中常出現的元素,主要為整理資料的功能,以CSS搭配表格,同時展現美感的部分,包含:色彩、標題、邊框、背景等。
本單元特別注意,th為表格標題,td為儲存格,可以水平或垂直呈現,表現不同效果。
本單元表格外,以section包覆,設定其上下外部之距離。
✏第一區塊表格html語法
✏本單元表格CSS語法
常見HTML標籤整理
標籤
用法
此標籤是置於整個文件的開始和結束之處,以供瀏覽器識別此文件為合法的文件。
步驟十:第三個區塊css的設定 第三個article區塊,命名為css,底色設定。
加入類別.inner,設定固定寬度900px,ulli項目清單,以及垂直標題之表格設定 ✏第三區塊html語法 ✏第三區塊css語法 步驟十一:footer頁尾設定 在main標籤之後,加入footer標籤 footer頁尾標籤,通常放置版權聲明、聯絡資訊等,本範例新增返回頂部之按鈕連結 ✏html語法 ✏css語法 步驟八:作業三完整語法 html語法 CSS語法 教學影音 【作業03解析】期末作業首頁篇 https://youtu.be/ImBpjjt2DA4
延伸文章資訊
- 1撰寫第一個HTML 網頁範例
首先是如何撰寫第一個HTML 網頁出來,透過下面的簡單範例,你可以馬上寫出一個簡單的網頁,請先開啟記事本或是Notepade++ 程式碼編輯器,將以下程式碼複製貼上, ...
- 2網頁設計作品範例- Webs網頁設計
... 廣告網頁設計、動態背景網頁設計、動態文字網頁設計、超值網頁設計、專業網頁設計、購物網頁設計、電子商務網頁設計、各種RWD網頁設計作品展示. 標準網頁設計範例.
- 3網頁製作教學
HTML就是超文件標示語言(HyperText Markup Language)。 ... 如<HTML>表示網頁的開始,而</HTML>代表網頁的結束。 ... 一個HTML的基本語法範例如下...
- 4網頁設計筆記-作業練習篇-期末作業首頁篇
在本範例,接下來的單元分類將以article作區塊分類,每一個區塊皆以id命名,第一個區 ... 由於全世界的人都在使用HTML 來設計網頁(WebPage) 構建網站,所以HTML 的語法 ...
- 5網頁設計教學:軟體、範例與自學課程 - 張阿道
程式語言, HTML, CSS, HTML, CSS, JavaScript, Sass ; 框架, Bootstrap, jQuery, Vue.js, React ; 技能, 使用者研究, ...