实验一 静态网页制作与IIS配置

第一篇：实验一 静态网页制作与IIS配置

实验一 静态网页制作与IIS配置

1实验目的1．了解网站开发的基本流程，掌握网站结构搭建的原则，网页设计基本原则。

2．掌握各种静态页面制作方法，利用相关网页制作软件制作各种静态页面。

3．基本掌握IIS Web服务器的安装、配置与简单使用的方法。

2、实验环境

微型计算机，windows xp操作系统，DreamWeaver 和FrontPage软件。

3实验内容

设计并制作出5-7个页面的个人站点，要求主题鲜明，内容健康，积极向上，新颖有创意。

【基本要求】

（1）首先选定主题，设计好网站结构，及各页面图样，然后组织各页面内容，再进行开发制作。

（2）安装与配置IIS。

（3）在服务器上发布网站。

【实验要点】

（1）静态页面设计

主要从页面布局，网站整体风格，网站结构搭建等方面入手，最好在完成网站策划设计书后，再着手进行具体页面设计。

（2）IIS配置

1、在winxp的系统下,打开控制面板->添加删除程序->添加/删除windows组件->选择IIS。

2、在IIS上发布个人网站。

3、测试发布的网站。

【思考题】

（1）参考网络中优秀的个人网站，谈谈如何改进自己网站的页面布局，网站整体风格等？

（2）怎么在windows2003或Vista操作系统上配置IIS服务器？

第二篇：静态网页制作心得体会

静态网页制作心得体会

姓名：张继宏

第三组

8.18 20世纪40年代科学字发明了计算机之后，人们的工作效率大大提高，但是单个计算机能够存储和处理的信息是非常有限的，为了便于信息的传递和处理，人们就把众多的计算机连接起来。

网页制作的心得体会----网页制作论文摘要 通过这次个人网页的制作，我对计算机有了更深层次得到了解，也有了更浓厚的兴趣。尤其是对网页制作的过程与一些技巧手法更有了另外一番了解，对网页制作的基础知识也有了一定的掌握。通过把自己的网页上传到互联网上，对文件的保存、上传、下载以及修改等知识有了更牢靠的掌握。通过自己的努力完成了自己上传到网上的第一个作品，那种成就感是无法用语言形容的。所以我觉得这次制作网页我已经达到了自己的目的，而不是单单为了完成作业而已。这是一个完全关于自己的个人网页，既然是介绍自己，就应该让观者在浏览了之后了解自己其人，我觉得这点我已经基本上做到了。

关键字 页面设计 ASP和数据库

1.一般来说，个人主页的选材要小而精。如果你想制作一个包罗万象的站点，把所有您认为精彩的东西都放在上面，那么往往会事与愿违，给人的感觉是没有主题，没有特色，样样有却样样都很肤浅，因为您不可能有那么多的精力去维护它。注意：网页的最大特点就是更新快。目前最受欢迎的个人主页都是天天更新甚至几小时更新一次。

2.题材最好是你自己擅长或者喜爱的内容。比如：您对诗歌感兴趣，可以放置自己的诗词；对足球感兴趣，可以报道最新的球场战况等等。这样在制作时，才不会觉得无聊或者力不从心。

3.不要太滥或者目标太高。“太滥”是指到处可见，人人都有的题材；“目标太高”是指在这一题材上已经有非常优秀，知名度很高的站点，你要超过它是很困难的。

选定了一个好的题材，是不是可以立刻动手制作了？不，经验告诉我们，必须要先规划框架。这是很重要的一步！每个网站都是一项庞大的工程。好比造高楼，没有设计图纸，规划好结构，盲目的建造，结果往往是倒塌；也好比写文章，构思好提纲，才不至于逻辑混乱，虎头蛇尾。全面仔细规划架构好自己网站，不要急于求成。

规划一个网站，可以用树状结构先把每个页面的内容大纲列出来，尤其当你要制作一个很大的网站(有很多页面)的时候，特别需要把这个架构规划好，也要考虑到以后可能的扩充性，免得做好以后又要一改再改整个网站的架构，十分累人，也十分费钱。

