模塊A-正式題-6.21

1、第 46 屆世界技能大賽武漢市選拔賽網(wǎng)站設(shè)計與開發(fā)賽項模塊A 響應(yīng)式單頁設(shè)計與重構(gòu)第46屆世界技能大賽網(wǎng)站設(shè)計與開發(fā)項目武漢市選拔賽組委會二零一九年 五月Version: 2.0Date:2019.6.219 of 9參賽須知一、選手須憑本人身份證原件（或帶照片的社會保障卡、公安局核發(fā)的機(jī)動車駕駛證、初中職學(xué)校在校生學(xué)生學(xué)生證等有效證件原件）進(jìn)入賽場，證件個人信息須與報名信息一致，否則不得參加比賽。（以上證件復(fù)印件無效）二、選手參加考試，遲到三十分鐘以上不得入場。三、選手應(yīng)愛護(hù)賽場設(shè)施設(shè)備，操作規(guī)范，注意安全。違反安全操作規(guī)定造成的損失由考生負(fù)責(zé)。四、選手在比賽中嚴(yán)禁使用各類通訊工具。五、選手

2、必須嚴(yán)格遵守考場有關(guān)規(guī)定，嚴(yán)禁作弊或代考，自覺服從裁判長、裁判員、考場工作人員的管理。六、選手著裝、用品等在外觀上不應(yīng)顯示選手所在單位等個人信息。七、選手參加比賽，應(yīng)穿戴整潔，衣冠不端者不可入內(nèi)。八、禁止在競賽期間對賽場設(shè)施、設(shè)備、賽項題目或項目的其他組成部分進(jìn)行攝影、攝像。九、本項目沒有特別安全規(guī)定，請注意賽場的用電安全。非賽場管理人員未經(jīng)允許，不能隨意接拉電源和用電設(shè)備。十、技能競賽場地禁止使用的材料和設(shè)備：ü 額外的軟件。ü 平板電腦。ü 存儲盤（數(shù)據(jù)存儲設(shè)備）。ü 不能使用任何非賽方提供的內(nèi)置存儲功能的設(shè)備。十一、賽場監(jiān)考工作人員有權(quán)禁止選手在比

3、賽中智能穿戴設(shè)備的使用。比賽注意事項1.選手在上交時，通過FTP上交作品，并自行檢查是否上傳成功。2.選手提前離場時，需舉手示意，監(jiān)考裁判記錄選手離場時間。3.比賽時間結(jié)束時，所有選手必須停止手上的所有操作。4.超過規(guī)定時間后完成的內(nèi)容將不予評分。模塊A：響應(yīng)式單頁設(shè)計與重構(gòu)比賽時間：180 分鐘一、 任務(wù)描述法蘭克福車展（IAA）于1897年在柏林創(chuàng)建，這就是眾所周知的柏林車展。作為世界最大車展之一，IAA汽車因奧運(yùn)會而著名，每兩年舉辦一次。IAA即將于2019年9月11-13日在法蘭克福舉行。舉辦方想創(chuàng)建一個網(wǎng)站來顯示IAA最新新聞、信息，以及實(shí)現(xiàn)在線訂票，顯示廣告商的功能。二、 具體任務(wù)

4、你的任務(wù)是設(shè)計一個主題“IAA 2019”的基于響應(yīng)式的首頁設(shè)計稿，并制作成html格式的網(wǎng)頁，以便顯示在不同分辨率的多個設(shè)備上，這個首頁寬度符合以下響應(yīng)式標(biāo)準(zhǔn)：Ø Desktop 桌面端：1330px。Ø Tablet 平板端：768px。Ø Mobile 移動端：480px。三、 任務(wù)要求（1）你設(shè)計的首頁中必須包含有以下欄目。Ø Page title 頁面標(biāo)題Ø Banner image 橫幅圖片Ø Countdown timer 倒計時器（2019年9月11日18:00）Ø News posts 新聞資訊Ø

5、 Event description (placeholder text) 事件描述（占位符文本）Ø Sponsors Online exhibition 贊助商產(chǎn)品展示Ø Tickets Service 訂票服務(wù)Ø Location of the IAA IAA地理位置Ø Button to open the hidden sidebar 可打開/隱藏側(cè)窗口的按鈕Ø Footer with copyrights and social media links 頁腳，包含版權(quán)和媒體鏈接（2）必要元素的Style Guide（風(fēng)格指南），包括顏色，

