網頁設計師培訓課程

eb前端學習內容

1、網頁軟件課： Photoshop　html　DIV

CSS JavaScript jQuery，vue等

（1）html：html標記語言

（2）css：css3語法規則，包括新增偽類、動畫等。

（3）JavaScript：JavaScript語法，數組，對象，函數，DOM，BOM，事件機制、作用域，閉包、原型、this指針，ajax等。

（4）jQuery：jq選擇器，jq動畫，jq事件機制，jq處理css，jq處理標簽屬性，jq鏈式編程，jQuery的插件封裝等.

（5）vue框架及實戰。

2、網頁理論課：
網頁格局設計規劃、網頁色彩原理與配色技巧、 HTML的基本語法、CSS的基本語法、代碼的編寫規范、JavaScript案例實戰，jQuery案例實戰，vue案例實戰。

3、網頁實踐課：個人網站設計（空間網頁、微博主頁）、網購型網站設計（店鋪、商城）　企業網站設計、旅游網站設計、教育類網站設計等。

4、網頁崗前強化：網站后臺維護、網頁瀏覽器兼容性解決方案、網頁效果圖設計制作。

●就業方向

web前端、網頁設計、網站美工、網站策劃、網站編輯、網站維護

網頁短期班：Photoshop　DIV+CSS JavaScript jQuery，vue。

網頁就業班：全套學習內容。

屬性操作

attr(name)：獲取屬性值

attr(key,value)：設置屬性值

attr(properties)：一次設置多個屬性值, 要求參數是一個json對象

removeAttr(name)：移除屬性

2 對class屬性的操作

addClass(class)：添加class

removeClass(class)：移除class

toggleClass(class)：如果有對應的class屬性值, 則移除, 反之則添加

hasClass(class)：如果有對應的class屬性值, 則返回true, 反之返回false

3 對style屬性的操作

css(name)：獲取到指定的css屬性值

css(name,value)：設置指定的css屬性值

css(properties)：一次設置多個css屬性值要求參數必須是json對象

4 尺寸

width()：獲取元素的寬度

width(value)：設置元素的寬度

height()：獲取元素的高度

height(value)：設置元素的高度

5 文本

innerHTML() javascript方法

html()：獲取雙邊標簽中的內容

html(val)：設置雙邊標簽中的內容

innerTEXT javascript方法, 兼容性差

text()：獲取雙邊標簽中的內容, 不能解析HTML標簽

text(val)：設置雙邊標簽中的內容, 不能解析HTML標簽

6 表單的值

val()：獲取元素的value屬性值

val(val)：設置元素的value屬性值

屬性和屬性值語法規則：

1 可以不加單位, 但帶單位的必須加引號

$("img").attr({
    src: "img07.jpg",
    title: "紫荊公寓",
    width:300, //參考HTML語法, 可以不加單位
    height:"200px", //也可以加單位, 但必須加引號
    alt: "紫荊公寓"
});

2 帶橫線的必須加引號

$('div').css({
    "font-size":"40px", //帶橫線的必須加引號
    "font-weight":"bold",
    color:"red"
});

3 css樣式可以采用駝峰式寫法(第二個單詞的首字母必須大寫)

$('div').css({
    fontSize:"40px", //駝峰式寫法, 可以不加引號
    "font-weight":"bold",
    color:"red"
});

4 鍵/值的引號問題

鍵可以加引號, 也可不加引號;

但是對值要求很嚴格, 字符串型的必須加引號

$("img").attr({
src: "img07.jpg", //值是字符串型必須加引號
"title": "紫荊公寓", //鍵可加也可不加引號
width:300,
height:"200px",
alt: "紫荊公寓"
});

5 采用json寫法的鍵/值對格式：用英文","隔開

isual Studio Code是一個輕量級但功能強大的源代碼編輯器，可在桌面上運行，適用于Windows，macOS和Linux。

它內置了對JavaScript，TypeScript和Node.js的支持，并為其他語言（如C ++，C＃，Java，Python，PHP，Go）和運行時（如.NET和Unity）提供了豐富的擴展生態系統。

一、Visual Studio Code 下載：

官方下載地址：https://code.visualstudio.com/Download

選擇自己對應的版本點擊下載即可。

二、插件的安裝方法：

三、插件推薦：

官方插件下載地址：https://marketplace.visualstudio.com/

1.ESLint

作用：將ESLint JavaScript集成到VS代碼中。ESLint是一種用于識別和報告ECMAScript / JavaScript代碼中的模式的工具，其目標是使代碼更加一致并避免錯誤。

2.vscode-icons

作用：Visual Studio代碼文件的圖標。

3.Open-In-Browser

作用：允許您在默認瀏覽器或應用程序中打開當前文件。

4.HTML Snippets

作用：完整的HTML標記，包括HTML5代碼段。

5.HTML CSS Support

作用：對HTML文檔的CSS支持。

6.Debugger for Chrome

作用：在Chrome瀏覽器或支持Chrome Debugger協議的任何其他目標中調試JavaScript代碼。

7.JQuery Code Snippets

作用：超過130個用于JavaScript代碼的jQuery代碼片段。只需鍵入字母'jq'即可獲得所有可用jQuery代碼片段的列表。

8.Path Intellisense

作用：自動填充補全文件名。

9.Npm Intellisense

作用：用于在import語句中自動填充npm模塊。

10.Document this

作用：在TypeScript和JavaScript文件中自動生成詳細的JSDoc注釋。

11.Auto Rename Tag

作用：重命名一個HTML / XML標記時，會自動重命名配對的HTML / XML標記。

12.Auto Close Tag

作用：自動添加HTML / XML關閉標記，與Visual Studio IDE或Sublime Text相同。

13.Beautify

作用：美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代碼。

14.Chinese (Simplified) Language Pack for Visual Studio Code

作用：適用于 VS Code 的中文（簡體）語言包。

15.JavaScript (ES6) code snippets

作用：用于Vs代碼編輯器的ES6語法中的JavaScript代碼片段（支持JavaScript和TypeScript）。

四、主題推薦：

1.Material-theme

2.monokai-light

3.One Dark Theme

五、總結：

目前所了解的也就這么多，如果后面知道更多的相關插件，一定第一時間更新告訴你們，上面這些插件基本都是前端的，所以對其他的一些還不太了解。今天的分享就到這里，如果有更好的插件推薦，請在評論區留言，或者直接私信我即可，一點新科技，期待您的點贊和轉發，謝謝大家的支持。

在線咨詢

上一篇：實用！css3實現模糊視覺差動畫效果
下一篇：html中需要轉義的字符如何處理

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商