关于网页制作的相关基本问题
摘要：随着网络的发展，网页的制作越来越重要。网页制作要能充分吸引访问者的注意力，让访问者产生视觉上的愉悦感，就必须要把网页设计和网页制作结合起来。要想制作出理想的网页，除了要有一定的网页制作基础外，还要正确选择开发工具。在本文中，简单介绍了网页制作的相关技术、网页制作的一般方法过程及应该注意的问题。初学网页制作，要注意网页布局、网页色彩搭配及线条、文字、目录等细节的处理，并不断修改、完善。
关键词：网页制作；一般方法过程；网页布局；色彩搭配。
一、网页制作的相关技术
（一）常用制作工具：
1.Dreamweaver：Dreamweaver是美国Macromedia公司开发的一款集网页制作和管理网站于一身的可视化网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化的网页开发工具，是最受专业设计者欢迎的网页制作工具之一，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。其中重点介绍CS5的新功能：
①CSS检查新增功能，以可视方式显示详细的CSS 框模型，轻松切换 CSS 属性并且无需读取代码或使用其他实用程序。
②与 Adobe BrowserLab 集成新增功能，使用多个查看、诊断和比较工具预览动态，网页和本地内容。
③PHP 自定义类代码提示新增功能，为自定义 PHP 函数显示适当的语法，帮助您更准确地编写代码。
④CSS Starter页增强功能，借助更新和简化的 CSS Starter 布局，快速启动基于标准的网站设计。
2.Frontpage是微软公司出品的一款网页制作入门级软件，可以在可视化的方式下简单直观的实现HTML几乎所有的功能，例如：新建和修改一个网页、新建一个Web站点，在网页中插入图片、多媒体等众多功能。FrontPage使用方便简单，会用Word就能做网页，该软件结合了设计、程式码、预览三种模式。也可一起显示程式码和设计检视与Microsoft Office各软件无缝连接，良好的表格控制能力，继承了Microsoft Office产品系列的良好的易用性。但 Frontpage 也有其不足之处：
①浏览器兼容性不好，做出来的网页，用 Netscape 往往不能正常显示； ②生成的垃圾代码多，也会自动修改代码，导致在某些情况下极为不便； ③对DHTML的支持不好。微软在2006年年底前停止提供FrontPage软件。 3.Flash：Flash是由Macromedia公司开发的一款优秀的网页动画开发软件，从简单的动画到交互式Web应用程序，它使用户可以创建任何作品。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其它奇特的效果。2012年8月15日，Flash退出Android平台，正式告别移动端。
（二）材料的选取
1.先大后小
先把大的结构设计好，然后再逐步完善小的结构设计。 2.先简单后复杂
先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。 3.多灵活运用模板，提高制作效率
二、网页制作的一般方法过程
（一）网站的结构
1.网页页面的创建
①在Dreamveaver“文件－新建－常规－基本页－HTML”，这样就建好了一个页面，英文版的默认的文件名为untitled.htm，htm表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。
注：网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。这也就是主页，上传后打开网页默认连接到此页。
②在标题空格里输入网页名称，点击修改－页面属性，打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背景图像，超级链接的颜色（一般默认即可）。 ③此时光标位于左上角，可输入一句话，如“欢迎来到我的主页”。选取文字，用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间等。
2.栏目的设置
网站的题材确定后，收集和组织相关的资料内容。为了吸引网友们来浏览网站，需将吸引人的内容放在最突出的位置，让好东西在版面分布上占绝对优势。
栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。一般的网站栏目安排要注意：
①紧扣主题，主题栏目个数在总栏目中要占绝对优势，这样主题突出，容易给人留下深刻印象。
②设一个最近更新栏目或网站指南栏目，可以照顾到常来的访客，并帮助初访者快速找到他们想要的内容，让主页更人性化。
③设定类似论坛、留言本可以双向交流的栏目，可以让浏览者留下他们的信息。或者留一个\"Email me\"的站点，更具亲和力。
（二）网站的风格
网站风格是网站页面设计上的视觉元素组合在一起的整体形象，展现给人的直观感受，包括网站的配色、字体、布局、内容等因素。
1.协调运用颜色
不同的色彩影响着人们对网站的第一感觉，一般旅游和园林类型的网站使用绿色系比较多，蓝色则被誉为是企业色确实很多企业和政府机关都偏爱使用沉稳而大方的蓝色。
一个网站必须有一种或两种主题色，既不至于让客户迷失方向，也不至于单调、乏味。通常情况下，一个页面内尽量不要使用超过4种色彩，太多的色彩容易让人感觉没有方向、没有侧重。当主题色确定好以后，考虑配色时，一定要考虑其他配色与主题色的关系，要体现什么样的效果。
2.适当选择线条和形状
文字、标题、图片等的组合，会在页面上形成各种各样的线条和形状。这些线条与形状的组合，构成了主页的总体艺术效果。必须注意搭配好这些线条和形状，才能增强页面的艺术魅力。直线条的艺术效果是流畅、整齐的，直线和矩形在页面上的重复组合可以呈现井井有条的视觉效果。一般应用于比较庄重严肃的主页题材。曲线的效果是活跃的，具有动感，曲线和弧形在页面上的重复组合可以呈现轻快、富有活力的视觉效果。一般应用于青春、活泼的主页题材。把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力，使页面呈现更加丰富多彩的艺术效果，但处理不好会产生凌乱的效果。
3.均衡的分割版式：
在网页设计中，页面因为内容元素的需要被分割成很多区块，区块之间的均衡就是版式设计上需要着重考虑的问题。一幅好的、均衡的网页版面设计，是布局、重心、对比等多种形式原理创造性全面应用的结果。传统网页设计的版式控制都是在不超越大众显示器分辨率宽度的前提下，依照内容多少纵向延展设计。而如今流行的产品型网站，更倾向于在一屏内表达最主要的东西，尤其是首页，尽量不出现滚动条。
4．颜色搭配
在网页设计中，如何配色并不固定，只是与人的视觉有关。比如冷色基调，就大都以冷色，如要用暖色就要多加注意，可能会影响视觉，使游览者眼睛不适。亮色的使用更吸引人的眼球，但极难搭配。比如在过节时，各大网站为了加强温馨度就多用红黄橙来渲染。
（三）版面布局：
版面指的是浏览器看到的完整的一个页面。因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现不同尺寸。布局，是以最适合浏览的方式将图片和文字排放在页面的不同位置。经常用到的版面布局形式有: 1.\"T\"结构布局。即页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明，缺点是规矩呆板，如果细节色彩上不注意，很容易让人感觉乏味。
2.\"口\"型布局。即页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大，缺点是页面拥挤，不够灵活。
3.对称对比布局。即采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。
（四）文字图片的运用：
1.字体与字号
在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体，而你指定的字体在浏览者的机器里并不一定能够找到。
大小可以用不同的方式来计算，例如磅或像素，建议采用磅为单位。最适合于网页正文显示的字体大小为12磅左右。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。小字号容易产生整体感和精致感，但可读性较差。
2.行距
行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容。
3.文字的整体编排
页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。在网页设计中，字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。文字编排有四种基本形式：
①两端均齐：文字从左端到右端的长度均齐，显得端正、严谨、美观。 ②居中排列：在字距相等的情况下，以页面中心为轴线排列，产生对称的形式美感。
③左对齐或右对齐：使行首或行尾自然形成一条清晰的垂直线，易与图形配合。这种编排方式有松有紧，有虚有实，能产生一种节奏与韵律的形式美感。 ④绕图排列：将文字绕图形边缘排列，令人感到融洽、自然。
三、网页制作过程中应该注意的问题
（一）文件管理
为了管理方便，我们把图片放在“images”文件夹内。如果图片少，也可以放在站点根目录下。注意文件名要用英文或用拼音文字命名而且使用小写，不能用中文，否则会出现一些麻烦。
（二）栏目建立
在每个主目录下都建立独立的Images目录。一般来说，一个站点根目录下都有一个默认的Images目录。将所有图片都存放在这个目录里不方便，所以为每个主栏目建立一个独立的Images目录是为了方便维修和管理。
（三）目录
①目录的层次不要太深，不要超过3层； ②不要使用中文目录；
③不要使用过长的目录，不便于记忆； ④尽量使用意义明确的目录，便于记忆和管理。
（四）字体的输入
如要选取字体，选择字体中的最后一项：编辑字体列表。然后在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。注意：
①在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用，因为别人电脑上未装就看不到；
②在网页上打入空格的办法是：把输入法调为全角； ③在网页上换行的办法是：shift+Enter。只按Enter则为换段。
