簡(jiǎn)單的網(wǎng)頁(yè)制作教程_第1頁(yè)
簡(jiǎn)單的網(wǎng)頁(yè)制作教程_第2頁(yè)
簡(jiǎn)單的網(wǎng)頁(yè)制作教程_第3頁(yè)
簡(jiǎn)單的網(wǎng)頁(yè)制作教程_第4頁(yè)
簡(jiǎn)單的網(wǎng)頁(yè)制作教程_第5頁(yè)
已閱讀5頁(yè)，還剩15頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

題目：設(shè)計(jì)一個(gè)個(gè)人網(wǎng)站一、要求：1．使用Dreamweave網(wǎng)頁(yè)工具制作一個(gè)個(gè)人網(wǎng)站；．包含至少四個(gè)網(wǎng)頁(yè):包括首頁(yè)、個(gè)人簡(jiǎn)介、個(gè)人相冊(cè)等（可隨意設(shè)計(jì)），網(wǎng)頁(yè)之間用超鏈接相連。．網(wǎng)頁(yè)中要有圖片和文字內(nèi)容，用表格進(jìn)行頁(yè)面布局；．添加至少兩種行為，并為首頁(yè)添加背景音樂(lè)。5.在網(wǎng)站中設(shè)計(jì)一個(gè)表單頁(yè)面。6.首頁(yè)必須包含頁(yè)面標(biāo)題，動(dòng)態(tài)按鈕導(dǎo)航欄。首先新建一個(gè)文件夾，文件夾的名字不能為漢字，做網(wǎng)站所有的路徑都必須用字母或者數(shù)字,I.:-」zs不能用漢字，我們就用名字吧，譬如說(shuō)名字張三，那文件夾名字就是zs，如圖打開(kāi)Dreamweaver軟件，得到圖做網(wǎng)頁(yè)要新建站點(diǎn)，關(guān)于站點(diǎn)配置服務(wù)器什么的，這里不講了，只講建立站點(diǎn)。選擇站點(diǎn)——新建站點(diǎn)。我們建的文件夾就是站點(diǎn)根文件夾。新建站點(diǎn)后得到這樣一個(gè)界面點(diǎn)選高級(jí)，得到界面點(diǎn)選高級(jí)，得到界面息躺注11-凰bll-鬻試蓋汁聞件nt]息躺注11-凰bll-鬻試蓋汁聞件nt]板ry〔遠(yuǎn)測(cè)遮設(shè)站文co模SP備地觀rr局怖列Its站點(diǎn)名稱(chēng)辺疋未命名站點(diǎn)忑—本地根丈件夾（X）：C<\Dticument-sand'Settings\YYVH默認(rèn)圖像文件夾11海鏈接相對(duì)于?⑥文檔?鏈接相對(duì)于?⑥文檔?I-站點(diǎn)根目錄遡HTTF地址?i：http:找匡分天參寫(xiě)的鏈接：□使用醫(yī)另抉小寫(xiě)的謹(jǐn)接檢查址丫

緩存：回啟用緩存追）緩存中保持著站點(diǎn)資源和文件悟愍速資源面板,璉接管理和站點(diǎn)地圖胞站點(diǎn)名稱(chēng)與我們建文件夾得名字相同，zs填進(jìn)去就可以了本地根文件夾就是我們新建的那個(gè)文件夾zs，http地址為http://localhost/zs接下來(lái)選擇左側(cè)欄里遠(yuǎn)程信息分類(lèi)遠(yuǎn)程信息本地信息驪服擂遮蓋設(shè)汁備注...站點(diǎn)閣:帶周\接下來(lái)選擇左側(cè)欄里遠(yuǎn)程信息分類(lèi)遠(yuǎn)程信息本地信息驪服擂遮蓋設(shè)汁備注...站點(diǎn)閣:帶周\■I.I、LIII■訪問(wèn)@?。簾o(wú)點(diǎn)擊無(wú)后面的那個(gè)三角，選擇本地網(wǎng)絡(luò)，遠(yuǎn)端文件夾同樣選擇我們新建的那個(gè)文件夾接下來(lái)點(diǎn)選左面菜單里的測(cè)試服務(wù)器，分類(lèi)測(cè)試服務(wù)器分類(lèi)設(shè)計(jì)備注站點(diǎn).地鹵布局文件樹(shù)國(guó)列Cuntaribute設(shè)計(jì)備注站點(diǎn).地鹵布局文件樹(shù)國(guó)列Cuntaribute服務(wù)器模型追〕：無(wú)訪問(wèn)①：無(wú)點(diǎn)選訪問(wèn)后面那個(gè)三角，選擇本地網(wǎng)絡(luò)，測(cè)試服務(wù)器文件夾也為我們建好的文件夾zs在url前綴后面加上zs

