簡單的網(wǎng)頁制作教程-設(shè)計一個個人網(wǎng)站_第1頁
簡單的網(wǎng)頁制作教程-設(shè)計一個個人網(wǎng)站_第2頁
簡單的網(wǎng)頁制作教程-設(shè)計一個個人網(wǎng)站_第3頁
簡單的網(wǎng)頁制作教程-設(shè)計一個個人網(wǎng)站_第4頁
簡單的網(wǎng)頁制作教程-設(shè)計一個個人網(wǎng)站_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、題目：設(shè)計一個個人網(wǎng)站一、要求： 1使用Dreamweave網(wǎng)頁工具制作一個個人網(wǎng)站；    2包含至少四個網(wǎng)頁: 包括首頁、個人簡介、個人相冊等（可隨意設(shè)計），網(wǎng)頁之間用超鏈接相連。   3網(wǎng)頁中要有圖片和文字內(nèi)容，用表格進(jìn)行頁面布局；    4添加至少兩種行為（例如彈出信息，交換圖像），并為首頁添加背景音樂。5. 在網(wǎng)站中設(shè)計一個表單頁面。6. 首頁必須包含頁面標(biāo)題，導(dǎo)航欄，其他頁面須含標(biāo)題、導(dǎo)航（或返回首頁的鏈接）。首先新建一個文件夾，文件夾的名字不能為漢字，做網(wǎng)站所有的路徑都必須用字母或者數(shù)字，不

2、能用漢字，我們就用名字吧，譬如說名字張三，那文件夾名字就是zs，如圖打開Dreamweaver軟件，得到圖做網(wǎng)頁要新建站點(diǎn)，關(guān)于站點(diǎn)配置服務(wù)器什么的，這里不講了，只講建立站點(diǎn)。選擇站點(diǎn)新建站點(diǎn)。我們建的文件夾就是站點(diǎn)根文件夾。新建站點(diǎn)后得到這樣一個界面輸入站點(diǎn)名稱后點(diǎn)擊下一步， 選擇“否，我不想使用服務(wù)器技術(shù)”，單擊下一步選擇“編輯我的計算機(jī)上的本地副本，完成后再上傳到服務(wù)器（推薦）”，并選擇路徑，單擊下一步使用菜單“站點(diǎn)”“管理站點(diǎn)”打開站點(diǎn)管理對話框，進(jìn)行操作選擇剛建立好的站點(diǎn)，并點(diǎn)“編輯”，得到下面的界面，用來編輯站點(diǎn)的高級選項(xiàng)（注：高級選項(xiàng)可不設(shè)置，因?yàn)槲覀兘ǖ氖遣皇褂梅?wù)器技術(shù)的簡單

3、站點(diǎn)）點(diǎn)擊確定就可以了得到這樣一個界面。下面看老師的第一條要求，是要至少四個網(wǎng)頁，那我們就做四個單擊新建，然后單擊文件接下來，選擇然后單擊創(chuàng)建，接下單擊文件保存，保存這個文件，保存在我們一開始建好的文件夾里面，保存名字避免使用中文和長文件名，而且要“見其名知其意”。當(dāng)然一個網(wǎng)站默認(rèn)的索引首頁名為index，這里也用index，單擊保存，這樣得到第一個頁面，以同樣的方式建剩下的三個頁面，這里我的首頁默認(rèn)為index.html，其他三個網(wǎng)頁的名字分別為a.html、b.html、c.html（注：這里因?yàn)榫W(wǎng)頁比較少，為方便起見就用了這種簡單的命名。但事實(shí)上這種命名是不符合規(guī)范的，同學(xué)們自己命名網(wǎng)頁

4、的時候不要用這種不能識別網(wǎng)頁主題的命名），我們這四個網(wǎng)頁文件已經(jīng)保存在我們建的文件夾里。站點(diǎn)中已經(jīng)有了四個文件。接下來，我們開始編輯index.html。單擊index.html，顯示為當(dāng)前頁面。單擊拆分，然后我們看這個，這個就是網(wǎng)頁名字，我們以張三為例，這個網(wǎng)頁就叫張三之家，這樣老師的第六條我們就完成一半了，同樣的方法給其他三個網(wǎng)頁改名字。A網(wǎng)頁標(biāo)題B網(wǎng)頁標(biāo)題C網(wǎng)頁標(biāo)題改好名字之后，一一保存，這個不多說了，接下來操作index.html。顯示首頁為當(dāng)前編輯頁面。首先為index.html頁面添加背景音樂。大家在代碼視圖里找到<body><body/>，這個是什么意思就

