web前端實習(xí)報告

《web前端實習(xí)報告》由會員分享，可在線閱讀，更多相關(guān)《web前端實習(xí)報告（51頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、webweb 前端實習(xí)報告前端實習(xí)報告 篇一：Web 前端技術(shù)實訓(xùn)報告書 Web 前端技術(shù)實訓(xùn)任務(wù)書 一、實訓(xùn)課題名稱 1、 教育類站的設(shè)計與制作 2、 商業(yè)類站的設(shè)計與制 作 3、 旅游休閑類站的設(shè)計與制作 4、 體育健身類站的 設(shè)計與制作 二、 課題設(shè)計目的 通過實訓(xùn)，應(yīng)使學(xué)生鞏固所學(xué)知識，把所學(xué)的理論知 識運用到站制作實踐中。培養(yǎng)學(xué)生動手能力，將 PS 制作效 果圖、HTML、CSS DIV 頁布局、JavaScript 等 Web 前端開 發(fā)技術(shù)結(jié)合起來，在實訓(xùn)環(huán)節(jié)中進行運用。為以后學(xué)習(xí)動 態(tài)站打下基礎(chǔ)。 三、 任務(wù)要求： 用 PhotoShop、DreamWeaver 等開發(fā)工具制作

2、一個由靜 態(tài)頁構(gòu)成的簡單站，要求包括一個首頁、至少三個子頁， 按照站開發(fā)流程，先做頁效果圖，然后制作頁素材、構(gòu)建 站文件結(jié)構(gòu)、規(guī)劃頁布局、制作頁動畫、實現(xiàn)頁功能，爾 后進行站測試，并編制出各階段必要的文檔。在編寫文檔 時，必須嚴(yán)格遵照要求，最后提交文檔。 功能要求：該站首頁必須包括站 logo、導(dǎo)航條（帶有 鼠標(biāo)事件變化效果） 、banner（簡單 flash 動畫） 、圖片、 多媒體運用、文字等主要信息展示；子頁包括用戶注冊 （帶有表單輸入項本地驗證功能） 、登錄（用戶名和密碼非 空驗證） 、子頁相關(guān)欄目。各頁面之間通過超鏈接切換。 最后要求提交詳細的課程設(shè)計報告及頁效果圖 （.psd）和站

3、運行文件，現(xiàn)場運行驗收開發(fā)的系統(tǒng)。 四、 課題設(shè)計報告書要求： 1、 課題設(shè)計報告書第一頁為封面，封面上寫清楚標(biāo) 題、班級、姓名、指導(dǎo)老師、 完成日期。 2、 課題設(shè)計報告書第二頁為本任務(wù)書。 3、 課題設(shè) 計報告書第三頁為教師評語。 4、 課題設(shè)計報告書第四頁 為目錄。 5、 課題設(shè)計報告書第五頁開始為具體內(nèi)容： （1）開發(fā)背景 站欄目劃分 2）頁素材及站架（2） 站分析設(shè)計部分 欄目內(nèi)容介紹 構(gòu)制作 1）客戶需求分 析 站拓?fù)鋱D 3）首頁制作頁面設(shè)計 2）站風(fēng)格定位  4）站效果圖 4）子頁面制作 3）站建設(shè)方案 （3）站制 作部分 頁風(fēng)格創(chuàng)意設(shè)計 1）效果圖制作 6、課題設(shè)計報

4、告書最后一頁是本次課程設(shè)計的小結(jié)和 參考文獻。 7、字?jǐn)?shù)要求不少于 3000 字。 8、打印紙張使用 B5 紙，頁邊距設(shè)為上、下、左 2 厘 米，右厘米， 五、 如有雷同，將作不及格處理。 六、 完成時間： 教育類站設(shè)計報告書寧海職業(yè)技術(shù)學(xué)院 - 教師評語 教師： 5. 一 前言 . . - 4 - 客戶需求分析 . . - 4 - 站風(fēng)格定位 . . - 5 - 1色彩： . . - 5 - 2排版 . . - 6 - 3特效 . . - 6 - 二 站設(shè)計前期準(zhǔn)備 . . - 6 - 站風(fēng)格定位 . . - 6 - 1頁面風(fēng)格創(chuàng)意設(shè)計 . . - 7 - 2站欄目劃分 . . - 7 -

5、3.特效 . . . - 7 - 三、站拓?fù)鋱D . . - 7 - 四、站效果圖 . . - 8 - 教育類站設(shè)計報告書寧海職業(yè)技術(shù)學(xué)院 - 五、中期站制作 . . - 11 - （一）站首頁制作 . . - 11 - 1、首頁 logo 效果： . . - 11 - 2、站內(nèi)公告效果： . . - 11 - 3、站內(nèi)新聞效果圖： . . - 11 - 4、登陸效果圖： . . - 12 - （二）站搭建過程 . . - 14 - 三、制作站的 Logo 動畫 . - 16 - 六、 站建設(shè)心得小結(jié) . . - 24 - 七、參考文獻 . . - 26 - 一 前言 客戶需求分析 客戶需求，是

