如何用dw制作模板
用dw制作模板的方法：
品牌型号：华硕。
系统版本：UX30K723A。
软件版本：win7，Dreamweaver 8，百度浏览器1.22.1.1。
1、以百度经验首页头部举例，将页面分为两大块。
2、第一大块内容又可以分为两小块，左边为一块，右边为一块。
3、第一大块内容所有样式，如下图。
4、第一大块样式预览，如下图。
5、第二大块中分为两个小块，左边为百度经验图片，右边为input框和按钮。
6、第二块元素的样式如下图。
7、最终代码和效果图如下。
绛旓細涓嬮潰灏辩敤鎹ogo鏉ヨ鏄妯℃澘鏄濡備綍鏇存柊鏂囦欢鐨勩傛垜浠妸logo鍥剧墖鎹㈡垚鍙﹀鎴戜滑鍠滄鐨勫浘鐗囷紝瀹屾垚鍚庝繚瀛榖ody.dwt鏂囦欢锛岃繖鏃DW浼氬脊鍑虹獥鍙ｈ闂槸鍚﹂渶瑕佹洿鏂版枃浠讹紝閫夋嫨Update锛孌W灏变細鑷姩鐨勫皢鎵鏈夌敤姝ゆā鏉跨敓鎴愮殑椤甸潰閮芥洿鏂帮紝鏇存柊鏃禗W浼氬脊鍑篣pdate Pages绐楀彛锛屽畬鎴愬悗锛屽湪Update Pages绐楀彛涓細缁欏嚭鏇存柊鏃ュ織銆傗诲鏋滈夋嫨浜...
绛旓細鐜板湪灏卞樊鐢ㄨ秴閾炬帴鎶婁笂闈鍋鐨勫嚑涓綉椤佃繛鎺ヨ捣鏉ヤ簡銆傚湪妯℃澘涓変腑棣栭〉锛屽湪涓嬫柟html涓殑閾炬帴涓緭鍏ラ椤电殑鍚嶇О锛屽嵆index.html锛屽悓鐞嗭紝閫変腑鏉庣櫧锛屾潨鐢紝鐧藉眳鏄撳皢浠栦滑杩炶捣鏉ャ傝秴閾炬帴鍋氬ソ鍚庡湪鏂囧瓧涓嬫柟浼氬鍑轰竴鏉℃í绾裤傚仛瀹屼簡涔嬪悗鍦╥ndex.html涓墦寮鍙互鐪嬬湅鍋氬嚭鐨勬晥鏋滐紝鐐瑰嚮鍥句腑鐨勫皬鍦扮悆鍥炬爣灏卞彲杩涜鏌ョ湅銆
绛旓細1锛dw鍒朵綔娣樺疂棣栭〉浠ｇ爜闇瑕佹帉鎻＄殑鐭ヨ瘑锛氭窐瀹濆簵閾哄悗鍙板姛鑳斤紝鍩烘湰鐨勪唬鐮杩愮敤鎶宸с2锛屽簵閾虹殑鍚庡彴鍩烘湰鎿嶄綔鏄寚锛歛,浼氬湪棣栭〉娣诲姞鑷畾涔夋ā鍧楋紝dw鍐欑殑浠ｇ爜鍩烘湰鏄湪鑷畾涔夋ā鍧椾腑娣诲姞鐨 b,娣诲姞瀹屽湪鑷畾涔夋ā鍧椾腑鐨勪唬鐮侊紝鍙互閫氳繃搴楅摵瑁呬慨棰勮鏉ユ煡鐪嬭淇殑鏁堟灉 3锛屽熀鏈殑浠ｇ爜杩愮敤鎶宸э細a,棣栧厛鑳界湅鎳傚熀鏈殑浠ｇ爜锛屾窐瀹...
绛旓細濡備綍鐢╠w鍒朵綔鏃呮父缃戦〉璁捐妯℃澘銆1.棣栧厛锛屼綘瑕佹湁涓涓父瀹㈣涓氱殑鏍囧噯锛屼綘鐨勭洰鏍囨槸娓稿鍦ㄦ梾娓歌涓氶噷鏈変竴涓父瀹㈡爣蹇椼傚浣曢氳繃娓稿鏍囧織鏉ヤ績杩涙父瀹㈢殑缁忚惀锛屽浣曡鏃呮父缃戠珯鐨勬父瀹㈠湪娓稿鏃呮父鐩殑鍦版壘鍒扮洰鐨勫湴銆傞氳繃娓稿鏍囧織杩涜瀹ｄ紶鏄竴涓潪甯哥幇瀹炲拰甯歌鐨勬柟娉曘備竴涓父瀹㈢殑缁忓巻鍙互璁╀粬浠舰鎴愪竴绉嶆綔鍦ㄧ殑鏂囧寲淇′话锛...
绛旓細涓锛氬湪dw褰撲腑浣犲彲浠ラ夋嫨鏂板缓妯＄増锛岀劧鍚庝互琛ㄦ牸甯冨眬--鎻掑叆鍙紪杈戝尯鍩--淇濆瓨妯＄増浜岋細鏂板缓涓涓綉椤 鐒跺悗閫夋嫨鈥滀慨鏀光--鈥滃鐢ㄦā鐗堝埌椤碘濆氨OK浜 杩欐牱浣犳柊寤虹殑缃戦〉灏卞畬鍏ㄦ槸妯＄増鐨勬牱寮忎簡鍙鍗曠嫭淇敼妯＄増 缃戦〉鐨勬牱寮忎細鏇存柊
绛旓細鐢ㄦ硶濡備笅锛氫妇涓緥瀛愶紝姣斿瑕鍒朵綔涓涓浘灞傦紝闇瑕侀暱銆佸鍚勪负100px锛屽瓧浣撻鑹茶璁剧疆涓虹孩鑹诧紝閭ｄ箞鍦ㄧ紪杈戞椂闇瑕佸啓浠ヤ笅涓绯诲垪浠ｇ爜锛氭棤鏍囬鏂囨。#b{wide=100px; height=100px; font-color="red"}cCCCCCCCCCCc">浣嗘槸閫氳繃璁捐鍔熻兘鍙互蹇熷疄鐜颁互涓婃搷浣滐紝濡傚浘锛氬彧闇瑕佸湪涓嬫柟灞炴ч噷璁剧疆鍙傛暟鍗冲彲銆
绛旓細宸ュ叿/鍘熸枡 Dreamweaver CS6 鏂规硶/姝ラ 1銆佹柊寤轰竴涓狝SP缃戦〉骞朵笖淇濆瓨銆傚鍥炬墍绀 2銆佽繛鎺ュソ鏁版嵁搴擄紝瑙佺瑪鑰呬箣鍓嶅垎浜殑缁忛獙銆3銆佸湪缃戦〉涓彃鍏妯℃澘鐨勫唴瀹癸紝骞舵坊鍔犲ソ鍚勪釜瓒呴摼鎺 4銆侀〉闈㈣璁″ソ鍚庢妸缃戦〉鍙﹀瓨涓烘ā鏉裤傛搷浣滃鍥炬墍绀恒5銆佹帴鐫鍦ㄩ渶瑕佺紪杈戠殑閮ㄥ垎鎻掑叆鈥滃彲缂栬緫鍖哄煙鈥濓紝鎿嶄綔濡傚浘鎵绀恒6銆佷繚瀛樺悗锛屾垜浠氨...
绛旓細妯℃澘椤电紪杈戝ソ涔嬪悗 鐐瑰嚮鏂囦欢--鍙﹀瓨涓烘ā鏉 鐒跺悗鏂板缓--鎵撳紑妯℃澘涓殑椤碉紝缂栬緫 鍙﹀瓨涓烘兂瑕佺殑缃戦〉灏眔k
绛旓細浣跨敤 Dreamweaver 鍒涘缓澶氫釜鐩稿悓椤甸潰鍙互浣跨敤妯℃澘鍔熻兘锛岃繖鏍峰彲浠ュぇ澶ф彁楂樺伐浣滄晥鐜囥備笅闈㈡槸浣跨敤妯℃澘鍒涘缓澶氫釜鐩稿悓椤甸潰鐨勬楠:鍒涘缓妯℃澘椤甸潰锛氶鍏堟墦寮 Dreamweaver锛屾柊寤轰竴涓 HTML 椤甸潰銆傚湪椤甸潰涓璁″ソ鍏卞悓鐨勫竷灞銆佺粨鏋勫拰鍏冪礌锛屾瘮濡傝彍鍗曘侀〉鑴氥佷晶杈规爮绛夈傜劧鍚庨氳繃鑿滃崟鏍忛夋嫨 File > Save as Template锛堟枃浠 > 鍙﹀瓨...
绛旓細鐜板湪锛屼互涓嬭竟鐨勭畝鍗曠綉椤典负渚嬶紝鍙欒堪涓涓鍒朵綔杩囩▼銆傜畝鍗曠綉椤靛涓嬪浘锛氬湪寮濮嬪埗浣滀箣鍓嶏紝鎴戜滑鍏堝杩欎釜椤甸潰杩涜涓涓嬪垎鏋愩傜湅鐪嬭繖涓〉闈㈢敤鍒颁簡鍝簺涓滆タ銆傗枴缃戦〉椤剁鐨勬爣棰樷滄垜鐨勪富椤碘濇槸涓娈垫枃瀛椼 鈻＄綉椤典腑闂存槸涓骞呭浘鐗囥 鈻℃渶涓嬬鐨勬杩庤瘝鏄竴娈垫枃瀛椼 鈻＄綉椤佃儗鏅槸涓娣辩传绾㈤鑹层傛瀯鎬濆ソ杩欎釜缃戦〉鐨勭粨鏋勶紝鎴戜滑...
