基于Dreamweaver的校园网站制作

1、-. z. 信息职业技术学院 毕业设计论文作者 * 41321P系部 计算机与软件学院_专业 计算机网络技术_题目基于Dreamweaver的校园制作_指导教师_ 史律_评阅教师_完成时间： 2016 年 4 月 20 日毕业设计(论文)中文摘要(题目)：基于Dreamweaver的校园制作摘要：本人的毕业论文主要是使用了Photoshop、Dreamweaver、DIV+CSS制作了本的界面。论文阐述了我的的设计和制作的主要过程，其中包括设计规划、设计准备、设计过程、测试四个局部，其中设计规划主要是介绍了本的设计方向及目的、设计准备主要介绍设计所使用的Photoshop、Dreamweave

2、r、DIV+CSS三个主要软件、设计过程主要具体介绍了本建站具体步骤和设计思路、测试主要是介绍了制作中一些需要解决的问题。关键词：Dreamweaver 校园 div+css毕业设计(论文)外文摘要Title :The production of campus website based on DreamweaverAbstract: My graduation project is mainly the use of Photoshop, Dreamweaver, div + CSS created this website interface. Paper describes the ma

3、in 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 Photosho

4、p, 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目 录TOC o 1-2 h z uHYPERLINK

5、 l _Toc4509243171 引言 PAGEREF _Toc450924317 h 5HYPERLINK l _Toc4509243182 校园设计规划 PAGEREF _Toc450924318 h 6HYPERLINK l _Toc4509243192.1 校园的容选取 PAGEREF _Toc450924319 h 6HYPERLINK l _Toc4509243203 设计的前期准备 PAGEREF _Toc450924320 h 8HYPERLINK l _Toc4509243213.1 软件准备 PAGEREF _Toc450924321 h 8HYPERLINK l _To

6、c4509243223.2 IIS 7的安装与设置 PAGEREF _Toc450924322 h 8HYPERLINK l _Toc4509243234 校园的制作过程 PAGEREF _Toc450924323 h 13HYPERLINK l _Toc4509243244.1 主页的制作过程 PAGEREF _Toc450924324 h 13HYPERLINK l _Toc4509243254.2 页面的制作 PAGEREF _Toc450924325 h 18HYPERLINK l _Toc4509243265 的测试与上传 PAGEREF _Toc450924326 h 20HYPE

7、RLINK l _Toc4509243275.1 的测试 PAGEREF _Toc450924327 h 20HYPERLINK l _Toc4509243285.2 的上传 PAGEREF _Toc450924328 h 21HYPERLINK l _Toc450924329结论 PAGEREF _Toc450924329 h 22HYPERLINK l _Toc450924330致 PAGEREF _Toc450924330 h 23HYPERLINK l _Toc450924331参考文献 PAGEREF _Toc450924331 h 241 引 言开展到今天，已经出现各种各样形态风格

8、种类，有关于小说、新闻、游戏、微博等等，而制作的方法也多种多样，现在，只要愿意甚至你可以为自己做一个个人，越来越多的公司通过建立的方法来展示自己的公司环境、公司理念，而这些也就成为这些公司向外界展示自己的窗口，好的表现出一个公司的实力，从而吸引到更多实力强大的人参加到他们公司。而我做这个主要是向外界展示我们的学校，让我校的学生能更了解我们的学校，简单的构造，亮丽的风格，是我的吸引人的主要方法，丰富多样的容是制胜的法宝。2校园设计规划2.1 校园的容选取我在制作这个时主要考虑了的定位，目标用户，容以及网页的版面，因为制作前我们就应该明确我们的是做给谁看的，放些什么容给人看，以及的样式方不方便让人

9、观看，可以说只要知道这几点，就有人愿意来看你做的这个，这也是我们制作的核心。就比方我制作的这个，我是模仿我们学校的官网制作的，当然由于是个人制作看起来还是很粗超，我的定位是门户，主要是目标用户是本学校的学生，网页上的容主要是学校的各类信息。从我的版面上来看我的主要分为四个局部：学校介绍主要介绍了我们学校的软硬件环境，学校新闻也就是学校一些比拟大的活动，学校通告是关于学校发布的一些通知，最后是大学生活主要是关于我们大学生活中发生的一些事。其实，大局部都是这样，介绍公司文化理念，公司活动，公司安排等，这也是大局部公司向外界展示自己的窗口。要求不同则展示的方式也不同，一个小说和一个新闻，无论是从建站

10、的目的，或者说容都大不一样，小说主要是面向广阔读者，越丰富种类越齐全则吸引的人就越多，可新闻更加注重新闻的时效性，要是新闻上挂的最新一条新闻都是好几天前的，你说这样的还能吸引人吗？，所以作为模仿学校官网的，我主要选取的容是和我们的大学生活息息相关的而且对于我的的浏览者我很明确，就是学校的学生群体，所以我最要的容就是关于我们的大学生活，比方学校最近举办了什么活动，有什么重要的通知，发生了什么有趣的事，这都是我们大学生所关注的。而且的构造和风格也能反映一个的特色，一个好的，构造和风格足够吸引人，将会给这个加分不少，就比方我的构造简单，颜色亮丽，背风光主要是蓝色，而之所以这样设计是因为我们的对象是大

