導航:首頁 > 萬維百科 > 靜態網頁設計樣例

靜態網頁設計樣例

發布時間:2020-09-10 13:20:51

1、靜態網頁製作作業。要HTML的,簡單點,不要太復雜,初學那種的。

<html>
<head>
    <style>
        html,body{margin:0px;text-align:center;}
        .main{width:1000px;margin:0px auto;padding-top:30px;}
        .title{font-size:18px;text-decoration:underline;font-weight:bold;}
        .formtable{width:100%;font-size:12px;margin-top:20px;}
        .lefttd{width:350px;text-align:right;}
        .righttd{text-align:left;}
        .etxt{width:300px;}
        .etel{width:200px;}
        .eta{width:320px;height:100px;}
.cinpt{text-align:center;padding-top:20px;}
    </style>
</head>
<body>
    <div class="main">
        <div><span class="title">請留下個人資料</span></div>
        <div>
            <table class="formtable">
                <tr><td class="lefttd">姓名:</td><td class="righttd"><input type="text" /></td></tr>
                <tr><td class="lefttd">E-mail:</td><td class="righttd"><input type="text" class="etxt" /></td></tr>
                <tr><td class="lefttd">電話:</td><td class="righttd"><input type="text" class="etel" /></td></tr>
                <tr><td class="lefttd">性別:</td><td class="righttd"><input type="radio" checked="checked" name="rd" />女 <input type="radio" checked="checked" name="rd" />男</td></tr>
                <tr><td class="lefttd">年齡:</td><td class="righttd"><select><option>20以下</option><option>20以上</option></select></td></tr>
                <tr><td class="lefttd">留言板:</td><td class="righttd"><textarea class="eta"></textarea></td></tr>
                <tr><td class="lefttd">您的愛好:</td><td class="righttd"><input type="checkbox" name="cb1" />運動 <input type="checkbox" name="cb2" />閱讀 <input type="checkbox" name="cb2" />聽音樂 <input type="checkbox" name="cb2" />旅遊</td></tr>
<tr><td colspan="2" class="cinpt"><input type="button" value="提交" /></td></tr>
</table>
        </div>
    </div>
</body>
</html>


初學的,那上面這段代碼應該可以了

2、怎樣製作簡單的靜態的網頁設計

你好。首先下載Dreamweaver.exe並打開,選擇你使用的編輯語言,本案例用html
打開頁面後,選著設計窗口,如圖所示。設計窗口可以快速布局網頁,不需要自己編輯代碼。

打開你要設計的網頁的設計圖,本經驗是百度經驗首頁為例,首先我們製作頂上的搜索條,點擊插入—表格(如圖所示)。打開表格屬性編輯表格屬性。插入1行和5列,表格寬度為1130,(即為網頁的寬度),邊距,間距分別為0,此表格只是為了定位,因此不設邊框。

設置好表格後,可在表格裡面插入你的內容,首先我們插入logo,點擊插入—圖像—選擇你要插入的圖片。點確定即可完成logo插入。表格的小大高度都可根據設計圖需要調整,滑鼠移到表格邊框虛線即可拖拉調整高度或寬度。如圖所示

接下來我們來做搜索框,點擊插入—表單—插入文本域—確定。插入文本框後可點擊文本框調整文本框的屬性。根據設計圖,文本框上班還要添加內容,因此,可選擇單元格右擊選擇表格—拆分單元格,此處是需要添加一行的內容,因此拆分為兩行,如圖所示。

用同樣的辦法拆分上面的行,因為要添加10個選擇項,因此拆分為10列(右擊選中的行—拆分單元格—10列—確定)。拆分好後在小格裡面添加文字內容即可。表格大小可根據步驟四調整。

接下來我們做搜索按鈕,同樣根據設計圖要把表格拆分為兩行。點擊插入插入按鈕的圖片。

接下來給按鈕添加鏈接,本次經驗分享的是靜態網頁,因此在此先跟大家分享怎麼直接添加按鈕鏈接。同樣是點擊插入—添加超級鏈接,填寫你事先做好的頁面鏈接,或者其他網站鏈接。

剩下的內容都可根據方法步奏逐漸添加,調節細節即可完成你想要設計的網頁。如圖所示是上面步奏所做的靜態頁面,把所有做好的網頁用超級鏈接鏈接起來即可做成一個簡單的網站

另外我們還可以採用front page。也可以很容易的實現。
望採納。

3、靜態網頁製作

方法/步驟