5、不解釋了，我也不知道，就是這個了，在<body>后面輸入代碼<bgsound>，然看見這張圖片上，我光標(biāo)指在哪里了吧，單擊空格鍵，這個時候注意輸入法要為美式鍵盤字母格式，只要不是漢字就行，得到一個菜單，單擊src選中，然后單擊enter建，這個時候緊跟著src會出現(xiàn)一個瀏覽，單擊瀏覽，然后出現(xiàn)對話框，選擇一首音樂，然后單擊確定，會繼續(xù)彈出一個對話框點(diǎn)擊是，保存到自己建好的文件夾里面，注意這里不能用漢字做音樂名字，必須改成字母或者數(shù)字我是以beyond的歌為例，名字改為by，點(diǎn)擊保存背景音樂就添加好了。大家可以看一下，在站點(diǎn)目錄下，已經(jīng)有了這首歌曲。接下來開始設(shè)計頁面布局

6、這里用表格布局， 這個欄叫設(shè)計欄，由于大家都不會代碼，所以我們主要在這個欄里操作，下面大家點(diǎn)擊常用里面的表格，就是下面這張圖片中的這個圖標(biāo)得到對話框如圖所示數(shù)據(jù)： 單擊確定，得到如下界面這個插入的表格式可以自動調(diào)整大小的，大家可以自己試一下，接下來用這些表格布局，給大家看兩個圖標(biāo)， 這個圖標(biāo)就像是excel中那個合并和拆分單元格是一個意思，左邊那個代表合并單元格，右面那個代表拆分單元格，excel大家都會把，就和那個布局差不錯，我做一個簡單的布局，為了方便，我把這個表格縮小，這個布局很簡單，第二行全部合并，第三行第二三列合并，大家可以根據(jù)自己的需要進(jìn)行拆分合并，還可以在表格里面再次插入表格。寬

7、度和高度的設(shè)置時在代碼里找到<table width="900" border="0">，之后把它變成<table width="900" border="0" align=”center” height=”>，其中align表示表格位置，height表示表格高度，大家可以根據(jù)自己的需要來填數(shù)字，默認(rèn)是以像素為單位的。接下來制作導(dǎo)航，這是老師第六條中的第二個要求，注意我在這里給了兩種方法，大家可以先看一下，再決定選擇哪種我沒看懂什么叫動態(tài)按鈕導(dǎo)航條，不知道是讓這個字動呢，還是讓這個字動呢？如

8、果大家嫌麻煩，就直接輸入漢字，結(jié)果就是下面這樣的如果要文字居中顯示可以將這四個框同時選中，然后在水平欄里面選擇居中以后所有的文字格式都可以在這里面選，但是首先要選中自己所要操作的文字。創(chuàng)建鏈接，選中首頁兩個字，然后單擊右鍵創(chuàng)建鏈接，選擇index.html，然后以同樣的方法，給其他三個欄里的文字做鏈接，創(chuàng)建鏈接的文字會有下劃線，同時改變顏色如果大家不嫌麻煩，教大家用flash做一個動態(tài)的按鈕導(dǎo)航（注：很多同學(xué)的系統(tǒng)不支持flash按鈕，大家可以了解下這個怎么制作，而不一定要用flash按鈕做導(dǎo)航）把光標(biāo)放在第一行第一個欄里，然后這個常用欄里的flash按鈕，單擊后面那個小三角，選擇flash按

9、鈕。得到對話框我們可以看到這個按鈕的樣式是可以自己選擇的，大家隨意選擇一款自己喜歡的按鈕，然后在按鈕文本欄里，填入首頁兩個字，字體設(shè)置隨意，然后鏈接這個欄里填入index.html，注意這里的鏈接就是超級鏈接，當(dāng)你點(diǎn)擊這個按鈕的時候，它就會顯示主頁，我們設(shè)置后面三個按鈕的時候，一定要記得，當(dāng)你文本欄里填入個人簡介字的時候，那你的鏈接就要指向簡介那個頁面，我們這里就是a.html。其他像什么背景色之類的隨意，然后單擊確定。這樣第一個按鈕就做好了，接下來我們自己做剩下的三個按鈕，注意鏈接問題，大家做好后，可以看到自己站點(diǎn)內(nèi)多了四個swf格式的文件，這四個就是按鈕，保存的時候，有一個文件問是否要保存