11、学生，要是构造复杂，好几十个板块，那我们还有耐心看下去吗？或者的背风光是黑色，让人看起来就死气沉沉，同样没有大学生愿意看。所以说鲜明的构造独特的风格起的是画龙点睛的作用，要是一个容再丰富，构造不够鲜明，风格不够独特，那也是毫无价值的。所以设计前我们需要考虑多方面的因素，千万不能想到什么做什么，这样做出来的是无法长时间吸引人的。图2.1 主页如图2.1所示，我的这个的构造主要由学校简介、南信新闻、学校展示等几大局部组成。这些局部组成了我的整个的构造，使得整个站点不会因为容过多而显得杂乱无章。3设计的前期准备3.1 软件准备制作网页的方式多种多样，也从来没人说过我们一定要拘泥于哪一种，对于我们这些

12、初学者来说，最简单的、最方便的才是最适合我们的。网页制作中最知名的莫过于Dreamweaver和Frontpage这两款软件，我可以说只要是制作网页的人就没有不知道这两款软件的。我这里使用的是Dreamweaver，我也向那些新手推荐这款软件，因为它真的很简单。还有和它同公司的另外两款软件Fireworks和flash，他们并称Macromedia公司的网页制作三剑客，另外两款软件对我们制作更绚丽的网页有很大帮助。Dreamweaver 是由美国Macromedia公司推出的一个所见即所得的可视化开发制作工具。 Fireworks则被称为Macromedia公司网页设计三剑客之火焰，它最擅长处

13、理网页图片，可以用来制作GIF动画。 Flash则被称作Macromedia公司网页三剑客之中的闪电，它最擅长制作作网上动画为特长，可以用来做动画 小游戏。Dreamweaver 采用所见即所得的设计模式，你所制作出来是什么效果，展示出来就是什么效果。不用去考虑其他制作上的问题。它将网页设计中的实现与设计两个局部别离开来，这样我们的设计人员就可以将更多的精力放在设计页面上而不是花太多的时间来考虑如何将我们的网页实现，因为实现的局部将由软件来替我们完成，是不是很方便。在我设计我的个人的过程中，我选择了Dreamweaver 8和 Photoshop两种软件。Photoshop我在学校选修课学过，

14、这个软件主要是负责用来帮我处理图片，对我来说，相对于其它的软件来说，这两个我还算是比拟熟悉的。 3.2 IIS 7的安装与设置在众多的基于浏览的开发方案中，微软的IIS是作为客户端与效劳器端之间连接的桥梁。当有人想要浏览你的网页时，在地址栏输入你的地址，这时请求将会从你的浏览器发送给效劳器端，然后效劳器端将你的请求交给IIS处理，然后IIS将检索你访问的页面，并通过你所请求的文件名对该网页进展处理，参加页面是以HTML为扩展名又或者页面是另外的格式，IIS再对网页上的代码进展处理。IIS 是微软专为Windows系统设计的 WEB 效劳器软件。Windows 7在安装系统时，就已经自带IIS

15、7；但Windows 7不会主动安装它。下面就我就介绍一下在我制作过程中在Windows 7上安装IIS 7的过程。步骤 1 在windows7桌面上的左下角，点击开场，找到控制面板，并点击进去。步骤 2 进入控制面板后，首先将查看方式选择为类别,以缩小图标查找的围，然后点击程序。步骤 3 进入程序显示页面后，找到程序和功能一栏，点击翻开或关闭Windows功能。翻开的界面如图3.1所示图3.1 window功能 图3.2 添加IIS效劳步骤 4 进入到翻开或关闭Windows功能页面后，找到Internet信息效劳一栏，可以看到其前面的勾未勾上。单击Internet信息效劳前面的加号将目录全

16、部展开，然后将FTP、效劳器、web管理工具、万维网效劳目录下的所有选项进展勾选，最后点击确定按钮即可。如图3.2所示。步骤 5 IIS 7功能翻开完毕后，可以在开场-程序搜索框里面输入IIS 7,找到Internet信息效劳管理器，并翻开，翻开之后就可以进展IIS 7的一些配置，发布html了。当然我们也可以设置我们默认站点及主页，修改正程如下：步骤 6 翻开IIS，弹出一个界面如图3.3所示。图 3.3 IIS管理器步骤 7 右键单击按钮，在右键菜单里面选择添加选项，然后翻开添加界面如图3.4所示。图 3.4 添加的界面步骤 8 首先我们先输入我们制作的名称，这里我输入的是mynet。这时

