RWD 套版

2024-07-05

1.挑選版型 (推薦網站 https://html5up.net/ )(隨意挑選您喜愛的版型下載，每個版型的檔案架構可能都會有差異,但通常差異不大。)

2.將下載的檔案解壓縮

3.以notepad++開啟 index.html檔案, 觀察head標籤內部的css相關代碼

4.新增一個web表單 RWD.aspx ,先用來評估版型效果, 表單內只需要放一個panel控制項即可

5.RWD.aspx.cs的Page_Load撰寫以下程式碼

Button btn = new Button();
btn.Text = "Button Test";
this.Panel1.Controls.Add(btn);

Literal lt = new Literal();
lt.Text = "<br />";
this.Panel1.Controls.Add(lt);

Label lb = new Label();
lb.Text = "Label Test";
this.Panel1.Controls.Add(lb);

DataTable dT = new DataTable();
dT.Columns.Add("c1");
dT.Columns.Add("c2");
dT.Columns.Add("c3");
dT.Columns.Add("c4");
DataRow dR1 = dT.NewRow();
dR1["c1"] = "A";
dR1["c2"] = "B";
dR1["c3"] = "C";
dR1["c4"] = "D";
dT.Rows.Add(dR1);
DataRow dR2 = dT.NewRow();
dR2["c1"] = "E";
dR2["c2"] = "F";
dR2["c3"] = "G";
dR2["c4"] = "H";
dT.Rows.Add(dR2);

GridView gv = new GridView();
gv.DataSource = dT;
gv.DataBind();
this.Panel1.Controls.Add(gv);

6.將版型裡面的素材與圖檔目錄複製至專案目錄下,通常目錄名稱會是assets與images

7.參考index.html 修改 RWD.aspx

8.完成上面動作，就可以執行IIS測試囉。

參考網站：https://hackmd.io/@linyu413/ic20211230

回首頁