《【奥鹏电大】大工22春《Web前端网页制作》大作业及要求》由会员分享，可在线阅读，更多相关《【奥鹏电大】大工22春《Web前端网页制作》大作业及要求（21页珍藏版）》请在金锄头文库上搜索。
1、 网络教育学院Web前端网页制作课 程 设 计 题 目： 题目四：制作一个学校门户网站学习中心： 请核对题目一致再下载 层 次： 专 业： 年 级： 年 春/秋 季 学 号： 学 生： 辅导教师： 完成日期： 年 月 日大工21秋Web前端网页制作课程设计注意：从以下5个题目中任选其一作答。题目四：制作一个学校门户网站 引 言网站发展到今天，已经出现各种各样形态风格种类，有关于小说、新闻、游戏、微博等等，而制作网站的方法也多种多样，现在，只要愿意甚至你可以为自己做一个个人网站，越来越多的公司通过建设网站的方法来展示自己的公司环境、公司理念，而这些网站也就成为这些公司向外界展示自己的窗口，好的网
2、站表现出一个公司的实力，从而吸引到更多实力强大的人加入到他们公司。而我做这个网站主要是向外界展示我们的学校，让我校的学生能更了解我们的学校，简单的结构，亮丽的风格，是我的网站吸引人的主要方法，丰富多样的内容是制胜的法宝。2 校园网站设计规划2.1 校园网站的内容选取我在制作这个网站时主要考虑了网站的定位，目标用户，网站内容以及网页的版面，因为制作网站前我们就应该明确我们的网站是做给谁看的，放些什么内容给人看，以及网站的样式方不方便让人观看，可以说只要知道这几点，就有人愿意来看你做的这个网站，这也是我们制作网站的核心。就比如我制作的这个网站，我是模仿我们学校的官网制作的，当然由于是个人制作看起来
3、还是很粗超，我的网站定位是门户网站，主要是目标用户是本学校的学生，网页上的内容主要是学校的各类信息。从我的版面上来看我的网站主要分为四个部分：学校介绍主要介绍了我们学校的软硬件环境，学校新闻也就是学校一些比较大的活动，学校通告是关于学校发布的一些通知，最后是大学生活主要是关于我们大学生活中发生的一些事。其实，大部分网站都是这样，介绍公司文化理念，公司活动，公司安排等，这也是大部分公司向外界展示自己的窗口。网站要求不同则展示的方式也不同，一个小说网站和一个新闻网站，无论是从建站的目的，或者说网站内容都大不一样，小说网站主要是面向广大读者，越丰富种类越齐全那么吸引的人就越多，可新闻网站更加注重新闻
4、的时效性，要是新闻网站上挂的最新一条新闻都是好几天前的，你说这样的网站还能吸引人吗？，所以作为模仿学校官网的网站，我主要选取的内容是和我们的大学生活息息相关的而且对于我的网站的浏览者我很明确，就是学校的学生群体，所以我最要的内容就是关于我们的大学生活，比如学校最近举办了什么活动，有什么重要的通知，发生了什么有趣的事，这都是我们大学生所关注的。而且网站的结构和风格也能反映一个网站的特色，一个好的网站，网站结构和风格足够吸引人，将会给这个网站加分不少，就比如我的网站结构简单，颜色亮丽，背景色主要是蓝色，而之所以这样设计是因为我们的对象是大学生，要是结构复杂，好几十个板块，那我们还有耐心看下去吗？或
5、者网站的背景色是黑色，让人看起来就死气沉沉，同样没有大学生愿意看。所以说鲜明的结构独特的风格起的是画龙点睛的作用，要是一个网站内容再丰富，结构不够鲜明，风格不够独特，那也是毫无价值的。所以设计网站前我们需要考虑多方面的因素，千万不能想到什么做什么，这样做出来的网站是无法长时间吸引人的。图2.1 网站主页如图2.1所示，我的这个网站的结构主要由学校简介、南信新闻、学校展示等几大部分组成。这些部分组成了我的整个网站的结构，使得整个站点不会因为内容过多而显得杂乱无章。3 网站设计的前期准备3.1 软件准备制作网页的方式多种多样，也从来没人说过我们一定要拘泥于哪一种，对于我们这些初学者来说，最简单的、
6、最方便的才是最适合我们的。网页制作中最出名的莫过于Dreamweaver和Frontpage这两款软件，我可以说只要是制作网页的人就没有不知道这两款软件的。我这里使用的是Dreamweaver，我也向那些新手推荐这款软件，因为它真的很简单。还有和它同公司的另外两款软件Fireworks和flash，他们并称Macromedia公司的网页制作“三剑客”，另外两款软件对我们制作更绚丽的网页有很大帮助。Dreamweaver 是由美国Macromedia公司推出的一个“所见即所得”的可视化网站开发制作工具。 Fireworks则被称为Macromedia公司网页设计“三剑客”之“火焰”，它最擅长处理
7、网页图片，可以用来制作GIF动画。 Flash则被称作Macromedia公司网页三剑客之中的“闪电”，它最擅长制作作网上动画为特长，可以用来做动画 小游戏。Dreamweaver 采用“所见即所得”的设计模式，你所制作出来是什么效果，展示出来就是什么效果。不用去考虑其他制作上的问题。它将网页设计中的实现与设计两个部分分离开来，这样我们的设计人员就可以将更多的精力放在设计页面上而不是花太多的时间来考虑如何将我们的网页实现，因为实现的部分将由软件来替我们完成，是不是很方便。在我设计我的个人网站的过程中，我选择了Dreamweaver 8和 Photoshop两种软件。Photoshop我在学校选
8、修课学过，这个软件主要是负责用来帮我处理图片，对我来说，相对于其它的软件来说，这两个我还算是比较熟悉的。 3.2 IIS 7的安装与设置在众多的基于浏览的开发方案中，微软的IIS是作为客户端与服务器端之间连接的桥梁。当有人想要浏览你的网页时，在地址栏输入你网站的地址，这时请求将会从你的浏览器发送给服务器端，然后服务器端将你的请求交给IIS处理，然后IIS将检索你访问的页面，并通过你所请求的文件名对该网页进行处理，加入页面是以HTML为扩展名又或者页面是另外的格式，IIS再对网页上的代码进行处理。IIS 是微软专为Windows系统设计的 WEB 服务器软件。Windows 7在安装系统时，就已
9、经自带IIS 7；但Windows 7不会主动安装它。下面就我就介绍一下在我制作网站过程中在Windows 7上安装IIS 7的过程。步骤 1 在windows7桌面上的左下角，点击“开始”，找到“控制面板”，并点击进去。步骤 2 进入控制面板后，首先将“查看方式”选择为“类别”,以缩小图标查找的范围，然后点击“程序”。步骤 3 进入“程序”显示页面后，找到“程序和功能”一栏，点击“打开或关闭Windows功能”。打开的界面如图3.1所示 图3.1 window功能 图3.2 添加IIS服务步骤 4 进入到“打开或关闭Windows功能”页面后，找到“Internet信息服务”一栏，可以看到其
10、前面的勾未勾上。单击“Internet信息服务”前面的“加号”将目录全部展开，然后将FTP、服务器、web管理工具、万维网服务目录下的所有选项进行勾选，最后点击“确定”按钮即可。如图3.2所示。步骤 5 IIS 7功能打开完毕后，可以在开始-程序搜索框里面输入”IIS 7“,找到Internet信息服务管理器，并打开，打开之后就可以进行IIS 7的一些配置，发布html网站了。当然我们也可以设置我们默认站点及主页，修改过程如下：步骤 6 打开“IIS”，弹出一个界面如图3.3所示。图 3.3 IIS管理器步骤 7 右键单击“网站”按钮，在右键菜单里面选择“添加”选项，然后打开添加网站界面如图3
11、.4所示。图 3.4 添加网站的界面步骤 8 首先我们先输入我们制作网站的名称，这里我输入的是mynet。这时软件会自动创建一个与网站名称同名的应用程序池。然后我们再点击“连接为”按钮，选择“特定用户”，这里的特定用户是我重新创建的一个系统用户，输入这个web_user账户的用户名和密码，如图3.5所示。端口我们要更改为8080， 因为80已经被default website占用，我们无法使用，主机名我们不用填写。 图 3.5 添加网站的步骤步骤 9 编辑身验证，添加默认主页，打开如图所示3.6界面。图 3.6 身份验证步骤 10 编辑应用池，点击页面左侧的“应用程序池”按钮，选中与我们网站同
12、名的应用程序池。然后，点击右侧栏的“高级设置”。根据网站的开发版本选相应的版本，不然会出错的。如图3.7所示图3.7 应用程序池设置步骤 11直接关闭防火墙。到这儿，IIS的设置到此结束。4 校园网站的制作过程4.1 主页的制作过程图4.1 网站主页步骤1，新建一个HTML页面，然后设置背景颜色，设置完背景颜色的页面如图4.2所示：图 4.2 设置背景色步骤2，选择布局表格，然后在页面上选中自己所需要的区域，如图4.3所示图4.3 布局表格步骤3，然后对布局表格的CSS样式进行设置：设置代码如图4.4所示图4.4 CSS样式步骤4，接着退出布局，开始进行图片插入，以及文字输入，完成图如图4.5
13、所示：图4.5 top栏制作步骤5，进行nav标签的制作，这里我是通过代码进行制作4.6，代码如图，CSS样式如图4.7，制作完效果图如4.8所示：图4.6 输入代码图4.7 CSS样式图4.8 效果图步骤6，banner标签的设置，步骤与2,3类似，最后插入图片，如图4.9图4.9 banner标签的设置步骤7，主题部分的制作也与步骤6相似，而不同的主要是CSS样式的设置，学校介绍的主要是about，CSS样式如图4.10，其他三个区域主要是CSS样式bt1，如图4.11 图 4.10 学校介绍CSS样式 图 4 .11 其他部分CSS样式步骤8，最后是foot标签的制作，直接通过代码，进行
14、制作，然后修改CSS样式一般来说，最底部可以制作一个导航栏，方便用户浏览，还可以输入一些网站地址，邮编，版权所有之类的内容，代码如图4.12，CSS样式如图4.13，以及效果图如图4.14。图4.12 foot标签代码图4.13 foot标签CSS样式图4.14 foot标签效果图步骤9，整个网页主要分为三个部分头部、主体、尾部，我这里只是粗略的进行制作，主体部分主要是填充内容，所以不再详细讲解过程，不过在图片区域添加了一串代码，来实现图片的滚动显示，如图4.15所示，添加的代码如图4.16所示：图4.15 图片滚动播放图 4.16 滚动播放代码4.2 链接页面的制作图4.17 新闻资讯页面如图4.17 图片中显示的就是我的网站里“新闻资讯”的样子，当点击网页上的新闻资讯四个字时，浏览器就会重新打开一个界面，显示我制作的新闻资讯网页，下面是我制作这个链接的步骤：首先，制作主页面的时候，我们要先保存，然后选择“新闻资讯”四个字右键选择“创建连接”，然后将我做好的网页
