網(wǎng)頁設(shè)計報告

1、qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdf

2、ghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmrtyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwert

3、yuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmrtyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxc

4、vbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmrtyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasd

5、fghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmrtyuiopasdfghjklzxcvbnmqwer

6、tyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjk

7、lzxcvbnmrtyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuio

8、pasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmrtyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm

9、qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmrtyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghj

10、klzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm網(wǎng)頁設(shè)計報告 姓名：楊麗娟 班級：電子商務(wù)1班 學(xué)號：2013414401231. 明確網(wǎng)頁主題2. 搜集設(shè)計網(wǎng)頁所需資料2.1. 搜集設(shè)計網(wǎng)頁所需圖片2.2. 使

11、用Photoshop對圖片進行處理2.3. 使用flash制作banner以及所需動畫圖片3. 設(shè)計網(wǎng)頁結(jié)構(gòu)，給網(wǎng)頁劃分網(wǎng)格4. 完成首頁以及其他頁面的制作4.1使用css+div進行布局，制作首頁 4.2使用css+div進行布局，制作首頁4.3創(chuàng)建模板，使用模板創(chuàng)建網(wǎng)頁，制作其他子頁5. 制作鏈接6. 修改完善自己的網(wǎng)頁1.明確網(wǎng)頁主題個人網(wǎng)站，包含首頁，個人簡介，大學(xué)生活，我的家人，我的相冊，我愛美食六個網(wǎng)頁2.搜集設(shè)計網(wǎng)頁所需資料2.1 . 搜集設(shè)計網(wǎng)頁所所需資料2.2. 使用Photoshop對圖片進行處理2.2.1使用Photoshop設(shè)計網(wǎng)站logo2.2.2使用Photosho

12、p對其他圖片進行處理2.3. 使用flash制作banner以及所需動畫圖片先使用Photoshop對圖片進行初步設(shè)計，再使用flash進行設(shè)計。分 別設(shè)計好主頁banner和其他子頁banner。3. 設(shè)計網(wǎng)頁結(jié)構(gòu)，給網(wǎng)頁劃分網(wǎng)格使用Excel進行布局設(shè)計首頁布局：個人簡介頁布局：大學(xué)生活頁布局：我的家人頁布局：我的相冊頁布局：我愛美食頁布局：4. 完成首頁以及其他頁面的制作4.1新建站點以及各個HTML文本啟動Dreaweaver，在【文件】面板中單擊【管理站點】鏈接，打開【管理站點】鏈接，打開【管理站點】對話框，單擊【新建】按鈕；彈出【站點設(shè)置對象】對話框，輸入站點名稱201341440

13、123+楊麗娟，【本地站點文件夾】選擇工作文件夾，單擊【保存】，單擊【完成】按鈕；新建的站點將出現(xiàn)在【文件】面板中，此時【文件】面板中顯示的是當(dāng)前站點的本地根文件夾中；右擊站點名稱，單擊【新建文件夾】命名為images，存放設(shè)計網(wǎng)頁所需的圖片資料；再次單擊站點名稱，單擊【新建文件】index.html;introduce.html;University.html;family.html;photo.html;food.html;4.2. 使用css+div進行布局，制作首頁雙擊文件，打開首頁index.html,右擊站點點擊【新建文件夾】命名為style.cSs,在文件夾中【新建文件】分別命名

14、為index.css和globle.css；將css樣式鏈接到index.html中，拖放到</head>之前； 鼠標(biāo)放置在<body>與</body>之間，在【菜單欄】面板中單擊【插入】，【布局對象】再單擊【Div標(biāo)簽】，在插入Div中點擊【新建CSS規(guī)則】，選擇或輸入選擇器名稱中輸入.logo，單擊【確定】,在規(guī)則定義中設(shè)置背景顏色和方框?qū)挾?60，高度200，單擊【確定】； 切換到globle.css界面，輸入代碼margin：0；padding 0；清除瀏覽器默認邊距； 切換到index.html界面，輸入代碼margin：0 auto； 使用同樣的

15、方法插入其他模塊，并在index.html的其他模塊中輸入代碼margin：5px auto；使各個模塊居中，并相距5px ; 在.logo中分別插入圖片logo和flash動畫；在.nav中切換到源代碼中輸入想要輸入首頁|個人簡歷|大學(xué)生活|我的家人|我的相冊|我愛美食等文字，再切換到index.css樣式中輸入代碼line-height:35px; font-size:16px; text-align:center；使文字居中對齊，最后切換到globle.css樣式中輸入代碼acolor:#000; text-decoration:none;a:hovercolor:#933; text-

16、decoration:underline最后在其它模塊插入圖片，完善首頁。4.3. 創(chuàng)建模板，使用模板創(chuàng)建網(wǎng)頁，制作其他子頁首先是必須建立好一個頁的基本框架，把固定的元素先確定下來，留出一些空白的編輯區(qū)域給一些變動元素，在菜單欄上依次打開【插入】【模板對象】【創(chuàng)建模板】，重新命名你的網(wǎng)頁模板，將鼠標(biāo)光標(biāo)定位到需要插入編輯區(qū)域的地方，然后在菜單欄中打開【插入】【模板對象】【可編輯區(qū)域】建立好的可編輯區(qū)域后以后可以直接在這里面輸入相應(yīng)的內(nèi)容，大多數(shù)需要不斷更新的。然后就可以直接CTRL+S保存這個模板了，網(wǎng)頁模板的格式是.dwt，使用網(wǎng)頁模板，可以在菜單欄中打開【文件】【新建】【模板中的頁】，選定剛剛重命名的制作好的模板就可以直接引用了。根據(jù)設(shè)計好的布局設(shè)計其它子頁。 個人簡介效果圖：我的大學(xué)效果圖：我的家人效果圖：我的相冊效果圖：我愛美食效果圖：5. 制作鏈接在首頁的源代碼中修改代碼，輸入：<p> <a href="index.html">首頁</a> | <a href="introduce.html">個人簡介</a> | <a href="university.html">大學(xué)生活<