大纲列出来后，你还必须考虑每个页面之间的链接关系。是星形，树形，或是网形链接。这也是判别一个网站优劣的重要标志。链接混乱，层次不清的站点会造成浏览困难，影响内容的发挥。

为了提高浏览效率，方便资料的寻找，本站的框架基本采用“蒲公英”式，即所有的主要链接都在首页上，链接的层次不多，深度浅。

框架定下来了，然后开始一步一步有条理，有次序地做来，就胸有成竹得多，也为你的主页将来发展打下良好的基础。

下一步，你可以动手制作具体内容了，我将告诉你一些收集资料的窍门。

题材选定，框架选定，接下来就开始往主页里面填内容。我们称作资料收集

就个人主页而言，很少有人有能力完全靠自己来创作所有的内容。（一些高手能够提供自己编的软件，文章或则音乐，是我非常佩服的！）

大部分人的方法是：从报纸，杂志，光盘等媒体中把相关的资料收集整理，再加上一定的编辑后就可以了。

另外一个好的方法是从网络上收集，您只要到雅虎，搜狐等搜索引擎上查找相应的关键字，就可以找到一大堆的资料。

如果您是英语高手，您可以到国外站点上把最新的信息，资料翻译成中文，提供给大家，这叫“洋为中用”。

网络上的资料呈爆炸性的增长，只要注意收集某一非常细小的题材，随时供大家方便的查找，您的主页就已经有做不完的活了。

到这里我们已经完成了制作主页的准备工作。下面开始正式制作主页。

先来介绍一下我这个网页吧。我的网页主要由三大部分组成：主页、各子网页以及各互联网链接。

首先是主页，采用的是index格式，是第一个显示的页面，其实原来第一个显示的页面是一个封面，但在网上用了一段时间之后我觉得有封面比较麻烦，花哨但不实用，显得有些多余，所以我就把它给去掉了，直接显示主页会让别人有一种开门见山的感觉。主页是我花费精力和时间最多的一个页面，尤其是在它的视觉设计上包括结构，字体，背景以及色彩方面都花了很多工夫。页面包括自己的一幅小照片以及个人的简要介绍，以便让观者对自己有一个初步的了解。网页最上面是用艺术字编辑的文字，旁边的welcome是插入的GIF动画，左上角显示日期，右上角显示你在网页呆的时间，下面是一排子目录，包括一些链接和子页面，点开就可以看到关于我的详细信息。下面是一个搜索引擎，采用的是百度是原代码。再下来是我的近况，也采用了特效。右边有一个滚动字幕，是一首诗，采用了特效，下面是一些常用大型网站的链接。最下面是关于浏览器的说明，主页基本上就是这些了，还有要说的就是“给我留言”是到网上去申请的免费留言板，然后链接上去。

子网页中，“Spear相册”里面全是照片，大部分照片是用数码相机照的，有两三张是扫描上去的；“家乡风情”里则是图片与文字并存，这两个页面也是我精心设计制作的。其他的页面就大部分以文字为主对自己进行详细的介绍，背景图片是我都是我精心挑选的，多数页面都插上了MIDI音乐作为背景，有个别页面还使用了特效。

接下来再介绍介绍网页的功能吧。本网页可以说具备了多项功能：各页面可以让你对我有一个比较详细的了解；强大的搜索功能令你在网络世界中畅通无阻，网站、mp3、flash、信息快递应有尽有；各大型网站的链接让你轻松登陆以便看消息、发邮件；想听歌吗？“我的音乐”将让你听歌变得如此方便；超级留言板可以让你畅所欲言……

相信你虽然还没有看到我的网页就已经对它有了一个大致的了解了吧！现在重点介绍一下我的网页的制作过程以及其间遇到的种种困难。

