1、課程：B080103140html 與 Javascript 技術(shù)實驗東學學院姓名劉纖塵學號20134626班級1301指導教師王蓓蕾開 設(shè)學 期2 0 1 4 - 2 0 1 5 第 一 學 期開 設(shè)時 間日 期2015 年 1 月 19評 定成 績評定人評定日期一、實驗?zāi)康?，熟悉超文本標記語言2，了解包括Java Script 在內(nèi)的至少一門編程語言。4，熟悉 javax.servlet.jar 包中支持 http 協(xié)議的內(nèi)容。并使用 java 語言設(shè)計網(wǎng)頁的3，學會使用一種本地服務(wù)器，并在服務(wù)器上成功運行個人主頁。5，力求創(chuàng)新，對頁面進行個性化的設(shè)計。二、實驗內(nèi)容與實驗步驟1，構(gòu)思主要

2、內(nèi)容2，形成內(nèi)容及其布局的草圖交互3，在網(wǎng)絡(luò)上搜集所需素材，包括 icon 及所需背景，背景音樂等4，使用 DW 進行設(shè)計界面進行頁面設(shè)計，代碼輔助設(shè)計5，使用 java 制作三、實驗環(huán)境,導入 java.servelet.jar，開啟本地服務(wù)器實現(xiàn)交互。操作系統(tǒng)：Windows 8.1前端開發(fā)：Dream Weaver CS6開發(fā)：Java SE8.0網(wǎng)頁測試： ernet Explorer 11四、實驗過程與問題分析問題 1：設(shè)計終端與測試終端的分辨率差異問題：在設(shè)計過程中，由于需定義塊級元素,以及框架等的大小，會經(jīng)常使用像素值。由于設(shè)計終端屏幕分辨率為 2560*1600。在其他終端進行

3、頁面測試時，由于其他終端多為 1366*768 或 1280*960，所以會導致很多內(nèi)容和布局無法正常顯示。解決方案：（1），盡量使用百分比，而不使用像素值。（2），經(jīng)測試，我驚奇的發(fā)現(xiàn)，不同終端的 IE 瀏覽器均可以正常顯示頁面內(nèi)容。所以在 index.html 頁面的中加入 javascript 提醒：alert(Dear Teacher: Please Use IE);，提示使用者使用 IE問題 2，導航欄的設(shè)計解決方案：主頁采用長 html 文檔，分為 ABOUT ME；GROWING；PHOTOS；DORMITORY;CONTACT五個，各個部分由位于頂部導航欄的超直接定位到頁面的相

4、應(yīng)部位，實現(xiàn)： 用“#”標識跳轉(zhuǎn)到的位置。 Class=“”調(diào)用了一個定義在 jquery.min.js 文件中的動畫效果。實現(xiàn)了界面跳轉(zhuǎn)的移動效果。附圖：導航欄 html 代碼：abouTMEGrowingPhotosdormitorycontact整個導航欄的設(shè)計，采取表格的方法，將這幾個導航鈕橫向排列。Class=“top-nav”調(diào)用了 定義了布局，采用毛玻璃效果的綠色背景，鼠標指針放在按鈕上時會由變色為毛玻璃效果的橘色按鈕，實現(xiàn)布局的 css：.top-header.top-nav ul li acolor: #;padding: 0.84em 3.0804em; font-size

5、: 1.25em;font-weight: 400; text-align: center;text-transform: uppercase; ition: relative;font-weight: 300;.top-nav ul li.active-join a,.top-nav ul li a:hovercolor:#;background:rgba(244, 135, 101, 0.66).top-nav ul li.active-join a background: #F98B68;color: #;font-weight: 500; font-size: 1.4em;paddin

6、g: 0.66em 1.5em;問題 3，初始界面部分：插圖重復(fù)解決方案：將 background-repeat 屬性設(shè)為 no-repeat在頁面的底部顯示作者的簡要信息實現(xiàn)：使用與頂部導航欄相同的樣式表與 JS 效果，但沒有具體連接，只有鼠標的指示效果。4，AboutMe 部分：無跳轉(zhuǎn)需要，而且主要以展示個人性格態(tài)界面的方案效果如下：為主，以及附圖，所以無需設(shè)計效果及。直接采取設(shè)計靜實現(xiàn)：定義四個塊級元素，將其中三個塊級元素放入最大的塊級元素中。每個小塊級元素可以用來顯示和文字，并使用 css 與 js 中定義好的布局和飛入出現(xiàn)的效果：放入標題放入介紹文字問題 5：回頂部解決方案：到此，h

7、tml 頁面已經(jīng)離開頂部導航欄一段距離。考慮到使用鼠標滑輪返回導航欄過于繁瑣，特此設(shè)計返回頂部的按鈕按鈕圖標位于 images 文件夾中，布局以及觸發(fā)效果已經(jīng)定義在 js 及 css 中，直接連接相應(yīng).css 文件及.js 文件即可，見上圖左下角6：相冊MYPHOTOS 實現(xiàn)的是相冊的功能。鼠標放在相應(yīng)的上即可查看信息，如上圖。點擊九個上方的小導航欄可以對7進行分類查看：如下圖7：室友介紹部分：調(diào)用 js，實現(xiàn)間隔一定時間自動橫向滑動的功能，另外使用鼠標點擊左右箭頭，或使用鼠標拖動，均可實現(xiàn)的切換效果。由于室友8提供：，使用暴漫代替！使用了比較潮流的二位碼，并且兼顧傳統(tǒng)以及一個可以直接調(diào)用電腦

8、中的郵箱的按鈕。問題：不同終端顯示大小和布局不相同解決方案：無論如何調(diào)整 css 文件，所以不再采取插圖的方法，兒時將兩個的相對大小和絕對大小都無法使所有終端都按照設(shè)計終端顯示。先放在一個qr.html 文件中。然后再定義塊級元素調(diào)用 css，顯示位置，在該位置使用 iframe 顯示 html 內(nèi)容： 確定9交互：點擊上圖 CLICO MESSAG可以進入留言板問題：有人會填寫不正確的地址碼，若不符合解決方案：加入了的提醒。判格式的不會成功提交并會彈出請正確填寫啟動服務(wù)器隨機填寫信息測試：問題 10：交互中會有人醬文字信息寫的太長。因此在后天 JAVA 中加入判斷，如果寫入字符少于是個字符，則全部顯示字符，如果字符大魚十個，則調(diào)用 String.substring（ eger， eger）方法截取的前十個字符顯示。實現(xiàn)：if (str3.length() 六、附錄Workbench 文件夾結(jié)構(gòu)：Java_Classes：Content：Css:包含所有調(diào)用的.css 文件Images：包含所有按鈕，背景所需JS:包含所有 javascript 以及 jquery 文件Index:主頁Music.mp3:主頁背景音樂Qr:只包含的 htmlTalk:用于交互的表單填寫界面成績評定：考核標準得分（1）能夠