『壹』 簡單網頁製作
一、FrontPage 2003簡介
FrontPage 2003是由Microsoft公司推出的Office 2003組件之一。FrontPage 2003的啟動與退出、文件的打開與保存與Office系列中其他軟體相同。FrontPage 2003啟動後,主窗口如圖6-61所示,菜單部分外貌與Office中的其他軟體相似。
與以往的版本相比,FrontPage 2003有以下幾個新功能:
(1)自定義瀏覽器解析度預覽檢查;
(2)描摹圖像;
(3)層功能;
(4)插入互動式按鈕;
(5)行為的應用;
(6)使用網頁重定向;
圖6-61 FrontPage 2003啟動界面
圖6-62「新建」任務窗格
(7)檢查網頁錯誤;
(8)優化HTML代碼;
(9)規劃頁面布局。
二、製作簡單網頁
我們在前面已經學會了用Word進行排版,其實你已經會製作一個簡單網頁了,只需將原來排好的Word文檔,另存時選擇保存類型為「Web頁(*.htm;*.html)」就可保存為一個網頁文件。
下面我們用FrontPage 2003製作一個簡單網頁。步驟如下:
1.啟動FrontPage 2003
選擇「開始」/「所有程序」/「Microsoft Office」/「FrontPage 2003」命令,打開如圖6-61所示的界面。
圖6-63 新的空白的網頁
圖6-64「網頁模板」對話框
2.建立新網頁
選擇「文件」/「新建…」菜單命令,打開「新建」任務窗格,如圖6-62所示。單擊「空白網頁」,也可以通過工具欄上的「新建」按鈕建立一個新的空白的網頁。如圖6-63所示。
如果要根據 Microsoft FrontPage 的模板創建網頁,單擊「其他網頁模板」,打開如圖6-64所示的「網頁模板」對話框,再單擊所需模板類型的選項卡,然後單擊某個模板。
3.輸入如下內容
圖6-65
4.編輯操作
網頁中的文本編輯操作與Word的編輯操作類似。
本例中,將「我的第一個網頁」應用「標題一」樣式,並設為隸書,水平居中;將「你好!歡迎光臨」應用「標題二」樣式,將其餘內容應用「普通」樣式,並將行距設為「1.5倍行距」,設置完成後效果如圖6-65所示。
5.保存網頁文件
選擇「文件」/「保存」命令,彈出「另存為」對話框,指定保存位置和文件名,然後單擊「保存」按鈕即可完成操作。
三、製作多媒體個人主頁
我們以製作一個簡易的個人網站為例,進一步學習使用FrontPage 2003。
1.規劃
網站規劃包括規劃網站的風格、網站的結構和網站的配色等,是對網站的整體定位。本例設置了6個欄目,包括首頁、自薦信、個人簡歷、榮譽證書、才藝展示、聯系方式,鏈接的文件名分別為index.htm、zijian.htm、jianli.htm、zhengshu.htm、zhanshi.htm、lianxi.htm。當然也可以結合自己情況進行修改。頁面布局如圖6-66所示。
2.建立網站
在FrontPage 2003中,所謂網站,就是一些網頁和程序的集合,各個網頁之間通過超鏈接聯系在一起,所有的網頁和文件保存在一個文件夾中,通過網站把這些文件和網頁統一起來。本地網站是指本地硬碟上用來存放整個網站的所有文檔的文件夾。遠程網站是指網路伺服器上的網站,供用戶瀏覽。
建立一個新網站,事實上就是建立一個單獨的文件夾,然後在這個文件夾中建立各個網頁文件,並且把它們鏈接在一起。
網頁製作可以在新建網站中完成,也可以像前面那樣單獨新建一個網頁。建議用新建網站的方法來製作網頁。
下面我們首先創建新的FrontPage網站:
(1)在「文件」菜單上,單擊「新建」,出現如圖 6-66 所示的「新建」任務窗格。
圖6-66
(2)在「新建」任務窗格中,單擊「由一個網頁組成的網站」。
(3)在「網站模板」對話框中,在「常規」選項卡下,單擊需要的網站模板,本例選擇「只有一個網頁的網站」,並在指定新網的位置欄中,鍵入或選擇新網的路徑及名稱,這里我們將默認的mysite改為myhome,如圖6-67所示,然後單擊「確定」按鈕,出現創建新網站對話框,完成站點創建,完成後如圖6-68所示。左邊一列是文件夾列表,可以通過右鍵快捷菜單新建文件夾,對文件或文件夾進行復制、刪除、重命名等操作。
圖6-67「網站模板」對話框
圖6-68
3.准備素材
將本例所需的圖片動畫素材復制到網站內的images文件夾下。
4.製作主頁頁眉
在「網頁」視圖中的文檔窗口底部,單擊「設計」
在文件夾列表中雙擊index.htm,打開該網頁並進入編輯狀態,開始首頁製作。
(1)設置網頁大小 在「視圖」菜單上,指向「網頁大小」,單擊
(2)設置網頁背景在「網頁」視圖中的文檔窗口底部,單擊「設計」
(3)插入一個一行兩列的表格 方法與在Word中插入表格相同。
在顯示設計視圖模式下,通過常用工具欄的「插入表格」按鈕,或在「插入」菜單上,指向「插入」,在級聯菜單中單擊「表格」;右擊插入的表格,在彈出菜單中單擊「表格屬性」,並將單元格襯距、單元格間距和粗細欄均設為0,如圖6-70所示,單擊「確定」按鈕。
圖6-69 網頁屬性
圖6-70 表格屬性
(4)在第一個單元格內插入圖片 將插入點放在第一個單元格,在「插入」菜單上,指向「圖片」,再單擊「來自文件」。找到要添加的文件(網站下images文件夾下的logo.gif),如圖6-71所示,然後單擊「插入」。
更簡單的方法是從文件夾列表拖動圖片文件到編輯區指定的位置即可。
(5)在第二個單元格內插入Flash動畫 單擊第二個單元格,在「插入」菜單上,指向「圖片」,再單擊「Flash影片」。彈出與圖6-71相似的「選擇文件」對話框,找到要添加的文件(網站下images文件夾下的banner_007.swf),然後單擊「插入」。
(6)在第一個表格下插入一個1行1列的表格 同樣將單元格襯距、單元格間距和粗細欄均設為0,設置好背景顏色,本例是選的其他顏色,如圖6-72所示,在「值」文本框中輸入Hex={C1,E8,C9}。
(7)製作滾動字幕 在第二個表格的單元格內單擊,在「插入」菜單上,單擊「Web組件」,彈出插入Web組件對話框,默認選中的是字幕,因此單擊「完成」按鈕,彈出字幕屬性對話框,在「文本」框內輸入:衷心感謝您垂閱我的簡歷,單擊「確定」按鈕。如圖6-73所示。
圖6-71 插入圖片對話框
圖6-72「其他顏色」對話框
5.製作正文和頁腳
(1)在第二個表格下插入一個1行2列的表格,同樣將單元格襯距、單元格間距設為0,但粗細設為1,暗邊框設為白色,亮邊框則設為其他顏色,在如圖6-72所示的「值」文本框中輸入Hex={99,CC,FF}。
(2)設置單元格背色。右擊此表格的第一個單元格,在彈出菜單中單擊「單元格屬性」,彈出如圖6-74所示的對話框,背景設為其他顏色,在如圖6-72所示的「值」文本框中輸入Hex={F1,F5,FC}。同樣方法將第二個單元格設為白色。
圖6-73 字幕屬性對話框
圖6-74 單元格屬性
(3)調整單元格寬度,使之與第一個表格相同。
(4)在第一個單元格內插入一個8行1列的表格,並將單元格襯距、單元格間距和粗細欄均設為0。在單元格屬性中將單元格對齊屬性設為水平居中,垂直居中,行高調整為40。
在剛插入的表格第二行內插入圖片homepage.gif,並在其後輸入「首 頁」;在第三行內插入圖片sub_dot.gif,並在其後輸入「自 薦信」,後面四行插入的圖片均為sub_dot.gif,輸入的文字依次為「個人簡歷」、「榮譽證書」、「才藝展示」、「聯系方式」。
(5)在表格三的第二個單元格內插入一個3行3列的表格,並將單元格襯距、單元格間距和粗細欄均設為0。將中間一列調寬一些。
在該表格第一行第二列中輸入「自薦信」,在第二行第二列輸入自薦信的內容。設為1.5倍行距。
(6)在表格三後面插入一個2行1列的表格,並將單元格襯距、單元格間距和粗細欄均設為0;並且第一個單元格背景色設為與表格二背景色相同,在第二個單元格內輸入「聯系電話:023-683568XX E-mail:xiaohui@163.com」並設為居中。
6.鏈接網站文件
選中要建立超鏈接的文字或圖像,單擊常用工具欄中的「插入超鏈接」按鈕或在「插入」菜單上單擊「超鏈接」,或者是右擊選中區域並單擊「超鏈接」,均可打開「插入超鏈接」對話框。如圖6-75所示。
圖6-75「插入超鏈接」對話框
(1)選中「首頁」,單擊常用工具欄中的
(2)用同樣的方法將「自薦信」鏈接到zijian.htm、「個人簡歷」鏈接到jianli.htm、「榮譽證書」鏈接到zhengshu.htm、「才藝展示」鏈接到zhanshi.htm、「聯系方式」鏈接到lianxi.htm。
7.保存文件,按F12鍵預覽網頁
四、製作本網站內其他頁面
首先在文件夾列表中將 index.htm 復制 5個,分別重命名為 zijian.htm、jianli.htm、zhengshu.htm、zhanshi.htm、lianxi.htm。只需將每個文件中自薦信部分修改為相應內容即可,頁眉、超鏈接欄和頁腳均不變。
五、網站發布
當我們完成上述內容後,需將製作的網頁發布到Internet上的Web伺服器中,才能供網上的訪問者瀏覽。首先要到Internet服務提供商(ISP)那裡申請購買存放網頁的空間和域名,以前有很多網站(如網易等)都提供免費的個人主頁存放空間,現在相對較少了,中國學生網仍在提供50M免費空間服務,大家可到http://web.6to23.com/去申請一個免費空間。
發布網站可以使用專門的FTP工具。但為了給用戶提供方便,FrontPage 2003內置了網頁發布功能,利用它,只需進行簡單的設置,就可以輕松地完成網站發布任務。FrontPage 2003中的遠程網站視圖可以幫助我們將整個網站或單獨的文件和文件夾發布到任何位置:擴展的 Web 伺服器、支持文件傳輸協議(FTP)或基於 Web 的分布式創作和版本控制(WebDAV)的Web伺服器或文件系統中的某個位置。
下面我們利用FrontPage 2003及文件傳輸協議(FTP)發布網站,步驟如下:
1.打開FrontPage網站
在「文件」菜單中單擊「打開網站」或單擊工具欄上的「打開」按鈕邊上的下拉標志,從下拉菜單中選「打開網站」,在彈出的「打開網站」對話框中找到需要打開的網站並單擊「打開」按鈕。
2.轉至「遠程網站」視圖
若要轉至該視圖,請單擊「網站」選項卡,然後單擊窗口底部的「遠程網站」按鈕。或在「視圖」菜單上,單擊「遠程網站」。如圖6-76所示。
3.設置「遠程網站屬性」
在文檔窗口頂部,單擊「遠程網站屬性」。在彈出的對話框中,在「遠程網站」選項卡上,在「遠程 Web伺服器類型」下,單擊「FTP」。在「遠程網站位置」框中,鍵入自己所選定的遠程網站的地址及 FTP 協議(本例中輸入「ftp://125.91.6.75」),如圖6-77所示。單擊「確定」按鈕,在打開的「要求提供用戶名和密碼」對話框中輸入ISP提供的用戶名和密碼,單擊「確定」按鈕。如圖6-78所示。
圖6-76
圖6-77
4.發布網站
通過單擊窗口右下角的「發布網站」按鈕即可發布所有文件。也可發布單個文件,在本地網站選擇一個文件,然後單擊「本地到遠程」按鈕
圖6-78
圖6-79
『貳』 如何快速學習製作簡單網頁需要用到哪些軟體
如果快速製作簡單的網頁,可以直接接用OFFICE里的WORD就可以了,只要在WORD中排好版式,然後保存時把格式選擇成網頁就可以了,如圖:
如果,想做標准又專業的,那還是學個網頁製作軟體吧,最開始可以學DREAMWEAVER,這是製作網頁的工具,入門挺容易的.可以快速製作出比較好的網頁有成就感,激發學習興趣.當然這些還是不夠的,如果再進一步還要學習圖片處理軟體(如FIREWORKS,主要處理網頁中要的圖片,或製作網頁效果圖等),還可以再學FLASH製作動畫,增加網頁的吸引力.
後面還有HTML啊CSS啊也是要學的
再後面,可能還要學習一些動態語言如PHP,C#等,另外資料庫知識啊,伺服器配置,網路方面啊等等都要學習..這方面偏於後台編程,看你的愛好選擇了.
就這么多,看起來挺嚇人,不過只要你循序漸進,一步一步走,問題不大的,祝你成功!
『叄』 怎麼用dreamweaver製作簡單網頁
第一步:打開dw,點擊dw左上角的文件按鈕。
『肆』 怎樣製作一個H5頁面
1、准備一個H5的製作工具,自行在網路搜索一下,這里以IH5為例,先注冊一個賬號。
『伍』 如何用PS製作JPG主頁面圖片
用DREAMWEAVER作HTML頁面,站點的所有文件都應該在一個文件夾中,然後定義這個文件加為站點,文件調用一般都用的相對路徑,比如說想插入一張叫做ps.jpg的圖片,用這樣幾種形式:
ps.jpg
../ps.jpg
../1/ps.jpg
../../ps.jpg
images/ps.jpg
跟頁面的關系是:
1.和頁面在同級目錄下,也就是在一個文件夾中,平級的;
2.圖片位於頁面的上一級目錄下,圖片和包含頁面的文件夾同級;
3.圖片位於頁面的上一級目錄下一個叫1的文件夾中,圖片和包含頁面的文件夾同級;
3.和2的情況一樣,以此類推。
3.頁面和images這個文件夾平級,圖片位於images文件夾中。
如果要轉移某個文件,最好在DREAMWEAVER中進行,例如當ps.jpg被轉移的時候,那麼軟體會自動顯示出哪些頁面已經在使用這個文件,並詢問是否更新頁面對於這個文件的鏈接,選擇是就ok了。
如果在外部轉移了文件,那就要手動修改那些頁面了,注意別落下了。
這樣效果就不會錯了。
如果考慮好了,也可以使用http那樣的絕對路徑,但如果對方圖片不存在了,那你的效果自然也就錯了。
文件名要最好用准確簡單的英文,拼音,數字的圖片具體功能的組合,只看文件名就能知道圖片的內容,比如按鈕可以用button_info.jpg, button_procts.jpg, 可以看出info的圖片是介紹,後一個是產品按鈕。
希望有所幫助,祝你成功!
『陸』 怎麼製作自己的網頁
初級前端
主要學習三個部分:HTML,CSS,JavaScript
到招聘網站,參考任聘要求,准沒錯,舉例如下:
1.精通html和css,能製作符合W3C標準的靜態頁面;
2.精通JavaScript編程,對面向對象編程思想有深刻理解;
3.精通主流Javascript庫/框架jQuery;
4.理解並掌握JavaScript語言核心技術DOM、BOM有Javascript性能優化經驗;
5.對瀏覽器兼容性有深入的研究,精通各種瀏覽器問題 ;
6.了解Backbone.js、AngularJs等MVC框架並有實際項目開發經驗;
7.了解http://asp.net等伺服器後台技術和擁有一定的C#編程能力者優先;
8.對交互體驗、可用性、用戶體驗有一定程度的理解;
9.有良好的責任心和團隊合作能力、能承受較大的壓力;
自己動手搜索下吧,確定目標和方向,以上是個人路線,僅供參考。
『柒』 如何製作一個簡單的網頁(一)
現在炫彩的網頁很多,那都是怎麼做出來的呢?為了幫助小白能快速學會一些基礎知識,小魚就不用代碼而就直接用網頁軟體製作了。
首先得有這個軟體,名字是Adobe Dreamweaver CS3,這個在網路上就能下到,提倡正版。
打開界面就是這樣,想要做一個簡單的網頁就點擊這個。
然後就進入這么個界面,因為一般做網頁都是用表格來分割板塊和規劃界面,下來就插入一個表格簡單示範。
點擊插入記錄里的表格。
在這里設置表格屬性,因為小魚在示範,就直接用1*1的了。
然後就是這個樣子,可以隨意拉伸調整,接下來我們插入一個圖片。
點擊插入記錄里的圖像。
在這里選擇圖片並確定。
在點擊確定後就會彈出這個窗口,這個是確認路徑,在網頁中每個板塊的內容都是在伺服器上有確定的路徑以防止錯亂。
這里還是確認路徑,點擊小文件夾圖標,再次選擇上次選擇的圖片,並確認。
再次確認。
添加完畢就是這樣,根據圖片解析度不同插進後大小會不同,進行調整就可以了。
然後就可以用網頁打開試試了,點擊如圖的圖標,會出現是否保存字樣,將其保存到自己想要保存的文件路徑就可以了,注意保存時文件後綴名.html不能改動。
這個就是打開的樣子,下次會介紹如何添加網頁標題和其中的一種網頁鏈接方式。
『捌』 如何用frontpage製作簡單的網頁
Frontpage是由微軟公司於1995年率先推出的一款網頁製作入門軟體,其特點就是簡單易學易上手,但是該軟體已於2007年停止更新了,目前該軟體主要有三種模式分別是設計、程式碼、預覽。但是,有一點毋庸置疑即frontpage為我們的工作學習帶來了很大的便利,我們在學習網頁製作的前期,可以將frontpage和Dreamweaver結合去練習,便於我們更好的學習網頁的製作。
所需的工具原料
Frontpage
HTML語言知識
相關的製作步驟:
下載Frontpage軟體安裝包,下載時為了安全起見盡量不要下載破解版;
預覽一下自己設計的網頁。
注意事項:
網頁的製作一定要美觀大方,才能獲得更好的用戶體驗,不可敷衍了事;
掌握一定的代碼知識,因為網頁製作需要能看懂最基本的代碼;
網頁製作要有一定的創作意識,所以在平時的生活中要注重創作能力的培養。
『玖』 如何製作網頁或網站
簡單製作網頁的方法:
工具、原料:
電腦
Dreamweaver CS5
方法步驟:
下載Dreamweaver軟體。Dreamweaver是一款強大的網頁製作工具。
『拾』 怎樣製作個人網頁,有教程,簡單點。
具體步驟如下:
1、打開伺服器中網站文件的目錄,假設為D:\abcd。
6、完成上述步驟後,即可製作個人網頁。