企業(yè)宣傳網(wǎng)站設計實驗實例_第1頁
企業(yè)宣傳網(wǎng)站設計實驗實例_第2頁
企業(yè)宣傳網(wǎng)站設計實驗實例_第3頁
企業(yè)宣傳網(wǎng)站設計實驗實例_第4頁
企業(yè)宣傳網(wǎng)站設計實驗實例_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、實驗實例：企業(yè)宣傳設計一、引導頁結構制作1、在“Dreamweaver MX 2004”快捷面板中選擇“創(chuàng)建新項目>HTML”選項，創(chuàng)建新HTML 文檔單擊屬性面板中的“頁面屬性”按鈕，在彈出的“頁面屬性”對話框中設置字體大小為9pt，文本顏色為白色（#FFFFFF），背景顏色為黑色（#000000），背景圖像為bg.gif（圖像名稱前需要加入路徑），左、右、上、下邊距均為0 像素；2、在“分類”區(qū)域選擇“”選項，右側則顯示相關選項，在其中設置顏色和已訪問為白色（#FFFFFF），變換圖像為黃色（#FFFF00），設置下劃線樣式為“僅在變換圖像時顯示下劃線”；3、設置完成單擊“確定”按鈕

2、，按下“文檔”面板上的“拆分”按鈕，在代碼顯示窗口可以看到剛才在“頁面屬性”面板中的設置項，已經(jīng)轉換為CSS 樣式表顯示在源代碼中，代碼顯示為：<style type="text/css"><!-body,td,th font-size: 9pt;color: #FFFFFF;body background-color: #000000;background-image: url(images/bg.gif);margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;a:li

3、nk color: #FFFFFF;text-decoration: none;a:visited text-decoration: none;color: #FFFFFF;a:hover text-decoration: underline;color: #FFFF00;a:active text-decoration: none;-></style>4、在“文檔”面板的標題文本框中輸入文字“悟嘉琥珀”，按Enter 鍵后標題會自動顯示在標題欄；5、執(zhí)行“文件>保存”命令，保存文件為index.htm；6、根據(jù)網(wǎng)頁的容，使用表格來布局網(wǎng)頁。單擊“常用”面板上“表格”按

4、鈕，插入7 行1 列，寬度為100%，邊框粗細為0 像素，單元格邊距和單元格間距均為0 的表格，設置完成后單擊“確定”按鈕，在網(wǎng)頁中插入表格；7、在第1 行單元格插入1 行2 列，寬度為300 像素，邊框粗細為0 的嵌套表格。在嵌套表格的左側單元格單擊鼠標左鍵，使光標定位單元格。單擊“常用”面板上的“圖像”按鈕，在“選擇圖像源文件”對話框中“查找圍”下拉列表下選擇根目錄下的images 文件夾，并選中圖像“coffee.gif”單擊“確定”按鈕插入圖像。在右側單元格輸入英文廣告語“Enjoy life, enjoy yourself”；8、把光標定位在第2 行單元格，在單元格屬性面板中設置單元

5、格容居中對齊，在“垂直”列表中選擇“底部”選項，使單元格容位于單元格底部，高為360 像素；9、設置完單元格屬性，單擊“常用”面板上的“Flash”按鈕，在“選擇Flash文件”對話框中選擇“l(fā)ogo.swf”文件，單擊“確定”按鈕插入Flash 制作的標識文件；10、空出第3 行，把光標定位在第4 行單元格，設置單元格居中對齊、底部垂直、高為50，在單元格插入圖像“woja.gif”。11、把光標定位在第5 行單元格，設置單元格居中對齊、底部垂直。按Shift+Enter鍵回行，再按步驟11 插入Flash 文件“bottom.swf”；12、選中第6 行單元格，在屬性面板中選擇“拆分單元格

