网站制作

中考*信息技术专练   网站制作（九上）

第1单元  网站基础知识

一、知识点

1.网页和网站

（1）网页是一种多媒体作品，它可以承载文本、图像、声音、动画等多种媒体信息。

（2）网页是用HTML语言编写的，称为HTML文件，它的扩展名为”.htm”或”.html”，它可以在因特网上传输，通过浏览器识别并翻译成页面显示出来。

（3）主页：通过浏览器访问网站时看到的第一个页面，称为该网站的主页或首页。主页的作用是对整个网站进行概括性介绍，建立与其他页面的联系。

（4）子页：除首页之外的网页称为网站子页，它们可以通过首页的“导航”或者其他各种超链接访问浏览。

（5）网站（Website）是指在网络上用于展现特定内容的网页的集合。

（6）网页上要呈现的内容很多，概括起来分为基本元素和特有元素。网页上的基本元素包括文字、图片、音频、动画、视频。网页中的特殊元素：站标、导航栏、广告条、网站版权声明等。

2.创建网站的一般步骤：需求分析—规划设计—准备素材—系统集成—发布与管理

3.做好建站准备

（1）创建一个新网站前的准备工作，首先是制定建站方案，其次是采集、加工素材并选择合适的网站制作工具。

（2）制定建站方案

内容设计：按照一定的线索排列和组织内容；为每一个栏目的确定一个名称；并采用何种表现形式，设计呈现方式。结构设计：结构设计就是确定网站内容呈现的层次结构。网站通常采用“一级网页（主页）”、二级网页（列表页）、三级网页（内容页）的层次结构。

版面设计：A.网页上的内容概括起来分为基本元素和特有元素。B.基本元素包括文字、图片、音频、动画、视频；特有元素有站标（Logo）、导航栏、广告条（Banner）、网站版权声明。C.屏幕中央放置网页的主要内容；屏幕上方通常放置网站名称与导航栏；屏幕的左右两侧通常放置不太重要或固定的信息；网站版权声明一般放在最下方。D.版面的布局没有绝对统一的方法，应视需要而定，有创意的布局会给人以耳目一新的感觉。

（3）素材的采集与加工

素材可以自己制作，也可以通过从网站下载等方式获取，还可以对原有的素材进行加工。

网站常用素材的种类要求及格式

注意对素材分类，同类素材存放在同一个文件夹中；文件名要易懂易记，便于调用；使用素材时要注明资料的来源，注意保护知识产权，避免侵犯别人的版权；素材文件夹及素材的文件名都必须以英文或拼音缩写命名。

第2单元  认识Dreamweaver

一、知识点

1.常用的网站制作工具软件有FrontPage、Dreamweaver等。

2.为了使制作的网站达到一个很好的效果，还需要配合使用图形图像处理软件、动画设计软件等。

3. Dreamweaver、Flash、Fireworks被称为网页制作三剑客，这三个软件相辅相成，是制作网页的首先工具。Dreamweaver主要用来制作网页文件；Flash用来制作精美的网页动画；Fireworks用来处理网页中的图形。

4.Dreamweaver是由美国Macromedia公司开发的一个集网页制作和网站管理于一身的所及即所得的网页编辑器。

5.Dreamweaver CS6的工作界面主要由菜单栏、文件工具栏、文件窗口、状态区、“属性”面板和浮动面板等组成。如下图所示。

6.在菜单栏中主要包括“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”和“帮助”10个菜单。单击任意一个菜单，都会弹出下拉菜单，使用下拉菜单中的命令基本上能够实现Dreamweaver CS6的所有功能，菜单栏中还包括一个工作界面切换器和一些控制按钮。

7.使用文件工具栏可以在文件的不同视图之间进行切换，如“代码”视图和“设计”视图等，在工具栏中还包含各种查看选项和一些常用的操作。

