多媒體製作:網頁入門

圖片來源:photopin

私心覺得多媒體是好課啊!內化的部分比較多,當一個 guide 其實不錯,但真正重要的是自己實做啦!

張瑞峰教授今天介紹的是 Microsoft 的套裝軟體:

以下是幾點上課快速截取的筆記:

1. (自訂格式,要改的時候改css的格式就好,比較方便)

寫網頁的觀念:

html 目錄

apply css  styles to web:(apply style sheet)

  • external : CSS file
  • embedded
  • inline

<html>

<head>

<title>welcome

<link rel="style lesheet

</head>

<body>

css 的文法

h1, h2

{

font-family: Arial;

font size: 14px

color: black;

}

好處:只要改源頭格式就好!把 css 文字格式獨立出來

2.放圖片:類似 word 調整圖片格式

cellspacing=0, cellpadding=0

3. css class

.logo

{

css code

}

.logo

{

position: absolute;

top: 259px;

left:232px;

z-index:1;

}

處理方式和 photoshop 圖層相似。

3.教特殊 css 的用法、網頁設計。

4.HTML 5 漸漸取代 flash,apple 已經率先刪掉 flash, browser 就可以開了。

5.更高接的應用:語法改變而已,php (和資料庫結合)、sequel(資料庫共同語言:甲骨文軟體公司靠資料庫賺很多錢,一片控制光碟值一、兩千萬)

6.設定 page 的大小:每台電腦的螢幕大小不同,建議最佳解析度,防止畫面跑掉

7.layout table 比 Frames 新,使用 layout table 來排版!

  • 網頁換行 (break) :可寬可窄,所以換行並沒有意義,enter 的換行不會秀出來,除非自己寫 break (shift+ enter),重設分隔號
  • 網頁排版:行距、英文左右切齊(參考 word 的做法),但中文比較難(加入空格又不好看)
  • 插入符號、水平線:Insert>>symbol、HTML>>Insert>>horizontal line
  • creating headings:user 瀏覽器的設定,heading 1、heading 2 …
  • 對齊影像:瀏覽器只能 show GIF(256 種顏色,可製作動畫),  JPEC(會失真的壓縮檔,可以壓到很小,人眼分辨不出,mp3 也是同樣的道理–遮蔽原理), PNG   (指定某個顏色為透明色,圖片不限定形狀)
  • Add Borders, Margins, or Padding 定義:控制界面

 

7.來用用看吧!

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s