6、指學(xué)校創(chuàng)建門戶站的目的和對站提出的 特定要求。 了解客戶需求，是建好學(xué)校門戶站的前提。寧海職業(yè) 技術(shù)學(xué) 教育類站設(shè)計報告書寧海職業(yè)技術(shù)學(xué)院 - 校對其擬建的門戶站提出的主要要求有以下幾點。 （1）宣傳學(xué)校辦學(xué)理念，展示辦學(xué)設(shè)施、教師隊伍、專業(yè) 設(shè)置、就 業(yè)情況，提高學(xué)校的社會知名度； （2）適時發(fā)布學(xué)校管理、教學(xué)、招生等相關(guān)信息，為 求學(xué)者提供相 關(guān)咨詢服務(wù)； （3）獲取社會各界對學(xué)校教育教學(xué)情況的評價和意見、 建議； （4）建立與兄弟院校進行交流學(xué)習(xí)的平臺； （5）向社會各界推薦畢業(yè)生，為畢業(yè)生提供就業(yè)信息。 站風(fēng)格定位 校園站就是學(xué)校的上形象，每一所學(xué)校都有自己的特 色，每一個院系或班級都

7、會有自己的強項。對于本項目介 紹的校園站以撫州職業(yè)技術(shù)學(xué)校為例，從以下三個方面來 學(xué)習(xí)該站的風(fēng)格定位。 1色彩： 本項目中采用一種色彩，先選定主色調(diào)為橙色，這是 令人激奮的色彩，具有明亮、健康、熱烈、溫暖、歡樂、 輝煌、莊嚴(yán)，以及尊貴的色感，然后通過調(diào)整透明度或者 飽和度，就是色彩進行變淡、加深或漸變的處理，產(chǎn)生新 的橙色的近似色彩，使頁看起來色彩統(tǒng)一，富有層次感。 在頁面中借助淺灰色的背景圖像，采用了留白藝術(shù)給人 教育類站設(shè)計報告書寧海職業(yè)技術(shù)學(xué)院 - 篇二：假期 web 前端實習(xí)報告 鄭州輕工業(yè)學(xué)院 實 習(xí) 報 告 學(xué)生姓名： 學(xué) 號： 專業(yè)班級： 實習(xí)單位： 實習(xí)時間： 校外指導(dǎo)教師：

8、校內(nèi)指導(dǎo)教師： 成 績： 目 錄 1 實習(xí)背景 . . 1 實習(xí)目的 . . 1 實習(xí)起止時間 . . 1 實習(xí)內(nèi)容概要 . . 1 2 實習(xí)內(nèi)容 1 實習(xí)過程 . . 1 實習(xí)內(nèi)容 . . 5 主要成果 . . 6 3 總 結(jié) . 6 頁游戲的認(rèn)識 . . 6 實習(xí)的自我評價 . . 7 1 實習(xí)背景 實習(xí)目的 了解軟件開發(fā)的各種模式，開發(fā)流程，以及各種形式 的建模 詳細學(xué)習(xí)敏捷開發(fā)的各個流程，并通過實習(xí)來體會敏 捷開發(fā)所帶來的效率 掌握 HTML5、CSS、JAVASCRIPT 等技 術(shù) 實習(xí)起止時間 開始時間：XX 年 7 月 12 號 截止時間：XX 年 7 月 18 號 實習(xí)內(nèi)容概要

9、 學(xué)習(xí)軟件開發(fā)的各種模式，重點學(xué)習(xí)了敏捷開發(fā)（專 業(yè)老師講授） 學(xué)習(xí) HTML5、CSS、JAVASCRIP 技術(shù)（形式：觀看視頻） 按照敏捷開發(fā)的流程，學(xué)員分組，制定每日的站立會 議時間 觀看實習(xí)內(nèi)容例子的視頻，分工合作 提交實習(xí)成果，老師檢查打分 2 實習(xí)內(nèi)容 實習(xí)過程 可以以周為時間單位概述實習(xí)各階段所從事的主要工 作等； 學(xué)習(xí)階段 開發(fā)模式 1) 軟件生命周期 同任何事物一樣,一個軟件產(chǎn)品或軟件系統(tǒng)也要經(jīng)歷孕 育、誕生、成長、成熟、 -衰亡等階段，這一般稱為軟件 生命周期。 軟件開發(fā)生命周期(SDLC)是指軟件開發(fā)的全部過程、 活動和任務(wù)的結(jié)構(gòu)框架。 SDLC 的一般步驟包括：確定問題

10、、可行性分析與開發(fā) 計劃、收集需求、分析與設(shè)計、編碼開發(fā)、測試、安裝、 維護。 2) 軟件生命周期模式 典型的幾種生命周期模式包括：瀑布模式、演化模式、 螺旋模式、快速原型模式、噴泉模式和混合模式等。 3) 敏捷開發(fā) 敏捷開發(fā)（Agile）是一種關(guān)注價值、消除浪費、以人 為核心、迭代、循序漸進的開發(fā)方法。 特點： a) 是一種開發(fā)方法學(xué)（Methodology） ，可以應(yīng)對客戶 快速變 更的需求。 b) 強調(diào)以人為核心，采用迭代的方式， 循序漸進地開發(fā)軟件。 c) 在敏捷開發(fā)過程中，軟件項目被劃分成多個相互聯(lián) 系但也能獨立運行的子項 目。 d) 每個子項目在開發(fā)、測試直至完成的過程中一直保 持

11、可使用的狀態(tài)。 e) 這個過程就是要形成開發(fā)過程中團隊之成員之間更 加有效的合作關(guān)系，使其 靈活性更高，以適應(yīng)不斷變化的需求。 技術(shù)講解 1) 講解內(nèi)容：HTML5、CSS、JAVASCRIPT 技術(shù) 2) HTML5 HTML5 是一個描述用于幫助開發(fā)者創(chuàng)建下一代站和應(yīng)用 的 HTML、CSS 和 JavaScript 規(guī)格的涵蓋性術(shù)語。這個定義 中最顯眼的三個部分是：HTML、CSS 和 2 JavaScript。他們定義了開發(fā)者如何使用優(yōu)化標(biāo)記， 風(fēng)格更豐富的性能，以及新 JavaScript API 來制作最新的 絡(luò)開發(fā)功能。簡單而言，HTML5=HTML CSS JavaScript