6、為行或列”按鈕，在彈出的“拆分單元格”對話框中，選擇“列”單選框并在“列數(shù)”文本框中輸入3單擊“確定”按鈕把單元格分為3 列。13、同樣方法拆分第7 行單元格為3 列。選中第6 行、第7 行左側兩個單元格，單擊屬性面板中的“合并所選單元格”按鈕；14、選擇左側單元格，在屬性面板中設置寬為57%，高為130，右對齊，垂直列表選擇“頂端”。在單元格輸入文字“進入網(wǎng)頁”，在此屬性面板中的文本框輸入下級網(wǎng)頁的路徑與名稱，并以此做為的入口。雖然在制作Flash 企業(yè)標識時已做了進入下級網(wǎng)頁的，但為了使瀏覽者更容易找到入口，還需要加注一個明顯提示。15、選中第7 行中間的單元格，在屬性面板中設置寬為42%

7、，右對齊，垂直列表選擇“底部”。在單元格輸入的信息和制作單位；16、為了使網(wǎng)頁在1024×768 分辨率瀏覽網(wǎng)頁時，全屏顯示，需要再次選中表格，在屬性面板中設置表格高為100%。通常網(wǎng)頁容比較少且不能充滿一屏時則會用到高度的設置。到此，引導頁的基本結構就完成了，按Ctrl+S 保存網(wǎng)頁并按F12 在瀏覽器中瀏覽。二、引導頁鼠標跟隨效果1、單擊“文檔”面板中的“代碼”按鈕，切換到代碼視圖模式下。在<body>標簽插入如下代碼：<body onload="makesnake()" style="overflow-x: hidden; ove

8、rflow-y: hidden">2、在<body>代碼后面按Enter 鍵回車，輸入如下代碼：<STYLE>.spanstyle COLOR: #FF9966; FONT-FAMILY: 宋體; FONT-SIZE: 9pt; POSITION: absolute; TOP:-50px; VISIBILITY: visible</STYLE>可以從此段代碼中修改文本顏色（color）、字體（font-family）、字體大?。╢ont-size）等項；3、最后在<body></body>標簽的任何位置插入JavaSc

9、ript 代碼來顯示跟隨文字的容、速度等，代碼如下：<SCRIPT><!-var x,yvar step=20var flag=0var message="悟嘉琥珀美麗智慧兼得！"message=message.split("")var xpos=new Array()for (i=0;i<=message.length;i+) xposi=-50var ypos=new Array()for (i=0;i<=message.length;i+) yposi=-50function handlerMM(e)x = (docu

10、ment.layers) ? e.pageX : document.body.scrollLeft+event.clientXy = (document.layers) ? e.pageY : document.body.scrollTop+event.clientYflag=1function makesnake() if (flag=1 && document.all) for (i=message.length; i>=1; i-) xposi=xposi-1+stepyposi=yposi-1xpos0=x+stepypos0=yfor (i=0; i<me

11、ssage.length; i+) var thisspan = eval("span"+(i)+".style")thisspan.posLeft=xposithisspan.posTop=yposielse if (flag=1 && document.layers) for (i=message.length; i>=1; i-) xposi=xposi-1+stepyposi=yposi-1xpos0=x+stepypos0=yfor (i=0; i<message.length; i+) var thisspan =

12、 eval("document.span"+i)thisspan.left=xposithisspan.top=yposivar timer=setTimeout("makesnake()",30)for (i=0;i<=message.length;i+) document.write("<span id=span"+i+" class=spanstyle>")document.write(messagei)document.write("</span>")if

13、(document.layers)document.captureEvents(Event.MOUSEMOVE);document.onmousemove = handlerMM;</SCRIPT>在var message="悟嘉琥珀美麗智慧兼得！"語句引號可以輸入所需的跟隨文字，在var timer=setTimeout("makesnake()",30)語句中“30”表示跟隨文字的速度，數(shù)值越大跟隨的速度越慢，也可以試著修改此處數(shù)值查看效果有何不同。4、保存網(wǎng)頁，按F12 瀏覽網(wǎng)頁效果以上提到的三段代碼相互關聯(lián)，缺一不可，讀者需要確保將它

