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

《Dreamweaver网页设计与制作指南-第15章课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第15章个人主页的制作本章将介绍如何制作一个个人主页类的网站，学习如何写网站策划书以及进一步了解网站制作流程，并掌握网站首页模板及子页模板的制作流程。本章重点内容：掌握网站策划书的书写掌握网站制作流程掌握制作网站首页及子页模板的流程熟悉CSS样式表的创建及编辑15.1策划构思及设计流程本例以制作一个肿瘤医生的个人主页为主导，系统详细地介绍个人主页的制作全过程。在整个准备过程中的流程如下：根据客户需求

2、制作网站策划

3、准备所需素材

4、创建网页布局

5、创建CSS样式

6、制作首页模板

7、制作子页模板

8、案例扩展分析

9、测试上传。15.1.1客户需求应客户的要求，为余医生建立一个个人网页，

10、用以与患者之间进入交流，有个互动的平台，也可以随时发表一些自己的生活感悟和疾病常识。客户需要有一个独立的顶级域名和网站空间，对于界面主体色调，前期没有提出要求，图片要求以向阳花为主。15.1.2网站策划根据客户的要求，参照网上一些医生主页的样式，为该网站策划了如下栏目：个人介绍临床实践肿瘤知识生活感悟健康问答15.1.3网站结构规划在正式创建网站之前，先规划网站目录的结构，然后策划网页结构和布局，最后确定网页的内容编排。这样做可以方便站点的管理和维护。15.1.4准备所需素材在制作网站的过程中，需要图片、文字资料、Flash动画素材。一般情况下，可以使用Photosh

11、op制作各种图片，用ImageReady来切割图片，FlashMX和Swish2相结合，制作Flash动画文件。本案例中所使用的图片都是用Photoshop制作，动画中所使用的文字动画由Swish2制作完成。15.2实例简介该网站的主要用途是介绍余医生的从医经验以及发布关于肿瘤的相关知识，让余医生与患者之间有个互动的平台，方便患者查询与肿瘤相关疾病的资料，还可以及时获得答复。界面以简洁大方为主，配以向阳花，寓意永远追逐太阳的光芒，以其执著征服着人们的心。15.3页面布局设置在制作之前，先对网页的首页布局进行设置。15.3.1构划页面布局草图本案例采用通用的上中下结构，

12、头部分为两行，一行为导航条，另一行为Banner条；中间采用左右结构，左侧放置余医生的个人说明和信息搜索及信息点击排行，右侧为正文部分，放3类信息内容；下部放版权说明。15.3.2设计界面规划好页面布局，就可以在Photoshop中设计界面的大致样图，在此强调的是，做网页设计不同于平面设计，不需要将所有的细节均在Photoshop中全部体现出来，有细节部分是可以在制作过程中随时处理，因而不需要在整个界面的处理上花费过多的时间，而且网页中，好多部分的色调是用颜色值来设置，不是所有的地方都用图片来填充。15.4制作页面过程在Photoshop中设计好图以后，就要在Drea

13、mweaverCS4中按照设计的效果切割做成HTML网页。15.4.1新建站点在制作网页之前，先要建立一个该网站的站点。15.4.2建立站点文件夹根据网页制作规范建立站点文件夹，先建立images、style两个文件夹，网页文件放在根目录下，之后的文件夹在涉及到时随时添加。15.4.3新建网页建立好站点和文件夹以后，在根目录下新建一个index.htm页。15.4.4设置标题栏新建的网页的标题是“无标题文档”，修改标题，或切换到代码视图，对中间的代码直接进行修改，设置标题为“余淑坤医生的个人网页--吉林市吉化集团公司肿瘤科！”15.4.5

14、设置页面属性设置外观设置链接设置标题/编码15.4.6创建CSS样式表根据页面属性以及界面色调，将需要用到的样式创建到样式表Style.css文件中。15.5制作页面头部经过上面的准备，即可以正式制作网页了，注意在制作过程中的一些技巧。15.5.1从外部引入CSS样式表（1）打开“CSS样式”面板，单击，或在空白处单击鼠标右键，在弹出的菜单中选择“附加样式表”命令。（2）弹出“链接外部样式表”对话框，选择样式表文件，选择“添加为”的选项为“链接”。（3）单击“确定”按钮，完成从外部引入CSS样式表的设置。15.5.2建立头部表格根据设计的界面效果，在文档视图中先建立头

15、部表格。15.5.3制作导航条（1）第2列第2行插入宽度为100%的1行3列的表格。（2）将表格设置成导航条的背景，在第1列和第3列中插入两个小图片作为背景的边缘部分，第2列用背景图片填充。（3）在表格第2列中再插入一个宽为100%的表格，按栏目分配表格的列，输入导航栏目名称，并在两个名称之间插入一个细长图片，用于分隔各栏目。（4）为刚插入的对象设置链接（暂时先设置为空链接#），并设置合适的CSS样式。15.5.4制作Banner部分根据界面的设计，在头部表格之下是一个Banner动画。15.6制作中间表格内容按界面的设计，将中间的正文部分分成左右两