網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第1頁
網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第2頁
網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第3頁
網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第4頁
網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第5頁
已閱讀5頁，還剩37頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

網(wǎng)頁設(shè)計(jì)基礎(chǔ)第1頁，共42頁，2023年，2月20日，星期二2.1Dreamweaver簡介

Dreamweaver主要特點(diǎn)和功能所見即所得將設(shè)計(jì)和代碼編輯器和二為一內(nèi)置的圖形編輯程序節(jié)省開發(fā)時(shí)間界面操作方便、功能強(qiáng)大完美的CSS支持完整的集成開發(fā)環(huán)境第2頁，共42頁，2023年，2月20日，星期二2.1Dreamweaver簡介Dreamweaver主要特點(diǎn)和功能所見即所得行為工具豐富布局視圖將表格和層結(jié)合實(shí)現(xiàn)頁面排版強(qiáng)大的網(wǎng)站管理功能瀏覽器兼容檢查常見格式的外部文檔、代碼可以嵌入第3頁，共42頁，2023年，2月20日，星期二Dreamweaver8的安裝與啟動(dòng)Dreamweaver8的安裝Dreamweaver8的啟動(dòng)方法：開始→程序→

Micromedia→Dreamweaver8初次啟動(dòng)第4頁，共42頁，2023年，2月20日，星期二1、工作布局的分類設(shè)計(jì)器編輯器雙重屏幕【窗口】——工作區(qū)布局第5頁，共42頁，2023年，2月20日，星期二2、起始頁第6頁，共42頁，2023年，2月20日，星期二3、工作區(qū)布局主菜單插入工具欄編碼工具欄拆分視圖屬性面板文檔工具欄代碼編輯窗口設(shè)計(jì)窗口面板組狀態(tài)欄第7頁，共42頁，2023年，2月20日，星期二3、工作區(qū)布局1.標(biāo)題欄顯示“MacromediaDreaweaver8”。如果新建或者打開網(wǎng)頁，在后面會(huì)顯示該網(wǎng)頁的信息，如網(wǎng)頁標(biāo)題、所在目錄以及文件名稱。2.菜單欄

Dreaweaver8菜單分為10種，包括文件、編輯、查看、插入、修改、文本、命令、站點(diǎn)、窗口和幫助。3.“插入”工具欄用于將各種類型的“對(duì)象”（如圖像、表格和層）插入到文檔中的按鈕。例如，可以通過單擊“插入”欄中的“表格”按鈕插入一個(gè)表格。也可以不使用“插入”欄而使用“插入”菜單插入對(duì)象。第8頁，共42頁，2023年，2月20日，星期二3、工作區(qū)布局“常用”：可以創(chuàng)建和插入最常用的對(duì)象，例如圖像和表格?！安季帧保嚎梢圆迦氡砀瘛iv標(biāo)簽、層和框架。您還可以從三個(gè)表格視圖中進(jìn)行選擇“標(biāo)準(zhǔn)”（默認(rèn)）、“擴(kuò)展表格”和“布局”?！氨韱巍保喊糜趧?chuàng)建表單和插入表單元素的按鈕?！拔谋尽保嚎梢圆迦敫鞣N文本格式設(shè)置標(biāo)簽和列表格式設(shè)置標(biāo)簽?！癏TML”：可以插入用于水平線、頭內(nèi)容、表格、框架和腳本的HTML標(biāo)簽?！皯?yīng)用程序”：可以插入動(dòng)態(tài)元素，例如記錄集、重復(fù)區(qū)域以及記錄插入和更新表單?！癋lash元素”：可以插入Flash元素。“收藏”：可以將“插入”欄中最常用的按鈕分組和組織到某一常用位置。第9頁，共42頁，2023年，2月20日，星期二3、工作區(qū)布局4.文檔工具欄這些按鈕可以在文檔的不同視圖間快速切換：“代碼”視圖、“設(shè)計(jì)”視圖、同時(shí)顯示“代碼”和“設(shè)計(jì)”視圖的拆分視圖。工具欄中還包含一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔有關(guān)的常用命令和選項(xiàng)。代碼視圖：僅在“文檔”窗口中顯示“代碼”視圖。設(shè)計(jì)視圖：僅在“文檔”窗口中顯示“設(shè)計(jì)”視圖。拆分視圖：在“文檔”窗口同時(shí)顯示“代碼”視圖和“設(shè)計(jì)”視圖。標(biāo)題：可以直接在此處為文檔設(shè)定標(biāo)題，它將顯示在瀏覽器的標(biāo)題欄中。沒有瀏覽器/檢查錯(cuò)誤：可以檢查跨瀏覽器兼容性。在瀏覽器中預(yù)覽/調(diào)試：在瀏覽器中預(yù)覽或調(diào)試文檔。從彈出菜單中選擇一個(gè)瀏覽器。文件管理：顯示“文件管理”彈出菜單。刷新：在“代碼”視圖中進(jìn)行更改后刷新文檔的“設(shè)計(jì)”視圖。視圖選項(xiàng)：為“代碼”視圖和“設(shè)計(jì)”視圖設(shè)置選項(xiàng)。

