如何設計一個簡單的網頁,利用css和HTML?

利用軟體,設計一個簡單的主頁

工具/原料

Dreamweaver.8

方法/步驟

開啟軟體,出現一個頁面,如圖。然後選擇HTML,進入軟體,出現以下頁面,如圖

如何設計一個簡單的網頁,利用css和HTML

如何設計一個簡單的網頁,利用css和HTML

然後就可以開始設計主頁了,一個簡單的主頁,需要有圖片和文字,我選擇的是介紹css的一個簡單主頁,如圖,在網路上選擇圖片和文字,將標題改為“css的介紹”,如圖,然後選擇頁面上方的插入,選擇影象,如圖,然後會出現兩個頁面,點選確定,即可

如何設計一個簡單的網頁,利用css和HTML

如何設計一個簡單的網頁,利用css和HTML

確定後出現,如圖,這時,你會發現,頁面不夠大,圖片不能完全看到,所以,我們可以設定,圖片的寬度和高度,如圖,將高度這一欄不設定數字,僅將寬度設定,這樣,可以是圖片成比例縮小

如何設計一個簡單的網頁,利用css和HTML

如何設計一個簡單的網頁,利用css和HTML

然後新增文字,文字可以直接在設計視窗編寫,如圖。然後,你可以簡單的對文字進行編輯,在右邊的css樣式中,右擊全部,,出現新建,然後選擇“類”,編輯“body”,然後選擇"僅對該文件",出現頁面,如圖

如何設計一個簡單的網頁,利用css和HTML

如何設計一個簡單的網頁,利用css和HTML

然後編輯,你可以編輯文字,大小,樣式,如圖,然後,選中文字,右擊,選擇“css樣式”,出現另一個選擇,選擇“body”,就會出現效果,如圖

如何設計一個簡單的網頁,利用css和HTML

如何設計一個簡單的網頁,利用css和HTML

然後點選,頁面上方的一個圖示,如圖,點選,你可以選擇預覽在你的瀏覽器中,點選,然後出現,選擇“是”,就可以預覽了(這裡我選擇的是QQ瀏覽器)

如何設計一個簡單的網頁,利用css和HTML

如何設計一個簡單的網頁,利用css和HTML

然後出現,如圖,就這樣,一個簡單的主頁就這樣,出現了

如何設計一個簡單的網頁,利用css和HTML

注意事項

在設定CSS樣式時,注意是“類”,還是“高階”還是“標籤”

網頁, 利用軟體, 主頁,
相關問題答案