基于Dreamweaver的校园网站制作

南京信息职业技术学院

毕业设计论文

作者 学号 41321P

系部 计算机与软件学院_________ 专业 计算机网络技术__________ 题目 基于Dreamweaver的校园网站制作__ ______________________________________ 指导教师 ______ 史律_______________ 评阅教师______________________________ 完成时间： 2016 年 4 月 20 日

1

毕业设计(论文)中文摘要

(题目)：基于Dreamweaver的校园网站制作 摘要：本人的毕业论文主要是使用了Photoshop、Dreamweaver、DIV+CSS制作了本网站的界面。论文阐述了我的网站的设计和制作的主要过程，其中包括设计规划、设计准备、设计过程、网站测试四个部分，其中设计规划主要是介绍了本网站的设计方向及目的、设计准备主要介绍设计网站所使用的Photoshop、Dreamweaver、DIV+CSS三个主要软件、设计过程主要具体介绍了本网站建站具体步骤和设计思路、网站测试主要是介绍了网站制作中一些需要解决的问题。 关键词：Dreamweaver 校园网站 div+css

2

毕业设计(论文)外文摘要

Title : The production of campus website based on Dreamweaver Abstract: My graduation project is mainly the use of Photoshop, Dreamweaver, div + CSS created this website interface. Paper describes the main course of my website design and production, including design and planning, preparation design, process design, site testing of four parts, including design and planning of this website is to introduce the design direction and purpose, the design focuses on preparation website design used Photoshop, Dreamweaver, div + CSS three major software design mainly specifically describe the present website design and the specific steps and design ideas, web site testing is to introduce the production of some problems to be solved. keywords: Dreamweaver campus website div+css

3

目 录

1 引 言 .............................................................................................................................. 5 2 校园网站设计规划 ........................................................................................................ 6

2.1 校园网站的内容选取 ........................................................................................ 6 3 网站设计的前期准备 .................................................................................................... 8

3.1 软件准备 ............................................................................................................. 8 3.2 IIS 7的安装与设置 ............................................................................................. 8 4 校园网站的制作过程 .................................................................................................. 13

4.1 主页的制作过程 ............................................................................................... 13 4.2 链接页面的制作 ............................................................................................... 18 5 网站的测试与上传 ...................................................................................................... 20

5.1 网站的测试 ....................................................................................................... 20 5.2 网站的上传 ....................................................................................................... 21 结论 .................................................................................................................................. 22 致谢 .................................................................................................................................. 23 参考文献 .......................................................................................................................... 24

4

1 引 言

网站发展到今天，已经出现各种各样形态风格种类，有关于小说、新闻、游戏、微博等等，而制作网站的方法也多种多样，现在，只要愿意甚至你可以为自己做一个个人网站，越来越多的公司通过建设网站的方法来展示自己的公司环境、公司理念，而这些网站也就成为这些公司向外界展示自己的窗口，好的网站表现出一个公司的实力，从而吸引到更多实力强大的人加入到他们公司。

而我做这个网站主要是向外界展示我们的学校，让我校的学生能更了解我们的学校，简单的结构，亮丽的风格，是我的网站吸引人的主要方法，丰富多样的内容是制胜的法宝。

5

2 校园网站设计规划

2.1 校园网站的内容选取

我在制作这个网站时主要考虑了网站的定位，目标用户，网站内容以及网页的版面，因为制作网站前我们就应该明确我们的网站是做给谁看的，放些什么内容给人看，以及网站的样式方不方便让人观看，可以说只要知道这几点，就有人愿意来看你做的这个网站，这也是我们制作网站的核心。

就比如我制作的这个网站，我是模仿我们学校的官网制作的，当然由于是个人制作看起来还是很粗超，我的网站定位是门户网站，主要是目标用户是本学校的学生，网页上的内容主要是学校的各类信息。

从我的版面上来看我的网站主要分为四个部分：学校介绍主要介绍了我们学校的软硬件环境，学校新闻也就是学校一些比较大的活动，学校通告是关于学校发布的一些通知，最后是大学生活主要是关于我们大学生活中发生的一些事。其实，大部分网站都是这样，介绍公司文化理念，公司活动，公司安排等，这也是大部分公司向外界展示自己的窗口。

网站要求不同则展示的方式也不同，一个小说网站和一个新闻网站，无论是从建站的目的，或者说网站内容都大不一样，小说网站主要是面向广大读者，越丰富种类越齐全那么吸引的人就越多，可新闻网站更加注重新闻的时效性，要是新闻网站上挂的最新一条新闻都是好几天前的，你说这样的网站还能吸引人吗？，所以作为模仿学校官网的网站，我主要选取的内容是和我们的大学生活息息相关的