服務(wù)器模型（M）:無(wú) 〒訪問(wèn)⑥■'本地7網(wǎng)絡(luò) p測(cè)試服務(wù)帶文件C:\DocumentsandSettings\YY\M;UKL前綴::http：//loCalIlDet,ZE嬲鬣在測(cè)試服沁站點(diǎn)叔圃*資源代碼片斷行EE P本地視圉*脳cT?e |鬲姦國(guó)交辟 【了不「類(lèi)垂~個(gè)界面。田心站點(diǎn)-巧（C... 文件夾個(gè)界面。然后點(diǎn)擊確定就可以了 得到這樣面看老師的第一條要求，是要至少四個(gè)網(wǎng)頁(yè)，那我們就做四個(gè)單擊新建，然后單擊TP空白頁(yè)單擊新建，然后單擊TP空白頁(yè)接下來(lái)，選擇捕然后單擊創(chuàng)建，接下單擊文件——保存，保存這個(gè)文件，保存在我們一開(kāi)始建好的文件夾里面，保存名字不能是漢字，只能是字母或者數(shù)字，因?yàn)槲覀冎蛔膫€(gè)網(wǎng)頁(yè)，可以簡(jiǎn)單一點(diǎn)，把這四個(gè)網(wǎng)頁(yè)命名為a、b、c、d,或者1、2、3、4,當(dāng)然一個(gè)網(wǎng)站默認(rèn)的索引首頁(yè)名為index，這里也用index，文件名建〕：mdeji單擊保存，這樣得到第一個(gè)頁(yè)面，以同樣的方式建剩下的三個(gè)頁(yè)面，這里我的首頁(yè)默認(rèn)為index.htm1,其他三個(gè)網(wǎng)頁(yè)的名字分別為a.html、b.html、c.html，我們這四個(gè)網(wǎng)頁(yè)文件已經(jīng)保存在我們建的文件夾里。丈件甑e世魯少會(huì)越ra空銘. □Q站點(diǎn)-zs.空銘. □Q站點(diǎn)-zs.：iC...a.html……雹］b.html~1 c.htmlI大小丨類(lèi)型index.h+ml1KB1KB1KB1KB文件夾HTMLHTMLHTMLHTMLD.D.D.D.站點(diǎn)中已經(jīng)有了四個(gè)文件。接下來(lái)，我們開(kāi)始編輯index.htm1。單擊index.htm1,單擊index.htm1,顯示為當(dāng)前頁(yè)面。.a,htrrilb.htmlc.html飛index.htmlLa.html b.htmlc.html飛index.htmlLa.html b.htmlc.html1創(chuàng)代碼icji設(shè)計(jì)標(biāo)題:+4-2■3.456<!E'0CTYPEhtmlPUBLICrr-//W3C//DTOXHTMLl.irrht.t.p://ww.w3.org/TF!/xhtml1/DTIj/xhtmll-t.r；iLixmlns=rrhtt.p://ww.w3.org/1999/xhtmlrr><heai±：=-<metahttp-ei^.iiv=rrCunt.ent.-Tyij已”content=rrte:<titl已〉無(wú)豐帀題丈味當(dāng)€/t-itle></heaii>898910<tiody：：=|</hody>II1111!!1100.1!111111!平9||||!!200_1!1111111召91|1Iu300.111111111單擊拆分，標(biāo)題：無(wú)標(biāo)題文檔然后我們看這個(gè)SI，這個(gè)就是網(wǎng)頁(yè)名字，我們以張三為例，這個(gè)網(wǎng)頁(yè)就叫張三了，同樣的方法，這樣老師的第六條我們就完成一半給其他三個(gè)網(wǎng)頁(yè)改名字。標(biāo)題：無(wú)標(biāo)題文檔然后我們看這個(gè)SI，這個(gè)就是網(wǎng)頁(yè)名字，我們以張三為例，這個(gè)網(wǎng)頁(yè)就叫張三了，同樣的方法，這樣老師的第六條我們就完成一半給其他三個(gè)網(wǎng)頁(yè)改名字。A網(wǎng)頁(yè)標(biāo)題B網(wǎng)頁(yè)標(biāo)題B網(wǎng)頁(yè)標(biāo)題C網(wǎng)頁(yè)標(biāo)題Index.html*Ia.html*Ib.htrril*［固代瑪〕囲:拆分］回謖懺j標(biāo)題：片人日記改好名字之后，一一保存，這個(gè)不多說(shuō)了，接下來(lái)操作index.html。index.html.a.htrril.h,htmlc.html顯示首頁(yè)為當(dāng)前編輯頁(yè)面。index.html.a.htrril.h,htmlc.html顯示首頁(yè)為當(dāng)前編輯頁(yè)面。首先為index.html頁(yè)面添加背景音樂(lè)。大家在代碼視圖里找到vbody>vbody/>，這個(gè)是什么意思就不解釋了，我也不知道,:<body>彳就是這個(gè)了，在vbody>后面輸入代碼vbgsound>，然看見(jiàn)這張圖片上，沁5我光標(biāo)指在哪里了吧，單擊空格鍵，這個(gè)時(shí)候注意輸入法要為美式鍵盤(pán)字母格式，只要不是漢字就行，得到一個(gè)菜單，單擊src選中，然后單擊enter建，這個(gè)時(shí)候緊跟著src會(huì)出現(xiàn)一■-阿杜-天天看到你M謫“蔡琴-你的眼神,m"蔡琴-是誰(shuí)在敲打我窗mp3■-陳意嫻-飄雪叩才陳慧嫻-千千閩歌.mp3陳慧嫻-?夬生何處不相逢-中文經(jīng)典歌ffl.mpS文件名（2）: beyond-,苗家駒-卻見(jiàn)理鍛.mp3個(gè)瀏覽，單擊瀏覽，然后出現(xiàn)對(duì)話框，文件類(lèi)型◎所有丈件氷幻選擇一首音樂(lè)，然后單擊確定，

