網(wǎng)編大賽第一次內培網(wǎng)頁基礎教程培訓_第1頁
網(wǎng)編大賽第一次內培網(wǎng)頁基礎教程培訓_第2頁
網(wǎng)編大賽第一次內培網(wǎng)頁基礎教程培訓_第3頁
網(wǎng)編大賽第一次內培網(wǎng)頁基礎教程培訓_第4頁
網(wǎng)編大賽第一次內培網(wǎng)頁基礎教程培訓_第5頁
已閱讀5頁，還剩10頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

網(wǎng)

頁

編

輯

基

礎

教

程

培

訓目錄第三章：學習利用網(wǎng)站模板第一章：html語言的基礎代碼第二章：編輯工具介紹第四章：后續(xù)學習HTML

文件結構<html>...</html><head>...</head><body>...</body>第一章：html語言的基礎代碼例子1：<HTML><HEAD><title></title></HEAD><BODY>HTML

文件的正文寫在這里......</BODY></HTML><head>...</head>常用代碼<meta

http-equiv="Content-Type"

content="text/html;charset=gb2312"

/><title>移動商城</title><link

type="text/css"

rel="stylesheet"href="css/style.css">在HTML

文件中設置字符集信息。您在瀏覽主頁時，最好自己在瀏覽器的選項菜單內選擇相應的語言(language

encoding)。但是如果HTML

文件里寫明了設置，瀏覽器就會自動設置語言選項。尤其是主頁里用到了字符實體(entities)，則該主頁就應該寫明字符集信息。否則，您在瀏覽該主頁時，若未正確設置語言選項，顯示將可能混亂。寫網(wǎng)站名字的代碼，可以方便搜索以及在網(wǎng)頁的頂部出現(xiàn)網(wǎng)頁相關信息。調用外部cs、js文件的代碼，可以調用多個。第一章：html語言的基礎代碼Body的常用屬性<bodybgcolor=#000000background="image-URL"style="overflow:auto“topmargin="0"leftmargin="0"rightmargin="0“bottommargin="0">背景顏色背景圖片頁面滾動頂部頁面空白(Margin)左邊頁面空白(Margin)右邊頁面空白(Margin)底部頁面空白(Margin)第一章：html語言的基礎代碼靜態(tài)頁面比較常用的構造方式有兩種：一：表格（table）構造方式：優(yōu)點：可以方便靈活的排版，表格可以把相互關聯(lián)的信息元素集中定位，使瀏覽頁面的人一目了然；缺點：表格層級深，可能導致頁面展示效果慢；修改不夠靈活。二：div+css構造方式：優(yōu)點：縮減頁面代碼，提高頁面瀏覽速度，樣式控制，修改方便；缺點：技術難度較高，工作量比較大；樣式修改，需要一定的基礎，編寫要求高，對瀏覽器的兼容也有要求。三：兩者的對比：兩種方式都是可取的，并不一定div就比table好，好的頁面設計應該根據(jù)設計網(wǎng)站的難易程度以及網(wǎng)站的功能性等因素，決定選擇哪款構造方式，至于哪種網(wǎng)站用哪種方式試個人的經驗和用戶要求而定，可以確定的是，不管是哪種構造方式，合理的布局、代碼簡潔、注釋的齊全是構造頁面的必須條件。第一章：html語言的基礎代碼在html文檔中，表格是通過<table>、<tr>、<td>標簽來完成的，如下表所示：標簽描述<table>...</table>用于定義一個表格開始和結束<tr>...</tr>定義一行標簽，一組行標簽內可以建立多組由<td>標簽所定義的單元格<td>...</td>定義單元格標簽，一組<td>標簽將將建立一個單元格，<td>標簽必須放在<tr>標簽內在一個最基本的表格中，必須包含一組<table>標簽，一組標簽<tr>和一組<td>標簽Html頁面table基本元素構造實例：<html><head><title>一個簡單的表格</title></

head

><body><table><tr><td>第1行中的第1列</td><td>第1行中的第2列</td><td>第1行中的第3列</td></tr><tr><td>第2行中的第1列</td><td>第2行中的第2列</td><td>第2行中的第3列</td></tr></table></

body

></

html

>table表格開頭

tr行開頭第一個單元格第二個單元格第三個單元格

tr行結尾tr行開頭第一個單元格第二個單元格第三個單元格

tr行結尾table表格結尾第一章：html語言的基礎代碼表格<table>標簽最常用的屬性如下：屬性

widthheightalign:left.center.rightbackgroundbgcolorborder:0pxborder-style:solidborder:1px

solid

#000000bordercolor:$000000bordercolorlightbordercolordarkcellspacingcellpadding描述

表格的寬度表格的高度表格在頁面的水平擺放位置表格的背景圖片表格的背景顏色表格的邊框表格的邊框樣式表格邊框的寬度（以像素為單位）邊框顏色表格邊框明亮部分的顏色表格邊框昏暗部分的顏色單元格之間的間距單元格內容與單元格邊界之間的空白距離的大小第一章：html語言的基礎代碼<html><head><title>無標題文檔</title></head><body><table

border=10

bordercolor="#006803" border-style=“solid”

align="center"bgcolor="#DDFFDD“width=500

height="200"

bordercolorlight="#FFFFCC“bordercolordark="#660000“ background="../../imge/b0024.gif"

cellspacing="2"cellpadding="8"><tr><td>第1行中的第1列</td><td>第1行中的第2列</td><td>第1行中的第3列</td></tr><tr><td>第2行中的第1列</td><td>第2行中的第2列</td><td>第2行中的第3列</td></tr></table></body></html>第一章：html語言的基礎代碼第一章：html語言的基礎代碼<table

border=10

bordercolor="#006803" border-style=“solid”

align="center"bgcolor="#DDFFDD“width=500

height="200"

bordercolorlight="#FFFFCC“bordercolordark="#660000“ background="../../imge/b0024.gif"

cellspacing="2"cellpadding="8">我們一般習慣的寫法如下：<table

style=“border:10px

solid

#006803”

align="center"

bgcolor="#DDFFDD“width=500

height="200"

bordercolorlight="#FFFFCC“

bordercolordark="#660000“background="../../imge/b0024.gif"

cellspacing="2"

cellpadding="8">第一章：html語言的基礎代碼<td>是插入單元格的標簽，必須嵌套在<tr>標簽內。是成對出現(xiàn)的。<td>就是該單元格中的具體數(shù)據(jù)內容，屬性設定如下：屬性描述

單元格的寬和高，接受絕對值（如80）及相對值（如80%）。單元格向右打通的欄數(shù)單元格向下打通的列數(shù)單元格內字畫等的擺放貼，位置（水平），可選值為：left,

center,right。width/heightcolspanrowspanalignvalignbgcolorbordercolor單元格內字畫等的擺放貼單元格的底色單元格邊框顏色位置（垂直），可選值為：top,middle,

bottom。bordercolorlight

單元格邊框向光部分的顏色

bordercolordark

單元格邊框背光部分的顏色

background

單元格背景圖片第一章：html語言的基礎代碼推薦學習網(wǎng)站:個人建議:1、靈活應用，不需要死記硬背，學會使用瀏覽器調試（在ie和Chrome上使用快捷方式F12）。2、善于使用開發(fā)的UI或者框架。例子：第二章：編輯工具介紹Dreamweaver

現(xiàn)場演示下載網(wǎng)址

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論