第10頁，共42頁，2023年，2月20日，星期二3、工作區(qū)布局5.“文檔”窗口“文檔”窗口用于顯示當(dāng)前創(chuàng)建和編輯的文檔。6.“屬性”面板用于查看和更改所選對(duì)象或文本的各種屬性。網(wǎng)頁的內(nèi)容形式多樣，任何一種形式都可以稱之為對(duì)象，比如：文字、圖像、表格等。一般網(wǎng)頁中的對(duì)象都有屬性，如文字的字體、顏色、字號(hào)等，圖像的高、寬、鏈接等。用戶可以在屬性面板中設(shè)置對(duì)象的屬性，如圖所示。屬性面板的設(shè)置項(xiàng)目會(huì)根據(jù)選取對(duì)象的不同而變化。第11頁，共42頁，2023年，2月20日，星期二3、工作區(qū)布局7.“浮動(dòng)面板組”“浮動(dòng)面板組”用于分組在某個(gè)標(biāo)題下面的相關(guān)面板的集合，節(jié)省屏幕空間。用鼠標(biāo)單擊面板組左邊的小三角可以折疊或者展開一個(gè)浮動(dòng)面板，在浮動(dòng)面板組最左邊有一個(gè)折疊按鈕，可以展開或者收縮所有面板,如圖所示。折疊按鈕第12頁，共42頁，2023年，2月20日，星期二3、工作區(qū)布局8.其他工具欄除前面介紹的工具欄外，Dreamweaver8還提供了樣式呈現(xiàn)、標(biāo)準(zhǔn)和編碼工具欄。選擇“查看”→“工具欄”命令，在“工具欄”子菜單中勾選或者取消工具欄，可以改變工具欄的顯示或隱藏方式。9.狀態(tài)欄狀態(tài)欄提供和創(chuàng)建文檔有關(guān)的其它信息，顯示標(biāo)簽選擇器，選取按鈕，手型工具，縮放工具，文檔大小，下載時(shí)間等如圖所示。第13頁，共42頁，2023年，2月20日，星期二3、工作區(qū)布局（1）標(biāo)簽選擇器顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)，單擊該層次結(jié)構(gòu)中的任何標(biāo)簽以選擇該標(biāo)簽及其全部內(nèi)容。比如：單擊<body>可以選擇文檔的整個(gè)正文。（2）選取按鈕、手型工具、縮放工具按鈕。分別用來選取對(duì)象、移動(dòng)頁面工作區(qū)域和縮放頁面。按住ALT鍵，可以使用縮放工具縮小頁面工作區(qū)域。（3）文檔比例若要使頁面看起來效果更好，可以單擊下拉列表框右側(cè)的小箭頭，在彈出的下拉列表中選擇一個(gè)比例。（4）窗口大小用來將“文檔”窗口的大小調(diào)整到預(yù)定義或自定義的尺寸?！按翱诖笮　钡挠覀?cè)是頁面的文檔大小和估計(jì)下載時(shí)間。第14頁，共42頁，2023年，2月20日，星期二2.2創(chuàng)建和編輯本地站點(diǎn)站點(diǎn)概述站點(diǎn)：實(shí)質(zhì)上是一個(gè)文件夾。文件夾中涵蓋一系列文檔，這些文檔通過各種鏈接關(guān)聯(lián)起來，利用瀏覽器就可以實(shí)現(xiàn)對(duì)整個(gè)網(wǎng)站的瀏覽。