开始时我选择了Dreamweaver8作为制作软件，看书学习了一些基础的东西之后就着手开始了我的网页制作，我先初步对网页作了一些页面规划，然后建立了站点，用软件中的一些基本的功能制作，首先是封面，由于Dreamweaver MX没有插入艺术字的功能，所以封面上的艺术字是我先在Word文档里制作好了之后用图片的方式插入的。接着有开始设计主页，我主要用层来设计版面，再适当配合表格，经过两个白天和一个通宵，网页基本的框架就出来了，但这时却遇到了一个很令人头疼的问题：突然所有插上去的图片都不能显示了！！我用尽了所有能想出来的方法，请教了很多的电脑高手都不能把这个无法解释的问题解决，就连重新安装DreamweaverMX也毫无作用，由于是借别人的电脑，时间紧迫，没有等到去向老师请教，我就一气之下把那些东西都删光了，连Dreamweaer也不例外，当时我真的很失望，想到这两天废寝忘食地做的东西一下全没了就很是接受不了，我曾经一度想放弃，不过冷静了之后我决定从头开始。我换了Frontpage，由于对Frontpage一无所知，也没有相关的书籍，所以刚开始建站点和网页的方法只能向别人请教。不过在开始制作了之后我发现Frontpage很多功能和Word相似，于是很快掌握了其许多基本的功能。接着我又熬了一个通宵，决定把前面的损失弥补过来。前面的工作也不能算完全白做，因为至少我在重新制作的时候不必话太多的时间去重新设计版面。还是按照原来的设计，只是改动了一些，大体的框架还是没有改变。

总结 通过这次制作网页，我学到了不少东西，而且学到了不少思考问题的方法。计算机会在以后的学习生活中充当越来越重要的角色，相信我也会学习到更多关于计算机和网络的知识。这次制作网页收获确实不小！！

第三篇：静态网页设计与制作毕业论文

目 录

摘 要……………………………………………………………………………………….0 第1章 绪论……………………………………………………………………………….1 1.1 INTERNET的历史和发展…………………………………………………………….1 1.2 网页概述................1

第2章 开发软件简介 6

2.1 Dreamweaver简介 6

2.2 HTML语言的简介 7

2.3 Flash 简介 …………………………………………………………………… 8

2.4 Photoshop 简介 ……………………………………………………………… 9 2.3 本章小结 14

第3章 网站需求分析 15

3.1相关术语及解释 15

3.2个人网站的由来与发展 15

3.3我的个人网页的设计与规划 18

3.3.1 我的个人网页的概貌……………………………………………………… 19

3.3.2 个人网页的设计理念……………………………………………………… 20

3.4 本章小结 19

第4章 结论 20

致 谢 21

参考文献 22

静态网页的设计与制作

摘 要

本文就网站的设计与制作，以软件工程的方法对全过程进行了分析与研究，本文的主要工作集中在：

1.对web页进行概述，主要是对internet的历史和发展作了回顾，并对WEB页的定义和特性进行阐述，并对网站设计过程中使用的工具和技术简单的介绍.2.对网站建设中提及的术语进行简单解释，并对网站的由来和发展进行讨论。

3.对自己设计的网站从设计理念到制作的过程进行详细分析.4.使用Dreamweaver+Flash+photoshop 等软件的设计方式进行解析

.5.就网站的设计与制作提出自己的观点以及建议。

关键词：网站 设计工具 设计方案 创意 风格

Static web design and production

Abstract

This website design and production, with the method of software engineering to process the analysis and research, this paper main work concentrates in:

1.The paper to web page is mainly to the Internet's history and development, and a review of the definition and characteristics of web pages is expounded, and the website design process using the tools and techniques of simple introduction.2.The website construction mentioned in terms of website, and simple explanation of the origin and development are discussed.3.For the design of your own website from design concept to making process were analyzed.4.Use Flash +Dreamweaver + photoshop software design methods are analyzed

5.Just website design and facture put forward its own views and Suggestions

第1章 绪论

随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越多的职业需要具有计算机应用技能型人才。掌握计算机是职业的需要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识。

1.1Internet的历史与发展

Internet最早来源于美国国防部高级研究计划局DARPA(Defense advanced Research Projects Agency)的前身ARPA建立的ARPAnet，该网于1969年投入使用。从60年代开始，ARPA就开始向美国国内大学的计算机系和一些私人有限公司提供经费，以促进基于分组交换技术的计算机网络的研究。1968年，ARPA为ARPAnet网络项目立项，这个项目基于这样一种主导思想：网络必须能够经受住故障 的考验而维持正常工作，一旦发生战争，当网络的某一部分因遭受攻击而失去工作能力时，网络的其它部分应当能够维持正常通信。最初，ARPAnet主要用于 军事研究目的，它有五大特点：