12、。 特性： a) 語義特性（Class：Semantic） b) 本地存儲特性選擇器通常是您需要改變樣式的 HTML 元素。 3 篇三：web 前端實習(xí)經(jīng)驗 經(jīng)驗 XX 年 7 月 11 日 11:20 自我介紹時：千萬不要忘記介紹名字 代碼： 1.標(biāo)記為 done 表示已經(jīng)調(diào)試好，完全測試過了 2.代碼規(guī)范。phpstrom，統(tǒng)一格式化 3.借鑒代碼時注意 liscence 4.項目相接時，文檔規(guī)范（步驟，文檔不可少） 項目： 4.微信(接口，產(chǎn)品（wify） ） 任務(wù)： 1.每天用幾個小時做了什么，做得怎么樣（日報，周 報） 2.接受項目（任務(wù)）時，先評估后再決定是否接受， 接收后做不好，

13、更不好 處理關(guān)系： 1.盡快記住大家的名字 2.按時任務(wù) 3.郵件發(fā)送人與抄送人，1 小時內(nèi)回復(fù) 4.溝通：不懂或有意見的時候要及時溝通 還要學(xué)習(xí) ，jQuery 學(xué)習(xí) 2.算法，業(yè)務(wù)流程 3.代碼規(guī)范 4.友好的注釋（便于自己和他人） 5.打字速度很需要提高 6.多看英文文檔 篇四：web 前端技術(shù)實驗報告 1 Web 前端技術(shù)實驗報告 課程名稱：Web 前端技術(shù) 實驗名稱：html 頁設(shè)計 系別班級：計科系 1302 班 學(xué)生姓名：余洲杰 學(xué)生學(xué)號：XX100204 輔導(dǎo)老師：王琦 一、實驗?zāi)康?熟悉 HTML 制作頁的基礎(chǔ)知識，并能熟練運用學(xué)過的內(nèi) 容制作、設(shè)計較為簡單的頁。 二、內(nèi)容及

14、要求 運用學(xué)過的代碼設(shè)計一個頁，其中要求運用到以下知 識點： 1、不同的文字樣式設(shè)計； 2、插入背景圖片； 3、設(shè)計超鏈接； 4、表格的簡單實用； 三、實驗原理 文本：font 可以跟 color、size、face 等屬性根據(jù)不 同的值對文本進行修 改； 滾動字：marquee 可以跟 bgcolor、height、width、direction、align、 behaviour 等屬性根據(jù)不同的值對滾動字進行設(shè)置； 表格：tabble 分成各個格子，后跟百分比來分成適當(dāng) 的欄 其他相關(guān)內(nèi)容：各級標(biāo)簽、標(biāo)題設(shè)置、背景圖、超鏈 接等。 四、實驗步驟 （此內(nèi)容根據(jù)自己的頁設(shè)計實況填寫，如下事例）

15、 1、確立自己的頁主題 選擇了個人感悟作為本次頁設(shè)計的主題。 2、頁基本設(shè)計 a、分設(shè)五個基礎(chǔ)頁，分為主頁及四個個介紹頁。 b、設(shè)計主頁為整圖如下，在圖片上編寫適當(dāng)文本，并 添加超鏈接以進入下一個頁面。 c、點擊超鏈接進入下一個頁面，共四個頁面。如圖 d、使用滾動字，背景圖片的插入，背景顏色的設(shè)置等， 使頁美化。 五、實驗代碼 花開半夏，似水流年 六、實驗總結(jié) 1、學(xué)會了如何運用 table，marquee,font 等。 2、對于背景圖片的運用不是很熟練，在查找資料之后 才得以實現(xiàn)。 篇五：Web 前端技術(shù)課程實訓(xùn)報告 Web 前端技術(shù)課程設(shè)計報告 一、 實訓(xùn)課題名稱 二、 課題設(shè)計目的 通

16、過實訓(xùn)，應(yīng)使學(xué)生鞏固所學(xué)知識，把所學(xué)的理論知 識運用到站制作實踐中。 培養(yǎng)學(xué)生動手能力，將 PS 制作效果圖、 HTML、CSS DIV 頁布局、JavaScript 等 Web 前端開發(fā)技術(shù) 結(jié)合起來，在實訓(xùn)環(huán)節(jié)中進行運用。為以后學(xué)習(xí)動態(tài)站打 下基礎(chǔ)。 三、 實現(xiàn)功能： 用 PhotoShop、DreamWeaver 等開發(fā)工具制作一個由靜 態(tài)頁構(gòu)成的簡單站，要求包括一個首頁、至少三個子頁， 按照站開發(fā)流程，先做頁效果圖，然后制作頁素材、構(gòu)建 站文件結(jié)構(gòu)、規(guī)劃頁布局、制作頁動畫、實現(xiàn)頁功能，爾 后進行站測試，并編制出各階段必要的文檔。在編寫文檔 時，必須嚴(yán)格遵照要求，最后提交文檔。 功能要求

