- 
							
网页布局与海报设计-网站子页面设计
普通类 - 
							
- 支持
 - 批判
 - 提问
 - 解释
 - 补充
 - 删除
 
 - 
							
- 
													内容
 
网站子页面设计
一、题目要求:
请参照上个案例中的首页面,为该大学教学研究中心设计一个“新闻”子页面。
二、关键词
切片、网页设计
三、操作思路
本例中设计的是网站的子页面,子页面应该与网站首页风格保持一致。因此,子页面应该仍以蓝色为主调,简洁明了。
四、具体方法
1、在Photoshop中新建一个文件,命名为“新闻”,设置大小为“1024*768像素”。因页面整体风格要保持一致,可直接从“教学研究中心首页.psd”中将页面头部复制过来。如下:

2、导入素材“主楼.jpg”,覆盖原图层“木铎”的位置,设置不透明度为80%。效果如下:

3、选择圆角矩形工具,参数设置如下,在画布左边空白处拖出一个圆角矩形。

4、导入素材“底纹.jpg”至圆角矩形框内,设置不透明度为75%。用橡皮擦除溢出的边缘部分。输入文字“您的位置”,大小为30点,字体为华文隶书。

5、用同样的方法在右侧画出两个圆角矩形以及导入底纹,分别输入文字“热门文章”、“最新图文”。效果如下:

6、选择切片工具,对需要输入内容的地方进行切片,共四个。其余部分被系统自动切割,效果如下:

7、利用命令“文件”—“存储为web所用格式”,在弹出的对话框底部选择“存储”,系统弹出“将优化结果存储为”对话框,选择保存类型为“HTML和图像”,切片方式为“所有切片”。点击确定,存储完成。
8、教师研究中心子页面设计制作完成,插入文字和图片等进一步工作需在Dreamweaver中进行。
五、课后问题
一个完整的网站通常不只包含两个页面,请按照以上方法,继续设计并制作两个该中心的子页面。
六、文件说明
微视频文档:PS6-4.mp4
文本文档:PS6-4.docx
PPT演示文稿:PS6-4.pptx
- 
													视频
 
- 
													在新页面中查看内容
 
- 
													下载源文件
 
 - 
													
 - 
							
- 标签:
 - 网站
 - 页面设计
 - 圆角
 - 切片
 - 两个
 - 选择
 - 网页
 - 布局
 - 海报设计
 - 矩形
 - 视频
 - 存储
 - 页面
 - 内容
 
 - 
				
				
				
 
			
								
								
						
学习元评论 (0条)
聪明如你,不妨在这 发表你的看法与心得 ~