而且对于我的网站的浏览者我很明确，就是学校的学生群体，所以我最要的内容就是关于我们的大学生活，比如学校最近举办了什么活动，有什么重要的通知，发生了什么有趣的事，这都是我们大学生所关注的。

而且网站的结构和风格也能反映一个网站的特色，一个好的网站，网站结构和风格足够吸引人，将会给这个网站加分不少，就比如我的网站结构简单，颜色亮丽，背景色主要是蓝色，而之所以这样设计是因为我们的对象是大学生，要是结构复杂，好几十个板块，那我们还有耐心看下去吗？或者网站的背景色是黑色，让人看起来就死气沉沉，同样没有大学生愿意看。

6

所以说鲜明的结构独特的风格起的是画龙点睛的作用，要是一个网站内容再丰富，结构不够鲜明，风格不够独特，那也是毫无价值的。所以设计网站前我们需要考虑多方面的因素，千万不能想到什么做什么，这样做出来的网站是无法长时间吸引人的。

图2.1 网站主页

如图2.1所示，我的这个网站的结构主要由学校简介、南信新闻、学校展示等几大部分组成。这些部分组成了我的整个网站的结构，使得整个站点不会因为内容过多而显得杂乱无章。

7

3 网站设计的前期准备

3.1 软件准备

制作网页的方式多种多样，也从来没人说过我们一定要拘泥于哪一种，对于我们这些初学者来说，最简单的、最方便的才是最适合我们的。网页制作中最出名的莫过于Dreamweaver和Frontpage这两款软件，我可以说只要是制作网页的人就没有不知道这两款软件的。我这里使用的是Dreamweaver，我也向那些新手推荐这款软件，因为它真的很简单。还有和它同公司的另外两款软件Fireworks和flash，他们并称Macromedia公司的网页制作“三剑客”，另外两款软件对我们制作更绚丽的网页有很大帮助。

Dreamweaver 是由美国Macromedia公司推出的一个“所见即所得”的可视化网站开发制作工具。

Fireworks则被称为Macromedia公司网页设计“三剑客”之“火焰”，它最擅长处理网页图片，可以用来制作GIF动画。

Flash则被称作Macromedia公司网页三剑客之中的“闪电”，它最擅长制作作网上动画为特长，可以用来做动画 小游戏。

Dreamweaver 采用“所见即所得”的设计模式，你所制作出来是什么效果，展示出来就是什么效果。不用去考虑其他制作上的问题。它将网页设计中的实现与设计两个部分分离开来，这样我们的设计人员就可以将更多的精力放在设计页面上而不是花太多的时间来考虑如何将我们的网页实现，因为实现的部分将由软件来替我们完成，是不是很方便。

在我设计我的个人网站的过程中，我选择了Dreamweaver 8和 Photoshop两种软件。 Photoshop我在学校选修课学过，这个软件主要是负责用来帮我处理图片，对我来说，相对于其它的软件来说，这两个我还算是比较熟悉的。

3.2 IIS 7的安装与设置

在众多的基于浏览的开发方案中，微软的IIS是作为客户端与服务器端之间连接的桥梁。当有人想要浏览你的网页时，在地址栏输入你网站的地址，这时请求将会从你的浏览器发送给服务器端，然后服务器端将你的请求交给IIS处理，然后IIS将检索你访

8

问的页面，并通过你所请求的文件名对该网页进行处理，加入页面是以HTML为扩展名又或者页面是另外的格式，IIS再对网页上的代码进行处理。

IIS 是微软专为Windows系统设计的 WEB 服务器软件。Windows 7在安装系统时，就已经自带IIS 7；但Windows 7不会主动安装它。下面就我就介绍一下在我制作网站过程中在Windows 7上安装IIS 7的过程。

步骤 1 在windows7桌面上的左下角，点击“开始”，找到“控制面板”，并点击进去。

步骤 2 进入控制面板后，首先将“查看方式”选择为“类别”,以缩小图标查找的范围，然后点击“程序”。

步骤 3 进入“程序”显示页面后，找到“程序和功能”一栏，点击“打开或关闭Windows功能”。打开的界面如图3.1所示

图3.1 window功能 图3.2 添加IIS服务

步骤 4 进入到“打开或关闭Windows功能”页面后，找到“Internet信息服务”一栏，可以看到其前面的勾未勾上。单击“Internet信息服务”前面的“加号”将目录全部展开，然后将FTP、服务器、web管理工具、万维网服务目录下的所有选项进行勾选，最后点击“确定”按钮即可。如图3.2所示。

步骤 5 IIS 7功能打开完毕后，可以在开始->程序搜索框里面输入”IIS 7“,找到Internet信息服务管理器，并打开，打开之后就可以进行IIS 7的一些配置，发布html网站了。

