DREAMWEAVER+CS4+网页设计与制作指南_第15章.ppt

《DREAMWEAVER+CS4+网页设计与制作指南_第15章.ppt》由会员分享，可在线阅读，更多相关《DREAMWEAVER+CS4+网页设计与制作指南_第15章.ppt（43页珍藏版）》请在三一办公上搜索。

1、第15章 个人主页的制作,本章将介绍如何制作一个个人主页类的网站，学习如何写网站策划书以及进一步了解网站制作流程，并掌握网站首页模板及子页模板的制作流程。本章重点内容：掌握网站策划书的书写掌握网站制作流程掌握制作网站首页及子页模板的流程熟悉CSS样式表的创建及编辑,15.1 策划构思及设计流程,本例以制作一个肿瘤医生的个人主页为主导，系统详细地介绍个人主页的制作全过程。在整个准备过程中的流程如下：根据客户需求|制作网站策划|准备所需素材|创建网页布局|创建CSS样式|制作首页模板|制作子页模板|案例扩展分析|测试上传。,15.1.1 客户需求,应客户的要求，为余医生建立一个个人网页，用以与患者

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

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

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

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

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

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

8、度为“739px”。,15.6.2 制作分隔线,（1）设置第1列单元格宽度为“182px”。（2）用第2列的单元格制作分隔线，高度为“2px”，用用事先做好的图片填充。,15.6.3 制作侧栏,在上面设置好宽度为182的单元格中制作网页的侧栏。电子名片新闻搜索信息排行,15.6.4 制作右侧分栏,制作好了左侧栏以后，再制作右侧分栏中的内容，按界面的规划，在右侧设计了3个栏目的内容，分别是“本站最新动态”、“临床实践”、“肿瘤知识”。,15.7 制作尾部版权,经过上面几步的操作，网站的大体已制作完成，只差尾部的设计，实际上网页的尾部制作也很关键，它关系到一个网站的设计是否能够首尾呼应，是否能成为

9、一个整体。,15.8 制作网站模板,通过上面制作完成的静态页来创建网站的模板，原来的网站是由ASP的新闻发布系统制作页成，为了能让读者有个由易到难的认识过程，在这里只是讲解静态页的制作，因此利用模板来完成网站内容的更新。模板的创建在前面的章节中已有了介绍，现在按照操作步骤来完成首页模板的制作。,15.8.1 制作首页模板,根据上面完成的首页HTML页面制作首页模板。,15.8.2 制作模板的可编辑区域,在模板中创建编辑区域的具体操作步骤如下。（1）选中导航条菜单的表格，在键盘按左方向键，将光标定位在表格前的位置。（2）选择菜单命令“插入”|“模板对象”|“可编辑区域”，或按组合键“Ctrl+A

10、lt+V”弹出“新建可编辑区域”对话框，设置名称为“caidan”。,15.8.2 制作模板的可编辑区域,（3）单击“确定”按钮，在页面中插入了一个可编辑区域。（4）删除原来导航条所在的表格。（5）依照上面的方法，依次将左侧栏位置创建可编辑区域。（6）再创建右侧栏的可编辑区域。（7）保存当前模板。,15.8.3 从模板中创建首页,创建好了模板以后，可以应用模板来创建新的网页，为了保证首页和子页的同步更新，将原来的index.htm另存为index1.htm。,15.8.4 应用模板创建子页,在应用模板创建了首页以后，创建子页也应用同一个模板，方便同步更新，在布局上基本相同，只是在侧栏和右侧内容

11、区域略有不同。,15.8.5 创建三级页面模板,应用模板创建了子页和栏目页后，还需要为详细信息的显示页面建立一个模板。,15.8.6 应用三级页面模板创建页面,三级页面为最终的信息显示页面，一般不用做过多的修饰，只要大方得体，符合人们的阅读习惯就好，太花哨了反而不能突出重点。,15.9 案例扩展,因为整个站点最后是由ASP程序进行编写，所以本例中介绍的是几个静态页面的制作过程，在制作程序之前，要将静态页的效果制作出来，这样，可以在制作程序时有据可依，免去在制作中反复操作的时间，程序的源文件在案例anli_1文件下。,15.9.1 测试网站链接,在站点制作完成以后，首先要在本地检查网站的链接是否

12、无误，在“文件”面板中，选择任意一个文件，单击鼠标右键，在弹出的下拉菜单中选择“检查链接”|“整个本地站点”命令。另外，也可以在浏览器中通过点击查看链接是否正确，因为有的页链接是独立的，没有返回点。,15.9.2 检查网站内容,检查完链接以后，还要对照客户需求，检查网站的制作内容是否和客户需求一致，小到文字、动画，大到栏目分类以及首页、子页、三级页面内容设置。将这些都检查通过以后，就可以将站点上传至互联网中让客户测试了。,15.9.3 申请域名空间,每个网站都有独立的域名和空间。在网站制作完成后，也要为网站申请域名和空间。首先根据客户的需要，因为是个人主页，一般以个人的名字或喜好为基准选择域名

13、。一般个人的网站空间100MB左右就足够了。,15.9.4 上传站点,上传站点就是将网站中的所有内容（其中包括网站的图片、网页文件、flash动画、视频等）通过Cutftp或Flashfxp等FTP软件全部上传到Web服务器中，而DW8可以实现网站的上传，不需要另外安装FTP软件。,15.9.5 站点同步更新,当需要Web站点中的文件和本地的文件需要同步更新时，可以使用DW8中的站点同步更新功能来实现。,15.10 本章小结,本章详细介绍了个人主页的一般制作流程，帮助读者进一步熟练操作，熟悉在制作静态网页中模板的使用和制作方法，以及站点建成以后如何测试上传。个人主页可以展示个性、时尚，同时又能表现网站拥有者的活动、思想，页面的排版可以非常灵活，因此学习网页制作之初可以先从个人主页做起，再一步步提高自己的制作水平，做出更专业的作品。,