17、：該站首頁必須包括站 logo、導(dǎo)航條（帶有 鼠標(biāo)事件變化效果） 、banner（簡單 flash 動畫） 、圖片、 多媒體運用、文字等主要信息展示；子頁包括用戶注冊 （帶有表單輸入項本地驗證功能） 、登錄（用戶名和密碼非 空驗證） 、子頁相關(guān)欄目。各頁面之間通過超鏈接切換。 最后要求提交詳細的課程設(shè)計報告及頁效果圖 （.psd）和站運行文件，現(xiàn)場運行驗收開發(fā)的系統(tǒng)。 四、 課題設(shè)計內(nèi)容： （1）開發(fā)背景 （2）站分析設(shè)計部分 1）客戶需求分析 站欄目劃分 欄目內(nèi)容介紹 站拓?fù)鋱D 頁風(fēng)格創(chuàng)意設(shè)計 2）站風(fēng)格定位 3）站建設(shè)方案 4）站效果圖 （3）站制作部分 1）效果圖制作 2）頁素材及站架構(gòu)

18、制作 3）首頁制作頁面設(shè)計 4）子頁面制作 五、體會及下一步學(xué)習(xí)方向 教師評語 參考方案： 目錄 開發(fā)背 景 4 前期準(zhǔn) 備 4 客戶需求分 析 4 站風(fēng)格定 位 5 色 彩 5 排 版 5 特 效 6 站建設(shè)方 案 6 頁風(fēng)格創(chuàng)意設(shè) 計7 站欄目劃 分 7 欄目內(nèi)容介 紹 8 站拓?fù)?圖 9 實訓(xùn)目 的 10 實訓(xùn)任 務(wù) 10 實訓(xùn)項 目 11 站基本介 紹 11 報名界 面 10 保存的文件位 置 11 首頁展示效果 圖 12 導(dǎo)航條展示效果 圖1 3 留言板表格布 局 14 站版權(quán)的展示 圖1 4 國內(nèi)黑客站界面展示 圖15 黑客 新聞界面展示 圖16 電影展示 圖 18 黑客簡介界面展

19、示 圖20 黑客區(qū)別界面展示 圖21 黑客分類界面展示 圖22 實訓(xùn)中的問題和解決辦 法23 實訓(xùn) 體 會 24 一、開發(fā)背景 如今已是信息化時代，很多絡(luò)中的強盜已經(jīng)將魔爪伸 向我們每一個民。由此可見關(guān)于了解黑客以及黑客攻防方 面的知識和新聞是很有必要的。黑客學(xué)習(xí)一直致力于面向 全球華人提供最新的黑客新聞、最先進的黑客攻防技術(shù)， 力求將黑客學(xué)習(xí)打造成民每天必看的學(xué)習(xí)站！ 二、前期準(zhǔn)備 本站是以信息安全類為主體設(shè)計，系統(tǒng)的介紹了黑客 攻防的新聞的知識。 三、客戶需求分析 客戶需求是指客戶創(chuàng)建本站的目的和對站建設(shè)提出來 的特定的要求。 了解客戶的需求，是建好黑客學(xué)習(xí)站的前提。黑客學(xué) 習(xí) 站通過互聯(lián)

20、可以更好的開展信息技術(shù)的交流、學(xué)習(xí)和 上報名等活動。這樣可以提高站的訪問量、知名度，也是 站業(yè)務(wù)的重要來源。客戶對其擬建的黑客學(xué)習(xí)站提出的主 要要求有以下幾點： 1、宣傳信息安全的重要性，提高人們對信息安全的認(rèn) 識，增加站的知名度。 2、適時地發(fā)布最新黑客新聞和技術(shù)，為學(xué)習(xí)者提供最 佳資源。 3、在上發(fā)布報名表，引進國內(nèi)外的愛好者來此學(xué)習(xí)交 流。 4、站上要設(shè)有愛好者交流留言板，用戶可以站新聞和 技術(shù)文章進行評論和留言交流，對于站的改進和更新很有 幫助。 四、站風(fēng)格定位 站風(fēng)格是指站的整體形象給瀏覽者的綜合感受。這個 整體形象包括站點的 logo、標(biāo)志、色彩、字體、標(biāo)語、版 面布局、瀏覽方式、

21、交互性、文字、內(nèi)容價值等諸多元素。 可以從三個方面對長白山旅游進行定位。 1、色彩 站的色彩是瀏覽者整體的視覺感官，如果站的色彩具 有一致性，會使站看起來美觀，使瀏覽者不容易對內(nèi)容混 淆，增加了瀏覽的簡潔與方便。從而更能襯托站的主題， 若色彩能與主題合理搭配，將會增加站的易讀性。 黑客學(xué)習(xí)站選定的主題色是黑灰色。因為若是要打開 一個黑客方面的站，每個人的頭腦中肯定都是黑色或者灰 色，即為較暗淡神秘的顏色。能給吸引更多用戶并給用戶 一種神秘感，很適合黑客學(xué)習(xí)的站。 站中除了采用黑灰色系外，還和淡藍色、白色搭配， 使站產(chǎn)生一種舒適的氣氛，使人可以長時間駐留其間，眼 睛也不會覺得疲勞。 2、排版 篇

22、六：Web 前端技術(shù)實訓(xùn)任務(wù)書 Web 前端技術(shù)實訓(xùn)任務(wù)書 一、 實訓(xùn)課題名稱 3、 旅游休閑類站的設(shè)計與制作 4、 體育健身類站的設(shè)計與制作 1、 教育類站的設(shè)計 與制作 2、 商業(yè)類站的設(shè)計與制作 二、 課題設(shè)計目的 通過實訓(xùn)，應(yīng)使學(xué)生鞏固所學(xué)知識，把所學(xué)的理論知 識運用到站制作實踐中。 培養(yǎng)學(xué)生動手能力，將 PS 制作效果圖、 HTML、CSS DIV 頁布局、JavaScript 等 Web 前端開發(fā)技術(shù) 結(jié)合起來，在實訓(xùn)環(huán)節(jié)中進行運用。為以后學(xué)習(xí)動態(tài)站打 下基礎(chǔ)。 三、 任務(wù)要求： 用 PhotoShop、DreamWeaver 等開發(fā)工具制作一個由靜 態(tài)頁構(gòu)成的簡單站，要求包括一個

