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

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

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

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

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

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

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

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

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

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

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