1、典型工作任务八：设计制作个人网站,任务1：设计个人网站 任务2：发布个人网站 任务3：更新与维护网站,2019/2/8,【工作目标】本子任务是通过设计与制作一个个人网站首页（图8-1），使读者了解网页制作的基础知识和Dreamweaver 8的基本功能，运用网页制作工具制作网页的方法与技巧以及网页制作的基本流程。,任务1：设计个人网站,2019/2/8,图8-1 个人网站首页,任务1：设计个人网站,【工作过程】 1定义站点 2创建页面 3制作标题栏和导航栏 4制作主体内容 5制作版权信息 6创建链接关系,2019/2/8,任务1：设计个人网站,子任务1：设计个人网站,1定义站点 （1）在Win
2、dows系统下，选择“开始程序MacromediaMacromedia Dreamweaver 8”命令，启动Dreamweaver 8软件,2019/2/8,子任务1：设计个人网站,1定义站点(2)在快捷菜单面板中选择“创建新项目”中的“HTML”,创建一个HTML网页。,2019/2/8,1定义站点(3) 在硬盘上创建一个新文件夹。,2019/2/8,任务1：设计个人网站,1定义站点（4）回到Dreamweaver 8中，点击菜单栏中“站点”命令，在下拉菜单中选择“管理站点”选项，单击后弹出“管理站点”对话框，点击右边第一个选项“新建”就可以建立新的站点了。,2019/2/8,任务1：设计
3、个人网站,1定义站点 （5）点击“新建”选项后共有两个选项，选择第一个选项“站点”。第二个选项“FTP与RDS服务器”是指直接在服务器上进行工作。,2019/2/8,任务1：设计个人网站,1定义站点 （6）当点击了第一个选项“站点”后，会自动弹出一个对话框，输入站点名称，可以命名为“flyfish”。 （7）点击“下一步”，这里会询问是否使用服务器技术，可以直接选择“否”，这样也决不会对接下来的操作有任何的影响。 （8）点击“下一步”，建议选择第一个选项“编辑我的计算机上的本地副本，完成后再上传到服务器”。然后在下面的一个对话框中选择文件储存的位置为E: My Web（我们刚刚创建的文件夹）。
4、 （9）点击“下一步”，选择“本地/网络”就可以了。 （10）点击“下一步”，会询问是否“启用存回和取出”功能。此功能能够保证当其中一人对某个网页进行编辑的时候，其他人不能够对同一网页进行编辑。,2019/2/8,任务1：设计个人网站,1定义站点（11）再点击“下一步”，完成一个站点的建立工作。,2019/2/8,任务1：设计个人网站,2创建页面（1）在“文件”面板中，在本地文件夹E:MyWeb下面的空白处，按右键选择“新建文件”，这样就建好了一个页面，默认的文件名为untitled.html。html表示这个网页文件是一个静态的HTML文件。将它改名为index.html。再次按右键选择“新
5、建文件夹”，将它改名为：images，该文件夹中将存放网页相关图片。,2019/2/8,任务1：设计个人网站,2创建页面（2）双击index.html进入该页面的编辑状态。在标题空格里输入标题名称为“飞鱼的个人空间”。,2019/2/8,任务1：设计个人网站,2创建页面（3）在下面的“属性面板 ”中单击“页面属性”按钮，在弹出的对话框中设置。,2019/2/8,任务1：设计个人网站,2创建页面（4）在该对话框的“分类”列表中选择“链接”选项，在弹出的对话框中设置。,2019/2/8,任务1：设计个人网站,3制作标题栏和导航栏 （1）在“插入”面板中的“常用”标签中，单击“表格”按钮。在“表格”
6、对话框中设置2行1列的表格（表格1），“表格宽度”为758像素。在属性面板中，将“对齐”设置为居中对齐。,2019/2/8,任务1：设计个人网站,3制作标题栏和导航栏（2）将光标定位在表格1的第1行中，在该行中插入一个1行2列的表格，其属性设置为“宽”100%，“填充”、“间距”、“边框”均为0 。,2019/2/8,任务1：设计个人网站,3制作标题栏和导航栏（3）将光标定位在该表格的左边的单元格中，在“插入”面板中的“常用”标签中，单击“图像”按钮。插入已用photoshop做好的logo图像。右边的单元格用相同的方法插入网页横幅，选中图像并在属性面板中设置“右对齐”。,2019/2/8,任
7、务1：设计个人网站,3制作标题栏和导航栏（4）制作导航栏。将光标定位在表格1的第2行中，在其中插入一个1行7列的表格，并在下边的属性面板中设置其属性，在属性面板中设置。,2019/2/8,任务1：设计个人网站,3制作标题栏和导航栏 （5）在该表格中输入文本，并插入小图标。,2019/2/8,任务1：设计个人网站,3制作标题栏和导航栏（6）在表格1的下方插入一个1行1列、宽为758像素的空白表格（表格2），并将“对齐”设置为居中对齐，作为页面装饰。,2019/2/8,任务1：设计个人网站,4制作主体内容 （1）在表格2的下方插入一个1行5列的表格(表格3)，并在其属性面板中将“对齐”设置为居中对
8、齐，分别设置第1、3、5单元格的宽度为28%、47%、25%。 （2）制作“最近作品展示”栏。将光标定位在单元格1中，设置其属性面板中的“垂直”为顶端。然后插入1行1列的表格，在属性面板中设置。然后将光标定位在表格中，在属性面板中，将“背景颜色”设置成#FFFFFF（白色）。,2019/2/8,任务1：设计个人网站,4制作主体内容（3）将光标定位在表格中，然后插入一个2行1列的表格，设置宽为100%，间距为2。在属性面板中体设置。,2019/2/8,任务1：设计个人网站,4制作主体内容（4）将光标定位在上边的单元格中，在属性面板中，设置高为23，背景颜色为#99cc66，如下图所示。然后输入文
9、字“最近作品展示”。,2019/2/8,任务1：设计个人网站,4制作主体内容（5）将光标定位在下边的单元格中，在“插入”面板中的“常用”标签中，单击“图像”按钮，插入图像，效果如下图所示。,2019/2/8,任务1：设计个人网站,4制作主体内容 （6）在“最近作品展示”的1行1列的表格下边插入一个1行1列、宽为100%的空白表格，作为页面装饰。 （7）制作“站内专业链接”栏。在空白表格的下边插入一个1行1列的表格，其属性面板设置如下图所示。然后将光标定位在表格中，在属性面板中，将“背景颜色”设置成#FFFFFF（白色）。,2019/2/8,任务1：设计个人网站,4制作主体内容（8）将光标定位在
10、表格中，然后插入一个2行1列的表格，设置宽为100%，间距为2。在属性面板中具体设置如图8-27所示。（9）将光标定位在上边的单元格中，在属性面板中，设置高为23，背景颜色为#99cc66。然后输入文字“站内专业链接”。,2019/2/8,任务1：设计个人网站,任务1：设计个人网站,4制作主体内容（10）将光标定位在下边的单元格中，插入一个1行1列的表格，其属性面板设置如下图所示。在里边再插入一个8行1列的表格，具体属性设置如下图所示。然后输入文字及插入小图像。,2019/2/8,4制作主体内容 效果如下图所示,2019/2/8,任务1：设计个人网站,4制作主体内容 （11）在“站内专业链接”
11、的1行1列的表格下边插入一个1行1列、宽为100%的空白表格，作为页面装饰。 （12）制作“友情链接”栏。在1行1列空白表格的下边创建一个1行1列的表格，在属性面板中的具体设置如下图所示。然后将光标定位在表格中，在属性面板中，将“背景颜色”设置成#FFFFFF（白色）。,2019/2/8,任务1：设计个人网站,4制作主体内容（13）将光标定位在表格中，然后插入一个2行1列的表格，设置宽为100%，间距为2。在属性面板中具体设置如下图所示。,2019/2/8,任务1：设计个人网站,4制作主体内容（14）将光标定位在上边的单元格中，在属性面板中，设置高为23，背景颜色为#99cc66，如下图所示。
12、然后输入文字“友情链接”。,2019/2/8,任务1：设计个人网站,4制作主体内容（15）将光标定位在下边的单元格内，在“插入”面板中的“表单”标签中，单击“列表/菜单”按钮，如下图所示。弹出Dreamweaver提示窗口，通常需要加入表单标签，这样才能实现列表/菜单的跳转功能。如果勾选“不再显示此信息”多选框，下次再插入表单项时将按本次操作进行。,2019/2/8,任务1：设计个人网站,4制作主体内容 （16）单击“是”按钮，在单元格内嵌入一个空“菜单”。然后在“列表/菜单”属性面板中选择“列表”项，在高度文本框中输入“10”，效果如下图所示。,2019/2/8,任务1：设计个人网站,4制作
13、主体内容 （17）选中列表框，单击属性面板中的“列表值”按钮 ，弹出“列表值”对话框，在“项目标签”项中输入项目的网址。按“+”和“-”可增加或删除项目，按上箭头、下箭头可调整项目顺序，如下图所示。,2019/2/8,任务1：设计个人网站,4制作主体内容 （18）增加所有项目后，单击“确定”按钮，所有项目均已显示在列表中，按Ctrl+S保存网页，再按F12在浏览器中浏览制作效果，如下图所示。,2019/2/8,任务1：设计个人网站,4制作主体内容 （19）网页中主体内容的其他部分均可按上述方法制作。,2019/2/8,任务1：设计个人网站,5制作版权信息 (1) 在表格3的下方插入一个1行1列
14、的表格（表格4），在属性面板中，设置“宽”为758像素、 “对齐”为居中对齐、“间距”为1、“背景颜色”为#339933，如下图所示。,2019/2/8,任务1：设计个人网站,5制作版权信息 （2）将光标定位在表格的里边，插入一个2行1列的表格，在属性面板中，设置“宽”为758像素、“背景颜色”为#99cc66。 （3）将光标定位在上边的单元格中，在属性面板中，设置“高”为30，选“ ”（居中对齐）按钮，输入文字“版权所有 Copyright2009,All Rights Reserved”。,2019/2/8,任务1：设计个人网站,5制作版权信息 （4）将光标定位在下边的单元格中，在属性面板
15、中，设置“高”为30，选“ ”（居中对齐）按钮，输入文字“Eail:”。制作效果如下图所示。,2019/2/8,任务1：设计个人网站,按Ctrl+S保存网页，再按F12在浏览器中浏览整个页面效果。,2019/2/8,任务1：设计个人网站,6创建链接关系 （1）创建文本链接第一步：选择窗口中的文本或图像。,2019/2/8,任务1：设计个人网站,6创建链接关系第二步：在属性面板中任意执行以下操作之一： 在“插入”面板中的“常用”标签中，单击“超级链接”按钮。单击面板中链接域右边的文件夹图标。在弹出的“选择文件”的对话框中，浏览并选择一个需要链接的文件。URL域中显示被链接文档的路径。,2019/
16、2/8,任务1：设计个人网站,6创建链接关系 在文档窗口中选择文本，然后在其属性面板中，拖动链接域右边的指向文件图标，指向所要链接的文档。,2019/2/8,任务1：设计个人网站,6创建链接关系 在属性面板链接域中，输入要链接文档的路径和文件名。 若要链接到当前站点中的另一个文档（内部链接），输入文档相对路径或根相对路径；若要链接到当前站点以外的文档（外部链接），输入包含协议类型（如http：/）的绝对路径。,2019/2/8,任务1：设计个人网站,6创建链接关系第三步：选择被链接载入的位置。被链接文档显示位置需从属性面板上的“目标”弹出菜单上选择一个选项，如下图所示。默认状况下，被链接文档通
17、常显示在当前窗口或框架中。,2019/2/8,任务1：设计个人网站,6创建链接关系第四步：浏览制作效果。按Ctrl+S保存网页，再按F12在浏览器中浏览整个页面效果。当鼠标点击文字时，出现与之相链接的新页面。,2019/2/8,任务1：设计个人网站,6创建链接关系 （2）创建图像链接第一步：先选中图像，在属性面板的左下角看到如下图所示的图像热区面板。他们分别是选区和绘制热区的工具，箭头光标为选区，其他3项功能如方形热区， 椭圆形热区，不规则形热区。,2019/2/8,任务1：设计个人网站,6创建链接关系第二步：在画面上绘制热区。所建立的热区为一个蓝色的半透明区域。单击这个区域可以选中它，也可以
18、在选中后按“Delete”键将它删除。选中后就可以在属性面板中插入链接了。在链按栏中输入链接的路径，也可以单击右侧的“浏览文件”图标打开文件管理器指定链接到的文件,2019/2/8,任务1：设计个人网站,6创建链接关系 （3）创建电子邮件链接第一步：在“插入”面板中的“常用”标签中，单击“电子邮件链接”按钮。,2019/2/8,任务1：设计个人网站,6创建链接关系第二步：在单击“电子邮件链接”按钮后弹出对话框中的文本域里，输入“与我联系”。 在E-mail里输入“” 。,2019/2/8,任务1：设计个人网站,6创建链接关系 （4）设置锚点和创建锚点链接第一步：设置锚点。将鼠标放在文档窗口想要
19、设置锚点的位置上（本例为首页的上面），在“插入”面板中的“常用”标签中，单击“命名锚记”按钮。,2019/2/8,任务1：设计个人网站,6创建链接关系第二步：在“命名锚记”对话框中，锚记名称域里输入名称“top” 。,2019/2/8,任务1：设计个人网站,6创建链接关系第三步：创建锚点链接。在文档窗口中，选择想要建立链接的文本或图像（本例为首页底部的文字“top”）。 在属性面板的链接域中输入#字符和锚点名，本例为“#top”。第四步：预览结果。Ctrl+S存盘，F12预览。当点击页面下面的“top”时，自动跳转到页面顶部。至此，“飞鱼的个人空间”个人网站制作完成。,2019/2/8,任务1
20、：设计个人网站,2019/2/8,任务2：发布个人网站,【任务描述】本工作任务是通过对个人网站的发布过程的介绍，使读者了解网站空间的申请、网站的上传发布的原理和方法，掌握网站发布的全过程，具有发布网站的技术实现能力。,2019/2/8,任务2：发布个人网站,【工作过程 】 1选择网站的发布方式 2网站的发布,2019/2/8,任务2：发布个人网站,1选择网站的发布方式 嵌入知识点：网站发布的方法 目前网站文件的上传有3种形式： （1）利用网站本身的上传功能。 （2）利用专用FTP工具上传。 （3）利用网页制作软件的内置上传功能。该任务是将上个子任务所做的“飞鱼的个人空间”网站,通过网站本身的上
21、传功能，完成网站的发布。,2019/2/8,任务2：发布个人网站,2网站的发布 （1）申请免费主页空间。 进入常来网免费空间网站，进行注册。注册过程共分为3步，步骤如下： 第一步：同意协议。 第二步：填写注册资料。,2019/2/8,任务2：发布个人网站,2网站的发布第三步：激活账号。,2019/2/8,任务2：发布个人网站,2网站的发布 登录常来网免费空间，然后登陆管理页面。,2019/2/8,任务2：发布个人网站,2网站的发布 （2）发布个人网站 确定域名,2019/2/8,任务2：发布个人网站,2网站的发布 上传文件第一步，单击文件上传图标，进入文件上传界面。,2019/2/8,任务2：
22、发布个人网站,2网站的发布第二步，单击 “浏览”按钮，分别选择要上传“个人网站”的文件，单击“上传”按钮逐一上传即可，上传后的文件。,2019/2/8,任务2：发布个人网站,2网站的发布文件上传完毕后，回到常来网免费空间网站的管理页面，单击“可用操作”里的“网站设置”的链接，就会弹出“网站设置”界面。填写 “默认主页”项，上传“个人网站”的首页是index.html，那么在“默认主页”后的文本框上填入“index.html”即可。,2019/2/8,任务2：发布个人网站,2网站的发布 （3）测试个人网站在浏览器里输入网址Http:/看是否能打开“个人网站”即可。,任务3：更新与维护网站,【工作
23、目标】本子任务通过“飞鱼的个人空间”网站的更新与维护，使读者了解网站的更新与维护的方法。,2019/2/8,任务3：更新与维护网站,【工作过程】1、时时更新网站内容2、时常检查相关链接,2019/2/8,任务3：更新与维护网站,嵌入知识点： 网站更新与维护的含义网站的更新是指在不改变网站结构和页面形式的情况下，为网站的固定栏目增加或修改内容。网站的维护是指对网站运行状况进行监控，发现运行问题及时解决，并将网站运行的相关情况进行统计。,2019/2/8,任务3：更新与维护网站,本网站内容的更新与维护主要包括以下几方面：1、时时更新网站内容及时的更新和调整网站的部分内容，包括文字内容和图片内容。如
24、最新日志、阅读热门榜、最近作品展示等，如下图所示。,2019/2/8,任务3：更新与维护网站,2、时常检查相关链接通过测试软件对网站所有的网页链接进行测试，看是否能正常链接，尤其是对网站导航栏进行测试。,2019/2/8,2019/2/8,【任务回顾与总结 】本任务主要通过“飞鱼的个人空间”网站制作实例，使读者了解了网页制作的基础知识和Dreamweaver 8的基本功能，运用网页制作工具制作网页的方法与技巧以及网页制作的基本流程，掌握网站测试、网站发布的方法及网站内容更新与维护的方法。本例中主要涉及创建站点、应用表格、编辑文本、插入图像、插入表单等网页制作的基础知识、在Internet上申请免费空间并上传发布网站以及对网站的更新与维护等，对于一个网页制作初学者来说，熟练掌握这些知识，既可以制作自己的个人网站，同时，也为制作更为复杂的网站打下了基础。,2019/2/8,【课外任务】,任务：设计制作一个“网上书店”网站要求：设计风格统一、布局合理、功能完整,