当然我们也可以设置我们默认站点及主页，修改过程如下：

9

步骤 6 打开“IIS”，弹出一个界面如图3.3所示。

图 3.3 IIS管理器

步骤 7 右键单击“网站”按钮，在右键菜单里面选择“添加”选项，然后打开添加网站界面如图3.4所示。

图 3.4 添加网站的界面

步骤 8 首先我们先输入我们制作网站的名称，这里我输入的是mynet。这时软件会自动创建一个与网站名称同名的应用程序池。然后我们再点击“连接为”按钮，选择“特定用户”，这里的特定用户是我重新创建的一个系统用户，输入这个web_user账户的用户名和密码，如图3.5所示。端口我们要更改为8080， 因为80已经被default website占用，我们无法使用，主机名我们不用填写。

10

图 3.5 添加网站的步骤

步骤 9 编辑身验证，添加默认主页，打开如图所示3.6界面。

图 3.6 身份验证

步骤 10 编辑应用池，点击页面左侧的“应用程序池”按钮，选中与我们网站同名的应用程序池。然后，点击右侧栏的“高级设置”。根据网站的开发版本选相应的版本，不然会出错的。如图3.7所示

11

图3.7 应用程序池设置

步骤 11直接关闭防火墙。到这儿，IIS的设置到此结束。

12

4 校园网站的制作过程

4.1 主页的制作过程

图4.1 网站主页

步骤1，新建一个HTML页面，然后设置背景颜色，设置完背景颜色的页面如图4.2所示：

图 4.2 设置背景色

13

步骤2，选择布局表格，然后在页面上选中自己所需要的区域，如图4.3所示

图4.3 布局表格

步骤3，然后对布局表格的CSS样式进行设置：设置代码如图4.4所示

图4.4 CSS样式

步骤4，接着退出布局，开始进行图片插入，以及文字输入，完成图如图4.5所示：

图4.5 top栏制作

14

步骤5，进行nav标签的制作，这里我是通过代码进行制作4.6，代码如图，CSS

样式如图4.7，制作完效果图如4.8所示：

图4.6 输入代码

图4.7 CSS样式

图4.8 效果图

15

步骤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标签的制作，直接通过代码，进行制作，然后修改CSS样式一般来说，最底部可以制作一个导航栏，方便用户浏览，还可以输入一些网站地址，邮编，版权所有之类的内容，代码如图4.12，CSS样式如图4.13，以及效果图如图4.14。

16

图4.12 foot标签代码

图4.13 foot标签CSS样式

图4.14 foot标签效果图

步骤9，整个网页主要分为三个部分头部、主体、尾部，我这里只是粗略的进行制作，

17

主体部分主要是填充内容，所以不再详细讲解过程，不过在图片区域添加了一串代码，来实现图片的滚动显示，如图4.15所示，添加的代码如图4.16所示：

图4.15 图片滚动播放

图 4.16 滚动播放代码

4.2 链接页面的制作

图4.17 新闻资讯页面

如图4.17 图片中显示的就是我的网站里“新闻资讯”的样子，当点击网页上的新闻资讯四个字时，浏览器就会重新打开一个界面，显示我制作的新闻资讯网页，下面是

18

我制作这个链接的步骤：

首先，制作主页面的时候，我们要先保存，然后选择“新闻资讯”四个字右键选择“创建连接”，然后将我做好的网页做为目标，这里我自己已经提前做好另一个网页news.html，如图4.18所示

图4.18 链接到news.html

同样的步骤，重复将“南信新闻”、“学校展示”等区域的more小图标做上超链接，如图4.19区域，其他链接类似，所以不再一一叙述。

图4.19 设置链接的区域

主要几个链接设置完成。链接的设置到此结束。

19

5 网站的测试与上传

5.1 网站的测试

建设好网站后，我们要相对网站进行测试，由于我制作的网站不是很复杂，所以我主要进行测试的只有3个方面：分辨率、兼容性、链接。

1. 页面在不同屏幕分辨率下显示不同

不同分辨率的页面，显示出来也不同，因为我们的页面表单控件默认宽度为固定值150px，当分辨率高了之后，表格中就会显示过多的空白，页面布局就会看上去很不协调，这种情况在宽屏显示器上格外明显。

不过这里也有几个问题我们需要注意一下，就假如我们设定宽度为770px，而表格宽度我们设定的是百分比单位，那么我们使用大于800×600的分辨率时，网页就会拉宽，那么网页看上去就变形了。

解决办法：比如我们要想让页面在分辨率为1024*768时居中，只要在网页代码的后再加一个

2.页面在不同浏览器下显示不同

不同的浏览器查看页面，也会有一些差别，因为不同的显示器对代码的翻译也是不相同的，这也是大多数网站制作者需要考虑的问题，因为你必需要针对浏览器进行调整。

