Part9 使用AJAX方法將色彩名稱傳到後端並寫入資料庫 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 12月 04, 2023 第一步: 建立一個資料庫及資料庫的使用者。第二步: 資料傳送AJAX函式與前端JavaScript程式,新增js/ajax.js。第三步: PHP程式。第四步: 測試是不是能夠用程式碼方式將一個特定色彩名稱傳到後端。第五步: 色彩名稱更新到資料表。第六步: 網頁載入時讀取資料表中的色彩名稱。在index.php加入一段php碼。第七步: 網頁載入讀取資料表裏的色彩名稱。 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 留言
Part7 JavaScript – 主題(theme)的更新(十三週) - 5月 26, 2023 第一步: 做兩個可以打開關掉彈跳視窗的函式,並且套用在兩個按鈕上。 程式碼: 結果: 第二步: 做一個函式來控制打勾和打勾前先消除上一個打勾的圖示,並在每個顏色圖示中呼叫。 程式碼: 結果: 閱讀完整內容
Part1左欄_今日資料(第四週) + Part2 右欄_月曆(第四週) - 3月 19, 2023 第一步: 繼續將上周的網頁來修改,一開始先將左欄版面加上一點變化,到CSS clip-path maker網站上找到自己要的套用的圖形,之後再套用網站上的程式碼,寫在 current-day-info, current-day-info是 左欄板塊的id。 CSS clip-path maker網站: 套用網站上的程式碼: 這是之前的結果: 套用CSS格式設定後: 第二 步: 在網頁前端介面設計中,將複製Part1 左欄_今日資料 資料夾 ,貼在相同目錄中,且更名為Part2 右欄_月曆資料夾,然後在 Part2 右欄_月曆資料夾中新增一個css資料夾,再將css資料夾中新增2個css的檔案,名為 main.css和current-day.css 。 Part2 右欄_月曆資料夾: css資料夾: main.css和current-day.css檔案 : 第三步: 將之前放在原本html檔案裡CSS類別和id 格式設定 的程式碼分別剪下貼上至 main.css和 current-day.css 檔案中,再將原本的html檔案儲存後,就會發現變回一開始只有標題的時候,之後可以再加上link標籤可以指定 main.css和current-day.css檔案裡的程式碼加入原本的html檔案中,之後刷新網頁就會回復原本的樣子。 main.css裡的程式碼: current-day.css 裡的程式碼: 只有標題的時候: 加上link標籤: 刷新網頁後: 第四步: 換掉網頁瀏覽器圖示icon,下載圖示後的圖片放在 Part2 右欄_月曆資料夾的新資料夾images中 ,再將程式中加入link標籤,然後就可以換上自己想要的圖示。 下載的圖示: 加上link標籤: 原本的圖示: 現在的圖示 : 第五步: 左欄板塊已經完成,要加上右欄的月曆,跟左欄一樣新增div區塊,id是calendar, 左欄板塊是橫式landscape,右欄月曆是直式portrait,月曆是呈表格狀的,所以要加上table的標籤,table標籤裡面有thead和tbody兩個標籤,網頁結構通常分成head頭、body身體、foot腳,所以thead代表表格的頭,tbody代表表格的身體。 右欄div區塊程式碼 : 第六步: thead裡有tr的標籤,tr標籤的r代表row列的意思,如果是 colum... 閱讀完整內容
part1(圖片不清楚可點選後放大觀看) - 3月 04, 2023 第一步是在vscode開啟一個資料夾,資料夾名為網頁前端介面設計。 第二步是在網頁前端介面設計資料夾裡建立part1資料夾,然後在part1資料夾中建立index.html的檔案。 第三步是開始建立html的文件架構,使用驚嘆號加Tab鍵。 第四步是在body裡面新增div區域,並且新增標題 U110B128 Calender 和h1的大小。 第五步是開啟儲存後的html檔案,預設是開啟是Chrome瀏覽器,然後會發現確實有 U110B128 Calender 的標題。 第六步是在div區域裡再新增兩個div區域分別來放西元年和星期幾、幾月幾號。西元年是h2大小,星期幾、幾月幾號是h1大小。 第七步是刷新剛才開啟檔案的頁面,可以看到新增了西元年和星期幾、幾月幾號。 第八步是再次新增div區域來放按鈕,type類型為button是單純的按鈕功能,name為按鈕的名稱,按鈕上設定顯示Change Theme。 第九步是再次刷新頁面,這次可以看到多了一個按鈕,按鈕名稱為Change Theme。 閱讀完整內容
留言
張貼留言