網頁設計基礎_第1頁
網頁設計基礎_第2頁
網頁設計基礎_第3頁
網頁設計基礎_第4頁
網頁設計基礎_第5頁
已閱讀5頁，還剩37頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

網頁設計基礎第1頁，課件共42頁，創(chuàng)作于2023年2月2.1Dreamweaver簡介

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

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

Dreaweaver8菜單分為10種，包括文件、編輯、查看、插入、修改、文本、命令、站點、窗口和幫助。3.“插入”工具欄用于將各種類型的“對象”（如圖像、表格和層）插入到文檔中的按鈕。例如，可以通過單擊“插入”欄中的“表格”按鈕插入一個表格。也可以不使用“插入”欄而使用“插入”菜單插入對象。第8頁，課件共42頁，創(chuàng)作于2023年2月3、工作區(qū)布局“常用”：可以創(chuàng)建和插入最常用的對象，例如圖像和表格。“布局”：可以插入表格、div標簽、層和框架。您還可以從三個表格視圖中進行選擇“標準”（默認）、“擴展表格”和“布局”。“表單”：包含用于創(chuàng)建表單和插入表單元素的按鈕。“文本”：可以插入各種文本格式設置標簽和列表格式設置標簽。“HTML”：可以插入用于水平線、頭內容、表格、框架和腳本的HTML標簽。“應用程序”：可以插入動態(tài)元素，例如記錄集、重復區(qū)域以及記錄插入和更新表單。“Flash元素”：可以插入Flash元素。“收藏”：可以將“插入”欄中最常用的按鈕分組和組織到某一常用位置。第9頁，課件共42頁，創(chuàng)作于2023年2月3、工作區(qū)布局4.文檔工具欄這些按鈕可以在文檔的不同視圖間快速切換：“代碼”視圖、“設計”視圖、同時顯示“代碼”和“設計”視圖的拆分視圖。工具欄中還包含一些與查看文檔、在本地和遠程站點間傳輸文檔有關的常用命令和選項。代碼視圖：僅在“文檔”窗口中顯示“代碼”視圖。設計視圖：僅在“文檔”窗口中顯示“設計”視圖。拆分視圖：在“文檔”窗口同時顯示“代碼”視圖和“設計”視圖。標題：可以直接在此處為文檔設定標題，它將顯示在瀏覽器的標題欄中。沒有瀏覽器/檢查錯誤：可以檢查跨瀏覽器兼容性。在瀏覽器中預覽/調試：在瀏覽器中預覽或調試文檔。從彈出菜單中選擇一個瀏覽器。文件管理：顯示“文件管理”彈出菜單。刷新：在“代碼”視圖中進行更改后刷新文檔的“設計”視圖。視圖選項：為“代碼”視圖和“設計”視圖設置選項。

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

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

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

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

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

溫馨提示

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

評論

0/150

提交評論