年一度的中秋節馬上就到啦，小伙伴們收到月餅了嗎。

記得我的學生時代，郵件祝福還風靡過一段時間，打開QQ郵箱，各種轉發郵件和祝福郵件，現在想想都覺得有點久遠了。
相信小伙伴們也都用過群發郵件的功能，例如QQ郵箱，163郵箱等都有提供這種功能，直接發送或者密送都可以。但都會存在一個問題，就是一鍵發送時，郵件內容都是一樣的，無法針對收件人而有個性化的稱呼。針對這個需求，我們可以做一個群發郵件的桌面端軟件。

我們首先整理下我們需要實現的最簡單的功能：

• 可以輸入并記住賬號和密碼
• 可以導入收件人信息
• 可以自由選擇收件人
• 郵件內容可以針對收件人進行個性化修改，可以輸入郵件標題，可以附帶圖片
• 有發送郵件的功能

需求整理完成，說干就干。

布局

首先新建一個窗體，定義為MainForm。將MainForm的初始狀態修改為一打開就最大化。

this.WindowState = FormWindowState.Maximized;

我們可以用GroupBox將Mainform劃分為三部分，“登錄信息”，“收件人信息”，還有“郵件內容”，如圖：

Tips：因為我們默認窗口最大化，所以我們需要先設置三個GroupBox的Anchor屬性，依次分別為“Top,Bottom,Left”，“Top,Bottom,Left”和“Top,Bottom,Left,Right”。這樣GroupBox就會隨窗口大小變化而不至于打亂布局。

控件

劃分布局之后，在每一個GroupBox中增加我們需要的控件。

“登錄信息”：

兩個Label(標注“賬號”與“密碼”)；

兩個TextBox(用來輸入賬號與密碼)；

兩個CheckBox(一個用來記住賬戶密碼，一個用來隱藏密碼)。

用TextBox輸入密碼時，我們可以設置TextBox的UseSystemPasswordChar屬性為True，則我們輸入的文字都會以密文顯示。與CheckBox聯動，默認勾選CheckBox時，密碼以符號顯示，不勾選CheckBox時，密碼以明文顯示。

代碼如下：

private void cbShowPwd_CheckedChanged(object sender, EventArgs e)
 {
       if (this.cbShowPwd.Checked == true)
            {
                this.tbPassword.UseSystemPasswordChar = false;
                
            }
            else
            {
                this.tbPassword.UseSystemPasswordChar = true;
            }
}

實際效果如圖：

記住賬戶與密碼涉及本地存儲，我們后面具體寫代碼時再來實現這個功能，先按住不提。

“收件人信息”：

一個CheckBox(全選功能)；

一個CheckListBox(用來顯示導入的收件人信息)；

兩個Button(一個用來導入文件，一個用來確認選擇收件人)；

一個Label(用來顯示已選擇的收件人數量)。

關于CheckListBox的相關設置與全選功能具體可以查看我的上一篇文章（「Winform開發小技巧05」批量操作單號-CheckListBox）

全選功能代碼：

private void cbSelectAll_CheckedChanged(object sender, EventArgs e)
 {
   //全選功能
            if (this.cbSelectAll.Checked)
            {
                for (int i = 0; i < this.clbReceivers.Items.Count; i++)
                {
                    if (!this.clbReceivers.GetItemChecked(i))
                        this.clbReceivers.SetItemChecked(i,true);
                }
            }
            else
            {
                for (int i = 0; i < this.clbReceivers.Items.Count; i++)
                {
                    if (this.clbReceivers.GetItemChecked(i))
                        this.clbReceivers.SetItemChecked(i, false);
                }
            }
}

這里的操作邏輯是：點擊Button導入收件人=>CheckListBox顯示收件人=>全選=>Label顯示已選人數=>點擊Button確認選擇，收件人數據傳輸到下一個部分“郵件內容”。

導入功能我們可以寫一個方法，這里先暫時不寫。

