1-3教學(xué)單元設(shè)計(網(wǎng)站首頁頁面制作)ppt課件(全)

科創(chuàng)資訊網(wǎng)站首頁設(shè)計——網(wǎng)站首頁頁面制作

任務(wù)編號：1-32021/10/10星期日1地點：網(wǎng)影科技有限公司網(wǎng)站開發(fā)部時間：上午8：30主持：網(wǎng)站開發(fā)部項目總監(jiān)參加人員：網(wǎng)站開發(fā)部各項目組經(jīng)理及成員會議議題：如何在Dreamweaver中制作科創(chuàng)資訊網(wǎng)站的首面創(chuàng)建情境網(wǎng)站開發(fā)部每周例會2021/10/10星期日2一、網(wǎng)站結(jié)構(gòu)架設(shè)遠端站點：

在Internet上訪問的各種站點，站點文件都儲存在Internet服務(wù)器上。本地站點：

在本地磁盤上建立的站點。定義本地站點，讓用戶在本地計算機上定義一個模擬服務(wù)器存取方式的站點，以便讓設(shè)計和管理網(wǎng)頁的工作在網(wǎng)站環(huán)境中進行。1、站點的概念2021/10/10星期日3一、網(wǎng)站結(jié)構(gòu)架設(shè)規(guī)范網(wǎng)站的管理，網(wǎng)站的命名規(guī)范網(wǎng)站管理解決方法1.網(wǎng)站用到的網(wǎng)頁素材需合理放置在網(wǎng)站根目錄文件夾下2.網(wǎng)頁命名“顧名思義“原則等基本規(guī)范

2、站點的命名規(guī)范2021/10/10星期日4一、網(wǎng)站結(jié)構(gòu)架設(shè)3、以“家居江南網(wǎng)”為例，演示創(chuàng)建本地站點的方法及步驟添加文件夾注意：在為文件夾命名時，最好用英文或數(shù)字，可創(chuàng)建嵌套文件夾。添加網(wǎng)頁文件注意：1）不能創(chuàng)建嵌套文件2）命名時要用英文或數(shù)字，名稱的后綴為“*.htm”3）為主頁文件命名時通常用Index.htm或Defaut.htm4）文件夾命名一般采用英文，長度一般不超過20個字符，命名采用小寫字母。除特殊情況才使用中文拼音，一些常見的文件夾命名如：images(存放圖形文件)，flash（存放Flash文件），style(存放CSS文件)，scripts（存放Javascript腳本），inc(存放include文件)，link（存放友情鏈接），media(存放多媒體文件)等。5）文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合。圖片的命名原則名稱分為頭尾兩部分，用下劃線隔開，頭部分表示此圖片的大類性質(zhì)例如廣告、標志、菜單、按鈕等等。放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名：banner標志性的圖片取名為：logo在頁面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨閎utton在頁面上某一個位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶簃enu裝飾用的照片我們?nèi)∶簆ic不帶鏈接表示標題的圖片我們?nèi)∶簍itle2021/10/10星期日5一、網(wǎng)站結(jié)構(gòu)架設(shè)3、以“家居江南網(wǎng)”為例，演示創(chuàng)建本地站點的方法及步驟4、學(xué)生練習創(chuàng)建“家居江南”網(wǎng)站的本地站點，嘗試進行修改文件名稱、移動文件及刪除文件等操作5、請1-2個學(xué)生上臺演示，其它同學(xué)點評并記錄過程2021/10/10星期日6二、網(wǎng)頁整體頁面格式設(shè)置1、居中放置頁面2、設(shè)置頁面屬性1）設(shè)置背景圖像：修改->頁面屬性->外觀。2）設(shè)置鏈接屬性：修改->頁面屬性->鏈接，分別設(shè)置各個狀態(tài)鏈接的顏色，接著設(shè)置“下劃線樣式”為“僅在變換圖像時顯示下劃線”。3）設(shè)置標題／編碼屬性：修改->頁面屬性->標題／編碼設(shè)置標題為“家居江南網(wǎng)”、編碼為“簡體中文(GB2312)”，如果網(wǎng)頁需要提供港臺用戶瀏覽，則可以設(shè)置“繁體中文(big5)”編碼。3、學(xué)生完成“家居江南”首頁頁面的整體頁面格式設(shè)置4、檢查學(xué)生完成情況2021/10/10星期日7三、添加網(wǎng)頁文本1、給出一個空頁，請學(xué)生嘗試給頁面添加文本添加網(wǎng)頁文本的方法有兩種：（1）直接輸入文本按Enter鍵可以創(chuàng)建一個新的段落<p>……</p>按Shift+Enter可以換行但不分段<br/>（2）拷貝文本可以從其他應(yīng)用程序中拷貝文本粘帖到網(wǎng)頁文檔中，但原來的文本格式消失，而換行符保留。注意：HTML文件只允許字符之間包含一個空格。如果要在文檔中添加其他的空格，需要將輸入法切換到中文全角的輸入狀態(tài)。2021/10/10星期日8三、添加網(wǎng)頁文本2、文本屬性的含義（1）設(shè)置文本字體，如：font-family:"宋體";（2）設(shè)置文本大小，如：font-size:12px;（3）設(shè)置文本顏色，如：color:#0000FF;（藍色）（4）設(shè)置文本加粗，如：font-weight:bold;（5）設(shè)置文本傾斜，如：font-style:italic;以上設(shè)置均會自動放置在樣式表中：.STYLE1{ font-family:"宋體"; font-size:12px; color:#0000FF; font-weight:bold; font-style:italic;}2021/10/10星期日9四、設(shè)置段落格式添加1、請學(xué)生嘗試設(shè)置文本居中對齊、添加項目符號、設(shè)置首行縮進2個字符等效果2、上臺演示制作效果，其它同學(xué)點評3、教師講解要點（1）應(yīng)用段落格式：<p>……</p>（2）設(shè)置文本對齊方式align="left"（左對齊）；align="center"（居中對齊）；align="right"（右對齊）；align="justify"（兩端對齊）3）設(shè)置段落縮進<blockquote><p>用戶</p></blockquote> font-style:italic;