生丄會(huì)繼續(xù)彈出一個(gè)對(duì)話框文件位于站點(diǎn)I燈的根交件夾以外生丄會(huì)繼續(xù)彈出一個(gè)對(duì)話框J 當(dāng)您發(fā)布站點(diǎn)吋可能不能達(dá)問(wèn)::您的根文件夾是：C:\Documentsand5ettings\YY\MyDocuments\g>?您愿意將該文件復(fù)制到根文件夾中嗎？|?是世||否（阻||取消-點(diǎn)擊是，保存到自己建好的文件夾里面，注意這里不能用漢字做音樂(lè)名字，必須改成字母或者數(shù)字我是以beyond的歌為例，名字改為by,點(diǎn)擊保存背景音樂(lè)就添加好了。大家可以看一下，在站點(diǎn)目錄下，已經(jīng)有了這首歌曲。P本地視圖可|&P本地視圖可|&C令會(huì)少命爵吊亡JZE本劃立件1-zs(C...文件夾a.html1KB}[TMLDh.html1KBHTMLDby.mp3也...MF3音c.html1KBHTMLDindex,html1KBHTMLD接下來(lái)開(kāi)始設(shè)計(jì)頁(yè)面布局這里用表格布局，這個(gè)欄叫設(shè)計(jì)欄，由于大家都不會(huì)代碼，所以我們主要在這個(gè)欄里操作，面大家點(diǎn)擊常用里面的表格，就是下面這張圖片對(duì)于插入常用布局表單數(shù)據(jù)5pry文本收藏夾蠢曰晶匡1冒HbflP園蜀舊吵丁智〒宦〒用中的這個(gè)圖標(biāo)得到對(duì)話框如圖所示數(shù)據(jù)：得到對(duì)話框如圖所示數(shù)據(jù)：?jiǎn)螕舸_定，得到如下界面這個(gè)插入的表格式可以自動(dòng)調(diào)整大小的，大家可以自己試一下，接下來(lái)用這些表格布局，給單元格大家看兩個(gè)圖標(biāo)， -這個(gè)圖標(biāo)就像是excel中那個(gè)合并和拆分單元格是一個(gè)意思,左邊那個(gè)代表合并單元格，右面那個(gè)代表拆分單元格，excel大家都會(huì)把，就和那個(gè)布局差不錯(cuò)，我做一個(gè)簡(jiǎn)單的布局，為了方便，我把這個(gè)表格縮小，這個(gè)布局很簡(jiǎn)單，第二行全部合并，第三行第二三列合并，大家可以根據(jù)自己的需要進(jìn)行拆分合并，還可以在表格里面再次插入表格。寬度和高度的設(shè)置時(shí)在代碼里找到<tablewidth="900"border="0">,之后把它變成vtablewidth="900"border="0"align="center”height="">,其中align表示表格位置，height表示表格高度，大家可以根據(jù)自己的需要來(lái)填數(shù)字，默認(rèn)是以像素為單位的。接下來(lái)制作導(dǎo)航，這是老師第六條中的第二個(gè)要求，注意我在這里給了兩種方法，大家可以先看一下，再?zèng)Q定選擇哪種我沒(méi)看懂什么叫動(dòng)態(tài)按鈕導(dǎo)航條，不知道是讓這個(gè)字動(dòng)呢，還是讓這個(gè)字動(dòng)呢？如果大家嫌麻煩，就直接輸入漢字，結(jié)果就是下面這樣的

