网页制作学习.docx

网页制作学习.docx

《网页制作学习.docx》由会员分享，可在线阅读，更多相关《网页制作学习.docx（33页珍藏版）》请在冰豆网上搜索。

网页制作学习

通常简单的Logo比复杂的Logo容易记忆，符号化的Logo比自然图像更具说服力。

Logo的位置一般在左上角，这是视觉的焦点，第一眼往往看到的就是这里，Logo的尺寸通常控制在160*60px之内。

其次是网站标准色彩。

标准色彩是指体现网站形象和延伸内涵的色彩，就如家乐福的蓝色、麦德龙的黄加蓝。

网站给人第一印象来自网站的色彩感觉，确定网站的标准色彩是相当重要的一步。

建议使用一种标准色（主色），适当使用两种标准色，反对使用两种以上的标准色。

另外应从网站的服务对象出发，根据服务对象及网站的内容来确定标准色彩。

如果想创建一个儿童网站，那么就可以选择鲜艳的颜色为标准色彩。

如果要创建一个关于茶叶的网站，则可以使用清新的绿色为标准色彩。

在单一的色彩上加上各种小图案的点缀，以及相近色的使用，完全可以创造出绚烂多彩的网页出来。

在制作网页时，使用非默认字体只能用图像的形式。

如果你使用的特殊字体，而别人的pc里没有安装这种字体，那么你辛苦设计制作便付之东流。

提示：

一般网页的字体是宋体，为了体现站点的“与众不同”和特有风格，也可以根据需要选择一些特别字体。

例如为了体现专业可以使用粗仿宋体，体现设计精美可以用广告体，体现亲切可以用手写体等。

而制作好网页后，还有一系列的后期工作，如网站上传与宣传、更新与维护网站内容等。

网站宣传标语也可以说是网站的精神，网站的目标。

可以用一句话甚至一个词来高度概括，类似实际生活中的广告金句。

如雀巢的“味道好极了”，以及鲜橙多的“多c多漂亮”等。

由于每个人的显示器分辩率不同，所以同一个页面的大小就能出现640*480px、800*600px或1024*768px等不同尺寸。

目前主要考虑800*600px的用户，在实际制作中，应将网页的内容宽度限制在778px以内，（可以用表格或层来限制）。

这样在用800*600px的显示器进行浏览时，除去浏览器左右的边框后，刚好能完全显示出网页的内容。

2。

、网页制作基础知识

1.2..1、IIS的安装与简单配置

首先，在使用Dreamweaver创建网页之前，必须先安装IIS服务器和创建站点。

因特网信息服务器IIS（Intemetinformationserer）是Microsot公司的一种集成了多种Intemet服务（如www服务、FTP服务等）的服务器软件。

也就是说安装IIS主要是创建人Web服务器FTP服务器。

通过Web服务器用户可以将各种信息有效直观地发布给局域网中的内部用户或Intemet网上的用户。

通过FTP服务器可以在服务器和客户机之间快速地传送文件。

IIS目前最新版本为IIS6.0，一般用于WindowsServer2003操作系统。

对于运行WindowsNT操作系统或WindowsXP操作系统则可以选用IIS5.0。

WindowsXPSP2自带有IIS5.0。

通过IIS，可以在Intemet或Intemet（企业内部网）上非常容易发布网页，包括以htm（或htmll）、asp等为扩展名的网页。

对于网页制作人员来说，可以通过IIS对网页进行调试，查看以asp为扩展名的网页内容。

为企业员工提供WWW服务，FTP服务及SMTP服务，实现无纸办公。

启动Windows操作系统后，单击任务栏的开始按钮，在弹出的开始菜单中选择控制面板“命令”，打开控制面板窗口。

在控制面板窗口中

双击添加或删除程序图标，弹出添加或删除对话框。

在其中单击“添加/删除Windows组件”按钮，弹出Windows组件向导对话框。

在该对话框中选中Internet信息服务（IIS）复选框。

单击“详细信息”按钮。

弹出Intemet信息服务（IIS）对话框。

选中“文件传输协议（FTP）服务”复选框。

单击确定按钮，返回Windows组件向导对话框。

单击下一步按钮，弹出“正在配置组件”和“插入磁盘”对话框，这时系统要求插入WindowsXPProfessionalservicePack2CD光盘。

