❶ Web發布，網頁背景圖非常大，切片切出50多行和列，還要在背景圖上動態顯示很多數據，該如何做請大俠指點
你是想在Web上顯示OPC採集過來的數據吧？至於DIV什麼的那隻是你web的布局和分塊設計。最根本的問題在於web能實時顯示OPC數據，有幾種方法：1、Active技術；2,、webservice，Soap；3、Flash……等。
如果你已經解決了以上問題，那就得看你所用的開發語言了，如果.Net的話可以直接用控制項、Ajax等實現。
❷ 怎樣用web代碼製作gif動態圖片
用U5軟體，首先幀盡量減少，點文件，優化向導，抖動數值為0，顏色數量為25以上就行，低於25畫面就太差了。我做一個24.1K，我還可以降低到12K。
一
❸ 你好，我用webuploader.html5only.min.js實現批量圖片上傳，我該怎麼在action中獲取上傳的那些文件呢
1.1 分片、並發
分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。
當網路問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
1.2 預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網路數據傳輸。
解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。
1.3 多途徑添加文件
支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制），Ctrl + V便可添加此圖片文件。
1.4 HTML5 & FLASH
兼容主流瀏覽器，介面一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。
同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。
1.5 MD5秒傳
當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改演算法，取段md5，可大大提升驗證性能，耗時在20ms左右。
1.6 易擴展、可拆分
採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。
採用AMD規范組織代碼，清晰明了，方便高級玩家擴展。
2、引入資源
2.1 下載包內容
├── Uploader.swf // SWF文件，當使用Flash運行時需要引入。
├── webuploader.js // 完全版本。
├── webuploader.min.js // min版本
├── webuploader.flashonly.js // 只有Flash實現的版本。
├── webuploader.flashonly.min.js // min版本
├── webuploader.html5only.js // 只有Html5實現的版本。
├── webuploader.html5only.min.js // min版本
├── webuploader.withoutimage.js // 去除圖片處理的版本，包括HTML5和FLASH.
└── webuploader.withoutimage.min.js // min版本
2.2 或者直接使用由staticfile提供的cdn版本，或者下載Git項目包。
// SWF文件，當使用Flash運行時需要引入。
├── http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf
// 完全版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js
// 只有Flash實現的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.min.js
// 只有Html5實現的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.min.js
// 去除圖片處理的版本，包括HTML5和FLASH.
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.js
└── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.min.js
2.3 DIY打包
WebUploader文件打包藉助了Grunt工具來實現
2.3.1 環境依賴
1.git命令行工具
2.node & npm命令行工具
3.grunt (npm install grunt-cli -g)
2.3.2 編譯代碼
1.克隆 webuploader git倉庫，git clone https://github.com/fex-team/webuploader.git。
2.安裝node依賴，npm install。
3.執行grunt dist，此動作會在dist目錄下面創建合並版本的js, 包括通過uglify壓縮的min版本。
2.3.3 配置
打開webuploader倉庫根目錄下面的Gruntfile.js文件, 代碼合並有buildtask來完成。找到build配置項。
Gruntfile.js已經配置了一個自定義合並的demo. 打包只支持HTML5的版本
// 自己配置的實例
// glob語法。
custom: {
preset: "custom",
cwd: "src",
src: [
'widgets/**/*.js',
'runtime/html5/**/*.js' ],
dest: "dist/webuploader.custom.js"
}
3、angular指令——<web-uploader>
3.1 指令功能
添加一個上傳文件按鈕，可以自行配置上傳文件的類型和過濾規則，且在彈出的模態框中進行操作，支持連續上傳，分類選擇上傳
3.2 使用說明
這里只是使用說明，可能會加一些注意事項，具體參數或者變數說明請參看後面
3.2.1 頁面添加一個指令
<web-uploader class="btn btn-info" type="image" accept="accept">uploader</web-uploader>
3.2.2 配置上傳類型和過濾規則
上傳類型
type有四種類型，分別為
image：圖片
video：音視頻
flash：flash
file：辦公文檔，壓縮文件等等
過濾規則
accept有四個對象屬性，屬性中包含標題、允許文件後綴、允許的mimetype
3.2.3 指令中綁定彈出模態框的事件
web-uploader這個指令中其實只做了一件事，給元素本身綁定彈出模態框的事件，具體上傳文件是在模態框中完成的
3.2.4 初始化uploader類，配置相關屬性
在模態框控制器中用到了$timeout
$timeout(function(){
//這里是上傳配置代碼
},0)
因為配置uploader時需要事先准備好dom元素，angular打開模態框是非同步而JavaScript是單線程，所以實際上在執行模態框控制器中的代碼時，模態框並沒有打開，也就是dom並沒有載入完成，這會導致WebUploader報a.runningtime is not a function...的錯誤
3.3 指令詳細說明
3.3.1 父級controller中的配置
.controller('myCtrl',['$scope', '$modal', function($scope, $modal){
//配置允許上傳的類型 圖片/音視頻/flash/文件
$scope.accept = {
//圖片
image: {
title : 'Images',//標題
extensions : 'gif,jpg,jpeg,bmp,png,ico',//允許上傳文件的後綴
mimeTypes : 'image/*'//允許的mimetype
},
//音視頻
video: {
title : 'Videos',
extensions : 'wmv,asf,asx,rm,rmvb,ram,avi,mpg,dat,mp4,mpeg,divx,m4v,mov,qt,flv,f4v,mp3,wav,aac,m4a,wma,ra,3gp,3g2,dv,vob,mkv,ts',
mimeTypes : 'video/*,audio/*'
},
//flash
flash: {
title : 'Flashs',
extensions : 'swf,fla',
mimeTypes : 'application/x-shockwave-flash'
},
//辦公文檔，壓縮文件等等
file: {
title : 'Files',
extensions : 'zip,rar,ppt,pptx,doc,docx,xls,xlsx,pdf',
mimeTypes : 'application/zip,application/x-rar-compressed,application/vnd.ms-powerpoint,application/vnd.openxmlformats- officedocument.presentationml.presentation,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms- excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
}
};
}])
3.3.2 指令web-uploader
.directive('webUploader', ['$modal', function($modal){
return{
restrict: 'AE',
scope: {
accept: '=accept'
},
link: function($scope, $element, $attr){
$element.bind('click',function(){
var modalInstance = $modal.open({
controller: 'modalCtrl',
templateUrl: 'template/webuploader.tpl.html',
size:'lg',
resolve: {
items: function(){
return {
accept: $scope.accept,
type: $attr.type
};
}
}
});
modalInstance.result.then(function(returnStatus){
console.log(returnStatus);
},function(){
console.log('Modal dismissed at: ' + new Date());
});
});
}
};
}]);
❹ web網頁設計中怎麼做頁面背景圖片
1.確定網頁的主體色調風格。
我們製作自己的網態帆頁首先應該對自己的網頁有一個整體的規劃，是建一個什麼類型的網站，網站主色調使用哪種顏色、設計布局採用什麼樣的方式等這些都需要有一個很好的規劃。
2.規劃網站的整體布局——導航、按鈕、圖片、文字的排版方式。
做什麼事都不能盲目的沒有目的的進行，那樣只能談轎浪費時間浪費精力，在我們製作網頁之前一定要對網頁的基本元素進行一些設計。可以簡單的畫草圖，或者瀏覽幾個自己比較喜歡的網站學習借鑒。
3.准備和歸類素材——圖片、音頻、視屏、文章等。
製作一個網頁需要大量的文件，我們必須先將這些不同類型的文件進行歸類放置，整理到一個文件夾中。
打開Dreamweaver軟體，新建一個站點，然後在站點下建立不同的文件夾存放素材。
.4建立自己的主頁，按照之前的定的風格設計布局。
不要急著添加圖片和文字，先將導航欄，標題欄和內容欄都規劃好然後在進行素材的導入。注意無論是文件夾的名還是素材名最好使用英文而不是中文。中文狀態很容易報錯，文件添加後就不要更改文件路勁了，否則會導致文件的丟失。
5.製作網頁是一個非常復雜的過程，如果想從頭到尾自己製作一個網頁的話是很難說清楚的，所以這里就分享一個很簡單的方法。
找到一個適合自己風格或是自己比較喜歡的網頁，右擊滑鼠——另存為。
這時瀏覽器就會將這個網頁中的所有的元素都復制下來，存放到一個文件夾中。
6.打開Dreamweaver軟體代開剛剛下載的網頁，這時Dreamweaver中就會顯示你下載網頁的所有元素，不會出現丟失的情況。
7.替換網頁中的元素即可。
選擇需要進行修改的圖片或是文字直接更換即可。帆侍雹選擇一個元素然後在下面的屬性欄中進行更換即可。同時還可以更換圖片的大小和其他的屬性。
8.按下F12進行預覽效果即可。不滿意的地方進行修改，一定要注意隨時保存文件。
❺ 網頁設計怎麼把多張圖片排在一列
網頁設計把多張圖片排在一列的方法是使用代碼：
mg {width:50px; float:left; border:0px; margin:0px 0px; padding:0px 0px;}。
</style>。
<img src="C:... 005.jpg" width=70 height=15 hspace=367>。
<img src="C:... 004.jpg" width=70 height=15 hspace=437>。
<img src="C:... 003.jpg" width=75 height=15 hspace=507>。
這個代碼需要注意的是：
就可以讓圖片在顯示的時候並列排成一排，圖片與圖片之間無縫連接。
div元素是後斷行，前不斷行，span元素是前後都不斷行。
ul,ol,dd,dt,li,h1,h2,h3,h4,h5,h6,p元素是前後都斷行，a,img我個人認為他默認的排列方式應該是跟span是一樣的。
這樣的話，也就是當你在img與img之間只要敲上一個回車符號的時候，也就有了一個間隙，你可以這樣是試試在所有img之間不要加任何東西，依次排下去。切忌不要在img之間敲回車符號。
❻ WEB網頁設計常見布局
我們一般的版式設計除了平面設計，就是網頁設計和互聯網產品，比如一些移動端手機APP這些界面的設計。這些設計都有一些通用的布局， 大家在剛開始學習布局時有一個訣竅，即不用太在意布局的理論，而去收集一些大家常用的布局，先把這些東西記下來，隨著經驗的積累，可以通過這些通用的布局產生自己的理解和想法，然後去打破這些傳統的布局，有自己的創新和突破。
左邊為最常見的大框套小框的布局，整個網頁首先在一個比較大的框裡面，然後各個模塊在大的框裡面去布局分配。
這種布局的特點是有一個比較大的背景，背景是可以平鋪的，然後其他的內容可以限制在一定的寬度范圍內，好處就是視線比較集中。
通欄布局打破了框的限制，如圖導航部分等是適應屏幕拉伸的。
如圖背景可以根據屏幕無限延伸，顯得比較大氣。視覺上顯示比較整體，整個網頁上都是有內容的。
如圖為導航在主視覺下方的布局的示意圖，傳統規則就是導航放在畫面中間。
這是一種比較時尚、流行的布局方式，如圖上面是體現當前頁面主題的一個banner，這個banner比較重要，它的設計完全可以體現整個網頁的風格，同時也起到一個裝飾的作用。接下來把這個banner放在中間的位置而不是傳統的上面的位置，這樣就給banner這個位置留下了比較多的空間，讓整個畫面顯得比較簡潔大氣。
如圖為左中右布局示意圖。
結合案例，如圖分三欄左中右。對banner進行比較主題式的設計，如圖第一張素材的選擇體現了整個網頁的風格。同樣第二張、第三張的圖片選擇也是體現整個網頁主題的主體部分。所以這種布局是必須有個部分體現這個主題的，其他兩個部分用來布局網頁的其他內容。
如圖為環繞式布局的示意圖。
環繞式就是頁面會環繞一個比較顯眼的圖片裝飾來進行設計。如圖一，中間為圖片焦點，內容部分環繞在圖片焦點周圍，進行布局設計。第二張、第三張也為內容環繞主題進行設計的。這種布局比較靈活，可以先選好一個主題圖，然後所有元素圍繞它的視覺效果去設計，整個畫面的效果就會以圖為中心，主題非常鮮明。
穿插式布局雖然很少看到，但效果也不錯。
如圖案例均屬於穿插式布局，即所使用的圖片素材在內容裡面是一個穿插效果。整個banner穿插在網頁內容裡面，整個網頁對稱、畫面感非常強。比較適合做一些專題類的網站。
真正的版面設計裡面的布局時千變萬化的，我們只要遵循前面講到的用戶體驗要好、視覺上畫面平衡，那效果就會很好。
❼ web程序設計 用JavaScript腳本語言設計一個程序：根據當天是星期幾，在頁面中顯示不同的圖片。
<img id="img1" src="" /><br /><div id="day1"></div>
<script language="javascript" type="text/javascript">
day = new Date().getDay();
var pic_arr = new Array();
var i = 0;
pic_arr[i] = "0.jpg";//星期天的圖片，以下類推
i++;
pic_arr[i] = "1.jpg";
i++;
pic_arr[i] = "2.jpg";
i++;
pic_arr[i] = "3.jpg";
i++;
pic_arr[i] = "4.jpg";
i++;
pic_arr[i] = "5.jpg";
i++;
pic_arr[i] = "6.jpg";
document.getElementById("day1").innerHTML = "今天星期" + "天一二三四五六".charAt(day);
document.getElementById("img1").src = pic_arr[day];
</script>
❽ java web項目中有很多的圖片，如何存放
一般有兩種情況，
一種是前端開發需要顯示的圖片，這個是頁面構成必須的元素，一般這些會做 動靜分離，後台介面 跟 前端資源會部署在不同的伺服器上，有不同的優化，一般會有轉發的伺服器，判斷是後台介面，就轉發到後台的伺服器，如果是前端資源，就轉發到前台的伺服器。一般情況下，前端伺服器，跟後台的伺服器，是分離開的，有不同的人去管理，如果項目小的話，可能就全放在一個。這個優化的化，你可以去了解下 CDN原理。這個是用來優化靜態資源載入情況的。
另一種情況是，顯示的圖片，不是前端構成的，是用戶上傳文件產生的，這種情況下，現在一般有專門的對象存儲，用過 七牛雲，跟阿里的。這個的邏輯是文件上傳的時候，不是上傳到我們自己的伺服器，上傳到專門的雲伺服器，我們自己資料庫只需要保存這些上傳文件的地址，真正使用的時候，把連接給前端，前端自動會根據內容到專門的雲伺服器上去獲取。所有的安全，優化，帶寬，緩存命中，這些都有由雲伺服器去保證。 簡單來說，只有有錢，這些東西根本不會成為你項目的瓶頸。
作為技術，我們討論的應該不是這些。圖片會做備份，這個可以有專門的磁碟陣列去實現，簡單來說，就是上傳的內容保存到磁碟的時候，會自動多保存幾個備份到不同的磁碟上。還是那句話，多去了解下CDN的原理，最後這段，個人理解，不一定對。