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

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