web網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)報(bào)告-展示頁(yè)
2025-03-16 07:37本頁(yè)面
【正文】 ............................................. 11 [附錄 ] 網(wǎng)頁(yè)源代碼 節(jié)選 ....................................... 12 一、 設(shè)計(jì)目的 在 Inter飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在 Inter應(yīng)用上的地位顯 而易見(jiàn)，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。 了解和熟悉網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)和實(shí)現(xiàn)技巧。 熟練掌握 Photoshop cs Dreamweaver cs 等軟件的的操作和應(yīng)用。學(xué)會(huì)和團(tuán)隊(duì)配合，逐漸培養(yǎng)做一個(gè)完整項(xiàng)目的能力。首先，做好需求調(diào)研。 然后，調(diào)研結(jié)束之后對(duì)整個(gè)網(wǎng)站進(jìn)行功能描述，并對(duì)網(wǎng)站進(jìn)行總體規(guī)劃，接著逐步細(xì)化。進(jìn)行一番調(diào)研之后，該網(wǎng)站整體站功能結(jié)構(gòu)圖如下： 四、 技術(shù)分析 (一 )建立布局 在這次的網(wǎng)頁(yè)設(shè)計(jì)中用到大量的布局，所以怎么樣建立布局是關(guān)鍵。特別是其在布局方面的出色表現(xiàn)，更受青睞。 “ ALT+F6”鍵，進(jìn)入布局模式，插入布局表格。 ：選中該項(xiàng)，按瀏覽可以插入一幅準(zhǔn)備好的圖片作為表格的背景， 因?yàn)閳D片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。正是由于這些優(yōu)點(diǎn)，所以在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)圖像很受歡迎。 圖像文件的格式有幾十種，如 GIF、 JPEG、 BMP、 EPS、 PCX、 PNG、 FAS、 TGA、 TIFF、 WMF等，現(xiàn)在 Inter Explorer和 Netscape支持的、最常用的圖像格式是 GIF、 JPEG和 BMP。在網(wǎng)頁(yè)中加入圖像的操作非常簡(jiǎn)單： ，把光標(biāo)定位在網(wǎng)頁(yè)的開(kāi)始位置。 “瀏覽”按鈕，出現(xiàn)一個(gè)“ 選擇文件”對(duì)話框。在網(wǎng)頁(yè)中插入圖像后我們就可以對(duì)圖像的各種屬性進(jìn)行設(shè)置了。 (1)設(shè)定圖像邊框粗細(xì)：在“外觀”選項(xiàng)卡的“布局”欄里可以根據(jù)需要定義圖像的邊框，也可以定義邊框值為“ 0”，即無(wú)邊框。比如在網(wǎng)頁(yè)左邊插入一幅圖像，要求右邊的文字就像沒(méi)有圖像時(shí)可以多行輸入，這就要通過(guò)設(shè)置圖像的環(huán)繞方式來(lái)實(shí)現(xiàn)。 ②右環(huán)繞：圖像在右邊，文本在圖像的左邊進(jìn)行環(huán)繞。 (3)編輯圖像大 ?。涸?Dreamweaver cs3中，當(dāng)在網(wǎng)頁(yè)中加入一幅圖像后，圖像大小默認(rèn)設(shè)置為其原來(lái)的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調(diào)整圖像的大小。 (4)設(shè)置圖像縮放比例：網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)重要原則就是網(wǎng)頁(yè)的兼容性，對(duì)于不同的瀏覽器或者不同的分辨率，不管是 800 600的窗口，還是 1024 768的窗口，網(wǎng)頁(yè)都要能正常的顯示。設(shè)置圖像縮放比例的步驟如下： ，單擊鼠標(biāo)右鍵，在彈出的快捷菜單里，選擇“圖像屬性”菜單項(xiàng)，彈出一個(gè)“圖像屬性”對(duì)話框 . “大小”欄中選中“指定大小”復(fù)選框，同時(shí)選中“寬度”和“高度”下面的“百分比”單選按鈕，然后在“寬度”和“高度”欄里輸入想顯示的比例，單擊“確定”完成設(shè)置。 （ 3）怎樣編輯網(wǎng)頁(yè)中的圖像 在 Dreamweaver cs3中，可以使用“圖片”工具欄中的各種工具對(duì)網(wǎng)頁(yè)中的圖像進(jìn)行編輯，編輯功能主要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)、剪裁、圖像淡化、凹凸效果等等。 （ 4）使用背景圖像 使用背景圖像與使用背景色不同，使用背景色只將網(wǎng)頁(yè)的背景用某種顏色填充，而使用背景圖像則是將網(wǎng)頁(yè)的背景用圖像平鋪。網(wǎng)頁(yè)中使用背景圖像的具體步驟如下： 。 “背景”選項(xiàng)卡的“格式”欄中選中“背景圖片”復(fù)選框，然后單擊下面的“瀏覽”按鈕，出現(xiàn)一個(gè)“選擇背景圖片”對(duì)話框。 “選擇文件”對(duì)話框的文件列表中選擇圖像文件，單擊“確定”按鈕。 （ 5）插入 flash動(dòng)畫(huà) 關(guān)于 Flash 視頻 使用 Dreamweaver 中的“插入 Flash 視頻”命令，可將 Flash 視頻內(nèi)容插入 Web 頁(yè)面，而無(wú)需使用 Flash 創(chuàng)作工具。 （ 6）設(shè)置鼠標(biāo)經(jīng)過(guò)圖片，進(jìn)行圖片交互 再插入圖片 的下拉菜單中有一項(xiàng)是“鼠標(biāo)經(jīng)過(guò)”，點(diǎn)擊這一項(xiàng)，會(huì)彈出一個(gè)對(duì)話框，在對(duì)話框中可以設(shè)置鼠標(biāo)經(jīng)過(guò)前的圖片和經(jīng)過(guò)時(shí)的圖片，選擇“確定”即可。我們?cè)O(shè)置了鏈接本站點(diǎn)的網(wǎng)頁(yè)頁(yè)面，同時(shí)也連接了外網(wǎng)，使得大家訪問(wèn)頁(yè)面時(shí)能夠查詢更多詳細(xì)的信息，方便用戶查詢。使更豐富全面的軟件技術(shù)和應(yīng)用技巧 ，使我們真正對(duì)所學(xué)的軟件融會(huì)貫通。其內(nèi)容是多樣化的。 Dreamweaver大大加速了網(wǎng)絡(luò)時(shí)代電子交易應(yīng)用中的項(xiàng)目交付。例如，網(wǎng)頁(yè)上很流行的陰影和立體按紐等效果，只需單擊一下就可以制作完成。主圖是一個(gè)網(wǎng)頁(yè)的門(mén)面，它能體現(xiàn)出這個(gè)網(wǎng)頁(yè)的整體風(fēng)格。 然后是整體規(guī)劃，每一版塊都有其個(gè)性的色彩，清晰明了，便于閱讀瀏覽，大致分幾部分， 個(gè)人檔案、興趣愛(ài)好、成長(zhǎng)經(jīng)歷、國(guó)家隊(duì)生涯、榮譽(yù)、職業(yè)生涯數(shù)據(jù)、轉(zhuǎn)會(huì)記錄，再加入個(gè)別網(wǎng)站等，每一部分又分幾小部分，內(nèi)容比較充分 ，多樣。 再后是制作網(wǎng)頁(yè)了，使用 dreamweaver制作。頁(yè)面可愛(ài)清爽。首頁(yè)制作時(shí)，時(shí)刻考慮著網(wǎng)頁(yè)的基本原則：統(tǒng)一，連貫，分割，對(duì)比及和諧的原則，內(nèi)容統(tǒng)一，都是為了主題服務(wù)，一個(gè)網(wǎng)站強(qiáng)調(diào)的就是一個(gè)整體，只有圍繞一個(gè)統(tǒng)一的目標(biāo)所做的設(shè)計(jì)才是成功的；連貫，
黨政相關(guān)相關(guān)推薦
鄂ICP備17016276號(hào)-1