項目二 添加文本與表格_第1頁
項目二 添加文本與表格_第2頁
項目二 添加文本與表格_第3頁
項目二 添加文本與表格_第4頁
項目二 添加文本與表格_第5頁
已閱讀5頁，還剩49頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

Dreamweaver網(wǎng)頁設(shè)計立體化教程（微課版）（DreamweaverCC2020）項目二添加文本與表格目錄Contents任務一制作“佳美馨裝飾——網(wǎng)站簡介”網(wǎng)頁任務二制作“佳美馨裝飾——會員列表”網(wǎng)頁實訓一制作“中國皮影——皮影戲”網(wǎng)頁實訓二制作“中國皮影——皮影起源傳說”網(wǎng)頁簡介類的頁面在網(wǎng)頁中十分常見，通常由純文本組成，有時也會添加相關(guān)的圖片。本任務將制作“佳美馨裝飾網(wǎng)簡介”網(wǎng)頁，要完成此任務，需要先新建網(wǎng)頁，然后設(shè)置頁面屬性，再在其中輸入并編輯文本，最后添加其他的網(wǎng)頁元素。一、任務描述（一）任務背景（1）掌握新建、保存、打開網(wǎng)頁文件的方法。（2）能夠設(shè)置網(wǎng)頁文件的頁面屬性和頭部信息。（3）掌握輸入文本以及設(shè)置文本格式的方法。（4）掌握插入特殊字符、水平線、日期等的方法。（二）任務目標二、相關(guān)知識（一）新建、保存與打開網(wǎng)頁1．新建網(wǎng)頁新建網(wǎng)頁主要有新建空白網(wǎng)頁和從模板新建網(wǎng)頁兩種方式。新建空白網(wǎng)頁從模板新建網(wǎng)頁二、相關(guān)知識（一）新建、保存與打開網(wǎng)頁2．保存網(wǎng)頁對于尚未保存的網(wǎng)頁文件，選擇【文件】/【保存】菜單命令或【文件】/【另存為】菜單命令。對于已經(jīng)保存過的網(wǎng)頁文件，選擇【文件】/【保存】菜單命令將直接進行保存，選擇【文件】/【另存為】菜單命令。選擇【文件】/【保存全部】菜單命令，將保存所有打開的文件，如果其中有尚未保存的文件，將打開“另存為”對話框。二、相關(guān)知識（一）新建、保存與打開網(wǎng)頁3．打開網(wǎng)頁選擇【文件】/【打開】菜單命令，打開“打開”對話框，在其中選擇要打開的網(wǎng)頁文件，然后單擊按鈕可打開該網(wǎng)頁文件。選擇【文件】/【打開最近的文件】菜單命令，在彈出的子菜單中將顯示最近打開過的網(wǎng)頁文件，選擇相應的命令即可打開該網(wǎng)頁文件，如圖所示。打開最近的文件二、相關(guān)知識（二）設(shè)置網(wǎng)頁屬性通過CSS樣式來設(shè)置網(wǎng)頁的外觀。1．外觀（CSS）“外觀（CSS）”選項卡二、相關(guān)知識（二）設(shè)置網(wǎng)頁屬性在“分類”列表框中選擇“外觀（HTML）”選項，可通過<body>標簽的屬性來設(shè)置網(wǎng)頁的外觀。2．設(shè)置“外觀（HTML）”屬性“外觀（HTML）”屬性二、相關(guān)知識（二）設(shè)置網(wǎng)頁屬性在“分類”列表框中選擇“鏈接（CSS）”選項，可通過CSS樣式來設(shè)置網(wǎng)頁的超鏈接屬性。3．設(shè)置“鏈接（CSS）”屬性“鏈接（CSS）”屬性二、相關(guān)知識（二）設(shè)置網(wǎng)頁屬性在“分類”列表框中選擇“標題（CSS）”選項，可設(shè)置1~6級標題文本的字體、樣式、字號及顏色。4．設(shè)置“標題（CSS）”屬性“標題（CSS）”屬性二、相關(guān)知識（二）設(shè)置網(wǎng)頁屬性在“分類”列表框中選擇“標題/編碼”選項，可設(shè)置頁面的標題和編碼等。5．設(shè)置“標題/編碼”屬性“標題/編碼”屬性二、相關(guān)知識（二）設(shè)置網(wǎng)頁屬性在“分類”列表框中選擇“跟蹤圖像”選項，單擊“瀏覽”按鈕可以選擇一張圖片作為跟蹤圖像。6．設(shè)置“跟蹤圖像”屬性“標題/編碼”屬性二、相關(guān)知識（三）設(shè)置網(wǎng)頁關(guān)鍵字和描述網(wǎng)頁關(guān)鍵字是根據(jù)網(wǎng)頁類容提煉出來的一些詞語或短語，搜索引擎在收集網(wǎng)頁時會讀取網(wǎng)頁的關(guān)鍵字信息。設(shè)置網(wǎng)頁關(guān)鍵字的方法為：選擇【插入】/【HTML】/【Keywords】菜單命令，打開“Keywords”對話框，在“關(guān)鍵字”文本框中輸入關(guān)鍵字，多個關(guān)鍵字使用英文逗號隔開，再單擊“確定”按鈕1．設(shè)置網(wǎng)頁關(guān)鍵字設(shè)置網(wǎng)頁關(guān)鍵字二、相關(guān)知識（三）設(shè)置網(wǎng)頁關(guān)鍵字和描述網(wǎng)頁描述是一段介紹網(wǎng)頁內(nèi)容的文本，它也會被搜索引擎讀取。設(shè)置網(wǎng)頁描述的方法為：選擇【插入】/【HTML】/【說明】菜單命令，打開“說明”對話框，在“說明”文本框中輸入相關(guān)內(nèi)容，再單擊“確定”按鈕。2．設(shè)置網(wǎng)頁描述設(shè)置網(wǎng)頁描述二、相關(guān)知識（四）輸入文本文本是網(wǎng)頁中較常見的元素。在Dreamweaver中輸入文本的方法有很多種，可以直接輸入或復制文本等。復制文本直接輸入文本二、相關(guān)知識（五）設(shè)置文本格式在Dreamweaver中設(shè)置文本格式主要通過“屬性”面板。選擇【窗口】/【屬性】菜單命令或按【Ctrl+F3】組合鍵可打開“屬性”面板。“屬性”面板分為“HTML”“CSS”兩種模式，單擊“HTML”“按鈕可切換到“HTML”模式，單擊“CSS”按鈕可切換到“CSS”模式。復制文本直接輸入文本“屬性”面板二、相關(guān)知識（六）插入列表列表是指具有并列關(guān)系或先后順序的若干段落，在DreamweaverCC中可以插入多種類型的列表，其中較為常用的有無序列表和有序列表兩種。復制文本無序列表也稱項目列表，各列表項之間沒有明顯的先后順序，無序列表前一般用圓點、圓形等特殊符號作為項目符號。無序列表有序列表有序列表也稱編號列表，各列表項之間有明顯的先后順序，有序列表前有由阿拉伯數(shù)字、英文字母或羅馬數(shù)字等所構(gòu)成的編號。二、相關(guān)知識（七）插入特殊字符有時在網(wǎng)頁中需要插入一些特殊符號，如英鎊符號、注冊商標符號、版權(quán)符號等。如果要插入其他字符，可以選擇“其他字符”選項，在打開的“插入其他字符”對話框中可以選擇更多特殊字符。插入特殊字符“插入其他字符”對話框二、相關(guān)知識（八）插入日期在Dreamweaver中可直接插入當前日期，方法為：在“插入”面板中單擊“日期”按鈕，打開“插入日期”對話框，在其中可以設(shè)置星期格式、日期格式和時間格式?！安迦肴掌凇睂υ捒蚨?、相關(guān)知識（九）插入水平線在網(wǎng)頁中，水平線是非常有用的元素，在組織信息時，可以使用一條或多條水平線分隔文本和對象，使段落區(qū)分更加明顯，讓網(wǎng)頁更有層次感。插入水平線的方法為：將鼠標指針定位到插入點，在“插入”面板中單擊“水平線”按鈕。三、任務實施下面新建“佳美馨裝飾”網(wǎng)站的“網(wǎng)站簡介”網(wǎng)頁并設(shè)置網(wǎng)頁屬性，具體操作如下。（一）新建網(wǎng)頁并設(shè)置網(wǎng)頁屬性新建文檔管理字體設(shè)置字體三、任務實施（一）新建網(wǎng)頁并設(shè)置網(wǎng)頁屬性設(shè)置外觀屬性設(shè)置標題屬性保存文檔三、任務實施下面在網(wǎng)頁中添加文本并設(shè)置格式，具體操作如下。（二）輸入文本并設(shè)置格式選擇性粘貼插入文檔中的文本三、任務實施（二）輸入文本并設(shè)置格式換行文本分段文本插入空格三、任務實施（二）輸入文本并設(shè)置格式粘貼空格設(shè)置標題格式設(shè)置無序列表三、任務實施（二）輸入文本并設(shè)置格式設(shè)置文本格式設(shè)置其他欄目格式三、任務實施下面在網(wǎng)頁中插入特殊字符、日期和水平線，具體操作如下。（三）插入特殊字符、日期和水平線插入水平線“插入日期”對話框三、任務實施（三）插入特殊字符、日期和水平線設(shè)置日期格式插入版權(quán)符號設(shè)置段落格式目錄Contents任務一制作“佳美馨裝飾——網(wǎng)站簡介”網(wǎng)頁任務二制作“佳美馨裝飾——會員列表”網(wǎng)頁實訓一制作“中國皮影——皮影戲”網(wǎng)頁實訓二制作“中國皮影——皮影起源傳說”網(wǎng)頁在制作本網(wǎng)頁時，首先使用表格對網(wǎng)頁進行布局，并通過不同的背景顏色區(qū)分出網(wǎng)頁頭部、尾部和主體部分。其中主體部分又被分為左右兩個區(qū)域，在右側(cè)區(qū)域中插入一個普通表格，為表頭行（第1行單元格）設(shè)置醒目的背景顏色，并加粗、加大文本的字體，使其能夠突出顯示。一、任務描述（一）任務背景（1）能夠制作表格并在表格中輸入內(nèi)容（2）掌握選擇表格和單元格的各種方法。（3）掌握設(shè)置表格和單元格格式的各種方法。（4）掌握拆分和合并單元格的各種方法。（5）掌握添加和刪除表格行或列的各種方法。（二）任務目標二、相關(guān)知識（一）插入表格在Dreamweaver中插入表格的方法為：將插入點定位到要插入表格的位置，選擇【插入】/【Table】菜單命令，或在“插入”面板中單擊“Table”按鈕，打開“Table”對話框，在其中設(shè)置相應的參數(shù)后，單擊“確定”按鈕。插入表格二、相關(guān)知識（二）選擇表格1．選擇整個表格1．右鍵菜單選擇3．使用菜單命令選擇5．在“DOM”面板中選擇7．在“代碼”視圖中選擇6．在“標簽”欄中選擇4．使用按鈕選擇2．直接選擇二、相關(guān)知識（二）選擇表格2．選擇行在Dreamweaver中選擇表格的行的方法主要有以下3種。通過鼠標單擊選擇行在“標簽”欄中選擇行在“代碼”視圖中選擇行二、相關(guān)知識（二）選擇表格3．選擇列在Dreamweaver中選擇表格的行的方法主要有以下幾種。通過鼠標單擊選擇列使用按鈕選擇列二、相關(guān)知識（二）選擇表格4．選擇單元格選擇單個單元格只需直接將插入點定位到需要選擇的單元格。選擇單個單元格選擇多個不連續(xù)的單元格選擇多個連續(xù)的單元格直接使用鼠標在表格中拖曳選擇連續(xù)的多個單元格，或選擇一個單元格后，按住【Shift】鍵不放，單擊連續(xù)的最后一個單元格。按住【Ctrl】鍵的同時，使用鼠標單擊需要選擇的單元格。二、相關(guān)知識（三）在單元格中輸入內(nèi)容表格創(chuàng)建完成后，即可在單元格中添加文本、圖像、動畫等內(nèi)容，方法為：將插入點定位到需要添加內(nèi)容的單元格中，然后輸入文本或插入圖像等網(wǎng)頁元素。二、相關(guān)知識（四）設(shè)置表格屬性通過表格“屬性”面板可設(shè)置表格的屬性，方法為：先選擇整個表格，然后在“屬性”面板中設(shè)置相關(guān)參數(shù)。二、相關(guān)知識（五）設(shè)置單元格屬性通過單元格“屬性”面板可以設(shè)置單元格的屬性，方法為：先選擇要設(shè)置屬性的單元格，然后在“屬性”面板中設(shè)置相關(guān)參數(shù)。單元格“屬性”面板的上半部分和文本“屬性”面板相同，用于設(shè)置單元格中文本的格式，下半部分用于設(shè)置單元格的格式。二、相關(guān)知識（六）合并和拆分單元格1．合并單元格合并單元格的方法有以下3種方法：使用菜單命令選擇要合并的單元格區(qū)域選擇【編輯】/【表格】/【合并單元格】菜單命令。使用右鍵菜單選擇要合并的單元格區(qū)域并單擊鼠標右鍵，在彈出的快捷菜單選擇【表格】/【合并單元格】命令。使用“屬性”面板選擇要合并的單元格區(qū)域，在“屬性”面板中單擊“合并所選單元格”按鈕。二、相關(guān)知識（六）合并和拆分單元格2．拆分單元格拆分單元格可以將一個單元格拆分為多個單元格。選擇要拆分的單元格，然后選擇【編輯】/【表格】/【拆分單元格】菜單命令或單擊鼠標右鍵，在彈出的快捷菜單中選擇【表格】/【拆分單元格】命令，或在“屬性”面板中單擊“拆分單元格為行或列”按鈕。拆分單元格二、相關(guān)知識（七）添加和刪除表格行或列1．添加行或列添加行或列的方法主要有以下3種方法：使用菜單命令選擇【編輯】/【表格】/【插入行】或【插入列】菜單命令。使用右鍵菜單單擊鼠標右鍵，在彈出的快捷菜單中選擇【表格】/【插入行】或【插入列】命令。使用對話框選擇【編輯】/【表格】/【插入行或列】菜單命令，或單擊鼠標右鍵，選擇【表格】/【插入行或列】命令.二、相關(guān)知識（七）添加和刪除表格行或列2．刪除行或列表格中不能刪除單獨的單元格，但可以刪除整行或整列，方法有以下兩種。使用菜單命令將插入點定位到要刪除的行或列所在的單元格，選擇【編輯】/【表格】/【刪除行】或【刪除列】菜單命令。使用右鍵菜單將插入點定位到要刪除的行或列所在的單元格，單擊鼠標右鍵，在彈出的快捷菜單中選擇【表格】/【刪除行】或【刪除列】命令。三、任務實施下面插入一個3行2列的無邊框表格對網(wǎng)頁進行布局，并根據(jù)需要合并單元格以及設(shè)置表格和單元格的格式，具體操作如下。（一）插入表格并設(shè)置表格屬性插入表格設(shè)置單元格的寬度和高度三、任務實施（一）插入表格并設(shè)置表格屬性設(shè)置第1行單元格的背景顏色合并第3行單元格并設(shè)置背景顏色三、任務實施在各個單元格中輸入相應的內(nèi)容，并設(shè)置格式。（二）輸入表格內(nèi)容輸入“JMX”文本輸入“佳美馨”文本輸入文本并設(shè)置對齊方式輸入文本三、任務實施（二）輸入表格內(nèi)容修改文本顏色輸入版權(quán)信息輸入其他文本三、任務實施下面從“會員.txt”文件導入表格數(shù)據(jù)，然后設(shè)置表格首行單元格格式和表格的邊框顏色，具體操作如下。（三）導入表格數(shù)據(jù)并設(shè)置表格屬性導入表格式數(shù)據(jù)三、任務實施（三）導入表格數(shù)據(jù)并設(shè)置表格屬性設(shè)置首行單元格格式設(shè)置表格邊框顏色目錄Contents任務一制作“佳美馨裝飾——網(wǎng)站簡介”網(wǎng)頁任務二制作“佳美馨裝飾——會員列表”網(wǎng)頁實訓一制作“中國皮影——皮影戲”網(wǎng)頁實訓二制作“中國皮影——皮影起源傳說”網(wǎng)頁本實訓的要求是制作“中國皮影——皮影戲”網(wǎng)頁，在其中將

溫馨提示

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

評論

0/150

提交評論