17、软件会自动创立一个与名称同名的应用程序池。然后我们再点击连接为按钮，选择特定用户，这里的特定用户是我重新创立的一个系统用户，输入这个web_user账户的用户名和密码，如图3.5所示。端口我们要更改为8080， 因为80已经被default website占用，我们无法使用，主机名我们不用填写。 图 3.5 添加的步骤步骤 9 编辑身验证，添加默认主页，翻开如下图3.6界面。图 3.6 身份验证步骤 10 编辑应用池，点击页面左侧的应用程序池按钮，选中与我们同名的应用程序池。然后，点击右侧栏的高级设置。根据的开发版本选相应的版本，不然会出错的。如图3.7所示图3.7 应用程序池设置步骤 11直

18、接关闭防火墙。到这儿，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所示：图4.5 top栏制作步骤5，进展nav标签的制作，这里我是通过代码进展制作4.6，代码如图，CSS样式如图4.7，制作完效果图如4.8所示：图4.

19、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标签的制作，直接通过代码，进展制作，然后修改CSS样式一般来说，最底部可以制作一个导航栏，方便用户浏览，还可以输入一些地址， ，所有之类的容，代码如图4.12，CSS样式如图4.13，以及

20、效果图如图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 图片中显示的就是我的里新闻资讯的样子，当点击网页上的新闻资讯四个字时，浏览器就会重新翻开一个界面，显示我制作的新闻资讯网页，下面是我制作这个的步骤：首先，制作主页面的

21、时候，我们要先保存，然后选择新闻资讯四个字右键选择创立连接，然后将我做好的网页做为目标，这里我自己已经提前做好另一个网页news.html，如图4.18所示图4.18 到news.html同样的步骤，重复将南信新闻、学校展示等区域的more小图标做上超，如图4.19区域，其他类似，所以不再一一表达。图4.19 设置的区域主要几个设置完成。的设置到此完毕。5的测试与上传5.1 的测试建立好后，我们要相对进展测试，由于我制作的不是很复杂，所以我主要进展测试的只有3个方面：分辨率、兼容性、。1. 页面在不同屏幕分辨率下显示不同不同分辨率的页面，显示出来也不同，因为我们的页面表单控件默认宽度为固定值1

22、50p*，当分辨率高了之后，表格中就会显示过多的空白，页面布局就会看上去很不协调，这种情况在宽屏显示器上格外明显。不过这里也有几个问题我们需要注意一下，就假设我们设定宽度为770p*，而表格宽度我们设定的是百分比单位，则我们使用大于800600的分辨率时，网页就会拉宽，则网页看上去就变形了。解决方法：比方我们要想让页面在分辨率为1024*768时居中，只要在网页代码的后再加一个，前加一句。还有就是我们提到的百分比，表格、单元格的宽度单位最好不要用百分比，而要使用像素单位。2.页面在不同浏览器下显示不同不同的浏览器查看页面，也会有一些差异，因为不同的显示器对代码的翻译也是不一样的，这也是大多数制

23、作者需要考虑的问题，因为你必需要针对浏览器进展调整。国的浏览器大多使用的IE核，但是IE并没有严格遵守W3C标准，而国外的浏览器严格遵守W3C标准。解决方法：我们应该防止使用 W3C 组织不推荐的排版属性，我们可以是用 CSS样式代替。不过现在大局部国浏览器出了兼容模式，能够保证大多数的浏览器显示一致。3.图片无法显示我在进展网页的测试过程中经常发现网页翻开后，图片不显示出来，经过屡次测试，发现是由于我在制作的过程中对图片的位置进展移动，导致图片物理路径和我代码设定的路径不同产生的，知道后我就对这个问题进展了处理。解决方法：假设自己上查看时，可以把图片放在同一个文件夹，如果上传到效劳器后，也同

24、样把图片放到同一个文件夹，然后对图片代码路径重新进展更改。在所有测试中，对的测试是我花费时间最长的一局部，因为测试的成功与否将直接影响我的整体效果，所以我对进展了反复测试，以确保没有什么问题。5.2 的上传当然我们也可以将自己的上传到一些效劳器空间，比方阿里云等，如果有兴趣的话，还可以购置一个域名，到时候只要输入网址就直接能看到自己做的，其他不多讲，这个过程中主要说一下域名如何解析到效劳器上：步骤1登录购置效劳器的代理商并进入后台管理系统，找到效劳器管理的快捷入口。步骤2进入效劳器管理界面，选择指定的效劳器，点击绑定域名。步骤3添加域名。注意需要填写两种域名格式，一种是带前缀的，另一种是不带的缩写形式。步骤4域名和效劳器是双向绑定的，效劳器绑定完域名后，需要域名填写解析地址。点击域名解析。步骤5仿造提示信息，修改A记录和AME所对应的值后保存。步骤6等待2-6个小时，使其生效。生效后即可通过域名访问发布到效劳器上的了。这是将自己上传效劳器绑定域名的根本步骤。结论通过这次做网页的练习，让我懂得了很多。以