當前位置：首頁 > news >正文

博客系統(tǒng)做網站搜索引擎seo關鍵詞優(yōu)化方法

news 2025/7/2 21:47:32

博客系統(tǒng)做網站,搜索引擎seo關鍵詞優(yōu)化方法,關鍵詞排名seo,做優(yōu)秀網站題目【實驗主題】影視網站后臺影視記錄管理頁設計【實驗任務】 1、瀏覽并分析多個網站后臺的列表頁面、編輯頁面（詳見參考資源，建議自行搜索更多后臺頁面）的主要元素構成和版面設計，借鑒并構思預期效果。 2、新建 index.h…

題目

【實驗主題】

影視網站后臺影視記錄管理頁設計

【實驗任務】

1、瀏覽并分析多個網站后臺的列表頁面、編輯頁面（詳見參考資源，建議自行搜索更多后臺頁面）的主要元素構成和版面設計，借鑒并構思預期效果。

2、新建 index.html文件，合理運用HTML標記編寫2個單元：[影視記錄列表]、[記錄編輯表單]。

1）[影視記錄列表]建議用表格<table>系列標記組織，字段至少包含海報（顯示縮略圖）、影視名稱、影視類別等，其余字段自行設計；同時包含 [操作]列，此列需有 [編輯]、[刪除]2個超鏈接或者按鈕。

2）[記錄編輯表單]除了包含列表中的字段，還可添加劇情介紹等字段，同時包含 [保存]按鈕。

3）在頁面的恰當位置添加1個 [添加]超鏈接或者按鈕。

4）頁面初始打開時，列表應已經有至少 3條記錄。

5）合理編寫CSS樣式，對列表、表單美化排版。

3、新建 .js文件，實現影視記錄的增刪改功能。

1）單擊 [影視記錄列表]某記錄的 [刪除]，將顯示確認對話框，得到確認后刪除表中對應記錄。

2）單擊 [影視記錄列表]某記錄的 [編輯]，表中對應記錄的各字段值將填寫到 [記錄編輯表單]相應表單域；單擊 [保存]按鈕后將首先做字段非空等數據合規(guī)性校驗，校驗不通過則提示更正，通過則更新表中對應記錄。

3）單擊 [添加]，清空 [記錄編輯表單]各表單域；單擊 [保存]按鈕后將首先做字段非空等數據合規(guī)性校驗，校驗不通過則提示更正，通過則添加至列表。

4、（選做）與后端服務器數據同步。

1）在頁面的恰當位置添加 [同步]和 [刷新]超鏈接或者按鈕。

2）單擊 [同步]，以Ajax方式將列表全部記錄同步至后端服務器。

提示1：Ajax工具集見下面的【實驗提示】說明。

提示2：除了appKey參數，其余自定義參數建議嘗試 post方式提交。

3）單擊 [刷新]，將刷新（重新加載）頁面；編寫頁面初始化事件處理函數，以Ajax方式從后端獲取數據，并呈現至 [影視記錄列表]。

window.οnlοad=function(){

? //todo: 以Ajax方式從后端獲取數據，初始化 [影視記錄列表]

};

效果圖展示

文件內容