⑴支持资源共享；

⑵采用分布式控制技术；

⑶采用分组交换技术；

⑷使用通信控制处理机；

⑸采用分层的网络通信协议。

第四篇：静态网页设计与制作 实训报告

静态网页设计与制作

实训报告

这一周我们进行了为期一周的静态网页设计与制作的实训。在这一个星期中我感触很多，无论是从网站的刚开始的主题的确定设计还是后期的网站的发布与测试。感觉又学到了很多新的东西。

从小到大，在自己的心底就有个音乐梦想。我喜欢唱歌，喜欢跳舞，小的时候学过电子琴，上初中后父母认为学业更加要紧，于是所有与音乐有关的东西通通不被再提起。但是自己还是仍旧喜欢着音乐。上大学之后，自己终于可以重新“正大光明”地重新提起音乐了，于是想制作一个音乐网站的念头就在自己的脑海中闪现着。

我一直比较喜欢的华语男歌手是周杰伦，在上大一的那个10月份，周杰伦照例出着专辑，专辑的名字却很让人耐人寻味，《跨时代》，这我才突然意识到，从小学开始，周杰伦出道10年的十张专辑整整陪我走过了小学、中学的时光。于是在这次比赛中想制作一个关于周杰伦出道十年纪念的这样一个音乐网站。下面就让阐述下我制作这个网站的整体构思和具体设计方案。

关于网站的框架结构：

在制作之前，我在网上搜索过许多周杰伦的官方网站，例如周杰伦中文网，周杰伦中文音乐网之类的。我发现他们制作时框架紧凑明晰，同时也包括了几个音乐网站必须具有的模块。于是，得到借鉴，我在我的主页上面也就添加了“杰

迷必知”、“杰伦贴图”、“杰伦影音”、“每日杰讯”、“歌迷会通道”这样五个模块。在添加这五个模块的时候，我不像一些很正式的网站，模块与模块之间凑得很紧，我尝试了下自由、随机的排放。因为我做的是一个音乐兼娱乐的网站，想让网友们怀着轻松愉悦而不是严肃的心情来看我的这个网站。

关于网站的色彩搭配：

这次制作的网页是主要关乎于歌手周杰伦，访问的人群绝大多数会是周杰伦的粉丝，也绝对是时尚范儿，因此网页的主色调我采用了永不衰竭的经典黑白色调，再者黑白搭配这种反差很大的撞色能够给人很大的视觉冲击力。中间一些板块的边框我选择了用玫红色，玫红色可以提升整个网页的活泼，使黑白色调的网页看起来不死板，严肃而不失华丽。

关于网站的图片：

网页的logo我分为了两个部分，一面是白色背景的10th周年纪念logo，另一面是周杰伦弹着贝斯转动的画面，这个画面是周杰伦超时代世界巡回演唱会的开场秀，超时代演唱会是对杰伦出道十年来的一个总结，因此我认为这个画面做为纪念杰伦出道十年网站的logo是很不错的。

网站的所有的图片处理在互联网上下载的以外，还有相当大的一部分是下载下来以后处理过的。我处理图片的时候不仅用了firework8，还用了photoshop和美图秀秀。在插视频的时候由于只能插flv格式的，因此还下载了转码器。插

入视频时老师说过时间不宜太长，否则不利于网页打开的速度，于是就用了会声会影x2进行视频编辑和合成。

正文主体部分分为5个模块

第一个模块“杰迷必知”，左边是杰伦的两张图片，一张是杰伦正面拍摄，另外一张是背面拍摄。两张图片之间的转换运用了“鼠标经过图像”这一基本技术，是网友们在视觉上全方位了解他。图片的右边附着杰伦的简介，在右下角可以点击“更多”来查看杰伦更多的详细资料。

第二个模块“杰伦影音”，左方和下方附着的是杰伦专辑和演唱会上的精彩照片，在模块的右前方，则简要介绍了周杰伦出道十年来所发行的所有音乐专辑，所举办的所有演唱会和所有所参加拍摄的或者自己导演的所有电影的名字。使网友们更加有兴趣深入了解。