2021/10/10星期日10五、項目列表與項目編號的創(chuàng)建教師講解：1、設(shè)置為文本添加項目列表（也稱無序列表），如：<ul><li>字體</li><li>大小</li><li>顏色</li></ul>連續(xù)敲擊兩次Enter鍵結(jié)束列表的輸入2、設(shè)置為文本添加項目編號（也稱有序列表），如：<ol><li>字體</li><li>大小<</li><li>顏色</li></ol>連續(xù)敲擊兩次Enter鍵結(jié)束列表的輸入3、嵌套項目列表的創(chuàng)建2021/10/10星期日11六、其它符號同學(xué)們自己嘗試完成：插入日期、插入水平線、插入特殊符號等操作2021/10/10星期日12七、家居江南網(wǎng)首頁制作1、請同學(xué)嘗試為“家居江南網(wǎng)”的index.htm頁面添加頁面文本2、請1-2位同學(xué)上臺展示介紹所做網(wǎng)頁，其它人點評3、同學(xué)們跟著老師做下面操作，初步體驗表格布局做網(wǎng)頁的快樂1）插入6×1表格：設(shè)置背景顏色：#006633，居中對齊<tablewidth="787"border="0"align="center"cellpadding="0"cellspacing="0"bgcolor="#006633"><tr><td> </td></tr>……</table>注：設(shè)置表格寬度為787（logo.jpg的寬度211+titnew.swf的寬度576）2021/10/10星期日13七、家居江南網(wǎng)首頁制作4、請同學(xué)嘗試進行文字格式設(shè)置第一行居中，黑體12號字；第二、三段首行縮進2個字符；為按序排列文字添加項目符號。2）第一行空行，留作間隔，設(shè)置高度為53）第二行插入2×1表格，左邊插入logo.jpg，并設(shè)置單元格寬度為211，右邊插入titnew.swf，寬度缺省；4）第三行空作為間隔，設(shè)置高度為55）第四行插入1×4表格，作為導(dǎo)航條，第一單元格輸入“首頁”，寬度為411；第二、第三單元格輸入“戶型展示”、“園林文化”，寬度為120；第四單元輸入“緣起”，寬度缺省。6）第五行插入1×2表格，第一單元格設(shè)置寬度為20%，第二單元格插入2×1表格，上面插入nm.jpg，下面輸入首頁文字，見素材“jiaju.txt”7）第六行輸入版本號5、請1-2位同學(xué)上臺演示，其它同學(xué)點評3、同學(xué)們跟著老師做下面操作，初步體驗表格布局做網(wǎng)頁的快樂2021/10/10星期日14八、用樣式表進行文本格式化CSS全稱CascadingStylesSheet，譯為層疊樣式表，是由W3C（WorldWideWebConsortium）組織所擬定的，主要用來指定文字、段落、版面等網(wǎng)頁素材的格式，可翻譯為“層疊樣式表”或“級聯(lián)樣式表”。樣式表是DHTML的一部分，使得可以使用腳本程序調(diào)用和改變對象屬性，使網(wǎng)頁中的對象產(chǎn)生動態(tài)的效果。1、什么是樣式表樣式表一般可以實現(xiàn)下列功能：1、更加靈活地控制網(wǎng)頁中文字的字體、顏色、大小間距等；2、靈活地設(shè)置一個文本塊的行高縮進并可以加入三維效果的邊框；3、可以為網(wǎng)頁中各種元素設(shè)置各種濾鏡，從而產(chǎn)生諸如陰影、模糊和透明等只有在一些圖象處理軟件中才能實現(xiàn)的效果；4、與腳本語言相結(jié)合，使網(wǎng)頁中元素產(chǎn)生各種動態(tài)效果；5、由于是直接的html格式代碼，網(wǎng)頁打開的速度快。2021/10/10星期日15八、用樣式表進行文本格式化CSS全稱CascadingStylesSheet，譯為層疊樣式表，是由W3C（WorldWideWebConsortium）組織所擬定的，主要用來指定文字、段落、版面等網(wǎng)頁素材的格式，可翻譯為“層疊樣式表”或“級聯(lián)樣式表”。樣式表是DHTML的一部分，使得可以使用腳本程序調(diào)用和改變對象屬性，使網(wǎng)頁中的對象產(chǎn)生動態(tài)的效果。1、什么是樣式表樣式表一般可以實現(xiàn)下列功能：1、更加靈活地控制網(wǎng)頁中文字的字體、顏色、大小間距等；2、靈活地設(shè)置一個文本塊的行高縮進并可以加入三維效果的邊框；3、可以為網(wǎng)頁中各種元素設(shè)置各種濾鏡，從而產(chǎn)生諸如陰影、模糊和透明等只有在一些圖象處理軟件中才能實現(xiàn)的效果；4、與腳本語言相結(jié)合，使網(wǎng)頁中元素產(chǎn)生各種動態(tài)效果；5、由于是直接的html格式代碼，網(wǎng)頁打開的速度快。2021/10/10星期日16八、用樣式表進行文本格式化2、建立樣式表的方法及步驟2021/10/10星期日173、為家居江南網(wǎng)設(shè)置.bg,.title,.text_body,.list樣式，并為文本運用樣式八、用樣式表進行文本格式化2021/10/10星期日18八、用樣式表進行文本格式化4.1定義類型屬性打開[StyleDefinitionfor](樣式定義)對話框，默認狀態(tài)打開的便是[Type](類型)面板，如圖6-3所示。下面是該面板中各項參數(shù)的設(shè)置?！鬧Font](字體)：設(shè)置當前樣式使用的字體。◆[Size](大小)：設(shè)置當前樣式使用的文字大小。在此選項中可以通過選擇數(shù)字和度量單位選擇特定的字體大小，也可以選擇相對字體大小?！鬧Style](樣式)：將“正?！薄ⅰ靶斌w，，、或‘‘偏斜體’’指定為字體樣式，默認設(shè)置是“正?！??！鬧Line](行高)：設(shè)置文本所在行的高度。選擇“正?！保詣佑嬎阕煮w大小的行高；選擇“值”，可以輸入一個確切的值并選擇一種度量單位?！鬧Weightl(粗細)：對字體應(yīng)用特定或相對的粗體量?！罢！扔?00，“粗體”等于700?！鬧Variant](變量)：設(shè)置文本的小型大寫字母變量。Dreamweaver不在“文檔”窗口中顯示該屬性。IntemetExplorer支持該屬性，但Navigator不支持。◆[Case](大小寫)：將選定內(nèi)容中的每個單詞的首字母大寫或?qū)⑽谋驹O(shè)置為全部大寫或小寫?！鬧Color](顏色)：設(shè)置文本顏色?！?Decoration](修飾)：該選項提供了五種字體的格式，分別是underline(下劃線)，overline(上劃線)、line-through(刪除線)、blank(閃爍)和none(無格式)。4、各屬性的含義2021/10/10星期日19八、用樣式表進行文本格式化4.2定義背景屬性在[StyleDefinitionfor](樣式定義)對話框的分類選項中選擇[Background](背景)選項，在右側(cè)將出現(xiàn)[Background](背景)的相關(guān)設(shè)置。使用[Background](背景)選項可以定義CSS樣式的背景屬性，并將其應(yīng)用到網(wǎng)頁中。◆[Background](背景顏色)：設(shè)置頁面元素的背景顏色?！鬧Backgroundlmage](背景圖像)：設(shè)置頁面元素的背景圖像?！鬧Repeat](重復(fù))：用于設(shè)定是否允許背景圖像重復(fù)，分為no-repeat(不重復(fù))、repeat(重復(fù))、repeat-x(橫向重復(fù))和repeat-y(縱向重復(fù))?！安恢貜?fù)”設(shè)置背景圖像不平鋪顯示，即只顯示單個的圖像；◆[Attachment](附件)：確定背景圖像是固定在它的原始位置還是隨內(nèi)容一起滾動。[Attachment](附件)中有兩個選項，即fixed(固定)和scroll(滾動)?！肮潭ā痹O(shè)置背景圖像固定在原始位置不動，“滾動”設(shè)置背景圖像隨內(nèi)容一起滾動?！鬧Horizontal](水平位置)：該下拉列表用于指定背景圖像相對于應(yīng)用樣式的元素的水平位置，分為left(左對齊)、center(居中對齊)、right(右對齊)和Value(值)?！白髮R”用于設(shè)置背景圖像相對于元素左對齊；“居中對齊”用于設(shè)置背景圖像相對于元素垂直中心線對齊；“右對齊”用于設(shè)置背景圖像相對于元素右對齊；“值”用于設(shè)置背景圖像相對于元素為一個固定的數(shù)值?！鬧Vertical](垂直位置)：該下拉列表用于指定背景圖像相對于應(yīng)用樣式的元素的水平位置，分為top(頂部)、center(居中)、bottom(底部)和Value(值)?！绊敳俊痹O(shè)置背景圖像相對于元素頂邊對齊；“居中”設(shè)置背景圖像相對于元素水平中心線對齊；“底部”設(shè)置背景圖像相對于元素底邊對齊；“值”設(shè)置背景圖像相對于元素為一個固定的數(shù)值。4、各屬性的含義2021/10/10星期日20八、用樣式表進行文本格式化4.2定義背景屬性4、各屬性的含義2021/10/10星期日21八、用樣式表進行文本格式化4.3定義區(qū)塊屬性4、各屬性的含義在[StyleDef'mitionfor](樣式定義)對話框中的分類選項中選擇[Block](區(qū)塊)選項，右側(cè)將出現(xiàn)[Block](區(qū)塊)的相關(guān)設(shè)置。使用[Block](區(qū)塊)選項可以定義標簽和屬性的間距和對齊設(shè)置?！鬧WordSpacing](單詞間距)：設(shè)置單詞之間的間距。如果要設(shè)置特定的值，在彈出的菜單中選擇“值”，然后輸入一個數(shù)值。在第二個彈出菜單中選擇相應(yīng)的度量單位(如選擇像素、點數(shù)等)。◆[LetterSpacing](字母間距)：增加或減少字母或字符的間距。◆[VerticalAlignment](垂直對齊)：指定它應(yīng)用于元素的垂直對齊方式。2021/10/10星期日22八、用樣式表進行文本格式化4、各屬性的含義4.4定義鏈接文字的樣式接下來我們再設(shè)計一個樣式表，以控制超鏈接的形式、顏色變化,此優(yōu)先級比頁面整體鏈接設(shè)置的要高。要達到的目標為：未被點擊時超鏈接文字無下劃線，顯示為藍色；當鼠標在鏈接上時有下劃線，鏈接文字顯示為紅色；當點擊鏈接后，鏈接無下劃線，顯示為綠色。

