配合物結(jié)構(gòu)化學(xué)網(wǎng)站設(shè)計(jì)書

緣 ................................................................作 軟件工 項(xiàng)目計(jì)劃進(jìn) 風(fēng) 布 結(jié) 項(xiàng)目流 特 工作日 2014-12- 2014-12- 2014-12- 2014-12-20——2014-12- 2014-12-29——2014-12- 2015-01- 2015-01-03——2015-01- 2015-01-05——2015-01- 測 問題發(fā) Yslow測 兼容性測 項(xiàng)目監(jiān) 項(xiàng)目小 課程感 緣每年的“化學(xué)多”課程的期末作業(yè)，都是個人單槍匹馬的完成一個完整的項(xiàng)目——一個簡單靜態(tài)的設(shè)計(jì)。從規(guī)劃、設(shè)計(jì)到制作、測試，全部由一個人完成，這實(shí)際上是對個人綜合能力的一次考驗(yàn)與。這種能力，不僅是計(jì)算HTML+CSS+JS就這樣，我的設(shè)計(jì)與制作開始了。對于的，我思考再三，決定選擇配合物結(jié)構(gòu)作為介紹的，物的結(jié)構(gòu)理論及具體物質(zhì)的結(jié)構(gòu)具有濃厚的。同時也想以此為契機(jī)，在這個方面展開更次的探討與研究。同時，在制作交流的工程中，也可以使同伴能了解配合物結(jié)構(gòu)方面相關(guān)的知識，可謂是一舉多得，作程設(shè)14過CJava等程序設(shè)計(jì)，與ASP、JSP、JavaScript/CSS/HTML等網(wǎng)頁設(shè)計(jì)過Adobe系列的PSDW與AE 此處的皂 3-1軟件工軟件圖 軟件名 版CCCCAdobeAdobeCCAdobeXIPro5.01UltraOfficeInternetChrome39.0.2171.95MozillaVMwareWindowsWindows4-1項(xiàng)目計(jì)劃5-1風(fēng)本的風(fēng)格，基本是按照“厚樸文化”站點(diǎn)布局而成的，基本是采用了頭換的大圖Slider與左右兩欄式的Content兩部分尾部則是一些 信息與。由于本的偏向于理論，故選擇的藍(lán)色作為背景色。考慮到是年輕人在配色方面一定程度上參考了AdobeColorCC的配色方案。但由于并沒有特主色調(diào)：輔助色：布7-17-27-3結(jié)├典型習(xí)題（一├典型習(xí)題（二├典型習(xí)題（三├功能├地圖8- 地圖8-2知識導(dǎo)圖 地項(xiàng)目流設(shè)計(jì)定設(shè)計(jì)定網(wǎng)頁重測Bug修規(guī)劃書完9-1特1Slider代碼我并不能很好的閱讀、理解，所以才用了另一個Slider插件——Rsliders4KB的小插件提供了多種可調(diào)節(jié)的模式與選項(xiàng)。同時，在之后的制作之中我發(fā)現(xiàn)，由于部分同學(xué)不能很好的讀懂HopeSlider代碼，從而發(fā)生了Slider“歪掉”情況的發(fā)生。2、在內(nèi)容方面，我選取了大量與理論知識相關(guān)的內(nèi)容，同時了、3Footer采用了隨頁面移動始終固定于底部的顯示方式，并加入了“回到頂部”的功能。便于訪客在閱讀較長文章時快速返回頁面頂部。老版本的IE的“”與老舊，仍存在兼容性問題。限于時間關(guān)系，并沒有進(jìn)5Photoshop工作日今天晚上，偶然間轉(zhuǎn)到了中學(xué)院的，發(fā)現(xiàn)是了其中的“厚樸”，便轉(zhuǎn)到厚樸的想起來化學(xué)多的期末決定開始我的制作歷程首先便是確定的，考慮再三，我決定制作一個是配合物結(jié)構(gòu)理論的。采用這個，主要還是源于個人的吧。今天上完的課，我決定先從網(wǎng)頁配色的設(shè)計(jì)入手，首先想到的當(dāng)然是大名鼎鼎的AdobeColor（原Kuler，給出的配色方案如下圖：11-1Kuler色。即主色調(diào)：#d6efff與輔助色：#2a77b3從今天開始設(shè)計(jì)源圖。源圖是整個創(chuàng)立之初的模板。我對源圖本身的要求是精確。因?yàn)橹挥性O(shè)計(jì)精確、切片精確，才能使得切片出來的大小合適，但其中從LOGO、SliderContent的內(nèi)容展示方式，都經(jīng)過了自己的安排與設(shè)計(jì)調(diào)整了Slider的高度并用Photoshop繪制了三幅同內(nèi)容相關(guān)的Slider，本規(guī)模較小，一級欄目下的頁面較少，所以將每行的卡片數(shù)量減少到兩個。容?？紤]到在一級欄目頁導(dǎo)航到其他頁面是較為方便的，故在此處刪去了Navigation下方的導(dǎo)航。同時在左側(cè)加入了一條漸變色的彩帶，使頁面顯得不太空洞。漸變色彩帶上方的顏色為1Slider我在Slider上花費(fèi)的時間是最多的。因?yàn)樘峁┑腟lider代碼我并不能的是我無法用這段代碼實(shí)現(xiàn)要的拉伸頁面寬度Slider自動調(diào)整的效RsliderJQuery實(shí)現(xiàn)了要的切換效果。經(jīng)過測試，可以實(shí)現(xiàn)要的效2Bug在重構(gòu)過程中，經(jīng)常發(fā)生層塊被撐破、文字沒有對齊的狀況。調(diào)試Bug的過程是相當(dāng)痛苦的，有時候甚至要把方才很久做的代碼推倒重來。欄目頁的重構(gòu)，的建立與超的連接我認(rèn)為是比較麻煩的地方。這一步，提前完成的欄目結(jié)構(gòu)圖幫了我大忙。同時我在底部的Footer上添加了“回到頂端”的功能，便于訪客在瀏覽較長文完成了的重構(gòu)以后，便進(jìn)入了測試的步驟。為了更好的測試在真實(shí)情況下的效果，我將其上傳至遠(yuǎn)端服務(wù)器之中。服務(wù)器的基本信息如下：Linux2.6.32-531.23.3ApacheXeonE3-1230客戶端基本信息如下：Windows8.1SONYVaioPro131920x發(fā)現(xiàn)的問題見“測試部分測1Linux對于大小寫敏感的緣故，HTML代碼中處理結(jié)果：正常。解決方法：壓縮了部分，JQuery庫了采用CDN加速的云端庫Photoshop自動生成的切片<table>布局采用無邊框的<iframe>將地圖頁面嵌入。解決方法：應(yīng)用DreamweaverCC2014上的檢查器命令，手動修復(fù)錯誤的處理結(jié)果：正5、存在問題：存在部分未使用的文解決方法：應(yīng)用DreamweaverCC2014上的檢查器命令，刪除未使Yslow12-1

Yslow87分，為B，忽略服務(wù)器影響帶來的評分降低。主內(nèi)重復(fù)可以直接從緩存調(diào)用?？梢约涌熘貜?fù)速度，提高客戶體驗(yàn)。改進(jìn)措施：在.htaccess中添加周期頭2Gzip3JSJS文件加載較慢，JS代碼，提高訪客體驗(yàn)。修改JS位置后問4CSS與JS代碼：考慮到易讀性，且實(shí)際上CSS與JS代碼并不很長，故未采12-2YSlow可以看到（尤其是Slider）占據(jù)的流量還是很大的，但在保證質(zhì)量的情況下Slider進(jìn)行壓縮了，故不處理。版的IE、Firefox、Chrome測試通過，完美顯示。使用IETester的IE8-10模式測試，完美顯示。項(xiàng)目監(jiān)監(jiān)理人：藍(lán)天 存在問 修改方 結(jié)進(jìn)度過于拖Copyright并不處于最底CSS代碼，使其13-1項(xiàng)目小碼部分摘自Hope，部分是用的插件。JQery屏高分辨率顯示器的應(yīng)用ML5的興起與ash的都使得我原有的那些知識變得陳舊無