我們可以先解決Label的顯示問題。Label顯示選擇人數時，需要根據CheckListBox中Item的實時勾選狀態進行變化，這個比較有趣，我們可以在CheckListBox的Itemcheck事件中實現。

代碼如下：

private void clbReceivers_ItemCheck(object sender, ItemCheckEventArgs e)
 {
            //這個事件是指示某項的選中狀態將要被更改、在更改前會執行這個事件
            //所以checkedListBox.CheckedItems.Count獲取的是更改之前的值           
            if (e.NewValue == CheckState.Checked)
            {

                this.lbSelectedCount.Text = "已選："+(this.clbReceivers.CheckedItems.Count + 1).ToString();

            }
            else
            {
                this.lbSelectedCount.Text = "已選：" + (this.clbReceivers.CheckedItems.Count - 1).ToString();

            }
}

實際效果如圖：(因為還沒有數據，為了展示效果，我先手動輸入一些數據)

“郵件內容”：

兩個Label；

兩個TextBox(一個用來顯示收件人，一個用來輸入標題，顯示收件人我們可以將其MultiLine屬性設置為True,這樣可以多行顯示)；

一個RichTextBox(用來輸入正文內容，后期我們用Html來發送文件，RichTextBox方便我們輸入段落及圖片)；

一個Button(用來確認發送郵件)。

效果如圖：

至此，我們的布局就全部完成了！

但是大家又沒有發現一個問題，由于Winfrom界面縮放問題，我們生成的界面有點模糊，很難看，針對這個問題，微軟有專門的解決方案。

首先右鍵項目=>添加新建項=>添加應用程序清單文件。

打開app.manifest文件，取消application節點注釋

打開App.config文件，添加節點EnableWindowsFormsHighDpiAutoResizing，值為true

此時我們重新按F5進行編譯，可以發現界面分辨率正常了，瞬間好看不少有沒有。

下篇文章，我們就開始正式編碼了，或許可以趕上中秋給大家拜個晚年了，哈哈哈

如果各位覺得我寫的對你有那么一點點幫助，歡迎一鍵三連~感激不盡~

什么學習網頁制作？

互聯網時代的今天，各種各樣的網頁充斥著我們的生活。只要使用瀏覽器，打開的每一個頁面都可以稱之為網頁。即使使用頭條這樣的APP，其內容布局、展示的方法也脫胎于網頁頁面設計的方法與原則。可以說頁面的概念已經遍布我們的信息化世界。

作為蕓蕓眾生中的一員，學習網頁制作對我們的事業、生活有怎樣的幫助呢？

第一，學習網頁制作有助于理解網絡信息的傳播運行機制，即使通過本課程不能全面了解這些核心機制，也能為大家鋪墊下繼續深入學習的知識基礎。即使自己不必親自制作網頁，在使用第三方工具時，比如微信公眾號、微信小程序或者其他自動網頁或網站生成工具時也會比沒有基礎的人更快的掌握這些工具。

第二，學好網頁制作是制作網站的基礎，如果您因為事業需要或者個人愛好打算制作自己的網站或博客，無論是打算使用php還是Java還是Python去構建您的網站，精通網頁制作技術是您的第一塊技術基石。

第三，如果您打算學習網絡爬蟲來分析一些網絡數據，了解網頁頁面構成也是必要基礎，至少您要知道一個網頁頁面中每個標簽中對應的是哪些信息，才能有的放矢拿到自己想要的信息。

第四，如果您想學習編程，但是缺少相應的基礎知識，看不懂復雜的C語言教學，那么從網頁制作入手嘗試理解編程的語法也是一個很不錯的選擇。

除此之外，瀏覽器可以做的事情越來越多，比如webgl的出現，可以讓我們通過瀏覽器構建3d世界，無論是虛擬現實（VR）還是增強現實（AR）都有很多開源免費的解決方案。TensorFlow的JavaScript版本的出現，讓我們可以通過結合瀏覽器學習使用人工智能技術，且非常容易實現。