将WindowsXPProfessionalservicePack2CD光盘插入光驱后，单击确定按钮。

系统即开始安装IIS。

安装完成后，在弹出“完成Windows组件向导”对话框中单击完成按钮完成安装。

这时系统将自动创建一个默认的Web站点和一个默认的FTP站点。

用户也可以创建自己的Web站点和FTP站点，并修改和设置站点的属性。

单击任务栏的开始按钮，在弹出的开始菜单中选择控制面板命令，打开控制面板窗口。

双击控制面板窗口中的管理工具图标，打开管理工具图标窗口。

双击Internet信息服务图标，打开Internet信息服务窗口，在Internet信息服务窗口中，可以看到已创建好FTP站点，网站和默认SMFP虚拟服务器等选项。

单击网站选项前的+号按钮，展开“网站”选项。

在默认网站选项上单击鼠标右键，在弹出的快捷菜单中选择“属性”命令。

弹出默认网站属性对话框。

在该对话框中可以设置网站的名称、IP地址及链接端口等属性，这里保持默认值。

单击主目录选项卡。

在该选项卡中可以设置网页存放的位置，其默认路径为“C\inetpub\wwwTOOt”。

单击浏览按钮。

在弹出的浏览文件夹对话框中可Web选择站点网页的存放位置。

这里选择D\Mysite为站点存储的位置。

单击确定按钮，返回默认网站属性对话框。

单击文档选项卡。

在该选项卡中，可以设置Web站点的主页名，这里默认首页文档为defauithtm、defauitasp、iisstartasp。

网站首页一般为index,htm或index.asp。

单击添加按钮。

在弹出的添加默认文档对话框中，可以输入要添加的添加默认文档名称。

单击确定按钮，返回默认网站属性对话框。

再单击确定按钮即可。

1.2.2站点的基本操作

创建站点是进行网页制作之前的必要工作，利用站点的管理功能可对站点中的文件进行管理或测试。

Dreamweaver8提供了本地站点，远程站点和测试站点3类站点。

用户可通过本地站点和远程站点在本地磁盘和web服务器之间传输文件。

测试站点则主要对动态页面进行测试时使用，是Dreamweaver处理动态页面的文件夹。

只有使用此文件夹，才能在网页中制作动态内容，并在工作是链接到数据库。

所以，在不制作动态页面，可以不对测试站点进行配置。

一般上传或下载网站内容都使用专门的上传下载软件（如LeapFTP和CuteFTP及FlashFXP等）进行。

因此远程站点一般不用进行配置。

所以在这里我们只要学会如何建立本地站点。

选择开始菜单下的所有程序命令。

在弹出的所有程序子菜单中选择Macromedia命令。

再在弹出的子菜单中选择Macromedia命令Dreamweaver8命令启动Dreamweaver8。

选择站点菜单下的新建站点命令。

弹出未命名站点1的站点定义为对话框。

在本地信息栏站点名称文本框中输入站点的名称，如“Mysitel”在“本地根文件夹”文本框中输入站点内容存放的位置，输入D.Mysitel。

在分类列表中选中测试服务器选项。

在“测试服务器”栏的服务器模型下拉列表中选中ASP\VBScript选项。

在访问下拉列表中选中本地网络选项，在弹出的对话框中选中自动刷新测试文件列表复选框，其余保持默认设置。

单击确定按钮，完成站点的创建的。

在Dreamweaver8中可以对站点进行各种编辑操作，如修改站点名称、本地站点根文件夹等。

这里我们就前面创建的站点进行修改。

选择站点菜单下的管理站点命令。

弹出管理站点对话框，在其中选中需要编辑的站点，如这里Mysitel选中站点。

然后单击编辑按钮，弹出Mysitel的站点定义为对话框。

然后在对话框中即可对站点进行编辑，其操作过程和站点的创建基本相同，只要按提示进行操作即可。

选中站点名称后单击删除按钮，就可删除选中的站点。

1..2.3.网页文档的基本

在本节中我们要学会网页文档的基本操作，如创建网页文档，预览网页，保存及关闭网页等。

启动Dreamweaver8，选择文件菜单下的新建命令，弹出新建文档对话框，在常规选项卡的类别列表框中选择需要创建的网页类别后，右侧的列表中将显示相应类别的网页类型。