23、首頁、至少三個子頁， 按照站開發(fā)流程，先做頁效果圖，然后制作頁素材、構(gòu)建 站文件結(jié)構(gòu)、規(guī)劃頁布局、制作頁動畫、實現(xiàn)頁功能，爾 后進行站測試，并編制出各階段必要的文檔。在編寫文檔 時，必須嚴(yán)格遵照要求，最后提交文檔。 功能要求：該站首頁必須包括站 logo、導(dǎo)航條（帶有 鼠標(biāo)事件變化效果） 、banner（簡單 flash 動畫） 、圖片、 多媒體運用、文字等主要信息展示；子頁包括用戶注冊 （帶有表單輸入項本地驗證功能） 、登錄（用戶名和密碼非 空驗證） 、子頁相關(guān)欄目。各頁面之間通過超鏈接切換。 最后要求提交詳細的課程設(shè)計報告及頁效果圖 （.psd）和站運行文件，現(xiàn)場運行驗收開發(fā)的系統(tǒng)。 四、

24、 課題設(shè)計報告書要求： 1、 課題設(shè)計報告書第一頁為封面，封面上寫清楚標(biāo) 題、班級、姓名、指導(dǎo)老師、完成 日期。 2、 課題設(shè)計報告書第二頁為本任務(wù)書。 3、 課題設(shè)計報告書第三頁為教師評語。 4、 課題設(shè)計報告書第四頁為目錄。 5、 課題設(shè)計報告書第五頁開始為具體內(nèi)容： （1）開發(fā)背景 站欄目劃分 2）頁素材及站架 （2）站分析設(shè)計部分 欄目內(nèi)容介紹 構(gòu)制作 1）客戶需求分析 站拓?fù)鋱D 3）首頁制作頁面設(shè)計 2）站風(fēng)格定位 4）站效果圖 4）子頁面制作 3）站建設(shè)方案 （3）站制作部分 頁風(fēng)格創(chuàng)意設(shè)計 1）效果圖制作 6、課題設(shè)計報告書最后一頁是本次課程設(shè)計的小結(jié)和 參考文獻。 7、字?jǐn)?shù)要求

25、不少于 300 字。 8、打印紙張使用 B5 紙，頁邊距設(shè)為上、下、左 2 厘 米，右厘米. 教師評語 目錄 開發(fā)背 景 4 前期準(zhǔn) 備 4 客戶需求分 析 4 站風(fēng)格定 位 5 色 彩 5 排 版 5 特 效 6 站建設(shè)方 案 6 頁風(fēng)格創(chuàng)意設(shè) 計7 站欄目劃 分 7 欄目內(nèi)容介 紹 8 站拓?fù)?圖 9 實訓(xùn)目 的 10 實訓(xùn)任 務(wù) 10 實訓(xùn)項 目 11 站基本介 紹 11 登錄界 面 12 保存的文件位 置 12 首頁展示效果 圖 13 導(dǎo)航條展示效果 圖1 4 表格布 局 14 “精品路線 l 推薦 “圖1 4 “景點簡介”鏈接的效果 圖15 景點介 紹效果圖： 16 土特產(chǎn)品介紹 圖

26、 16 “長白山之行“的鏈接效果展示 圖17 站底部導(dǎo)航欄 的效果展示圖： 18 站版權(quán)的展示 圖1 8 長白山旅游線路圖： 18 “招商項目“展示 圖19 實訓(xùn)中的問題和解決辦 法19 實訓(xùn) 體 會 20 一、開發(fā)背景 長白山旅游一直致力于面向全球華人提供最專業(yè)、最 豐富、最詳實的旅游咨詢和戶外資訊，力求將長白山旅游 打造成一個東北旅游的互動樂園。 二、前期準(zhǔn)備 本站是以旅游休閑類為主體設(shè)計的，系統(tǒng)的介紹了長 白山的風(fēng)土人情。 三、客戶需求分析 客戶需求是指客戶創(chuàng)建本站的目的和對站建設(shè)提出來 的特定的要求。 了解客戶的需求，是建好旅游站的前提。旅游站通過 互 聯(lián)可以更好的開展信息交流和上預(yù)訂

27、等活動。這樣可 以提高旅游服務(wù)的水平和旅游業(yè)務(wù)的來源。客戶對其擬建 的長白山旅游站提出的主要要求有以下幾點： 1、宣傳長白山的錦繡景區(qū)、民俗風(fēng)情、土特產(chǎn)品等， 提高吉林省旅游業(yè)務(wù)在國內(nèi)的知名度。 2、適時地發(fā)布長白山的精品旅游路線、酒店推薦等信 息，為旅游者提供最佳服務(wù)。 3、在上發(fā)布招商項目，引進國內(nèi)外的商家來長白山投 資，為吉 林省的經(jīng)濟發(fā)展做出一份微薄之力。 4、 站上要設(shè)有旅游論壇欄目或子頁，用戶可以對旅 游路線 等進行評論，也可以談?wù)劼糜蔚母惺堋＿@對于站的改 進 和更新很有幫助。 四、站風(fēng)格定位 站風(fēng)格是指站的整體形象給瀏覽者的綜合感受。這個 整體形象包括站點的 logo、標(biāo)志、色彩

