模块五 网页设计(简约篇).doc

模块5 网页制作体验 模块51第一部分 应用基础篇15.1 应用场景与就业岗位15.1.1 应用场景与实例25.1.2 岗位分析5第二部分 应用体验篇 5.2 任务1站点的创建与管理85.2.1 任务分析85.2.2 站点的创建95.2.4 任务体验125.3 任务2制作个人博客首页135.3.1 任务分析135.3.2 首页的布局与设计145.3.3 首页制作与美化235.3.4 任务体验315.4 任务3 网站发布与浏览325.4.1 任务分析325.4.2 网站发布与浏览325.4.3 任务体验325.5 知识与任务拓展325.5.1 网页基础知识325.5.2 制作网页特效345.6 课后练习34 学习目标1. 了解网页设计技术行业应用与岗位需求2. 了解网页制作的相关概念3. 了解在网页中进行图文编辑4. 了解使用CSS美化页面5. 了解网页特效的制作第一部分 应用基础篇5.1 应用场景与就业岗位网页制作是网页设计师应用各种网页设计技术，为企事业单位、公司或个人在全球互联网上建设站点，并包含域名注册和主机托管等服务的总称。其作用为展现公司形象，加强客户服务，完善网络业务。网页制作是企业开展电子商务的基础设施和信息平台，是Internet上宣传和反映企业形象和文化的重要窗口。5.1.1 应用场景与实例网页和网站是Internet的重要组成部分，网站要存储在独立服务器或服务器的虚拟主机上才能被访问。网站按其内容分为企业类网站、电子商务网站、个人网站、机构类网站、教育类网站、娱乐游戏网站、门户网站和社区类网站等。1. 企业网站企业宣传性网站主要围绕企业、产品及服务信息进行网络宣传，通过网站树立企业的网络形象。图5-1所示是企业网站，该网站网址是/cn/index.asp。图5-1 企业网站2. 电子商务网站电子商务网站主要依靠Internet来完成商业活动的各个环节。图5-2所示网站是京东商城，该网站网址是/。图5-2 电子商务网站3. 门户网站门户网站涉及的领域非常广泛，是一种综合性网站。这类网站还具有非常强大的服务功能，比如搜索、论坛、电子邮箱、虚拟社区和短信等。比如网易、新浪、搜狐等。图5-3所示是网易门户网站，该网站网址是。图5-3 门户网站4 娱乐网站娱乐网站大都是以提供娱乐信息和流行音乐为主的网站，它们可以提供丰富多彩的娱乐内容。这类网站通常色彩鲜艳明快，内容综合。图5-4所示是娱乐类网站，该网站网址是/。图5-4 娱乐类网站除此之外还有很多网站应用场景，比如政府机构网站、社区网站等。5.1.2 岗位分析网页设计是是指在因特网上，根据一定的规则，使用Dreamweaver、Photoshop等工具制作的用于展示特定内容的相关网页的集合。人们可以通过网页浏览器来访问网站，获取自己需要的信息及服务。1. 行业与岗位需求在信息社会网络时代的今天，国际互联网以其惊人的速度发展。初步估计，未来我国对电子商务人才的需求每年约40万人。人才总量不足已成为制约我国电子商务发展的瓶颈。国家政策正在大力支持网络经济的发展，商务部已经对电子商务给予极大重视。网络经济的快速发展，从事网站设计的专业技术人才备受欢迎。随着网络产业、信息产业高速发展，互联网越来越深入到生活中每一个角落，企业、政府部门也在不断的增加网络宣传，常见行业对网站的应用有：政府机构网站：利用网站宣传政策法规、发布信息和进行网络办公，实现电子政务，它逐渐成为与普通百姓交流的直通车，提高了办事效率和透明度。公司企业网站：主要围绕企业、产品及服务信息进行网络宣传，通过网站树立企业的网络形象。电子商务网站：电子商务网站主要依靠Internet来完成商业活动的各个环节。休闲娱乐网站：以提供娱乐信息为的网站。网络的高速发展带动各企业的网站建设和网页制作的日益繁荣，给企业带来的经济效益也是与日俱增，各企业和公司纷纷需要网站设计人员和网站维护人员，就业前景十分看好。通过国内主要招聘网站智联招聘、中华英才网等专业招聘网站对北京、上海、广州、深圳等大中型城市的IT人才招聘信息进行分析统计，与网页设计相关的主要就业岗位有网页设计师与网站美工。这两类就业岗位相关情况分析见下表5-1所示。表5-1 典型工作岗位工作岗位岗位描述薪资待遇网页设计师熟悉整个网站的制作流程，能实施站点搭建，完成客户网站的首页、专题页、最终页等页面静态页面代码实现工作，并能独立制作各种类型网站。月薪20008000RMB网页美工负责客户网站页面以及各类网站广告的设计，并能负责公司各类宣传的美术创意和视觉设计。月薪20005000RMB2. 专业技能网页设计是一门新兴的边缘性的行业，在网络产生以后应运而生。要成为一名专业的、合格的网站设计人员应该掌握哪些技能和知识？需要的具体专业技能与相关课程见表5-2所示。表5-2 专业技能与相关课程岗位名称专业技能相关课程网页设计师1.熟悉网站开发流程，熟练使用Photoshop、Dreamweaver等软件，能快速将设计稿生成静态页面。2. 精通HTML、CSS语言，熟练使用DIV+CSS排版技术，能熟练的手工编写HTML代码。3. 精通JavaScript编程，掌握ajax。4. 能处理主流浏览器兼容问题。1.网页设计基础2.网页交互设计3.DIV+CSS布局4.网站模板赏析网页美工1.具有较好的美术功底和创意构思能力，能把握色彩的使用，熟练掌握各种常用网页设计软件，能够读懂和手写HTML代码，熟悉web标准，了解DIVCSS制作。2.精通Photoshop、Flash、Illustrator、Fireworks等软件。1. Photoshop图像处理2.平面与色彩构成3.网页配色与布局4.用户体验设计3. 职业素养一名网页设计师除了需要网站设计的技术外，还需要要具备很多的素质。作为网站设计人员应该具备哪些职业素质？下面先看几个页面设计案例。案例1：/，页面效果如图5-5所示。图5-5 Lings car 网站案例2：/，页面效果如图5-6所示。图5-6 xhtmlslicing 网站分析与思考：案例1页面设计花花绿绿，让用户很难找到所需要的信息，没有突出的主题。案例2页面设计简洁、清晰、主题突出。你认为哪类网站更受用户欢迎？总结：通过案例1与案例2的比较我们可以得出下列的启示：网页设计师要具备较强的审美能力，要有创新意识，设计出的作品要有创意。网站的版面设计要清晰，简洁，具有良好的用户体验。第二部分 应用体验篇博客的出现是近几年的事情，但发展速度之快，达到了令人瞠目结舌的程度。有人说，博客是继Email，BBS，ICQ之后出现的第四种网络交流方式，是信息时代的麦哲伦。通过博客不仅可以展示自己的才华，写网络日志，还可以同其他博友们交流学习，交朋友等。本部分是以博客网页制作为主线，让学生动手体验“个人博客站点创建、个人博客首页制作、网站发布与浏览等”制作的基本过程，形成网站知识建构的经验基础，为后续相关课程的学习做好铺垫准备。5.2 任务1个人博客站点的创建5.2.1 任务分析制作一个博客网站首先要选择网页设计软件。Dreamweaver CS5是Adobe公司推出的一款网页设计的专业软件，Dreamweaver是集创建网站和管理网站于一身的专业性网页编辑工具，其界面友好、人性化和易于操作，是专业人员制作网站的首选工具。规范的网站建设应遵循一定的流程，其过程主要分以下几个步骤： 规划站点。包括需求分析，确定网页的主题和内容组织结构等内容。 定义站点。在Dreamweaver中设置本地站点，创建文件，添加已有的资源到站点目录下。 对网页进行布局和设置。在Dreamweaver中可以利用表格、层、CSS等实现对网页的布局。 添加文本、图像、表单、多媒体元素等内容。 添加超链接，包括文本超链接、锚、热区等。 修饰、美化页面。使用CSS对页面的外观样式进行统一设置，做到规范美观。 发布站点。主要包括在浏览器中预览、测试站点、设置远程站点发布。5.2.2 站点的创建 Dreamweaver CS5工作界面介绍新建一个文档，进入Dreamweaver CS5的工作界面，Dreamweaver CS5的操作界面由菜单栏、插入栏、文档窗口、属性面板及浮动面板组组成，图5-7所示是Dreamweaver CS5工作环境。图5-7 Dreamweaver CS5工作环境网站制作基本步骤：根据网站制作流程，制作网页前应该先在本地计算机上创建一个本地站点，以便于控制站点结构，方便地管理站点中的每个文件。具体操作步骤如下： 在本地机硬盘上创建站点的根目录。 使用Dreamweaver管理站点向导创建站点。 创建站点中的文件和文件夹。1. 创建站点站点通俗的说就是一个文件夹，在这个文件夹里包含了网站中所有用到的文件。具体操作步骤如下： 在电脑硬盘上建一个以英文或数字命名的空文件夹作为将要制作的网站的根文件夹。如在本机F盘下新建文件夹，命名为myblog，作为博客网站的根目录。&说明网站所有文件及文件夹命名尽量不使用中文，命名尽量有意义。启动Dreamweaver CS5，单击【站点】菜单|【管理站点】命令，弹出【管理站点】对话框，在对话框中单击【新建】按钮，如图5-8所示。 弹出【站点设置对象效果】对话框，在对话框中选择【站点】选项，在【站点名称】文本框中输入名称，可以根据网站需要任意起一个名字。单击【本地站点文件夹】文本框右边的浏览文件夹按钮，选择站点文件的存放的文件夹，本例选择“F:myblog”。如图5-9所示。 图5-8 管理站点对话框 图5-9 站点设置对象效果对话框 单击【保存】按钮，更新站点缓存，出现【管理站点】对话框，其中显示了新建的站点，如图5-10所示。 单击【完成】按钮，此时在【文件】面板中可以看到创建的站点文件，如图5-11所示。 图5-10 管理站点对话框 图5-11 创建的站点2. 创建站点中的文件和文件夹站点是文件与文件夹的集合， 个人博客网站站点结构为：页面：主页index.html页面、注册页regsiter.html、相册页photo.html。images文件夹：网站图片素材。css文件夹：layout.css页面布局样式文件、style.css页面美化样式文件。js文件夹：存放脚本文件。下面在myblog站点中建立主页文件及站点中的文件夹，建立的步骤如下： 建立主页文件。在【文件】面板的站点文件列表框中单击鼠标【右键】|选择【新建文件】命令，如图5-12所示，将文件命名为index.html。&说明文件和文件夹名称一般用小写的英文字母、数字和下划线的组合。%小技巧在一个网站中，主页通常以index或default命名。 用类似可以方法建立文件夹。在【文件】面板的站点文件列表框中选中“站点-myblog”，右击鼠标，在弹出的快捷菜单中，选择【新建文件夹】命令，如图5-13所示，将文件夹命名。这里我们将资源文件中的images文件夹、css文件夹、js文件夹和提供的register.html复制到站点中。 图5-12 新建文件选项 图5-13 新建文件夹选项5.2.4 任务体验【训练目的】1. 了解使用Dreamweaver搭建站点2. 了 解在站点中创建文件【训练内容】使用Dreamweaver CS5创建一个名称为myblog的本地站点，在站点中创建images、css、js文件夹。【训练步骤】操作步骤： 启动Dreamweaver CS5，单击【站点】|【管理站点】命令，弹出【管理站点】对话框，在对话框中单击【新建】按钮。 弹出【站点设置对象】对话框，在对话框中选择【站点】选项卡，在【站点名称】中输入“myblog”。 单击【本地站点文件夹】文本框右边的浏览文件夹按钮，弹出【选择根文件夹】对话框，选择存放站点的文件夹，单击【保存】按钮。 在弹出的【管理站点】对话框，单击【完成】按钮。 在【文件】面板中选择创建的站点，单击【右键】创建index.html文件和images、css、js文件夹。5.3 任务2制作个人博客首页5.3.1 任务分析创建好站点，下面将完成个人博客首页的制作。首页效果如图5-14所示。版权信息日志信息网站导航部分日历及博客基本信息图5-14 个人博客首页效果图首页是网站建设的重要环节，关系到网站二级页面及三级页面的风格的协调统一等问题。要完成个人博客首页制作需要完成下列步骤： 收集网站建设所需素材。 设置页面属性。 首页的布局与设计。 首页内容的制作。 使用CSS对首页美化。5.3.2 首页的布局与设计&说明要设计好一个网页，首先要对网页进行布局设计。网页制作现主要有两种布局方法，一种是表格布局，另一种就是DIV+CSS布局。表格布局适合于规则数据显示页面和表单页面，对于不规则的复杂页面通常采用DIV+CSS的方式布局。目前流行的布局方式是采用DIV+CSS的方式，本例将采用DIV+CSS的方式布局，下面先了解一下DIV和CSS。1. 什么是CSSCSS是“Cascading Style Sheet”的缩写，中文名称是层叠样式表。用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。建网页好比盖房子，CSS应用就是类似房子的装修。2. 什么是DIV+CSSDIV是标签，是HTML（超文本语言）中的一个元素， DIV+CSS 是一种网页的布局方法，这一种网页布局方法有别于传统的table布局，真正地达到了W3C内容与表现相分离。DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，其实标准的说法应该是XHTML+CSS， DIV+CSS是国内比较常用的说法，通常为了说明与HTML网页设计语言中的表格（Table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。%小技巧使用快捷键Shift+F11也可以展开CSS面板，若再按下快捷键Shift+F11则将CSS面板隐藏。个人博客首页图5-14的布局可以看作是“3行1列”的布局形式，分别为：导航栏、主体内容和版权信息。为了使页面内容与样式分离，在进行页面布局时，我们将样式代码放在layout.css文件中。首页布局具体操作步骤如下：1、打开前面建立的index.html文档，在【标题】文本框中输入“个人博客”作为页面标题，如图5-16所示。图5-16 设置标题2、新建CSS文件。单击【文件】菜单|选择【新建】命令，弹出新建文档窗口，如图所示，【页面类型】选择CSS，单击【创建】按钮。将空白页面保存在myblog文件夹下的css文件夹中，并命名为layout.css。3、附加外部样式表。打开index.html文档，在面板组的【CSS样式】面板中单击附加样式表按钮，弹出【链接外部样式表】对话框，通过浏览选择上一步新建的文件layout.css，单击【确定】按钮，在【链接外部样式表】对话框【添加为】选择【链接】，如图5-17所示。图5-17 链接外部样式表4、在【CSS】面板单击新建CSS规则按钮，弹出CSS规则定义对话框，如图5-18所示，选择器类型选择【标签】，选择器名称选择【body】，规则定义在layout.css，单击【确定】。图5-18 新建CSS规则对话框5、在弹出的对话框中选择【类型】，如图5-19所示，设置【Font-family】为宋体（若没有此项可通过编辑字体列表添加），设置【Font-size】为12px, 如图所示；选择【背景】，如图5-20所示，设置【Background-color】为#CCC，如图所示。图5-19 CSS类型对话框图5-20 CSS背景对话框6、在分类中选择【方框】，如图5-21所示，设置【margin】值全为0，如图所示，单击【确定】按钮。图5-21 CSS方框对话框7、在代码栏内，将光标置于后，单击面板组【插入】按钮|【插入Div标签】按钮，弹出如图5-22所示对话框，在ID框中输入自定义的ID名称为“container”。图5-22 插入div标签8、单击【插入Div标签】对话框中的【新建CSS规则】按钮，在弹出的【新建CSS规则】对话框中，选择定义规则位置在layout.css文档，单击【确定】按钮。弹出【CSS规则定义】对话框，选择【分类】中【方框】，设置【Width】值为756px，【Margin】属性中Top与Bottom值设置为0px，Right和Left值设置为auto。如图5-23所示。然后点击【确定】，回到【插入Div标签】中，点击【确定】。图5-23 #container的CSS规则定义9、在【代码】视图，将标签中间的文本内容删除，将光标置于中间，单击面板组【插入】按钮|【插入Div标签】按钮，在ID框中输入自定义的ID名称“top”。 单击按钮，弹出CSS规则定义对话框，在【#top 的css规则定义】对话框中，在【分类】中选择【背景】，单击【浏览】按钮设置【Background-image】值，选择images文本夹中的top.jpg。如图5-24所示。图5-24 设置#top样式的背景10、选择【方框】，设置【Width】值为756px，设置【Height】值为155px，如图5-25所示。单击【确定】按钮，回到【插入Div标签】中，点击【确定】。图5-25 设置#top样式的宽度和高度11、点击中间，用类似方法分别插入ID名为“main”和“bottom”的div，并设置div的样式，各div的样式参数设置如表5-3所示。表5-3 div样式参数ID名样式参数#main【Background-color】：#FFF【Width】：756px【Height】：741px#bottom【Background-image】：./images/bottom.jpg【Width】：756px【Height】：80px12、将光标置于id为main的div中，将文字删除，单击面板组【插入】按钮|【插入Div标签】按钮，在main中插入三个div标签，插入后代码如图5-26所示。图5-26 在id为main的div中插入三个div13、在【CSS】面板单击新建CSS规则按钮，弹出CSS规则定义对话框，选择器类型选择【类】，选择器名称输入“.left”，点击【确定】，弹出【CSS规则定义】对话框，选择【分类】中的【方框】，设置【Width】值为190px，【Height】值为741px，【Float】值为left，如图5-27所示。单击【确定】按钮，在标签检查器id为main的div中选中第一个“此处显示新 Div 标签的内容”部分，在【属性】面板设置类为left。图5-27 类名为left的CSS规则定义14、用类似方法新建类名为“.center”和“.right”的CSS规则，各样式参数设置如表5-4所示。在标签检查器中分别main的第二、三个div，在【属性】面板分别设置类为center，right。表5-4 类样式参数类名样式参数.center【Width】：1px【Height】：741px【Float】：left.right【Width】：540px【Height】：741px【Float】：left15、布局完成后生成的layout.css文件代码如图5-28所示，按【F12】看页面效果如图5-29所示。 图5-28 layout.css样式代码 图5-29 布局后页面效果%小技巧 文档被修改后，文件名右上角会有*（星号），表示文件未保存，保存文件后，*（星号）消失。保存文件快捷键“Ctrl+S”。 预览页面效果，可以使用快捷键F12。5.3.3 首页的制作页面布局好后接下来就是向页面添加内容，可以向页面添加的内容包括Logo、导航栏目、文本、图像、超链接、表单、Flash动画、音频和视频等。1. 页面头部的制作页面头部主要包括网站的横幅和导航栏，下面根据素材完成顶部内容的制作，具体操作步骤如下： 将光标定位于id为top的中间，将div中的内容删除，然后鼠标点击右栏左上部，输入“注册”，回车，以类似的方式输入“登录、搜索、留言、相册、首页”，选择所有文字，在【属性】面板，单击项目列表按钮，如图5-30所示。图5-30 设置项目列表选择“注册”，在属性面板单击【链接】后面的文件夹按钮，选择超链接的页面为register.html，如图5-31所示。图5-31 设置“注册”超链接 用类似的方法设置“主页”超链接的页面为“index.html”；“相册”超链接的页面为“photo.html”，其他文字的超链接设置为“#”。完成后页面效果如图5-32所示。图5-32 页面头部效果图2. 页面底部的制作页面底部一般作为版权声明、友情链接展示、放置广告的地方，本例中的页脚效果如图5-33所示。图5-33 页面底部效果图具体操作步骤如下： 将光标置于id为bottom的div中，将div标签中的文字删除，输入“Powered by:那一年冬天”，回车，再次输入“CopyRight2011那一年冬天”。3. 主体部分的制作页面主体部分为左右两部分，其中左侧信息为日历和博客基本信息，右侧为日志文章。效果如图5-34所示。图5-34 页面主体部分效果图具体操作步骤如下：将光标置于类名为“left”的div中，将文字删除，选择面板组【插入】按钮|【图像】按钮，在【选择图像源】对话框中选择left.jpg图片，单击【确定】按钮。页面效果如图5-35所示。图5-35 左侧信息栏效果将光标置于类名为“center”的div中，将文字删除，在div中插入line.jpg图片。将光标置于类名为“right”的div中，将文字删除，选择面板组【插入】按钮|【插入Div标签】按钮，在right Div中插入三个Div，如图5-36所示。图5-36 在类名为right的div中插入三个div第一个Div插入文字和图片。将第一个Div中的文字删除，输入“旅途风光”，按回车键，在面板组单击【插入】按钮|【图像】按钮，插入scenery1.jpg图片。第二个Div插入表格，在表格中添加文字。将第二个Div中的文字删除，在面板组单击【表格】按钮，在弹出的【表格】对话框中设置行数为4，列数为1，表格宽度为95百分比，边框粗细、单元格边距、单元格间距设置为0，如图5-37所示。图5-37 插入4行1列表格在表格第一行输入日志标题：上海老街印象；第二输入时间：2011-01-28 18:16；第三行输入：上海老街，又称小东门，这里曾是100年前上海开埠后最早灯火辉煌、万商云集的地方，地处上海市黄浦区老城厢，也就是小东门城门所在地。由于历史原因，城门没有被保留下来，但是老城厢环城的9扇门至今仍深深刻在上海人民心中。上海老街所在的小东门地区，原是上海对外贸易、小商品交易的重要场地，见证了上海的经济社会发展；第四行输入：阅读全文(27) | 回复(0) | 推送。重复第步操作，将表格第一行输入：苏州游记之山塘；第二行输入：2011-02-20 12:42；第三输入：山塘街位于古城苏州的西北部，东连红尘中一二等富贵风流之地阊门，西接吴中第一名胜虎丘，全长3600米，因此被称作七里山塘。山塘街始建于公元825年，为唐朝大诗人白居易来苏州担任刺史时所建。有民歌唱到上有天堂，下有苏杭。杭州有西湖，苏州有山塘。两处好地方，无限好风光。这便是对山塘街的生动写照。第四行输入：阅读全文(19) | 回复(0) | 推送。输入完成效果如图5-38所示。图5-38 内容制作后效果图5.3.4 首页的美化页面制作完成后效果并不美观，为了使页面效果更加漂亮，可以使用CSS对页面进行美化。将资源文件CSS文件夹中的样式文件style.css链接到页面，页面美化后效果如图所示。1. 页面头部的美化导航栏部分通过样式表美化的操作步骤如下：附加外部样式表。为了简化操作，美化的样式文件已经生成并放在CSS资源文件夹中。在面板组的【CSS样式】面板中单击附加样式表按钮，弹出【链接外部样式表】对话框，通过浏览选择CSS文件夹中的style.css，单击【确定】按钮，在【链接外部样式表】对话框【添加为】选择【链接】。style.css文件中的样式设置如图5-39所示。图5-39 style.css样式表选择导航菜单中的“注册”，在【属性】面板设置【类】为“tdwidth”，如图5-40所示。图5-40 设置“注册”样式导航菜单美化后效果如图5-41所示。图5-41 美化后的页面头部效果2. 页面底部的美化页面底部的美化步骤如下：选择页面底部文字，在【属性】面板设置【类】为“textCenter”。页面底部美化后效果如图5-42所示。图5-42 美化后的页面底部效果3. 主体部分的美化页面主体内容的美化步骤如下：选择标题文字“旅途风光”，在【属性】面板设置【类】为“wb”，用类似的方法设置标题“上海老街印象”、“苏州游记之山塘”的样式。分别选择“2011-01-28 18:16”、“阅读全文(27) | 回复(0) | 推送”、“2011-02-20 12:42”和“阅读全文(19) | 回复(0) | 推送”，在【属性】面板设置【类】为“textRight”。在标签检查器中选择“旅途风光”所在div，如图5-43所示，在【属性】面板设置【类】为“paddingLeft”。图5-43 设置正文第一个div样式在标签检查器中分别选择“上海老街印象”所在div，在【属性】面板设置【类】为“line”，如图5-44所示。用类似方法设置“苏州游记之山塘”所在的div样式。图5-44 设置正文第二个div样式选择“上海老街印象”的正文所在td单元格，在【属性】面板设置【类】为“lineHeight”，如图5-45所示。用类似方法设置“苏州游记之山塘”正文所在td单元格样式。图5-45 设置正文第三个div样式页面美化后效果如图5-46所示。图5-46 正文美化后效果图5.3.5 任务体验【训练目的】1. 熟悉Dreamweaver的工作环境2. 掌握使用页面布局的简单方法3. 掌握使用Dreamweaver制作页面内容4. 了解使用CSS美化页面【训练内容】利用Dreamweaver CS5创建博客首页并使用CSS对其美化，页面效果如图5-14所示。【训练步骤】操作步骤： 新建index.html文档。 使用DIV+CSS对博客首页布局。将首页分为上中下结构，其中上面是页面头部，中间是主体部分，下面是页面底部分。 添加页面头部内容。 添加页面底部分内容。 添加主体部分内容。 使用资源文件中的style.css样式美化页面。5.4 任务3 网站发布与浏览5.4.1 任务分析网站制作完成以后，就要上传到服务器上供浏览者预览，这样所作的网页才会被别人看到。网站发布流程：第一步，申请一个域名；第二步，申请一个空间服务器；第三步，上传网站到服务器。下面我们将以自己的电脑作为服务器，通过IIS设置将网站发布，IIS（Internet Information Server，互联网信息服务）是当今最流行的Web服务器之一，提供了强大的互联网和互联网之间的服务功能。5.4.2 网站发布与浏览通过IIS发布网站的操作步骤如下：先要确定本机安装有IIS（Internet信息服务）。打开【控制面板】|【管理工具】|【Internet信息服务】，弹出【Internet信息服务】对话框，选择【网站】|【默认网站】|单击【右键】|选择【新建】|选择【虚拟目录】，如图5-47所示。图5-47 新建虚拟目录在弹出的对话框中输入虚拟目录的别名“myblog”，如图5-48所示。图5-48 设置虚拟目录别名单击【下一步】，在弹出的对话框中通过浏览选择网站发布的位置，如图5-49所。本例发布位置选择的是F:myblog。图5-49 设置网站内容目录单击【下一步】，在弹出的对话框设置访问权限，如图5-50所示，一般情况下使用默认就可以了。根据操作向导完成后面操作即可。图5-50 设置访问权限操作完成后，选择虚拟目录中的主页，单击【右键】|选择【浏览】即可浏览网站主页，如图5-51所示。也可以打开浏览器，在地址栏输入：http:/localhost/myblog/index.html浏览主页。图5-51 浏览网站5.4.3 任务体验【训练目的】1. 了解使用IIS发布网站2. 学会在访问使用IIS发布的网站【训练内容】利用IIS发布网站。【训练步骤】操作步骤： 打开IIS，新建虚拟目录。 根据向导完成虚拟目录设置。 在浏览器中访问发布的网站。5.5 知识与任务拓展5.5.1 网页基础知识为了使网页初学者对网页设计有个总体的认识 ，下面介绍网页设计的基础知识。1. 什么是静态网页静态网页是采用传统的HTML编写的网页，其文件后缀一般为.html、.htm、.shtml、.xml等 。静态网页并不是指网页中的元素都是静止不动，而是指浏览器与服务器端不发生交互的网页，但是网页中可能会包含GIF动画、鼠标经过图像、Flash动画等。静态网页的主要特点如下：静态网页的每个页面都有一个固定的URL。静态网页的内容相对稳定，因此容易被搜索引擎检索。静态网页没有数据库的支持，当网站信息量很大时，依靠静态网页的制作方式比较困难。静态网页交互性比较差。信息流向是单向的，即从服务器到浏览器。服务器不能根据用户的选择调整返回给用户的内容。2. 什么是动态网页动态网页是指网页文件里包含了程序代码，通过后台数据库与WEB服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务。这种网页的后缀名称一般根据不同的程序设计语言而不同，常见的有.asp、.aspx、.jsp、.php、.perl、.cgi等形式为后缀。动态网页的主要特点如下：动态网页没有固定的URL。动态网页以数据库技术为基础，可以大大网站维护的工作量。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理和订单管理等。动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。3. 什么是超链接（1）什么是超链接超链接是指从一个网页元素指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一张图片，一个电子邮件地址，甚至一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或是一张图片。当浏览者单击已经承载链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。超链接代码为 网页元素（2）超链接的分类 按照链接路径的不