如选择基本页类别，则右侧显示基本页的网页类型。

基本页类别主要创建静态网页文档，如以htm为扩展名的网页。

在右侧基本页列表框中则选择所需创建的网页类型。

如这里选择HTML网页文档。

如果需要制作动态网页文档，则需在类别列表中选择动态页选项，在右侧的列表中选中ASP\VBScript选项。

在制作过程中要经常注意保存网页，以防停电或死机，同其他程序一样，按Ctri键即可对网页文档进行保存。

在对网页进行编辑后，可在浏览器中对网页显示效果进行预览。

（按F12）选择文件菜单下的在浏览器中预览命令，在弹出的子菜单中选择Iexplore6.0命令也可以对网页进行预览。

1..2.4.页面属性设置

创建网页后，需首先对整修页面的属性进行设置，如外观、链接等。

外观主要是指网页中文本采用的字体、字号、颜色，网页背景的颜色，网页背景图像等。

下面我们讲解如何设置网页的外观。

选择修改菜单下的页面属性命令。

在弹出的页面属性对话框中即可进行页面属性的设置。

在外观栏大小下拉列表框中可以选择页面中文本字体的大小，这里选择12。

保持其后的下拉列表中的单位像素（pz）。

单击文本颜色按钮，打开颜色选择器。

使用滴管工具选择一种颜色作为文本的颜色，如蓝色（＃0000FF）。

在背景颜色文本框中输入背景颜色，如“＃FFFFFF”（白色）。

单击背景图像文本框后的浏览按钮。

弹出选择图像源文件对话框。

在查找范围下拉列表框中选择站点所在文件夹，在文件列表中双击放置图像的文件夹，如“pic”。

然后在文件列表中选择需要的图像，这里选择“pagebg.gif”图像。

在站点下可以先创建一个专门放置图像及动画素材的文件夹。

然后事先将需要的素材放在其中，再执行插入图像等操作时，就可以很好的避免浏览网页时不能显示图像的问题。

单击确定按钮完成背景图像的设置，返回到页面属性对话框中。

在左边距文本框中设置网页页面与浏览器左边界的距离。

一般设置为0。

在上边距文本框中设置网页页面与浏览器上边界的距离，一般设置为0。

单击确定按钮即可完成设置。

链接是指超级链接文本初始显示的颜色，当鼠标指向它时显示的颜色及单击它后显示的颜色等。

打开页面属性对话框后，选择其左侧的分类列表中链接选项。

切换至页面属性链接对话框。

单击加粗按钮可以将链接文本加粗显示。

在大小下拉列表框中选择9选项，在其后的下拉列表框中选择点数（pt）选项。

在链接颜色文本框中输入链接文本初始显示的颜色（＃0000FF）在变换图像链接文本框中输入当鼠标指针位于时显示的颜色（＃663399）。

在已访问链接文本框中输入当鼠标单击链接文本后显示的颜色（＃FF0000）。

在活动链接文本框中输入当鼠标在链接文本上单击时显示的颜色（＃9900FF）。

在下划线样式下拉列表框中选择下划线显示的方式，如仅在变换图像时显示的下划线。

单击确定按钮即可完成设置。

1.2.5、用CSS统一页面风格

在设计网页时，常常需要对网页中的文本进行字体、颜色、大小、间距、风格及位置等属性的设置。

而且很多时候这些文本的属性却是相同的，逐一设置会是一个浩大的工程。

我们可以使用CSS来定义文本。

CSS即是层叠样式表，是Cascadingstylesheets的缩写。

将文本样式定义为CSS后，当要设置相应文本样式时，直接应用CSS样式就可以完成文本的设置了。

这样用起来就更方便了，不仅如此，它还对网页风格的统一也起了举足轻重的作用。

前面的页面属性设置就是通过CSS来实现的。

建立CSS，选择窗口菜单下的CSS样式命令，打开CSS样式面板，单击CSS样式面板底部的新建CSS规则按钮。

弹出新建CSS规则对话框。

在选择器类型栏中选中标签（重新定义特殊标签的外观）选项。

单击标签下拉列表框，选择要对其进行定义的HTML标签，如body。

在“定义在”栏中选中新建样式表文件单选项，单击确定按钮，弹出保存样式表文件为对话框。