28、、字體、標(biāo)語、版 面布局、瀏覽方式、交互性、文字、內(nèi)容價值等諸多元素。 可以從三個方面對長白山旅游進行定位。 1、色彩 站的色彩是瀏覽者整體的視覺感官，如果站的色彩具 有一致性，會使站看起來美觀，使瀏覽者不容易對內(nèi)容混 淆，增加了瀏覽的簡潔與方便。從而更能襯托站的主題， 若色彩能與主題合理搭配，將會增加站的易讀性。 長白山旅游站選定的主題色是綠色。因為綠色介于冷 暖色的中間，能給人和睦、寧靜、健康、安全的感覺，很 適合旅游休閑類的站。通過調(diào)整主色調(diào)的飽和度和透明度， 產(chǎn)生不同視覺效果的綠色， 以及對這些不同的綠色進行漸變處理，形成頁面的整 體色彩。這樣的頁面看起來色彩統(tǒng)一，有層次感。 篇七：百

29、度實習(xí)生 web 前端開發(fā)工程師面試經(jīng)歷 想不到自己這么快就開始寫面經(jīng)了，這次的面試談不 上失敗，也談不上成功，也就寫出來給大家一個參考和教 訓(xùn)吧！ 我這次是通過一個學(xué)長內(nèi)推到百度的“商務(wù)搜索部” 的 web 前端開發(fā)方面的，HR 部門提前通知了我什么時候面 試，因為我學(xué)校不在北京，所以就只好電話電面了。提前 沒日沒夜的準(zhǔn)備了好幾天，因為百度的要求很多，比如要 精通 CSS 和 javascript，還要熟悉數(shù)據(jù)庫，熟悉一種后臺 開發(fā)語言，最扯的是“對用戶體驗有深入的理解” ，為什么 扯呢，后邊再說。 我很久就做站了，不過都是開源的，所 以自己去有想法寫，也是最近一個學(xué)期的，所以開發(fā)經(jīng)驗 必須

30、的不豐富。寫完簡歷之后，就開始復(fù)習(xí)以前看的一些 書籍了，尤其是 js 還有 web 標(biāo)準(zhǔn)以及站重構(gòu)的東西，另外 花了一半的時間去看了下以前看的用戶體驗以及設(shè)計方面 的東西，還有 GUI 設(shè)計 面試的時候，面試官是個男的，聽聲音大概不到 30 歲， 后邊也確實證實了。說話并不是傳說中的笑瞇瞇很隨意， 有些沙啞和低沉。 第一個問題是介紹自己，balala 的介紹完，就問了一 個讓我到現(xiàn)在還在無語的問題：常見的數(shù)據(jù)結(jié)構(gòu)有哪些？ 暈死啊，前端上沒有這個要求啊，就算對算法有要求，也 不至于去操作底層吧。我回答說有鏈表、堆棧、樹。面試 官說，好，那你給我解釋下 B 樹。我了個去直接傻過去了， 我是萬萬沒有

31、想到會問這個的，balabla 解釋了一堆，最后 又扯成了數(shù)據(jù)庫索引，然后這個題目就杯具了，說白了， 我 B 樹方面的東西已經(jīng)忘記完了，因為考慮自己以后要搞 前端，所以數(shù)據(jù)結(jié)構(gòu)和算法就沒有再去研究！所以建議大 家，去這些大公司的，最好還是對常見算法和數(shù)據(jù)結(jié)構(gòu)有 比較好的了解！ 在這個題目杯具了之后，就問 cookie 和 session 的區(qū) 別這個我知道，回答了，不過聽起來人家對我的回答并不 是很滿意，中間打斷過一次。 然后問我會不會 ajax，這個算是前端技術(shù)，但是我用 的很少，我就照實說了，說我用不多，只知道是異步刷新， 后邊又問說知道 javascript 的一個什么東東來著，沒聽說

32、過，就說不知道，這個記得，一定要誠實，不然撒謊的話， 最后吃虧的一定是自己！ 又問我用的哪個 javascript 的庫，我說 jquery，然后 就沒有下文了在這兒的時候，我差不多在心里確定了， 這哥們是做后端的！我那個囧啊，今天看來出師不利 ?。『蠖撕颓岸穗m然說都是做站的，但是相差還是太大！ 在一起就沒什么好聊的。 下來就問我項目經(jīng)驗了，說看簡歷我做過很多項目， 感覺最成功的項目是什么（看過很多面經(jīng)，貌似百度都會 問到這個問題） ， 我說有三個，然后開始說第一個，第一 個是原來和同學(xué)做過的一個 web 方面的分析工具，叫 bingker 絡(luò)安全工具包，然后他就問我說里面有個殺毒模塊 算法是

33、怎么實現(xiàn)的？暈掉，這個太囧了，當(dāng)時算法的確是 我們一起討論的，但是代碼實現(xiàn)我沒有參與，我就給解釋 說這個算法是用特征碼對比技術(shù)實現(xiàn)的，不過聽起來他似 乎也不是很熟悉這個，我說了半天，他只是嗯，也沒有反 駁沒有去打斷，這個算是過去了 下來就問說做過的站 里有沒有沒有用非開源程序?qū)崿F(xiàn)的，我了個去，現(xiàn)在貌似 大公司都是用的開源程序啊，雖然我們改動了很多，但是 這么一問，只能說沒有了。 資料來源：中國教育在線 http:/ 然后呢，就沒有然后了，前端方面的東西就都沒有問， 他說你還有什么問題嗎？我問他說，那你們對 GUI 和用戶 體驗都是怎么做的呢？他說，這個公司專門有個部門來搞， 他們不管的。言外之