個(gè)人簡(jiǎn)介:個(gè)人日記如果要文字居中顯示可以將這四個(gè)框同時(shí)選中，然后居中在水平欄里面選擇百頁(yè)個(gè)人簡(jiǎn)介個(gè)人相冊(cè)個(gè)人日記個(gè)人簡(jiǎn)介:個(gè)人日記如果要文字居中顯示可以將這四個(gè)框同時(shí)選中，然后居中在水平欄里面選擇百頁(yè)個(gè)人簡(jiǎn)介個(gè)人相冊(cè)個(gè)人日記以后所有的文字格式都可以在這里面選，但是首先要選中自己所要操作的文字。創(chuàng)建鏈接，選中首頁(yè)兩個(gè)字，然后單擊右鍵 創(chuàng)建鏈接，選擇index.htm1,然后以同樣的方法，給其他三個(gè)欄里的文字做鏈接，創(chuàng)建鏈接的文字會(huì)有下劃線，同時(shí)改變顏色如果大家不嫌麻煩，教大家用f1ash做一個(gè)動(dòng)態(tài)的按鈕導(dǎo)航，把光標(biāo)放在第一行第一個(gè)欄里，然后下*插天常用布局表單數(shù)據(jù):務(wù)用文本收藏夾這個(gè)常用欄里的flash按鈕，單擊后面那個(gè)小三角，選擇flash這個(gè)常用欄里的flash按鈕，單擊后面那個(gè)小三角，選擇flash按鈕心得到對(duì)話框?yàn)g覽…得到對(duì)話框?yàn)g覽…I這個(gè)欄里填入index.html,注意這里的鏈接就是超級(jí)鏈接，當(dāng)你點(diǎn)擊這個(gè)按鈕的時(shí)候，它就會(huì)顯示主頁(yè)，我們?cè)O(shè)置后面三個(gè)按鈕的時(shí)候，一定要記得,當(dāng)你文本欄里填入個(gè)人簡(jiǎn)介字的時(shí)候,那你的鏈接就要指向簡(jiǎn)介那個(gè)頁(yè)面,我們這里就是a.htm1。其他像什么背景色之類(lèi)的隨意，