在保存在下拉列表框中选择保存样式文件的位置（如站点下的pic文件夹）。

在文件名文本框输入样式文件的名称，如style。

单击保存按钮，弹出“body的CSS规则定义（在style.css中）”对话框。

在类型栏大小下拉列表框中选择12。

在其后的下拉列表框中选择像素（px）*.在分类列表中单击背景选项。

在右侧背景颜色文本框中输入＃F7F7F7，然后单击确定按钮完成样式的定义。

创建了CSS样式后，还可以对已有的样式进行编辑，修改样式中的某些属性的值，或增加、删除某些属性等。

在CSS样式面板中选中要编辑的样式名称，单击面板底部的编辑样式表按钮，弹出“body的CSS规则定义（）在stylecss）”对话框中，然后按创建新样式的方法修改相应的属性值，修改完成后单击确定按钮确定就行了。

如果要删除相应的样式或样式文件，则选中要删除的样式名称或样式文件名称。

然后单击“CSS样式面板底部的取消CSS样式表的链接”按钮即可删除。

应用CSS，定义好CSS样式后，如果在新建CSS规则对话框的选择器类型栏中选中标签（重新定义特定标签的外观）单选项。

或选中“高级（ID、伪类选择器等）”单选项创建的样式，系统就会自动进行应用，不需要网页制作人员手动应用，如选中“类（可应用于任何标签）”单选项创建了样式，就需要网页制作人员手动应用，其方法是，选中要应用样式的对象，在CSS样式“面板的”样式列表框中选中所需的自定义样式。

单击鼠标右键，在弹出的快捷菜单中选择“套用”命令即完成CSS样式的应用。

1..3.在网页中添加文本

1..3.1文本是网页的主体部份，是向浏览者传递有效信息的最主要的方式。

它虽然没有图像的多彩，也没有动画的强冲击力，但文本包含着最详尽的内容。

通过它，浏览者可以完完全全地明白制作者的心声。

在Dreamweaver中插入文本就如在记事本或word中操作一样，直接输入即可。

在Dreamweaver中输入文本唯有不同的是换行与空格。

也就是说，在编辑窗口中输入文本时，不会像word一样自动换行。

如果要换行，需要制作者按shift+Enter键手动换行，如果直接按Enter键则为分段。

如果要添加空格，需要将输入法切换到全角状态，然后按空格键即可。

如果不切换到全角状态，按Ctrl+shift+空格也可在文档中添加空格。

1..3.2.设置文本：

在通常情况下，绝大部分的文本都是通过事先定义的CSS来设置的，有个别的文本需要设置，则可以直接在属性面板中进行设置，选中需要进行设置的字体后，在属性面板中单击文本颜色按钮，在打开颜色选择器中选择红色，设置文本颜色为红色，设置颜色后，系统自动创建新的样式“STYLE”，并自动应用到所选文本上，选中“备注”二字，单击属性面板中斜体按钮可以设置文本为斜体，选中标题下的这排文字，单击属性面板中的居中对齐按钮可以使选中的文本居中对齐，单击左对齐可使文本左对齐，

1..3.3.插入特殊对象：

在制作版权信息时，常需要插入版权符号，首先将光标插入点定位到要插入版权符号的位置，选择插入菜单下的“HTML”命令，在弹出的子菜单中选择“特殊字符命令，在弹出的子菜单中选择“版权”命令，即可将版权符号插入。

要插入其他特殊符号如商标、注册商标、欧元等，可参照上述方法进行插入，另外，使用特殊的字体也可以制作一些特殊的符号，如输入大写的“J”，选中这个文本，打开属性面板，在“字体”下拉列表框中输入“Winedines”后按Enter确认，看到字母已显示为“笑脸”图型。

插入水平线：

使用水平线可以将多个对象进行分隔，使各个对象错落有致，其实在Dreamweaver中插入水平线也同样简单，首先将光标定位到要插入水平线的位置，选择插入菜单下的“HTML”命令，然后在弹出的子菜单中选择“水平线”命令即可插入水平线，选中刚插入的水平线，打开属性面板，在宽文本框中可以设置水平线的长度，在高文本框中可以设置水平线的高度，在对齐下拉列表框中可选择水平线的对齐方式，如“居中对齐”另外我们还可以设置水平线的颜色，选中水平线，单击编辑窗口左上角的“显示代码视图”按钮切换到代码视图中，将鼠标光标定位到size=1后，然后在鼠标光标所在位置输入“color=red”以设置水平线的颜色，完成后按F12进行预览，就可以看到水平线已娈成了红色，如果要使用水平线实现分隔线效果，可以用图像处理软件制作1px的线条来实现，如制作虚线条、双线条等，使分隔效果更美观。