8.文件窗口用于显示当前创建和编辑的文件，在该窗口中，可以输入文字、插入图片和表格等，也可以对整个页面进行设置，通过单击文件工具栏中的“代码”按钮、“拆分”按钮、“设计”按钮或“实时视图”等按钮，可以方便地在不同视图之间进行切换。

9.状态区位于文件窗口的底部，提供与用户正在创建的文件有关的其他信息。在状态区中包括卷标选择器、窗口大小弹出菜单和下载指示器等功能。

10.属性面板位于网页编辑区的下方，用于显示在文件窗口中所选元素的属性，用来对网页中被选中对象的各种属性进行设置，其中的设置项目会根据被选中对象的不同而变化。

11.面板组位于工作窗口的右侧，用于帮助用户监控和修改工作，其中包括“插入”面板、“CSS样式”面板和“组件”面板等。可以通过“窗口”菜单显示或隐藏浮动面板。也可以通过双击浮动面板标题的方式，折叠不使用的浮动面板，或者打开要使用的浮动面板。

12.网页编辑视图

（1）“设计”视图是一个所见即所得的可视化的设计环境。“设计”视图为默认视图。

（2）“代码”视图是一个用于编写和编辑网页代码的设计环境。

（3）“拆分”视图是用两个窗格分别显示“代码”视图和“设计”视图。

（4）“实时”视图是一个辅助视图，它与其他视图配合使用，用于快速查看制作的网页在浏览器中的实际样子，以便发现问题及时修改。

第3单元  创建和管理站点

一、知识点

1.用Dreamweaver建设主题网站，首先要在本地计算机硬盘上创建一个站点，再制作网站的主页，在主页的基础上依次完成其他页面的制作，然后将所有各级网页通过超链接连接起来，最后将建好的整个网站发布到网站服务器上。

2.“站点”指的是属于某个网站的文档在本地或远程的存储位置。

3.“站点名称”就是网站的名字，“本地站点文件夹”指你使用的计算机上存放网站的文件夹。

4.把网站的所有网页和素材集合在一个站点文件夹中，有利于网站的维护和管理。

5.网站的素材（图片、动画、视频等）要分类存放在站点文件夹中，并且所有文件夹名和文件名都不能含有中文字符。

6.网站制作不能一次完成，我们可以导出站点文件“.ste”，将其导入到新的计算机上，同时将站点文件夹也拷贝到同一台计算机上就可以继续编辑了。

第4单元  添加主页、规划主页的布局、添加主页内容

一、知识点

1.主页是进入网站后看到的第一个页面，它是网站的入口和封面，也是网站内容的汇总和索引，一般包括很多栏目和链接，以引导用户浏览网站中的内容。

2.网页上要呈现标题信息、栏目信息、内容信息、附加信息等，需要合理地放置这些信息。

3.在网页中使用表格布局页面，是网站页面设计的基本手段，目前大多数网页都采用这种方法。利用表格布局页面使网页清晰美观、富有条理。

4.表格宽度有两种单位：百分比（%）与像素。在同一个网页上如果有多个表格时，一般最外侧的表格宽度使用像素，而镶嵌在表格的单元格内部的表格宽度使用百分比。

5.在Dreamweaver中调整表格结构与在Word中调整表格的操作类似，很简单方便。

6.使用嵌套表格的原因有两点：首先，网页的排版有时很复杂，在外部需要有一个表格控制总体布局，如果这时一些内部排版的细节也通过总表格来实现，容易引起行高或列宽的冲突。其次，浏览器在显示网页的时候，是将整个表格的结构下载完毕之后才显示表格，如果不使用嵌套，浏览者要等较长时间才能看到网页的内容。

7.添加文字

（1）输入网页内容时，可以先按住Shift键后再按回车键，这时两段文字之间就是正常行距了。

（2）输入网页内容时，可以用Ctrl+Shift+空格组合键打出多个空格。

8.添加图片

（1）将图片插入到表格的单元格中，命令是“插入—图像—找路径—保存”。

