《基于.NET的Web开发技术》是.NET环境下进行Web编程的一门重要课程。内容包括Web原理及环境部署、HTML基础、CSS应用、JavaScript基础、ASP.NET技术；重点介绍ASP.NET技术及相关的数据库应用开发，通过实例介绍各种技术的特点及应用。 通过本课程的学习，使学员了解Web应用开发技术的发展与现状，了解WEB原理、开发过程和环境部署；能够熟练掌握HTML语言，CSS，JavaScript，掌握利用ASP.NET进行Web应用开发的特点；掌握各种控件的用法和ADO.NET相关技术，掌握数据源控件和数据绑定控件的用法；具备运用面向对象的思想和ASP.NET相关知识对Web网站进行需求分析、进而进行设计和开发的能力。学员学完该课程后，应能利用ASP.NET开发简单的Web应用程序。
网站首页整体风格设计
Loading...
From the course by Xi'an Jiaotong University
基于.Net的Web开发技术
4 ratings
From the lesson
因特网及HTML基础
本单元主要介绍与Web开发有关的因特网的相关基础知识，如因特网工作的基本原理，URL、DNS、HTTP的概念，五层协议及IP地址等；在此基础上引入简单的HTML语法及标签使用。
Meet the Instructors
乔亚男讲师
计算机教学实验中心
谢涛讲师
吴 宁教授
西安交通大学电信学院计算机教学实验中心
[音乐] 大家好！
本讲中呢，我们要为大家介绍一个示例 一个网站首页整体的风格设计，我们先来看一下
基本要求，首先呢 我们用表格进行定位，因为我们没有学过其他的手段
所以只能先用表格进行定位操作，构建主页框架
整体上符合我们下面所示的结构 页面中应该包括图片、
音频 视频等要素，当然也有文本，因为文本是最普通的，所以我们没写
将页面命名为index.html 并且放入发布目录，进行发布测试
看上去要求并不是太难，但是呢这里面实际上要做的工作还比较多 我们所用到的工具，Frontpage，当然呢，诸位
也可以根据自己的喜好选择你们更得心应手的工具 Frontpage，dreamviewer都是不错的选择，还有Photoshop
Photoshop主要是用来处理一些图片，比如说我们网站的logo 或者其他地方需要的一些图片我们可以进行简单处理
这块儿呢我们所要求的只是一些简单的图片处理，在这块儿呢我们图片已经给大家准备
好了，所以是不需要再进行处理的，因为毕竟Photoshop不是我们要讲的主要内容
这是我们网站整体的一个风格，基本上呢成这样一个架构，最顶上呢是我们网站的logo
然后呢左侧是它的一般式左导航，底下呢 有个footer，是它的脚注，网页的这个底部的内容
最中间的区域呢是我们的内容区，我们没有做一个细分 诸位呢可以根据自己的喜好呢你自己做划分
好啦，这是我们整体结构，现在呢我们就要开始来设计了
我们首先打开Frontpage，这个文件呢我们一会儿给它命名一下
比如说我们现在就命名，我们把这个放在 还是我们E盘上
基于Web的程序设计，例1，我们给它起名，因为刚才要求命名是index
index，好，现在呢已经有一个文件名了，现在呢我们
就要利用表格进行页面架构的设计，首先呢我的设计习惯是在设计的时候我喜欢用拆分
拆分的意思呢，既能显示代码区又可以在具体的设计区查看
所以这样的话呢，整体上呢我比较方便，既能看设计又能看代码，这是我个人的
喜好，诸位呢也可以根据自己的特点去选择，好，我们先来创建一个表格
这个创建表格的时候呢实际上我们有两种方式，一种方式呢我们用它里面的菜单去创建绘制表格
还有一种方式呢，我们直接可以 用代码，因为我们已经学了相关的一些代码
好，为了提高速度，我们用菜单去创建
我们插入一个表格，插入表格的时候呢根据我们刚才的架构
我们应该创建的是一个，大家注意看，刚才有个logo 还有一个slider和内容区
最后底下是一个footer，这应该是总体上是三行 然后呢，几列呢，总体上来说它列是分为两列
一个是slider，一个content，所以呢我们先创建一个
三行两列这样的一个表格，并且呢这里面注意看
边框的粗细我们设置为0，因为我们说这个表格只是用来进行定位的
它并不实际上需要我们显示表格，所以我们把这个边框显示为0，然后这里面还有指定的宽度
这个宽度呢我们现在呢先不管，先按百分之百去处理，如果有需要修改的话我们再修改它
点确定，好，大家可以看到现在有一个虚线的表格已经出现了，为了符合我们的要求
我们要进行合并，合并哪块儿呢，logo部分，我们把这两个单元格
合并起来，然后还有footer部分，把它也合并起来，好了，现在这个结构呢就非常类似
于我们刚才看到的框架结构了，只不过现在呢中间这一行呢这是从中间区分的，我们先不管它- 了，好了
我们现在呢插入图片，先处理logo 部分，插入图片，我们同样可以采用两种方式，一种呢
是直接用代码插入，另一种呢我们可以借助于菜单 来插入，为了快一点儿我们就直接按菜单插入了
来自文件，这个图片呢我们已经准备好了，还是在我们刚才那个文件夹 下，然后呢例1底下，这块儿需要给大家说明一下
其实我们在处理的时候呢，最好呢给你所发布的 目录底下建立一个image文件夹
所以我们在这块儿呢新建一个文件夹，images，然后呢把我们这个logo
移进去，好，现在呢我们在这里面，image里面选择logo
插入，大家可以看到我们现在呢已经插入了一个图片，这是我自己设计的，不太好看
底下这一行呢，就是我们的footer区，我们把它的一个背景颜色呢也设置成跟前面- 差不多的
蓝色，单元格属性，我们设置它的背景颜色 基本上也是颜色差不多，就可以了，我们也不详细去设计了
好，当然你也可以加一个图片也可以，然后呢我们 加几个字，加什么字呢？我们把coursera的这个主页底下的这个几个字加上
比如说这个版权所有等等，这个设备就不用加了，因为这个我们这个也不是什么
没有什么设备的这个备案，我们来复制它的原文
我们把它复制到一个记事本上然后粘过来就可以了
我们把它粘到这块儿，粘到这个代码区，可以不带格式的
文本粘到代码区，好
这个删除掉，好啦，然后我们把字
变成白色，变成白色的字，这样的话就能看清楚了
然后让它居中，好啦，这个一个简单的这个 脚注也设计完了，现在呢我们就要设置
sider区和内容区，slider区我们也给它简单一点儿，我们来几个 超链就可以。
为此呢，我们在这个slider区呢我们先新建 新建一个表格，这就是我们所说的定位的功能
我们再插入一个表格，这个表格呢我们就直接使用
比如说五行吧，我们建四个栏目，我们用五行，然后呢一列
就可以了，刚才这个 它这个border，注意看，这个border变成0
这是有，这样的话我们的这个边框呢就不显示了
好，假如我们建几个栏目，比如说我们简单写几个啊
因为我们主要是为了演示，主页、 学院设置
师资队伍、 招生，好，然后这个太宽了，我们把这个往这里移一下
刚才我们给大家说了，我们说这个设置这个宽度我们先留的是100%
但是有些时候呢，如果宽度固定了反而好一些
好，我们先不管它了，这都是小问题，然后我们给它上面加一些超链接，这样的话呢我们就能- 链出去了
主页，比如说我们还是用index.html
htm，然后呢学院设置，我们比如说设置一个xy
.htm 师资队伍，当然我们这个超链接现在还，具体的页面还都没做
shizi.htm，我们只是为了这个现在呢
我们看上去这个有超链的这个感觉，所以呢我们把它都加上
zhaosheng.htm，好了 这个slider呢，也比较简单，所以我们最好给它加一点
背景，我们给它加一点背景颜色或者背景图片 我们加一些，还是以蓝色基调为主，因为我们现在这个网站整体风格是蓝色的
所以呢，我们尽量的还是以蓝色为主吧 我们给它加一个蓝色背景，然后我们把字体也是变成白色
这样的话呢整个统一一些，现在呢我们的slider区呢 简单地这个设置完毕了，下面要做的事情呢就是我们的内容区
内容区为了处理方便，我们是这样规划的 我们给内容区里面放一首古诗，然后放音频视频
总共呢三块内容，为了使这个布局呢 好一些，我们把这个古诗呢，我们放作一列
然后呢音频和视频呢放作一列，分作两行 所以呢整体上结构呢，比如说我们把古诗放在正中间
音频和视频我们放在旁边，这样的话呢就构成了这样一种结构，大家可以看一下 我们创建表格，两行两列。
现在呢，我们中间放古诗 所以呢，我们把左侧的这个列呢，我们做一个合并——合并单元格 最后放我们的古诗。
这两行呢 分别是放音频和视频，区分期间我们对
音频和视频呢，再做一个推广，这就是我们表格定位的作用
这个我们两行就可以了，一列，然后底下的这个是放视频的，我们也再
给它插入一个表格，同样两行一列 order 是 0。
好了，然后呢我们 把这个分别呢，给它加一个颜色。
这个我们为了区分，我们把这两个颜色稍微做一个区分
音频和视频颜色我们给它稍微分一下，比如这个我们，音乐，我们用 我们用黄色吧！这是音乐。
视频呢，我们再配它一个 大家也可以根据自己的喜好。
我们这个只是为了给大家说明相关的一些方法 一些淡绿色的吧，这样的话就能区分开来
然后呢，每一个表格里面我们上面给它写
一些简单的文字，比如说，这个我们写音乐欣赏，然后底下呢 视频欣赏。
这样的话呢，我们这个大体上的这个架构呢就都出来了
现在剩下一个，最中间呢我们放一段古诗，所以同样的给它插入一个表格 这个是一行一列就够了。
因为我们只放一个整篇的古诗。
现在呢我们放什么诗呢？《静夜思》吧。
在放古诗的时候呢 我们给它加一个 preview。
因为前面给大家说过 像古诗呀，还有什么的，要原文输出的话，我们给它带一个
preview 就会按原样格式去输出 所以呢，我们现在呢给它添加一个我们最常用的 《静夜思》。
我们把这个一定要放到 preview 里面。
好 如果有的同学有兴趣的话，你可以给它加个王维。
这个不加都可以了，不加都可以 好了。
现在呢，我们再剩下的内容就是要加这个音频和视频 音频和视频在加的时候呢，因为我们这个是
在 html5 下才有这个音频和视频在网页直接播放的功能
所以我们这一块呢加音频和视频的时候用代码 对应的这个区块呢是在这块，所以我们直接用代码加了
这个代码呢大家还有没有印象？我们学过时间不长 audio
然后呢是 src=""，好，然后这个
audio 呢我也准备好了 我们可以看一下这个目录。
这块有一个 mp3 这个需要给大家说明的一点是，大家可以看到我们这个 mp3p4，这个都有中文字
强烈给大家一个建议，不管你用的是何种平台，Windows 呀还是 Linux 下平台
都建议在我们文件中，所有的网页文件中，如果涉及到文件名的引用 我们都用英文，不要用中文。
所以我们把那个名字重新改一下 我们比如说是 test.mp3。
同样的道理，这个视频呢我们也用英文 test.
mp4。
好了，我们现在要插入的视频、 音频和我们这个主文件
都处在同一个路径下，所以呢我们这一块 用相对的引用就可以。
我们给大家说过了，实际上包括图片 包括其他的需要的一些资源文件，在我们网站中的
我们尽可能的用相对路径，而不要用绝对路径。
所以呢，这一块呢 我们在这直接 test.mp3。
同样的道理，我们这一块呢加一个视频 视频呢是
vedio src test .mp4。
好了，其他参数我们先不设置了 这样一来呢，实际上呢我们一个简单的网页 就设计完了。
我们现在要做的事情还要把它发布 怎么发布呢？这个和我们前面讲的 IIS 的环境配置 是有关系的。
我们先看一下我们当前的这个目录。
目前呢 我们这个网站呢，大家可以看到，它这个基本目录呢、 物理路径呢是
基于.NET 的 Web 开发技术，但是我们实际现在要运行 的目录实际上是在 例 1 下。
为了保证能够正常运行 那么我们有两种方式。
一种方式呢我们把物理路径直接设到例 1 下 另一种方式呢，我们把相关的那些文档呢拷出来，拷到 我们上一级目录。
当然为了方便，我们这一块就把它重新设置一下 选择例 1。
这样的话呢，我们的主目录现在变到例 1 了。
例 1 就是我们的发布目录，现在我们这个网站 也是启动着呢，好，我们要进行测试了。
我们说要进行发布测试就不能直接点开页面了，点开页面是在本地打开 所以呢，我们要打开浏览器，输入 127.
0.0.1。
这是它网站的地址，但是我们的 应该是 index.htm 这里面呢还需要注意。
如果说大家现在呢只想 打一个 IP 地址或者域名呢，就可以出现我们相关的网页 那么我们必须在 IIS 里面设置一个默认的文档。
我们打开现在这个 网站。
里面有一个默认文档。
大家看一下，如果这里面有 那么不用设置了。
如果没有的话，那你必须要把刚才我们设计的那个文件夹上
还有可能会出现一种啥情况呢？大家看它现在这个文件呢是处于第三位
那前面两位是怎么回事呢？实际上它是有一个顺序，它搜索的时候呢，先从最上面开始搜
如果搜到了就打开，搜不到的话，继续往下 往下搜。
所以呢我们现在目前的情况，因为我们 该目录底下没有这前两个文件，所以它直接可以搜到第三个 这样的话就不用管了。
但是如果说该目录下还有前面的 两个文件其中任何一个，那么你现在呢
就必须把这个位置上移。
好，那么现在这一块设置的没有问题 我们现在呢，直接再回车，好了
大家可以看到，现在呢我们的网页已经出来了 但是呢，现在呢有个啥问题呢？大家看到了
因为呢，我们现在这个图片是固定的 但是我们刚才那个宽度是
100%，所以现在出现这个上窄 下宽这样的问题。
还有一个问题大家发现没？ 这个里面现在音乐欣赏和视频欣赏都没有任何内容
这是为什么呢？实际上呢我们要解决这个问题，包括这个 stead
这里面现在呢空白了有好多，而且呢中间内容《静夜思》，虽然没有问题，但是总 感觉整个空间有点小。
那么这个怎么解决呢？好，我们一个一个来解决。
为了解决刚才这个 宽度问题。
我们刚才把这个最外框的表格，刚才我们刚才说了设置成 100% 现在呢，我们把它变一个常量。
因为我们这个图片的宽度是 1024，所以我们把这个 宽度，表格的宽度也设置成 1024。
我们来看一下，我们把最外框的这个表格 我们刚才这是 100%，我现在把它变成 1024 保存一下。
大家注意看看变化，我们看到了，现在确实呢宽度对齐了 然后呢，还有音频和视频没有显示。
为什么没有显示呢？ 我们在给大家介绍的时候，我们说对音频和视频都是
html5 下才支持的 那么我们现在呢是不是 html5
呢？因为我用的这个版本比较早 所以它不是 html5。
那怎么修改呢？很简单，我们只需要加一个，这个大家可能都知道 ！DOCTIPE
然后是 html 这样的话呢，我们整个文档呢就直接支持的是
html5 好，我们再保存，再刷新看一下。
音频和视频还是没有显示出来 原因在于啥呢？这块呢我们在加音频和视频的时候呢 我们应该给它加一个这样的内容。
什么内容呢？就是我们要把控键给它 加上，controls = controls。
这样的话呢我们 这个控键呢就可以显示出来，也就有了相关的一些播放按钮就可以 进行播放了。
好，我们再保存一下，再刷新。
好，现在呢我们可以看到 现在已经出来图像框了。
我们可以点一下，试一下，[音乐] 没有问题，有音频了。
这块呢视频还是没有办法点击，虽然框已经出来了 这块呢就要考虑，是否在
IIS 里面注册过我们播放的 mp4 类型。
我们检查一下，好，打开 IIS。
我们打开这个网站 选择它的 MIME 类型。
找一下有没有 mp4 mp4，mp3，刚才我们播放的 mp3 也有了。
mp4 好像没有，所以呢我们在这要添加个类型
mp4，然后呢这个名称是 vedio
mpeg，现在呢我们再试一下 在试之前呢，我们要把这个网站呢重新启动一下。
好，重启一下 然后呢我们刷新，出来了，没有问题。
然后我们点击播放一下 好，视频已经出来了
我们整个这个网站，从功能上来说都已经实现了 但是呢，这个结构呢还是不怎么好看，所以呢下来呢我们要把
整个这个结构呢稍微调整一下，包括呢要把音频和视频这一部分呢要往右侧移一下
然后呢，把这个中间的腾给我们的《静夜思》 这样的话呢，才比较合适。
好，我们再来看一下怎么去 设置它。
这块呢，我们把它这个宽度呢，给它指定一个绝对宽度 我们先找到音视频这块，看看它这个单元格
它这个单元格呢，我们给它指定一个宽度 单元格属性，我们给它指定宽度
比如说这个我们只让它占百分之，大家可以看一下 我们让它占一个 30%
就够了，这样的话呢，它就不会占那么多了 然后这个单元格呢，我们要设置的是单元格啊，注意，大家看注意这个表格和单元格
这个单元格呢，我们让它这个，我们这块因为这个不好选
我们直接在这输代码，这个单元格呢我们让它来一个宽度是 50%
吧，55，然后呢这边这个我看是多少 这个单元格，这个单元格是
14%，我们变成 15%吧 15，这个是
30%，这个是 55% 对，那这个就差不多了。
好，把它保存一下，然后大家再来看一下 这样的话呢，整体上呢就是我们这个就可以控制，把这个稍微移过去一点，这样就比较好看了
而且呢，这个静夜思这个整体上这个我觉得应该带个框，所以我们把这一块给它加一个 静夜思这块我们加个
border 是 1，这样的话呢，就能显示出框来 这样的话，这个框就显示出来了。
当然呢，我们这个这个内容呢还不是太饱满 然后左侧这个
sider，我让它整个这个高度呢 就是看上去也比较饱满，或者是顶端对齐。
好，我们把这个 sider 这部分呢，让它这个表格顶端对齐
咱们还是先选中，这个是单元格属性了 单元格属性，我们把这个垂直对齐方式呢，顶端对齐
然后呢，这个我看，行跨距 列跨距，这个先不管它。
好，大家现在再来看一看 好，这个效果呢就稍微好一点。
还有现在我把这个整体上这个 sider 这部分呢，都给它设置成背景、
蓝色背景色 这个我们单元格不好选啊，不好选那么我们现在就在这块拿
直接拿它的这个代码了啊，所以这个我们代码也要会
我们这块呢，直接给它用这个 bg
这块复制一下，因为这个颜色都是一样的，所以我们把它复制到单元格这一块 刚才是表格，现在我们设置成单元格
好，现在大家看一看，我们现在整个这个单元格呢就都成蓝色的 这样的话呢，就稍微更好看一些了。
还有 这块呢，大家可能看到这个屏幕啊，就整体上来说 好像不够、 不够好看。
为什么呢？老师在这个左侧呢，我们把它居中。
怎么居中呢？ 就是在我们下一周的这个讲课中，我们有个
div 我们这块给它加一下 div，然后呢我们有一个对齐方式
我们让它采用一个 center 对齐方式
这样的话呢，就可以保证整个这个内容呢是居中对齐的，然后呢刷新一下 大家看看这个整体呢，现在已经居中了。
现在呢，实际上我们还要设计的就是把这个中间这部分区域呢 稍微再修饰美化一下。
我们这块呢，其他细节内容先不贴了，因为我们后面还有 很多内容要往这里面放。
我们现在呢，就把它稍微背景色调一下就可以了 我们给它背景色调成，这是
单元格属性，我们给它稍微换一下，换一个颜色 这个一个网站在设计的时候，这个颜色呢还不能太杂
但是我们现在主要是为了给大家演示起见，让大家能够把这个看清楚 好，我们换成粉色，保存一下。
刷新，好了 这样一来呢，实际上呢我们整个网站的架构就出来了
有些时候呢，有的地方呢，还会在这个顶端这个 logo
下方呢，会带一个横向的导航 那么我们后面也要用到横向导航。
这块呢先展示给大家，就先 做到这个程度。
这样一来呢，实际上我们现在是不是对这个做网页呢 有感觉了？后面呢如果我们再学了像
CSS 再学了一些其他内容，大家设计起来可能更方便
而且我们现在也测试成功了，确实是拿 IP 测试的 如果说，我这个
IP 呢，实际上是能被外网访问的 那么，其他同学呢，其实也可以通过这个 IP 地址 来访问。
但是因为我们这个用的是内网运行，所以没办法 对外提供服务。
因此呢，实际上现在只能在本地上进行测试，实际上呢 现在呢，我们的一个平台就搭好了。
一个基础页面已经有了，你们可以试一下 看能不能做到这个程度，也期待着大家做得 比我的更好看。
好，我们这个例题先给大家讲到这里，谢谢大家
Explore our Catalog
Join for free and get personalized recommendations, updates and offers.
Coursera provides universal access to the world’s best education,
partnering with top universities and organizations to offer courses online.
© 2018 Coursera Inc. All rights reserved.