index.html文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>后臺影視記錄管理</title><link rel="stylesheet" href="style.css" /><script src="script.js"></script></head><body><div class="recordlist"><h1>影視記錄列表</h1><table id="myTable"><tr><th>海報</th><th>影視名稱</th><th>影視類型</th><th>影視主演</th><th>簡介</th><th>操作</th></tr><tr><td><img class="poster" src="1.png" alt="星際穿越" /></td><td>星際穿越</td><td>劇情/科幻/冒險</td><td>馬修·麥康納 / 安妮·海瑟薇 / 杰西卡·查斯坦 / 麥肯吉·弗依 / 卡西·阿弗萊克 / 邁克爾·凱恩 / 馬特·達蒙 / 提莫西·查拉梅 / 艾倫·伯斯汀</td><td><textarea name="description" cols="25" rows="15">近未來的地球黃沙遍野，小麥、秋葵等基礎農作物相繼因枯萎病滅絕，人類不再像從前那樣仰望星空，放縱想象力和靈感的迸發(fā)，而是每日在沙塵暴的肆虐下倒數著所剩不多的光景。在家務農的前NASA宇航員庫珀（馬修·麥康納 Matthew McConaughey 飾）接連在女兒墨菲（麥肯吉·弗依 Mackenzie Foy 飾）的書房發(fā)現奇怪的重力場現象，隨即得知在某個未知區(qū)域內前NASA成員仍秘密進行一個拯救人類的計劃。多年以前土星附近出現神秘蟲洞，NASA借機將數名宇航員派遣到遙遠的星系尋找適合居住的星球。在布蘭德教授（邁克爾·凱恩 Michael Caine 飾）的勸說下，庫珀忍痛告別了女兒，和其他三名專家教授女兒艾米莉亞·布蘭德（安妮·海瑟薇 Anne Hathaway 飾）、羅米利（大衛(wèi)·吉雅西 David Gyasi 飾）、多伊爾（韋斯·本特利 Wes Bentley 飾）搭乘宇宙飛船前往目前已知的最有希望的三顆星球考察。他們穿越遙遠的星系銀河，感受了一小時七年光陰的滄海桑田，窺見了未知星球和黑洞的壯偉與神秘。在浩瀚宇宙的絕望而孤獨角落，總有一份超越了時空的篤定情懷將他們緊緊相連……</textarea></td><td><a href="#" class="edit-btn" onclick="editRow(this)">編輯</a><a href="#" onclick="deleteRow(this)">刪除</a></td></tr><tr><td><img class="poster" src="2.png" alt="這個殺手不太冷" /></td><td>這個殺手不太冷</td><td>劇情/動作/ 犯罪</td><td>讓·雷諾 / 娜塔莉·波特曼 / 加里·奧德曼 / 丹尼·愛羅 / 彼得·阿佩爾 / 邁克爾·巴達魯科 / 艾倫·格里尼 / 伊麗莎白·瑞根 / 卡爾·馬圖斯維奇 / 弗蘭克·賽格 / 麥溫</td><td><textarea name="description" cols="25" rows="15">里昂（讓·雷諾飾）是名孤獨的職業(yè)殺手，受人雇傭。一天，鄰居家小姑娘馬蒂爾達（納塔麗·波特曼飾)敲開他的房門，要求在他那里暫避殺身之禍。原來鄰居家的主人是警方緝毒組的眼線，只因貪污了一小包毒品而遭惡警（加里·奧德曼飾）殺害全家的懲罰。馬蒂爾達得到里昂的留救，幸免于難，并留在里昂那里。里昂教小女孩使槍，她教里昂法文，兩人關系日趨親密，相處融洽。女孩想著去報仇，反倒被抓，里昂及時趕到，將女孩救回?；祀s著哀怨情仇的正邪之戰(zhàn)漸次升級，更大的沖突在所難免……</textarea></td><td><a href="#" class="edit-btn" onclick="editRow(this)">編輯</a><a href="#" onclick="deleteRow(this)">刪除</a></td></tr><tr><td><img class="poster" src="3.png" alt="美麗人生" /></td><td>美麗人生</td><td>劇情/喜劇/愛情/戰(zhàn)爭</td><td>羅伯托·貝尼尼 / 尼可萊塔·布拉斯基 / 喬治·坎塔里尼 / 朱斯蒂諾·杜拉諾 / 賽爾喬·比尼·布斯特里克 / 瑪麗薩·帕雷德斯 / 霍斯特·布赫霍爾茨 / 利迪婭·阿方西 /</td><td><textarea name="description" cols="25" rows="15">猶太青年圭多（羅伯托·貝尼尼）邂逅美麗的女教師多拉（尼可萊塔·布拉斯基），他彬彬有禮的向多拉鞠躬：“早安！公主！”。歷經諸多令人啼笑皆非的周折后，天遂人愿，兩人幸福美滿的生活在一起。然而好景不長，法西斯政權下，圭多和兒子被強行送往猶太人集中營。多拉雖沒有猶太血統(tǒng)，毅然同行，與丈夫兒子分開關押在一個集中營里。聰明樂天的圭多哄騙兒子這只是一場游戲，獎品就是一輛大坦克，兒子快樂、天真的生活在納粹的陰霾之中。盡管集中營的生活艱苦寂寞，圭多仍然帶給他人很多快樂，他還趁機在納粹的廣播里問候妻子：“早安！公主！”法西斯政權即將傾覆，納粹的集中營很快就要接受最后的清理，圭多編給兒子的游戲該怎么結束？他們一家能否平安的度過這黑暗的年代呢？</textarea></td><td><a href="#" class="edit-btn" onclick="editRow(this)">編輯</a><a href="#" onclick="deleteRow(this)">刪除</a></td></tr></table></div><div class="editlist"><h1>記錄編輯表單（縮小頁面更方便）</h1><div class="form">海報：<select name="poster"><option value="1.png" style="width: 100px;">星際穿越</option><option value="2.png" style="width: 100px;">這個殺手不太冷</option><option value="3.png" style="width: 100px;">美麗人生</option><option value="4.png" style="width: 100px;">綠皮書</option><option value="5.png" style="width: 100px;">讓子彈飛</option><option value="6.png" style="width: 100px;">重慶談判</option><option value="7.png" style="width: 100px;">海棠依舊</option><option value="8.png" style="width: 100px;">古田軍號</option></select> <br />影視名稱：<input type="text" name="filmname"> <br />影視類型：<input type="text" name="category"> <br />影視主演：<input type="text" name="actors"> <br />簡介：<textarea name="description111" cols="40" rows="20"></textarea> <br /><button id="alter" onclick="saveChanges()">保存</button><button id="add">添加</button><button id="clearforM" onclick="clearForm()">清空</button></div></div><script>//添加記錄document.getElementById("add").addEventListener("click", function() {var poster = document.getElementsByName("poster")[0].value;var filmname = document.getElementsByName("filmname")[0].value;var category = document.getElementsByName("category")[0].value;var actors = document.getElementsByName("actors")[0].value;var description = document.getElementsByName("description111")[0].value;if (!poster || !filmname.trim() || !category.trim() || !actors.trim() || !description.trim()) {alert("請?zhí)顚懲暾麅热?#xff01;");return;}var table = document.getElementById("myTable");var newRow = table.insertRow(-1);var cell1 = newRow.insertCell(0);var cell2 = newRow.insertCell(1);var cell3 = newRow.insertCell(2);var cell4 = newRow.insertCell(3);var cell5 = newRow.insertCell(4);var cell6 = newRow.insertCell(5);cell1.innerHTML = '<img class="poster" src="' + poster + '" alt="' + filmname + '" />';cell2.textContent = filmname;cell3.textContent = category;cell4.textContent = actors;cell5.innerHTML = '<textarea name="description" cols="25" rows="15">' + description + '</textarea>';cell6.innerHTML ='<a href="#" class="edit-btn" onclick="editRow(this)">編輯</a> <a href="#" onclick="deleteRow(this)">刪除</a>';alert("成功添加記錄！");});</script></body>
</html>