6、大小和字體Ø LOGO 標(biāo)志Ø Buttons 按鈕Ø Backgrounds背景Ø Main title主題Ø Subpage title子頁標(biāo)題Ø Section title欄目標(biāo)題Ø Paragraphs 段落Ø Navigation導(dǎo)航Ø vehicle model icon 車型圖標(biāo)Ø flink icon 友鏈圖標(biāo) *在風(fēng)格指南中添加注釋，指定如何使用logo和交互元素。（3）側(cè)窗口一般是隱藏的，僅僅顯示一個小圖標(biāo)。當(dāng)點(diǎn)擊這個小圖標(biāo)時，側(cè)窗口顯示或隱藏。（4）側(cè)窗口包含搜索欄，贊助商

7、logo和日歷。（5）在網(wǎng)頁的特定區(qū)域設(shè)計頁面計時器，風(fēng)格要醒目，以便吸引用戶注意。（6）倒計時器在頁面中以秒為單位實(shí)時更新，截止時間為2019年9月11日18:00。（7）頁腳包含版權(quán)和至少三個友情鏈接。（8）舉辦方在主頁頁面上展示贊助商的最新產(chǎn)品。產(chǎn)品展示區(qū)設(shè)計成兩塊。一塊是產(chǎn)品縮略圖，另一塊是展示區(qū)。每一塊區(qū)域包含：一張圖片以及贊助商提供的車輛名稱、公司名稱、車型圖標(biāo)和URL鏈接。這些內(nèi)容應(yīng)該在相應(yīng)的區(qū)域中顯示，使用某種交互功能使其可以完全顯示出來。（9）你需要設(shè)計的車型圖標(biāo)有：Ø Saloon Car轎車Ø Sporty Car 跑車Ø Pickup Tr

8、uck皮卡Ø Multi-Purpose Vehicles多用途汽車（10）網(wǎng)頁布局要與設(shè)計稿保持一致，尺寸隨著瀏覽器窗口改變而改變的同時不破壞設(shè)計，尺寸范圍為：480px - 1330px。根據(jù)W3C標(biāo)準(zhǔn)使用HTML和CSS，以獲得恰當(dāng)?shù)腟EO（搜索引擎優(yōu)化）支持。（11）CSS 代碼中至少添加了五條有用的注釋，以便于維護(hù)。（12）你的 HTML5 代碼和 CSS 代碼能通過 W3C 網(wǎng)站官方驗(yàn)證，HTML和CSS不能有語法錯誤。（13）為了保證車展的質(zhì)量，主辦單位需要在主頁設(shè)計一個Tickets Service訂票服務(wù)。申請人可以按順序提交一份包含“applicant name(

9、申請人姓名)”，“visiting date（參觀日期）（9月12日、13日、或14日）”，“Contact information(聯(lián)系方式)”，“numbers of attendees（參會人數(shù)，最多5人)”的訂單。四、 文件命名要求該設(shè)計稿命名應(yīng)該為：Desktop_IAA，Tablet_IAA 和 Mobile_IAA。Style Guide（風(fēng)格指南）和設(shè)計稿應(yīng)保存的文件格式為* .PNG和.PSD或.AI。你可以為每個分辨率創(chuàng)建額外的圖像（可選），以突出顯示隱藏的元素、動畫或任何有助于網(wǎng)站開發(fā)的其他信息。Style Guide（風(fēng)格指南）的設(shè)計風(fēng)格要符合網(wǎng)站未來發(fā)展，您必須使用提

10、供的兩個logo之一,可以改變logo的顏色。網(wǎng)頁文件格式為*.HTML。五、 FTP上交要求(1). 所有選手的FTP地址全部為：(2). FTP賬號已提前粘貼到各選手的操作工位電腦屏幕前，請自行輸入。(3). 將模塊A的所有文件及文件夾存到一個統(tǒng)一的文件夾“A”中，然后通過FTP上傳，并可以在服務(wù)器上進(jìn)行測試。測試地址為：/FTP賬號/A(4). 各選手作品源碼和文件夾中不得透露任何關(guān)于選手所在單位等個人信息，一經(jīng)發(fā)現(xiàn)取消比賽資格并上報上級部門。六、 媒體文件說明名稱描述cars車圖片素材Dummy Text文本素材jQueryjQuery庫素材other圖片素