本地站點(diǎn)遠(yuǎn)程站點(diǎn)第15頁，共42頁，2023年，2月20日，星期二2.2創(chuàng)建和編輯本地站點(diǎn)1、創(chuàng)建本地站點(diǎn)（1）在菜單欄中選擇“站點(diǎn)”→“新建站點(diǎn)”命令，打開“未命名站點(diǎn)l的站點(diǎn)定義為”對(duì)話框，如圖所示。注意：站點(diǎn)的名稱是站點(diǎn)的標(biāo)識(shí)。站點(diǎn)名幾乎可以由任何字符組成，但是不包括“/”、“\”、“?”、“>”、“<”、“:”、“∣”、“”等字符。第16頁，共42頁，2023年，2月20日，星期二2.2創(chuàng)建和編輯本地站點(diǎn)（2）單擊“下一步”按鈕，可以設(shè)置該站點(diǎn)需要用到的服務(wù)器技術(shù)，因?yàn)榇藭r(shí)新建的是靜態(tài)站點(diǎn)，應(yīng)當(dāng)選擇“否，我不想使用服務(wù)器技術(shù)”，如圖所示。第17頁，共42頁，2023年，2月20日，星期二2.2創(chuàng)建和編輯本地站點(diǎn)（3）單擊“下一步”按鈕,可以設(shè)置站點(diǎn)的編輯方式，如圖所示。在對(duì)話框中選擇“編輯我的計(jì)算機(jī)上的副本，完成后再上傳到服務(wù)器”，在“您將文件存儲(chǔ)在計(jì)算機(jī)上的什么位置？”文本框中設(shè)置本地站點(diǎn)文件夾的地址。第18頁，共42頁，2023年，2月20日，星期二2.2創(chuàng)建和編輯本地站點(diǎn)（4）單擊“下一步”按鈕，進(jìn)入“站點(diǎn)定義”對(duì)話框設(shè)置遠(yuǎn)端站點(diǎn)，先選“無”，等網(wǎng)站建設(shè)完成后再進(jìn)行設(shè)置。如圖所示。第19頁，共42頁，2023年，2月20日，星期二2.2創(chuàng)建和編輯本地站點(diǎn)（5）單擊“下一步”按鈕，進(jìn)入“站點(diǎn)定義”對(duì)話框的總結(jié)，如圖2.13所示。該對(duì)話框列出了剛才設(shè)置的所有主要內(nèi)容，如果發(fā)現(xiàn)有錯(cuò)誤，可以單擊“上一步”返回修改；如果沒有問題，單擊“完成”按鈕，結(jié)束“站點(diǎn)定義”對(duì)話框的設(shè)置。第20頁，共42頁，2023年，2月20日，星期二2.2創(chuàng)建和編輯本地站點(diǎn)2、站點(diǎn)管理1.編輯站點(diǎn)（1）選擇“站點(diǎn)”→“管理站點(diǎn)”命令，打開站點(diǎn)管理對(duì)話框。如圖2.14所示。2.刪除站點(diǎn)

3.復(fù)制站點(diǎn)第21頁，共42頁，2023年，2月20日，星期二2.2創(chuàng)建和編輯本地站點(diǎn)3、站點(diǎn)文件與文件夾創(chuàng)建文件與文件夾創(chuàng)建文件夾就是構(gòu)思網(wǎng)站目錄結(jié)構(gòu)的過程，通常文件夾代表網(wǎng)站的子欄目。②移動(dòng)和復(fù)制文件與文件夾③重命名文件與文件夾④刪除文件與文件夾第22頁，共42頁，2023年，2月20日，星期二2.2創(chuàng)建和編輯本地站點(diǎn)3、站點(diǎn)文件與文件夾設(shè)置首頁文件編輯文件刷新文件,[站點(diǎn)]-“管理站點(diǎn)”-“編輯”—“高級(jí)”標(biāo)簽-自動(dòng)刷新本地文件列表⑧使用文件面板本地視圖、遠(yuǎn)程視圖、測(cè)試服務(wù)器、地圖視圖信息欄站點(diǎn)列表工具欄面板菜單欄站點(diǎn)下拉列表第23頁，共42頁，2023年，2月20日，星期二2.3網(wǎng)頁文件的基本操作1、創(chuàng)建、打開和保存網(wǎng)頁文件1.創(chuàng)建文檔通過Dreamweaver8文件創(chuàng)建新文檔，執(zhí)行以下操作：選擇“文件”→“新建”，即出現(xiàn)“新建文檔”對(duì)話框。如圖2.20所示?！俺Ｒ?guī)”選項(xiàng)卡已被選定。從各種預(yù)先設(shè)計(jì)的頁面布局中選擇一種。比如：選擇“基本頁”HTML，點(diǎn)擊創(chuàng)建按鈕。第24頁，共42頁，2023年，2月20日，星期二2.3網(wǎng)頁文件的基本操作2.保存文檔創(chuàng)建新文檔后，需要保存文檔，執(zhí)行以下操作：（1）選擇“文件”→“保存”；或者按Ctrl+S。（2）在出現(xiàn)的對(duì)話框中，定位到要用來保存文件的文件夾。（3）在“文件名稱”文本框中，鍵入文件名。

