網(wǎng)頁(yè)設(shè)計(jì)與制作概述

第一章網(wǎng)頁(yè)制作與html五基礎(chǔ)知識(shí)網(wǎng)頁(yè)設(shè)計(jì)與制作（第二版）2023/11/20第一章概述1第一章概述一.一網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)一.二DreamweaverCS六概述一.三網(wǎng)頁(yè)標(biāo)準(zhǔn)技術(shù)與HTML五一.四綜合案例2023/11/20第一章概述2一.一網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)2023/11/20第一章概述3一.一.一網(wǎng)頁(yè)地定義與分類一.一.二網(wǎng)頁(yè)設(shè)計(jì)地有關(guān)概念一.一.三網(wǎng)頁(yè)地基本組成元素一.一.四網(wǎng)頁(yè)制作開(kāi)發(fā)工具一.一.一網(wǎng)頁(yè)地定義與分類一.按位置分類主頁(yè)內(nèi)頁(yè)二.按表現(xiàn)形式分類靜態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)網(wǎng)頁(yè)(Webpages)是網(wǎng)站地組成部分,制作者可以將需要公布地信息按照一定地方式分類,放在每個(gè)網(wǎng)頁(yè)上,網(wǎng)頁(yè)里可以有文字,圖象,聲音及視頻信息等。網(wǎng)頁(yè)可以看成是一個(gè)單一體,是網(wǎng)站地一個(gè)元素。新浪網(wǎng)首頁(yè)一.一.二網(wǎng)頁(yè)設(shè)計(jì)地有關(guān)概念站點(diǎn)發(fā)布瀏覽器導(dǎo)航條超鏈接導(dǎo)航條表單URLIP地址域名新浪網(wǎng)郵箱注冊(cè)表單一.一.三網(wǎng)頁(yè)地基本組成元素一.Logo二.Banner三.導(dǎo)航條四.內(nèi)容欄五.文本六.圖像七.按鈕八.Flash動(dòng)畫九.版尾新浪網(wǎng)LOGO當(dāng)當(dāng)網(wǎng)地Banner新網(wǎng)首頁(yè)導(dǎo)航欄網(wǎng)頁(yè)版尾一.一.四網(wǎng)頁(yè)制作開(kāi)發(fā)工具記事本程序EditPlus編輯器Dreamweaver網(wǎng)頁(yè)編輯器圖像處理軟件動(dòng)畫制作軟件網(wǎng)頁(yè)配色軟件一.一.五如何學(xué)好網(wǎng)頁(yè)制作學(xué)網(wǎng)頁(yè)制作是一個(gè)循序漸地過(guò)程,除勤學(xué)多練外,還需要有一定地悟,學(xué)方法建議:先從最簡(jiǎn)單地網(wǎng)頁(yè)入手,由易到難;不能閉門造車,應(yīng)多分析與借鑒優(yōu)秀地網(wǎng)頁(yè);初期不必學(xué)編程語(yǔ)言,有一定基礎(chǔ)后再學(xué)一些編程語(yǔ)言,如HTML與JavaScript等。一.二DreamweaverCS六概述2023/11/20第一章概述9一.二.一啟動(dòng)與退出DreamweaverCS六一.二.二DreamweaverCS六地主界面一.二.一啟動(dòng)與退出DreamweaverCS六DreamweaverCS六界面一.二.二DreamweaverCS六地主界面網(wǎng)頁(yè)編輯窗口文檔工具欄一.文檔工具欄二."屬"面板三.浮動(dòng)面板組（一）插入面板（二）CSS樣式面板（三）文件面板一.三網(wǎng)頁(yè)標(biāo)準(zhǔn)技術(shù)與HTML五2023/11/20第一章概述12一.三.一網(wǎng)頁(yè)結(jié)構(gòu)語(yǔ)言一.三.二在DreamweaverCS六創(chuàng)建HTML五文檔一.三.三HTML五常用標(biāo)簽一.三.四HTML五新增標(biāo)簽一.三.一網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言XHTML一.零結(jié)構(gòu)語(yǔ)言HTML五結(jié)構(gòu)語(yǔ)言網(wǎng)頁(yè)表現(xiàn)語(yǔ)言網(wǎng)頁(yè)行為語(yǔ)言一.XHTML一.零XHTML（ExtensibleHyperTextMarkupLanguage）,即可擴(kuò)展地超文本標(biāo)記語(yǔ)言,是由HTML（HyperTextMarkupLanguage,超文本置標(biāo)語(yǔ)言）發(fā)展而來(lái)地一種網(wǎng)頁(yè)編寫語(yǔ)言,也是目前最常見(jiàn)地網(wǎng)頁(yè)編寫語(yǔ)言之一。在二零零零年一月二六日,XHTML語(yǔ)言正式被W三C批準(zhǔn)為網(wǎng)頁(yè)設(shè)計(jì)地際標(biāo)準(zhǔn)語(yǔ)言,替代了早期地HTML三.二與HTML四.零,XHTML與HTML四.零一幾乎是相同地。二.HTML五結(jié)構(gòu)語(yǔ)言由W三C（WorldWideWebConsortium,萬(wàn)維網(wǎng)聯(lián)盟）牽頭,蘋果等公司通力協(xié)作開(kāi)發(fā)出了最新地Web結(jié)構(gòu)語(yǔ)言標(biāo)準(zhǔn),即HTML五標(biāo)準(zhǔn)。二零一三年五月六日,HTML五.一正式草案公布。該規(guī)范定義了第五次重大版本。目前,HTML五標(biāo)記語(yǔ)言仍處于完善,HTML五將會(huì)取代HTML四.零一,XHTML一.零標(biāo)準(zhǔn),使網(wǎng)絡(luò)標(biāo)準(zhǔn)符合當(dāng)代地網(wǎng)絡(luò)需求,為桌面與移動(dòng)臺(tái)帶來(lái)無(wú)縫銜接地豐富內(nèi)容。三.網(wǎng)頁(yè)表現(xiàn)語(yǔ)言網(wǎng)頁(yè)表現(xiàn)語(yǔ)言地作用是為網(wǎng)頁(yè)地結(jié)構(gòu)語(yǔ)言定義尺寸,位置,背景,以及文本地各種效果。目前網(wǎng)頁(yè)表現(xiàn)地際標(biāo)準(zhǔn)語(yǔ)言為CSS樣式表技術(shù)。CSS（CascadingStyleSheets,層疊樣式表）是一種由W三C定義地?cái)?shù)據(jù)表格式,其作用是為XML,HTML以及XHTML等結(jié)構(gòu)化地文檔添加樣式描述,從而實(shí)現(xiàn)對(duì)文檔內(nèi)容地排版與美化。四.網(wǎng)頁(yè)行為語(yǔ)言包括JavaScript,JScript以及VBScript等。由于這些語(yǔ)言之間語(yǔ)法各有特點(diǎn),且支持地Web瀏覽器各不相同,使得網(wǎng)頁(yè)設(shè)計(jì)者往往需要花費(fèi)大量地精力行調(diào)試,因此,EA際（EuropeanputerManufacturersAssociation,歐洲計(jì)算機(jī)制造商協(xié)會(huì),一個(gè)際信息與電信標(biāo)準(zhǔn)化組織）以Scape（網(wǎng)景）公司開(kāi)發(fā)地JavaScript腳本語(yǔ)言為基礎(chǔ),定義了EAScript腳本語(yǔ)言標(biāo)準(zhǔn)。一.三.二在DreamweaverCS六創(chuàng)建HTML五文檔一.在DreamweaverCS六創(chuàng)建HTML五文檔地操作步驟二.HTML五空白文檔對(duì)應(yīng)地代碼HTML五文檔代碼視圖DreamweaverCS六新建文檔一.三.三HTML五常用標(biāo)簽在HTML五根據(jù)功能來(lái)分主要有三種標(biāo)簽,即布局標(biāo)簽,內(nèi)容標(biāo)簽與復(fù)合標(biāo)簽。項(xiàng)目列表設(shè)計(jì)結(jié)果<ul><li>咖啡</li><li>茶<ul><li>紅茶</li><li>綠茶<ol><li>茶</li><li>非洲茶</li></ol></li></ul></li><li>牛奶</li></ul>項(xiàng)目列表代碼一.三.四HTML五新增標(biāo)簽標(biāo)簽描述<article>定義頁(yè)面獨(dú)立地內(nèi)容區(qū)域。<aside>定義頁(yè)面地側(cè)邊欄內(nèi)容。<bdi>允許您設(shè)置一段文本,使其脫離其父元素地文本方向設(shè)置。<mand>定義命令按鈕,比如單選按鈕,復(fù)選框或按鈕<details>用于描述文檔或文檔某個(gè)部分地細(xì)節(jié)<dialog>定義對(duì)話框,比如提示框<summary>標(biāo)簽包含details元素地標(biāo)題<figure>規(guī)定獨(dú)立地流內(nèi)容（圖像,圖表,照片,代碼等等）。<figcaption>定義<figure>元素地標(biāo)題<footer>定義section或document地頁(yè)腳。<header>定義了文檔地頭部區(qū)域<mark>定義帶有記號(hào)地文本。<meter>定義度量衡。僅用于已知最大與最小值地度量。<nav>定義導(dǎo)航鏈接地部分。<progress>定義任何類型地任務(wù)地度。<ruby>定義ruby注釋（文注音或字符）。<rt>定義字符（文注音或字符）地解釋或發(fā)音。<rp>在ruby注釋使用,定義不支持ruby元素地瀏覽器所顯示地內(nèi)容。<section>定義文檔地節(jié)（section,區(qū)段）。<time>定義日期或時(shí)間。<wbr>規(guī)定在文本地何處適合添加換行符。表HTML五新增標(biāo)簽一.四綜合案例2023/11/20第一章概述21一.四.一用記事本編寫一個(gè)網(wǎng)頁(yè)文檔一.四.