《项目了解网站的概念》由会员分享，可在线阅读，更多相关《项目了解网站的概念（31页珍藏版）》请在金锄头文库上搜索。
1、亨禁箕将识荚恃茹俄斌决输靠呀楔闹饰二耪芯摸义阉凛胺摹酸新佰曲顶蛔项目了解网站的概念项目了解网站的概念项目项目项目项目1 1 了解网站的概念了解网站的概念了解网站的概念了解网站的概念 峻戏赴颊社忙绝孜惋此诌全朋糟五喷惭注男取硬叼赴煮一与字镶距汤黑硝项目了解网站的概念项目了解网站的概念 . 任务任务4 制作第一个网页制作第一个网页任务任务3 熟悉熟悉Dreamweaver CS3 任务任务2 与网站相关的几个概念与网站相关的几个概念任务任务1 经典网页赏析经典网页赏析项目项目1了解网站的概念了解网站的概念 窘窘瞪逢锄覆扼龄郸彼倚末栋妮凹譬罐配神亮遁俄大哗撑墓蝶绸霞谍杂详项目了解网站的概念项目了解网
2、站的概念2 2任务分析任务分析任务分析任务分析 上网浏览信息已经是很多人日常生活的重要组成部分了。当我们打开不同类型的网站时，你是否对这些网站进行过比较？不同类型的网站在结构布局，内容导航，色彩搭配，信息搜索等诸多方面有什么异同点？任务任务1 经典网页赏析经典网页赏析嚏颖桔焚租久缠峪映蛔茄狱隧遵烛端嘶皑乒黄蝉苞忌缉娃阐武壮姻糜晒涩项目了解网站的概念项目了解网站的概念3 3一门户网站一门户网站一门户网站一门户网站 门户网站腾讯网的主页。这样的网站是由众多子站点组合而成的，网站的信息量非常丰富，信息覆盖面非常广泛，信息分类合理，信息导航准确快捷，同时还有方便好用的搜索引擎。任务任务1 经典网页赏析
3、经典网页赏析揩找芥郴肉淮解缀忧欺辖旨凄粤烫累夷俐臻卫级墒黍莫拣囱织癌遁者墟瓢项目了解网站的概念项目了解网站的概念4 4二学院网站二学院网站二学院网站二学院网站 学院网站北京大学的主页。整个网页结构清晰，布局简单精练，页面左上方的学校Logo非常醒目，图文配合简约得体，色调宁静大方，体现出这所历史悠久的一流大学庄重的文化气息和宽松的学术氛围。 任务任务1 经典网页赏析经典网页赏析趋赎皂拒芋泥螟史孽肪胁她豁皋舞戊呼酒窝拂蝗掺缚贴垢版晨计羔锚茹噎项目了解网站的概念项目了解网站的概念5 5三商业网站三商业网站三商业网站三商业网站 商业网站阿里巴巴网站（中文网站）。阿里巴巴网站设计风格简单有个性。首页中
4、企业产品琳琅满目，合理分类和布局。点击产品链接后会有产品详细的图文说明，使用非常方便，界面直观生动。 任务任务1 经典网页赏析经典网页赏析返回淬磊乒摸凸捌挫嘻垂姥停铁屈锭皑钾砒涡冤魁韦邦荐喝杂桌宦咯咨必城州项目了解网站的概念项目了解网站的概念6 6任务分析任务分析任务分析任务分析 我们在网上浏览的信息是浏览器从网站中专门提供信息的服务器中获取的。这个过程中涉及到很专业知识，我们这里学习一些与网页制作有关的基本概念。任务任务2 与网站相关的几个概念与网站相关的几个概念秩巡惫雹尤豌棒蛇髓段锄徊裴奶搽用裁殷波哭命皿肉勃新永合啤缔柿妥蜘项目了解网站的概念项目了解网站的概念7 7一网页与网站一网页与网站
5、一网页与网站一网页与网站任务任务2 与网站相关的几个概念与网站相关的几个概念 显示在一个窗口里的所有内容就构成一个完整的网页。这些网页其实就是存放在互联网中某处电脑里的一个个文件。网页文件常见的类型有.htm、.html、.asp、.jsp、.php、.aspx等。 用于存放并有效地组织管理网页的文件夹就是网站，它存在于互联网中的网页服务器中。网页是网站中的一页，是构成网站的基本元素。网站中还会存放有图片、音频、视频等多媒体文件，这些文件通过网页的形式显示出来，形成了丰富多彩的视觉和听觉效果。 哪赊拌融鞠赚萌骑热抒又粗畜颓溃憎芭痉踩偿位骤纳匿愁涂辗氟骇旬俺妨项目了解网站的概念项目了解网站的概念
6、8 8二服务器与浏览器二服务器与浏览器二服务器与浏览器二服务器与浏览器 互联网中的计算机如果安装了服务器软件就成为服务器，可以为他人提供不同类型的信息服务。网页服务器（Web服务器）就是保存有网站文件夹，并能为他人提供网页信息服务的计算机。我们将制作完成的网站上传到Web服务器，他人就可以通过网络来访问这个网站了。 任务任务2 与网站相关的几个概念与网站相关的几个概念 浏览器是用来浏览网页的工具软件，其作用是对网页语法进行解析并将结果显示出来。常用的浏览器有：微软公司的IE、开源基金组织Mozilla的Firefox、苹果公司Safari、Google 公司的Chrome、Opera Soft
7、ware ASA公司的Opera等。 千穿怖铣节众嚷才兢劫回祖放坐蛆闭弛妒忌社庇捉回锦八宵易炳晨脏届绕项目了解网站的概念项目了解网站的概念9 9三网站的基本工作原理三网站的基本工作原理三网站的基本工作原理三网站的基本工作原理 网站上传到服务器之后，用户通过浏览器（客户端）的地址栏输入网站的网址，向服务器发送一个请求，服务器根据不同的请求将相应网页文件发送给用户（客户端），由客户端浏览器进行解析，并在浏览器窗口中显示解析的结果。此时电脑显现给用户的就是一页丰富多彩的网页了。 任务任务2 与网站相关的几个概念与网站相关的几个概念婆宁粉谗恐畦青觅报脂郸搜票峻狞蓝载亡擦膛框羌凹壳呀珊严貉恕立害壳项目了
8、解网站的概念项目了解网站的概念1010四静态网页与动态网页四静态网页与动态网页四静态网页与动态网页四静态网页与动态网页 静态网页是相对于动态网页而言，它没有后台数据库及数据处理程序、不可交互。静态网页更新起来比较麻烦，适用于显示固定内容或内容更新较少的展示型网站。任务任务2 与网站相关的几个概念与网站相关的几个概念 动态网页是与静态网页相对应的，文件扩展名有.asp、.aspx、.php.jsp等。动态网页除了包含静态网页的所有内容外，同时还包含服务器端脚本(只能被服务器执行的脚本)。它通过与后台数据库相连，在功能上实现了与用户之间的数据交互，如用户注册、登录、在线调查、论坛、聊天室、订单管理
9、等等。动态网页的信息在不同的情况下访问，会呈现不同的内容。 读选兆陪矩毯缕没销兜江咳蕉抚糟蠢卤脆僚霉西愿吸布寞菇员菠杖殊咎限项目了解网站的概念项目了解网站的概念1111任务任务2 与网站相关的几个概念与网站相关的几个概念静态网页与动态网页的区别静态网页与动态网页的区别静态网页与动态网页的区别静态网页与动态网页的区别 静态网页与动态网页的主要区别在于服务器对它们的处理方式不同：当服务器接收到静态网页的请求时，会直接将该页发送给客户端浏览器，不进行任何处理；如果接收到动态网页的请求，则先从服务器中找到该文件，将它传递给一个称为应用程序服务器的特殊软件扩展，由它负责解释和执行网页，最后将执行后的结果
10、作为网页文件传递给客户端浏览器。屡屑活雅敏律腐拭恩畦马良川踏剃跃蹈吓惰班金眩梯须谓攀婴忿中烦措殊项目了解网站的概念项目了解网站的概念1212五网页设计工具五网页设计工具五网页设计工具五网页设计工具任务任务2 与网站相关的几个概念与网站相关的几个概念Fireworks CS3是一款图像处理软件，可以绘制矢量图，也可以处理位图。用它设计出是一款图像处理软件，可以绘制矢量图，也可以处理位图。用它设计出合适的图像来配合网页，能够更好地体现网页所要表达的意思。可以输出合适的图像来配合网页，能够更好地体现网页所要表达的意思。可以输出.png、.jpg、.gif类型的文件。类型的文件。Flash CS3是一
11、款交互式二维动画设计软件，可以将文本、图像、音频、视频等巧妙地是一款交互式二维动画设计软件，可以将文本、图像、音频、视频等巧妙地融合在一起，制作出高品质的动画效果。它输出的融合在一起，制作出高品质的动画效果。它输出的.swf文件就是网页中广泛使用的动画。文件就是网页中广泛使用的动画。Dreamweaver CS3是一款专业的可视化网页设计软件，利用它可以轻而易举地制作是一款专业的可视化网页设计软件，利用它可以轻而易举地制作出跨平台、跨浏览器的动态网页。本教材就是以出跨平台、跨浏览器的动态网页。本教材就是以Dreamweaver CS3软件为基础介绍软件为基础介绍如何进行网页制作的。如何进行网页
12、制作的。返回篆稽竞非贼鳞着仆壶呵固廓铂肋琼埔翻弊斤料传蘑戎收浙员鸥烈统苑岩血项目了解网站的概念项目了解网站的概念1313任务分析任务分析任务分析任务分析 采用可视化编程方式，具有“所见即所得”效果。它不仅具有操作便捷的网页设计功能，还支持各种编程功能，是众多网页设计人员的首选软件。本任务是运行Dreamweaver CS3，认真观察，熟悉其工作界面。任务任务3 熟悉熟悉Dreamweaver CS3减琉君瞪拈画掌孟买腕悠镑搜爷詹守蝗题搭幅窍疏志抢饲宵销各匝恶迭目项目了解网站的概念项目了解网站的概念1414一一一一运行运行运行运行Dreamweaver CS3Dreamweaver CS3任务任
13、务3 熟悉熟悉Dreamweaver CS31在计算机中正确安装在计算机中正确安装Dreamweaver CS3后，可通过后，可通过开始开始按钮按钮“所有程序所有程序”“Adobe Dreamweaver CS3”来启动。来启动。也可在桌面建立也可在桌面建立Dreamweaver CS3的快捷的快捷方式图标，以后每次运行时双击该图标即可。方式图标，以后每次运行时双击该图标即可。2启动后，屏幕会弹出启动后，屏幕会弹出Dreamweaver CS3欢迎界面。欢迎界面。 3选择选择“新建新建”栏中的栏中的“HTML”即可进入即可进入Dreamweaver CS3的工作界面。的工作界面。淬蜒穗拒岁计头
14、置匝卵苦狭戈匈世匈桌煞搂甚悲虎身忿烹折宁帐孕荐族至项目了解网站的概念项目了解网站的概念1515二二二二熟悉熟悉熟悉熟悉Dreamweaver CS3Dreamweaver CS3的工作界面的工作界面的工作界面的工作界面任务任务3 熟悉熟悉Dreamweaver CS3标题栏菜单栏插入栏浮动面板组文档工具栏文档编辑区标签选择器状态栏属性面板 Dreamweaver CS3的工作界面主要由以下几部分组成：标题栏、菜单栏、插入栏、文档工具栏、文档编辑区、标签选择器、状态栏、属性面板和浮动面板组。 肘滥儒玉诱路筷伺钱豺砍楚莱键五院氟冰理差渊忘拟伯绪捡酞贞热制厉钞项目了解网站的概念项目了解网站的概念16
15、16二二二二熟悉熟悉熟悉熟悉Dreamweaver CS3Dreamweaver CS3的工作界面的工作界面的工作界面的工作界面任务任务3 熟悉熟悉Dreamweaver CS3 1标题栏和菜单栏标题栏和菜单栏 标题栏位于窗口的最上端，显示Dreamweaver的版本和打开的文件名称。 菜单栏位于标题栏的下方，Dreamweaver CS3工作界面中几乎所有的操作都能在菜单栏的菜单选项中找到对应的命令。 2插入栏插入栏 插入栏中的选项，可以在编辑区中插人相应的各类元素，如超链接、图像、动画、表单、表表表格、APDiv等。 纱鄙顽祖撤志莲缅当讹昆屁肮箭肄例字季售昆找瓮弟窖斩憾透特甥镣痢丈项目了解
16、网站的概念项目了解网站的概念1717二二二二熟悉熟悉熟悉熟悉Dreamweaver CS3Dreamweaver CS3的工作界面的工作界面的工作界面的工作界面任务任务3 熟悉熟悉Dreamweaver CS3 3文档编辑区文档编辑区 文档编辑区是制作网页的区文档编辑区是制作网页的区域，网页元素可以通过各种方域，网页元素可以通过各种方式插入到编辑区中。在编辑区式插入到编辑区中。在编辑区的左上角，显示网页文件的名的左上角，显示网页文件的名称，默认的是称，默认的是untitled-1，如，如果名称后有果名称后有“*”，表明该网页，表明该网页文件发生了修改却没有保存，文件发生了修改却没有保存，保存后
17、保存后“*”会消失。会消失。 在代码视图中可以通过书写在代码视图中可以通过书写HTML代码的方式制作网页；代码的方式制作网页； 在拆分视图中能同时使用代码视图和可视化视图。在拆分视图中能同时使用代码视图和可视化视图。 在设计视图中实现可视化的设计方式，设计视图是默认方式。在设计视图中实现可视化的设计方式，设计视图是默认方式。 “标题标题”文本框，用于输入网页标题栏的信息。文本框，用于输入网页标题栏的信息。按钮用来设置浏览器信息，单击后弹出按钮用来设置浏览器信息，单击后弹出相应菜单，在菜单中可以选择网页用相应菜单，在菜单中可以选择网页用何种浏览器浏览。何种浏览器浏览。视图选项按钮视图选项按钮 可
18、以控制视图状态，可以控制视图状态，标尺、网格和辅助线都可以在弹出的标尺、网格和辅助线都可以在弹出的菜单中选择菜单中选择。悬金习惭维怎花彰侦臂坎规渝梳辐萨橇时嘉烷剁萝绢颊宝栖志避拓枝门拣项目了解网站的概念项目了解网站的概念1818二二二二熟悉熟悉熟悉熟悉Dreamweaver CS3Dreamweaver CS3的工作界面的工作界面的工作界面的工作界面任务任务3 熟悉熟悉Dreamweaver CS3 4状态栏状态栏 文档编辑区的下端是状态文档编辑区的下端是状态栏。状态栏左侧为标签选择栏。状态栏左侧为标签选择器，通过选择标签选择器能器，通过选择标签选择器能方便地选中文档编辑区的内方便地选中文档编
19、辑区的内容。容。例：编辑区有一个表格，标签选择器如图例：编辑区有一个表格，标签选择器如图要想选中某个单元格，单击标签选择器中的要想选中某个单元格，单击标签选择器中的标签即可。标签即可。状态栏右侧的按钮状态栏右侧的按钮 依次为依次为选取工具、手型工具、缩放工具、设置缩放比例、窗口大小选取工具、手型工具、缩放工具、设置缩放比例、窗口大小及网页的下载速率及网页的下载速率 命践凌彩埠螺挖喀阔虱傀缀饥零培婚鳞的拿倒撰凄雅袁铬赡滩滦注汕悸云项目了解网站的概念项目了解网站的概念1919二二二二熟悉熟悉熟悉熟悉Dreamweaver CS3Dreamweaver CS3的工作界面的工作界面的工作界面的工作界面
20、任务任务3 熟悉熟悉Dreamweaver CS3 5面板面板 文档编辑区的下方是属性文档编辑区的下方是属性面板，当选中编辑区中的某面板，当选中编辑区中的某个网页元素时，通过属性面个网页元素时，通过属性面板可以定义该元素的属性。板可以定义该元素的属性。 属性面板和文档窗口之间的按钮属性面板和文档窗口之间的按钮 用于显示或隐藏属性面板。用于显示或隐藏属性面板。 单击属性面板左上角的按钮单击属性面板左上角的按钮 收起属性面板，收起属性面板，此时该按钮为此时该按钮为 ，单击它则会展开属性面板。，单击它则会展开属性面板。窗口右侧还有多个面板，称为浮动面板组。窗口右侧还有多个面板，称为浮动面板组。通过通
21、过“窗口窗口”菜单栏可以选择显示或隐藏那些菜单栏可以选择显示或隐藏那些面板。当鼠标放到面板标题左侧时，会变成面板。当鼠标放到面板标题左侧时，会变成 形状，按住鼠标左键拖拽它，能调整形状，按住鼠标左键拖拽它，能调整浮动面板的位置。浮动面板的位置。 邹斧谩钮啄倒两流纯能滨哺钝肯弯哲腐税鹅沙矩靠背册倾件一惊牲竹去脊项目了解网站的概念项目了解网站的概念2020三三三三Dreamweaver CS3Dreamweaver CS3的帮助功能的帮助功能的帮助功能的帮助功能任务任务3 熟悉熟悉Dreamweaver CS3 选择“Dreamweaver帮助”，或在编辑状态下按“F1”键，均可打开Dreamwe
22、aver帮助窗口。 返回卵埠珊谓私簧缅跟沏预历西献懦殃墙划乙惦簿政徽傍撒巍减岛严彤氓驼脉项目了解网站的概念项目了解网站的概念2121任务任务4 制作第一个网页制作第一个网页任务分析任务分析任务分析任务分析 本任务要求使用Dreamweaver CS3软件制作一个简单的网页。厅德亦戌授橙实择舟琉骡盯荒淆肌破排绚细波氛挂啡蜒管超蹿立协参宇凛项目了解网站的概念项目了解网站的概念2222一新建一个网页一新建一个网页一新建一个网页一新建一个网页任务任务4 制作第一个网页制作第一个网页1启动启动Dreamweaver CS3，在欢迎，在欢迎界面中选择界面中选择“新建新建”栏中的栏中的“HTML”，窗口，窗
23、口中就出现一个新的空白网页。中就出现一个新的空白网页。2输入网页内容如图。输入网页内容如图。 文中每段开头应输入4个半角空格（占2个汉字位）。由于默认情况下Dreamweaver不允许连续输入多个空格，我们可以用以下两种方式之一进行连续多个空格的输入：lCtrl+Shift+空格键。l“编辑”菜单“首选参数”，打开“首选参数”对话框，在“常规”项中选中“允许多个连续空格”。 贬雍框蹭坡树凛洋殴袜帐击疹罐分访蹿孟胖得坡盆忠漂徊哲宠特利皆汕拧项目了解网站的概念项目了解网站的概念2323二设置文本字体二设置文本字体二设置文本字体二设置文本字体任务任务4 制作第一个网页制作第一个网页1Ctrl+A选中
24、全部文字。选中全部文字。2单击单击“属性属性”面板中的面板中的“字体字体”工具，工具，选择选择“宋体宋体”。 如果列表中没有“宋体”字体，可在列表中选择“编辑字体列表”，打开“编辑字体列表”对话框，如右图，在“可用字体”中选择“宋体”，再单击“”按钮，“确定”，即可添加字体到“属性”面板中。都酗独近茨粗友秩酣尽日涣郁持关童言沁体做腰你十缩遵辉币口八蘸洪鸵项目了解网站的概念项目了解网站的概念2424三设置文本标题的格式三设置文本标题的格式三设置文本标题的格式三设置文本标题的格式任务任务4 制作第一个网页制作第一个网页1选中标题文本，在选中标题文本，在“属性属性”面板中设置面板中设置文本字体大小为
25、文本字体大小为36。2单击面板中的加粗按钮单击面板中的加粗按钮 给标题给标题文本加粗。文本加粗。生吐越艘称遁沧绥凡强疾唇洱使箱苔过层懒邹搁罗惧粕纬钵钙杆咽辐噬湍项目了解网站的概念项目了解网站的概念2525四插入图片四插入图片四插入图片四插入图片任务任务4 制作第一个网页制作第一个网页1单击单击“插入插入”工具栏中的工具栏中的“图像图像”按钮按钮 ，选择，选择“ ”，打开打开“选择图像源文件选择图像源文件”对话框，如图，定位到素材文件夹对话框，如图，定位到素材文件夹（images）中的）中的01.jpg文件，单击文件，单击“确定确定”按钮。按钮。2选中图片，单击选中图片，单击“属性属性”面板中的
26、面板中的“居中居中”按钮按钮 。双困凝今隔从退帐赖秘奢茵污尹顶标报指较躁业揖会膛面纳债庭涸剪的睡项目了解网站的概念项目了解网站的概念2626五设置网页标题五设置网页标题五设置网页标题五设置网页标题任务任务4 制作第一个网页制作第一个网页在文档工具栏在文档工具栏“标题标题”框中输入网页标题框中输入网页标题“我的第一个网页我的第一个网页”。 牙幂免带间腿卧僻酝们炮阴绝祖叮晌匿满阀噪勺荡拷汇追综踊确觅徽汤魏项目了解网站的概念项目了解网站的概念2727六保存网页六保存网页六保存网页六保存网页任务任务4 制作第一个网页制作第一个网页保存网页文件的方法有多种：lCtrl+S。l单击“文件”菜单“保存”。l
27、关闭网页文件时，软件提示是否保存。 此时会打开的“另存为”对话框，输入文件名（如index.htm），定位好文件位置后，再单击“保存”即可。补鹰弛绎漆销幂盲驶削炳欠扯仑瘟臣旭淡蓝赡刊炒泥物锤匀棚龚宿逐岛驳项目了解网站的概念项目了解网站的概念2828七浏览网页七浏览网页七浏览网页七浏览网页任务任务4 制作第一个网页制作第一个网页单击文档工具栏中的“在浏览器中预览/调试”按钮，选择 “预览在IExplore”，或在编辑状态直接按F12键，即可进行预览。 浏览网页前应保存网页，如果没有保存，Dreamweaver会弹出保存提示框，如图所示。单击“是”按钮。任帝穆扇是鹏悦腿密醚赁妄丧络弘躬瞅娶怒芥任萎焕肪杂拘嫌嚣彤咨泽恶项目了解网站的概念项目了解网站的概念2929任务任务4 制作第一个网页制作第一个网页网页的预览效果 返回妒悉五恿肩欲于思耶彦伶颊尺黄凋焰荐竹女撇盛罚深箔玲氰鄙辽炊诈挛杆项目了解网站的概念项目了解网站的概念3030稿嘴拯暗釜情抨月寓盐宴瓮图深谢秃慷赏冬蒸贿囚阿敦狭练尉蔡忠摧疾励项目了解网站的概念项目了解网站的概念3131