在Dreamweaver中插入列表：

列表有项目列表和编号列表两种，列表常应用在条款或列举等类型的文本中，如文章列表、某某排名等。

插入项目列表，将要创建为项目列表的文本分段输入（即按Enter分段），然后选中所有文本，单击属性面板中的项目列表按钮，即可将所选文本设置为项目列表，插入边框列表：

首先选中需创建为编号列表的分段文本，然后单击属性面板中的编号列表按钮即可将所选文本设置为编号列表。

实际制作中要实现项目列表效果，一般都要用图像处理软件制作项目符号，再以插入图像的方式来实现，这样更美观多样。

1..4.图像及Flash的运用

1..4.1插入图像：

.在制作时，我们可以插入图片和Flash动画来丰富和美化网页，如果说文本是在向人们传递最详实的信息，而图像就起到了画龙点睛的作用，将要插入的图像自制到站点中存入图像的文件夹中，如站点下的tuxiangpic文件夹中，将鼠标光标定位到要插入的位置（可以是网页的任何位置，如层中、表格的单元格中），这里插入到第一排的第一个单元格中，单击“常用”插入栏上的图像按钮，弹出选择图像源文件对话框，在查找范围下拉列表框中找到tuxiangpic文件夹，在文件列表中双击要插入的图像bfp.GIF。

在弹出的图像标签辅助功能属性对话框的替换文本下拉列表框中输入替换文本“跳动音符”，然后单击确定按钮，图像即插入到网页中了。

将图片设置为网页背景：

首先将鼠标光标定位到要插入的位置，单击属性面板背景文本框后的单元格背景URL按钮，弹出选择图像源文件对话框，在文件列表中双击要插入的背景图像“bg_760.ipg”，即可将图像插入，并作为所选单元格的背景，表格是进行网页布局的重要工具，单元格是表格中的每一个小方格。

表格或单元格都可以设置背景图像，在有背景图像的单元格中还可输入文本，

1..4.2.编辑图像：

插入图像并选中图像后，可在属性面板中编辑图像的属性，如设置图像的大小、边框、对齐方式等，用鼠标左键单击选中要设置的属性的图像，在属性面板的宽和高数值框中，可设置图像的宽度和高度，默认为图像原始的大小，在属性面板替换下拉列表框中输入替换文本，如“笑迎各方宾客”，在“垂直边距”文本框中设置图像顶部和底部与文本间的距离，如“5”，在边框文本框中设置图像边框的宽度，单位为像素，如“0”，单击左对齐按钮设置文本的对齐方式为左对齐，单击对齐下拉列表框右侧的向下展开按钮，在弹出的下拉列表框中，选择左对齐选项，使图像放置在左边，右边绕排文本。

在图像上单击鼠标左键选中图像后，拖动四周黑色方块可调整图像大小。

按住Shift键拖动四个角上的黑色方块可成比例调整。

1..4.3.制作鼠标经过图像：

鼠标经过图像由原始图像和鼠标经过图像组成，当鼠标移动到原始图像上时会显示鼠标经过图像，鼠标移出图像范围时则显示原始图像，将鼠标光标定位到要添加鼠标经过图像的位置，选择插入菜单下的图像对象命令，在弹出的子菜单中选择“鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框，在该对话框中即可进行图像名称、原始图像、鼠标经过图像和替换文本等设置，在图像名称文本框中输入图像名称“Login”，单击原始图像文本框右侧的浏览按钮，弹出图像选择对话框，选择图像mouseover.gif，单击确定按钮，将图像“mouseover.gif”添加到插入鼠标经过图像对话框中，使用相同的方法将图像mouseover.2.gif添加到添加到鼠标经过图像对话框中，鼠标经过图像的两个图像应大小一致，如不一致Dreamweaver将自动调整鼠标经过图像原始图像大小一致，在替换文本框中输入替换文本登陆按钮，设置完成后单击确定按钮，关闭“插入鼠标经过图像”对话框，按F12键打开浏览器预览网页效果即可。

