《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程設(shè)計(jì)

《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程設(shè)計(jì)姓名：佟東明 學(xué)號(hào)：y1406291304班級(jí)：14級(jí)計(jì)算機(jī)系網(wǎng)絡(luò)技術(shù)班時(shí)間：2015/12/16經(jīng)過了2個(gè)學(xué)期的學(xué)習(xí)，使我對(duì)“網(wǎng)頁(yè)設(shè)計(jì)與制作”有了較為全面的認(rèn)識(shí)與了解。下面，是本次課程設(shè)計(jì)（網(wǎng)頁(yè)設(shè)計(jì)制作）的流程：網(wǎng)頁(yè)主頁(yè)與子頁(yè)的設(shè)計(jì)制作：整個(gè)主題為《環(huán)保》。首先我為整個(gè)網(wǎng)站選定了fav圖標(biāo)，現(xiàn)在主流新版瀏覽器在瀏覽或者收藏網(wǎng)頁(yè)時(shí)會(huì)在標(biāo)簽頁(yè)網(wǎng)站名稱的左邊顯示favicon，HTML語(yǔ)言為：<linkrel="shortcuticon"href="XXXX.ico"/>我這里命名為favicon.ico，路徑位于網(wǎng)站目錄/images/主頁(yè)調(diào)用了事先編譯好的setHomeSetFav.js的JavaScript文件為網(wǎng)頁(yè)添加了“設(shè)為主頁(yè)”、“加入收藏”、“聯(lián)系我們”等功能，用JS語(yǔ)句直接調(diào)用里面一個(gè)類，JS文件放在網(wǎng)站目錄的JS目錄，例如：<scripttype="text/javascript"src="js/setHomeSetFav.js"></script><divclass="top"><divclass="top_content"><ul><li><aonclick="AddFavorite(window.location,document.title)"href="javascript:void(0)">加入收藏</a></li>左上角的Logo是用PhotoShop繪圖軟件進(jìn)行“圖層合并”合成的，加上了我的班級(jí)姓名。分辨率經(jīng)調(diào)整，以適用于CSS框架。右上角添加了我的聯(lián)系方式（手機(jī)號(hào)）導(dǎo)航欄放了幾個(gè)超鏈接，大部分是外鏈，比如“中國(guó)環(huán)保部”，在連接到Internet的情況下，點(diǎn)擊這些按鈕可以訪問相應(yīng)網(wǎng)站。6、導(dǎo)航欄下面是一個(gè)JavaScript編寫的插件，具有很美觀的動(dòng)態(tài)3D切換效果，按插件下方Next或者相應(yīng)數(shù)字，即可切換圖片，而且圖片也做了外鏈，點(diǎn)擊圖片即可打開新的選項(xiàng)卡\標(biāo)簽頁(yè)、新的網(wǎng)站，這里設(shè)置為導(dǎo)航欄里相同的外鏈地址。為了插件運(yùn)行正常，請(qǐng)使用新版主流瀏覽器。7、中間部分如圖所示，也是一些指向環(huán)保網(wǎng)站的鏈接，插入了一些圖片、有關(guān)于環(huán)保的新聞。8、中間“環(huán)保中心”的下方使用了HTML5語(yǔ)言安插了一條滾動(dòng)信息，內(nèi)容為：我的班級(jí)、姓名、年月日（時(shí)間）。鼠標(biāo)放在上面可以停止文字滾動(dòng)。<marqueealign="middle"behavior="scroll"direction="left"scrollamount="5"scrolldelay="6"onmouseover=this.stop()onmouseout=this.start()><strong><fontcolor="red">14級(jí)計(jì)算機(jī)系網(wǎng)絡(luò)技術(shù)佟東明2015年12月16號(hào)星期三</font></strong></marquee>9、右邊靠下的位置是調(diào)用了系統(tǒng)的Flash插件，我把一個(gè)流媒體視頻放在了網(wǎng)站文件夾/點(diǎn)擊開始按鈕即可觀看內(nèi)鏈本地視頻。10、為使頁(yè)面美觀，最下方按照主流網(wǎng)站設(shè)置了相應(yīng)的導(dǎo)航區(qū)域，最右下方是我的易信賬號(hào)，我生成二維碼后，把圖片插入在這里，手機(jī)用易信掃一掃，即可添加我為好友。11、因時(shí)間緣故，子頁(yè)設(shè)計(jì)較為簡(jiǎn)單，如圖，背景改為墨綠色，主要介紹了著名動(dòng)漫制作人“宮崎駿”，然后下面調(diào)用了JS插件，里面是宮崎駿大師的知名動(dòng)漫作品的截圖。采用3D滾動(dòng)效果。12、最后是創(chuàng)建網(wǎng)站運(yùn)行環(huán)境，在Windows環(huán)境中，打開控制面板---程序---啟用或關(guān)閉windows功能。選中IIS相關(guān)的組件，點(diǎn)擊確定。把做好的網(wǎng)站文件夾，放進(jìn)網(wǎng)站根目錄。啟用IIS服務(wù)后，即可發(fā)布網(wǎng)站，根據(jù)獲得的IP地址，使用瀏覽器進(jìn)行訪問。（此操作步驟適用于Wind