信息技术会考选修主题3义.doc

高中信息技术学业水平测试复习提纲 网络技术应用（选修）第二部分 网站设计与评价测试内容内容细目测试要求网站设计与评价网站的概念A网站的规划与设计B网页制作CHTML的基本应用CCSS样式表的简单实用BJavaScript的简单 BASP工作流程A网站的发布与管理B网站的评价B一、网站的概念1、网站（website）：因特网上具有相似性质、共同内容的一组信息资源就是一个网站。构成一个网站的基本素材是各种各样的文件以及存放这些文件的文件夹。这些文件主要有三类：1、网页文件（.htm或.html）；2、网页文件所连接的图像、音频与视频等资源文件；3、若网站包含交互性内容，就有web数据库和访问数据库的程序文件（例如.asp）。2、网页（page）：用HTML写成的文件，它存放在某一台计算机中，而这台计算机必须是与因特网相连的。3、主页：实际上也是网页，通常用来表示访问某个网站时出现的第一个页面。主页的作用和地位类似于杂志的封面或报纸的第一版，是用来对整个网站进行概括性的介绍，描述其他各个页面的内容的。一般文件名为：index default题1：网站、网页和主页三者之间是怎样的关系？网站包含网页,网页包含主页，主页是一种特殊的网页，是网站的默认网页。4、网站结构分类树状结构线性结构网状结构概念网站中的网页是按照金字塔层次结构组织的。按照网站的层次结构，使用者无需费力就能找到他们所想要的信息。是最常见的一种网站结构。网站的各个网页是按照一种线性关系组织起来的，网页和网页之间是一种顺序关系，一个网页连着下一个网页，所有的网页好像排列在一条直线上。网站中的各个网页随意地连接在一起，似乎没有明显的组织规律。结构图二、建立网站（一）网站开发的一般过程网站规划与设计网站实现发布、管理网站（二）网站规划与设计1、网站规划与设计流程需求分析选择网站主题、确定网站名称栏目设置设计网站风格规划网站结构确定网站运行环境选择网站开发工具分配网站开发任务 提示：各本教材对于网站规划与设计这块分类存在不一致，有的是将规划与设计融为一体就是规划，有的是将规划与设计分成两部分，不管哪种分发，记住一个原则“先选题再设计”2、规划与设计各部分注意问题（1）选择网站主题：1、主题要小而精；2、题材最好是擅长或者喜爱的内容（2）确定网站名称：1、要与主题紧密相关；2、要有意义；3、要上口、悦耳、易记；4、要合法、合理、合情（3）栏目设置：1、紧扣主题；2、尽可能将最有吸引力的内容列在栏目中；3、尽可能方便访问者的浏览与查询（4）网站风格：1、网站标志；2、标准色彩（或称为主色调）；3、标准字体（或称为文字效果）；4、版面设计（三）网站实现1、收集、加工素材（1）收集素材注意：1、对收集来的素材进行分类；2、文件名要易懂易记，便于调用；3、注意保护知识产权，避免侵犯别人版权（2）加工素材：根据素材的类型选择合适的加工软件2、建立站点（1）站点的创建题2：在Frontpage软件中如何建立一个站点？为什么一般我们选择建立“空站点”？（2）设计目录结构：两种目录结构形式1、按栏目内容建立文件夹；2、按文件类型建立文件夹3、网页制作（1）网页布局：主要是利用表格实现网页布局，其他布局方式还有层和框架（2）添加网页元素： 文字和图片是构成网页的两个最基本的元素，除此之外还有动画、音频和视频等（3）使用网页制作软件提供的模板制作网页4、建立超链接（1）超链接类型：本网页（书签），本网站，网站外的URL（2）超链接三种状态：1、未访问过的；2、正在访问的；3、已访问过的题3：如何在Frontpage软件中设置超链接三种状态的文字颜色？（四）发布、管理站点1、发布前的准备（1）测试站点n 内容检查n 链接测试（“超链接”视图以图形化方式显示各个网页是如何链接在一起的；在“报表”视图下，用户可以查看当前网站的各种情况，如是否有断链、错链等，有助于更快地查找到网页中一些不容易发现的错误，并迅速将其改正，便于更好地管理网站。）n 外观测试（2）预览网页（3）检查下载时间2、发布站点（网站发布信息的主要三种方式）：（1）在“网上邻居”中发布：将网站文件夹设置“共享”（2）在本机上发布：1）利用Frontpage提供的发布功能2）windows98及更低的单机版操作系统可使用个人服务器PWS来发布 3）服务器操作系统和windows 2000及以上版本的操作系统可使用IIS来发布第一步：安装IIS打开windows “控制面板” 双击“添加删除程序” 在“添加删除程序”对话框中单击“添加删除windows组件”图标在“windows组件向导”对话框中，选中“internet信息服务（IIS）”选项单击“下一步”按钮开始安装，直至安装结束。第二步： 打开IIS在“控制面板”中，双击“管理工具”选项，选中“internet信息服务”，打开“internet信息服务”控制台，选择“默认网站”第三步：配置Web服务器题4：如何设置网站的主目录？如何将网页设为网站的默认文档？创建虚拟目录设置虚拟目录的主要目的是将不同磁盘、不同路径下的内容都放入同一个网站内。 可以通过建立多个虚拟目录，可在本机上发布多个网站。第四步：测试发布在浏览器的地址栏中输入http:/localhost或者http:/本机IP或者，若能看到网站的主页，则发布成功。（3）在因特网上发布与常用上传工具（CuteFTP、LeachFTP、WebPublisher等）。n 先申请网站空间：申请免费空间、租用虚拟主机、托管服务器（其中包括租用专用服务器）n 利用上传工具如cuteftp等上传网站进行发布。3、网站的维护：（1）网页维护，（2）网页更新，（3）网站升级4、网站的宣传如告诉别人网址、电视广播宣传、BBS上发帖子、与其他相关网站交换友情链接、在因特网上的搜索引擎中登记网址等。5、网站评价三、Frontpage制作网页1、 简单网页制作简介（1）常用制作网页工具（Frontpage、DreamWeaver，具有“所见即所得”的特性；有别于源代码型编辑工具）Frontpage：“所见即所得”的代表，HTML代码由FrontPage后台自动生成。DreamWeaver：是一个较为专业的网页工具软件，它与Flash、Fireworks软件统称为“网络三剑客”。（2）HTML语言：它是一种超文本标记语言，使用一组特定的标记来描述网页的结构。2、 网页制作（FRONTPAGE）操作要求需要掌握的主要操作有：建立站点，添加表格（插入表格、修改表格、调整单元格、表格的标题和表头、跨列和跨行的单元格），设置文字（文字大小、文字字体、文本颜色、段落标记和换行符），设置超级链接（绝对路径、相对路径、锚点），设置图像（插入图像、修改图片属性、图像超链接、热区链接），设置框架（框架的定义、框架属性设置、子窗口属性设置），添加动画、声音和视频。（1）插入水平线、水平线属性更改（2）插入字幕、字幕文字设置（3）背景图片、背景音乐设置（4）单元格插入与删除、单元格拆分与合并、（5）建立框架网页 建立框架网页n 点击“文件”菜单新建网页，弹出“新建”窗口n 点击“框架网页”选项卡选择相应的框架模板 框架属性设置选中欲设置的子窗口，右击选择“框架属性”，进行相应设置可做的设置有：框架名称（表明该子窗口在框架中的位置名称，并非指子窗口中网页的名称，该名称在超链接中要使用）、初始网页、框架大小（宽度、行高）、边距（宽度、高度）、选项（是否可在浏览器中调整大小、滚动条是否显示）问题区：n 题目要求在子窗口中“设置初始网页”为a.htm，可我却新建了网页，怎么办？答：右击此子窗口，选择“框架属性” 重新浏览选择a.htm按确定。n 如何让框架不显示边框？答：右击此子窗口，选择“框架属性” 框架网页选择“框架”选项卡去掉“显示边框”前面的勾。n 如何让框架之间间距为0答：右击此子窗口，选择“框架属性” 框架网页选择“框架”选项卡设置“框架间距”为0。 框架的拆分删除前提：请保证框架的各子窗口中没有设置网页n 拆分框架：选中子窗口选择菜单栏“框架” 拆分框架，进行设置n 删除框架：选中欲删除的子窗口选择菜单栏“框架” 删除框架 框架网页的保存：点击菜单栏“文件” 保存文件示例：保存一个“横幅和目录”式的框架网页，其保存先后步骤1、先保存顶端（子窗口中放置的）网页2、再保存左边（子窗口中放置的）网页3、 保存右边（子窗口中放置的）网页4、 最后保存整体框架网页注意：一定要看清预览图中的蓝色区域，表示当前保存的网页。（6）超链接的制作1） 书签链接提示1：看清楚题目是在标题前建立书签还是在标题上建立书签，若标题前建立书签，书签建成后标题前会有一个小旗帜，若在标题上建立书签，书签建成后标题下会有一段虚线。提示2：在小标题上建立书签时，千万不要多选小标题前后的空格。提示3：在小标题上建立书签时，若书签名称后多了“？”， 表示多选小标题后空格。2）图片的热区链接一张图片上建立多个链接3）超链网页显示方式 超链接如果是在框架网页中使用，请注意是否要设置“目标框架”，如不设置，则按默认位置打开新的链接对象。目标框架一般有以下默认位置： _self 相同框架 _top 整页 _blank 新建窗口 _parent 父框架示例：请给左图的框架网页中“目录1”添加超链接，要求链接的网页在中间框架显示1、选中“目录1”，右击选择“超链接”，弹出“超链接”窗口2、设置链接的网页3、选择位于下方的“目标框架”， 点击右侧，弹出“目标框架”窗口4、点击中间框架，使其变成蓝色选中状态，按确定（7）添加FLASH点菜单栏“插入” 高级插件；点击“浏览”选择FLASH文件的路径；按要求设置大小及布局（对齐方式、边框粗细、水平间距、垂直间距）四、HTML语言的基本应用（一）HTML文件结构HTML标记为：一般HTML文件分为两大部分（1）头部信息：头部的代码主要用来为网页的浏览及网页中程序代码的执行提供准备。例如：，一般用在和之间，它表示什么意思呢？（2）主体标记：主体标记间的内容是HTML文件的主体部分，在网页被浏览时，这部分内容将在浏览器主窗口中显示。（二）HTML标记定义方式1、文件或超文本 文件或超文本2、 换行标记 图片标记3、写标记时不区分字母的大小写4、标记定义方法：首先明确需要做什么定义，再选择适合的标记和标记的属性。例如：希望将“HTML练习”这段文字设置字号为3，字体为宋体，字的颜色为红色（#FF0000）对于文字排版设置，可以选用font标记，字号可以用size属性，字体用face属性，颜色用color属性，字体加粗可以用标记，不完整地定义代码为 HTML练习（三）常见标记及其属性设置1、常见标记汇总标记标记含义常用属性网页标记头部信息标记网页标题标记主体标记background=url设置背景图片text=#rrggbb设置网页中文字的颜色link=#rrggbb设置网页中未访问超链文字颜色vlink=#rrggbb设置网页中已访问超链文字颜色alink=#rrggbb设置网页中正在访问超链文字颜色bgcolor=#rrggbb设置网页背景颜色leftmargin=x 设置网页正文与浏览器左边框距离topmargin=x设置网页正文与浏览器上边框距离标题级别n=1/2/3/4/5/6 align=left/right/center 设置水平对齐方式字体设置size=1/2/3/4/5/6/7 设置文字大小，字号越小字越大color=#rrggbb 设置文本的颜色face=字体名称设置文本字体文本加粗文本加下划线文本倾斜换行段落开始表格标记border=x 设置表格边框粗细widthx 设置整个表格的宽度height=x 设置整个表格的高度bgcolor=#rrggbb 设置表格的背景颜色background=url 设置表格的背景图片cellpadding=x 设置单元格的内容与边框间距cellspaceing=x 设置单元格间的距离定义表格中一行标记定义表头单元格标记width=x 设置单元格的宽度height=x 设置单元格的高度align=left/center/right 设置单元格水平对齐方式valign=top/middle/bottom 设置单元格垂直对齐的方式bgcolor=#rrggbb 设置单元格的背景颜色background=url 设置单元格的背景图片bordercolor=#rrggbb 设置单元格的边框颜色rowspan=n 设置单元格跨行数colspan=n 设置单元格跨列数定义单元格标记图片标记width=x 设置图片宽度height=x 设置图片高度border=x 设置图片的边框宽度align=left/right/center 设置对齐方式alt=* 设置图片名称表单标记滚动字幕direction=left/right/up 设置滚动方向behavior=scroll(滚动条)/slide(幻灯片)/alternate(交替)设置超级链接定义书签url：本网站的文件用相对路径，其他网站的用完整的url#rrggbb：使用十六进制数表示，其中rr取值为00ff，代表红色，gg取值为00ff，代表绿色，bb取值为00ff，代表蓝色  代表一个空格2、标记解析（1）表格结构1_11_22_12_23_13_2 这是几行几列的表格？每个单元格中的内容是什么？（2）超级链接1）通过文字链接到另一页面：链接文字2）通过图片链接到另一页面：3）书签链接n 定义书签：书签文字n 链接到本页面中的书签：链接文字n 链接到另一页面中的书签：链接文字4）路径示例D：webSinayahooImage1.jpg.imgaudiocsshtmlIndex.htmBg.mid1.jpg2.swf1.htm2.htm3.htmSINA网站在D盘的树状结构图问题分析如何点击一下Index.htm网页中 “家园”两字就可以连到1.htm网页？家园如何点击一下1.htm网页中 “音乐”两字就可以连到2.htm网页？音乐如何在3.htm网页中 插入图片1.jpg？如何点击一下Index.htm网页中 “和我联系”几字就可以给邮箱写信？和我联系如何点击一下1.htm网页中 “好站推荐”几字就可以连到新浪网站？好站推荐五、动态网页（一）动态网页和静态网页层叠样式表CSS动态网页早期的HTML是一种静态网页，静态网页无需系统实时生成，网页风格灵活多样，但是，采用静态页面建立起来的站点，只能够简单地根据用户的请求传送现有页面，无法实现各种个性化的交互功能，而且日常维护也十分繁琐。而动态网页可以通过更新页面的外观和行为，实现动态的交互作用，能方便地同访问者进行交流，及时获得信息反馈。两类网页的区别就是：静态网页是固定，动态网页可更新内容动态HTML文件目标模块DOM客户端脚本语言 JavaScript、VBScriptASP、CGI、PHP、JSP基于服务器端的动态网页（二）动态HTML DOM文件目标模块 DOM使得HTML具备了动态性，体现的是WEB页面元素的等级关系，这些元素可以按照指定的时间在浏览器上呈现。它可以包括时空背景信息、窗口自身属性、各HTML元素。 CSS样式表的简单使用1、CSS样式表特点CSS样式表作为当前网页制作中的一个常用技术，不仅可以对文字格式进行设置，还可以更加精确地控制布局、字体、颜色、背景和其他图文效果。它主要有以下几个优点。（1）只需修改一个CSS代码就可以改变页数不定的网页外观和格式。（2）可以更好地控制页面布局和外观（3）在所有浏览器和平台之间具有较好的兼容性（4）精简网页，提高下载速度2、网页中插入样式表的方式（1）嵌入式样式表在每个要应用样式的HTML的标记后写上CSS属性就可以了。这种方式主要用于对具体的标记作具体的调整，其作用的范围只限于本标记。例如，想规定一个标记中的文字为红色，字体大小为10pt，则可以书写为： （2）内联样式表把样式表放在的中间，从而使样式表对当前整个HTML页面产生作用，这就是一个内联样式表。其引用方式如下：其中，是HTML语言中的注释标签，在样式表中使用，是为了帮助不支持CSS的浏览器过滤掉CSS代码，避免网页在浏览器中显示时CSS代码不被执行而是以源代码的方式显示在浏览器中。（3）外部样式表一个网站的同类页面，其风格往往是相同的或类似的，我们显然不希望每次都在和中插入相同的繁琐复杂的样式表。其实我们可以只编写一个CSS文件，借助于引入外部样式表来实现不同页面的风格，并且当外部样式表被更改时，各引用该样式表的网页风格也随之发生变化，不需要手工逐个修改。定义方法为：定义一个外部样式表文件（例如test.css），这个文件以”.css”为后缀，其中只需要对样式进行定义，不必包含标识符。在需要引用的HTML文件的和之间通过下面语句对test.css文件中的样式定义进行引用。各种插入方式比较插入方式代码位置作用范围嵌入式样式表具体标记内，style=” ”当前标记内联样式表当前网页的和之间当前网页外部样式表一个样式表文件中（.css）网页通过标记引用所用引用该样式表的网页3、样式定义方法我们需要掌握的样式定义方式有三种，一种是对具体的标记定义，一种是类定义，第三种是通用类定义。其中超级链接标记a定义特别，单独说明。以下将举例说明，其中定义方法是通用的，同样适用于其他标签。语法格式：HTML标记标记属性：属性值；标记属性：属性值；（1）对具体标记定义例如：TD font-family: ”宋体”; font-size: 12pt 对网页中所有表格中的单元格中的文字样式进行定义，定义字体为宋体，字号为12磅（pt）。（2）对具体标记的一类进行定义例如：p.p1 font-weight: bold; color: #00ff00; line-height: 1cm; text-align: leftp.p2 font-weight: normal; color: #0000ff; line-height: 20px; text-align: right 对于段落标记p定义两种类型，p1类型为文字加粗，文字颜色为绿色，行高1厘米，文字对齐方式为左对齐。p2类型为文字正常，文字颜色为蓝色，行高20象素，文字对齐方式为右对齐。p1和p2类只适用于p标签，引用方式为在p标签中加class属性，例如 段落一，将p1类定义应用于段落一段落二，将p2类定义应用于段落二（3）通用类定义例如：.abc font-size: 9pt; color: green; text-decoration: underline定义一个通用类abc，并没有指定具体的标签，表示这个类可以被任何合适的标签例如p、font、table等等调用，其使用方法为在标签中添加属性class=abc。操作题中通常使用标记限定样式作用范围，例如。（4）超链接分状态定义超级链接有四种状态，未访问状态（link）、已访问状态（visited）、鼠标正好移上状态（hover），正被点击状态（active），我们可以对超链接的每种状态进行定义，例如：A:link color: red; font-family: ”宋体”; text-decoration: noneA:visited color: red; font-family: ”宋体”; text-decoration: noneA:hover color: green; font-family: ”宋体”; text-decoration: underlineA:active color: green; font-family: ”宋体”; text-decoration: underline对网页中的A标签的四种状态分别进行定义，其中未访问状态和已访问状态一样，都是文字颜色为红色，字体为宋体，无下划线；鼠标正好移上状态和正被点击状态一样，都是文字为绿色，字体为宋体，有下划线。（5）超链接类定义我们也可以对网页中的超链接定义不同的样式，这样就需要用到类。例如：A.a1:link color: rgb(0,130,0); text-decoration: noneA.a1:hover color: rgb(0,100,0); text-decoration: none; background-color: rgb(223,255,223)A.a1:visited color: rgb(0,130,0); text-decoration: none;A.a2:link color: #0000ff; font-family: ”宋体”; text-decoration: underlineA.a2:visited color: #0000ff; font-family: ”宋体”; text-decoration: underlineA.a2:hover color: #000000; font-family: ”宋体”; text-decoration: none引用方式为超链一 超链二 JavaScript的简单使用1、客户端脚本语言客户端脚本语言就是指可以直接对客户端进行编写并使页面发生动态变化的脚本语言，而JavaScript和VBScript就是我们最常用的客户端开发动态网页的脚本语言。2、JavaScript使用格式javascript语句例如：在网页中弹出HELLO!对话框alert(“HELLO!”)3、JavaScript特效使用注意问题（1）首先确定版权问题。并不是所有网上的代码都可以无偿使用，只有免费资源，才可以下载。（2）判断是否要修改。在把一个JavaScript特效的源代码应用到自己的网页之前，先要判断它是否需要修改，一般说来像日期时间、鼠标特效、页面特效等是不需要修改的；但像菜单、文字等特效是要根据自身网页的特性和需要来进行修改的。（3）确定插入位置和如何插入。一般来说，在我们下载的允许使用的源代码中，都会有如何插入的说明，我们只需按照其说明确定插入位置和方法就可以使用了。4、JavaScript特效插入举例将C:GATDoc鼠标跟随.txt文件中的代码放到网页index.htm中合适的位置，并修改代码，是浏览时，在鼠标边上出现“欢迎光临4A风景区！”“鼠标跟随.txt”文件中的内容如下所示：var x,yvar step=18var flag=0/ Your snappy message. Important: the space at the end of the sentence!var message=欢迎你的到来！message=message.split()var xpos=new Array()（1）分析给出的TXT文件，发现文件中的代码由两部分组成，l 部分一是插入在HEAD区域的，var x,yvar step=18var flag=0/ Your snappy message. Important: the space at the end of the sentence!var message=欢迎你的到来！message=message.split()var xpos=new Array()l 部分二是插入在BODY标签中当属性的，onload=makesnake()（2）分别将代码插入到index.htm文件中的相应位置l 将部分一插入到HEAD区域，因为本题中Javascript代码没有提供开始结束，所以还需要自行添加，如下所示var x,yvar step=18var flag