在新建樣式表對話框中選擇“UseCSSSelector”(高級)，點下面的下拉列表框，可以看到里面有四個選項：a:link指正常的未被訪問過的鏈接；a:active指正在點鏈接；a:hover指鼠標在鏈接上；a:visited指已經(jīng)訪問過的鏈接；2021/10/10星期日23八、用樣式表進行文本格式化4、各屬性的含義4.4定義鏈接文字的樣式選“a:link”，彈出對話框，定義正常的未被訪問過的鏈接形式。在Color框中選擇藍色，在“Decoration”（修飾效果）欄中，有五個選項：underline參數(shù)表示超鏈接的文字有下劃線；*overline則給超鏈接文字加上劃線；line-through給超鏈接文字加上刪除線；*blink則使文字閃爍。none參數(shù)表示超鏈接文字不顯示下劃線；我們勾選“None”項，表示讓超鏈接的下劃線消失。單擊“OK”，a:link設(shè)計完畢。用同樣方法，我們可以設(shè)計a:hover、a:visited等的形式。2021/10/10星期日24八、用樣式表進行文本格式化5建立并使用外部樣式表只要將定義好的樣式表輸出成外部就可以了。選中定義好的樣式表后，然后選擇File下的Export中的ExportCSSStyle…，輸入名稱保存。如果要使用這個外部樣式表，可以點擊的Link…按鈕，彈出對話框窗口如右下圖其中：1．File/URL中可輸入外部樣式表的路徑，或用Browse…在文件列表中找到.css文件。2．AddAs加入方式可以是外部連接Link方式，或直接導(dǎo)入Import方式。2021/10/10星期日25九、用表格布局法制作網(wǎng)頁1、學(xué)生展示制作的“家居江南網(wǎng)”首頁2021/10/10星期日26九、用表格布局法制作網(wǎng)頁整個盒模型在頁面中所占的寬度：由左邊界+左邊框+左填充+內(nèi)容+右填充+右邊框+右邊界組成css樣式中width所定義的寬度僅僅是內(nèi)容部分的寬度

