项目班级风采网站制作.ppt

项目1 班级风采网站制作,本项目内容提要：本项目从清晰明确的任务训练入手，讲授了“班级风采”小型网站的规划设计，应用中文Dreamweaver CS5、中文Fireworks CS5建立网站并制作网页的全过程，并介绍了网站规划设计及应用上述软件进行网页制作的相关知识。本项目能力目标：1 具备小型网站规划设计的基本能力。2 掌握中文Dreamweaver CS5、中文Fireworks CS5最常用的基本操作，初步具备小型网站创建与管理及网页制作的基本能力。本项目知识目标：1 熟悉网站规划设计的基本知识。2 掌握中文Dreamweaver CS5进行网页设计制作的相关知识。,1.1 班级风采网站制作过程,1.1 班级风采网站制作过程,班级风采主页效果如图所示，下面详述其制作过程,任务1-1 设计规划班级风采网站,网页制作之前要进行规划，内容包括：设置主题栏目，设计网页结构，确定网站风格等等。设置主题栏目：本班级风采网站的主题栏目包括：班级档案、组织机构、荣誉殿堂、风采图片、文体天地、学习园地、支部生活。设计网页结构：网站主页规划的结构下页图所示。网站的主页可采用简单明了的板块结构：采用上中下结构。上边为标题区，用于存放网站标题等内容。中间为主页主体区，主体区又分为左右两部分，左边窄，用坚式结构放置导航栏。右边宽，存放班级简介等内容。下边为版权区。用于存放版权声明信息。设计网站风格：由于是班级网站，可选简明清新型。设计网页尽寸：选择1024768规格,实际尺寸为：980*，(*代表768的倍数)。宽度最好限定在一个幅面内，长度一般是不超过3个版面。,任务1-1 设计规划班级风采网站,班级风采站点规划布置图,任务1-2 创建班级风采网站站点,【子任务1-2-1】设置本地站点文件夹本地站点文件夹用以确定存放所有站点文件的存储位置。设置本地站点文件夹的操作步骤如下：（1）在桌面双击“我的电脑”图标；（2）在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器（例如为E盘）；（3）使用【文件】新建文件夹命令，在硬盘中建立一个新文件夹。（4）在新文件夹上单击右键，选择“重命名”选项，在英文输入法状态下输入站点名称。例如输入“CLASS”，然后在空白处单击确定。（见操作演示）,任务1-2 创建班级风采网站站点,【子任务1-2-2】建立一个名称为“班级”的站点站点是对网站进行组织、维护和管理的功能集合。通过站点管理，用户可以根据自己的需要设计出自己网站结构。操作步骤如下：（1）启动Dreamweaver CS5（2）执行“站点”菜单中的“新建站点”命令，弹出“站点设置对象”对话框。（3）在菜单中选择“站点”选项，在“站点名称”文本框中输入：“班级”，在“本地站点文件夹”中输入E:CLASS（或单击浏览器按钮，选择“E:CLASS”）作为本地根文件夹。“站点设置对象”对话框。（见操作演示）（4）单击【保存】按钮，完成“班级”站点创建。,任务1-2 创建班级风采网站站点,【子任务1-2-3】在“班级”站点中建立站点子文件夹在已建好的网站中，一般还需要建立一些子文件夹，用于归类存入网站中的图像、网页、动画、模板等文件。操作步骤如下：（1）在文件面板中选择“站点-班级（E:class）”文件夹，单击鼠标右键，在快捷菜单中选择“新建文件夹”选项。（见操作演示）（2）单击untitled文件夹的名称部分，输入image，将文件夹改名为image，此文件夹用于存放图像文件；（3）参照步骤（1）和（2），依次建立文件夹“html”(用于存放非首页的其他网页)、“music”（用于存放音乐文件），“swf”（存放Flash动画）。（操作演示）（结果如图“建立站点子文件夹结果”所示）,任务1-2 创建班级风采网站站点,建立站点子文件夹结果,任务1-2 创建班级风采网站站点,【子任务1-2-4】在“班级”站点中建立网页文件建立网页文件的方法为：先选中要放置网页文件的文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令。或执行“文件”“新建文件”菜单命令，在弹出的“新建文档”对话框中选择“基本页”或“HTML”，单击【创建】按钮。编辑完成网页内容后，以适当的文件名称保存到相应站点文件夹下（如保存到E:classhtml下面）。在操作时要注意以下问题：（1）主页文件必须放在本地站点根目录下，例如，本例应将首页文件放在“E:class”文件夹下。（2）网页文件名、文件夹名和网站内的其他文件名最好全部使用英文小写形式，因为Dreameaver不识别中文文件名，而且有些网站服务器要区分字母大小写。,任务1-2 创建班级风采网站站点,【子任务1-2-4】在“班级”站点中建立网页文件操作步骤如下：打开站点窗口，在文件面板上单击“展开”按钮即可打开“站点”窗口。选中“站点-班级（E:class）”文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令。单击新文件名的名称部分，将untitled.htm改名为index.htm(作为网站的首页文件)；选中“html”文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令，建立网页dangan.htm(班级档案)；参照步骤，分别建立网页xuexi.htm（学习园地）、wenti.htm（文体天地）、jigou.htm（组织机构）、zhibu.htm（支部生活）、tupian.htm（风彩图片）、rongyu.htm（荣誉殿堂）。（见操作演示）。（结果如“建立网站新文件结果”图所示）,任务1-2 创建班级风采网站站点,建立网站新文件结果,任务1-3 制作并添加网页标题栏,【子任务1-3-1】制作网页标题图像一个网页通常有标题部分，来访者可以通过标题了解网站的名称及网站类型。标题部分可以是文本，也可以是图像。如果使用图像标题，我们可以用Fireworks CS5自己制作。操作步骤如下：（1）启动Fireworks CS5，选择画布宽度为980，高度为80，画布颜色自定义为黑色。单击【确定】按钮，进入到Firework主界面。（见操作演示）（2）在画面中间用“文本”工具输入“班级风采”，在属性面板中设置：字体大小为80，颜色为淡兰色（#00FFFF），字体为隶书。（见操作演示）。（3）在画布左边用“文本”工具输入“计算机多媒体”，在属性面板中设置：字体大小为22，颜色为白色，字体为黑体。（4）在画布右边用“文本”工具输入“Computer Multimedia”，在属性面板中设置：字体大小为22，颜色为白色，字体为黑体。（5）单击保存按钮，给出保存位置（如E:classimage）及文件名（扩展名为.png），以便以后修改。（6）执行“文件”菜单中的“图像预览”命令，设置文件格式为GIF，单击“导出”按钮。（见操作演示）（7）在“导出”对话框中选择保存在：e:classimage，文件名为：bjbt，单击“保存”按钮。（见操作演示）,标题图像制作效果图如下：,任务1-3 制作并添加网页标题栏,【子任务1-3-2】添加主页标题图像“班级风采”操作步骤如下：（1）在Dreamweaver应用程序窗口中执行“站点”“管理站点”菜单命令，在弹出的对话框中选中需要打开的站点名称。例如：班级。单击【完成】按钮，“班级”站点显示在文件面板中。（2）双击打开需要制作的网页文件。例如，双击打开主页文件index.htm。首页文件打开，此时是空白页。（3）执行“插入”菜单中的“图像”命令，或单击“常用”工具栏中的【图像】按钮，弹出“选择图像源文件”对话框（见操作演示）。如果“常用”工具栏未打开，可按快捷键【Ctrl】+【F2】打开。（4）在指定文件夹中找到标题图像文件，选择标题图像文件后，对话框右侧将显示该图像的预览图，单击【确定】按钮，插入结束。,任务1-3 制作并添加网页标题栏,【子任务1-3-3】添加水平分割线为了将标题区与正文内容分隔开，通常在标题下面插入一条水平分隔线。操作步骤如下：（1）将光标移到需要插入分隔线的地方（如标题图像下方）。（2）执行“插入”菜单“HTML”下“水平线”命令。（3）标题图像的下面出现一条水平分隔线，并处于选中状态，在属性面板中设置其属性，如宽度、高度、对齐方式、阴影等。这里设置宽度为980，阴影。（见操作演示）,任务1-3 制作并添加网页标题栏,图4-14 添加网页标题图片及水平线后效果图,任务1-4 设置导航栏,导航栏的作用是与其他网页链接，从而轻松地进入下一个页面，导航既可以使用文字，也可以使用图像。这里我们使用文字制作导航，并且使用表格布局导航栏。【子任务1-4-1】插入导航表格操作步骤如下：（1）在水平分隔线下单击鼠标，出现光标插入点。（2）执行“插入”菜单中“表格”命令，或在插入面板上单击“常用”工具栏中的【表格】按钮，弹出表格对话框，设置“行数”为7，“列数”为1，“宽度”为25，单位为“百分比”，（见操作演示）（3）单击【确定】按钮，表格插入。此时表格处于选中状态，拖动控制点（黑点）可以调整表格的大小（见操作演示）（4）在属性面板中设置表格的背景颜色为#CCFFCC。,任务1-4 设置导航栏,【子任务1-4-2】添加导航文本（1）在表格的第一个单元格里单击鼠标，出现光标插入点，通过键盘输入文字“班级档案”。（2）选中文字“班级档案”，在属性面板中单击CSS按钮，出现CSS属性面板。（见操作演示）（3）单击字体大小中的下拉按钮，第一次使用字体设置会出现“新建样式规则”对话框，“输入选择器名称”为font1，“选择器类型”为“复合选择器（基于选择内容）”，“选择定义规则的位置”为“仅限该文档”，（见操作演示）（4）单击“确定”按钮，在属性面板中设置其字体为默认、大小为18、对齐方式为居中对齐。（见操作演示）。（5）参照步骤（2）（4），输入并设置其他导航栏：“组织机构”、“荣誉殿堂”、“风彩图片”、“文体天地”、“学习园地”、“支部生活”。如图所示。,任务1-4 设置导航栏,设置导航栏效果图,任务1-5 设置网页主体内容,为使网页内容设置更灵活，可以借助“层”来定位文字区域。【子任务1-5-1】设置网页主体文字区域并添加文字操作步骤如下：（1）在“插入”面板的“布局”工具栏上，单击【绘制AP Div】按钮。（2）在页面需要放文字的地方，按住鼠标左键拖动出一个矩形区域（见操作演示）。（3）此时层处于选中状态，通过拖动控制点可以调整层的大小。将鼠标放在层的边缘线上，鼠标呈“十字”箭头时，拖动鼠标可以移动层的位置。（4）应用层属性面板可设置层属性，如背景颜色为#CCFFCC等（见操作演示）。,任务1-5 设置网页主体内容,【子任务1-5-2】添加网页主体文字（1）在层内单击鼠标，出现插入点后，即可输入文字内容“我们的班级，计算机多媒体班，40颗年轻的心。我们来自五湖四海，操着不同的口音，怀着青春的梦想！共同撑起同一片蓝天，一起遨游知识的海洋。让我们扬帆出海，胜利起航。我们是快乐的一家人，我们是自信的一家人！。”（2）编辑文字，选中文本，在CSS属性面板的目标规则中选择新建规则，在新建CSS样式规则对话框中，选择器名称设为line1，单击确定后出现“line1的CSS规则定义”对话框，设置字体为宋体、字号为24、行距为200%。（见操作演示）。（3）单击“确定”按钮后，文本内容将按line1定义呈现。（见设置网页主体内容之后效果图）。,任务1-5 设置网页主体内容,设置网页主体内容之后的效果,任务1-6 制作版权区,本网站虽然不大，但也应体现完整性，所以也应设置版权区。【子任务1-6-1】制作版权区操作步骤如下：（1）将光标置于末行起始点，执行“插入”菜单“HTML”下“水平线”命令。出现一条水平分隔线，并处于选中状态，在属性面板中设置其属性，如宽度、高度、对齐方式、阴影等。这里设置宽度为980，阴影。（操作演示）（2）在下一行输入“Copyright2012-2016 班级风采工作”（3）选中输入的版权内容文本，设置对齐方式为居中对齐（首次使用对齐方式应用新建CSS规则，如选择器名称为center1。操作步骤与前述新建CSS规则类似），字号为16。设置效果如图“版权区的设置”所示。（操作演示）,任务1-6 制作版权区,版权区的设置,任务1-7 设置页面属性,网页页面属性主要包括页面标题、网页背景图像与颜色、文本与超级链接颜色、页边距等。网页标题可以标识和命名文档；网页背景图像与颜色可以设置文档的外观；文本颜色可以帮助浏览者区分普通文本和具有超级链接的文本，并且可以识别已经访问过和尚未访问过的超级链接。,任务1-7 设置页面属性,【子任务1-7-1】添加网页文档标题“班级风采”网页标题非常重要，它可以帮助浏览者在浏览网页时了解正在访问的内容，以及在历史记录和书签列表中标识页面。如果页面没有标题，则网页将作为“无标题文档”在文档窗口、浏览器窗口、历史记录和书签列表中出现（见操作演示）在Dreamweaver中有多种方法为网页添加文档标题。操作步骤如下：方法1：直接在Dreamweaver文档工具栏中的“标题”框中输入新标题。例如，输入“班级风采”。然后按【Enter】键确定。如果工具栏没有显示，可通过“查看”菜单打开工具栏。方法2：单击文档工具栏上的【代码】按钮，然后在和标签之间输入新标题，（见操作演示）。方法3：执行“修改”“页面属性”菜单命令，或在网页空白处单击鼠标右键，选择“页面属性”选项，然后在“页面属性”对话框的“分类”中选中“标题/编码”，在“标题”框中输入新标题，单击【确定】按钮。（见操作演示）。,任务1-7 设置页面属性,【子任务1-7-2】设置网页背景图像和颜色使用“页面属性”对话框可以设置网页的背景图像或背景颜色。如果同时设置了背景图像和背景颜色，则背景颜色不能显现。如果背景图像有透明像素，则背景颜色才能显示。操作步骤如下：（1）打开“页面属性”对话框，在“分类”中选中“外观（CSS）”选项，单击“背景图像”文本框右侧的【浏览】按钮，弹出“选择图像源文件”对话框，在“选择图像源文件”对话框中选择一个图像文件（例如image/bj1.gif），单击【确定】按钮；或者在“背景图像”文本框中直接输入图像文件名与路径，（见操作演示）。（2）单击“页面属性”对话框中的【应用】按钮，背景图像将应用到网页中。（3）在“页面属性”对话框中单击“背景颜色”右侧的按钮，鼠标变为滴管形状，并弹出一个颜色面板，可以使用取色滴管在颜色面板中选取一种颜色。也可以直接输入颜色值，如#CCC。（见操作演示）,任务1-7 设置页面属性,【子任务1-7-2】设置网页背景图像和颜色注意：同时设置背景图像和背景颜色的原因是当网络速度较慢时，背景图像可能显示迟缓，背景颜色将首先出现，让浏览者明白这是有图片的页面，需要稍加等候。背景图像的文件名不能使用中文名称。如果背景图像的尺寸小于文档窗口的大小，则Dreamweaver将重复排列背景图像直至填满文档窗口。系统默认的网页背景颜色是白色。,任务1-7 设置页面属性,设置背景色与背景图页面属性,任务1-7 设置页面属性,【子任务1-7-3】设置网页文本颜色及链接颜色设置了背景图像和颜色之后，还需要设置网页中文本的字体、大小与颜色。在“页面属性”对话框中既可以设置普通文本的默认颜色与字体，也可以设置超级链接、已访问链接和活动链接的默认颜色与字体。操作步骤如下：（1）打开“页面属性”对话框，在“分类”中选中“外观（HTML）”选项。（2）单击“文本”右侧的按钮，弹出颜色面板。使用取色滴管选取文本颜色（例如黑色#000000）（见操作演示）。（3）单击“链接”、“已访问链接”、“活动链接”右侧的按钮，弹出颜色面板选项，分别设置链接颜色（例如黑色#000000）、已访问链接（例如红色#FF0000）、活动链接的颜色（例如兰色#0000FF）。,任务1-7 设置页面属性,【子任务1-7-4】设置网页页面边距通过设置页面边距，可以使网页周围留出一些距离，也可以设置不留距离。操作步骤如下：（1）打开“页面属性”对话框，在“分类”中选中“外观（HTML）”选项。（2）直接在边界框中输入边距数值，（见操作演示）。左边距：0（文档中左侧边缘的空白数值）。上边距：0（文档中上侧边缘的空白数值）。右边距：（文档中右侧边缘的空白数值）。下边距：（文档中下侧边缘的空白数值）。,任务1-8 制作子网页,这里以组织机构子网页制作为例，简述其制作过程。【子任务1-8-1】制作“组织机构”子网页操作步骤如下：（1）在文件面板中展开HTML文件夹，双击jigou.html，组织机构子网页jigou.html出现在文档窗口中。（2）参照任务5的操作方法，输入文本“计算机多媒体121班组织机构”，设置字体为黑体、字号为36、居中对齐。（3）参照任务5的操作方法，创建2个绘制层，用于输入班委会和团支部成员名单。设置字体为黑体、字号为16、居中对齐，层背景色为#999900等。（4）参照任务7，设置网页文档标题为：“组织机构”，背景图像为imagebg3.jpg（5）单击“在浏览器中预览”按钮，效果不满意可进行修改，效果满意后，执行“文件”菜单中的“保存”命令将文件存盘。“组织机构”子网页核心部分效果如图所示。【子任务1-8-2】其它子网页制作其它子网页参照子任务1-8-1进行制作，这里不再详述。,任务1-8 制作子网页,组织机构子网页核心部分效果图,任务1-9 建立网页之间的链接,【子任务1-9-1】建立文字导航的超级链接超级链接可以是一段文本、一幅图像或者其他的网页元素。这里以文字导航为例来建立链接。操作步骤如下：（1）首先选中设置超级链的文字，如“组织机构”。（2）单击属性面板中的“浏览文件”图标，弹出“选择文件”对话框（如图示），双击打开“html”文件夹，。单击选中与“组织机构”相链接的网页文件jigou.html，单击【确定】按钮后，在属性面板的链接框内显示出链接的网页文件及路径。也可以在“链接”框中直接输入需要链接的网址或文件路径。（见操作演示）（3）建立超级链接的文字颜色默认呈蓝色，并且出现一条下划线。（4）参照步骤（1）（3），设置其他导航栏的文字链接。,任务1-9 建立网页之间的链接,“选择文件”对话框,任务1-10 浏览网页,一个网页制作完成后，可以在浏览器中预览，并根据预览效果再对网页进行调整。【子任务1-10-1】在浏览器中预览“班级风采”主页操作步骤如下：（1）执行“文件”“在浏览器中预览”“预览在IExplore”菜单命令，或按快捷键【F12】启动IE浏览器，并将当前编辑的网页显示在窗口中。也可单击文档工具栏上的【在浏览器中预览】按钮，再执行“预览在IExplore”命令。（2）将鼠标指向链接的文字或图像时，鼠标形状变为手形，状态栏将显示被链接文件的名称，单击即可切换到链接的页面。,任务1-11 保存网页,随时保存文件是编辑任何文档时应该有的良好习惯。在制作网页的过程中，随时有可能发生断电或机器故障，而Dreamweaver编辑器没有自动保存的功能。因此，要经常地保存正在编辑的网页，以避免由于意外而导致辛勤劳动付之东流。【子任务1-11-1】保存网页操作步骤如下：（1）执行“文件”“保存”菜单命令，或单击标准工具栏上的【保存】按钮，或按快捷键【Ctrl】+【S】（2）如果网页文件已经建好或以前保存过，则文件继续保存；如果文件从未保存过，则弹出“另存为”对话框，（3）在“保存在”列表中选择一个文件路径（注意：网页文件应保存在站点文件夹内），在“文件名”文本框中输入文件名，“保存类型”选择html文件，最后单击【保存】按钮。,任务1-11 保存网页,“另存为”对话框,1.2 班级风采网站制作相关知识,知识点1-1 网页与网站的概念,1.网页的概念Web，直译过来就叫“网”，它的含义是通过超级链接将各种文档连接起来，形成一个大规模的信息集合。网页(即Web页)是能够被浏览器软件识别的文本文件，扩展名一般为.htm或.html。是使用网页制作工作编辑生成或使用HTML语言编写的超文本，网页里可以包含文字、表格、图像、声音和视频等网页元素。每个网页都是磁盘上的一个文件，可以单独浏览。网页是组成网站的特殊成分，图像、声音、和视频等文件均需要通过网页才能让浏览者看到。,知识点1-1 网页与网站的概念,2网站的概念与分类（1）网站的的概念网站，也称作站点，英文的名称是WebSite。从逻辑上讲网站就是一个建构在网络上、具有独立名称的逻辑上的独立体。再简单来讲，就是一组具有特殊连接方式的页面群，表现出来就是我们常说的一个网站，比如网易、搜狐、新浪、百度等知名网站。我们个人做的网站虽然规模上不能和大站相比，但它在结构上也是完全独立的。从物理意义上讲，所有的网站都架构在连接到因特网的服务器上，其具体网页文件都存放在一个网站文件夹中。（2）网站的分类网站的分类方式有多种，这里我们仅就网站的内容与网站的交互性两方面来分类。按内容分类搜索引擎式网站：以搜索引擎为主要功能。如百度、一搜、Google等。综合性门户网站：以新闻信息、娱乐资讯等为主要功能。如搜狐、新浪、网易、雅虎等。电子商务网站：主要用于网上交易。如：阿里巴巴、易趣等。即时通讯网站：用于实时性网上通讯交流。如腾迅QQ、雅虎等。小型专题或个人网站：多以宣传创建者自身，提供信息，或就某一专题提供最新资讯、历史资料及相关论坛等内容为主要形式。小型企事业网站或个人网站大多采用这种形式。按网站交互性来类单向传递：这类网站重点在宣传自身、介绍产品、发布新闻等。与传统媒体的传播方式相类似，主要是提供资料供用户浏览，其它交流功能则较少。双向交流：更注重网络与用户间信息的互动，网站可按用户的需求提供各种形式的检索，并且用户在网上获取信息的同时，网站也可接收到来自用户的信息，实现信息共享，用户还可加入各种网上互动活动，如参加论坛讨论，进行在线游戏等。,知识点1-1 网页与网站的概念,3.网页是如何被浏览的网页浏览是通过浏览器来实现的，浏览器是专门用于浏览网页的软件，常用的浏览器软件有Microsoft的IE和Netscape的Navigator等。HTML文件中还定义了网页中的各种对象（如：文字，图片，声音，图像，动画）的位置，外形和色彩，各种图像，声音，动画等文件则是网页的素材。浏览网页属于Internet所提供的WWW服务。网页浏览者在浏览网页时，实际上是将HTML文件及相关的文本、图像、声音等文件下载到自已本地计算机中，然后由浏览器程序对HTML文件进行解释后显示网页内容。,知识点1-1 网页与网站的概念,4.网页制作常用术语（1）HTML文件用超文本标记语言编写的超文本文件称为HTML（HyperText Mark-up Language）文件，它能不受各种操作系统限制，独立地运行于各种操作系统平台之上。HTML文件作用：HTML语言主要用于静态网页设计，自1990年起HTML语言就一直被用作World Wide Web（WWW）上的信息表示语言，用于描述网页的格式，设计它与WWW上其它主页的链接信息。HTML文件是网页的源文件，是一个放置了标记的ASCII文本文件，通常以.htm或.html为扩展名。（2）服务器和客户机浏览者在访问网页时，是由浏览者本地的计算机向存放网页的远程计算机发出一个请求。远程计算机在收到请求后，将所需要的浏览内容（即网页）发送给本地计算机。那么本地的计算机被称为客户计算机（Client），远程存放网页的计算机被称为服务器（Server），根据服务器上运行的程序类型及服务器与客户所使用的通信协议作用的不同，服务器可分为WWW服务器，FTP服务器等。（3）IP地址和域名IP地址：为了使连接在Internet上的计算机能够互相识别并进行通信，每台连入Internet的计算机必须有个“标识号”，这个标识号便是计算机在Internet中的地址。这个地址是由IP协议进行处理的，故称为计算机的IP地址。IP地址是一个32位的二进制数，IP地址的写法是按8位为一组分成4组，组与组之间用小数点分隔，每组数值用十进制数表示。如:某台计算机的IP地址为202.121.160.78。IP地址包含两部分:一部分是网络号,用以区分在Internet上互联的各个网络;另一部分是计算机号,用以区分在同一网络上的不同计算机。域名：Internet规定了一套命令机制，称为域名系统DNS（Domain Name System）。按域名系统定义的计算机名字称为域名。如：当用户用域名来访问远程的计算机时,必须由Internet的DNS的名字服务器(Name Server)将域名翻译成对应的32位IP地址,然后才能完成对远程计算机的访问。,知识点1-1 网页与网站的概念,（4）统一资源定位器（url）统一资源定位器（Uniform Resource Locator）是全球WWW网服务器资源的标准寻址定位源码，用于确定资源相应的位置及所需检索的文件。其优点是用字符串来指向所需的信息，从而进行资料的检索。URL 由3部分组成:Internet协议 域名 主机路径及文件名例如：http:/文本传输协议telnet:远程登陆协议（5）文件传输协议(FTP)文件传输协议(FTP)(File Transfer Protocol)用于网络节点间文件的双向传输,是实现资源共享的重要方式和有效手段之一。FPT 是支持用户实现把文件从一台计算机中传输到另一台计算机中,并且能保证传输的可靠性。用户在本地计算机上做好的主页除了用Dreamweaver上传之外。还可以用FTP上传到达远程的主机中。常用的FTP工具有CuteFTP和LeapFTP等。,知识点1-1 网页与网站的概念,（6）虚拟主机虚拟主机是使用特殊的软、硬件技术把一台服务器主机分成几十个“虚拟”的服务器主机，每台虚拟主机都具有独立的域名和IP地址（或共亨的IP地址），具有完整的Internet服务器功能。虚拟主机之间完全独立，在外界看来，每台虚拟主机和一台独立的服务器主机完全一样。多台虚拟主机共亨真实主机的资源，这样就可以把网络的开销费用均摊到每台虚拟主机上。可利用虚拟主机技术建立个人主页，在大型网站上（提供存放主页的免费空间，提供免费域名）申请主页空间和域名（免费或收费），获得成功后，把你制作的网页存放在虚拟主机上，这样你就好象在Internet上拥有了自己的服务器和网站。,知识点1-1 网页与网站的概念,（7）网站的发布网站制作好后还需要发布才能被浏览者浏览。网站的性质不同，发布方式也不同。企业级商业网站的发布如果企业有足够的资金和技术支持，可以考虑创建自己的网络中心。硬件方面需要有性能稳定的服务器、路由器、交换机，并要向当地的电信部门申请网络专线。同时需要有一定数量的专人对网站进行维护和管理。中小企业级或小型组织社团的网站发布如果没有条件创建独立的网站硬件环境，或者网站规模并不大，不需要创建独立的网站硬件环境，可以选择以下几种小型网站的解决方案。租赁虚拟主机：如果网站的内容不是很多，也不需要大量的服务器空间支持数据库，可以采用这种发布方式，也就是租用ISP主机服务器的一定空间来发布网站，一年需要支付少量费用，就可以建立一个功能比较强大的网站。目前，这是大多数中小企业和社会团体、较具规模的各种组织网站多采用的模式。服务器托管：如果在网站里需要大量数据库支持，可以采用这种方式。将网络服务器主机存放在某个ISP的网络中心里，借用他们的通信系统接入因接网。ISP的人员还可代为维护，这样既可以节省相当的网络管理人员和许多通信设备，又能保证网站的性能要求。DDN专线接入：这种方式有些类似于服务器托管，就是也有自己的服务器，但不是存入放在ISP网管中心，而是存放在自己的机房中，利用DDN或其他专线接入方式与ISP的通讯系统相连，由ISP连入因特网，这种方式的费用也很高，因为专线多是每月要收比较贵的月租费，而且还有一个容量问题，如果专线容量较小，网站所能被访问的人数就会较少。免费主页空间如果只是想建立一个小型的、功能简单的网站，当然也可采用以上形式，但这需要有相应有费用支持，投资与效益的比例关系需要权衡。如果目前还不想投资太多，那么免费主页空间将是较好的选择。但现在较好的免费主页空间不多，且一般不支持ASP、JSP、CGI等高级功能。,知识点1-1 网页与网站的概念,（8）超文本、超媒体、超链接超文本文件（HyperText）就是指在文本中包含了与其他文本的链接的文件。超级链接文本下方带有下划线。超媒体（Hypermedia）进一步扩展了超文本所链接的信息类型。超媒体文件就是一种文字、影像、图片、动画、声音综合在一起的文件。超链接（Hyperlink）是WWW上使用最多的一种技术，是网页的灵魂，它的作用是建立网页之间的联系。通过超级链接，浏览者能够方便自由地在网页、网站乃至整个因特网上遨游。在网页中，当鼠标移到超链接处，会呈现手的形状，表示单击该处，可以链接到该提示所指的页面。（9）主页网站向用户提供的最初起始页面叫主页（Homepage），也称为首页。主页是进入网站的门户，一般是整个网站的第一页，是网站中所有网页文件的起点和交点。主页中通常包括通向其他相关页面的超级链接，还应包括站点的基本信息和主要内容，使浏览者一目了然地了解站点的基本主题，了解站点的信息是否对自己有用。,知识点1-2 网站设计与制作流程,确定主题搜集材料规划网站制作网页测试评估正式上传推销网站维护更新网站规划-网站制作-后期维护网站设计是一个系统工程，具有特定的工作流程，遵循这个流程，才能设计出令人满意的网站。网站设计制作主要分为网站规划、网站制作、后期维护三个阶段。,知识点1-2 网站设计与制作流程,1.网站规划制作网页如同泼墨作画，首先要进行构思，然后再加以实现。这种构思就是网站规划。网站规划的总体原则有两个：一是为读者提供有用信息，二是要美观。（1）确定网站的主题与名称网站的主题是指建立的网站所要包含的主要内容。例如，教育、旅游、体育、新闻、医疗、时尚、娱乐、搜索等。其中每一大类又可细分为若干小类。一般来说，确定网站主题应遵循以下原则：主题鲜明；明确设立网站的目的；体现自己的个性。网站的名称起着很重要的作用，它在很大程度上决定了整个网站的定位。一个好的名称必须简洁、有概括性、有特色、容易记，还要符合自己主页的主题和风格。（2）搜集材料确定网站主题后，要围绕主题搜集材料，作为自己制作网页的素材。,知识点1-2 网站设计与制作流程,（3）规划网站规划网站就象设计师设计大楼一样，只有图纸设计好了，才能建成一座漂亮的楼房。规划网站时，首先应把网站的内容列举出来，根据内容列出一个结构化的蓝图，根据实际情况设计各个页面之间的链接。规划网站的内容应包括：栏目的设置、目录结构、网站的风格（即颜色、搭配、网站标志Logo、版面布局、图像的运用）等。主题栏的设置在设计网站的主题栏与版块时应注意以下几个问题：突出主题，把主题栏放在最明显的地方，让浏览者更快、更明确地知道网站所表现的内容。设计一个最近更新栏目，让浏览者一目了然地知道更新内容。栏目不要设置太多，一般不超过10个。目录结构设计目录结构设计一般应注意以下问题：按栏目内容建立子目录。每个栏目下分别为图像文件创建一个子目录image（图像较少时可不创建）目录的层次不要太深，主要栏目最好能直接从首页到达。尽量使用意义明确的非中文目录。颜色搭配合理的应用色彩是非常关键的，不同的色彩搭配产生不同的效果，并能影响浏览者的情绪。网页选用的背景应和页面的色调相协调，色彩搭配要遵循和谐、均衡、重点突出的原则。,知识点1-2 网站设计与制作流程,（3）规划网站 网站标志LogoLogo最重要的作用就是表达网站的理念，便于人们识别，广泛地用于站点链接和宣传。如同商标一样，Logo是站点特色和内涵的集中体现。如果是企业网站，最好是在企业商标的基础上设计，保持企业形象的整体统一。设计Logo的原则是：以简洁、符号化的视觉艺术把网站的形象和理念展示出来。版面布局网页页面的整体布局是不可忽视的。要合理地运用空间，让网页疏密有致、井井有条。版面布局一般应遵循的原则是：突出重点、平衡和谐，将网站标志（Logo）、主菜单等最重要的模块放在突出的位置，然后再排放次要模块（例如搜索、计数器、版权信息、E-mail地址等）。此外，其他页面的设计应和首页保持相同的风格，并有返回首页的链接。图像的运用网页上应适当地添加一些图像，使用图像一般应注意以下几个问题：图像是为主页的内容服务的，不能让图像喧宾夺主。图像要兼顾大小和美观。图片不仅要好看，还应在保证图片质量的情况下尽量缩小图片的大小（即字节数）。图像过大会影响网页的传输速度。合理地采用JPEG和GIF图像格式。颜色较少的（256色以内）图像，可处理为GIF格式，色彩比较丰富的图像，最好处理为JPEG格式。,知识点1-2 网站设计与制作流程,2 网站制作（1）制作网站制作网站主要包括以下步骤：建立本地站点。建立站点根文件夹，用于存放首页、相关网页和网站中用到的其他文件。在站点根文件夹下创建子文件夹。为了使文件安排比较清晰，将页面文件和图像文件分开存放。向站点添加所需要的空网页。设计网页尽寸。页面大小一般可选择800600或1024768规格。设计网页属性，包括页面标题、背景图像、背景颜色、链接颜色、文字颜色等。向网页中插入文本、图像、动画等对象。建立所需要的超级链接。预览和保存网页。（2）上传与测试测试评估与正式上传是不可分割的两部分。制作完毕的网页，必须进行测试。测试评估主要包括上传前的兼容性测试、链接测试和上传后的实地测试。完成上传前所需要的测试后，利用FTP工具将网页发布到所申请的主页服务器上。网站上传后，继续通过浏览器进行实地测试，发现问题，及时修改，然后再上传测试。,知识点1-2 网站设计与制作流程,3后期维护（1）推销网站网页上传后，需要不断地进行宣传，以便让更多的朋友认识它，从而提高网站的访问率与知名度。推广网站的方法很多，例如，利用E-mail、新闻组、与别的网站交换链接（友情链接）、到搜索引擎上注册、加入交换广告等。（2）维护更新网站必须定期维护、定期更新，只有不断地补充新内容，才能吸引浏览者。同时，随着软硬件的进步，网页的设计也应由文字向多媒体、由平面图像向立体动画或影片、由单向传播向交互式发展。,知识点1-3 初步认识Dreamweaver CS5,1.中文Dreamweaver CS5工作环境中文Dreamweaver CS5提供可视化的网页开发环境,具有所见即所得的功能。它的工作窗口简洁明了，功能面板及工具栏中几乎集中了所有的重要功能，属性面板放在窗口底部外，其他面板放在窗口的右边，可随时打开与关闭，这样就克服了以往版本浮动面板位置较乱，有时会影响网页编辑的不足。中文Dreamweaver CS5工作环境即中文Dreamweaver CS5应用程序窗口，该应用程序窗口由菜单栏、文档工具栏、文档编辑窗口、浮动面板等组成，文档编辑窗口由文档标题栏、页面编辑区、状态栏等组成，浮动面板包括属性面板、面板组等，面板组包括插入面板、CCS样式/AP元素面板、文件/资源面板等。中文Dreamweaver CS5工作环境如图所示：,知识点1-3 初步认识Dreamweaver CS5,中文Dreamweaver CS5工作环境,知识点1-3 初步认识Dreamweaver CS5,(1)菜单栏和其他应用软件基本相同，菜单栏中的每一项都有一个下拉式菜单，Dreamweaver CS5中大部分操作都可以通过菜单项的下拉菜单来实现。(2)文档工具栏文档工具栏包含可在代码视图、设计视图、拆分视图之间快速切换的按钮，并包含一些与选定视图有关的常用命令。选择【查看】【工具栏】菜单命令，可以在窗口中显示或隐藏文档工具栏。“代码”按钮：在文档中显示代码视图。在代码视图中，可以直接查看和编辑HTML源代码。“拆分”按钮：同时显示代码视图与设计视图。在代码视图显示在左侧，设计视图显示在右侧。“设计”按钮：在文档中显示设计视图。设计视图是中文Dreamweaver CS58编辑过程中的默认方式，可以达到所见即所得的效果。“标题”文本框：显示或编