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... 閱讀完整內容
Part2 右欄_月曆(第六週) - 4月 03, 2023 第一步: 一開始先加入背景文字background - text。 程式碼: 這是之前的結果: 套用標題程式後: 第二步: 套用程式後會發現背景文字跑到左上角,所以新增了CSS格式設定,讓背景文字跑到中間並且放大跟呈現透明。 程式碼: 這是之前的結果: 套用CSS格式設定後: 第三步: 接下來要新增右欄月曆的箭頭,所以要加上script標籤來導入箭頭符號,之後加入CSS格式設定將箭頭放大和滑鼠移置箭頭時呈現透明。 程式碼: 這是之前的結果: 套用CSS格式設定後: 第四步: 要將月曆的某個表格設成灰色背景,我是設在位於第2列、第5行的表格。 程式碼: 這是之前的結果: 套用CSS格式設定後: 第五 步: 要將便利貼貼在表格中,所以我先下載便利貼圖檔放在之前Part2裡images的資料夾,我使用的是note3圖檔, 我是設在位於第3列、第3行的表格,貼上時會太大,所以利用CSS設定將便利貼縮小還有滑鼠移至便利貼時會顯示 這是提示!!! 的文字。 程式碼: 這是之前的結果: 套用CSS格式設定後: 閱讀完整內容
留言
張貼留言