style.css文件

* {margin: 0;padding: 0;/* 清除用戶代理樣式 */
}.recordlist {float: left;/* 浮動,縮小頁面能夠方便操作 */margin: 20px;font-size: 20px;
}.editlist {margin: 20px;float: left;/* 浮動,縮小頁面能夠方便操作 */
}h1 {text-align: center;margin-top: 10px;margin-bottom: 20px;
}table {margin: 0 auto;font-family: Arial, Helvetica, sans-serif;border-collapse: collapse;
}td,
th {width: 200px;text-align: center;border: 1px lightpink solid;z'z' z'z' z'z' z'zpadding: 10px;
}img {width: 180px;margin: 0 auto;display: block;
}.form {text-align: center;margin-bottom: 30px;font-size: 30px;
}.form select {font-size: 30px;margin-bottom: 30px;
}.form input {margin-right: 10px;margin-bottom: 30px;font-size: 30px;
}.form button {margin-top: 30px;font-size: 30px;
}

script.js文件

function deleteRow(btnDelete) {const confirmDelete = confirm("你確定要刪除這條記錄？");if (confirmDelete) {//獲得被單擊按鈕所在行的索引var currentIndex = btnDelete.parentNode.parentNode.rowIndex;var myTable = document.getElementById("myTable");myTable.deleteRow(currentIndex);}
}function editRow(editButton) {var row = editButton.parentNode.parentNode;var tableCells = row.getElementsByTagName("td");document.getElementsByName("poster")[0].value = tableCells[0].getElementsByTagName("img")[0].src.match(/(\d\.png)$/)[0];document.getElementsByName("filmname")[0].value = tableCells[1].textContent;document.getElementsByName("category")[0].value = tableCells[2].textContent;document.getElementsByName("actors")[0].value = tableCells[3].textContent;document.getElementsByName("description111")[0].value = tableCells[4].getElementsByTagName("textarea")[0].value;document.getElementById("alter").setAttribute("data-current-index", row.rowIndex);
}function saveChanges() {var poster = document.getElementsByName("poster")[0].value;var filmname = document.getElementsByName("filmname")[0].value;var category = document.getElementsByName("category")[0].value;var actors = document.getElementsByName("actors")[0].value;var description = document.getElementsByName("description111")[0].value;if (!poster || !filmname.trim() || !category.trim() || !actors.trim() || !description.trim()) {alert("請?zhí)顚懲暾麅热?#xff01;");return;}var index = document.getElementById("alter").getAttribute("data-current-index");if (index) {var myTable = document.getElementById("myTable");var row = myTable.rows[index];row.cells[0].getElementsByTagName("img")[0].src = poster;row.cells[1].textContent = filmname;row.cells[2].textContent = category;row.cells[3].textContent = actors;row.cells[4].getElementsByTagName("textarea")[0].value = description;}document.getElementById("alter").removeAttribute("data-current-index");alert("確定要更新記錄嗎？");
}function clearForm() {var formElements = document.querySelectorAll('.form input[type="text"], .form textarea, .form select');formElements.forEach(function(element) {element.value = '';});
}