第1章網(wǎng)頁設(shè)計基礎(chǔ)網(wǎng)頁設(shè)計與制作案例實(shí)戰(zhàn)教程目錄Contents1.1

網(wǎng)頁的基本概念1.2

網(wǎng)站制作流程1.3

網(wǎng)頁布局與配色1.4

網(wǎng)頁設(shè)計常用工具1.5

AIGC在網(wǎng)頁設(shè)計中的應(yīng)用1.6

課后練習(xí)1.1.1

網(wǎng)頁與網(wǎng)站網(wǎng)頁與網(wǎng)站都是互聯(lián)網(wǎng)詞匯。網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，承載著各種網(wǎng)站應(yīng)用；網(wǎng)站是指根據(jù)一定的規(guī)則制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁的集合。1.網(wǎng)頁網(wǎng)頁是一個包含HTML標(biāo)簽的純文本文件，可以存放在世界某個角落的某一部計算機(jī)中，這部計算機(jī)必須與互聯(lián)網(wǎng)相連。2.網(wǎng)站網(wǎng)站是有獨(dú)立域名、獨(dú)立存放空間的內(nèi)容集合，這些內(nèi)容可能是網(wǎng)頁，也可能是程序或其他文件。1.1.2靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的區(qū)別在于網(wǎng)頁是否會根據(jù)數(shù)據(jù)操作的結(jié)果而發(fā)生變化。與靜態(tài)網(wǎng)頁相比，動態(tài)網(wǎng)頁的交互性更強(qiáng)，用戶可以主動參與到頁面中，如登錄、注冊網(wǎng)頁等。1.靜態(tài)網(wǎng)頁在網(wǎng)站設(shè)計中純粹HTML格式的網(wǎng)頁通常被稱為“靜態(tài)網(wǎng)頁”，早期的網(wǎng)站一般都是由靜態(tài)網(wǎng)頁制作的。2.動態(tài)網(wǎng)頁動態(tài)網(wǎng)頁是與靜態(tài)網(wǎng)頁相對的一種網(wǎng)頁編程技術(shù)。1.1.3網(wǎng)頁標(biāo)準(zhǔn)化技術(shù)網(wǎng)頁主要由結(jié)構(gòu)、表現(xiàn)和行為三部分構(gòu)成，對應(yīng)的技術(shù)標(biāo)準(zhǔn)為HTML、CSS樣式和腳本語言。1.HTML（超文本標(biāo)記語言）2.CSS樣式（層疊樣式表）3.腳本語言目錄Contents1.1

網(wǎng)頁的基本概念1.2

網(wǎng)站制作流程1.3

網(wǎng)頁布局與配色1.4

網(wǎng)頁設(shè)計常用工具1.5

AIGC在網(wǎng)頁設(shè)計中的應(yīng)用1.6

課后練習(xí)1.2網(wǎng)站制作流程網(wǎng)站制作一般包括規(guī)劃與需求分析、網(wǎng)站設(shè)計、網(wǎng)站開發(fā)、測試、部署與上線、維護(hù)與更新等步驟。遵循流程進(jìn)行操作，可以使網(wǎng)站制作更加輕松合理，減少差錯率。1．規(guī)劃與需求分析2．網(wǎng)站設(shè)計3．網(wǎng)站開發(fā)4．網(wǎng)站測試5．網(wǎng)站發(fā)布6．維護(hù)與更新目錄Contents1.1

網(wǎng)頁的基本概念1.2

網(wǎng)站制作流程1.3

網(wǎng)頁布局與配色1.4

網(wǎng)頁設(shè)計常用工具1.5

AIGC在網(wǎng)頁設(shè)計中的應(yīng)用1.6

課后練習(xí)1.3.1網(wǎng)頁的布局類型骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點(diǎn)型、三角型、自由型10種類型是網(wǎng)頁主要的布局類型。1.骨骼型2.滿版型3.分割型4.中軸型5.曲線型6.傾斜型7.對稱型8.焦點(diǎn)型9.三角型10.自由型1.3.2網(wǎng)頁色彩基礎(chǔ)色彩是最具表現(xiàn)力的視覺元素之一，具有信息傳達(dá)、情感傳遞、增強(qiáng)視覺表現(xiàn)力等作用。1.色彩三要素色彩分為無彩色系和有彩色系兩大類，其中黑、白、灰屬于無彩色系，其他色彩屬于有彩色系。2.Web安全色Web安全色是指在不同硬件環(huán)境、不同操作系統(tǒng)、不同瀏覽器中具有一致顯示效果的顏色，共包括216種。1.3.3網(wǎng)頁配色技巧網(wǎng)頁配色在網(wǎng)站頁面效果中占據(jù)重要地位，優(yōu)秀的網(wǎng)頁配色可以提高網(wǎng)站的頁面效果，增加頁面瀏覽量。1.網(wǎng)頁配色要點(diǎn)2.網(wǎng)頁設(shè)計色彩搭配原則3.網(wǎng)頁色彩搭配方式目錄Contents1.1

網(wǎng)頁的基本概念1.2

網(wǎng)站制作流程1.3

網(wǎng)頁布局與配色1.4

網(wǎng)頁設(shè)計常用工具1.5

AIGC在網(wǎng)頁設(shè)計中的應(yīng)用1.6

課后練習(xí)1.4網(wǎng)頁設(shè)計常用工具根據(jù)各網(wǎng)頁制作工具功能側(cè)重點(diǎn)的不同，在制作網(wǎng)頁時往往需要綜合利用多種網(wǎng)頁制作工具，以節(jié)省工作時間，提高工作效率。1.Photoshop2.Illustrator3.Flash4.Dreamweaver目錄Contents1.1

網(wǎng)頁的基本概念1.2

網(wǎng)站制作流程1.3

網(wǎng)頁布局與配色1.4

網(wǎng)頁設(shè)計常用工具1.5

AIGC在網(wǎng)頁設(shè)計中的應(yīng)用1.6

課后練習(xí)1.5AIGC在網(wǎng)頁設(shè)計中的應(yīng)用AIGC（ArtificialIntelligenceGeneratedContent）中文名稱人工智能生成內(nèi)容，其核心在于使用機(jī)器學(xué)習(xí)、深度學(xué)習(xí)等算法對大量數(shù)據(jù)進(jìn)行學(xué)習(xí)和模式識別，然后根據(jù)用戶的需求或輸入條件，生成與之相關(guān)的內(nèi)容。在網(wǎng)頁設(shè)計領(lǐng)域，AIGC可以起到內(nèi)容生成與優(yōu)化、交互原型設(shè)計等作用。1.自動內(nèi)容生成2.交互式元素和動畫3.快速原型與概念生成4.設(shè)計反饋與迭代目錄Contents1.1

網(wǎng)頁的基本概念1.2

網(wǎng)站制作流程1.3

網(wǎng)頁布局與配色1.4

網(wǎng)頁設(shè)計常用工具1.5

AIGC在網(wǎng)頁設(shè)