當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

《DW学习笔记》模块一：初识网页设计

發布時間：2024/1/1 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了《DW学习笔记》模块一：初识网页设计小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

模塊一：初識網頁設計

文章目錄

模塊一：初識網頁設計
- 任務1：網頁設計相關概念
- - 一、網頁與網站
  - - 什么是網頁（web page）？
    - 什么是網站（web site）？
  - 二、網頁的構成元素
  - - 1、構成網頁的元素，主要包括：文字、圖像、音頻視頻、動畫、樣式、各類腳本等
    - 2、HTML、CSS、JavaScript三者的關系
  - 三、靜態網頁與動態網頁
  - - 1、按網頁的表現形式，網頁主要分為兩種類型
    - - （1）靜態網頁
      - （2）動態網頁
  - 四、網站開發流程
  - - 1、需求分析
    - 2、網站規劃
    - 3、網站制作
    - 4、網站測試
    - 5、網站發布
    - 6、更新維護
- 任務2：認識并操作Dreamweaver
- - 1、認識Dreamweaver
  - - （1）【插入】工具面板
    - （2）【文檔】工具欄
    - （3）【文件】工具欄
  - 2、使用記事本創建網頁
  - - （1）使用記事本創建網頁的步驟：
    - （2）案例
    - - ①案例：在Dreamweaver中創建網站及網頁
      - ②案例：修飾網頁

任務1：網頁設計相關概念

一、網頁與網站

什么是網頁（web page）？

網站中的一頁，一個網站中的網頁通過“超鏈接”的方式被組織在一起。

什么是網站（web site）？

互聯網上用于展示特定內容的相關網頁的集合。

二、網頁的構成元素

1、構成網頁的元素，主要包括：文字、圖像、音頻視頻、動畫、樣式、各類腳本等

（1）文字

文字是網頁最基本的組成元素之一。文字在網頁中的表現形式主要涉及到字體、字號和編碼。

（2）圖像

圖像也是網頁中最常見的元素之一，比文字的效果形象、生動。常見的用于網頁中的圖像的格式主要有jpg、gif 、png等。

（3）音頻

主要采用MP3和MIDI格式的音頻文件。

（4）視頻

在網頁中播放視頻文件需要視頻播放插件的支持，目前網頁上常用的視頻文件的格式為WMV、FLV、MPEG、RM等。

（5）動畫

網頁動畫主要是指swf文件，swf是Flash的專用格式，是一種支持矢量和點陣圖形的動畫文件格式，被廣泛應用于網頁設計、動畫制作等領域，swf文件通。常也被稱為Flash文件。

（6）HTML

HTML是用來制作網頁的標記語言，HTML是Hypertext Markup Language的英文縮寫，即超文本標記語言，不需要編譯，直接由瀏覽器執行。

HTML對網頁元素有對應的標簽和屬性，可通過對標簽的屬性的設置，美化網頁的效果。

從語義的角度，描述頁面結構。

（7）CSS

CSS層疊樣式表，使用CSS對網頁中元素的位置進行像素級的精確控制，從審美的角度，美化頁面

（8）JavaScript

一種基于對象和事件驅動并具有相對安全性的客戶端腳本語言，廣泛用于客戶端Web開發，在HTML網頁中加入JavaScript，能增加網頁的客戶端的交互效果，從交互的角度，提升用戶體驗。

2、HTML、CSS、JavaScript三者的關系

三、靜態網頁與動態網頁

1、按網頁的表現形式，網頁主要分為兩種類型

（1）靜態網頁

概念：通常指的是文件后綴名為.html、.htm和.shtml等形式呈現的網頁。

特點：瀏覽器端不與服務器端發生交互。

（2）動態網頁

概念：指網頁文件里包含了程序代碼，通過后臺數據庫與Web服務器的信息交互，由后臺數據庫提供實時數據更新和數據查詢服務。這種網頁的后綴名稱一般根據不同的程序設計語言而不同，如常見的有.asp、aspx、jsp、.php等形式為后綴。

特點：瀏覽器端與服務器端發生交互，數據實時更新。

四、網站開發流程

1、需求分析

建站目標、網站需求

2、網站規劃

網站規劃：網站風格、網站布局、網站你內容

資料收集：圖片、文字內容、視頻等

3、網站制作

網頁制作：網頁、模板、CSS等

4、網站測試

本地測試、遠程測試

5、網站發布

空間域名、網站上傳

6、更新維護

網站管理

任務2：認識并操作Dreamweaver

1、認識Dreamweaver

（1）【插入】工具面板

（2）【文檔】工具欄

（3）【文件】工具欄

2、使用記事本創建網頁

（1）使用記事本創建網頁的步驟：

打開記事本

輸入HTML代碼

保存為.html或.htm文件，注意格式問題

打開網頁預覽效果

（2）案例

①案例：在Dreamweaver中創建網站及網頁

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title> 我的第一個網頁</title> </head> <body> 歡迎來到我的第一個網頁！ </body> </html>

②案例：修飾網頁

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8" /><title>我的第一個網頁</title><script type="text/javascript">document.write("hello");</script><style type="text/css">p{color:red;}</style> </head> <body><p>歡迎訪問我的第一個網頁！</p> </body> </html>

總結

以上是生活随笔為你收集整理的《DW学习笔记》模块一：初识网页设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： word2vec学习+使用介绍
下一篇： [XCTF] 逆向 Reversing-