Dreamweaver网页设计与制作指南-第15章.ppt

第15章 个人主页的制作 本章将介绍如何制作一个个人主页类的网站，学习如何写网站策划书以及进一步了解网站制作流程，并掌握网站首页模板及子页模板的制作流程。本章重点内容： 掌握网站策划书的书写 掌握网站制作流程 掌握制作网站首页及子页模板的流程 熟悉CSS样式表的创建及编辑 15.1 策划构思及设计流程 本例以制作一个肿瘤医生的个人主页为主导，系统详细地介绍个人主页的制作全过程。在整个准备过程中的流程如下：根据客户需求|制作网站策划|准备所需素材|创建网页布局|创建CSS样式|制作首页模板|制作子页模板|案例扩展分析|测试上传。 15.1.1 客户需求 应客户的要求，为余医生建立一个个人网页，用以与患者之间进入交流，有个互动的平台，也可以随时发表一些自己的生活感悟和疾病常识。 客户需要有一个独立的顶级域名和网站空间，对于界面主体色调，前期没有提出要求，图片要求以向阳花为主。 15.1.2 网站策划 根据客户的要求，参照网上一些医生主页的样式，为该网站策划了如下栏目： 个人介绍 临床实践 肿瘤知识 生活感悟 健康问答 15.1.3 网站结构规划 在正式创建网站之前，先规划网站目录的结构，然后策划网页结构和布局，最后确定网页的内容编排。这样做可以方便站点的管理和维护。 15.1.4 准备所需素材 在制作网站的过程中，需要图片、文字资料、Flash动画素材。一般情况下，可以使用Photoshop制作各种图片，用ImageReady来切割图片，FlashMX和Swish2相结合，制作Flash动画文件。本案例中所使用的图片都是用Photoshop制作，动画中所使用的文字动画由Swish2制作完成。 15.2 实例简介 该网站的主要用途是介绍余医生的从医经验以及发布关于肿瘤的相关知识，让余医生与患者之间有个互动的平台，方便患者查询与肿瘤相关疾病的资料，还可以及时获得答复。界面以简洁大方为主，配以向阳花，寓意永远追逐太阳的光芒，以其执著征服着人们的心。 15.3 页面布局设置 在制作之前，先对网页的首页布局进行设置。 15.3.1 构划页面布局草图 本案例采用通用的上中下结构，头部分为两行，一行为导航条，另一行为Banner条；中间采用左右结构，左侧放置余医生的个人说明和信息搜索及信息点击排行，右侧为正文部分，放3类信息内容；下部放版权说明。 15.3.2 设计界面 规划好页面布局，就可以在Photoshop中设计界面的大致样图，在此强调的是，做网页设计不同于平面设计，不需要将所有的细节均在Photoshop中全部体现出来，有细节部分是可以在制作过程中随时处理，因而不需要在整个界面的处理上花费过多的时间，而且网页中，好多部分的色调是用颜色值来设置，不是所有的地方都用图片来填充。 15.4 制作页面过程 在Photoshop中设计好图以后，就要在Dreamweaver CS4中按照设计的效果切割做成HTML网页。 15.4.1 新建站点 在制作网页之前，先要建立一个该网站的站点。 15.4.2 建立站点文件夹 根据网页制作规范建立站点文件夹，先建立images、style两个文件夹，网页文件放在根目录下，之后的文件夹在涉及到时随时添加。 15.4.3 新建网页 建立好站点和文件夹以后，在根目录下新建一个index.htm页。 15.4.4 设置标题栏 新建的网页的标题是“无标题文档”，修改标题，或切换到代码视图，对title/title中间的代码直接进行修改，设置标题为“余淑坤医生的个人网页--吉林市吉化集团公司肿瘤科！” 15.4.5 设置页面属性 设置外观 设置链接 设置标题/编码 15.4.6 创建CSS样式表 根据页面属性以及界面色调，将需要用到的样式创建到样式表Style.css文件中。 15.5 制作页面头部 经过上面的准备，即可以正式制作网页了，注意在制作过程中的一些技巧。 15.5.1 从外部引入CSS样式表 （1）打开“CSS样式”面板，单击，或在空白处单击鼠标右键，在弹出的菜单中选择“附加样式表”命令。 （2）弹出 “链接外部样式表”对话框，选择样式表文件，选择“添加为”的选项为“链接”。 （3）单击“确定”按钮，完成从外部引入CSS样式表的设置。 15.5.2 建立头部表格 根据设计的界面效果，在文档视图中先建立头部表格。 15.5.3 制作导航条 （1）第2列第2行插入宽度为100%的1行3列的表格。 （2）将表格设置成导航条的背景，在第1列和第3列中插入两个小图片作为背景的边缘部分，第2列用背景图片填充。 （3）在表格第2列中再插入一个宽为100%的表格，按栏目分配表格的列，输入导航栏目名称，并在两个名称之间插入一个细长图片，用于分隔各栏目。 （4）为刚插入的对象设置链接（