14、們輸入到正確的位置?！拔蚣午辍币龑ы摰酱司腿客瓿闪?。接著，開始制作的欄目頁。三、制作模板頁結構1、在制作模板頁前，需要建立站點，模板頁和其他應用模板創(chuàng)建的頁面路徑才能正確顯示。執(zhí)行“站點>管理站點”命令，打開“管理站點”對話框。單擊“新建”按鈕，在彈出的“站點定義”對話框中輸入站點名稱“悟嘉琥珀”、本地根文件夾為放置的文件夾路徑，單擊“確定”完成返回“管理站點”對話框，新建的“悟嘉琥珀”站點即會顯示在對話框中；2、單擊“完成”按鈕，站點建立完成。打開引導頁“index.htm”，執(zhí)行“文件>另存為模板”菜單命令，在“另存模板”對話框中，選擇站點“悟嘉琥珀”，另存為命名為“two

15、”，“保存”按鈕返回編輯窗口。3、按Ctrl+A 選中模板頁的所有容，按Delete 鍵刪除。由于欄目頁的背景圖像與引導頁不同，所以需要修改網(wǎng)頁背景圖像。單擊屬性面板中的“頁面屬性”按鈕，在“頁面屬性”對話框中“背景圖像”文本框輸入欄目頁的背景圖像路徑與名稱，也可以單擊“瀏覽”按鈕在“選擇圖像源文件”對話框中選擇背景圖像，其他頁面屬性不用修改，單擊“確定”按鈕完成背景圖像的設置；4、單擊“常用”面板中的“表格”按鈕，插入1 行2 列，寬為778 像素，單元格邊距和單元格間距均為0 的表格，在屬性面板中設置左側單元格寬度為759 像素，右側單元格寬度為19 像素；5、在左側單元格插入2 行2 列

16、，寬度為759 像素的嵌套表格。分別設置左、右單元格寬度為170 和589 像素。在第1 行左側單元格中插入“悟嘉琥珀”標識圖像“l(fā)ogo_two.gif”，這兩幅圖均可以從images 文件夾中找到。6、合并第2 行左右兩個單元格，在屬性面板中設置單元格高度為24，并單擊“背景”文件夾，在images 文件夾中找到圖像“bg_menu.gif”作為欄目導航的背景圖像。在單元格中輸入欄目名稱，并用豎線進行分隔；7、在導航欄表格下制作網(wǎng)頁容表格。單擊“常用”面板中的“表格”按鈕，插入3 行2 列，寬度為759 像素的表格。選中右側三個單元格，在屬性面板中單擊“合并所選單元格”按鈕。分別在屬性面板

17、中設置左側第1, 2 行單元格高度為150 和30；8、在容表格下制作聯(lián)系方式和信息表格，由于“聯(lián)系方式和信息”，通常每個頁面都是統(tǒng)一的，因此在此處可以直接完成表格容的制作，以后新建的網(wǎng)頁就都可能顯示此塊區(qū)域。在容表格下插入4 行4 列，寬度為759，單元格邊距為2 的表格，合并第1 行和第4 行的單元格。四、設置模板中可編輯區(qū)域1、本實例中頂部的“宣傳容”每個欄目頁是不同的，因此在此處也設置成可編輯區(qū)域。首先，插入1 行1 列，寬度為80%，其他設置為0 的表格，用來控制容的圍。選中插入的表格，在屬性面板中設置成“居中對齊”；2、使光標定位在表格，選擇“常用”面板下的“模板”按鈕，在其下拉列

