使用asp.net从零开始制作设计网站---转载
2013-12-13 11:51
417 查看
首先感谢提供此教程的朋友，可以给大家学习的机会，很有用，留着好好学。如下正文：
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），一个网站已经完成了，发现并不难！
第一个任务：申请域名
网站所必须具备的三要素：第一：域名（网址） 第二：网站空间（虚拟主机）第三：程序（网页）从这里可以看出域名的重要性.
形象打个比方：你准备开一个公司，首先要有一个名字，这就是域名，然后我们是不是要租间房子呢？这就是所说的网站空间。我们开公司租房子干什么呢？是为了我们用来办公，能够让员工、客户和办公家具与电脑、打印机有容身之地。员工、客户和办公家具就类似于我们网站的程序（内容）。
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地址。
到此，你已经完成了很重要的第一步。
第二个任务：购买网站空间
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访问了。
如果你想试验，欢迎，拜托，请不要传大文件或者病毒上来噢！
就这么简单！
你迫不及待地传上去了，怎么打不开网站呢？别着急，赶快去工信部备案吧，不备案国内没有哪个服务商敢为你开通网站的，那样意味着他不想在国内混了。
怎么备案呢？
第三个任务：如何备案
1、为什么要备案？
网站备案的目的就是为了防止在网上从事非法的网站经营活动，打击不良互联网信息的传播，如果网站不备案的话，很有可能被查处以后关停。非经营性网站自主备案是不收任何手续费。
根据中华人民共和国信息产业部第十二次部务会议审议通过的《非经营性互联网信息服务备案管理办法》精神，在中华人民共和国境内提供非经营性互联网信息服务，应当办理备案！未经备案，不得在中华人民共和国境内从事非经营性互联网信息服务。而对于没有备案的网站将予以罚款或关闭。
2、备案方式？
网站备案主要有两种：
第一种方式：自主备案。你自己可以自主通过工信部官方备案网站（http://www.miibeian.gov.cn）在线备案；
第二种方式：通过你的空间服务商。（有些服务商可能会收费）
当然你如果打算选择第二种，不用往下看了，你想学学那请看完下面的备案步骤。
3、备案详细步骤
（１）准备相关信息
企业（行政事业单位）需要准备以下内容：
企业信息
企业名称：
单位性质：
单位有效证件类型：
单位有效证件号码：
单位通信地址：
投资者或上上级主管单位名称：
主办单位所在省、市、县：
主体负责人基本情况
姓名：
有效证件类型：
有效证件号码：
办公电话：
手机号码：
电子邮箱：
网站信息
网站名称：
网站首页网址：
网站域名：
网站IP地址：
网站接入服务提供商名称：
（２）进入工信部官方备案网站
工信部备案官方网址：http://www.miibeian.gov.cn
（３）注册用户
点右下角“注册”，“使用声明”和“备案流程图”页面点接受即可，然后出现：用户注册页面，注意填写完用户名，检查一下是否重名，如果重名，再使用别的。
注册完毕后，会出现一个提示窗口。
（４）登录
报备类别：我们一般选择“网站主办者”。
然后输入你刚才注册的用户和密码、验证码即可。
（５）详细填写信息
第一步：选择菜单“信息录入”，填入主办单位信息。
第二步：点击“下一步”，录入“网站信息”，内容如下：
第三步：点击“添加接入”，录入“接入信息”，内容如下：接入服务提供者名称你要咨询购买空间的公司。
第四步：点击“完成”，出现下面提示窗口。
注：个人备案与企业相似，在主办单位名称填入个人姓名就可以了，主办单位类型选择“个人”，上级主管单位也填个人姓名。
对于不少企业或者个人，到此为止，只是等待工信部官方审批开通网站就Ok了。第一步是本省通信局审核，如果没有问题然后由工信部备案部门审批，一般会在15个自然天通过，官方说的可以是20个工作日，也就一个月。
第四个任务：使用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切图工作全部完成了，给自己庆贺一下吧。
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>第八格内容：完全复制第二格内容。
好了，到此整个首页我们已经制作完了，开始庆贺吧，但是请不要使劲摔鼠标哦。（注：目前主页中间部分的左右两边高度可能不太一样，这没关系，以后做程序的时候根据情况来调整每个版块显示的条数就可以使左右对齐了）
第六部分：使用HTML完成公告
本节学习如何使用HTML完成滚动的公告，昨天大家学得是不是很有趣呢？那么今天学得东西会让你更加激动，因为今天学的东西“会动”。
好，下面就介绍如何使用HTML语言让文字动起来。
（1）、先用Dreamweaver打开昨天做好的index.html页面，切换的“设计”窗口，在右上角放置公告的地方插入一个4行1列的表格，将表格宽度设为230px，将这四行的高度全部设置为30px，水平对齐设为“居中对齐”。在第一行中输入“国务院公布2009年全年放假通知”，第二行中输入“通知通告”，第三行中输入“任免通知”，第四行中输入“土地使用权挂牌出让公告”，输入完后将这四行文字大小设置为12px。如图1：
(2)、选中刚才插入的表格进入到“代码”视图，在表格代码（<table..）的前端输入“<marquee scrollamount="2" direction="up">”代码，在表格(</table>)的后端输入“</marquee>”,如图2：
（注：其中scrollamount为单位时间内移动2像素，up为向上滚动）
OK,滚动通告就这样就做好了，你运行一下试试吧。
我要看效果 我要下载
怎么样？今天讲的东西是不是“既经济又实惠”？用的时间最短写的代码最少，但是得到的效果确是最好！
第七个任务：使用Javascript完成当前日期和广告滚动窗口并填充首页面内容
1、使用Javascript完成当前日期显示
从现在开始，我们就开始做“动态”的东西了！先做一个动态的日期显示。
用Dreamweaver打开index.html页面，找到放置日期的这一行，设置这一行水平对齐为“左对齐”，垂直对齐为“居中”，然后切换到代码视图，在这一行的<td></td>中间插入下面的代码：
<div id="Layer1">
<script type="text/javascript">setInterval("Layer1.innerHTML='[ '+new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay())+' ]'",500)
</script>
</div>
如下图：
好的，完成了！
对，就这么简单！
我要看效果 我要下载
2、使用Javascript完成自动切换图片
如果上一个功能你形容为惊人的话，那么这个功能你可以形容为神奇！这项功能只有大型门户网站中才会拥有，而你现在就要学到。
在开始做之前我们有一项准备工作，这项功能需要用到图片和一个“高手”写好的js文件，需要把这两项拷贝到你网站中的images文件夹中，先点击这里下载：下载图片和js文件。下载后先解压，将里面的三张图片和lunhuan.js文件拷贝到网站的images文件夹中。
好，下面开始制作这项惊人的功能，我们先找到存放轮换动画的区域，将“index_blank_13.gif”这张图片删除掉，然后切换到代码视图，在<td></td>中间输入如下代码：
<form id="frmIndex">
<DIV id=flashmov align=center>
<SCRIPT>
var imgWidth=332; //图片宽度
var imgHeight=280; //图片高度
var textFromHeight=22; var textStyle="texttitle";var textLinkStyle="texttitle";
var buttonLineOn="#f60"; var buttonLineOff="#000";var textbgcolor="#f5f5f5";
var TimeOut=3000;
var imgUrl=new Array(); var imgLink=new Array();var imgtext=new Array();var imgAlt=new Array();
var adNum=0;
document.write('<style type="text/css">');
document.write('#focuseFrom{width:'+(imgWidth+2)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}');
document.write('#txtFrom{height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden; background-color:' + textbgcolor + ';}');
document.write('#imgTitle{width:'+imgWidth+';top:-'+(textFromHeight+14)+'px;height:18px}');
document.write('</style>');
document.write('<div id="focuseFrom">');
imgUrl[1]='images/1.JPG';
imgtext[1]='中原市严把第二次土地调查外业质量关';
imgLink[1]='#';//本张图片的链接
imgtext[1]='中原市严把第二次土地调查外业质量关';
imgUrl[2]='images/2.jpg';
imgtext[2]='二次调查闹正月';
imgLink[2]='#';
imgtext[2]='二次调查闹正月';
imgUrl[3]='images/3.jpg';
imgtext[3]='中原市召开全市耕地占补平衡工作现场会';
imgLink[3]='#';
imgtext[3]='中原市召开全市耕地占补平衡工作现场会';
</SCRIPT>
<script src="images/lunxian.js" ></script>
</DIV>
</form>
如下图：
接下来保存一下，现在你运行一下页面试试看吧！
哈哈，是不是感觉特别惊人？对，就这么简单就做好了！
提示：如果你需要更换显示的图片、文本、链接只需要在“imgUrl[1]='images/1.JPG'; imgtext[1]='中原市严把第二次土地调查外业质量关'; imgLink[1]='#';”处更换就行了。
好了，到此轮换动画就做好了，是不是非常有成就感呢？
我要看效果 我要下载
3、填充主页面所有内容
OK，到现在我们的主页面所有的准备工作都已完成了，接下来我们将首页面中的内容手工加入，最终形成一个带“真实”内容的静态首页，以便我们稍后根据页面内容的布局来加入程序。这一步在这里就不详细介绍了，由大家参照我们的例子自己完成。在填充内容时有几项需要交代的，如下：
这三张图片是做首页内容时用到的箭头和细线，下载后先解压，然后将里面的三张图片拷贝到网站根目录的images文件夹中即可。
[b] 2、首页中间“中原美景”不间断滚动图片的制作：将images/index_blank_26.gif图片删除掉，切换到代码视图插入如下代码即可：
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 745px">
<TABLE cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top>
<img src="images/index_blank_26.gif" /></TD>
<TD id=demo2 vAlign=top></TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo2.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>
3、“网址导航”、“网站调查”这两部分先用dreamweaver做成静态的就行了，可以直接拷贝例子，方便稍后填充代码。
到此首页面内容已经填充完毕了，大家可以完全按照例子来做也可以根据实际情况自由设置内容的文字大小、样式、行高等。[/b]
[b]第八个任务：使用SQL Server2005创建数据库[/b]
1、做这个网站你应该具备的SQL Server2005基础
SQL语句：CREATE DATABASE、CREATE TABLE、CREATE VIEW、INSERT、UPDATE、SELECT、DELETE语句。
当然SQL Server2005不仅仅如此，更高级的知识请到我们的VIP会员专区提升，但这已经具备了做这个网站的基础。
2、使用SQL Server2005
使用SQLSERVER2005对象资源管理器完成建库建表没有任何问题，但作为程序员，强烈建议你最好使用查询编辑器（SQLSERVER2000叫查询分析器）来完成这些操作，好处绝不是向别人卖弄代码，而是团队合作时沟通或者形成文档以及移置到譬如Oracle都是前者不可比拟的！
库名、表名、列名的命名要规范，建议你最好使用匈牙利命名法，你再也不用考虑哪些变量是关键字或者是不合法的。如果你不了解匈牙利命名法，请参考：什么是匈牙利命名法？有什么好处？
请看一个表名Yybrdab（拼音首字母），你再看一个表名Yiyuanbinrendanganbiao（拼音全拼），再看表名PatientFiles（英文缩写），你有什么看法呢？Yybrdab很难猜，Yiyuanbinrendanganbiao全拼太长了，英文命名PatientFiles是不是更容易理解一些?
小问号的库、表结构如下：
CREATE DATABASE Zhongyuan-------------------数据库名为"zhongyuan"
USE Zhongyuan
GO
CREATE TABLE UserInfo-----------------------管理员/用户信息表
CREATE TABLE BigKind------------------------大类别表
CREATE TABLE SmallKind----------------------小类别表
CREATE TABLE News---------------------------新闻/文章表
CREATE TABLE Vote---------------------------调查/投票信息表
CREATE TABLE MotionPhoto--------------------滚动图片表
CREATE TABLE AppealInfo---------------------**举报信息表
下面为具体的表结构，供大家参考：
1、UserInfo表结构(管理员/用户信息表)
nID----------------------------自动编号，主键
cUserName----------------------用户名
cUserPassword------------------用户密码
cPersonName--------------------人员姓名
cStation-----------------------角色/位置
如果你到现在还不会建库建表那么请观看视频 ，这里教大家怎样创建数据库和建立第一个UserName表，其他的表大家参考视频中的方法自己建立。
2、BigKind表结构(大类别表)
nID----------------------------自动编号，主键
cKindName----------------------大类名称
3、SmallKind表结构(小类别表)
nID----------------------------自动编号，主键
cKindName----------------------小类名称
nBigID-------------------------所属大类编号
4、News表结构(新闻/文章表)
nID----------------------------自动编号，主键
nKindID------------------------所属类别编号
cTitle-------------------------新闻标题
cImage-------------------------新闻图片（用于首页轮换动画中）
cFrom--------------------------来源
cAuthor------------------------作者
cContent-----------------------详细内容
dInTime------------------------发布时间
5、Vote表结构(调查/投票信息表)
nID----------------------------自动编号，主键
cTitle-------------------------投票标题
cOption1-----------------------选项1
cOption2-----------------------选项2
cOption3-----------------------选项3
cOption4-----------------------选项4
nValue1------------------------选项1票数
nValue2------------------------选项2票数
nValue3------------------------选项3票数
nValue4------------------------选项4票数
6、MotionPhoto表结构(滚动图片表)
nID----------------------------自动编号，主键
cPhoto-------------------------图片路径
cTitle-------------------------文章标题
cContent-----------------------详细内容
dInTime------------------------发布时间
7、AppealInfo表结构(**举报信息表)
nID----------------------------自动编号，主键
cPersonType--------------------发送人类型
cPersonName--------------------发送人姓名
cPersonPhone-------------------发送人电话
cPersonAddress-----------------发送人地址
cAppealType--------------------投诉类型
cAddressee---------------------收信人
cTitle-------------------------信件标题
cContent-----------------------信件内容
cSecrecyYN---------------------是否保密
dSendTime----------------------发送时间
好了，到此这个网站中需要用到的数据库和表已经建立完毕了，大家可以按照上面的例子建表，如果你认为自己建立的表结构或字段名称更合理的话也可以根据自己的想法建立。
第九个任务：使用VS2005完成本网站站点的建立
1、VS2005是一个C#集成的开发环境，Dreamweaver做界面似乎有独到之处？
小问号很快遭遇了第一个伏击战，看看自己用Photoshop设计出来还算满意的界面，用Dreamweaver设计出来还算漂亮的首面，但二者如何结合起来了？犯了愁。
本节课讲的内容很简单，主要是讲解如何使用VS2005建立站点，之前我们所做的都是一些准备工作，到现在我们才算真正接触VS2005工具，以后我们就主要利用VS2005工具来开发网站。如果在这之前的准备工作你没有做好，那么请不要着急做下面的内容，请一定要先完成之前所有的准备工作。
下面为VS2005建立站点的视频录像供大家参考。
观看视频
第十个任务：从index.html转为index.aspx
之前我们已用Dreamweaver工具做好了静态的首页面Index.html，这节课教大家怎样将index.html转变为ASP.NET页面:index.aspx。
1、添加一个新ASP.NET页面
在“解决方案资源管理器”中鼠标右键站点名称，在弹出的菜单中选择“添加新项”，在弹出的窗口中选择“模板类型”为“Web窗体”，名称改为“index.aspx”,语言选择为“C#”（以后我们创建的所有ASP.NET页面不做特殊说明的全部为C#语言），如下图：
好了，到此空的index.aspx页面已经建立好了，下面我们将之前做好的index.htm页面中的内容复制到index.aspx中。
2、将index.html页面中的内容复制到index.aspx中
（1）、打开index.aspx页面，进入到代码（源）视图，将<title></title>中的“无标题页”改为“中原市国土资源局门户网站”。
（2）、打开index.html页面，进入到代码（源）视图，将<head></head>中从<style...>到</style>的所有代码拷贝到index.aspx的<head></head>中（<title></title>下面）。
（3）、将index.html页面中的所有<form..>和</form>标记都去掉（防止与Index.aspx页面中的form标记冲突），把index.aspx页面中的<form id="form1" runat="server">改为<form id="frmIndex" runat="server">
（4）、将index.html页面中"网址导航"栏目中的下拉框全部删除掉，因为现在这些下拉框是html控件不被我们的VS2005工具所识别，再有就是这里的下拉框只是作为页面布局使用，完全可以删除，最后我们要做成服务器端下拉框控件。
（5）、将index.html页面中<body>至</body>中的所有内容拷贝到index.aspx页面中<body></body>中的<div></div>内。
具体拷贝位置如下图所示：
备注：如果出现index.aspx在VS2005中无法切换到“设计”视图，请将“网址导航”栏目中的下拉框全部删除，或者检查页面中是否有标签冲突或编写错误。
以上的操作都做完后，全部保存一下，然后可以将index.html删除掉了。到此index.aspx页面基本框架已经构建好了。
如果你想观看视频教程请点击这里观看视频
第十一个任务：后台新闻信息及新闻类别的添加与管理一
到目前为止,我们网站的静态首页面已经做好了,下面我们就要开始制作网站的后台及数据库部分
,然后我们将首页面中需要更新内容的地方做成动态的(可读取数据库信息)就可以了。
这节课我们提到了动态 网站这个名词，现在我相信还有相当一部分同学对动态 网页、动态 网站还不是十分理解，或则说理解的不够准确，在此我给大家简单介绍一下动态 网站的含义，大家能够理解即可．所谓动态
网页并不是网页中有个动画有个滚动新闻看起来网页里面"会动"就是动态 网页了，这种理解方式大错特错．
动态 网站里面最大一个特点就是＂交互＂，所谓的动态 网页是指浏览者与我们网站之间能够形成一个交互关系，浏览者通过发出指令（用鼠标点击网页中链接或按钮，按下键盘的某一个键等等）能够使网页执行某项操作，比如留言板中我们输入完留言内容后点击＂保存＂按钮即可完成留言，想查询我们的手机余额和话费清单时，我们只需要输入你的手机号点击＂查询＂按钮即可调出我们的手机信息等等．像我们平时看到的留言板、博客、论坛、各种查询系统及管理系统等都是属于动态
网站范畴.
本节教程内容比较多，主要分为以下几项：
1、动态类别的制作
（1）、制作大类的添加页面
（2）、制作小类的添加页面
2、新闻/文章板块的后台添加与前台显示
（1）、制作新闻/文章的添加页面
（2）、制作新闻/文章前台首页中的显示
这节课所需时间较长，希望大家能够耐心仔细的去做。到此，我们才算是真正开始制作动态 网页（网页前台和服务器端数据库进行交互），做完这节课我们可以理解“动态 网站”的真正含义，我们能够知道如何在一个网页中“弄”个文本框输入些文字点击按钮即可存到数据库中，我们能够学会网站后台中类别的制作方法、我们能够掌握新闻信息的添加和前台页面的读取，我们还能够…………
下面进入正题：
1、制作大类的添加页面
我们网站中的信息分为好多类别,所以我们在后台发布信息的时候就要先选择"所属类别"再发布信息,而我们要做的网站属于中大型门户网站,其中的类别会经常增减或修改名称,那么网站中的类别就需要管理员可以在后台中轻松管理,所以在制作后台发布信息功能之前要先做好类别的管理功能.
类别的具体制作方法请观看视频.
视频1视频2
视频3视频4
视频5
2、制作小类的添加页面
我们网站中的“办事大厅”、“交易大厅”、“专项工作”等大类中又分有许多小类别，那么现在就开始讲解如何制作小类别的添加页面。
视频1视频2
视频3
3、制作新闻/文章的添加页面
到此，我们的大类和小类的添加页面都做好了，现在就开始制作大家期待多时的文章添加页面。
视频1视频2视频3视频4视频5
4、制作首页中的新闻板块
现在我们开始制作网站首页中的新闻板块，有的同学可能看到首页中有很多板块认为非常的麻烦，其实不必担心，首页中的新闻板块都很类似有的几乎相同，我们只需要做出一块来其他的复制一份改个参数就可以了。
视频1视频2视频3视频4视频5视频6
[b]第十二个任务：网上调查的制作
[/b]网站首页中的新闻板块已经全部做完了，现在我们开始制作“网上调查”栏目。制作“网上调查”共分三个步骤，第一是制作调查的添加/管理页面，第二是在首页中制作投票板块，第三是制作投票结果查看页面，现在开始制作吧。
1、制作调查的添加页面
现在开始制作调查的添加页面。我们要想做网上调查，那么就需要先制作一个调查的添加页面，由管理员通过添加页面添加一个调查项目，浏览着就可以开始投票了，目前我们的数据库中已建立好了调查表（Vote），具体制作步骤请点击下面链接观看视频教程。
投票添加
2、在首页中制作投票板块
目前我们已制作好了投票的添加页面,并成功的添加了一个投票项目,现在我们开始在首页中制作投票板块,具体制作步骤请点击下面链接观看视频教程。
投票应用
3、制作投票信息查看页面
我们现在已经制作好了投票的添加和应用部分，还差最后一部就是投票信息的查看页面。具体制作步骤请点击下面链接观看视频教程。
投票查看1
投票查看2
[b]第十三个任务：使用Reaperter完成详细内容页面的制作
[/b]目前我们网站首页中的新闻板块都做好了，需要再做一个页面用于显示详细的新闻内容。在制作之前需要我们准备好一个空的二级页面，以便我们可以直接在上面做程序，这里我做好了一个模板供大家直接下载使用。下面就开始讲解具体制作过程。
制作新闻的详细页面
目前我们网站首页中的新闻板块都做好了，需要再做一个页面用于显示详细的新闻内容。在制作之前需要我们准备好一个空的二级页面，以便我们可以直接在上面做程序，这里我做好了一个模板供你直接下载使用。具体制作步骤请点击下面链接观看视频教程。
新闻详细页面1
新闻详细页面2
本文章转载于http://www.th7.cn/Program/net/2012/03/18/64654.shtml
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），一个网站已经完成了，发现并不难！
第一个任务：申请域名
网站所必须具备的三要素：第一：域名（网址） 第二：网站空间（虚拟主机）第三：程序（网页）从这里可以看出域名的重要性.
形象打个比方：你准备开一个公司，首先要有一个名字，这就是域名，然后我们是不是要租间房子呢？这就是所说的网站空间。我们开公司租房子干什么呢？是为了我们用来办公，能够让员工、客户和办公家具与电脑、打印机有容身之地。员工、客户和办公家具就类似于我们网站的程序（内容）。
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地址。
到此，你已经完成了很重要的第一步。
第二个任务：购买网站空间
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访问了。
如果你想试验，欢迎，拜托，请不要传大文件或者病毒上来噢！
就这么简单！
你迫不及待地传上去了，怎么打不开网站呢？别着急，赶快去工信部备案吧，不备案国内没有哪个服务商敢为你开通网站的，那样意味着他不想在国内混了。
怎么备案呢？
第三个任务：如何备案
1、为什么要备案？
网站备案的目的就是为了防止在网上从事非法的网站经营活动，打击不良互联网信息的传播，如果网站不备案的话，很有可能被查处以后关停。非经营性网站自主备案是不收任何手续费。
根据中华人民共和国信息产业部第十二次部务会议审议通过的《非经营性互联网信息服务备案管理办法》精神，在中华人民共和国境内提供非经营性互联网信息服务，应当办理备案！未经备案，不得在中华人民共和国境内从事非经营性互联网信息服务。而对于没有备案的网站将予以罚款或关闭。
2、备案方式？
网站备案主要有两种：
第一种方式：自主备案。你自己可以自主通过工信部官方备案网站（http://www.miibeian.gov.cn）在线备案；
第二种方式：通过你的空间服务商。（有些服务商可能会收费）
当然你如果打算选择第二种，不用往下看了，你想学学那请看完下面的备案步骤。
3、备案详细步骤
（１）准备相关信息
企业（行政事业单位）需要准备以下内容：
企业信息
企业名称：
单位性质：
单位有效证件类型：
单位有效证件号码：
单位通信地址：
投资者或上上级主管单位名称：
主办单位所在省、市、县：
主体负责人基本情况
姓名：
有效证件类型：
有效证件号码：
办公电话：
手机号码：
电子邮箱：
网站信息
网站名称：
网站首页网址：
网站域名：
网站IP地址：
网站接入服务提供商名称：
（２）进入工信部官方备案网站
工信部备案官方网址：http://www.miibeian.gov.cn
（３）注册用户
点右下角“注册”，“使用声明”和“备案流程图”页面点接受即可，然后出现：用户注册页面，注意填写完用户名，检查一下是否重名，如果重名，再使用别的。
注册完毕后，会出现一个提示窗口。
（４）登录
报备类别：我们一般选择“网站主办者”。
然后输入你刚才注册的用户和密码、验证码即可。
（５）详细填写信息
第一步：选择菜单“信息录入”，填入主办单位信息。
第二步：点击“下一步”，录入“网站信息”，内容如下：
第三步：点击“添加接入”，录入“接入信息”，内容如下：接入服务提供者名称你要咨询购买空间的公司。
第四步：点击“完成”，出现下面提示窗口。
注：个人备案与企业相似，在主办单位名称填入个人姓名就可以了，主办单位类型选择“个人”，上级主管单位也填个人姓名。
对于不少企业或者个人，到此为止，只是等待工信部官方审批开通网站就Ok了。第一步是本省通信局审核，如果没有问题然后由工信部备案部门审批，一般会在15个自然天通过，官方说的可以是20个工作日，也就一个月。
第四个任务：使用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切图工作全部完成了，给自己庆贺一下吧。
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>第八格内容：完全复制第二格内容。
好了，到此整个首页我们已经制作完了，开始庆贺吧，但是请不要使劲摔鼠标哦。（注：目前主页中间部分的左右两边高度可能不太一样，这没关系，以后做程序的时候根据情况来调整每个版块显示的条数就可以使左右对齐了）
第六部分：使用HTML完成公告
本节学习如何使用HTML完成滚动的公告，昨天大家学得是不是很有趣呢？那么今天学得东西会让你更加激动，因为今天学的东西“会动”。
好，下面就介绍如何使用HTML语言让文字动起来。
（1）、先用Dreamweaver打开昨天做好的index.html页面，切换的“设计”窗口，在右上角放置公告的地方插入一个4行1列的表格，将表格宽度设为230px，将这四行的高度全部设置为30px，水平对齐设为“居中对齐”。在第一行中输入“国务院公布2009年全年放假通知”，第二行中输入“通知通告”，第三行中输入“任免通知”，第四行中输入“土地使用权挂牌出让公告”，输入完后将这四行文字大小设置为12px。如图1：
(2)、选中刚才插入的表格进入到“代码”视图，在表格代码（<table..）的前端输入“<marquee scrollamount="2" direction="up">”代码，在表格(</table>)的后端输入“</marquee>”,如图2：
（注：其中scrollamount为单位时间内移动2像素，up为向上滚动）
OK,滚动通告就这样就做好了，你运行一下试试吧。
我要看效果 我要下载
怎么样？今天讲的东西是不是“既经济又实惠”？用的时间最短写的代码最少，但是得到的效果确是最好！
第七个任务：使用Javascript完成当前日期和广告滚动窗口并填充首页面内容
1、使用Javascript完成当前日期显示
从现在开始，我们就开始做“动态”的东西了！先做一个动态的日期显示。
用Dreamweaver打开index.html页面，找到放置日期的这一行，设置这一行水平对齐为“左对齐”，垂直对齐为“居中”，然后切换到代码视图，在这一行的<td></td>中间插入下面的代码：
<div id="Layer1">
<script type="text/javascript">setInterval("Layer1.innerHTML='[ '+new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay())+' ]'",500)
</script>
</div>
如下图：
好的，完成了！
对，就这么简单！
我要看效果 我要下载
2、使用Javascript完成自动切换图片
如果上一个功能你形容为惊人的话，那么这个功能你可以形容为神奇！这项功能只有大型门户网站中才会拥有，而你现在就要学到。
在开始做之前我们有一项准备工作，这项功能需要用到图片和一个“高手”写好的js文件，需要把这两项拷贝到你网站中的images文件夹中，先点击这里下载：下载图片和js文件。下载后先解压，将里面的三张图片和lunhuan.js文件拷贝到网站的images文件夹中。
好，下面开始制作这项惊人的功能，我们先找到存放轮换动画的区域，将“index_blank_13.gif”这张图片删除掉，然后切换到代码视图，在<td></td>中间输入如下代码：
<form id="frmIndex">
<DIV id=flashmov align=center>
<SCRIPT>
var imgWidth=332; //图片宽度
var imgHeight=280; //图片高度
var textFromHeight=22; var textStyle="texttitle";var textLinkStyle="texttitle";
var buttonLineOn="#f60"; var buttonLineOff="#000";var textbgcolor="#f5f5f5";
var TimeOut=3000;
var imgUrl=new Array(); var imgLink=new Array();var imgtext=new Array();var imgAlt=new Array();
var adNum=0;
document.write('<style type="text/css">');
document.write('#focuseFrom{width:'+(imgWidth+2)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}');
document.write('#txtFrom{height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden; background-color:' + textbgcolor + ';}');
document.write('#imgTitle{width:'+imgWidth+';top:-'+(textFromHeight+14)+'px;height:18px}');
document.write('</style>');
document.write('<div id="focuseFrom">');
imgUrl[1]='images/1.JPG';
imgtext[1]='中原市严把第二次土地调查外业质量关';
imgLink[1]='#';//本张图片的链接
imgtext[1]='中原市严把第二次土地调查外业质量关';
imgUrl[2]='images/2.jpg';
imgtext[2]='二次调查闹正月';
imgLink[2]='#';
imgtext[2]='二次调查闹正月';
imgUrl[3]='images/3.jpg';
imgtext[3]='中原市召开全市耕地占补平衡工作现场会';
imgLink[3]='#';
imgtext[3]='中原市召开全市耕地占补平衡工作现场会';
</SCRIPT>
<script src="images/lunxian.js" ></script>
</DIV>
</form>
如下图：
接下来保存一下，现在你运行一下页面试试看吧！
哈哈，是不是感觉特别惊人？对，就这么简单就做好了！
提示：如果你需要更换显示的图片、文本、链接只需要在“imgUrl[1]='images/1.JPG'; imgtext[1]='中原市严把第二次土地调查外业质量关'; imgLink[1]='#';”处更换就行了。
好了，到此轮换动画就做好了，是不是非常有成就感呢？
我要看效果 我要下载
3、填充主页面所有内容
OK，到现在我们的主页面所有的准备工作都已完成了，接下来我们将首页面中的内容手工加入，最终形成一个带“真实”内容的静态首页，以便我们稍后根据页面内容的布局来加入程序。这一步在这里就不详细介绍了，由大家参照我们的例子自己完成。在填充内容时有几项需要交代的，如下：
| 1、下载3张必要图片（箭头和细线）： |  |  | 下载图片 |
[b] 2、首页中间“中原美景”不间断滚动图片的制作：将images/index_blank_26.gif图片删除掉，切换到代码视图插入如下代码即可：
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 745px">
<TABLE cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top>
<img src="images/index_blank_26.gif" /></TD>
<TD id=demo2 vAlign=top></TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo2.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>
3、“网址导航”、“网站调查”这两部分先用dreamweaver做成静态的就行了，可以直接拷贝例子，方便稍后填充代码。
到此首页面内容已经填充完毕了，大家可以完全按照例子来做也可以根据实际情况自由设置内容的文字大小、样式、行高等。[/b]
[b]第八个任务：使用SQL Server2005创建数据库[/b]
1、做这个网站你应该具备的SQL Server2005基础
SQL语句：CREATE DATABASE、CREATE TABLE、CREATE VIEW、INSERT、UPDATE、SELECT、DELETE语句。
当然SQL Server2005不仅仅如此，更高级的知识请到我们的VIP会员专区提升，但这已经具备了做这个网站的基础。
2、使用SQL Server2005
使用SQLSERVER2005对象资源管理器完成建库建表没有任何问题，但作为程序员，强烈建议你最好使用查询编辑器（SQLSERVER2000叫查询分析器）来完成这些操作，好处绝不是向别人卖弄代码，而是团队合作时沟通或者形成文档以及移置到譬如Oracle都是前者不可比拟的！
库名、表名、列名的命名要规范，建议你最好使用匈牙利命名法，你再也不用考虑哪些变量是关键字或者是不合法的。如果你不了解匈牙利命名法，请参考：什么是匈牙利命名法？有什么好处？
请看一个表名Yybrdab（拼音首字母），你再看一个表名Yiyuanbinrendanganbiao（拼音全拼），再看表名PatientFiles（英文缩写），你有什么看法呢？Yybrdab很难猜，Yiyuanbinrendanganbiao全拼太长了，英文命名PatientFiles是不是更容易理解一些?
小问号的库、表结构如下：
CREATE DATABASE Zhongyuan-------------------数据库名为"zhongyuan"
USE Zhongyuan
GO
CREATE TABLE UserInfo-----------------------管理员/用户信息表
CREATE TABLE BigKind------------------------大类别表
CREATE TABLE SmallKind----------------------小类别表
CREATE TABLE News---------------------------新闻/文章表
CREATE TABLE Vote---------------------------调查/投票信息表
CREATE TABLE MotionPhoto--------------------滚动图片表
CREATE TABLE AppealInfo---------------------**举报信息表
下面为具体的表结构，供大家参考：
1、UserInfo表结构(管理员/用户信息表)
nID----------------------------自动编号，主键
cUserName----------------------用户名
cUserPassword------------------用户密码
cPersonName--------------------人员姓名
cStation-----------------------角色/位置
如果你到现在还不会建库建表那么请观看视频 ，这里教大家怎样创建数据库和建立第一个UserName表，其他的表大家参考视频中的方法自己建立。
2、BigKind表结构(大类别表)
nID----------------------------自动编号，主键
cKindName----------------------大类名称
3、SmallKind表结构(小类别表)
nID----------------------------自动编号，主键
cKindName----------------------小类名称
nBigID-------------------------所属大类编号
4、News表结构(新闻/文章表)
nID----------------------------自动编号，主键
nKindID------------------------所属类别编号
cTitle-------------------------新闻标题
cImage-------------------------新闻图片（用于首页轮换动画中）
cFrom--------------------------来源
cAuthor------------------------作者
cContent-----------------------详细内容
dInTime------------------------发布时间
5、Vote表结构(调查/投票信息表)
nID----------------------------自动编号，主键
cTitle-------------------------投票标题
cOption1-----------------------选项1
cOption2-----------------------选项2
cOption3-----------------------选项3
cOption4-----------------------选项4
nValue1------------------------选项1票数
nValue2------------------------选项2票数
nValue3------------------------选项3票数
nValue4------------------------选项4票数
6、MotionPhoto表结构(滚动图片表)
nID----------------------------自动编号，主键
cPhoto-------------------------图片路径
cTitle-------------------------文章标题
cContent-----------------------详细内容
dInTime------------------------发布时间
7、AppealInfo表结构(**举报信息表)
nID----------------------------自动编号，主键
cPersonType--------------------发送人类型
cPersonName--------------------发送人姓名
cPersonPhone-------------------发送人电话
cPersonAddress-----------------发送人地址
cAppealType--------------------投诉类型
cAddressee---------------------收信人
cTitle-------------------------信件标题
cContent-----------------------信件内容
cSecrecyYN---------------------是否保密
dSendTime----------------------发送时间
好了，到此这个网站中需要用到的数据库和表已经建立完毕了，大家可以按照上面的例子建表，如果你认为自己建立的表结构或字段名称更合理的话也可以根据自己的想法建立。
第九个任务：使用VS2005完成本网站站点的建立
1、VS2005是一个C#集成的开发环境，Dreamweaver做界面似乎有独到之处？
小问号很快遭遇了第一个伏击战，看看自己用Photoshop设计出来还算满意的界面，用Dreamweaver设计出来还算漂亮的首面，但二者如何结合起来了？犯了愁。
本节课讲的内容很简单，主要是讲解如何使用VS2005建立站点，之前我们所做的都是一些准备工作，到现在我们才算真正接触VS2005工具，以后我们就主要利用VS2005工具来开发网站。如果在这之前的准备工作你没有做好，那么请不要着急做下面的内容，请一定要先完成之前所有的准备工作。
下面为VS2005建立站点的视频录像供大家参考。
观看视频
第十个任务：从index.html转为index.aspx
之前我们已用Dreamweaver工具做好了静态的首页面Index.html，这节课教大家怎样将index.html转变为ASP.NET页面:index.aspx。
1、添加一个新ASP.NET页面
在“解决方案资源管理器”中鼠标右键站点名称，在弹出的菜单中选择“添加新项”，在弹出的窗口中选择“模板类型”为“Web窗体”，名称改为“index.aspx”,语言选择为“C#”（以后我们创建的所有ASP.NET页面不做特殊说明的全部为C#语言），如下图：
好了，到此空的index.aspx页面已经建立好了，下面我们将之前做好的index.htm页面中的内容复制到index.aspx中。
2、将index.html页面中的内容复制到index.aspx中
（1）、打开index.aspx页面，进入到代码（源）视图，将<title></title>中的“无标题页”改为“中原市国土资源局门户网站”。
（2）、打开index.html页面，进入到代码（源）视图，将<head></head>中从<style...>到</style>的所有代码拷贝到index.aspx的<head></head>中（<title></title>下面）。
（3）、将index.html页面中的所有<form..>和</form>标记都去掉（防止与Index.aspx页面中的form标记冲突），把index.aspx页面中的<form id="form1" runat="server">改为<form id="frmIndex" runat="server">
（4）、将index.html页面中"网址导航"栏目中的下拉框全部删除掉，因为现在这些下拉框是html控件不被我们的VS2005工具所识别，再有就是这里的下拉框只是作为页面布局使用，完全可以删除，最后我们要做成服务器端下拉框控件。
（5）、将index.html页面中<body>至</body>中的所有内容拷贝到index.aspx页面中<body></body>中的<div></div>内。
具体拷贝位置如下图所示：
备注：如果出现index.aspx在VS2005中无法切换到“设计”视图，请将“网址导航”栏目中的下拉框全部删除，或者检查页面中是否有标签冲突或编写错误。
以上的操作都做完后，全部保存一下，然后可以将index.html删除掉了。到此index.aspx页面基本框架已经构建好了。
如果你想观看视频教程请点击这里观看视频
第十一个任务：后台新闻信息及新闻类别的添加与管理一
到目前为止,我们网站的静态首页面已经做好了,下面我们就要开始制作网站的后台及数据库部分
,然后我们将首页面中需要更新内容的地方做成动态的(可读取数据库信息)就可以了。
这节课我们提到了动态 网站这个名词，现在我相信还有相当一部分同学对动态 网页、动态 网站还不是十分理解，或则说理解的不够准确，在此我给大家简单介绍一下动态 网站的含义，大家能够理解即可．所谓动态
网页并不是网页中有个动画有个滚动新闻看起来网页里面"会动"就是动态 网页了，这种理解方式大错特错．
动态 网站里面最大一个特点就是＂交互＂，所谓的动态 网页是指浏览者与我们网站之间能够形成一个交互关系，浏览者通过发出指令（用鼠标点击网页中链接或按钮，按下键盘的某一个键等等）能够使网页执行某项操作，比如留言板中我们输入完留言内容后点击＂保存＂按钮即可完成留言，想查询我们的手机余额和话费清单时，我们只需要输入你的手机号点击＂查询＂按钮即可调出我们的手机信息等等．像我们平时看到的留言板、博客、论坛、各种查询系统及管理系统等都是属于动态
网站范畴.
本节教程内容比较多，主要分为以下几项：
1、动态类别的制作
（1）、制作大类的添加页面
（2）、制作小类的添加页面
2、新闻/文章板块的后台添加与前台显示
（1）、制作新闻/文章的添加页面
（2）、制作新闻/文章前台首页中的显示
这节课所需时间较长，希望大家能够耐心仔细的去做。到此，我们才算是真正开始制作动态 网页（网页前台和服务器端数据库进行交互），做完这节课我们可以理解“动态 网站”的真正含义，我们能够知道如何在一个网页中“弄”个文本框输入些文字点击按钮即可存到数据库中，我们能够学会网站后台中类别的制作方法、我们能够掌握新闻信息的添加和前台页面的读取，我们还能够…………
下面进入正题：
1、制作大类的添加页面
我们网站中的信息分为好多类别,所以我们在后台发布信息的时候就要先选择"所属类别"再发布信息,而我们要做的网站属于中大型门户网站,其中的类别会经常增减或修改名称,那么网站中的类别就需要管理员可以在后台中轻松管理,所以在制作后台发布信息功能之前要先做好类别的管理功能.
类别的具体制作方法请观看视频.
视频1视频2
视频3视频4
视频5
2、制作小类的添加页面
我们网站中的“办事大厅”、“交易大厅”、“专项工作”等大类中又分有许多小类别，那么现在就开始讲解如何制作小类别的添加页面。
视频1视频2
视频3
3、制作新闻/文章的添加页面
到此，我们的大类和小类的添加页面都做好了，现在就开始制作大家期待多时的文章添加页面。
视频1视频2视频3视频4视频5
4、制作首页中的新闻板块
现在我们开始制作网站首页中的新闻板块，有的同学可能看到首页中有很多板块认为非常的麻烦，其实不必担心，首页中的新闻板块都很类似有的几乎相同，我们只需要做出一块来其他的复制一份改个参数就可以了。
视频1视频2视频3视频4视频5视频6
[b]第十二个任务：网上调查的制作
[/b]网站首页中的新闻板块已经全部做完了，现在我们开始制作“网上调查”栏目。制作“网上调查”共分三个步骤，第一是制作调查的添加/管理页面，第二是在首页中制作投票板块，第三是制作投票结果查看页面，现在开始制作吧。
1、制作调查的添加页面
现在开始制作调查的添加页面。我们要想做网上调查，那么就需要先制作一个调查的添加页面，由管理员通过添加页面添加一个调查项目，浏览着就可以开始投票了，目前我们的数据库中已建立好了调查表（Vote），具体制作步骤请点击下面链接观看视频教程。
投票添加
2、在首页中制作投票板块
目前我们已制作好了投票的添加页面,并成功的添加了一个投票项目,现在我们开始在首页中制作投票板块,具体制作步骤请点击下面链接观看视频教程。
投票应用
3、制作投票信息查看页面
我们现在已经制作好了投票的添加和应用部分，还差最后一部就是投票信息的查看页面。具体制作步骤请点击下面链接观看视频教程。
投票查看1
投票查看2
[b]第十三个任务：使用Reaperter完成详细内容页面的制作
[/b]目前我们网站首页中的新闻板块都做好了，需要再做一个页面用于显示详细的新闻内容。在制作之前需要我们准备好一个空的二级页面，以便我们可以直接在上面做程序，这里我做好了一个模板供大家直接下载使用。下面就开始讲解具体制作过程。
制作新闻的详细页面
目前我们网站首页中的新闻板块都做好了，需要再做一个页面用于显示详细的新闻内容。在制作之前需要我们准备好一个空的二级页面，以便我们可以直接在上面做程序，这里我做好了一个模板供你直接下载使用。具体制作步骤请点击下面链接观看视频教程。
新闻详细页面1
新闻详细页面2
本文章转载于http://www.th7.cn/Program/net/2012/03/18/64654.shtml
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用ASP.NET从零开始制作设计网站之十一
- 使用ASP.NET从零开始制作设计网站之四
- 使用ASP.NET从零开始制作设计网站之三
- 使用ASP.NET从零开始制作设计网站之九
- 使用ASP.NET从零开始制作设计网站之十四
- 使用ASP.NET从零开始制作设计网站之十二
- 使用ASP.NET从零开始制作设计网站之十三
- 使用ASP.NET从零开始制作设计网站
- 使用ASP.NET从零开始制作设计网站之四
- 使用ASP.NET从零开始制作设计网站之四
- 使用ASP.NET从零开始制作设计网站之二
- 使用asp.net从零开始制作设计网站
- 使用ASP .NET 从零开始制作设计网站之十
- 使用ASP.NET从零开始制作设计网站之五
- 使用ASP.NET从零开始制作设计网站之六
- 使用ASP.NET从零开始制作设计网站之一
- 说一说我看了蒋老师的&quot;使用ASP.NET从零开始制作设计网站&quot;后的感悟
- 使用ASP.NET从零开始制作设计网站之七
- 使用ASP.NET从零开始制作设计网站之二
- 使用ASP.NET从零开始制作设计网站之八