网页设计与制作教程杨帆严耀伟王方网页设计第七章.pptVIP

7.1 网站系统设计 7.1.2 网站设计的基本原则 1. 速度优先原则 2. 标题设计原则 3. 内容更新原则 4. 艺术处理原则 （1）网络统一 （2）版面编排 （3）总体性 （4）色彩处理 5. 操作简便原则 6. 易于维护原则 7.2 网站内容设计 7.2.1 网页外观设计 网站规划完成后，就可以开始设计具体的页面了。在设计页面时要明确网站发布的是什么信息，不同的网站有不同的风格。例如这里制作的是一个汽车租赁公司的网站，明确主题后，可绘制出网站的结构图。 1. 绘制页面结构草图 2. 绘制网页效果图 效果图是网页结构草图的基础上，利用绘图软件进行进一步精细地描绘 3. 效果图切割保存 （1）效果图中并非所有的图样都会应用在网页当中，尤其是效果图当中那些需要修改的地方，更不能直接贴入网页。 （2）效果图整体上较大，如果不分开插入网页，用户会感觉网页的打开速度很慢。分割成许多小图之后，打开网页时边浏览器一边显示部分图片，一边打开还未显示的那些，提升了用户体验。 （3）效果图切割也是为了满足Dreamweaver设计网页时的排版布局需要。 Photoshop除了可以用来绘制效果图，也能完成效果图的切割工作，如图所示，选取Photoshop工具箱中的“切片工具”，将效果图中有用的部分切割下来。 7.2.2 网站制作流程简介 在网站的创作过程中，一般的流程是制作人先在本地计算机上将网站全部制作完成，再将网站的所有文件上传发布到事先申请的Web服务器上。所以第一步要做的事情是创建一个本地网站并开始制作，其过程如下。 1. 建立空白站点 2. 给空白站点添加文件夹和文件 （1）添加主页 （2）添加文件夹和其它文件。 1. 页面布局 （1）打开主页，进入布局模式 （2）绘制布局表格和布局单元格 2. 添加内容 进入标准模式后，布局表格连同布局单元格一起，变成了普通的虚线表格（零线宽表格）。将效果图切割下来的小图片依次插入到对应的单元格中，如图 完成后的效果如图 3. 设置超链接 在Dreamweaver中设置超链接十分简单。只要选中想到设置为超链接的文字、图片等元素，在该元素的属性窗口中就有链接设置框，将相应的URL填入即可。 7.3 个人网站设计实例 7.3.1首页设计 第一步，使用平面图形设计软件Photoshop制作网站效果图，将效果图进行切片以获取网页制作中需要的图像素材 设计好的效果图如图 第二步，在Dreamweaver软件中建立空白网站，并向空白网站中添加必要的文件夹和文件，如图 第三步，在文件面板中双击打开index.html进行编辑 本例中的网站准备实现这样一种效果：在浏览网站的过程中页面的上部维持不变，变化的是网页的中下部分。可以用框架结构实现这样的功能。具体步骤是： 在index.html的编辑界面下，点击Dreamweaver插入工具栏的“布局”选项卡，找到其中的“框架”图标，在下拉菜单中选择“顶部”框架。这里会弹出对话框提示输入每个框架的名称，可以不输入，即保留框架的默认名称：TopFrame和MainFrame。 在页面中添加了上下二分式的“顶部框架”后，还需要对各个框架和框架的集合：“框架”集进进行设置，调整它们的高度或宽度，设置其边框是否可见，及是否允许框架中嵌入的网页滚动等。设置框架和框架集最好使用“框架面板” 框架面板如图 框架和框架集属性设置完成之后，点击菜单文件保存全部，将所有的设置保存。这里会提示保存框架集文件，一定要把框架集文件保存成index.html文件。 编辑上部框架源文件top.html。虽然可以在主页index.html中编辑这两个文件，但实际上这种做法是很不方便的。正确的方法是在文件面板中分别双击打开top.html和main.html进行编辑。 top.html的制作 接下来的工作是页面布局。页面布局的作用是使上述的页面元素在网页上位置固定下来，从而使网页的结构、风格在每次浏览时都固定一致，也方便了网页的设计者在制作页面时能够严格按照网页草图或效果图实现自己的设计意图。 “布局表格”和“普通表格”两种布局的区别是，利用前者进行设计时制作者的自由度非常大，可以将单元格很方便地绘制在任何地方，因此这种方法比较适合网页制作的熟练者或有美术功底的制作者。普通表格排版方式与之相反，使用起来相对简单、规整，更适用于初学者和非艺术类设计者。 下面介绍具体的布局方法。在top.html设计视图中插入一个表格，设置为3行2列，表格宽度为100%，“边框粗细”、“单元格边距”和“单元格间距”均为0，点击确定，如图 表格插入后，调整表格各行的高度和各列的宽度，适当地合并或拆分一些单元格，使效果图上的各个元素恰好位于各单元格之中，如图 注意调整行和列的时候，要遵守“从上到下，从左到右