網(wǎng)頁設(shè)計(jì)第1講網(wǎng)頁設(shè)計(jì)概述

1、Dreamweaver CS5第1講網(wǎng)頁設(shè)計(jì)概述11 網(wǎng)站的概述 初識(shí)Dreamweaver CS5 Dreamweaver CS5的用戶界面4 網(wǎng)頁文件的基本操作 5 設(shè)置網(wǎng)頁外觀屬性 第1講 網(wǎng)頁設(shè)計(jì)概述Dreamweaver CS52網(wǎng)站的概述1 網(wǎng)頁與網(wǎng)站 網(wǎng)頁（Web Page）是網(wǎng)站中的一頁，通常是HTML格式 網(wǎng)頁可分靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁 瀏覽網(wǎng)頁時(shí)在瀏覽器中看到的一個(gè)個(gè)頁面就是網(wǎng)頁，而多個(gè)相關(guān)的網(wǎng)頁的集合就構(gòu)成了一個(gè)網(wǎng)站。網(wǎng)頁設(shè)計(jì)第1講3網(wǎng)站的概述1 網(wǎng)站（Web Site）是網(wǎng)頁的集合 按照內(nèi)容劃分，網(wǎng)站有以下幾大類：網(wǎng)頁設(shè)計(jì)第1講大型門戶網(wǎng)站搜索引擎網(wǎng)站購(gòu)物網(wǎng)站專業(yè)網(wǎng)站企業(yè)網(wǎng)

2、站個(gè)人網(wǎng)站4網(wǎng)站的概述1網(wǎng)頁設(shè)計(jì)第1講 瀏覽網(wǎng)頁的工具-瀏覽器 用于打開顯示網(wǎng)頁的軟件，最常見的是Windows系統(tǒng)自帶的IE瀏覽器，還有火狐Firefox、360安全瀏覽器、遨游、騰訊TT等 1）網(wǎng)址：用于定位某個(gè)網(wǎng)站某個(gè)頁面的一串字符 2）主頁：訪問網(wǎng)站時(shí)，默認(rèn)打開的第一個(gè)頁面是主頁也叫首頁5網(wǎng)站的概述1 認(rèn)識(shí)網(wǎng)頁的組成元素網(wǎng)頁標(biāo)題LOGO視 頻文 本導(dǎo)航欄圖 片表單超級(jí)鏈接網(wǎng)頁設(shè)計(jì)第1講6網(wǎng)站的概述1 網(wǎng)頁的尺寸網(wǎng)頁設(shè)計(jì)第1講顯示器屏幕的分辨率瀏覽器軟件兩個(gè)因素一由于瀏覽器的不同對(duì)于一些效果的顯示也不同設(shè)計(jì)完之后在不同的瀏覽器之間進(jìn)行測(cè)試不同分辨率的顯示器在顯示同一個(gè)網(wǎng)頁時(shí)可能出現(xiàn)不同效

3、果，為了能在一般的顯示器上都能正常顯示網(wǎng)頁，建議設(shè)定網(wǎng)頁尺寸時(shí)要小于顯示器分辨率，且不能只考慮自己顯示器的分辨率7 網(wǎng)站制作流程 規(guī)劃階段 設(shè)計(jì)階段 實(shí)施階段 網(wǎng)站策劃 網(wǎng)頁美工 網(wǎng)頁制作123網(wǎng)頁設(shè)計(jì)第1講初始Dreamweaver CS528 網(wǎng)站制作流程中的注意事項(xiàng)網(wǎng)頁設(shè)計(jì)第1講主題、結(jié)構(gòu)、欄目設(shè)置、風(fēng)格、顏色、版面主題小而精 感興趣/擅長(zhǎng)的內(nèi)容 搜集素材 邏輯清晰 布局合理 風(fēng)格統(tǒng)一 顏色協(xié)調(diào) 版面簡(jiǎn)潔 動(dòng)靜結(jié)合初始Dreamweaver CS529初始Dreamweaver CS52 認(rèn)識(shí)Dreamweaver CS5Dream + weaver =網(wǎng)頁設(shè)計(jì)第1講Dreamweave

4、r10Dreamweaver CS5的用戶界面3菜單欄插入欄文檔工具欄文檔窗口標(biāo)簽選擇器狀態(tài)欄屬性面板面板組文件面板網(wǎng)頁設(shè)計(jì)第1講設(shè)計(jì)器文件保存位置11Dreamweaver CS5的用戶界面3網(wǎng)頁設(shè)計(jì)第1講插入欄包含用于創(chuàng)建和插入對(duì)象（如表格、層和圖像）的按鈕。當(dāng)鼠標(biāo)指針滾動(dòng)到一個(gè)按鈕上時(shí)，會(huì)出現(xiàn)一個(gè)工具提示，其中含有該按鈕的名稱，如下圖所示。12Dreamweaver CS5的用戶界面3網(wǎng)頁設(shè)計(jì)第1講三種視圖在瀏覽器中預(yù)覽/調(diào)試可視化助理刷新設(shè)計(jì)視圖文檔標(biāo)題文檔工具欄13網(wǎng)頁文件的基本操作4基本網(wǎng)頁的文件類型為HTML文檔，保存的文件擴(kuò)展名為 “.html”創(chuàng)建網(wǎng)頁文檔（HTML文檔）文件

5、新建新建文檔常規(guī)類別基本頁保存指定文件 文件保存（或Ctrl+S)、另存為、保存全部*網(wǎng)頁文件用英文或數(shù)字命名，莫用中文打開已建的HTML文檔關(guān)閉文件還未保存的網(wǎng)頁關(guān)閉時(shí)會(huì)提示你是否保存，文件名后有（*）號(hào)其他操作多個(gè)編輯文件的切換選擇預(yù)覽編輯中的網(wǎng)頁 (快捷鍵F12)網(wǎng)頁設(shè)計(jì)第1講14設(shè)置網(wǎng)頁外觀屬性5網(wǎng)頁標(biāo)題頁面默認(rèn)字體默認(rèn)字體大小背景顏色邊距網(wǎng)頁設(shè)計(jì)第1講15網(wǎng)頁設(shè)計(jì)第1講 Dreamweaver CS5歸納與小結(jié) 了解網(wǎng)站的基本概念掌握網(wǎng)頁設(shè)計(jì)與制作的基本流程熟悉網(wǎng)頁設(shè)計(jì)工具界面16第1講作業(yè) （步驟1）新建文件夾，命名為“姓名+學(xué)號(hào)”（*作業(yè)都要保存到此文件夾）（步驟2）搜索一張圖片（與網(wǎng)頁設(shè)計(jì)相關(guān)），重命名為“ch1.jpg”存到”姓名+學(xué)號(hào)”下（步驟3）新建一個(gè)網(wǎng)頁，輸入姓名、學(xué)號(hào)，換行（Enter）插入圖片（步驟4）保存到“姓名+學(xué)號(hào)”下，ch1.html（*不能使用中文