简单网页制作.docx
《简单网页制作.docx》由会员分享，可在线阅读，更多相关《简单网页制作.docx（90页珍藏版）》请在冰豆网上搜索。
简单网页制作
简单网页制作
第一章
网页制作概论
1.1Internet与网页
我们经常在网络上通过输入网址浏览各种网页，那么究竟什么是网页呢？
网页实际是一个文件，它存放在世界某个角落的某一台计算机中，而这台计算机必须是与互联网相连的。
网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序（详见“域名系统”），网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，并最终展示到你的眼前。
1.2网页的基本要素
文字与图片是构成一个网页的两个最基本的元素。
你可以简单的理解为：
文字，就是网页的内容，图片，就是网页的美观。
除此之外，网页的元素还包括动画、音乐、程序等等。
如果想了解更多的话，请参考“商业建站指南”的“网站的要素”。
Ø文字
文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，因此，当用户浏览时，可以很快的展现在用户面前。
另外，文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载，便于以后长期阅读，也可对其进行编辑打印。
但是没有编排点缀的纯文字网页，又会给人带来死板不活泼的感觉，使得人们不愿意再往下浏览。
所以，文字性网页一定要注意编排，包括标题得字型字号，内容的层次样式，是否需要变换颜色进行点缀等等。
1．标题
一个网页通常都有一个标题，表明本网页的主要内容。
标题是醒目，是吸引浏览者能否注意的一个关键，因此对标题的设计是很重要的。
2．字号
网页中的文字不能太大或太小。
太大会使得一个网页信息量变，太小又使人们浏览时感到费劲。
一个优秀网页中的文字，应统筹规划，大小搭配适当，给人以生动活泼之感觉。
3．字型
在网页适当的位置采用不同的字体字型，也能使网页产生吸引人的效果。
应该注意的是在报刊上变换字体字型非常普遍，它可以在不同的地方使用不同的字型。
但在网页制作上却要慎重。
因为有些美丽的字型在制作网页的计算机上有，但将来别人浏览你的网页时，浏览者的计算机上未必装有这种字体。
这样浏览者就无法得到你预想的浏览效果，甚至适得相反。
如果只是标题或少量的文字，可以将采用的特殊字体制作成图形方式，就可避免其他浏览者看不到的尴尬局面了。
当文本内容较多时。
可以利用表格形式来实现。
Ø图形
这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画。
一幅优秀的网页除了有能吸引浏览者的文字形式和内容外，图形的表现功能是不能低估的。
网页上的图形格式一般使用JPEG和GIF，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示。
图形在网页中通常有如下应用。
1．菜单按钮
网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两种形式，由此可以转入不同的页面。
2．背景图形
为了加强视觉效果，有些网页在整个网页的底层放置了图形，称作背景图。
背景图可以使网页更加华丽，使人感到界面友好。
但由于这是一个比较大的图形，需要占据较大的空间，致使网页的显示速度明显变慢，所以，近期的网页以及比较著名的访问量比较大网站一般都不设置背景图形。
Ø链接标志
链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。
通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。
链接的标志有文字和图形两种。
制作一些精美的图形作为链接按钮，使它和整个网页融为一体。
Ø交互功能
Internet区别其他媒体的一个重要标志就是它的交互功能。
例如在商务网站的页面上，人们经过浏览，选择了某一个产品，就需要将自己的决定通过Internet告诉这个网站，网站能够自动对该产品的数据库进行检索，及时回应有还是没有，数量、规格、价格等信息。
如果用户选择确定，那么网站能够返回确认信息。
像这种交互功能其他媒体是无法比拟的。
通常网页的交互功能都是利用表单来实现的。
表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。
1.3网页设计的原则
网页是网站的基本信息单位，是WWW的基本文档。
网页是由文字、图片、动画和声音等多种媒体信息以链接组成的。
网页即是设计者综合素质的体现，也是制作者使用网页设计软件水平高低的体现。
要是网页看上去漂亮、舒适，除了有好的理念外，还离不开美术、色彩和审美等方面的基础知识，并要遵循一系列必要的原则。
在网页设计制作的过程中，需要遵循的艺术原则主要有：
Ø对比原则：
两事物的相对比较称为对比。
通过对比，双方各自得特征更加鲜明，使画面更富有效果和表现力。
对于界面设计而言，通过对比可以在界面中形成趣味中心，或者使主体从背景中突显出来。
常用的对比方法有以下8种：
大小的对比、明暗的对比、粗细的对比、曲线与直线的对比、水平线与垂直线、质感的对比、位置的对比、多重对比。
Ø协调原则：
协调原则是相对于对比原则而言的。
所谓协调，就是将界面上的各种元素之间的关系进行统一处理，合理搭配，使之构成和谐统一的整体。
对于艺术，协调被认为是使人愉快和舒心的要素之一。
协调包括同一界面中各种元素的协调，也包括不同界面之间各种元素的协调。
协调主要体现在4个方面：
主与从、动与静、入与出、统一与协调。
Ø平衡原则：
界面是否平衡是非常重要的，例如在一个介绍电脑的界面上，将一台电脑放在界面的左边，看起来似乎要倒向右边；但在界面的右边设计这安排了粗体的标题和文字，恰好起到了支撑作用。
Ø趣味原则：
在界面中注意“趣味性”可以“寓用于乐”。
除了运用形象、直观、生动的图形优化界面来提高趣味性以外，还可以利用比例、强调、变化率、规律感等方法提高趣味性。
静态网页的设计与制作的几点建议：
1.在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。
2.通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。
静态网页仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分。
3.一个好的网站首先是内容丰富，其次就是网页设计美观。
对于网页的外观设计，提供以下建议：
（1）不要先决定网页的外观，然后迫使自己去适应它，应该根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。
（2）每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。
须知，在一页的上部是显眼而宝贵的地方，不要只放几个粗大的字或图片。
（3）切勿以800×600以上的分辨率设计网页，常用的分辨率是640×480及800×600。
现在国内的站点基本上都是800×600，但是如果主要是面向国外访问者的站点，建议使用640×480。
（4）不应在每页中插入太多的广告。
相信任何访问者都不会喜欢浏览尽是些广告的网页，要考虑该页内容与广告的比例，广告太多，只会令人烦厌。
（5）不要每页都采用不同的墙纸，以免每次转页时都要花费过多的时间去下载，采用相同的底色或墙纸还可以增强网页一致性，以树立自己的风格。
（6）底色或墙纸必须与文字对比强烈，以易于阅读。
这并不是要求永远使用鲜亮的背景搭配深色的文字，但深色背景常要求与主题配合，有较多的顾虑，如果网页是文章式或是包含大量文字，不妨在底色与文字的搭配上下些工夫，力求让访问者能够舒适地阅读网页。
（7）不要把图片白色当作透明，要知道别人的系统不一定把内定底色设为白色，解决的办法除了真的把该网页的底色设为白色之外，最好还是用图片编辑工具将图片设为透明颜色。
第二章
Dreamweaver简介
2.1HTML简史
HTML的英文全称是HypertextMarkupLanguage，直译就是超文本标记语言，它由W3C组织商讨制定。
HTML是一种专门用于描述Web页文档结构的标记语言，用于描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。
HTML与操作系统平台的选择无关，只要有Web浏览器就可以运行HTML文件，显示网页内容。
HTML文档由文本、格式化代码和导向其他文档的超链接组成。
通过浏览器看到的网站都是由HTML构成的，HTML文件可以用记事本、写字板等编辑工具来编写，用HTML编写的文件的扩展名为.html或.htm，它们是能够被浏览器解释现实的文件格式。
HTML由标记（Tag）组成，通过标记来确定网页的结构和内容。
下面是一个典型的HTML文件，它的扩展名为.htm（或.html）：
你好，万维网！</p><p>
你好，万维网！