畢業(yè)設(shè)計(jì)個(gè)人網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)(文件)
【正文】 代碼這是該指令的快捷鍵熟練使用快捷鍵將會(huì)有助于提高工作效率有些指令的右邊會(huì)有一個(gè)小黑三角的標(biāo)記它代表該指令還包含下一級(jí)的指令鼠標(biāo)停留片刻即可顯示 快捷工具欄 快捷工具欄指的是菜單欄下邊的 3 排按鈕選擇菜單查看工具欄勾選里面的插入文檔和標(biāo)準(zhǔn) 3 項(xiàng)完整的快捷工具欄就顯現(xiàn)出來(lái)了 屬性面板 在網(wǎng)頁(yè)編輯窗口的下面還有一個(gè)面板它是有名 的屬性面板它在這個(gè)軟件中起到舉足輕重的作用 屬性面板顧名思義就是顯示調(diào)整屬性的面板根據(jù)鼠標(biāo)所選中對(duì)象的不同屬性面板在界面上也會(huì)有所差異用戶可以分別對(duì)不同的對(duì)象進(jìn)行調(diào)整 第二章 網(wǎng)站制作實(shí)戰(zhàn) 21 站點(diǎn) 創(chuàng)建站點(diǎn) 要制作一個(gè)網(wǎng)站第一步操作都是一樣的就是要?jiǎng)?chuàng)造一個(gè)站點(diǎn)這樣可以使整個(gè)網(wǎng)站的脈絡(luò)結(jié)構(gòu)清晰地展現(xiàn)在面前避免了以后再進(jìn)行紛雜的管理 從菜單中選擇站點(diǎn)管理站點(diǎn)在彈出的對(duì)話框中選擇新建之后再選擇其中的站點(diǎn)再次彈出一個(gè)對(duì)話框在文本框中輸入自己已經(jīng)企化好的網(wǎng)站名稱追夢(mèng)人 填好后單擊下一步進(jìn)入下一個(gè)步驟 由于我要做的是一個(gè)靜態(tài)的網(wǎng)頁(yè)所以選擇上面的一項(xiàng)否我不想使用服務(wù)器技術(shù) 單擊下一步進(jìn)入下一個(gè)步驟 在此選項(xiàng)中有兩個(gè)選擇選擇推薦的編輯我的計(jì)算機(jī)上的本地副本完成后再上傳到服務(wù)器底下的文本框允許在本地磁盤上指定一個(gè)文件夾 Dreamweaver 將在其中儲(chǔ)存站點(diǎn)文件的本地副本單擊該文本框后面的文件夾圖標(biāo)新建并指定一個(gè)空的文件夾 Eding 之后單擊下一步進(jìn)入下一個(gè)步驟 這一步是如何設(shè)置連接到遠(yuǎn)程服務(wù)器彈出式菜單中有 6 中選擇這里選擇無(wú)而后下一步再完成即可 創(chuàng)建站點(diǎn)內(nèi)容 站點(diǎn)創(chuàng)建完成后就可以創(chuàng)建 Web 頁(yè)來(lái)填充站 點(diǎn)了在右側(cè)浮動(dòng)面板組中選擇文件文件面板此時(shí)整個(gè)網(wǎng)站中沒有任何內(nèi)容用鼠標(biāo)右擊面板中的本地根目錄文件夾 在彈出的菜單中選擇新建文件新建一個(gè)文件后將其命名為 indexhtm 或indexhtml 它就是未來(lái)的首頁(yè) 由于追夢(mèng)人網(wǎng)站分為平面設(shè)計(jì)動(dòng)畫制作網(wǎng)文精品經(jīng)典回顧個(gè)人說(shuō)明這五個(gè)大欄目所以繼續(xù)用鼠標(biāo)右擊右側(cè)在彈出的菜單中選擇第二項(xiàng) New Folder 新建文件 夾 執(zhí) 行 五 次 操 作 新 建 五 個(gè) 文 件 夾 并 把 它 們 重 命 名 為graphanimbooksmusicletter 分別對(duì)應(yīng)上面的五個(gè)大欄目存放它們各自的內(nèi)容之后再次新建 1 個(gè)文 件夾命名為 images 用來(lái)存放所有的圖象文件的內(nèi)容 之后在個(gè)欄目的文件夾里還要建立想相應(yīng)的欄目網(wǎng)頁(yè) 22 首頁(yè) 設(shè)置首頁(yè)布局 每個(gè)網(wǎng)站都會(huì)有一個(gè)首頁(yè)就功能上而言它代表著一個(gè)網(wǎng)站的風(fēng)格與特色就網(wǎng)站架構(gòu)上而言它代表了網(wǎng)站的第一層架構(gòu)至于網(wǎng)站上其他 Web 頁(yè)原則上都必須通過首頁(yè)來(lái)連接散播出去可見首頁(yè)是多么的重要 首頁(yè)是打開網(wǎng)站后在瀏覽器中顯示的第一個(gè)頁(yè)面它是起什么名字通常要視Server 端的設(shè)置一般的有 indexhtmdef 目前主要以 indexhtm 的居多當(dāng)然后綴名為 html 也是正確的 具體設(shè)置方 法是右健單擊文件浮動(dòng)面板中的 indexhtm 在彈出的菜單中選擇設(shè)成首頁(yè) 首頁(yè)的布局有很多方法在這里我所用到的是表格的布局模式布局模式中的表格稱為布局表格單元格稱為布局單元格在繪制布局表格和布局單元格時(shí)必須從標(biāo)準(zhǔn)模式切換到布局模式直接單擊布局按鈕即可 操作步驟 1 在插入快捷欄的布局分類中單擊布局表格按紐 2 將變成形狀的鼠標(biāo)光標(biāo)放到編輯中網(wǎng)頁(yè)上在要繪制的地方進(jìn)行拖動(dòng)就可以進(jìn)行創(chuàng)建了如果繪制的是第一個(gè)表格必須從網(wǎng)頁(yè)的最左上角開始繪制 3 在這里要繪制多個(gè)表格可以再次單擊布局表格按紐進(jìn)行繪制也可以按住 Ctrl鍵繪制多個(gè)表格追夢(mèng)人網(wǎng)站首頁(yè)的布局如圖所示 頁(yè)的頁(yè)面屬性 首先雙擊文件浮動(dòng)面板中的 indexhtm 進(jìn)入頁(yè)面的編輯窗口右健單擊空白區(qū)域在菜單中選擇頁(yè)面屬性之后彈出頁(yè)面屬性對(duì)話框若選擇主菜單修改頁(yè)面屬性項(xiàng)也可以把打開該對(duì)話框 在頁(yè)面屬性對(duì)話框中左側(cè)窗口顯示分類其中包括了外觀鏈接標(biāo)題標(biāo)題編碼跟蹤圖像 5 項(xiàng)右側(cè)區(qū)域則顯示各類中可以設(shè)置的項(xiàng)目追夢(mèng)人首頁(yè)設(shè)置的屬性如下圖所示 編輯頭內(nèi)容 一個(gè)網(wǎng)頁(yè)文件結(jié)構(gòu)上實(shí)際是由兩部分組成頭 head內(nèi)容和主體 body內(nèi)容主體內(nèi)容 body是文檔的主要部分也是包含文本和圖 像等的可見部分頭內(nèi)容 head是除文檔標(biāo)題外的不可見部分包含有文檔類型語(yǔ)言編碼搜索引擎的關(guān)鍵的關(guān)鍵字和內(nèi)容指示器以及樣式定義等重要信息這些元器并不是每個(gè)頁(yè)面都需要的例如可以僅為主頁(yè)提供關(guān)鍵字 下面就以首頁(yè)為例說(shuō)明怎樣插入較常用的頭 head 內(nèi)容 單擊菜單攔下面插入快捷的下拉列表選擇其中的 HTML 類此時(shí)右側(cè)將會(huì)顯示該類中可以插入的對(duì)象快捷按鈕再次單擊第 2 個(gè)按鈕文件頭旁邊的下拉箭頭會(huì)彈出菜單該項(xiàng)列出的便是即將插入的頭內(nèi)容 插入圖像 圖像是網(wǎng)頁(yè)中不可或缺的組成成份恰當(dāng)?shù)厥褂脠D像可以使網(wǎng)站充滿 生活生命力與說(shuō)服力吸引更多的瀏覽者加深他們欣賞你網(wǎng)站的意愿 另一方面網(wǎng)頁(yè)的容量大小是網(wǎng)站成功與否的一大關(guān)鍵因素由于網(wǎng)絡(luò)在傳輸上的限制導(dǎo)致了下載的速度不可能太快因此網(wǎng)頁(yè)的大小就不能太大其中關(guān)鍵就在于圖像的大小了否則瀏覽者會(huì)失去等待的耐心無(wú)論你的網(wǎng)站多么精彩也無(wú)濟(jì)于事了所以在網(wǎng)面容量大小的問題上一定要重視下面就來(lái)詳細(xì)介紹對(duì)網(wǎng)頁(yè)圖像進(jìn)行處理的操作步驟以使得它們?cè)诒３謭D形美麗與網(wǎng)站風(fēng)格搭配的基礎(chǔ)上圖片文件能夠變的更小 1 首先將光標(biāo)停留在要插入圖像的位置然后單擊菜單欄下面插入快健欄的下拉表選擇其中的常用類則右側(cè)將會(huì) 顯示該類中可以插入的對(duì)象快鍵按鈕左起第 5 個(gè)即為圖像圖像按鈕單擊它右側(cè)的下拉列表選擇第 1 項(xiàng)圖像 2 隨即彈出選擇圖像源文件對(duì)話框從計(jì)算機(jī)磁盤中選擇想要插入的圖像文件或在 URL 編輯框中輸入圖像的路徑和名稱下面的相對(duì)于下拉表框中可選擇文件 URL 地址的類型如果選擇文檔選項(xiàng)表示圖像地址相對(duì)于當(dāng)前文檔如果選擇站點(diǎn)根目錄選項(xiàng)表示地址相對(duì)于根目錄在這里我要插入的是網(wǎng)站標(biāo)志 logo 插入logo 圖象如圖所示 最后單擊確定按鈕即可完成插入圖像的操作 媒體 在 Dreamweaver MX2021 中除了之前講到的可以插入圖像外還 可插入動(dòng)畫聲音視頻等媒體元素如 FlashShockwaveAppletsActieX 及格 Midi 聲音文件等并且還可以在 Dreamweaver 自身內(nèi)插入 Macromedia Flash MX2021 按鈕和文本對(duì)象以及進(jìn)行相關(guān)的后期處理和添加設(shè)計(jì)備注等操作 在 Dreamweaver MX 2021 文檔中可以插入媒體文件包括 Flash Shockwave影片 QuickTime AVI java applet Active X 控件以及各種格式的音頻文件 要在瀏覽器中播放放 Flash 動(dòng)畫必須在瀏覽器中集成 Flash 播放器 Flash Player 其中 Inter Explorer 通過 ActiveX 控制來(lái)實(shí)現(xiàn) Netscape Navigator則是通過相應(yīng)的插件來(lái)實(shí)現(xiàn)的在最新的 Netscape Navigator 和 Inter Explorer 瀏覽器中均已集成了 Flash 動(dòng)畫播放功能 操場(chǎng)作步驟 步驟 1 將光標(biāo)停留在要插入 Flash 的位置然后單擊菜單欄下面插入快捷欄的下拉列表選擇其中的常用分類右側(cè)將會(huì)顯示該類中可以插入的對(duì)象快捷按鈕左起第 6 個(gè)即為媒體按鈕單擊它右側(cè)的下拉列表選擇第 1 項(xiàng) Flash 圖標(biāo) 步驟 2 在彈出的對(duì)話框中選擇擴(kuò)展名為 swf 的 Flash 文件即可將其插入到Dreamwe aver的網(wǎng)頁(yè)編輯窗口中可以看到在這個(gè)
公司管理相關(guān)推薦
鄂ICP備17016276號(hào)-1