国内的浏览器大多使用的IE内核，但是IE并没有严格遵守W3C标准，而国外的浏览器严格遵守W3C标准。

解决办法：我们应该避免使用 W3C 组织不推荐的排版属性，我们可以是用 CSS样式代替。不过现在大部分国内浏览器出了兼容模式，能够保证大多数的浏览器显示一致。

3.图片无法显示

我在进行网页的测试过程中经常发现网页打开后，图片不显示出来，经过多次测试，发现是由于我在制作的过程中对图片的位置进行移动，导致图片物理路径和我代码设定的路径不同产生的，知道后我就对这个问题进行了处理。

解决方法：假如自己网站上查看时，可以把图片放在同一个文件夹内，如果上传到服务器后，也同样把图片放到同一个文件夹内，然后对图片代码路径重新进行更改。

20

在所有测试中，对链接的测试是我花费时间最长的一部分，因为链接测试的成功与否将直接影响我网站的整体效果，所以我对链接进行了反复测试，以确保没有什么问题。

5.2 网站的上传

当然我们也可以将自己的网站上传到一些服务器空间，比如阿里云等，如果有兴趣的话，还可以购买一个域名，到时候只要输入网址就直接能看到自己做的网站，其他不多讲，这个过程中主要说一下域名如何解析到服务器上：

步骤1登录购买服务器的代理商网站并进入后台管理系统，找到服务器管理的快捷入口。

步骤2进入服务器管理界面，选择指定的服务器，点击“绑定域名”。

步骤3添加域名。注意需要填写两种域名格式，一种是带“www”前缀的，另一种是不带的缩写形式。

步骤4域名和服务器是双向绑定的，服务器绑定完域名后，需要域名填写解析地址。点击域名“解析”链接。

步骤5仿造提示信息，修改“A记录”和“CNAME”所对应的值后保存。 步骤6等待2-6个小时，使其生效。生效后即可通过域名访问发布到服务器上的网站了。

这是将自己网站上传服务器绑定域名的基本步骤。

21

结论

通过这次做网页的练习，让我懂得了很多。以前总有很多问题不懂，但是为了做好这些网页，我便会查看一些相关的资料，去问一些懂的同学。因此觉得本次的网页练习是受益良多的。其实，网页设计与制作真的是一门很有趣且神奇的课程，或许刚开始会对这门课程没有兴趣，或许刚开始觉得记住网页设计里面的代码是一件繁琐且无聊的事情，是的、刚开始的确会觉得学习这门课程是一件很困难的事情。但是当随着所学习的东西慢慢加深的话，当自己能够制作出一些自己喜欢的页面时，那将是一件很快乐的事，从而也就会对此产生兴趣。感觉在学习网页设计时，应该熟记出现的一些代码，毕竟代码是制作网页的必须！当我们刚学习CSS时，会觉得这是一件很吃力的事情，因为CSS 里面的属性名称众多。这里面会设计很多的英文代码，这对我们来说是一件很困难的事情，毕竟我们要去理解并且记住这些英文代码的拼写方式。并且觉得在学习网页时，更重要的便是自己的实践。只有这样，我们才能真正的理解一些代码的用处，才能真正的去记住一些代码！这些就是我对网页设计这门课总结！

22

致谢

本论文在史律老师的悉心指导下修盖完成的。老师渊博的专业知识、严谨的治学态度，精益求精的工作作风，诲人不倦的高尚师德，严于律己、宽以待人的崇高风范，朴实无法、平易近人的人格魅力对本人影响深远。不仅使本人树立了远大的学习目标、掌握了基本的研究方法，还使本人明白了许多为人处事的道理。本次论文从初稿到修改完成，每一步都是在老师的悉心指导下完成的，倾注了老师大量的心血。在写论文的过程中，遇到了很多的问题，在老师的耐心指导下，问题都得以解决。在此，谨向老师表示敬意和感谢！

23

参考文献

1 汪洋 郝永强 编著·网站设计全程教程·科学出版社·2002年1月 2 杨成文 王竹林 戴军峰 编著·轻松打造个性化网站·国防工业出版社·2002年10月

3 李海兵 李杰臣 编著·超梦幻动态网页开发·中国青年出版社·2004年2月 4 刘春 编著·网页制作三剑客标准培训教程·上海科学普及出版社·2003年1月

5 王建军 编著·设计你的个人主页教程·黑龙江出版社·2001年6月

6 高强 刘浩才 编著·网页素材的设计简明教程·新疆出版社·2003年5月

24

百度搜索“77cn”或“免费范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，免费范文网，提供经典小说综合文库基于Dreamweaver的校园网站制作在线全文阅读。