寬度而定，從0開始，0到分組Al_a的x坐標(biāo)為一個(gè)寬度，分組Al-a的X坐標(biāo)到Al-a的x坐標(biāo)加寬度為第二個(gè)寬度，如此類推出所有寬度；其中第二列有且只有一個(gè)區(qū)域，所以填充區(qū)域1的具體內(nèi)容到表格中。
[0107]本實(shí)施例通過步驟S750遍歷完分組A中的所有分組，判斷出表格中的列有且只有一個(gè)區(qū)域，則停止遍歷這個(gè)分組，并且填充區(qū)域內(nèi)容到表格中；如果判斷列中存在多個(gè)區(qū)域，則需要將此列循環(huán)調(diào)用步驟S704的操作，直到列中只有一個(gè)區(qū)域即可，然后填充對(duì)應(yīng)的區(qū)域內(nèi)容。
[0108]遍歷完分組A中的所有分組，判斷出表格中的列有且只有一個(gè)區(qū)域，則停止遍歷這個(gè)分組，并且填充區(qū)域內(nèi)容到表格中；如果判斷列中存在多個(gè)區(qū)域，則需要將此列循環(huán)調(diào)用步驟四的操作，最多三次，直到列中只有一個(gè)區(qū)域即可，然后填充對(duì)應(yīng)的區(qū)域內(nèi)容。
[0109]本實(shí)施例通過步驟S760將填充好的表格代碼生成出來。
[0110]將步驟五填充好的表格代碼生成出來，利用innerHTML方法獲取表格代碼。
[0111]本實(shí)施例通過步驟S770生成直郵對(duì)應(yīng)的在線web頁面。
[0112]生成直郵對(duì)應(yīng)的在線web頁面，這個(gè)步驟相對(duì)簡單很多，因?yàn)樵诰€web是支持絕對(duì)定位的，直接利用用戶界面操作保存的數(shù)據(jù)(X坐標(biāo)，y坐標(biāo)，寬度，高度，內(nèi)容)即可制作對(duì)應(yīng)的頁面出來。
[0113]本實(shí)施例通過步驟S780將生成表格代碼發(fā)送到郵箱，以及將生成的web頁面上傳到服務(wù)器即可。
[0114]將以上生成表格代碼發(fā)送到郵箱，以及將web頁面上傳到服務(wù)器即可。
[0115]本實(shí)施例的技術(shù)方案降低了操作門檻，完全不需要開發(fā)人員參與，解放了開發(fā)人員的勞動(dòng)力，去掉了編輯與開發(fā)人員的溝通成本，直郵由原本的制作時(shí)間為2小時(shí)，降低為5分鐘即可完成。
[0116]可以自由選擇直郵背景圖片，利用鼠標(biāo)在直郵圖片中框選出需要的響應(yīng)區(qū)域，對(duì)于區(qū)域可以選擇添加圖片、文字、鏈接等內(nèi)容，居中居左等隨意切換，同一行同一列，可以存在多個(gè)區(qū)域，點(diǎn)擊事件只會(huì)響應(yīng)需要的區(qū)域。
[0117]能夠?qū)崟r(shí)預(yù)覽做好的效果，操作簡單，無需開發(fā)人員參與，編輯與產(chǎn)品人員均可完成直郵制作。
[0118]本實(shí)施例中算法的選用，針對(duì)目前直郵不支持絕對(duì)定位的方式，所以直郵的布局只能采用table來進(jìn)行布局，但table是采用矩形方格的方式(類似excel的那種)，需要自定義任意位置、任意大小的區(qū)域出來，比較困難，經(jīng)過多次實(shí)踐，table需要針對(duì)頁面上所有自定義區(qū)域，進(jìn)行位置從左到右，上到下的方式排序，根據(jù)橫向有重合的區(qū)域劃分為一個(gè)大區(qū)域，之后再每個(gè)橫向大區(qū)域中劃分出縱向大區(qū)域，如此遞歸3次，就能把所有的自定義區(qū)域用table的方式劃分出來。
[0119]本實(shí)施例通過可視化窗口及用戶操作工具的開發(fā)，提供一個(gè)可視化界面，讓編輯可以在上面自定義勾畫出需要的響應(yīng)區(qū)域，最終保存和上傳到服務(wù)器，以及發(fā)送到郵箱中。
[0120]實(shí)施例三
[0121]圖11示意性示出根據(jù)本公開示例實(shí)施例三所述的直郵制作系統(tǒng)結(jié)構(gòu)框圖，如圖11所示，本實(shí)施例所述的直郵制作系統(tǒng)包括:
[0122]背景圖片呈現(xiàn)單元1110，用于將背景圖片呈現(xiàn)在預(yù)設(shè)的可視化界面的預(yù)設(shè)區(qū)域；
[0123]區(qū)域信息記錄單元1120，用于記錄在所述背景圖片上框選出的矩形區(qū)域的信息以及為所述矩形區(qū)域所設(shè)置的填充信息，其中所述矩形區(qū)域的信息包括所述矩形區(qū)域的橫坐標(biāo)、縱坐標(biāo)、寬度、以及高度；
[0124]表格劃分單元1130，用于根據(jù)所述矩形區(qū)域的信息循環(huán)對(duì)所述背景圖片的區(qū)域進(jìn)行表格劃分，使得所述矩形區(qū)域分別位于一個(gè)獨(dú)立的單元格中；
[0125]直郵發(fā)送單元1140，用于對(duì)所述矩形區(qū)域設(shè)置對(duì)應(yīng)的填充信息后生成表格代碼發(fā)送到直郵目標(biāo)客戶的郵箱地址，并根據(jù)所述矩形區(qū)域的信息以及所述填充信息生成直郵對(duì)應(yīng)的在線WEB頁面上傳到服務(wù)器。
[0126]進(jìn)一步地，所述系統(tǒng)還包括框選軌跡顯示單元(圖11中未示出)，用于在記錄在所述背景圖片上框選出的矩形區(qū)域的信息之前，在所述背景圖片上實(shí)時(shí)顯示在所述背景圖片上框選所述矩形區(qū)域的軌跡。
[0127]進(jìn)一步地，所述區(qū)域信息記錄單元1120具體用于，記錄為所述矩形區(qū)域所設(shè)置的連接地址、鏈接圖片和/或文本。
[0128]本實(shí)施例提供的直郵制作系統(tǒng)可執(zhí)行本發(fā)明實(shí)施例一和實(shí)施例二所提供的直郵制作方法，具備執(zhí)行方法相應(yīng)的功能模塊和有益效果。
[0129]實(shí)施例四
[0130]圖12示意性示出根據(jù)本公開示例實(shí)施例四所述的直郵制作系統(tǒng)結(jié)構(gòu)框圖，如圖12所示，本實(shí)施例所述的直郵制作系統(tǒng)包括:
[0131]背景圖片呈現(xiàn)單元1210，用于將背景圖片呈現(xiàn)在預(yù)設(shè)的可視化界面的預(yù)設(shè)區(qū)域；
[0132]區(qū)域信息記錄單元1220，用于記錄在所述背景圖片上框選出的矩形區(qū)域的信息以及為所述矩形區(qū)域所設(shè)置的填充信息，其中所述矩形區(qū)域的信息包括所述矩形區(qū)域的橫坐標(biāo)、縱坐標(biāo)、寬度、以及高度；
[0133]進(jìn)一步地，所述區(qū)域信息記錄單元1220具體用于，記錄為所述矩形區(qū)域所設(shè)置的連接地址、鏈接圖片和/或文本。
[0134]表格劃分單元1230，用于根據(jù)所述矩形區(qū)域的信息循環(huán)對(duì)所述背景圖片的區(qū)域進(jìn)行表格劃分，使得所述矩形區(qū)域分別位于一個(gè)獨(dú)立的單元格中；
[0135]直郵發(fā)送單元1240，用于對(duì)所述矩形區(qū)域設(shè)置對(duì)應(yīng)的填充信息后生成表格代碼發(fā)送到直郵目標(biāo)客戶的郵箱地址，并根據(jù)所述矩形區(qū)域的信息以及所述填充信息生成直郵對(duì)應(yīng)的在線WEB頁面上傳到服務(wù)器。
[0136]進(jìn)一步地，所述系統(tǒng)還包括框選軌跡顯示單元(圖12中未示出)，用于在記錄在所述背景圖片上框選出的矩形區(qū)域的信息之前，在所述背景圖片上實(shí)時(shí)顯示制作人員在所述背景圖片上框選所述矩形區(qū)域的軌跡。
[0137]進(jìn)一步地，所述表格劃分單元還包括:
[0138]橫向劃分子單元1231，用于遍歷所有的矩形區(qū)域，根據(jù)所述所有的矩形區(qū)域的縱坐標(biāo)及高度將所述背景圖片的區(qū)域劃分為至少一個(gè)橫向表格，以使每一橫向表格包含最少數(shù)量的矩形區(qū)域；
[0139]縱向劃分子單元1232，用于遍歷所有的橫向表格，根據(jù)所述所有的矩形區(qū)域的橫坐標(biāo)及寬度將所述背景圖片的區(qū)域劃分為至少一個(gè)縱向表格，以使每一縱向表格包含最少數(shù)量的矩形區(qū)域；
[0140]橫向分隔子單元1233，用于遍歷所有的縱向表格，若其中存在縱向表格包含至少兩個(gè)矩形區(qū)域，則根據(jù)所包含的矩形區(qū)域的縱坐標(biāo)及高度將所述縱向表格劃分為至少一個(gè)橫向表格，以使每一橫向表格包含最少數(shù)量的矩形區(qū)域；
[0141]縱向分隔子單元1234，用于遍歷所有的橫向表格，若其中存在橫向表格包含至少兩個(gè)矩形區(qū)域，則根據(jù)所包含的矩形區(qū)域的橫坐標(biāo)及寬度將所述橫向表格劃分為至少一個(gè)縱向表格，以使每一縱向表格包含最少數(shù)量的矩形區(qū)域；
[0142]重復(fù)通過所述橫向分隔子單元1233以及所述縱向分隔子單元1234分隔包含至少兩個(gè)矩形區(qū)域的單元格，直到每一矩形區(qū)域分別位于一個(gè)獨(dú)立的單元格為止。
[0143]進(jìn)一步地
[0144]所述橫向劃分子單元1231具體用于，將矩形區(qū)域Ri的縱坐標(biāo)Y到縱坐標(biāo)Y加上所述矩形區(qū)域Ri的高度之間在所述背景圖片上形成的橫向表格稱為Ci，若所述橫向表格Ci與其他矩形區(qū)域重疊，則對(duì)所述橫向表格Ci的寬度進(jìn)行延伸直到不與其他矩形區(qū)域重疊，再從所述背景圖片的區(qū)域劃出所述橫向表格Ci，遍歷完所有的矩形區(qū)域后，在所述背景圖片上形成橫向表格Cl-Cn ;
[0145]所述縱向劃分子單元1232具體用于，遍歷所有的橫向表格Cl-Cn，若其中存在橫向表格包含至少兩個(gè)矩形區(qū)域，則根據(jù)所包含的至少兩個(gè)矩形區(qū)域的橫坐標(biāo)及寬度將所述橫向表格Ci進(jìn)一步劃分為多個(gè)列向表格，將矩形區(qū)域Ri的縱坐標(biāo)Y到縱坐標(biāo)Y加上所述矩形區(qū)域Ri的高度之間在所述背景圖片上形成的橫向表格稱為Ci，若所述橫向表格Ci與其他矩形區(qū)域重疊，則對(duì)所述橫向表格Ci的寬度進(jìn)行延伸直到不與其他矩形區(qū)域重疊，再從所述背景圖片的區(qū)域劃出所述橫向表格Ci，遍歷完所有的矩形區(qū)域后，在所述背景圖片上形