所以，新的一年里，我打算做網頁制作的學習教程，讓更多沒有基礎卻對網絡技術感興趣的小伙伴能加入進來。

制作網頁需要學習哪些技術？

簡單來說學習網頁制作需要掌握三門技術。

第一，也是最基礎最核心的內容是HTML超文本標記語言。大家不必糾結HTML到底是什么，但是一定要記住它能干什么。HTML通俗來說可以比喻成容器。大家試想，網頁里都有哪些內容呢？

一般網頁中都會有文字、圖片、聲音、視頻、表格等內容，這些內容就是靠HTML中的標簽添加進頁面的。

所以說HTML這個工具就是個容器，我們使用HTML標簽語言為網頁添加所有需要的信息內容。

第二，CSS層疊樣式表，這是一個用來裝飾頁面的工具。如果說HTML是個信息容器，那么如何讓這些信息條理清晰的顯示出來呢？那就需要CSS來幫忙了。如下圖所示，這是一個最簡單的頁面，只用到了HTML，里面裝了一個標題和一個只有六個字的段落。

為了讓這個頁面看起來美觀些，我們為其添加css樣式表。添加后如圖所示：

我們可以看出來，CSS讓標題文字換了顏色，也居中顯示了，背景也變成了藍色。

第三，JavaScript，這個工具相比HTML和CSS來講是最難學習的，學習JavaScript就是在學習編程了。它雖然只是個腳本語言，但是用到的知識和其他編程語言相差不大。

那JavaScript能干什么呢？

首先，它能為頁面中添加很多交互效果。舉個例子，我們常見的圖片翻頁、輪播很多就是基于JavaScript腳本實現的。

其次，JavaScript可以為傳統頁面擴展出很多新功能，例如結合three.js我們可以很容易的在頁面中構建三維空間，或者實現一些3d游戲或其他三維動態演示效果。舉個例子（https://renaultespace.littleworkshop.fr/），打開可能略慢。3d展示的汽車廣告是不是很酷！

再次，JavaScript可以以網頁為基礎，實現各種各樣的在線小游戲，例如Phaser.js就是目前非常火的一個開源免費網頁游戲制作庫。phaser官網：http://phaser.io/

JavaScript為網頁的功能拓展提供了很多可能性，無論是3d顯示還是游戲制作還是未來的人工智能工具，都是由JavaScript都為大家提供了將功能引入到頁面的接口，這也是學習難度比較大的原因。不過只要堅持下去一定能學通的！

網站與網頁的區別？

網頁是指我們看到的單個頁面。這些頁面分為靜態頁面和動態頁面兩種。靜態頁面指的是不能與服務器進行數據交互的頁面，顧名思義動態頁面指的是可以與服務器進行數據交互的頁面，這一點大家不必糾結。

簡單來說，靜態頁面寫好后什么樣就是什么樣，誰打開都是事先編輯好的內容，而動態頁面寫好后會隨著不同的訪問變換不同數據，動態頁面更像是一個頁面模板，隨時套用不同信息。

大部分網站中的頁面都是動態頁面。

如果使用靜態頁面做網站會出現什么問題呢？如果您有300篇博客文章，那您就要做300個靜態頁面來顯示，大型資訊網站信息量更加龐大，如果都用靜態頁面來做，占用的服務器空間也是龐大到不可想象。

網站中的動態頁面就解決了這個問題，例如一個簡單的網站我們只需一個主頁、文章頁、搜索頁基本上就可以了，這些頁面中沒有具體內容，我們稱之為模板。當您打開后，顯示的內容都是在數據庫中調出的。這樣，一個數據庫用來存儲壓縮過的精簡信息，這些信息通過不同頁面模板顯示在用戶面前就成為網站的基本運行模式。

例如在靜態頁面中顯示文字字數的代碼是這樣

<p>300字</p>

如果使用以php編寫的WordPress網站框架來動態顯示文章字數就是這樣