第三个模块“杰伦贴图”，我之所以把这两个模块放在一起，是因为它们之间的联系比起其他模块更加紧密。因为杰伦的贴图不仅仅是周杰伦的个人写真，更多的是他专辑封面，演唱会现场照和电影剧照。因此在这一模块左边，我选择了一张动态的图片。这张动态的图片是由10张小图片组成的，每一张小图片都是他出道10年来那10张专辑的封面图的头像。在这张动态的图片中，歌迷们看到的是10年前的周杰伦从一个青涩的大男孩长成了一个成熟的男人。而用音乐专辑封面头像则更加体现出这个成功的创作型音乐人本质的回归。

第四个模块“每日杰讯”，歌迷们想知道更多关于杰伦的最新资讯，想与他拉近距离，那么作为音乐网站，每日资讯便是必不可少的一个模块。为了使资讯看起

来方便，于是便运用了层，然后调出时间轴，简单的做了一个文字向上运动的一个动画。

第五个模块“歌迷会通道”，看了每日杰讯的歌迷们知道了周杰伦的近期活动安排行程，想参加一些和杰伦有关的活动，那么进入歌迷会将会是一个不错的选择。歌迷会通道提供了全国以及海外共32个通道，歌迷们可以看自己的地理情况就近参加，这也给歌迷和杰伦互动中间架起了一座桥梁。模块的右边用的是杰伦高清写真，图片充分的体现出杰伦深爱着他的歌迷。还未加入歌迷会的粉丝们也可以点击右下角的“加入我们”加入歌迷会。

关于网站链接

这个星期我又重新整理了自己的网站，将它更加美化。

现在网站一共五个页面，分别是“新闻”“资料”“图片”“资源”和“电子杂志”等。在“资料”链接的页面中，网页的上一部分用大图和文字采用图文混排的方式，下部分将层嵌入到图片中加入文字做了个简单的文字向上运动的效果。网页的全部文字都在详细介绍网站的主人公周杰伦。

在“图片”链接的页面中，主要就贴一些周杰伦的各种图片。第一部分用了代码marquee，使四张图片从左到右运动。中间有一张大图片是周杰伦各个镜头的头像照。紧接着是周杰伦新专辑的照片和镜头。最后一个头部分是杰迷会的会服的照片和介绍，网站正式做成以后可以链接至淘宝。

在“资源”链接中插入的视频是我在周杰伦《2011超时代世界巡回演唱会》上截取的，我个人认为这段视频能够生动记录着周杰伦出道10年来给歌迷朋友们

带来的巨大的视听盛宴，无论是在专辑，电影还是演唱会上。我的不少朋友看到我截的这段视频都说深有感触，甚至有点小感动，原来杰伦的歌已经默默陪我们走过十年。我期待他的歌能够陪伴我们走过下个十年，下下个十年……

最后一个链接页面是“电子杂志”。这个页面主要讲周杰伦最近推出的新专辑。整个页面用了图文混排的方式对外展示新专辑的热卖点，并且有预购的系统，这样可以帮助网站盈利。

心得体会

经过一周的静态网页设计与制作的实训，让我懂得了很多。首先是做什么事情之前脑袋里面都要想好，都要出现大致的轮廓。在开始制作网站之前最重要的是网站的设计，大到网站的整体构思整个框架设计，小到一张图片的和一段文字的摆放位置。

接下来是自己对颜色和美的感知。互联网上发布的的网站总是让人看起来很舒服。不仅是颜色搭配还有布局还有动态效果和静态的结合。这总是在提醒我，制作网页绝对不是一项闭门造车的活动。平时和自己的好朋友多讨论，让很多人来给你的网站给些建议和意见都是不错的。除了这些之外，自己也要多看书，多看些和自己要制作的网站主题相关的资讯，多了解时下最流行的时尚元素。

网站的最终目的是为了盈利，因此我在建立网站制作网页的时候，也专门有订购周杰伦最新专辑和周杰伦国际后援会的会服的通道。这些直接链接到淘宝，然后开始从事电子商务活动。

最后，通过一周的实训让我懂得了，为人做事一定要谨慎细心。同时老师们

传授给我们知识时的耐心也值得我学习。我相信这次实训会为我以后的工作和学习奠定良好的基础。最后，真心地说一句：“老师，您辛苦了~！”