1、新建一個txt文本文檔,先不要急著修改文件後綴名,有基礎的朋友手動輸入HTML代碼,不會也沒有關系,百度搜索「網頁HTML代碼」。
代碼:
<!Doctype html>
<html>
<head>
<title>靜態網頁製作教程</title>
<meta charset="gbk" />
<link href="css.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
</body>
</html>

2、基礎的靜態網頁代碼寫出來了,下面在<body></body>中間添加網頁需要的數據內容(文字、圖片、表格、視頻等),然後將txt文本文檔的後綴名.txt修改為.html。現在點擊打開看看效果!小編在body中間加入的文字:靜態網頁製作教程。

3、這樣的文字太單調了,需要用CSS樣式定義,小編在桌面上新建一個文件夾「web」,把index.html文件放進去,然後在web文件件裡面新建一個txt文本文檔,修改為「css.css」。

4、使用滑鼠右鍵「打開方式」,選擇txt文本文檔編輯css.css文件。用CSS定義網頁字體大小12像素,網頁背景色為紅色,字體顏色為白色。
代碼:
body{font-size:12px;background:red;color:white}
保存,然後打開web文件夾中的index.html文件,查看效果。

5、下面在web文件下面新建一個images文件夾,然後打開軟體Fireworks,設計自己需要的圖片(沒有就去百度搜索自己需要的圖片,使用QQ截圖功能,截取自己需要的圖片),把設計好的圖片存入web文件夾下面的images文件夾裡面。現在我們在body中放入圖片,讓圖片在網頁裡面居中。
代碼:
<div align="center">
<img src="images/pic.png" alt="logo" title="靜態網頁製作教程" />
</div>
把上面的代碼放入index.html的body中,保存後打開看看效果!
小編在這里省略了表格和視頻的製作,小夥伴不知道的話,可以百度搜索一下。
整個簡單的靜態網頁製作完畢。

4、求一份靜態網頁設計的作業

你哪個學校的?如果我們不是一學校的,只要靜態網頁的話,我有。

剛看到你發問的時間,估摸著應該也用不著了。。。。

5、網頁製作實例下載