不要在文件名和文件夾名中使用空格和特殊字符，文件名也不要以數(shù)字開頭、不要使用特殊字符（如￥）或標(biāo)點(diǎn)符號(hào)（如冒號(hào)、斜杠或句號(hào)）；很多服務(wù)器在上傳時(shí)會(huì)更改這些字符，這會(huì)導(dǎo)致與這些文件的鏈接中斷。（4）單擊“保存”。第25頁，共42頁，2023年，2月20日，星期二2.3網(wǎng)頁文件的基本操作3.打開現(xiàn)有文檔在Dreamweaver8中可打開現(xiàn)有Web頁或基于文本的文檔，即使它們不是用Dreamweaver8創(chuàng)建的。可打開該文檔并用Dreamweaver8在“設(shè)計(jì)”視圖或“代碼”視圖中編輯該文檔。打開現(xiàn)有的文件，請(qǐng)執(zhí)行以下操作：（1）選擇“文件”→“打開”，出現(xiàn)“打開”對(duì)話框。（2）定位到并選擇要打開的文件。（3）單擊“打開”按鈕。第26頁，共42頁，2023年，2月20日，星期二2.3網(wǎng)頁文件的基本操作2、設(shè)置網(wǎng)頁的頁面屬性打開“頁面屬性”對(duì)話框有三種方法：Dreamweaver8的編輯窗口中，選擇“修改”→“頁面屬性”命令。在文檔（設(shè)計(jì)）窗口右擊，在彈出的快捷菜單中選擇“頁面屬性”。在文檔下方的屬性面板中，單擊“頁面屬性”按鈕。第27頁，共42頁，2023年，2月20日，星期二2、設(shè)置網(wǎng)頁的頁面屬性設(shè)置外觀設(shè)置鏈接設(shè)置標(biāo)題設(shè)置標(biāo)題編碼設(shè)置跟蹤圖像第28頁，共42頁，2023年，2月20日，星期二3、設(shè)置網(wǎng)頁元素的顏色網(wǎng)絡(luò)安全色網(wǎng)頁安全色是指以256色模式運(yùn)行時(shí)，無論在Windows還是在Macintosh系統(tǒng)中，在NetscapeNavigator和MicrosoftInternetExplorer中的顯示相同的顏色。設(shè)置網(wǎng)頁元素顏色在對(duì)話框或“屬性”面板中單擊顏色框，出現(xiàn)顏色選擇器，如圖所示。