34、意，你去了，也就是堆砌代碼，有想 法？一邊寫代碼去。所以我前面說的，看了那么多設(shè)計方 面的還有重構(gòu)之類的書，都似乎是白看了，或許你去了有 想法也不會被實現(xiàn)。恩，這個想下也是正常，公司注重的 是商業(yè)，并不是你的這個想法是不是夠新穎吧！所以大家 看人家的要求的時候，就好好關(guān)注下前面提到的各種技術(shù)， 比如 js、css、sql、數(shù)據(jù)結(jié)構(gòu)之類的，后面說有啥創(chuàng)新精 神啊之類的全部忽略好了暫時是這個看法，不知道別的 公司怎么樣了 再后來就沒后來了，也沒有電話沒有任何通知，當(dāng)時 有一個和我一起面試的同學(xué)，他當(dāng)天就接到電話通知二面 了，據(jù)說面試他的是一個搞前端的，丫，起碼有的聊??！ 總的來說還是哥太水了囧，好

35、好學(xué)習(xí)技術(shù)吧，以后好 好堆砌代碼才是王道！ 總結(jié)起來，這樣的大公司分工太明確，如果想著去學(xué) 習(xí)各個方面的同學(xué)，要好好想清楚了！ 資料來源：中國教育在線 http:/ 篇八：騰訊實習(xí)生 web 前端 JS 開發(fā)工程師面試經(jīng)歷 在騰訊面試之前我申請了淘寶的前端，可是筆試就被 淘寶鄙視了。這之前還有一個百度內(nèi)推的，二面已經(jīng)結(jié)束 了，不過還真的不知道結(jié)果，人家給我答案是這周之內(nèi)， 如果沒有過的話，還有三面，如果過了的話，直接就可以 拿 offer。 相比之下騰訊是很人性化的，不放過一個有才能的人。 從筆試就可以看出來，我當(dāng)時申了，但是沒有申請 崗位所以最后只能去霸筆。到了那里以后才發(fā)現(xiàn)霸筆的人 真的不

36、少啊！筆試完以后晚上就聽說有同學(xué)收到面試的通 知了，我那個心里著急啊，不過后面一個牛人告訴我說大 家都過了，那時候開心啊！然后去站上查看了一下自己的 面試時間和地點，唉那個悲劇啊。我本人做一些兼職給一 群中學(xué)生上課，每次星期天都要上到下午六點回來，面試 時間居然是下午 5 點，我也顧不了多少了，直接請假，唉！ 被那個負(fù)責(zé)人批了一大堆。由于去那里的時候在路上我一 直用手機看面經(jīng)，有時候看著我都想吐了。下午四點多我 就帶上了筆記本（這里強調(diào)一下，如果是技術(shù)的最好帶上 自己的作品，那樣可能面試的時候主動權(quán)會掌握在自己手 里）趕去了華工。 騰訊一面 一面的人還真的很多呀，在面試地點看到了很多牛人， 比

37、如說我的研究所師兄，我們班的百度牛人。簽到完以后 我就走到了一個房間門口，乍一看，哇那么多人在排隊， 最后一個 MM 告訴我她們面試的是產(chǎn)品的，幸好，不然會等 死人的。我面試的是前端 js，大概 5 點左右的時候一個 gg 把我叫了進去，進去以后就感覺一種親切感沒有之前的緊 張感，然后面試官叫我等等，估計他還有些事情處理，之 后我看到我的筆試成績丟人啊（不好意思說了）！然后面 試官叫我自我介紹一下，然后我就 balabala 的說了一下自 己對 web 開發(fā)的興趣以及一些自己開發(fā)的項目，然后我就 把筆記本帶來的項目一一介紹給他看，似乎他只看我運行 的結(jié)果。然后就開始問我一些簡歷上的問題. 面試

38、官：你講一下你的學(xué)生實踐工作吧。然后我就說 了一下自己擔(dān)任過學(xué)生處助理、院的團委副部長，然后就 是講了一下自己的學(xué)生工作的體驗和感受。 面試官：你有學(xué)過數(shù)據(jù)結(jié)構(gòu)是嗎？那我就問你一些問 題。 資料來源：中國教育在線 /retype/zoom/23e934925fbfc77da269b158pn=1 padding: 0 9. text-align:center; margin: 0; padding: 0 10.  11.  12.  13. 居中 14.  15. 中 margin 和 padding 的區(qū)別 margin 是外邊距，屬于元素之外，相鄰元

39、素的 margin 可以融合。 padding 是內(nèi)邊距，在元素之內(nèi)，相鄰元素的 padding 不可融合。 中如何檢測一個變量是一個 String 類型？請寫出函數(shù) 實現(xiàn) function(obj) returntypeof(obj) = ”string”; 5.頁中實現(xiàn)一個計算當(dāng)年還剩多少時間的倒數(shù)計時程 序，要求頁上實時動態(tài)顯示“年還剩天時 分秒” 這個看我論壇右上角的就知道了 6.如何控制頁在絡(luò)傳輸過程中的數(shù)據(jù)量 題目貌似有問題，應(yīng)該是減少數(shù)據(jù)量吧。 最顯著的方法是啟用 GZIP 壓縮。此外保持好的編碼習(xí) 慣，避免重復(fù)和 css、 JavaScript 代碼，多余的 HTML 標(biāo)簽和屬