網頁製作三劍客經典實例158例 + PDG閱讀器 V1.0b3 綠色版
由著名的多媒體軟體公司Macromedia公司出品的、享有「網頁製作三劍客」美譽的系列軟體——中文版DreamWeaverMX、Firework MX和FlashMX,已經深刻地影響了人們製作網頁、開發問站的工作方式。作為一個可視化的網頁設計和網站管理工具,中文版DreamWeaverMX不僅支持最新的web技術,而且新增了許多強大的功能,極大地方便了用戶的web創作。中文版Firework MX結合了點陣圖處理軟體Photoshop和矢量圖處理軟體CorelDRAW二者的優點,具有專業的網頁圖像優化功能,且能DreamWeaverMX天衣無縫地結合使其迅速成為流行的網頁圖像處理工具。利用中文版Firework MX,用戶可以在一個專業化的環境中創建和編輯網頁圖形、進行動畫處理、添加高級交互功能以及優化圖像等。中文版FlashMX則是一款具有全新意義的網頁動畫製作軟體,它提供了廣泛的平台支持,不需要任何編程工作就能夠製作出非常精彩的動畫效果。中文版FlashMX具有簡
單易學、開發效率高等特點,同時它生成的文件較小,特別適合於網路傳輸,因此在互聯網上得到了十分廣泛的應用。
本書共分四篇,包括158個經典實例,其中:
第一篇:中文版DreamWeaverMX實例。本篇通過40個實例講解了中文版DreamWeaverMX的使用方法和技巧。讀者通過這一篇的學習,可以對DreamWeaverMX有一個由淺入深的了解,定會對這一網頁製作工具愛不釋手。
第二篇:中文版Firework MX實例。本篇通過53個實例講解了中文版Firework MX的使用方法和技巧。通過這些具體實例,能使廣大讀者迅速掌捏網頁對象的製作與處理方法。
第三篇:中文版FlashMX實例。本篇通過如個實例講解了中文版FlashMX的使用方法和技巧。讀者完全可以按照本書中的操作步進行各種影片文件的具體製作,也可以將書中實例的製作技巧應用到其他場合。
第四篇;三劍客綜合實例。本篇通過5個實例詳細講解了利用「網頁製作三劍客」建設網站的思路和方法。通過綜合實例的實戰演練,相信讀者的網頁製作水平將會有質的提高。
本書將豐富的實例與相關的知識點緊密結合、語言通俗易懂、圖文並茂,既可作為電腦網頁製作培訓班的教材,又可作為網頁設愛好者的參考用書。本書由崔亞量主編,由於編者水平有限,疏漏和不足之處在所難免,懇請廣大讀者和專家批評指正。
具體內容:
第一篇 中文版DreamWeaverMX實例
經典第1例 文本編排
經典第2例 為文本創建超鏈接
經典第3例 圖文混排
經典第4例 製作分隔線
經典第5例 插入和格式化表格
經典第6例 在頁面中插入團片和動態按鈕
經典第7例 為網頁插入背景音樂
經典第8例 為圖片創建熱區
經典第9例 製作導航條
經典第10例 在貝面中使用框架
經典第11例 在頁面中使用圖層
經典第12例 製作和驗證客戶表單
經典第13例 變換圖片效果
經典第14例 使用時間軸製作圖層動面
經典第15 例 在頁面中加入搜索引摯
經典第16例 製作Flash按鈕和Flash文本
經典第17 例 插入Flash動畫
經典第18例 使用「行為」面板
經典第19例 設置狀態欄文本
經典第20例 製作下拉菜單
經典第21例 製作下拉菜單(二)
經典第22例 製作下撿菜單(三)
經典第23例 製作下拉菜單(四)
經典第24例 製作電子相冊
經典第25例 CSS樣式表(一)
經典第26例 CSS樣式表(二)
經典第27例 CSS樣式表(三)
經典第28例 製作外部祥式表
經典第29例 使用資源
經典第30例 製作庫
經典第31例 製作授權
經典第32例 用模板
經典第33例 利用文件頭實現網頁自動刷新
經典第34例 使用JavaScript腳本製作樹狀菜單
經典第35例 使用JavaScript腳本製作時間顯示
經典第36例 使用JavaScript腳本製作自動問候
經典第37例 使用JavaScript腳本製作圖片隨滑鼠移動
經典第38例 使用JavaScript腳本製作頁面裁入效果
經典第39例 站點的維護(一)
經典第40例 站點的維護(二)
第二篇 中文版Firework MX實例
經典第41例 編輯文字
經典第42例 文字環繞
經典第43例幼稚體
經典第44例水印字
經典第45例立體宇
經典第46例金屆字
經典第47例浮雕字
經典第48例風格化文字
經典第49例幻影文字
經典第50例變形文字
經典第51例樓空文字
經典第52例閃爍文字
經典第53例鑲邊文字
經典第54例陰影文字
經典第55例旋轉文字
經典第56例流動文字
經典第57例畫像
經典第58例心形圖案
經典第59例圖形文字
經典第60例月牙
經典第61例立體陰影小球
經典第62例白雲
經典第63例藝術相框
經典第64例郵票
經典第65例星光
經典第66例圖片卷邊效果
經典第67例簡單按鈕
經典第68例快速製作按鈕
經典第69例膠囊式按鈕
經典第70例星光技鈕
經典第71例花瓣按鈕
經典第72例按鈕的熱點鏈接
經典第73例利用按鈕編輯器製作按鈕
經典第74例文字移動
經典第75例文字曲線運動
經典第76例圖片循環放映
經典第77例文字淡入淡出
經典第78例逐字顯示動畫
經典第79例禮花綻放動畫
經典第80例電光掠影動畫
經典第81例分身動畫效果
經典第82例蒙版動畫
經典第83例探照燈掃射效果
經典第84例晃動的文字
經典第85例轉動的圓盤
經典第86例動態箭頭
經典第87例晃動的木牌
經典第88例替換圖
經典第89例自身翻轉圖
經典第90例簡單動態按鈕
經典第91例下拉菜單
經典第92例交互按鈕
經典第93例交互網頁
第三篇 中文版FlashMX實例
經典第94例直線運動的小球
經典第95例彈性球
經典第96例爆炸效果
經典第97例電影序幕
經典第98例文字的平面環繞效果
經典第99例旋轉的風車
經典第100例殘影效果
經典第101例放大鏡效果
經典第102例雪花效果
經典第103例轉動的透明球
經典第104例雷達掃描效果
經典第105例洋蔥皮效果
經典第106例金魚游動
經典第107例大雨(一)
經典第108例大雨(二)
經典第109例文字的縮放
經典第110例文字的淡入淡出
經典第111例圖形問的變換
經典第112例打字機效果
經典第113例擦窗效果
經典第114例倒計時動畫
經典第115例探照燈效果
經典第116例燈光照射效果
經典第117例螺旋效果
經典第118例旋轉的三棱錐
經典第119例酷眩按鈕
經典第120例緣來是我
經典第121例移形換影
經典第122例漣筋
經典第123例拖民文字
經典策124例蝶舞
經典第125例來點音樂吧
經典第126例音樂按鈕
經典第127例中國足球
經典第128例交互性按鈕
經典第129例載入動畫
經典第130例滑鼠施放效果
經典第131例動態URL按鈕
經典第132例鏈盤控制小球移動
經典第133例彈出式菜單
經典第134例計數器
經典第135例一筆一劃
經典第136例爆炸按鈕
經典第137例輸入輸出文本
經典第138例下載進度條
經典第139例顯示系統的時間
經典第140例隨機運動的小球
經典第141例音量控制
經典第142例提交用戶名和密碼
經典第143常式序載入進度條
經典第144例狗抓老鼠
經典第145例遮罩效果
經典第146例文字效果
經典第147例自動跳開的檯球
經典第148例隨機數列
經典第149例獲取鍵盤信息
經典第150例查詢關鍵字
經典第151例奇鈔的曲線
經典第152例組合圖形
經典第153例阻尼跟隨效果
第四篇 三劍客綜合實例
實例154「北京風光」網站製作(一)
實例155「北京風光」網站製作(二)
實例156「北京風光」網站製作(三
實例157「青青心情」網站製作(一)
實例157「青青心情」網站製作(二)

下載地址http://soft.zozoto.cn/content/59901

6、靜態網頁製作實例啊,靜態網頁製作實例啊,誰有啊?

設計雲免費靜態網頁製作實例就可以下載

7、html靜態網頁設計大作業

<html>
<head>
<style>
html,body{margin:0px;text-align:center;}
.main{width:1000px;margin:0px auto;padding-top:30px;}
.title{font-size:18px;text-decoration:underline;font-weight:bold;}
.formtable{width:100%;font-size:12px;margin-top:20px;}
.lefttd{width:350px;text-align:right;}
.righttd{text-align:left;}
.etxt{width:300px;}
.etel{width:200px;}
.eta{width:320px;height:100px;}
.cinpt{text-align:center;padding-top:20px;}
</style>
</head>
<body>
<div class="main">
<div><span class="title">請留下個人資料</span></div>
<div>
<table class="formtable">
<tr><td class="lefttd">姓名:</td><td class="righttd"><input type="text" /></td></tr>
<tr><td class="lefttd">E-mail:</td><td class="righttd"><input type="text" class="etxt" /></td></tr>
<tr><td class="lefttd">電話:</td><td class="righttd"><input type="text" class="etel" /></td></tr>
<tr><td class="lefttd">性別:</td><td class="righttd"><input type="radio" checked="checked" name="rd" />女 <input type="radio" checked="checked" name="rd" />男</td></tr>
<tr><td class="lefttd">年齡:</td><td class="righttd"><select><option>20以下</option><option>20以上</option></select></td></tr>
<tr><td class="lefttd">留言板:</td><td class="righttd"><textarea class="eta"></textarea></td></tr>
<tr><td class="lefttd">您的愛好:</td><td class="righttd"><input type="checkbox" name="cb1" />運動 <input type="checkbox" name="cb2" />閱讀 <input type="checkbox" name="cb2" />聽音樂 <input type="checkbox" name="cb2" />旅遊</td></tr>
<tr><td colspan="2" class="cinpt"><input type="button" value="提交" /></td></tr>
</table>
</div>
</div>
</body>
</html>

8、靜態網頁設計

我把網上最主流的網頁/網站製作工具都列出來了
其中第1、2是主要製作工具,後面的多是輔助工具
3、6是比較容易上手的

另外最簡單的靜態頁面其實可以用word製作,保存成html就可以
你可以試試

1、FrontPage
FrontPage是一款優秀的網頁製作與開發工具之一,它本身也是Office2000中的一個重要組件,採用了與Office2000其他組件一致的界面和操作方式,只要您使用過Office軟體,就可以輕松掌握FrontPage的用法。
2、網頁製作三劍客
Flash、Dreamweaver、Fireworks合在一起被稱為網頁製作三劍客。這三個軟體相輔相承,是製作網頁的首選工具,其中Dreamweaver主要用來製作網頁文件,製作出來的網頁兼容性好、製作效率也很高,Flash用來製作精美的網頁動畫,Fireworks用來處理網頁中的圖形。
3、Photoshop
Photoshop是Adobe公司的王牌產品,無論是在平面廣告設計、室內裝潢,還是處理個人數碼照片方面,Photoshop都已經成為不可或缺的工具。在網頁製作方面,它多姿多彩的濾鏡和功能強大的選擇工具可以做出各種各樣的文字效果來。
4、Swishmax
Swish是一款非常方便的Flash文字特效製作工具,你只要點幾下滑鼠,就可以創造出形狀、文字、按鈕動畫,你也可以選擇內建的超過230種諸如爆炸、漩渦、3D旋轉以及波浪等預設的動畫效果。
5、PhotoImpact
PhotoImpact提供了多媒體時代專業影像設計者最直覺的創意空間、最方便的製作工具、及最寬廣的表達形式,整合了新時代的3D物件及文字特效與粒子效果、壓力筆支援、不同的自然筆觸、各式直覺操作的特效圖庫、以及網頁影像與辦公室文件的相容性,將構思到表達的過程完整組合,是專業網頁影像設計者不可或缺的利器。
6、Sound Forge
Sound Forge軟體是一款非常棒的音效編輯軟體,它除了音效編輯軟體的功能外,還可以讓你處理大量的音效轉換的工作,使你能夠輕松的完成各種看似復雜的音效編輯工作。如果下載的是英文版,可以用金山快譯永久漢化,但效果不是很盡人意。
7、碩思閃客精靈
碩思閃客精靈是一款用於瀏覽和解析Flash動畫的工具。它可以將.swf文件導出成.fla文件,還能將flash動畫中的圖片、矢量圖、聲音、視頻(*.flv)、文字、按鈕、影片片段、幀等基本元素完全分解,以及對動作腳本(ActionScript)進行解析,清楚的顯示其動作代碼,讓你對Flash動畫的構造一目瞭然。建議你趕快去下載吧!}
8、Clipyard
你只要導入不同的Flash動畫文件,將其放在不同的層上,經調試效果,導出後就成了一個單獨的flash了,操作簡單,特別適合於將自己喜歡的Flash動畫加入祝福、簽名後贈送友人。
9、FlashFXP
是一款優秀的FTP工具,特別適合Web站點管理員使用。支持文件夾(帶子文件夾)的文件傳送、刪除;支持上傳、下載及第三方文件續傳;可以跳過指定的文件類型,只傳送需要的文件;可以自定義不同文件類型的顯示顏色;可以緩存遠端文件夾列表,支持FTP代理;具有避免空閑功能,防止被站點踢出;可以顯示或隱藏「隱藏」屬性的文件、文件夾;支持每個站點使用被動模式等。
10、FlaX
FlaX是一款製作Flash文字特效的小巧軟體。在以前若要製作文字繞圓圈的動畫,在Flash里一個一個字的慢慢調整位置,頗費時間,如果使用FlaX很快就可以就搞定。 FlaX有四個窗口面板:預覽窗口、影片屬性面板、文字屬性面板、特效屬性面板。
11、Web Animator
Web Animator(網頁動畫設計)是HomePage Builder附帶的創建動畫GIF的程序。所謂動畫GIF是GIF格式圖像文件的一種,組合幾個圖像象漫畫一樣連續運動。動畫GIF與普通的GIF圖像一樣可以粘貼到頁面。使用Web Animator可以完成如下工作:組合現有的圖像,創建類似於漫畫的動畫;給一個圖像添加動畫效果,創建具有效果的動畫;給指定的字元串添加動畫效果,創建字元動畫。
12.golive
Adobe收購mm之後推出的網頁製作工具,將代替Dreamweaver成為主流.
滿意請採納。

9、簡單的靜態網頁設計

您好,說簡單也不簡單,如果你肯花時間的話,那總會學會,你可以去比較好的設計公司拿里看看他們的實例是怎麼做的,你就知道是什麼程度了,你可以去BBD公司看看,能幫到你的忙。
有種最簡單的方法,最多十分鍾就搞定一頁:一,用DW軟體,打開-插入-表格-(這里您已經有了要作一個什麼樣網頁的大致想法)幾行,幾列。寬度要在1000為好,這樣下面就會出現一個導航條,邊界設置為0。如:插入表格為1行3列-確定。在用滑鼠點擊第一空格,插入-圖片,尋找您要插入圖片的位置,確定(或保存),然後在用滑鼠點擊第二個空格,插入。。。。等。以此類推。然後再用滑鼠點擊您剛才插入表格的下沿。重復您剛才的動作——插入-表格。幾行幾列要根據您對頁面的構思而定。如果要在空格里插入文章,一定要把文章的格式轉換成純Word文檔,後綴為.doc。

與靜態網頁設計樣例相關的知識