第五篇：《静态网页制作与素材加工实训报告》

山西工程职业技术学院 《静态网页制作》 实训报告书

系别：计算机工程系 专业：计算机网络 设计班级：网14班 姓名：张静龙

指导教师：乔文彪常娟

2012年12月27日

一、指导教师

乔文彪常娟

二、设计目的与要求

此次的网站设计使我们必须具备有：

（1）色彩构成、（2）图形、图像素材的获取与编辑处理、（3）音频、视频、动画素材的获取和处理、（4）简单数据库设计、（5）Dreamweaver软件的应用等相关知识。

本次《静态网页制作》《网页制作》设计可以培养我们的创新能力，把所学理论与实际操作紧密结合起来，提高其独立解决问题的能力。

三、设计内容、过程以及设计效果

1、设计内容：

我此次设计的网站主题是教育类网站，名为《思科网络学院》，设计中包含了4个导航信息，多个二级页面以及少许的三级页面，题型资料可供下载使用。

在此次期间主要是通过在网上搜集了相关的素材（题库以及各种页面效果的代码等）以及从图书馆借阅相关的书籍来进行对个人站点效果的设计。本次设计的网站主要是用来帮助大家快速了解思科网络学院的最新动态以及学习到思科网络知识，由于站点的容量有限，在这里我总结了几种学习思科网络的方式方法和经典题型。网站的设计来源主要是参考《思科网络学院》和《思科网络学习空间》两大网站，其中包含思科各种教程以及题库，在我的网站设计中也对这两个网站

进行了链接。

2、设计过程：

1、首先分析站点的设计思路及方法。

首先确定了自己的设计思路是思科网络学院，为了完成本次设计会用到相应的资料和素材，而网络和图书馆为我们提供了信息来源。

2、网站架构的确定以及目录链接的确定 架构的设计用到了word，网站的目录确定为 首页、概述、课程介绍、工具和资源、思科网络学院在中国5个导航信息栏，以及设计了各级页面中的导航信息。

链接则是由大量的二级页面，少量的三级页面，文本文档以及各种外部链接组成。

3、配置服务器及站点建立 开始进行配置服务器及站点的建立。本次建立的站点名为cisco，为防止站点目录下出现解析读取错误，所有目录下的所有文件均采用英文名字命名。

4、网站各级页面的设计 本次设计使用的是PS 7.0 专业绘图软件，通过使用PS的各项功能来设计网站的各级页面（一级页面，二级页面）。

5、网站各种标志的设计 此次网站logo的设计主要是模仿官方logo，然后再加以修饰。

6、网站导航及板块设计、版权信息设计 导航栏的设计主要用到的技术是PS中圆角矩形框工具以及文字工具进行设计，版权信息则是参考教材中的格式进行设计。

7、切片制作及各级页面的实现 通过PS的切片功能对设计好的全图像页面进行切片，然后通

过存储为Web格式来生成html格式的网页。

8、首页动态展示栏以及时钟的设计

完成上面的全图像页面设计后，就开始用Dreamweaver软件对首页进行动态设计。首先是从网上搜索到代码用以实现动态图片展示栏和时钟的效果。之前切片切好的页面用来做插入时钟代码的时候，结果造成网页拥挤，后来又重新进行切片，插入背景，然后再放入时钟代码，效果就做好了。

9、网页元素添加及格式设置

然后对首页中的图片滚动进行设计，在这里用到了书上相应的代码，至此一个网站的首页就完成了。在二级页面则是用到了大量的嵌入式框架，来对文字进行编辑。在其中一个二级页面（思科网院在中国）中用到了弹出式信息栏来显示各省思科网院的情况。

10、站点各级页面的链接添加及测试

对做好的各级页面进行链接，在这里可以用到库，避免了繁琐的步骤，最后测试网站。

3、设计效果：

在此次设计中使用的效果有：

Dreamweaver：动态信息展示栏、Flase动画、多次使用嵌入式框架、时钟、动态滚动图片、链接、弹出式信息栏、插入表格、背景，PS：切片工具、插入圆角矩形框、横排文字工具、魔棒、插入图片，渐变工具等。

四、设计地点与时间安排：

时间：第17-18教学周地点：实训楼