18、表中單擊“可編輯區(qū)域”選項；3、在“新建可編輯區(qū)域”對話框中“名稱”文本框輸入文字“宣傳容”單擊“確定”按鈕完成，表格就插入了“宣傳容”可編輯區(qū)域；4、使用步驟2, 3 的方法，在容表格分別設置“欄目標題”、“欄目容”、“欄目容2”三個可編輯區(qū)域；5、執(zhí)行“文件>保存”命令，保存模板頁。“悟嘉琥珀”網(wǎng)頁模板就制作完成了。五、制作欄目頁1、執(zhí)行“文件>新建”菜單命令，在“新建文檔”對話框中，選擇“模板”標簽項，在“模板用于”區(qū)，選擇“站點悟嘉琥珀”，右側會出現(xiàn)站點的所有模板，單擊上一節(jié)中制作的模板“two”如圖4-31。在“預覽”窗口可以看到模板頁的效果，單擊“創(chuàng)建”按鈕完成網(wǎng)頁的創(chuàng)

19、建；2、執(zhí)行“文件>保存”菜單命令，保存網(wǎng)頁為“wenhua.htm”。選中“宣傳容”文字，按Delete 鍵刪除所選文字。此時，光標已定位在“宣傳容”可編輯區(qū)域，單擊“常用”面板上的“Flash”按鈕，在“選擇文件”對話框中選擇“images”文件夾下的“banner.swf”文件，單擊“確定”按鈕，將Flash 文件插入到網(wǎng)頁中。選中Flash 文件，單擊屬性面板中的“播放”按鈕，可以查看Flash 文件播放的效果，擊屬性面板中的“停止”按鈕，即可停止Flash 文件的播放。這兩個按鈕為查看Flash 的瀏覽效果提供了方便；3、刪除“欄目標題”可編輯區(qū)域的文字，單擊“常用”面板的“圖

20、像”按鈕，插入在圖像制作軟件中制作好的欄目標題圖像；4、刪除“欄目容”可編輯區(qū)域的文字，插入1 行1 列，寬度為95%，其中項目為0 的表格。并在屬性面板中設置表格“居中對齊”。在表格再插入2 行1 列，寬度為90%的嵌套表格，來布局欄目小標題和欄目容。使光標定位在第1 行單元格中，在屬性面板中設置單元格高度為25，背景圖像為“bg_titel.gif”，在表格輸入欄目小標題“琥珀*文件”；5、把光標定位在第2 行單元格，設置背景圖像為“bg_table.gif”。在“樣式”下拉列表中選擇“管理樣式”命令；6、在“編輯樣式表”對話框中，顯示出已存在的CSS 樣式表或樣式，如圖4-37所示。這里

21、雙擊“css.css”樣式表進行編輯。單擊“編輯”按鈕，然后在“css.css”對話框中單擊“新建”按鈕；7、在“新建CSS 樣式”對話框中輸入名稱為“.blueline”，如圖4-39 所示?！按_定”后進入“CSS 樣式定義”對話框，在“分類>邊框”區(qū)域進行如圖4-40 的設置；8、設置完成后“確定”所有彈出窗口。在屬性面板“樣式”下拉列表中出現(xiàn)剛剛設置的“blueline”選項（如圖4-41 所示），選擇此項，會發(fā)現(xiàn)單元格左側出現(xiàn)1 個像素的藍色線條，這就是所要制作的效果；9、在單元格插入5 行1 列，寬度為100%，單元格間距為6 的嵌套表格，然后在每個單元格分別輸入“琥珀文化”的相關容與分隔線。并選中文字，在屬性面板“樣式”列表中選擇已設置好的“black”項，使文本顏色變成黑色；10、“欄目容2”可編輯區(qū)域容為“琥珀*物語”，制作方法與“琥珀*文化”基本一樣。如為了簡便可復制“琥珀*文化”的外層表格，粘貼到“欄目容2”區(qū)域，然后修改此版塊的背景圖像，文本容，表格尺寸等不同的項目即可；11、在“琥珀*物語”容下，再插入1 行1 列，寬度為356 像素，其他項為0 的表格，在表格中將插入一圖片，增添網(wǎng)頁效

溫馨提示

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

評論

0/150

提交評論