（2）将图片设置为表格单元格背景，方法是在CSS里定义个class,.你的class{background: url(你的路径/img.png) no-repeat;}

9.设置背景

（1）设置网页背景通常有添加颜色背景和图片背景两种方式。

（2）颜色背景在网页中最常用的，它的设置简单，浏览网页时显示速度也快。

（3）用做背景的图片要尽量干净、简单且字节量小，有时还需要做技术处理。

（4）如果同时设置了图片背景和颜色背景，图片背景会出现在颜色背景上方。

（5）使用“修改—页面属性”对话框中的外观（HTML）和外观（CSS）选项，都可以对页面背景颜色进行设置。

（6）HTML是网页的主体，CSS是网页的装修，在CSS中设置的背景色会覆盖HTML中设置的背景色。

10. 设置表格边框线

（1）CSS（也叫层叠样式表或级联样式表）能够对网页中对象的排版位置进行精确控制。CSS是能够真正做到网页表现与内容分离的一种样式设计语言，支持几乎所有的字体字号样式。

（2）在“<内联样式>的CSS规则定义”对话框的“边框”设置项中：

Top指上边框，Right指右边框，Bottom指下边框，Left指左边框。

Style指边框线型样式，设置项有：none（无）；dotted（点划线）；dashed（虚线）；solid（实线）；double（双线）；groove（槽状）；ridge（脊状）；inset（凹陷）；outset（凸出）。

Width指边框的宽度，最常用的设置单位是px（像素）。

Color指边框的颜色，使用可以设置具体的颜色。

当Style，Width，Color设置项下的被勾选后，四条边框的设置就是相同的。

（3）在扩展表格模式中，表格的框线和间距会变大，便于用户选择比较小的表格或单元格。

11.设置背景音乐

（1）为网页设置背景音乐能达到烘托气氛、增加作品感染力的效果。为网页选择背景音乐时，要尽量选择较小的音乐文件，以减少对网页加载速度的影响。

（2）“标签编辑器-bgsound”对话框各项的含义如下：

源：选择背景音乐的来源。

循环：设置循环的次数，当值是-1时表示无限循环。

平衡：值为-1000到1000之间，负值将声音发送左声道，正值将声音发送右声道，0为立体声。

音量：值为-10000到0之间，0是最大音量，通常情况下不设置。

延迟：设置延时播放时间。

12.在网页中插入图片、动画、音乐、小视频等文件时，应保存到网站文件夹的相关文件夹中。

13.制作网页时使用“插入滚动字幕”的方法，可以增加网页的灵动性。插入—标签—标签选择器—页面元素—marquee标签，可以设置滚动字幕。

14.插入水平分隔线

（1）为了使网页上的内容条理清楚、主题突出，可以使用分割线对页面进行分隔。

（2）恰当地设置分隔线的线型，还可以改善网页的整体视觉效果。

（3）也可以用漂亮的横向图片当分隔线，既起到分隔内容的作用，还能对网页的整体起美化作用。应尽量选用简单的图片。

第5单元  利用主页生成网页模板、制作子网页

一、知识点

1.网页模板

（1）为了保持网站风格的一致性，通常网站中各网页的标题名、网站标志、导航栏、附加信息栏等网页元素的样式与主页是一致的。

（2）把主页中上述相同的部分提取出来制作成模板（称为网页模板），供制作其他网页时使用。网页模板的扩展名是.dwt。

（3）在应用了模板的网页中，只能在可编辑区域中添加或编辑内容，可编辑区域以外的内容不能修改。

（4）如果修改了模板中可编辑区域以外的内容，那么所有应用该模板的网页都会被自动更新。

（5）如果要删除模板中的某个可编辑区域，可以打开模板文件，将光标定位到要删除的可编辑区域内，单击“修改—模板—删除模板标记”，光标所在的可编辑区域即被删除。

（6）在复杂的模板中，可以添加多个可编辑区域。

（7）制作好的模板默认保存在站点的Templates文件夹内。

