inter-8设计制作个人网站

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