2、講解網(wǎng)頁布局中盒模型的含義2021/10/10星期日27九、用表格布局法制作網(wǎng)頁表格描述<table>定義表格<caption>定義表格標題。<th>定義表格的表頭。<tr>定義表格的行。<td>定義表格單元。<thead>定義表格的頁眉。<tbody>定義表格的主體。<tfoot>定義表格的頁腳。<col>定義用于表格列的屬性。<colgroup>定義表格列的組。3、講解網(wǎng)頁布局中表格屬性的含義2021/10/10星期日28九、用表格布局法制作網(wǎng)頁4、學(xué)生展示制作的“科創(chuàng)資訊網(wǎng)”2021/10/10星期日29十、插入圖像1）關(guān)于圖像格式GIF格式(圖形交換格式)：最多使用256色，最適合顯示色調(diào)不連續(xù)急迫具有大面積單一顏色的圖象。JPEG格式(聯(lián)合圖像專家組標準)：多用來表現(xiàn)網(wǎng)頁中色彩較豐富，含有大量過渡色的部分，不過文件較大。PNG格式(可移植網(wǎng)絡(luò)圖形)：是FireworksMX的固有文件格式。2021/10/10星期日30十、插入圖像3）設(shè)置圖像格式注意：在DreamweaverMX中改變圖像的大小會使圖像的質(zhì)量下降，因此盡量不要在DreamweaverMX中改變圖像的大小。（1）背景圖案的設(shè)置： 格式：<bodybackground=”URL”> 路徑參考超鏈接的基本方法（2）將圖片插入到網(wǎng)頁中去 格式:<imgsrc="URL"> 功能:將圖片插入到網(wǎng)頁中去,單一標簽

<img>下的屬性： 屬性名稱 屬性值 說明 src URL 圖片的路徑

圖片的注解： 屬性名稱 屬性值 說明 alt 字符串 給圖片做注解

圖象大小的設(shè)置： 屬性名稱 屬性值 說明 width 像素 絕對設(shè)置,寬 百分比 相對設(shè)置,寬 height