2.制作子网页

（1）二级页面是某一个栏目内容的索引列表，通过列表可以快速访问内容页。三级页面是具体显示某一篇文章的内容页，内容页一般运用的呈现方式比较丰富，如文本、图像、视频、动画等形式。

（2）新建网页可以在“文件”浮动面板的本地试图下进行，先单独创建一个个网页，再将这些网页组成网站。

（3）网页标题也叫网页名称，是为了方便浏览而设置的，一般用中文命名。网页文件名是为了方便计算机识别而命名的，通常采用英文或拼音的缩写。

（4）向子网页中添加内容，就是在子网页的可编辑区域中输入并编辑信息。

第6单元  建立超链接

一、知识点

1.借助超链接，将其他网页、文本、图片、视频、动画等多媒体信息链接起来，使信息能够更灵活地以非线性的方式呈现，以实现快速跳转。

2.网站中的超链接一般有三种：第一种是同一站点内的网页之间的超链接，目的是实现页面之间的快速跳转；第二种是同一网页中的超链接，也叫书签，通过它可以实现本页面内浏览内容的快速跳转；第三种是到站点外部的超链接。

3.网页中的文字设置成超链接后，会以蓝色显示并在其下方加一条下划线。

4.除了可以建立文字超链接外，还可以用图片建立超链接，操作方法同建立文字超链接的方法基本一样。

5.创建网站内部网页之间的超链接，要先规划好它们之间的关系，然后选中要定义超链接的文本或图像，通过“插入—超级链接”命令打开“超级链接”对话框进行设置。

6.书签超链接用于在同一网页上的快速定位。命名锚记（书签）就是用户在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后创建这些命名锚记的链接，这些链接可以快速将浏览者带到指定位置。

7.外部超链接是指将站点中网页上的某个对象与Internet上的目标建立一种相互链接的关系，通常是链接到某个WWW网站或电子邮件地址。

第7单元  网站的测试、发布和维护

一、知识点

1.在网站发布前，一定要检查网页上图文资料的正确性。内容检查包括以下几个方面：

（1）是否有政治性、科学性错误和不健康的内容。

（2）文字是否有拼写、语法错误。

（3）是否有选择不当的图片、动画、声音、视频（如内容与主题不符）。

（4）是否有侵犯知识产权的情况。

2.网站发布前需要进行全面测试，最基本的测试内容时链接测试、外观测试和运行速度测试。

（1）链接测试：测试网页中的超链接有没有断链或错链，在文档窗口下面的“链接检查器”面板中将显示链接检查结果。

（2）外观测试：利用网页文档工具栏中的“实时视图”命令或者按钮，检测网页再浏览器中是否按预想的布局在页面中显示。

（3）运行速度测试：这里的运行速度指在浏览器中打开网页的速度，打开时间太长，就会使浏览者失去耐心。在网页编辑区的状态栏中，显示了当前网页的大小及预计打开时间。

3.发布网站就是把制作好的网站文件，通过网络传动到Web服务器上，再由Web服务器管理员通过特定的网站发布软件将网站发布到网络上。如果该Web服务器位于局域网中，可以在局域网中访问到此网站；如果该Web服务器在因特网上，就可以在任何地方通过因特网访问到此网站。还可以利用“FTP”发布网站。

4.评价网站一般从主题、规划设计、网站内容、用户体验等方面入手。评价网站要有一个客观、全面的评价量表。

5.网站的管理和维护包括对网站内容的更新、修改、添加等操作，它是一项长期的任务，具体工作为：

（1）网页维护。经常使用浏览器查看、测试页面，查缺补漏，精益求精。

（2）网页更新。随着时间推移，为了保持站点的吸引力，必须对过时的文本、图像等网页内容及时进行更新，在网站中添加一些新的内容。

（3）网站升级。在维护网站的过程中，不断学习和掌握新的Web技术并把它应用到网站中，提升网站的质量。