10、，一定要點(diǎn)擊是，不然flash不運(yùn)行了。大家可以回到自己的文件夾里，打開首頁，測試一下，是不是單擊這四個按鈕會指向自己所設(shè)置的網(wǎng)頁，然后我們給第二行設(shè)置背景顏色，單擊背景顏色后面那個方框，可以有彈出顏色選框，大家隨意選擇自己喜歡的顏色接下來，完成老師的第五個要求，制作表單，這個把光標(biāo)指向第三行第一個欄選在表單選項(xiàng)中的。也就是第一個按鈕，這時得到界面我們把光標(biāo)指向紅線里面，輸入“用戶名：”然后點(diǎn)擊表單選項(xiàng)中的第二個按鈕彈出對話框，選擇確定，得到界面同樣方法換行輸入密碼再次換行，單擊表單選項(xiàng)中的按鈕項(xiàng)輸入兩個按鈕，然后選中第一個按鈕，得到以下屬性將值后面欄里的文字改為登錄，。同樣方法，把第二個按鈕

11、的值改為注冊，接下來插入文字和圖片，在現(xiàn)在的第二行第二列里操作把光標(biāo)指向第三行第二列，選擇常用欄選擇這個欄里的圖像按鈕，彈出對話框，這時大家選擇自己電腦里的一張圖片，單擊確定后彈出對話框，問是否保存在站點(diǎn)根目錄下，單擊確定，這時候需要注意的是，圖片名字不能有漢字，圖像標(biāo)簽和輔助屬性那一欄不用管，單擊確定即可。接下來就是輸入漢字了，我們在圖片的后面先輸入漢字，可以看到這樣的顯示，上面還空了很大一塊地方，似乎不太好，不符合圖文混排的規(guī)矩，大家單擊圖片選中，在屬性欄里找到找到到對齊那一欄，在后面點(diǎn)選左對齊，得到最終圖文效果是這樣的。第四行還有四個欄，大家可以在里面表明作者時間、以及自己的郵箱、QQ等

12、內(nèi)容，這里我就不寫了。實(shí)際上做到這里，我們幾乎完成了老師的所有要求了就差添加兩種行為了后面還有三個網(wǎng)頁沒做呢，怎么辦啊，后面三個網(wǎng)頁大家還沒做，教大家一個簡單的方法，大家把鼠標(biāo)指向這個欄的左邊，在表格和邊框之間，我們可以發(fā)現(xiàn)，鼠標(biāo)斜向右了。首先單擊鼠標(biāo)左鍵，選中這個表格然后不要移動鼠標(biāo)，同時單擊右鍵，單擊拷貝，然后這個表格就拷貝好了，打開其他三個頁面，分別粘貼過去，圖像屬性描述不用管，取消，這樣做的好處是它的好處非常多。大家打開a.html，這個是個人簡介，就是一個圖文混排了，圖文混排我們已經(jīng)講過了，更何況我們這個頁面里已經(jīng)有了圖文混排了，大家可以換一張圖片，換一些文字，做一些自我介紹什么的，

13、都可以。，但是我們最好把那個表單刪掉，哪個是表單就不用我說了吧，就是這個了。刪掉之后，選中第三行三個欄，合并就好了，第二個頁面就做好了，接下來我們看第三個頁面，b.html，這個頁面是個人相冊這里我同樣分兩種方法給大家講，第一種方法很簡單。就是插入幾張圖片，現(xiàn)在第三行剩下三個空欄，每個欄里插入一張圖片，景色也好，其他也罷，然后加上圖片說明，一切搞定，這個我就不寫了，第二種方法還是用flash做相冊，首先大家合并第三行三個欄。并將光標(biāo)指向第三行，然后單擊這個圖片中的插入記錄媒體圖像查看器，之后得到這樣的界面注意這個是可以調(diào)節(jié)大小的，看你想要多大的相冊了。單擊選中，我們會發(fā)現(xiàn)右面多出這樣一個界面flash元素在其中找到然后單擊后面的img1那里，會發(fā)現(xiàn)后面多出一支筆，單擊那個筆，彈出對話框單擊減號，將img1三個刪掉，然后再單擊加號，會多出一個文件夾標(biāo)志，單擊文件夾標(biāo)志，然后彈出對話框在自己電腦里選擇一張圖片，將圖片保存到站點(diǎn)根文件夾下，還是那個問題，名字中不能有漢字，添加好第一張圖片之后界面如圖大家可以多添加幾張圖片，這樣一個相冊就做好了，單擊確定。接下來就剩下第四頁了，就是寫幾行文字的事情了，把表單和圖文混排都刪除，然后合并三個欄，然后添加一些文字，搞定了。這四個頁面都做好了，我們還有一項(xiàng)任務(wù)沒有完成，那就是給頁面添加兩

溫馨提示

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

最新文檔

評論

0/150

提交評論