40、性。 7.補充代碼，是鼠標(biāo)單擊后 Button1 到 Button2 的后 面 var parent =; (this); (this); 中，將 a、b 打包為，命令是（ ） 不知道。 、Ajax 各自的優(yōu)缺點，在使用中如何取舍？ Flash 的缺點是需要客戶端安裝 Flash 插件，比較大， 且更改了默認(rèn)的 HTML 頁面行為；但可以方便地實現(xiàn)很多特 效及動畫，且具有較高權(quán)限。 Ajax 的缺點是編程較為復(fù)雜，需要服務(wù)器端的支持， 能實現(xiàn)的效果只能是 DOM API 提供的，權(quán)限很低，較難跨 域；但可以顯著加快頁面的載入速度和用戶體驗。 此外，二者都不能被搜索引擎索引（Google 已支持

41、 Flash 文本的索引） ，不利于 SEO。 建議:重要和關(guān)鍵部分 直接用 HTML，交互部分可以使用 Ajax，復(fù)雜的動畫可采用 Flash。 百度 XX 1、JS 主要數(shù)據(jù)類型？5 分 答：主要的類型有 number、string、object 以及 Boolean 類型,其他兩種類型為 null 和 undefined。 2、img 的 alt 和 title 的異同？10 分 答：title 屬性為設(shè)置該屬性的元素提供建議性的信息。 比如為鏈接添加描述性文字。 為不能顯示圖像、窗體或 applets 的用戶代理（UA） ，alt 屬性用來指定替換文字。 使用 alt 屬性是為了給那些

42、不能看到你文檔中圖像的瀏覽 者提供文字說明。 3、CSS 的 JS 調(diào)用？如 font-family, -moz-border- radius 10 分 答：fontFamily、MozBorderRadius 4、CSS 布局：兩列，左邊寬度自適應(yīng)，右邊寬度固 定 200px 15 分 1. #box1width:100%;height:600px;position:relative; 2. #left1margin-right:200px;border:1px solid red;height:100%; 3. #right1width:200px;height:100%;position

43、:absolute;t op:0px;right:0px;border:1px solid blue; 4. 5. 6. 7. 5、js 對象的深度克??？20 分 1. =function() 2. function cloneObj() 3. =this; 4. var obj=new cloneObj(); 5. for(var o in obj) (typeof(objo)=“object“)objo=objo.deepClone(); 7. return obj; 8. 6、動態(tài)打印時間，格式為 yyyy-MM-dd hh:mm:ss 15 分 1. function printTim

44、e() 2. var timer1=new Date(); 3. var timer=(); 4. timer=(/年月/g,“-“); 5. timer=(/日/,“); 6. =timer; 7. setInterval(“printTime()“,1000); 7、如何提高頁運行性能？20 分 沒寫。 8、linux 下刪除當(dāng)前目錄下擴展名為 c 的文件（如， ） 5 分 rmr *.c find. -name “*.doc” -type f -exec cp /tmp/doc ;找到當(dāng)前目錄（.）下擴展名為(doc)的文件并 拷貝到指定目錄【注意-type f 指普通文件，-exec

45、ls-l列 出文件，最后加上】 cpoptions source dest 復(fù)制 9、flash 和 flash 在面向?qū)ο蠓矫娴漠愅?0 分 答：面向?qū)ο蠓矫妫?javascript，像 java。 到了 AS ,面向?qū)ο蟊灰肓?，但它實質(zhì)上是動態(tài)腳本 語言，雖然已經(jīng)有了類的概念和 class 關(guān)鍵字，但對象支 持還是基于類似 JavaScript 的 prototype 機制動態(tài)繼 承。 同時支持靜態(tài)類型，即基于類的繼承方式；以及動態(tài) 類型，即基于 prototype 的繼承方式。推薦用靜態(tài)類型。 10、Flash、Ajax 各自的優(yōu)缺點，在使用中如何取舍？ 10 分 1、Flasha

46、jax 對比 Flash 適合處理多媒體、矢量圖形、訪問機器；對 CSS、處理文本上不足，不容易被搜索。 Ajax 對 CSS、文本支持很好，支持搜索；多媒體、矢 量圖形、機器訪問不足。 共同點：與服務(wù)器的無刷新傳遞消息、用戶離線和在 線狀態(tài)、操作 DOM 2、項目中遇到什么問題？如何解決？ 前端題目總結(jié) HTML 相關(guān) 1. 標(biāo)簽的定義與用法。 2. 塊級元素和行內(nèi)元素都有哪些？ 3. 你真的了解 HTML 嗎？ 雅虎面試題把前面黃底那段 拿去搜索下就知道了(曾在某浪公司面 試的時候被問到過，確實是很好的問題)。 CSS 相關(guān) 1. 介紹所知道的 CSS hack 技巧(如：_， *， ，

47、9， !important 之類)。 2. 介紹 CSS 盒模型。 3. CSS 層疊是什么？介紹一下。 4. 都知道哪些 CSS 瀏覽器兼容性問題。 5. 有時會被問到些刁鉆點的題，比如 position 值都 有哪些，CSS3 都有哪些新內(nèi)容. JavaScript 基礎(chǔ)相關(guān) 1. HTTP 協(xié)議的狀態(tài)消息都有哪些？(如 200、302 對應(yīng) 的描述) 2. AJAX 是什么 AJAX 的交互模型(流程) AJAX 跨域的 解決辦法 3. 同步和異步的區(qū)別 4. 簡述 JavaScript 封裝。 5. JavaScript 繼承有哪兩種形式形式，進行描述。 6. 什么是閉包？以下代碼點擊 會輸出什么？為什 么？能大概說明白的話繼續(xù)問能想出幾 種解決辦法。 答案: 5 解釋: 由于閉包 i 被保留在內(nèi)存中,alert 顯示的是 i 當(dāng)前的值, 最后一次 i 會導(dǎo)致 i 為 5