題，大家做好后，可以看到自己站點(diǎn)內(nèi)多了四個(gè)swf格式的文件，這四個(gè)就是按鈕,保存的時(shí)候，有一個(gè)文件問(wèn)是否要保存，一定要點(diǎn)擊是，不然flash不運(yùn)行了。大家可以回到自己的文件夾里，打開(kāi)首頁(yè)，測(cè)試一下，是不是單擊這四個(gè)按鈕會(huì)指向自己所設(shè)置的網(wǎng)頁(yè)，背員顏色匚1 ;然后我們給第二行設(shè)置背景顏色， 單擊背景顏色后面那個(gè)方框，可以有彈出顏色選框，大家隨意選擇自己喜歡的顏色行第一個(gè)欄藉▼插入常用丨布局表單數(shù)據(jù)丨印ry|遲I收彌號(hào)O口直□H?Id置園國(guó)國(guó)口□選在表單選項(xiàng)中的 。也就是第一個(gè)按鈕，這時(shí)得到界面我們把光標(biāo)指向紅線里面，輸入“用戶名：”然后點(diǎn)擊表單選項(xiàng)中的第二個(gè)按鈕1彈出對(duì)話框，選擇確定，得到界面同樣方法換行輸入密碼諌戶茗：再次換行，單擊表單選項(xiàng)中的 按鈕項(xiàng)輸入兩個(gè)按鈕,然后選中第一個(gè)按鈕，得到以下屬性值巴登錄將值后面欄里的文字改為登錄，同樣方法，把第二個(gè)按鈕的值改為注冊(cè)，接下來(lái)插入文字和圖片，在現(xiàn)在的第二行第二列里操作把光標(biāo)指向第三行第二列，選擇常用欄找▼插入常用布扃|表單丨數(shù)據(jù)丨印ry|文本|收藏夾蠢曰晶圉冒圓丁嘗〒囿Q舊劭丁智〒釣團(tuán)▼選擇這個(gè)欄里的圖像按鈕，彈出對(duì)話框，這時(shí)大家選擇自己電腦里的一張圖片，單擊確定后彈出對(duì)話框，問(wèn)是否保存在站點(diǎn)根目錄下，單擊確定，這時(shí)候需要注意的是，圖片名字不能有漢字，圖像標(biāo)簽和輔助屬性那一欄不用管，單擊確定即可。接下來(lái)就是輸入漢字了，我們?cè)趫D片的后面先輸入漢字，可以看到這樣的顯示，面還空了很大一塊地方，似乎不太好，不符合圖文混排的規(guī)矩，大家單擊圖片選中，在屬性欄里找到大家單擊圖片選中，在屬性欄里找到找到到對(duì)齊那一欄，在后面點(diǎn)選左對(duì)齊，彈出對(duì)話框，這時(shí)大家選擇自己電腦里的一張圖片，單擊確定后彈出對(duì)話框，問(wèn)是否保存在站點(diǎn)根目錄下，單擊確定，這時(shí)候需要注意的是，圖片名字不能有漢字，圖像標(biāo)簽和輔助屬性那一欄不用管，得到最終圖文效果是這樣的。第四行還有四個(gè)欄，大家可以在里面表明作者時(shí)間、以及自己的郵箱、QQ等內(nèi)容，這里我就不寫(xiě)了。實(shí)際上做到這里，我們幾乎完成了老師的所有要求了就差添加兩種行為了后面還有三個(gè)網(wǎng)頁(yè)沒(méi)做呢，怎么辦啊，后面三個(gè)網(wǎng)頁(yè)大家還沒(méi)做，教大家一個(gè)簡(jiǎn)單的方法，

-3-0-oz大家把鼠標(biāo)指向這個(gè)欄的左邊，在表格和邊框之間，我們可以發(fā)現(xiàn)，鼠標(biāo)斜向右-3-0-oz大家把鼠標(biāo)指向了。首先單擊鼠標(biāo)左鍵，選中這個(gè)表格然后不要移動(dòng)鼠標(biāo)，同時(shí)單擊右鍵，單擊拷貝，然后這個(gè)表格就拷貝好了，打開(kāi)其他三個(gè)頁(yè)面，分別粘貼過(guò)去，圖像屬性描述不用管，取消，這樣做的好處是它的好處非常多。大家打開(kāi)a.htm1,這個(gè)是個(gè)人簡(jiǎn)介，就是一個(gè)圖文混排了，圖文混排我們已經(jīng)講過(guò)了，更何況我們這個(gè)頁(yè)面里已經(jīng)有了圖文混排了，大家可以換一張圖片，換一些文字，做一些自我介紹什么的，都可以。，但是我們最好把那個(gè)表單刪掉，哪個(gè)是表單就不用我說(shuō)了吧，用戸咨 i登錄就是這個(gè)了。刪掉之后，選中第三行三個(gè)欄，合并就好了，第二個(gè)頁(yè)面就做好了，接下來(lái)我們看第三個(gè)頁(yè)面，b.htm1,這個(gè)頁(yè)面是個(gè)人相冊(cè)這里我同樣分兩種方法給大家講，第一種方法很簡(jiǎn)單。就是插入幾張圖片現(xiàn)在第三行剩下三個(gè)空欄，每個(gè)欄里插入一張圖片，景色也好，其他也罷，然后加上圖片說(shuō)明，一切搞定，這個(gè)我就不寫(xiě)

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論