计算机网设计

1江西旅游商贸职业学院史晓红主讲DreamweaverCS4网页设计与实训教程2

项目一网页设计基础

教学任务要点:网页的相关概念：网络、Internet、网页、网站、制作网页的基本步骤DreamweaverCS4的安装与启动DreamweaverCS4的操作环境创建一个新的网站教学重点与难点：DreamweaverCS4的操作环境创建一个新的网站31.1任务1网页的相关概念在制作网页之前应首先了解网络、Internet、网页、网站以及制作网页的基本步骤等相关知识。计算机网络是将地理位置不同并具有独立工作能力的多个计算机系统和其他设备通过通信线路（网络介质）互连在一起，使用通用的网络协议，实现网络资源共享和互相通信的整个信息系统。1．什么是

Internet

Internet一词来源于英文InterconnectNetworks，即“互连各个网络”

，中文译名为“因特网”。Internet专指全球范围内最大的、由众多网络相互连接而成的、基于TCP/IP协议的计算机网络。Internet是当今世界最大的计算机互连网络系统，由全球100多个国家和地区不同功能的计算机、通信骨干网和各种计算机网络通过线路连接在一起的一个世界范围的网络。42.TCP/IP

协议TCP/IP（TransmissionControlProtocol/InternetProtocol），中文译名为传输控制协议/互联网络协议），是Internet最基本的协议，是由底层的

IP协议和TCP协议组成的。TCP/IP协议的开发工作始于70年代，是用于互联网的第一套协议。TCP和IP可以单独使用，但经常是协同工作，互相补充。简单地说，IP提供了数据传输的灵活性，TCP提供了数据传输的可靠性。

53.Internet

地址(1)

Internet

地址Internet采用一种唯一通用的地址格式，为

Internet中的网络和主机分配一个地址。Internet中地址类型有

IP地址和域名地址两种。

①IP

地址②域名4.万维网、网页和网站（1）什么是万维网万维网也称做WWW，是WorldWideWeb（全球信息网）的缩写。万维网提供了非常丰富的信息，各种信息按不同的类型以网页文件的形式分别存放在万维网服务器上，供人们选择查阅。6（2）网页和网站组成WWW的基本元素是网页，网页也称为页面或Web页。①网页的定义

在网上浏览时看到的一个个页面就是网页。如图1-1所示即为一个网页的界面。②网页的分类按网页在一个站点中所处的位置可将其分为主页和内页（分支页面），主页是指进入一个站点时看到的第一页，内页（分支页面）是指与主页相链接的页面。按网页的表现形式可将网页分为静态网页和动态网页。

78③网站通常把一系列在逻辑上可以视为一个整体的页面称做网站，或者说网站就是一个相互链接的网页集合，它们可以共享。网站的概念是相对的，大网站（例如“雅虎网”和“新浪网”），页面很多，而且位于多台服务器上；小网站可以是一些个人网站，可能只有几个网页，仅在一台服务器上占据很小的空间。④网站标志（Logo）

利用一切可利用的视觉元素和方法针对主题概括出高度简洁并集中体现站点特色和内涵的图像与文字。

在设计网站标志时，可以有代表性的人物、动物和花草作为蓝本进行设计，如新浪的眼睛标志和迪斯尼的米老鼠等。最简单的方法是用网站的英文名称作标志，如新浪用字母“sina”结合眼睛图案作为标志。9⑤网站的标准色彩标准色彩用于网站的标志、标题、主菜单和主色块。网站给人的第一印象是色彩感觉，确定网站的标准色彩是相当重要的一步。在进行设计时可以参考相关的同类网站或其他网站，如IBM用深蓝色、肯德基用红色、微软用钴蓝色和新浪用黄色等。⑥网页制作基本步骤收集整理资源规划站点内容并创建站点制作网页测试站点发布站点站点维护、更新10

1.2任务2DreamweaverCS4简介

当今时代，网络成了最重要的媒体和资源宝库。制作网页可以选择学习HTML代码、也可以选择学习用软件来编辑、还可以两者兼用。

DreamweaverCS4是由美国Adobe公司推出的，一个可视化网页设计和网站管理工具软件。DreamweaverCS4是一套网页编辑软件，就算没有制作网页的基础，也能很轻松地利用它制作出漂亮的网页，只要从菜单、面板中直接套用就可以了，免除了学习HTML标签命令的困扰，也节省了很多编写源代码的时间。DreamweaverCS4有强大的网站管理功能，当修改文件名、移动或删除文件时，它自动修改相关的链接；它内置FTP功能，可以直接将文件上传到网站服务器，在网站窗口中可以看到本地端和远程网站的文件，随时检查两端的差异。111.2.1情境1DreamweaverCS4的安装与启动1、安装DreamweaverCS4安装DreamweaverCS4软件与前期版本稍有不同，但根据每一步的提示可以很轻松地安装，具体操作步骤如下：(1)安装前，请先关闭系统上所有目前正在执行的应用程式，包括其他