<p><?php echo zm_count_words($text); ?></p>

<?php echo zm_count_words($text); ?>這條語句可以調取數據庫中文章字數的記錄并顯示出來。這也我們通過這一條語句就可以顯示不同文章的字數了。

無論是靜態頁面還是動態頁面，他們的核心內容都是一樣的，HTML，CSS，JavaScript都是必修知識。只是靜態頁面在HTML中插入信息，而動態頁面插入的是調取數據庫信息的語句。

因此，我們這個教程看起來是在做靜態頁面，但是我們學習的也是制作網站的基礎知識。

本教學學完能干什么？

第一，可以寫出靜態頁面。

第二，有能力讀懂他人寫好的頁面代碼。

第三，為繼續深入學習網站制作或更為炫酷的頁面制作打下基礎。

第四，掌握編程基礎，至少是基于JavaScript的。

我是大魚，致力于數字藝術技術分享！歡迎大家關注！祝愿大家2020年學有所成！

HTML學習目錄

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

天是女神節，也就是國際婦女節（International Women's Day，簡寫IWD）全稱“聯合國婦女權益和國際和平日”（United Nations women's rights and international peace day），在中國又稱“國際勞動婦女節”、“三八節”和“三八婦女節”。

作為一名集萬千技能于一身的程序員，你準備以什么樣的方式為她送上節日的祝福呢？在這個女神專屬的節日里，如果只是和大多數人一樣肆無忌憚的 買！買！買！吃！吃！吃！的話，就太沒有新意了，這怎么能在朋友圈曬圖大賽里脫穎而出呢？

作為程序員，你的技能不僅僅只是用來謀生的，也可以為你的生活增添一份情趣。W3Cschool小師妹為同學們準備了一份女神祝福源碼，可以直接抄作業哦。

我們直接看效果圖

效果圖

話不多說，直接上源碼：

源代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>女神節快樂 | w3cschool.cn</title>
    <style>
        body {
            background-color: rgb(250,227,221);
            font-family: Source Han Sans CN, Source Han Serif SE;
        }
        h1 {
            text-align: center;
            color:pink;
            }
            img {
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
            p {
                text-align: center;
                font-size:20px;
                color: rgb(200,0,0);
            }
    </style>
</head>
<body>
    <h1>38女神節快樂！</h1>
    <img src="https://atts.w3cschool.cn/attachments/image/20230308/1678258787377870.gif" alt="女神節" width="300" height="300">
    <p>你是最美最棒的女程序員！</p>
    <p>愿你每天都開心?幸福！</p>
</body>
</html>

使用方法：

1. 首先在桌面上新建一個文本文檔
2. 修改文件名為女神節快樂
3. 雙擊打開文檔，將上面代碼完整復制粘貼進文檔里
4. Ctrl+S保存文檔，然后關閉文檔
5. 修改后綴為.html
6. 用瀏覽器打開
7. 大功告成

說明

• <img src="可以替換為你女神的照片" alt="女神節" width="300" height="300">

• <p>可以替換為你想對女神說的祝福</p>
• 以上用到的都是簡單的HTML+CSS的基礎知識，哪怕你只是編程小白，也只要在編程獅上花2個小時就能學會。

最后

不得不說的是現在“三八婦女節”普遍被稱為“女神節”、“女王節”是因為很多女性反感自己被叫作婦女，畢竟還年輕著。顯然，這是很多人對“婦女”的誤解。我們來看看這兩個字的意思：

婦者，指已婚女子；

女者，未婚女子也。

因此“婦女”一詞，內涵廣泛，泛指女性，絕無貶低人的意思。這個節日得來不易，讓婦女節保持初心，是對婦女最好的問候與致敬。

最后W3Cschool小師妹要說的是，再花哨的表白方式都不如長久的陪伴。三八女神節，不妨考慮早一點下班，畢竟錢是賺不夠，工作是干不完的。一輩子時間就那么長，不妨多留些時間給自己和自己的親人吧。