web前端實(shí)習(xí)報(bào)告

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

38、官：你講一下你的學(xué)生實(shí)踐工作吧。然后我就說 了一下自己擔(dān)任過學(xué)生處助理、院的團(tuán)委副部長，然后就 是講了一下自己的學(xué)生工作的體驗(yàn)和感受。 面試官：你有學(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 不可融合。 中如何檢測一個(gè)變量是一個(gè) String 類型？請寫出函數(shù) 實(shí)現(xiàn) function(obj) returntypeof(obj) = ”string”; 5.頁中實(shí)現(xiàn)一個(gè)計(jì)算當(dāng)年還剩多少時(shí)間的倒數(shù)計(jì)時(shí)程 序，要求頁上實(shí)時(shí)動(dòng)態(tài)顯示“年還剩天時(shí) 分秒” 這個(gè)看我論壇右上角的就知道了 6.如何控制頁在絡(luò)傳輸過程中的數(shù)據(jù)量 題目貌似有問題，應(yīng)該是減少數(shù)據(jù)量吧。 最顯著的方法是啟用 GZIP 壓縮。此外保持好的編碼習(xí) 慣，避免重復(fù)和 css、 JavaScript 代碼，多余的 HTML 標(biāo)簽和屬

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

41、 Flash 文本的索引） ，不利于 SEO。 建議:重要和關(guān)鍵部分 直接用 HTML，交互部分可以使用 Ajax，復(fù)雜的動(dòng)畫可采用 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、動(dòng)態(tài)打印時(shí)間，格式為 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、如何提高頁運(yùn)行性能？20 分 沒寫。 8、linux 下刪除當(dāng)前目錄下擴(kuò)展名為 c 的文件（如， ） 5 分 rmr *.c find. -name “*.doc” -type f -exec cp /tmp/doc ;找到當(dāng)前目錄（.）下擴(kuò)展名為(doc)的文件并 拷貝到指定目錄【注意-type f 指普通文件，-exec

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

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

47、9， !important 之類)。 2. 介紹 CSS 盒模型。 3. CSS 層疊是什么？介紹一下。 4. 都知道哪些 CSS 瀏覽器兼容性問題。 5. 有時(shí)會(huì)被問到些刁鉆點(diǎn)的題，比如 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 繼承有哪兩種形式形式，進(jìn)行描述。 6. 什么是閉包？以下代碼點(diǎn)擊 會(huì)輸出什么？為什 么？能大概說明白的話繼續(xù)問能想出幾 種解決辦法。 答案: 5 解釋: 由于閉包 i 被保留在內(nèi)存中,alert 顯示的是 i 當(dāng)前的值, 最后一次 i 會(huì)導(dǎo)致 i 為 5