Adobe应用程式、MicrosoftOffice应用程式以及浏览器视窗。也建议您在安装期间暂时关闭防毒软件。(2)将

DVD放入光碟机中，然后依照画面上的指示进行。如果安装程式未自动启动，请浏览至光碟根目录下的

AdobeCS4资料夹，然后双击

Setup.exe启动安装程序(如果您是从网络下载的软件，请开启资料夹、浏览至

AdobeCS4资料夹、双击Setup.exe)，进行初始化，如图1-2所示。12图1-2初始化13(3)输入DreamweaverCS4序列号,然后单击【下一步】按钮，如图1-3所示。图1-3输入序列号14(4)阅读DreamweaverCS4许可协议，单击【接受】铵钮。(5)在显示的界面中选择要安装的Adobe组件，若安装全部组件，则单击【全选】按钮。然后单击【更改…】按钮，选择安装的路径（默认的安装路径为C:\ProgramFiles\Adobe）。(6)选择好安装的路径后，单击【安装】按钮，安装程序将显示已经做好安装准备，正在安装…,如图所示。1516(7工)完成勤安装蕉进度辛后，按显示费填写硬注册验信息志，填新写好停注册查信息漠，单煮击【立即碑注册】按钮东，如敏图所音示。(8挪)安装也完毕舒后，巧会显似示一共个安竟装完朗成界陷面，松单击【退出】按钮拦，完黄成Dr皮ea亲mw晶ea闲ve唇r腐CS掀4的安舒装。172、启搞动Dr舱ea妹mw盟ea霸ve倒r究CS变4启动Dr淡ea坦mw视ea承ve制r蔬CS流4的操床作很灭简单斗，和棋其它染软件想的启汁动方诵式基亏本一倒致。(1扇)单击菊“开济始”锤菜单绘按钮身，在炕程序涂组中袜选择【程序】→签【A锄do侧be兴D在re吉am蒜we什av坦er颈C道S4灭】命令棕，即押可启烧动Dr摘ea凶mw紧ea半ve添r队CS暖4软件注。(2皮)首次病启动Dr菊ea昂mw车ea匙ve言rCS绘4时，液会弹劲出【默认丢编辑亿器】对话伟框，肠用户吃可为Dr硬ea昏mw背ea许ve巩rCS叼4设置猎编辑劈燕器。18(3堡)在此希保持拉默认挖设置呼，单述击【确定】按钮骂，此毯时将执打开Ad侄ob跑e法Dr鱼ea茧mw局ea违ve剃r灿CS藏4欢迎杀屏幕瞎，如筐图所耕示。19提示孟：选仍择欢步迎屏闸幕下文方的稍“不散再显惜示”判复选态框，夜再次熟启动客欢迎霜屏幕园即关命闭，督在菜掉单栏特中选贱择【编辑】→拳【首选咳参数】→盐【常规】→示【显示黄欢迎鼻屏幕】命令垒，即野可以姓在下讯次启父动该施软件香时将升重新烧显示岸欢迎拿屏幕秘。201.这2.稍2情境2Dr抓ea隔mw杀ea泳ve类rCS买4的操该作环竿境和以帽前版加本相炒比，Dr规ea育mw缘瑞ea睬ve得r章CS抗4的工芦作界肆面焕鸟然一对新，促可以们说是米做了应一次称脱胎弯换骨朴的改尘进，个从界河面中坡可以另看到扬更多仰的设怒计元仔素。腥另外带，Dr什ea留mw泥ea严ve筑r割CS葛4的操祖作环独境非碰常灵割活，锈用户搜完全险可以经根据裙自己宝的习密惯进雪行定题制。名下面煤对Dr耻ea旬mw悲ea蚊ve柄r住CS泪4的操科作环面境进遣行详证细介渠绍。Dr寨ea欲mw组ea吸ve楚r接CS铅4的工月作界扎面由傅标题勾栏、劳菜单带栏、粒插入茅面板屑、文改档工专具栏衡、文尿档编珠辑区臂、状自态栏般、属示性面抹板、己面板贿组、达扩展奖管理糕器等舟组成生，如留图所谷示。2122工作炼界面佳定制:用户思可以借根据狗各自腾的习踪蝶惯进谈行工拘作界雄面的乡丰定制铜，在寇窗口矩的标棕题栏粥右侧削面有篮一个【设计械器】按钮沟，单嗓击它膀会弹动出一贞个下量拉菜碗单，格可以语定制【应用拨程序热开发座人员】、【经典】、【编码子器】、【设计仗器】等不运同的尾工作林界面迹。231.装3任务3创建钩一个赵新的挂网站1.塑3.闹1情境1新建第站点在制育作网车页之拢前必省须先祝在自振己的奥计算允机中乌新建侮一个筒新的司站点水和站宇点的扎本地族根文预件夹含，站采点一息般由皱很多棕网页轧文件质组成控，另犁外还龙包括榨很多姜的相衔关文讲件，筒每个词网页圈只有蠢在整倦个网违站中潜才能劣发挥寺作用命，所秘以Dr肢ea袖mw岔ea污ve纸r息CS虽4在提企供强气大的酱设计承编写牵网页栗功能皂的同骆时，加还提榜供了匀站点址创建害和管舞理功祥能。在新桌建站仓点之双前，垂首先华要进基入【站点疯定义】对话锻框，越进入【站点薄定义】对话衣框方膏法有累下列袄几种让：241．文启件面出板（1）文集件面馅板中烦右上换方的【管理河站点】链接肯，如兽图所岭示。25单击疏文件怀面板纽奉左上尺方的里箭头押按钮，选瓣择弹他出的续下拉赤列表仿底部卖的【管理敲站点…】，如魂图所阶示。26从上伐述（1）（2）方塑法中傲任选罗一方摘法都女可进锤入【管理宪站点】对话随框，戒执行【新建…】锄→【站点】，即再可弹证出【站点笼定义】对话竟框。27282．站抗点菜鹅单（1）执焦行【站点】菜单疤→【新建婚站点…】命令垒，即拆可进薯入【站点么定义】对话颂框。29（2）执饱行【站点】菜单窑→【管理聚站点…】命令泳，【管理启站点】对话爽框，既再执俭行“新建毁→站回点”献命令朗，也运可进碎入【站点射定义】对话建框。30进入【站点差定义】对话次框后渗，定商义本旨地站昨点的蝴方法絮有下速列两晕种：（1）利栗用【基本】选项艘卡的孙站点揪定义剂向导日。（2）利舅用【高级】选项查卡，脉这种劝方法狐比较洪直观啊快速胆。31下面拴详细淋介绍肌一下督利用【基本】选项崖卡，针根据涨站点喂定义潜向导蒸提示营定义为本地陷站点除的步寺骤：(1咬)进入【站点尽定义】对话翅框后趴，选库择【基本】选项办卡（般如图脂所示赠）32(2确)设置盼站点挨名称仇为“棒好可唤工作蒜室”推，在料站点腾的UR中L文本枯框中丸输入本网站施的域员名或IP地址浪，如序果要慰创建梁本地系站点挖，则律此处千可以角留空挣。单女击【下一奥步】按钮被。(3老)弹出眠的对芬话框球中询扮问是启否使螺用服锡务器册技术截，如身图所流示。禁由于紧建立饱的是烦静态缠网站臣，选逢择“弃否，凑我不馋想使盗用服行务器饭技术陕”单症选按弦钮，架单击【下一泡步】按钮项。3334(4垫)在下哭一步叹对话里框中也，选志择“辈编辑标我的捕计算滔机上竞的本忽地副六本，井完成决后再走上传仗到服不务器彻”单尘选按红钮。锅可以厨单击按钮维设置左站点策的本颜地根部文件蜡夹的绿位置疑，若密根文册件夹波没预档先建妖立好紫，可时此时辞新建氏。如负图所页示。裁选择迷设置刷好后条，单承击【下一泰步】按钮炉。3536(5页)在下驰一步晃对话跑框中土，显嫩示选艘择远磁程服识务器宗连接单方式剖的界查面。籍在“等您如蹲何连陡接到您远程迈服务舰器”青下拉扮列表绵框中屡选择薯“无钳”选润项，诊如图枪所示冷。单养击【下一弹步】按钮阶。37(6辉)此时丽，出育现确腔认信宋息界顽面，侨显示印前面朋已经壮设置裤完成墨的内晚容，孤单击【完成】按钮蛙，如顺图所妨示。38(7润)返回花到【管理锻站点】对话照框，塑如图幕所示性。单趁击【完成】按钮弃，本悄地站茶点创盗建完舞成，集在【文件】面板言中的【本地猪视图】窗口拨中会灯显示暂该站语点的顾名称奇和根睬文件后夹。391.止3.罪2情境2新建运网页遮文件受与文堤件夹文件掉面板逝是管鄙理整临个网落站的泉重要忘工具围，它定可以秤让人到们马伤上看街到整砖个网祸站的递结构出，也摄可以纽奉看到缩慧整个松网站所的文浅件内窑容，怎快速暖地管穿理网妻站。饶在文钳件面掀板新扇建网骡页和射文件送夹比呼较方脉便、局简单撕。1.新建抵网页什文件改与文虹件夹如的操初作步他骤：（1）移惯动鼠钩标在碑文件惨面板订中选麦择站燃点根评文件颜夹后量，单猪击鼠描标右恼键，胀再从量弹出继的快守捷菜爱单中递选择孙“新浅建文硬件”径或构“新瞧建文棚件夹顷”闷命令腹。（2）出李现新凯建的旺网页皱文件置或文扔件夹使后，冲输入虹文件较名或猫文件梢夹名联称并沫按下酒回车异键。401.悠3.溉3情境3打开笛网页巴文件在Dr伶ea发mw酿ea俩ve捷r中有寺多种四打开塔网页妙的方第法。方法1：启文动Dr识ea棵mw拍ea碌ve铅r后，蒜移动权鼠标领在“是打开蜓最近赖项目狗”的兰文件剥列表材中选缸择“剃打开计”选征项。方法2：移牛动鼠后标到雨菜单匀栏选论择“护文件转”，舞弹出接菜单搭后，程从菜独单中识选择以“打炮开”桨命令姻。方法3：打脱开文毫件面很板后脉，移附动鼠膛标选瓶择要哀打开幅的文弯件，似双击仅即可也打开质所选诱择的宋文件道。另一夏种打警开文锤件编逆辑的辟方法酿是在皂文件窃夹窗觉口（钱我的鞋电脑厨）中铜的网筛页文协件上惹单击稍鼠标后右键顽，再图从弹桨出的网快捷商菜单舍中选畏择“薄使用Dr俊ea文mw辣ea服ve歼r满CS搏4编辑苦”命模令，课也可停以打序开网英页编遥辑。411.仅3.准4情境4保存青网页席文件网页确不是阳一下飞子就荣可以董做好棚的，狡做到桂一半陆时，梨可以陆先将以文件殖保存渴起来挎，以刻后再猾随时边加载婶修改塑。具体期保存盖方法叙如下混：1、在忽菜单证栏中愿选择【文件】→松【保存】命令刻。2、出嫩现“订另存盾为”裙对话化框后踪蝶，从举“保资存在航”下为拉列够表框弊中选意择磁睛盘驱霸动器停编号角与文互件夹繁名称经，接猪着在址文件刮名栏熄中输摊入文语件名愚称，敲然后陆选择按钮范。421.泽3.悬5情境5网页勺版面好布局在制吉作网风页的技过程般中，虾若是匆遇到雾较复尿杂的眉画面讲，可聚以使撑用编会辑辅晕助工晚具，愁如守标尺道（Ru泉le柱rs）必、网姥格线桨（Gr虾id）碰等，烛以提录高制喝作网拾页的割效率杯。1．标提尺执行【查看】菜单→【标尺】→末【显示】命令摔。在编航辑区烤上出归现的健刻度扣就是赛标尺哄（如济图所醒示）赌，它黎可以凭作为袄摆放帮对象绕位置于的依溜据。上方望的刻连度称贴为水翅平标仅尺（X轴）哭，左宪边的蓬刻度诉称为刑垂直脉标尺街（Y轴）优，而冤原点(0隙,0慨)则是斩在网慌页的冬左上糊角，X轴若未向左盐移动瓶为负反数，Y轴则里是向军上移蓝动为海负数咳。43442．网泼格线网格递线主练要的锣作用师是能要够更去方便至地排档列图汉形位绍置，队有了脊网格脖线就给可以居很快决地看资到对顽象与惜对象枝之间婆的间友距，悬而这骗些网咳格线幅在实御际浏进览时别是看赚不到只的。执行【查看】菜单→【网格出设置…】赚→【显示尖网格】命令蒙。选择室显示夹网格钢线功搜能后趟，编常辑区姓就会凤出现爸淡绿供色的串网格这线。45网格钓线46若是绒在“部网格疗设置…”子宰菜单踏中选剧择“闸靠齐挖到网授格”惨命令忠，则抓在拖很动对劈燕象时辞，对坝象就架会自喘动吸台附并避对齐颤在网谜格线假上。提示:改动返网格庙设置骨只要塘移动展鼠标亿到菜特单栏衣依次慈选择【查看】→啄【网格针设置…】匀→【网格恰设置】，就佳可以构修改咱成想蛮要的奔样式贼了。471.朽4上机洋项目期实训1.露4.狂1