第29頁，共42頁，2023年，2月20日，星期二3.定義默認(rèn)文本顏色在“頁面屬性”對(duì)話框中為常規(guī)文本、鏈接、訪問過的鏈接和活動(dòng)鏈接定義默認(rèn)顏色，或者選擇預(yù)設(shè)配色方案定義頁面背景和文本顏色。若要定義默認(rèn)文本顏色，執(zhí)行下列操作之一：選擇“修改”→“頁面屬性”，然后為“文本顏色”、“鏈接顏色”、“訪問過的鏈接”和“活動(dòng)鏈接”選項(xiàng)選擇顏色。第30頁，共42頁，2023年，2月20日，星期二4、網(wǎng)頁文本的編輯1.插入文本的方法在網(wǎng)頁中插入文本有3種方法：（1）直接輸入文本。（2）復(fù)制文本。（3）導(dǎo)入已有的WORD文檔。選擇“文件”→“導(dǎo)入”→“WORD文檔”命令，在彈出的導(dǎo)入WORD文檔對(duì)話框中，選擇要導(dǎo)入的WORD文檔，如圖所示。第31頁，共42頁，2023年，2月20日，星期二4、網(wǎng)頁文本的編輯2.設(shè)置段落格式設(shè)置段落格式執(zhí)行以下操作：（1）將插入點(diǎn)放在段落中，或者選擇段落中的一些文本。（2）使用“文本”→“段落格式”子菜單，如圖2.30所示；或“屬性”面板中的“格式”彈出式菜單，如圖2.31所示，選擇某段落格式第32頁，共42頁，2023年，2月20日，星期二4、網(wǎng)頁文本的編輯3.對(duì)齊文本若要對(duì)齊文本，執(zhí)行以下操作：（1）選擇要對(duì)齊的文本，或者只需將指針插入到文本開頭。（2）單擊“屬性”面板中的對(duì)齊選項(xiàng)（“左對(duì)齊”、“右對(duì)齊”或“居中對(duì)齊”），或者選擇“文本”→“對(duì)齊”，然后選擇對(duì)齊命令，如圖2.32所示。第33頁，共42頁，2023年，2月20日，星期二4、網(wǎng)頁文本的編輯若要縮進(jìn)文本和取消縮進(jìn)，執(zhí)行以下操作：（1）將插入點(diǎn)放在要縮進(jìn)的段落中。（2）單擊“屬性”面板中的“文本縮進(jìn)”或“文本凸出”按鈕，也可以選擇“文本”→“縮進(jìn)”或“凸出”。第34頁，共42頁，2023年，2月20日，星期二4、網(wǎng)頁文本的編輯4.段落與換行需要添加段落時(shí)，可以按Enter鍵（添加<p></p>標(biāo)簽要添加換行符（添加<br>標(biāo)簽），可以選擇以下操作中的一種：按Shift+Enter鍵。在“插入”欄中選擇“文本”類別，選擇“字符”菜單，然后單擊“換行符”圖標(biāo)。選擇“插入”→“HTML”→“特殊字符”→“換行符”。第35頁，共42頁，2023年，2月20日，星期二4、網(wǎng)頁文本的編輯5.使用水平線要?jiǎng)?chuàng)建水平線，執(zhí)行以下操作：（1）在“文檔”窗口中，將插入點(diǎn)放在要插入水平線的位置。（2）執(zhí)行下列操作之一：選擇“插入”→“HTML”→“水平線”。在“插入”欄的“HTML”類別中，單擊“水平線”按鈕要修改水平線，執(zhí)行以下操作：（1）在“文檔”窗口中，選擇水平線。（2）選擇“窗口”→“屬性”打開“屬性”面板，如圖2.35所示，然后根據(jù)需要對(duì)屬性進(jìn)行修改。第36頁，共42頁，2023年，2月20日，星期二4、網(wǎng)頁文本的編輯6.創(chuàng)建項(xiàng)目列表和編號(hào)列表若要?jiǎng)?chuàng)建新列表，執(zhí)行以下操作：（1）將插入點(diǎn)放在要添加列表的位置，然后執(zhí)行下列操作之一：單擊“屬性”面板中的“項(xiàng)目列表”或“編號(hào)列表”按鈕。選擇“文本”→“列表”，然后選擇所需的列表類型：“項(xiàng)目列表”、“編號(hào)列表”或“定義列表”。（2）鍵入列表項(xiàng)目文本，然后按Enter鍵創(chuàng)建下一個(gè)列表項(xiàng)目。（3）若要完成列表，按兩次Enter鍵。第37頁，共42頁，2023年，2月20日，星期二4、網(wǎng)頁文本的編輯6.創(chuàng)建項(xiàng)目列表和編號(hào)列表使用現(xiàn)有文本創(chuàng)建列表，執(zhí)行以下操作：（1）選擇一些段落。（2）單擊“屬性”面板中的“項(xiàng)目列表”或“編號(hào)列表”按鈕，或選擇“文本”→“列表”，然后選擇所需的列表類型：“項(xiàng)目列表”、“編號(hào)列表”或“定義列表”。若要?jiǎng)?chuàng)建嵌套列表，執(zhí)行以下操作：（1）選擇要嵌套的列表項(xiàng)目。（2）單擊“屬性”面板中的“縮進(jìn)”按鈕；或選擇“文本”→“縮進(jìn)”。（3）按照上面使用的同一過程，對(duì)縮進(jìn)的文本應(yīng)用新的列表類型或樣式。第38頁，共42頁，2023年，2月20日，星期二4、網(wǎng)頁文本的編輯7.設(shè)置文本格式選擇文本，執(zhí)行以下操作：（1）若要更改字體，從“屬性”面板或單擊“文本”→“字體”子菜單中選擇字體。選擇“默認(rèn)”是對(duì)所選文本應(yīng)用默認(rèn)字體（2）若要更改字體樣式，單擊“屬性”面板中的“粗體”或“斜體”，或者從“文本”→“樣式”子菜單中選擇字體樣式（“粗體

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論