使用ASP.NET从零开始制作设计网站
使用ASP.NET从零开始制作设计网站之一
小问号：蒋老师，告诉你一个好消息，我应聘成功了！谢谢您！回头再打给您，我要告诉爸妈一声。
蒋老师：恭喜你！嘟……
小问号：多亏您给我这次实践的机会，我把这次应聘过程给您汇报一下。
面试官：简历写的都差不多，那你有经验吗？做过什么？
我：中原市国土资源管理局的网站是我做的，网址：http://www.xxxx.gov.cn请您过目。
面试官：上线了，凭什么说这个是你做的呢？
我：您看,Design by 小问号!（呵呵！幸亏留了一个心眼，加了注释）。
面试官：像那么回事，还不够好！
我忙说：是不是没有用DIV+CSS布局，也没有静态化，也没有用三层架构！
面试官：好，有自知之明，孺子可教，正是用人之际，给你一个机会，好好努力噢！如果没有问题，下周一去人事部报到吧！
我：谢谢，我一定加倍努力，报效公司！
蒋老师：真替你高兴，这次应聘成功一半在运气，你这是刚刚踏入软件开发的门槛！以后的路还很长……
小问号：有空我去看您，和我一样菜鸟太多了，蒋老师，你也帮帮他们吧！
我们把时光推移到一个月之前，那时小问号垂头丧气地找到我说：帮帮我吧，到处没有人要我，别人对我的毕业设计看都不看，就扔一句：不要没经验的！我真的很笨吗？
我打量了已没有大学生朝气的小问号一下，问道：你会什么呢？
小问号：蒋老师，DreamWeaver、HTML、Javascript、SQL Server2005和C#都懂一些，想做点东西，又感觉无从下手，照着课本做的总感觉不是那么一回事？你能告诉我怎么开始吗？
蒋老师：当然可以，我所提倡的正是学以致用，我们就以一个网站开始吧！
小问号：从什么时候开始呢？
蒋老师：现在！
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
我把小问号的学习过程，搬到网上，就成了我们今天的教程，希望对你有所帮助。我们的目标是做一个这样的网站：中原市国土资源管理局,参考网址：http://www.genwoxue.com/zhongyuan（由于版权关系我虚拟为中原市），包括前台、后台以及申请域名、购买空间的全过程。
如果你已经是久经沙场的程序员高手，可能对于一个网站不屑一顾，那是因为你已经是过来人了，但是谁没有“过去时”呢？想想你是不是也曾经为第一个作品而兴奋不已呢？
我们这个案例的面向对象是有一定编程基础但从来没有从真正意义上做过一个东东的朋友而开始的（你最好和小问号的基础差不多）。
我们从申请域名开始，如果哪一块你熟悉，可以跳过！是不是吓住你了，哇，这么复杂啊，别担心，一步一步来，你一定可以学会的。
1. 申请域名
2. 购买空间
3. 备案
4. 使用photoshop完成设计与切图
5. 使用dreamweaver建立站点
6. 使用HTML完成滚动公告
7. 使用Javascript完成显示当前日期和过渡动画并填充首页面内容
8. 使用SQL SERVER2005建立数据库和表
9. 使用VS2005完成站点建立
9.1 首页
（１）从index.html转为index.aspx
（２）使用DataList变成文章列表
（３）网上调查
9.2 二级页面
（1）使用Reapeater完成详细内容页面
（2）二级页面文章列表
（3）整站搜索
10. 总结
（1）总结
如果你是从（１）开始坚持到（10），一个网站已经完成了，发现并不难！这个网站比较简单，我们发现已经用到了很多学科的内容，这也是为什么我们在编程任务列了那么多学科，很多初学者不理解，我要学编程语言，不要学其它！你如果是一个大学老师，讲一门课，你可以不管其它；但是你如果想当一名软件工程师，则必须懂得更多！
正像我前面说的那样，小问号应聘成功有一半是运气。如果应聘都是老手，小问号则可能失败无疑了。也正像小问号说的“是不是没有用DIV+CSS布局，也没有静态化，也没有用三层架构！”，这是小问号的第一个版本V1.0，我们还需要V2.0、V3.0……
使用ASP.NET从零开始制作设计网站之二
第一个任务：申请域名
我和小问号从中原市国土资源管理局回公司的路上……
小问号：（迫不及待地问）域名我知道，到哪去申请啊，书上说的所有域名都是美国一个专门机构管理的，不会找他们吧。还有空间从哪购买？最后您还告诉他们需要到工信部备案，怎么备案呢？
蒋老师：别着急，等一会到了办公室我给一份资料你看看就明白了。不明白再问我，为了咱俩的安全，我要专心开车啦……
小问号：不好意思，我太心急了，刚才您说我是您公司的工程师，我都害臊呢！现在脸还热呢！
蒋老师：人总要慢慢长大，而且将来你一定会成为一名软件工程师，而且是一名出色的工程师！
小问号：在您的指导下，这个网站我能够全部搞定的话，为您老赴汤蹈火在所不辞！
蒋老师：嘴巴倒甜，可是说好了，我是他们的特邀顾问，你和我混吃混喝还可以，没有好处费噢，别说我剥削你就行了。
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
网站所必须具备的三要素：第一：域名（网址） 第二：网站空间（虚拟主机）第三：程序（网页）从这里可以看出域名的重要性.
形象打个比方：你准备开一个公司，首先要有一个名字，这就是域名，然后我们是不是要租间房子呢？这就是所说的网站空间。我们开公司租房子干什么呢？是为了我们用来办公，能够让员工、客户和办公家具与电脑、打印机有容身之地。员工、客户和办公家具就类似于我们网站的程序（内容）。
1、域名是什么？
标准概念：域名是Internet网络上的一个服务器或一个网络系统的名字，在全世界，没有重复的域名，域名具有唯一性。从技术上讲，域名只是一个Internet中用于解决地址对应问题的一种方法。可以说只是一个技术名词。
（１）也许上面的概念反而让你糊涂了，实际上你能看到这篇文章，你已经理解了域名了，因为你很可能是通过输入网址：http://www.csdn.net，然后看到这篇文章，对吗？csdn.net就是域名。当然网上也有不少人简单地说，域名就是网址，虽然不准确，但对于你理解域名还是很好的。还有我们所熟知的百度网址：http：//www.baidu.com 其实百度的域名就是：baidu.com。
（２）域名用于解决地址对应，这是怎么一回事呢？请你试着输入：http://211.100.26.77，哈哈，是否也到了CSDN网站。211.100.26.77是什么东西呢？IP地址，也就是说你输入网址和IP地址都一样能够访问“CSDN”网站，但是你一定更容易记住网址！
这就是域名存在的必要性，就是为了解决IP地址不好记而采取的技术手段，域名与IP地址对应的过程我们称之为解析。
（３）如何知道一个域名的IP地址呢？
点“开始—运行”，然后输入ping www.genwoxue.com，这是偶的小站。
然后会有提示：
Reply from后面的就是该域名对应的网址。
2、如何申请域名呢？
作为一级域名代理商，主要有万网（www.net.cn）、新网（www.xinnet.com）、新网互联（www.dns.com.cn），你可以通过他们申请域名，当然你可以找本地的二级域名代理商，但最好找一个可靠的公司，不是那种干两天就关门的。
（１）起一个好域名很重要，英文缩写或者中文拼音都不错，简短好记，但现在想申请个好域名越来越不容易了！如何查你想申请的域名能够申请不能呢？我们以万网为例：输入http://www.net.cn，然后在首页右部分，域名查询处输入你想申请的域名：譬如genwoxue
点击“查询按钮”，然后：
看来genwoxue这个域名还是很热的，除了.mobi你还可以注册，其它的都被注册过了。下一步就是你联系域名服务商购买域名了。这个过程我就不在此啰嗦了，服务商很热情噢！
3、如何解析域名？
解析域名就是为了让别人访问你的网站不用记IP地址而进行的操作。
（１）这个可以由域名提供商代劳为你服务，如果你的空间也是从这购买的，一切对你来说就很简单了，基本上什么都不用管，只是将来把程序传到空间就可以了。
（２）作为搞技术的，更愿意洞悉一切，而不愿由他人代劳，除非你已经非常明白了，已经成为苦力活的时候则另当别论，不是吗？请跟我来！
在万网，在你购买域名时一般都会注册成为会员，那么：
第一步：会员登录，在万网首页右上角，点击“请登录”。
然后，在弹出窗口输入：会员ID和密码、验证码登录会员中心。
第二步：在会员中心，点击左侧“域名管理—域名管理”。
第三步：在域名列表中，点击“管理”。
第四步：在域名信息中点击“域名解析”。
第五步：把你的域名解析到空间服务商为你提供的IP地址。（如何购买空间呢？）
到此，你已经完成了很重要的第一步。
第二个任务：购买网站空间
小问号一大早就赶到我的办公室。
小问号：第一个任务已经顺利完成，域名申请的就是www.xxxx.gov.cn，这个已经和中原国土资源管理局信息中心的李主任汇报了，万网还问我要不要在他们那里申请空间，我拿不准，如何选择空间呢？
蒋老师：买空间容易，大多数域名提供商他们都会提供空间，但如何选择空间，还是应该注意些，不能只贪图便宜，找那些干几天都可能关门的服务商不靠谱的。
小问号：快告诉我吧，我马上去办！
蒋老师：呵呵，不能任何事情都问我的，到百度或者Google查查，如果没有答案再问我，好吗？FTP用过吗？
小问号：没有用过，只看过书，很想试试的。
蒋老师：我给你一个试用帐号。
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
这下面的内容由我和小问号整理出来，供大家参考：
1、空间是什么？
一般俗称的“网站空间”就是专业名词“虚拟主机”的意思。就是把一台运行在互联网上的服务器划分成多个“虚拟”的服务器，每一个虚拟主机都具有独立的域名和完整的Internet服务器（支持WWW、FTP、E-mail等）功能。
简单地讲，就是存放网站内容的空间。
2、如何选择空间？
在选择网站空间和网站空间服务商时，主要应考虑的因素包括：网站空间的大小、操作系统、对一些特殊功能如数据库的支持，网站空间的稳定性和速度，网站空间服务商的专业水平等。推荐中国万网（http://www.net.cn）、中国新网（http://www.xinnet.cn）等服务商，下面是一些通常需要考虑的内容：
（1）网站空间服务商的专业水平和服务质量。这是选择网站空间的第一要素。如果你的网站是用来玩玩可能无关紧要，如果是作为你的事业来做的话，一旦出现问题则损失大矣。
（2）虚拟主机的网络空间大小（网站空间主要是由你网页制作大小而决定您要购买空间的多与少）、操作系统、对一些特殊功能如数据库等是否支持。
（3）网站空间的稳定性和速度等。这些因素都影响网站的正常运作，需要有一定的了解，如果可能，在正式购买之前，先了解一下同一台服务器上其他网站的运行情况。
（4）网站空间的价格。现在提供网站空间服务的服务商很多，质量和服务也千差万别，价格同样有很大差异，一般来说，著名的大型服务商的虚拟主机产品价格要贵一些，而一些小型公司可能价格比较便宜，可根据网站的重要程度来决定选择哪种层次的虚拟主机提供商。选有《中华人民共和国增值电信业务经营许可证》的服务商更放心。
（5）网站空间出现问题后主机托管服务商的相应速度和处理速度，如果这个网站空间商有全国的800免费电话，空间质量就增加几分信任。
3、如何购买空间？
一个电话搞定！空间服务商关心是你的钱到帐，他会马上为你开通！
在哪里最终成交那是你的问题，这个过程相对简单，无论你通过银行转帐还是支付宝、财付通等手段，只要服务商收到钱，最终空间服务商会给你一个FTP上传的IP地址、用户名和密码。
数据库如果采用Access，那么不用考虑其它。如果是使用了SQL SERVER则需要另外付费。同时空间服务商也会给你另外一套管理数据库的IP地址、用户名和密码。
4、如何上传？
如何上传呢？下载一个FTP工具，比如著名的Cuteftp也是不错的。
如果你还没有空间，又想学学如何使用cuteFTP工具，请按照以下操作，把你的网页(起名为index.htm)上传到服务器吧，很快你的作品就会传遍整个世界。
注意：使用cuteFTP按下图一和图二设置。
（图一）
（图二）：把PVSV模式（V)前面复选框中的（√）去掉。
如果你没有cuteFTP，请下载：
cuteftp.exe
服务器地址：www.genwoxue.com
用户名：genwoxue
密码：123456
在Cuteftp远程端（右部分）首先建立文件夹yourname0371（用你的名字全拼+地区区号），然后把你的网页传至自己文件夹内，然后你用http://www.genwoxue.com/mytask/yourname0371（注意是你自己的文件夹），看到了什么？
你可以试着访问一下我的：http://www.genwoxue.com/mytask/jianghuiquan0371
如果你是花了银子，则可以直接用www.yourdomanname.com访问了。
如果你想试验，欢迎，拜托，请不要传大文件或者病毒上来噢！
就这么简单！
你迫不及待地传上去了，怎么打不开网站呢？别着急，赶快去工信部备案吧，不备案国内没有哪个服务商敢为你开通网站的，那样意味着他不想在国内混了。
怎么备案呢？
第三个任务：如何备案
一个小时后，小问号又来到我的办公室。
小问号：空间已经帮助中原国土资源管理局买过了，万网问备案是他们代备还是我们自主备案？我想学学，我到百度上查了一下，怕搞错，又来麻烦您了！
蒋老师：好吧，备案是应该注意些，你打电话让中原国土资源管理局准备好以下资料，然后我们一块开始。
小问号：OK！
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
1、为什么要备案？
网站备案的目的就是为了防止在网上从事非法的网站经营活动，打击不良互联网信息的传播，如果网站不备案的话，很有可能被查处以后关停。非经营性网站自主备案是不收任何手续费。
根据中华人民共和国信息产业部第十二次部务会议审议通过的《非经营性互联网信息服务备案管理办法》精神，在中华人民共和国境内提供非经营性互联网信息服务，应当办理备案！未经备案，不得在中华人民共和国境内从事非经营性互联网信息服务。而对于没有备案的网站将予以罚款或关闭。
2、备案方式？
网站备案主要有两种：
第一种方式：自主备案。你自己可以自主通过工信部官方备案网站（http://www.miibeian.gov.cn）在线备案；
第二种方式：通过你的空间服务商。（有些服务商可能会收费）
当然你如果打算选择第二种，不用往下看了，你想学学那请看完下面的备案步骤。
3、备案详细步骤
（１）准备相关信息
企业（行政事业单位）需要准备以下内容：
企业信息
企业名称：
单位性质：
单位有效证件类型：
单位有效证件号码：
单位通信地址：
投资者或上上级主管单位名称：
主办单位所在省、市、县：
主体负责人基本情况
姓名：
有效证件类型：
有效证件号码：
办公电话：
手机号码：
电子邮箱：
网站信息
网站名称：
网站首页网址：
网站域名：
网站IP地址：
网站接入服务提供商名称：
（２）进入工信部官方备案网站
工信部备案官方网址：http://www.miibeian.gov.cn
（３）注册用户
点右下角“注册”，“使用声明”和“备案流程图”页面点接受即可，然后出现：用户注册页面，注意填写完用户名，检查一下是否重名，如果重名，再使用别的。
注册完毕后，会出现一个提示窗口。
（４）登录
报备类别：我们一般选择“网站主办者”。
然后输入你刚才注册的用户和密码、验证码即可。
（５）详细填写信息
第一步：选择菜单“信息录入”，填入主办单位信息。
第二步：点击“下一步”，录入“网站信息”，内容如下：
第三步：点击“添加接入”，录入“接入信息”，内容如下：接入服务提供者名称你要咨询购买空间的公司。
第四步：点击“完成”，出现下面提示窗口。
注：个人备案与企业相似，在主办单位名称填入个人姓名就可以了，主办单位类型选择“个人”，上级主管单位也填个人姓名。
对于不少企业或者个人，到此为止，只是等待工信部官方审批开通网站就Ok了。第一步是本省通信局审核，如果没有问题然后由工信部备案部门审批，一般会在15个自然天通过，官方说的可以是20个工作日，也就一个月。
第三天，小问号又准时地来到我的办公室。
小问号：蒋老师，要是上学时就是这样，我一定不是现在这个样子，自己动手做一下，真是不一样！解决了以前很多迷惑，以前总感觉隔靴瘙痒！一切准备就绪，请进一步指示！
蒋老师：你打算怎么做呢？
小问号：昨天晚上回去我研究了一下他们的资料，感觉我还是有信心做出来的，我准备今天开始设计数据库，明天开始写代码……
蒋老师：等等，你上学的时候是不是也这么努力啊，昨天晚上还加班了，精神可嘉！你是不是打算一个月后如果客户看不上你做的，重头再来！你会photoshop或者fireworks吗？
小问号：在蒋老师的教导下，只许成功，不许失败！我会photoshop，但这与photoshop有什么关系？
蒋老师：你去找美工部刘燕经理，她会告诉你如何做的，一定要自己动手啊！
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
严格来讲这个任务主要是网站美工的任务，你可以选择跳过，当然也可以了解一下并不多。
1、使用photoshop完成设计
一个网站能否被客户看中，往往第一感觉并不是功能，而是界面！
很多朋友往往误解为使用Dreamweaver开始设计网页，而第一步实际上是用photoshop或者Fireworks来完成的。这可是下面是小问号在刘燕部门的指导下，用了三天的功夫才搞定的主界面！如果你也打算试试，请继续。
2、使用photoshop进行切图
小问号在刘燕的亲自指导下，经过三、四个小时的努力，终于完成了！小问号在给“中原市国土资源管理局”演示的时候还受到了表扬，小问号自语道：我也不笨啊，关键在于引导和用心啊！
首页切图源文件下载 切割好的图片
第一步：启动Photoshop并打开首页效果图。
第二步：使用“切刀”工具根据需求开始切割首页效果图。
先打开Photoshop的工具箱，然后我们选择“切刀”工具
然后我们先分析一下页面布局再开始切割图片，在此我们要先清楚切割图片的几项重要原则：
1、切得细致：我们切割图片时要尽量切得细致一些，不要为了自己省事就粗略的切割几下了事，我们要时刻清楚一件事情，就是我们把图片切得越精细，网页运行时加载的速度越快越不失真，如果切得块太大或者切得时候多一像素少一像素的，那么网页显示的时候速度会慢很多而且非常毛糙，造成网页和设计图差别很大，失去设计图原有的美观。相信大部分浏览者都是喜欢看网页打开速度快、设计精美的网站，所以如果你不想被浏览者骂和图片设计者指责，那么请你用心去切，越精细越好。
2、切得合理：这一点我们主要是为程序编写者考虑。图片切得越合理编写程序越省事，反之可能会给程序编写者或图片设计者增加很多工作量。以下我们以小问号的两位同学的做法进行举例比较，现在让他们二人开始“PK”：
举例比较1：
同学A的切法
同学B的切法
我们分析一下这两位同学的切割方法，同学A是把整个网站菜单的背景图只切割了一刀，同学B切割了三刀。同学A的做法是把整个菜单部分的背景图切割成一张图片放在网页中，编程者在上面设置菜单时全部按照背景图片中菜单的个数和菜单的间距来设置。同学B的做法是把菜单的背景图分成三部分，切刀03作为整个菜单的背景色，切刀04作为鼠标经过的背景图片，切刀05作为鼠标离开时的背景图片。这样编程者放置菜单时可以根据菜单的个数和显示要求自由放置。
优缺点：网站开发前客户要求网站上面有8个菜单，而制作的过程中客户突然提出要求增加两个菜单或减少两个菜单，那么根据同学A的做法，我们只能重新设计网页效果图并更改网站程序了，因为同学A把整个菜单背景图做成了一张，想改都改不了。而根据同学B的做法我们只需要单独增加两个或删除两个菜单的背景小图就行了。因为同学B是单独切割的，菜单的多少不受背景图片的约束，所以“来去自由”喽。
本次PK,同学B胜。
举例比较2：
同学A的切法
同学B的切法
我们分析一下这两位同学的切割方法，同学A是把新闻版块的背景图只切割了一刀，同学B切割了三刀。同学A的做法是把整个新闻版块的背景图切割成一张图片放在网页中，编程者在上面设置文章列表时全部按照背景图片的高度来设置文章显示的条数和行间距。同学B的做法是把新闻版块的背景图分成三部分，切刀03作为新闻版块标题的背景，切刀04作为新闻版块的中间背景可以自动无限延伸或缩小，切刀05作为新闻版块尾部结束的背景图片。这样在上面设置文章列表时可以根据需求自由设置文章显示的条数和间距。
优缺点：网站开发前客户要求网站首页中的新闻版块每块显示6条新闻，行间距为20px，而网站快要制作好了客户突然提出要求每块显示8条新闻，间距还要20px，那么根据同学A的做法，我们只能重新设计网页效果图并更改网站程序了，因为同学A把整个新闻版块背景图做成了一张，而当初设计者是根据显示6条文章的高度来设计的，现在显示8条的话要超出边界了，要想更改只能重新设计图片并让编程者重新更改程序了。而根据同学B的做法我们只需要让编程者设置一下显示8条就行了。因为同学B把背景图的中间部分单独切割出来可以根据内容显示的高度自动调整高度，文章显示条数的多少不受背景图片的限制，所以“来去自由”喽。
本次PK,同学B胜。
3、重复利用
在网站首页中有很多地方是完全相同或者十分相似的，比如我们要做的这个网站首页中部的文章版块就是完全相同的，那么我们在切割图片时相同的地方只切割一次就行了，与其他的板块公用。这样会减少编程者很多工作量。
举例比较1：
同学A的切法
同学B的切法
我们分析一下这两位同学的切割方法，同学A在相同的新闻版块中选择了一处进行切割，同学B把所有的新闻版块都进行了切割。同学A的切法考虑到了重复利用，编程者只需要制作一块新闻版块，其他相同的地方复制一份就可以了，调用的图片都一样。同学B的做法是把所有的新闻版块都进行切割，编程者需要多次重复制做相同的新闻版块，每一块都用自己区域的图片。
优缺点：
最初设计时版块的大小样式颜色都是现在这样的，制作完后客户突然嫌不好看，需要改变版块的大小和背景颜色。按照同学A的做法，编程者只需要重新切割一个地方的图片，其他相同版块的背景图片会全部更换（因为它们调用的是同一张图片）。而按照同学B的做法，编程者需要把所有的新闻版块重新切割。
本次PK,同学A胜。
清楚了切割原则后，我们现在就知道该怎样切了。好，现在开始切割……
第三步： 完成切割并导出网页所需图片
现在我们已经切割好了首页，估计现在很多同学已经把我们的首页效果图切割的“面目全非”了，没关系，因为这次我们是学习，希望大家以后在工作中要多珍惜网站美工的心血成果。下面是我们一位专业美工的切割方法，供大家参考学习：
首页切割好后，我们接下来的工作就是导出我们做网页时需要的图片，好，请开始跟我做。
首先点击Photoshop菜单栏中的“文件”---->再点击“存储为Web所用格式(w)”，如图：
此时会出现导出界面：
现在我们使用“切片选择工具”
来选择我们要导出的切片，选中的切片边框会变成黄色，如果需要多选，那么只需要按下“Shift”键再选择即可。使用“缩放工具”
可以放大/缩小切片，使用“抓手工具”
可以拖动切片。
选择好所需的切片后，点击窗口右上方的“存储”
按钮，此时会出现存储页面，
我们首先选择切片所存储的路径，然后选择保存类型为“仅限图像”如图，
接下来在“切片”选项中选择“选中的切片”如图：
(如果此处选择“选中的切片”那么只导出我们选中的切片，如果选择“所有用户切片”那么会把我们之前手工画的所有切片全部导出,这一点大家根据情况自己选择)，最后点击“保存”按钮即可导出选择的切片。需要说明的是在切片的存储位置PhotoShop会自动创建一个名字为"images"的文件，我们刚才导出的图片就存在这个文件夹中，如果存储位置中已经有名为“images”的文件夹，那么图片会自动存在已有的“images”文件夹中。
到此我们的Photoshop切图工作全部完成了，给自己庆贺一下吧。
使用ASP.NET从零开始制作设计网站之六
第四天，早上刚一上班小问号就兴致勃勃地来到我的办公室。
小问号：蒋老师，真没想到photoshop工具还能做网页呢？以前我怎么也没有想到photoshop能和做网站联系在一起，看来这里面的学问大着呢，我要学的东西还很多！
蒋老师：恩，悟性不错，既然知道了自己要学的东西还很多，那就再接再厉！
小问号：Yes. sir！
蒋老师：会用dreamweaver建立站点和制作静态网页吗？
小问号：这个没问题，还参加过学校组织的校园比赛呢！
蒋老师：那好，继续吧，有不明白的到美工部问问。
小问号：OK！
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
1、使用dreamweaver建立站点
（1）、在你电脑的工作区中建立一个文件夹，命名为GovWeb,这个文件夹就是用来存放我们要做的“中原市国土资源局网站”内容的，名字你也可以随意起，但是一定要用英文或拼音，表达意思要明确。文件夹建立好后把之前你用Photoshop导出的图片文件夹images拷贝进去，好，到此我们已经创建好了网站存放的位置。
（1）、启动dreamweaver，如图：
然后依次点击菜单栏中的“站点”-->“新建站点”，如图： ,
这时会打开站点创建窗口，如图：
我们在“站点名称”框中输入站点的名字，这里我们叫做“中原市国土资源局门户网站” ，然后在“本地根文件夹”中选择刚才创建好的“GovWeb”文件夹，在“默认图像文件夹”中选择 “GovWeb”文件夹中的“images”文件夹，如图：
最后点击“确定”按钮就创建好了站点，站点创建好后dreamweaver右侧的文件窗口的界面为：
（由于版本的不同及个人设置不同，文件窗口有可能出现在左侧）
2、使用dreamweaver制作静态首页面
在dreamweaver右侧的“文件栏”中右键“站点”，在弹出的菜单中选择“新建文件”，如图1，然后将这个文件命名为“index.html”，如图2，这个页面文件就是我们网站的主页了。
现在我们就开始制作主页了，首先在“标题”栏中输入“中原市国土资源局门户网站”，这就是我们网站首页的标题，然后在dreamweaver下方的属性栏中点击“页面属性”按钮，弹出页面属性对话框，我们设置页面文字的大小为12px，页面左边距、右边距、上边距下、边距均为0，如图3：
这时按下Ctrl+S保存一下吧，以后做东西的时候大家要养成及时保存的好习惯，以免突然断电或机器死机等带给我们的不便。到此空的首页已经创建好了。
3、布局首页面
现在要开始插入表格来布局首页面了，依次点击菜单栏中的“插入”-->“表格”，这时会弹出“表格对话框”，我们依次设置表格属性:行数:1 ,列数:3 ,表格宽度:1003 ,边框粗细:0 ,单元格边距:0 ,单元格间距:0 ,如图4：
设置好参数后，点击“确定”按钮,表格就插入到了页面中，然后我们选中这个表格，设置表格对齐方式为“居中对齐”如图：，设置第一列的宽度为11px，第二列的水平对齐为“居中对齐”，垂直对齐为“顶端”，第三列的宽度为12px，这时主表格大致设计好了。
现在我们开始往表格里插入图片和背景图像了，需要说明的是，这里面我们用的图片是上一章节中提供下载的“切割好的图片”，你可以直接下载并使用，也可以使用你自己动手切割的图片，但是每个图片的名字请与我们保持一致。
好，现在开始做。
设置第一列的背景图像为“images/index_blank_01.gif”，第三列背景图像为“images/index_blank_03.gif”，将表格的总高度设置为500px(这个高度你可以随意定义，只是为了我们能看清楚效果，将来表格会根据里面的内容自动增高)，好了，到这里我们的页面已经有点小效果了，如图5：
老规矩，先保存...
怎么样？是不是有点感觉了？那就继续吧。
好,现在做中间的部分，我们先分析一下首页的布局，大致可分为头部、中间主体、尾部三个部分，如图6：
好，根据页面的布局，我们现在插入一个三行一列的表格用来存放头部、中部和尾部内容。表格设置为3行1列，宽度为980px，边框、边距、间距均为0，将这三行的水平对齐都设成“居中对齐”，垂直对齐都设成“顶端”。
（1）、制作第一行内容（头部）：
现在分析一下第一行要放的内容，如图7：
好，根据分析我们需要在第一行中再插入一个4行1列的表格，用于放头部内容。
插入一个4行1列表格，宽度为980px，边框、边距、间距均为0，将这四行的水平对齐都设成“居中对齐”，垂直对齐都设成“顶端”。
·在第一行的高度设为120px，插入一张图片“images/index_top.gif”。
·将第二行的高度设为32px，背景设为“images/index_title_bg.gif”，这一行是用作放网站菜单的，我们现在就制作菜单，在第二行中插入一个1行10列的表格，表格宽度为750px,每一列的宽度全部设成75px，水平对齐设为“居中对齐”,第一列的背景图片设为“images/index_title_btn2.gif”，其他9列的背景图片设为“images/index_title_btn1.gif”，然后在这10个格子中分别输入“首页、机构概况、通知通告、工作动态、政务公开、政策法规、办事大厅、交易大厅、**举报、网上办公”，接下来选中这10个格子，在属性栏中设置字体大小为14px，颜色为#FFFFFF。
·将第三行的高度设为25px，背景图片设置为“images/index_blank_10.gif”。
·将第四行的高度设为100px，插入一张图片“images/index_blank_12.gif”。
OK，到此网站头部已制作完毕了如图8，小庆祝一下吧，但是别忘了保存呦。。。
2、制作第三行内容（底部）：
现在我们开始制作首页的底部，你也许会问，首页中间还空着呢怎么先做底部了？告诉你，没关系的，先做好头部和底部，整个页面的框架就成型了，再填充中间部分就得心应手了。
将第三行的高度设置为74px，背景图片设置为“images/index_bottom.gif”，这时底部的样子已经出来了，我们只需要在里面输入一些版权信息的文字就完成底部的创建了。
我们依次输入:“
中原市国土资源局版权所有 技术支持：跟我学编程
-->Shift+回车键（或直接在代码中输入<br>）
-->Copyright2008-2010 中原市国土资源局 zhongyuanshi.gov.cn All Rights Reserved
-->Shift+回车键（或直接在代码中输入<br>）
-->master@zhongyuanshi.gov.cn 豫ICP20100101号 地址：中原市东方红路108号 邮编：456250
”，将这部分文字选中设置颜色为#FFFFFF,大小为12px,行间距设置为20px。好，到此我们的首页底部就做好了，底部效果如图11，怎么样？依然很简单吧?再次给自己庆贺一下吧！（提示：你别忘记按下Ctrl+S）
（3）、制作第二行内容（中部）：
现在我们开始制作首页的中部，这里是这次课的重点，但是大家不要怕，难度并不大，相信你自己的能力，一定要动手做出来哦！
老方法，先分析中部内容的布局，请看图12。
很清晰就可以看出，中部内容大致分为左右两部分，所以我们需要建立一个一行两列的表格，来放置中部内容。
在第二行中插入一个1行2列的表格，宽度为980px，边框、边距、间距均为0，将这两列的垂直对齐都设成“顶端”，将第一列的宽度设置为750px，水平对齐设置为“左对齐”，将第二列的水平对齐方式设置为“右对齐”。
A、制作第一列内容：
我们现在分析一下第一列内容的布局，如图13：
那么我们现在该怎么做呢？
恭喜你说对了，我们现在插入一个5行1列的表格，宽度为747px，边框、边距、间距均为0，将这五行的水平对齐都设成“居中对齐”，垂直对齐都设成“顶端”。
<1>第一行内容： 第一行中包括轮换图片新闻和工作动态两部分内容，所以我们再插入一个一行两列的表格，宽度为747px，边框、边距、间距均为0，将这五行的水平对齐都设成“居中对齐”，垂直对齐都设成“顶端”。
·将第一列的宽度设为343px，高度设为311px，插入图片“images/index_blank_13.gif” 。
·在第二列中插入一个3行一列的表格，宽度为404px，高度为311px，边框、边距、间距均为0，将这三行的水平对齐都设成“居中对齐”，垂直对齐都设成“顶端”。将第一行的高度设为37px，设置背景图像为“images/index_blank_14.gif”，将第二行的高度设为263px，背景图像设为“images/index_blank_19.gif”，将第三行的高度设为11px，并插入图片“images/index_blank_25.gif”。
好了，到此第一行的内容做好了，大家运行一下看看效果，是不是像那么回事了？如图14：
<1>第二行内容： 第二行中包括滚动图片，将高度设为88px，插入图片“images/index_blank_26.gif”。
<3>第三行内容： 第三行用于放置三块黄色背景的专题版块。插入一个一行三列的表格，宽度为747px，边框、边距、间距均为0，将三列的宽度全部设为249px，垂直对齐设为“顶端”，将第一列的水平对齐设为“左对齐”，第二列的水平对齐设为“居中对齐”，第三列的水平对齐设为“右对齐”。
·第一列：第一列中再插入一个3行1列的表格，宽度设为240px,高度设为184px，边框、边距、间距均为0，将这3行的水平对齐都设成“居中对齐”，垂直对齐都设成“顶端”。 将第一行的高度设为32px，背景图片设为“images/index_blank_32.gif”，将第二行高度设为150px，背景设为“images/index_blank_34.gif”，将第三行中插入图片“images/index_blank_38.gif”，高度设为2px。好了，到此第一列的板块就做好了。
·第二列：将刚刚在第一列中做那个三行一列的表格复制进来。
·第二列：将刚刚在第一列中做那个三行一列的表格复制进来。
好了，到此第三行的内容做好了，大家运行一下看看效果，是不是更像那么回事了？如图15：
<4>第四行内容：第四行中放置了一条红色的分割线，很好实现。只需要将第四行高度设置为10px，然后切换到代码视图，在第四行<td></td>中间写入“<hr color="#FF0000" width="100%" size="1" />”这一句代码即可。
<5>第五行内容：第五行中放置了六块文章版块，很显然需要插入一个三行两列的表格，每一行放两个版块。现在插入一个3行2列的表格，宽度设为747，边框、边距、间距均为0，将这六块的垂直对齐方式设为“顶端”，高度全部设为204px。将左边三块的水平对齐方式设为“左对齐”，宽度设为273px。将右边三块水平对齐方式设为“右对齐”，宽度设为274px。在第一块中插入一个3行1列的表格，宽度设为369px，高度设为204px，边框、边距、间距均为0。将这3行的水平对齐都设成“居中对齐”，垂直对齐都设成“顶端”。 将第一行的高度设为39px，背景图片设为“images/index_blank_40.gif”，将第二行高度设为162px，背景设为“images/index_blank_43.gif”，将第三行中插入图片“images/index_blank_45.gif”，高度设为3px。好了，到此第一个板块就做好了。接下来将做好的这个版块分别粘贴到其他五块中就OK了。
好了，到此我们左边部分的内容就全部做完了，效果如图16：
我要看效果 我要下载
怎么样？是不是特有成就感呢？那我们就接着完成右半部分的内容吧
（2）、制作第二列内容：
还是老规矩，先分析下第二列内容的布局，如图17：
根据分析现在我们在第二列中插入一个8行1列的表格，表格宽度设为230px,边框、边距、间距均为0,将这8格的水平对齐方式均设为“居中对齐”，将第1、3、4、5、6、7、8格的垂直对齐方式设为“顶端”，将第2格的垂直对齐设为“底部”，下面详细介绍这8个格的设置：
<1>第一格内容：在第一格中插入一个3行1列的表格，将表格宽度设为230px，高度设为203px，将这三行的水平对齐设为“居中对齐”，垂直对齐设为“顶端”。设置第一行的高度为37px，背景图像为“images/index_blank_16.gif”，设置第二行的高度为163px，背景图像设置为“images/index_blank_18.gif”，将第三行的高度设置为3px，插入图片“images/index_blank_22.gif”。
<2>第二格内容：设置第二格的高度为125px，并插入图片“images/index_blank_24.gif”。
<3>第三格内容：在第三格中插入一个3行1列的表格，将表格宽度设为230px，高度设为150px，将这三行的水平对齐设为“居中对齐”，垂直对齐设为“顶端”。设置第一行的高度为28px，背景图像为“images/index_blank_28.gif”，设置第二行的高度为118px，背景图像设置为“images/index_blank_30.gif”，将第三行的高度设置为4px，插入图片“images/index_blank_36.gif”，第三格中的内容到以后做程序时再设置。
<4>第四格内容：将第四格的高度为40px，背景颜色设为#f5fff4。
<5>第五格内容：完全复制第二格内容。
<6>第六格内容：完全复制第二格内容。
<7>第七格内容：完全复制第二格内容。，第七格中的内容到以后做程序时再设置。
<8>第八格内容：完全复制第二格内容。
好了，到此整个首页我们已经制作完了，开始庆贺吧，但是请不要使劲摔鼠标哦。（注：目前主页中间部分的左右两边高度可能不太一样，这没关系，以后做程序的时候根据情况来调整每个版块显示的条数就可以使左右对齐了）
