inter-8设计制作个人网站【ppt】

大连理工大学出版社2009典型工作任务八设计制作个人网站任务1设计个人网站任务2发布个人网站任务3更新与维护网站22018/2/9【工作目标】本子任务是通过设计与制作一个个人网站首页（图81），使读者了解网页制作的基础知识和DREAMWEAVER8的基本功能，运用网页制作工具制作网页的方法与技巧以及网页制作的基本流程。任务1设计个人网站32018/2/9图81个人网站首页任务1设计个人网站4【工作过程】1定义站点2创建页面3制作标题栏和导航栏4制作主体内容5制作版权信息6创建链接关系2018/2/9任务1设计个人网站5子任务1设计个人网站1定义站点（1）在WINDOWS系统下，选择“开始程序MACROMEDIAMACROMEDIADREAMWEAVER8”命令，启动DREAMWEAVER8软件2018/2/96子任务1设计个人网站1定义站点2在快捷菜单面板中选择“创建新项目”中的“HTML”,创建一个HTML网页。2018/2/971定义站点3在硬盘上创建一个新文件夹。2018/2/9任务1设计个人网站81定义站点（4）回到DREAMWEAVER8中，点击菜单栏中“站点”命令，在下拉菜单中选择“管理站点”选项，单击后弹出“管理站点”对话框，点击右边第一个选项“新建”就可以建立新的站点了。2018/2/9任务1设计个人网站91定义站点（5）点击“新建”选项后共有两个选项，选择第一个选项“站点”。第二个选项“FTP与RDS服务器”是指直接在服务器上进行工作。2018/2/9任务1设计个人网站101定义站点（6）当点击了第一个选项“站点”后，会自动弹出一个对话框，输入站点名称，可以命名为“FLYFISH”。（7）点击“下一步”，这里会询问是否使用服务器技术，可以直接选择“否”，这样也决不会对接下来的操作有任何的影响。（8）点击“下一步”，建议选择第一个选项“编辑我的计算机上的本地副本，完成后再上传到服务器”。然后在下面的一个对话框中选择文件储存的位置为EMYWEB（我们刚刚创建的文件夹）。（9）点击“下一步”，选择“本地/网络”就可以了。（10）点击“下一步”，会询问是否“启用存回和取出”功能。此功能能够保证当其中一人对某个网页进行编辑的时候，其他人不能够对同一网页进行编辑。2018/2/9任务1设计个人网站111定义站点（11）再点击“下一步”，完成一个站点的建立工作。2018/2/9任务1设计个人网站122创建页面（1）在“文件”面板中，在本地文件夹EMYWEB下面的空白处，按右键选择“新建文件”，这样就建好了一个页面，默认的文件名为UNTITLEDHTML。HTML表示这个网页文件是一个静态的HTML文件。将它改名为INDEXHTML。再次按右键选择“新建文件夹”，将它改名为IMAGES，该文件夹中将存放网页相关图片。2018/2/9任务1设计个人网站132创建页面（2）双击INDEXHTML进入该页面的编辑状态。在标题空格里输入标题名称为“飞鱼的个人空间”。2018/2/9任务1设计个人网站142创建页面（3）在下面的“属性面板”中单击“页面属性”按钮，在弹出的对话框中设置。2018/2/9任务1设计个人网站152创建页面（4）在该对话框的“分类”列表中选择“链接”选项，在弹出的对话框中设置。2018/2/9任务1设计个人网站163制作标题栏和导航栏（1）在“插入”面板中的“常用”标签中，单击“表格”按钮。在“表格”对话框中设置2行1列的表格（表格1），“表格宽度”为758像素。在属性面板中，将“对齐”设置为居中对齐。2018/2/9任务1设计个人网站173制作标题栏和导航栏（2）将光标定位在表格1的第1行中，在该行中插入一个1行2列的表格，其属性设置为“宽”100，“填充”、“间距”、“边框”均为0。2018/2/9任务1设计个人网站183制作标题栏和导航栏（3）将光标定位在该表格的左边的单元格中，在“插入”面板中的“常用”标签中，单击“图像”按钮。插入已用PHOTOSHOP做好的LOGO图像。右边的单元格用相同的方法插入网页横幅，选中图像并在属性面板中设置“右对齐”。2018/2/9任务1设计个人网站193制作标题栏和导航栏（4）制作导航栏。将光标定位在表格1的第2行中，在其中插入一个1行7列的表格，并在下边的属性面板中设置其属性，在属性面板中设置。2018/2/9任务1设计个人网站203制作标题栏和导航栏（5）在该表格中输入文本，并插入小图标。2018/2/9任务1设计个人网站213制作标题栏和导航栏（6）在表格1的下方插入一个1行1列、宽为758像素的空白表格（表格2），并将“对齐”设置为居中对齐，作为页面装饰。2018/2/9任务1设计个人网站224制作主体内容（1）在表格2的下方插入一个1行5列的表格表格3，并在其属性面板中将“对齐”设置为居中对齐，分别设置第1、3、5单元格的宽度为28、47、25。（2）制作“最近作品展示”栏。将光标定位在单元格1中，设置其属性面板中的“垂直”为顶端。然后插入1行1列的表格，在属性面板中设置。然后将光标定位在表格中，在属性面板中，将“背景颜色”设置成FFFFFF（白色）。2018/2/9任务1设计个人网站234制作主体内容（3）将光标定位在表格中，然后插入一个2行1列的表格，设置宽为100，间距为2。在属性面板中体设置。2018/2/9任务1设计个人网站244制作主体内容（4）将光标定位在上边的单元格中，在属性面板中，设置高为23，背景颜色为99CC66，如下图所示。然后输入文字“最近作品展示”。2018/2/9任务1设计个人网站254制作主体内容（5）将光标定位在下边的单元格中，在“插入”面板中的“常用”标签中，单击“图像”按钮，插入图像，效果如下图所示。2018/2/9任务1设计个人网站264制作主体内容（6）在“最近作品展示”的1行1列的表格下边插入一个1行1列、宽为100的空白表格，作为页面装饰。（7）制作“站内专业链接”栏。在空白表格的下边插入一个1行1列的表格，其属性面板设置如下图所示。然后将光标定位在表格中，在属性面板中，将“背景颜色”设置成FFFFFF（白色）。2018/2/9任务1设计个人网站274制作主体内容（8）将光标定位在表格中，然后插入一个2行1列的表格，设置宽为100，间距为2。在属性面板中具体设置如图827所示。（9）将光标定位在上边的单元格中，在属性面板中，设置高为23，背景颜色为99CC66。然后输入文字“站内专业链接”。2018/2/9任务1设计个人网站28任务1设计个人网站4制作主体内容（10）将光标定位在下边的单元格中，插入一个1行1列的表格，其属性面板设置如下图所示。在里边再插入一个8行1列的表格，具体属性设置如下图所示。然后输入文字及插入小图像。2018/2/9294制作主体内容效果如下图所示2018/2/9任务1设计个人网站304制作主体内容（11）在“站内专业链接”的1行1列的表格下边插入一个1行1列、宽为100的空白表格，作为页面装饰。（12）制作“友情链接”栏。在1行1列空白表格的下边创建一个1行1列的表格，在属性面板中的具体设置如下图所示。然后将光标定位在表格中，在属性面板中，将“背景颜色”设置成FFFFFF（白色）。2018/2/9任务1设计个人网站314制作主体内容（13）将光标定位在表格中，然后插入一个2行1列的表格，设置宽为100，间距为2。在属性面板中具体设置如下图所示。2018/2/9任务1设计个人网站324制作主体内容（14）将光标定位在上边的单元格中，在属性面板中，设置高为23，背景颜色为99CC66，如下图所示。然后输入文字“友情链接”。2018/2/9任务1设计个人网站334制作主体内容（15）将光标定位在下边的单元格内，在“插入”面板中的“表单”标签中，单击“列表/菜单”按钮，如下图所示。弹出DREAMWEAVER提示窗口，通常需要加入表单标签，这样才能实现列表/菜单的跳转功能。如果勾选“不再显示此信息”多选框，下次再插入表单项时将按本次操作进行。2018/2/9任务1设计个人网站344制作主体内容（16）单击“是”按钮，在单元格内嵌入一个空“菜单”。然后在“列表/菜单”属性面板中选择“列表”项，在高度文本框中输入“10”，效果如下图所示。2018/2/9任务1设计个人网站354制作主体内容（17）选中列表框，单击属性面板中的“列表值”按钮，弹出“列表值”对话框，在“项目标签”项中输入项目的网址。按“”和“”可增加或删除项目，按上箭头、下箭头可调整项目顺序，如下图所示。2018/2/9任务1设计个人网站364制作主体内容（18）增加所有项目后，单击“确定”按钮，所有项目均已显示在列表中，按CTRLS保存网页，再按F12在浏览器中浏览制作效果，如下图所示。2018/2/9任务1设计个人网站374制作主体内容（19）网页中主体内容的其他部分均可按上述方法制作。2018/2/9任务1设计个人网站385制作版权信息1在表格3的下方插入一个1行1列的表格（表格4），在属性面板中，设置“宽”为758像素、“对齐”为居中对齐、“间距”为1、“背景颜色”为339933，如下图所示。2018/2/9任务1设计个人网站395制作版权信息（2）将光标定位在表格的里边，插入一个2行1列的表格，在属性面板中，设置“宽”为758像素、“背景颜色”为99CC66。（3）将光标定位在上边的单元格中，在属性面板中，设置“高”为30，选“”（居中对齐）按钮，输入文字“版权所有COPYRIGHT2009,ALLRIGHTSRESERVED”。2018/2/9任务1设计个人网站405制作版权信息（4）将光标定位在下边的单元格中，在属性面板中，设置“高”为30，选“”（居中对齐）按钮，输入文字“EAILFLYFISHSJ163COM”。制作效果如下图所示。2018/2/9任务1设计个人网站41按CTRLS保存网页，再按F12在浏览器中浏览整个页面效果。2018/2/9任务1设计个人网站426创建链接关系（1）创建文本链接第一步选择窗口中的文本或图像。2018/2/9任务1设计个人网站436创建链接关系第二步在属性面板中任意执行以下操作之一在“插入”面板中的“常用”标签中，单击“超级链接”按钮。单击面板中链接域右边的文件夹图标。在弹出的“选择文件”的对话框中，浏览并选择一个需要链接的文件。URL域中显示被链接文档的路径。2018/2/9任务1设计个人网站446创建链接关系在文档窗口中选择文本，然后在其属性面板中，拖动链接域右边的指向文件图标，指向所要链接的文档。2018/2/9任务1设计个人网站456创建链接关系在属性面板链接域中，输入要链接文档的路径和文件名。若要链接到当前站点中的另一个文档（内部链接），输入文档相对路径或根相对路径；若要链接到当前站点以外的文档（外部链接），输入包含协议类型（如HTTP/）的绝对路径。2018/2/9任务1设计个人网站466创建链接关系第三步选择被链接载入的位置。被链接文档显示位置需从属性面板上的“目标”弹出菜单上选择一个选项，如下图所示。默认状况下，被链接文档通常显示在当前窗口或框架中。2018/2/9任务1设计个人网站476创建链接关系第四步浏览制作效果。按CTRLS保存网页，再按F12在浏览器中浏览整个页面效果。当鼠标点击文字时，出现与之相链接的新页面。2018/2/9任务1设计个人网站486创建链接关系（2）创建图像链接第一步先选中图像，在属性面板的左下角看到如下图所示的图像热区面板。他们分别是选区和绘制热区的工具，箭头光标为选区，其他3项功能如方形热区，椭圆形热区，不规则形热区。2018/2/9任务1设计个人网站496创建链接关系第二步在画面上绘制热区。所建立的热区为一个蓝色的半透明区域。单击这个区域可以选中它，也可以在选中后按“DELETE”键将它删除。选中后就可以在属性面板中插入链接了。在链按栏中输入链接的路径，也可以单击右侧的“浏览文件”图标打开文件管理器指定链接到的文件2018/2/9任务1设计个人网站506创建链接关系（3）创建电子邮件链接第一步在“插入”面板中的“常用”标签中，单击“电子邮件链接”按钮。2018/2/9任务1设计个人网站516创建链接关系第二步在单击“电子邮件链接”按钮后弹出对话框中的文本域里，输入“与我联系”。在EMAIL里输入“FLYFISHSJ163COM”。2018/2/9任务1设计个人网站526创建链接关系（4）设置锚点和创建锚点链接第一步设置锚点。将鼠标放在文档窗口想要设置锚点的位置上（本例为首页的上面），在“插入”面板中的“常用”标签中，单击“命名锚记”按钮。2018/2/9任务1设计个人网站536创建链接关系第二步在“命名锚记”对话框中，锚记名称域里输入名称“TOP”。2018/2/9任务1设计个人网站546创建链接关系第三步创建锚点链接。在文档窗口中，选择想要建立链接的文本或图像（本例为首页底部的文字“TOP”）。在属性面板的链接域中输入字符和锚点名，本例为“TOP”。第四步预览结果。CTRLS存盘，F12预览。当点击页面下面的“TOP”时，自动跳转到页面顶部。至此，“飞鱼的个人空间”个人网站制作完成。2018/2/9任务1设计个人网站552018/2/9任务2发布个人网站【任务描述】本工作任务是通过对个人网站的发布过程的介绍，使读者了解网站空间的申请、网站的上传发布的原理和方法，掌握网站发布的全过程，具有发布网站的技术实现能力。562018/2/9任务2发布个人网站【工作过程】1选择网站的发布方式2网站的发布572018/2/9任务2发布个人网站1选择网站的发布方式嵌入知识点网站发布的方法目前网站文件的上传有3种形式（1）利用网站本身的上传功能。（2）利用专用FTP工具上传。（3）利用网页制作软件的内置上传功能。该任务是将上个子任务所做的“飞鱼的个人空间”网站,通过网站本身的上传功能，完成网站的发布。582018/2/9任务2发布个人网站2网站的发布（1）申请免费主页空间。进入常来网免费空间网站，进行注册。注册过程共分为3步，步骤如下第一步同意协议。第二步填写注册资料。592018/2/9任务2发布个人网站2网站的发布第三步激活账号。602018/2/9任务2发布个人网站2网站的发布登录常来网免费空间，然后登陆管理页面。612018/2/9任务2发布个人网站2网站的发布（2）发布个人网站确定域名622018/2/9任务2发布个人网站2网站的发布上传文件第一步，单击文件上传图标，进入文件上传界面。632018/2/9任务2发布个人网站2网站的发布第二步，单击“浏览”按钮，分别选择要上传“个人网站”的文件，单击“上传”按钮逐一上传即可，上传后的文件。642018/2/9任务2发布个人网站2网站的发布文件上传完毕后，回到常来网免费空间网站的管理页面，单击“可用操作”里的“网站设置”的链接，就会弹出“网站设置”界面。填写“默认主页”项，上传“个人网站”的首页是INDEXHTML，那么在“默认主页”后的文本框上填入“INDEXHTML”即可。652018/2/9任务2发布个人网站2网站的发布（3）测试个人网站在浏览器里输入网址HTTP/FLYFISHSAPCEQYUNNET看是否能打开“个人网站”即可。66任务3更新与维护网站【工作目标】本子任务通