網頁設計筆記-作業練習篇-期末作業首頁篇

文章推薦指數: 80 %
投票人數:10人

在本範例,接下來的單元分類將以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


請為這篇文章評分?