1..4.4.制作导航条：

导航条由图像或图像组组成，这些图像的显示内容随操作不同而不同，导航条通常为在站点上的页面和文件之间跳转提供一条简捷的途径。

制作导航条：

首先将鼠标光标定位到要插入导航条的位置，选择插入菜单下的图像对象命令，在弹出的子菜单中选择导航条命令，弹出插入导航条对话框，在项目名称文本框中输入导航条的名称，该名称将显示在导航条元件列表中，单击状态图像文本框后的浏览按钮，在弹出的对话框中选择图像文件，这里双击选择第一个图像，单击鼠标经过图像文本框后的浏览按钮，在弹出的对话框中双击选择移动到图像上时要显示的这个图像文件。

这些操作与设置鼠标经过图像基本相同，在替换文本框中输入当导航条不能正确显示或当标移动到图像上时所显示的文本内容，如这里输入首页，在按下时，前往的URL文本框中输入当单击该图像后要跳转到的网页地址，选择其后的下拉列表框中的主窗口选项，使跳转到的网页在同一个窗口中打开，有插入下拉列表框中可选择导航条在网页中的放置方向，其中水平表示横向放置，垂直表示纵向放置，设置完一个导航条元件后单击对话框上侧的添加项按钮添加其他导航元件，重复以上操作即可。

设置完成后单击确定按钮，关闭插入导航条对话框，完成导航条的添加，同一个中只能有一个导航条，可以对插入的导航条进行复制并在其他页面中粘贴以重复利用导航条。

通过选择修改菜单下的导航条命令，在弹出的修改导航条对话框中进行导航条的修改，其操作方法同插入导航条。

1.4.5.Flash的插入和编辑：

Flash是网页中常用的一种动态元素，可使网页更具动感效果，更为抢眼。

Flash动画是一种矢量动画，其生成的动画文件较小，一般都是用Macromedia公司的Flash动画制作软件制作的。

插入Flash影片之前首先应完成Flash的制作，并最好将其压缩为sw格式。

因为sw格式是运用于网络中的最佳格式文件。

这种文件可以在浏览器和Dreamweaver8.0中播放，但不能在Flash应用程序中对其进行编辑，Dreamweaver8.0自带的Flash按钮和Flash文本创建的文件就是这种类型的文件。

除此之外，swt文件格式的Flash影片，它是Flash库文件，允许修改Flash动画文件中的信息，

将Flash影片插入网页中：

首先将鼠标光标定位到要插入的Flash影片的位置，选择插入菜单下的媒体命令，在弹出的子菜单中选择Flash命令，弹出选择文件对话框，在该对话框的查找范围下拉列表框中选择文件的位置，然后双击要插入的Flash影片文件xue.swf，在弹出的“对象标签辅助功能属性音”对话框中单击“取消”按钮，完成Flash影片的添加。

当插入的Flash影片不能看到时，先选中插入的Flash影片，然后单击属性面板中的播放按钮，Flash就播放了。

这时的按钮变为“停止”状态，再次单击该按钮即可停止Flash影片的播放。

提示：

在选中Flash影片的情况下，按住鼠标左键不放向上或向下拖动Flash影片四周的黑色方块，可以调整Flash影片的大小。

按住shift键拖动Flash影片右下角的黑色方块，也可以成比例调整Flash影片的大小，

1.5.图文的高级应用

1.5.1.创建活动字幕：

在Dreamweaver8.0中可以很方便快捷的制作文字滚动效果，活动字幕，也称为滚动看板、滚动字幕，网站中常用的流动公告就是一种活动字幕。

活动字幕的使用使整个网页更有动感，显得很有生气，单击编辑窗口左上角的“显示代码视图”按钮切换到代码视图中，在鼠标光标所在位置添加代码和要滚动显示的文本，按Ctrl+S键进行保存，然后按F12键打开浏览器，即可以预览活动字幕，在代码“scroIIAmount=1”后敲击空格键，再在其后添加这句代码。

（onmouseover=scroILAmount=0onmouseout=scroILAmount=1.1）保存后，按F12键打开