01-基础学习:课程:课程实验:湖南大学网站建设与管理课程设计:首页
差别
这里会显示出您选择的修订版和当前版本之间的差别。
| 两侧同时换到之前的修订记录前一修订版后一修订版 | 前一修订版 | ||
| 01-基础学习:课程:课程实验:湖南大学网站建设与管理课程设计:首页 [2020/12/19 20:24] – [八、设计其他页面] annhe | 01-基础学习:课程:课程实验:湖南大学网站建设与管理课程设计:首页 [2020/12/19 20:25] (当前版本) – 移除 annhe | ||
|---|---|---|---|
| 行 1: | 行 1: | ||
| - | ====== 网站建设与管理课程设计 ====== | ||
| - | ===== 实验概述 ===== | ||
| - | 通过网站项目的实践熟悉HTML及CSS。实验环境为 Windows NT 6.1(Windows 7)，使用Notepad++ v5.9.8开发，验证环境为Firefox 16.0.2 | ||
| - | ===== 实验过程 ===== | ||
| - | ==== 一、结构分析 ==== | ||
| - | <WRAP center round box 60%> | ||
| - | 外容器 940px | ||
| - | <WRAP round safety> | ||
| - | 顶端 940px | ||
| - | </ | ||
| - | <WRAP round caution> | ||
| - | 导航 940px | ||
| - | </ | ||
| - | <WRAP round safety> | ||
| - | 展示图片 | ||
| - | </ | ||
| - | <WRAP center round tip> | ||
| - | 中间容器 940px | ||
| - | |<WRAP round warning> | ||
| - | 主要内容 620px | ||
| - | </ | ||
| - | 右栏 300px | ||
| - | </ | ||
| - | |||
| - | </ | ||
| - | <WRAP round notice> | ||
| - | 页脚 940px | ||
| - | </ | ||
| - | |||
| - | </ | ||
| - | ==== 二、准备XHTML代码 ==== | ||
| - | 准备xhtml代码如下： | ||
| - | <code html> | ||
| - | <div id=" | ||
| - | <div id=" | ||
| - | <div id=" | ||
| - | <div id=" | ||
| - | <div id=" | ||
| - | <div id=" | ||
| - | <div id=" | ||
| - | </ | ||
| - | <div id=" | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | |||
| - | |||
| - | ==== 三、准备CSS代码 ==== | ||
| - | 基本css代码 | ||
| - | <code css> | ||
| - | body { | ||
| - | padding: 0; | ||
| - | margin: 0; | ||
| - | color: #333; | ||
| - | font-family: | ||
| - | font-size: 13px; | ||
| - | background-color: | ||
| - | background: | ||
| - | |||
| - | } | ||
| - | a, a:link, a:visited { color: #3d8e7d; font-weight: | ||
| - | a:hover { text-decoration: | ||
| - | |||
| - | p { margin: 0 0 10px 0; padding: 0; } | ||
| - | img { border: none; } | ||
| - | blockquote { font-style: italic; margin: 0 0 0 10px;} | ||
| - | cite { font-weight: | ||
| - | cite span { color: #3d8e7d; } | ||
| - | em { color: #3d8e7d; } | ||
| - | |||
| - | h1, h2, h3, h4, h5, h6 { color: #000; font-weight: | ||
| - | h1 { font-size: 34px; margin: 0 0 20px; padding: 5px 0 } | ||
| - | h2 { font-size: 28px; margin: 0 0 15px; padding: 5px 0; } | ||
| - | h3 { font-size: 24px; margin: 0 0 15px; padding: 0; } | ||
| - | h4 { font-size: 18px; margin: 0 0 15px; padding: 0; } | ||
| - | h5 { font-size: 16px; margin: 0 0 10px; padding: 0; } | ||
| - | h6 { font-size: 14px; margin: 0 0 5px; padding: 0; } | ||
| - | |||
| - | |||
| - | #t_bg { | ||
| - | width: 940px; | ||
| - | padding: 0 10px; | ||
| - | margin: 0 auto; | ||
| - | background: | ||
| - | } | ||
| - | |||
| - | #top { | ||
| - | width: 940px; | ||
| - | height: 60px; | ||
| - | padding-top: | ||
| - | |||
| - | } | ||
| - | |||
| - | #nav { | ||
| - | clear: both; | ||
| - | width: 940px; | ||
| - | height: 53px; | ||
| - | background: | ||
| - | |||
| - | } | ||
| - | |||
| - | #t_main{ | ||
| - | width: 940px; | ||
| - | clear: both; | ||
| - | } | ||
| - | #l_sidebar { | ||
| - | float: left; | ||
| - | width: 620px; | ||
| - | padding: | ||
| - | |||
| - | } | ||
| - | |||
| - | #r_main { | ||
| - | float: right; | ||
| - | width: 300px; | ||
| - | padding: 20px 5px; | ||
| - | } | ||
| - | |||
| - | #footer { | ||
| - | background: | ||
| - | clear: both; | ||
| - | width: 940px; | ||
| - | padding: 10px 0; | ||
| - | color: #000; | ||
| - | text-align: | ||
| - | margin: 0 auto; | ||
| - | |||
| - | }</ | ||
| - | |||
| - | 效果图： | ||
| - | {{ 课程: | ||
| - | |||
| - | ==== 四、顶部设计 ==== | ||
| - | 左侧放置logo，右侧一个搜索框，将顶端div修改为： | ||
| - | <code html> | ||
| - | <div id=" | ||
| - | <div id=" | ||
| - | <div id=" | ||
| - | <form action="#" | ||
| - | <input type=" | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | 相应的样式为： | ||
| - | <code css> | ||
| - | #logo { float: left; } | ||
| - | #logo h1 { margin: 0; padding: 0; } | ||
| - | #logo h1 a { display: block; width: 180px; height: 40px; color: #fff; text-indent: | ||
| - | |||
| - | #search_box { float: right; margin-top: 20px; width: 240px; height: 24px } | ||
| - | #search_box form { clear: both; width: 240px; height: 24px; padding: 0; margin: 0 } | ||
| - | # | ||
| - | </ | ||
| - | |||
| - | 效果预览： | ||
| - | {{ 课程: | ||
| - | |||
| - | ==== 五、导航设计 ==== | ||
| - | 添加导航代码: | ||
| - | <code html> | ||
| - | <div id=" | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | 为导航添加样式： | ||
| - | <code css> | ||
| - | #nav { | ||
| - | clear: both; | ||
| - | width: 940px; | ||
| - | height: 53px; | ||
| - | background: | ||
| - | |||
| - | } | ||
| - | |||
| - | #nav ul { | ||
| - | margin: 0; | ||
| - | padding: 0; | ||
| - | list-style: | ||
| - | } | ||
| - | |||
| - | #nav ul li { | ||
| - | padding: 0; | ||
| - | margin: 0; | ||
| - | display: inline; | ||
| - | } | ||
| - | |||
| - | #nav ul li a { | ||
| - | float: left; | ||
| - | display: block; | ||
| - | width: 130px; | ||
| - | height: 33px; | ||
| - | padding: 7px 0 0 0; | ||
| - | font-size: 14px; | ||
| - | color: #67acc2; | ||
| - | text-shadow: | ||
| - | text-align: | ||
| - | text-decoration: | ||
| - | font-weight: | ||
| - | outline: none; | ||
| - | border: none; | ||
| - | letter-spacing: | ||
| - | background: | ||
| - | } | ||
| - | |||
| - | #nav ul li a:hover, #nav ul .current { | ||
| - | color: #666; | ||
| - | text-shadow: | ||
| - | } | ||
| - | |||
| - | #nav ul .last { background: none }</ | ||
| - | |||
| - | 效果预览： | ||
| - | {{ 课程: | ||
| - | |||
| - | ==== 六、页尾设计 ==== | ||
| - | 添加页尾xhtml代码： | ||
| - | <code html> | ||
| - | <div id=" | ||
| - | <a href=" | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | 为页尾添加样式： | ||
| - | <code css> | ||
| - | #footer { | ||
| - | background: | ||
| - | clear: both; | ||
| - | width: 940px; | ||
| - | padding: 10px 0; | ||
| - | color: #000; | ||
| - | text-align: | ||
| - | margin: 0 auto; | ||
| - | |||
| - | } | ||
| - | |||
| - | #footer a { color: #000; text-decoration: | ||
| - | |||
| - | #footer a:hover { color: #FFF; text-decoration: | ||
| - | |||
| - | 效果预览： | ||
| - | {{ 课程: | ||
| - | |||
| - | ==== 七、添加细节 ==== | ||
| - | === 1、banner展示 === | ||
| - | 代码如下： | ||
| - | <code html> | ||
| - | < | ||
| - | <a href="#">< | ||
| - | </ | ||
| - | </ | ||
| - | === 2、添加右边栏 === | ||
| - | 添加一个会员登录框和一些链接: | ||
| - | <code html> | ||
| - | <div id=" | ||
| - | <div id=" | ||
| - | <form name=" | ||
| - | < | ||
| - | <input type=" | ||
| - | < | ||
| - | <input type=" | ||
| - | <input type=" | ||
| - | <label class=" | ||
| - | <a href="#"> | ||
| - | <input type=" | ||
| - | |||
| - | </ | ||
| - | |||
| - | </ | ||
| - | |||
| - | <div id=" | ||
| - | <div style=" | ||
| - | <a href="">< | ||
| - | < | ||
| - | <a href="">< | ||
| - | </ | ||
| - | <div style=" | ||
| - | <a href="">< | ||
| - | < | ||
| - | <a href="">< | ||
| - | </ | ||
| - | |||
| - | </ | ||
| - | |||
| - | |||
| - | </ | ||
| - | </ | ||
| - | |||
| - | 样式表： | ||
| - | <code css> | ||
| - | |||
| - | / | ||
| - | #members { | ||
| - | width: | ||
| - | / | ||
| - | color:# | ||
| - | padding:0 0 39px 0; | ||
| - | margin: | ||
| - | float: | ||
| - | } | ||
| - | #members form { | ||
| - | width: | ||
| - | padding:0 25px 0 24px; | ||
| - | } | ||
| - | #members form label { | ||
| - | display: | ||
| - | font: | ||
| - | float: | ||
| - | } | ||
| - | #members form input.txtBox { | ||
| - | width: | ||
| - | height: | ||
| - | border-bottom:# | ||
| - | border-right:# | ||
| - | border-left:# | ||
| - | border-top:# | ||
| - | float: | ||
| - | } | ||
| - | #members form input.chk { | ||
| - | width: | ||
| - | height: | ||
| - | margin:8px 5px 0 0; | ||
| - | float: | ||
| - | } | ||
| - | #members form a { | ||
| - | font:bold 11px/13px Verdana, Arial, Helvetica, sans-serif; | ||
| - | color:# | ||
| - | text-decoration: | ||
| - | float: | ||
| - | margin:8px 0 0 0; | ||
| - | } | ||
| - | #members label.remember { | ||
| - | margin:4px 10px 0 0; | ||
| - | } | ||
| - | #members form input.login { | ||
| - | background: | ||
| - | width: | ||
| - | height: | ||
| - | float: | ||
| - | border: | ||
| - | margin:6px 0 0 0; | ||
| - | } | ||
| - | |||
| - | #buy { | ||
| - | text-align: | ||
| - | margin: 30px; | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | === 3、添加主要内容 === | ||
| - | 展示企业新闻和产品动态： | ||
| - | <code html> | ||
| - | <div id=" | ||
| - | <div id=" | ||
| - | < | ||
| - | < | ||
| - | <a class=" | ||
| - | </ | ||
| - | <div id=" | ||
| - | < | ||
| - | <div class=" | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | </ | ||
| - | <a class=" | ||
| - | |||
| - | </ | ||
| - | |||
| - | <div id=" | ||
| - | < | ||
| - | <div class=" | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | </ | ||
| - | <a class=" | ||
| - | |||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | 样式表： | ||
| - | <code css> | ||
| - | |||
| - | #r_main { | ||
| - | float: left; | ||
| - | width: 620px; | ||
| - | padding: 20px 0 20px 10px; | ||
| - | } | ||
| - | |||
| - | #welcome { | ||
| - | clear: both; | ||
| - | overflow: hidden; | ||
| - | } | ||
| - | |||
| - | #welcome h1 { font-size: 28px; font-weight: | ||
| - | |||
| - | #welcome p { | ||
| - | font-size: 18px; | ||
| - | color: #666; | ||
| - | line-height: | ||
| - | margin-bottom: | ||
| - | } | ||
| - | |||
| - | a.more { | ||
| - | display: inline-block; | ||
| - | float: left; | ||
| - | width: 72px; | ||
| - | line-height: | ||
| - | text-align: | ||
| - | text-decoration: | ||
| - | font-weight: | ||
| - | background: | ||
| - | color: #000; | ||
| - | text-shadow: | ||
| - | } | ||
| - | |||
| - | a.more: | ||
| - | |||
| - | #products { | ||
| - | clear: both; | ||
| - | overflow: hidden; | ||
| - | margin-top: | ||
| - | } | ||
| - | |||
| - | #products h1 { font-size: 28px; font-weight: | ||
| - | |||
| - | |||
| - | .p_pic { | ||
| - | border-width: | ||
| - | clear: both; | ||
| - | } | ||
| - | |||
| - | .p_pic img { margin-bottom: | ||
| - | |||
| - | # | ||
| - | clear: both; | ||
| - | overflow: hidden; | ||
| - | margin-top: | ||
| - | } | ||
| - | # | ||
| - | |||
| - | </ | ||
| - | |||
| - | === 4、首页效果 === | ||
| - | 首页完成时效果如下： | ||
| - | {{ 课程: | ||
| - | |||
| - | |||
| - | ==== 八、设计其他页面 ==== | ||
| - | === 1、产品列表页 === | ||
| - | 采用首页框架，修改r_main内容为产品列表，以图片形式展示： | ||
| - | |||
| - | <code html> | ||
| - | <div id=" | ||
| - | <div class=" | ||
| - | < | ||
| - | <div class=" | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | </ | ||
| - | <a class=" | ||
| - | </ | ||
| - | <div class=" | ||
| - | < | ||
| - | <div class=" | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | </ | ||
| - | <a class=" | ||
| - | </ | ||
| - | |||
| - | <div class=" | ||
| - | < | ||
| - | <div class=" | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | </ | ||
| - | <a class=" | ||
| - | </ | ||
| - | |||
| - | <div class=" | ||
| - | < | ||
| - | <div class=" | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | <a href="">< | ||
| - | </ | ||
| - | <a class=" | ||
| - | </ | ||
| - | |||
| - | |||
| - | </ | ||
| - | </ | ||
| - | |||
| - | 样式表： | ||
| - | <code css> | ||
| - | h2 { font-size: 28px; font-weight: | ||
| - | |||
| - | </ | ||
| - | |||
| - | 显示效果: | ||
| - | {{ 课程: | ||
| - | === 2、企业动态页 === | ||
| - | 采用首页框架，修改r_main内容： | ||
| - | <code html> | ||
| - | <div id=" | ||
| - | <div class=" | ||
| - | <div class=" | ||
| - | <p class=" | ||
| - | <a href=" | ||
| - | </ | ||
| - | <div style=" | ||
| - | <a href=" | ||
| - | </ | ||
| - | <div class=" | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | <div class=" | ||
| - | <div class=" | ||
| - | <p class=" | ||
| - | <a href=" | ||
| - | </ | ||
| - | <div style=" | ||
| - | <a href=" | ||
| - | </ | ||
| - | <div class=" | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | <div class=" | ||
| - | <div class=" | ||
| - | <p class=" | ||
| - | <a href=" | ||
| - | </ | ||
| - | <div style=" | ||
| - | <a href=" | ||
| - | </ | ||
| - | <div class=" | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | <a class=" | ||
| - | |||
| - | </ | ||
| - | </ | ||
| - | |||
| - | 样式表： | ||
| - | <code css> | ||
| - | .post_box { clear: both; margin-bottom: | ||
| - | .post_header { border-top: 3px solid #999; border-bottom: | ||
| - | .post_box h2 { font-size: 25px; margin-bottom: | ||
| - | .post_box p.post_meta { margin-bottom: | ||
| - | .post_box img { clear: both; padding: 8px; border: 1px solid #ccc; background: #fff; margin-bottom: | ||
| - | |||
| - | .post_content { | ||
| - | font-size: 18px; | ||
| - | color: #666; | ||
| - | line-height: | ||
| - | margin-bottom: | ||
| - | } | ||
| - | |||
| - | .post_more { | ||
| - | font-size: 18px; | ||
| - | } | ||
| - | |||
| - | </ | ||
| - | |||
| - | 显示效果： | ||
| - | {{ 课程: | ||
| - | |||
| - | |||
| - | === 3、关于我们页面 === | ||
| - | 采用和首页相似的结构，修改r_main内容： | ||
| - | <code html> | ||
| - | <div id=" | ||
| - | <div class=" | ||
| - | <div class=" | ||
| - | <div class=" | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | <div class=" | ||
| - | <div class=" | ||
| - | <div class=" | ||
| - | <p class=" | ||
| - | <span style=" | ||
| - | <span style=" | ||
| - | <span style=" | ||
| - | </ | ||
| - | |||
| - | |||
| - | </ | ||
| - | |||
| - | <div class=" | ||
| - | <div class=" | ||
| - | <p class=" | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | |||
| - | </ | ||
| - | </ | ||
| - | |||
| - | <div class=" | ||
| - | <div class=" | ||
| - | <div style=" | ||
| - | < | ||
| - | |||
| - | < | ||
| - | |||
| - | <div style=" | ||
| - | <div style=" | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | <div style=" | ||
| - | <div style=" | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | 显示效果： | ||
| - | {{ 课程: | ||
| - | === 4、联系我们页面 === | ||
| - | 页头和页尾采用首页框架，主体部分左右栏宽度近似相等，添加百度地图、留言簿： | ||
| - | <code html> | ||
| - | <div id=" | ||
| - | <div style=" | ||
| - | <div id=" | ||
| - | < | ||
| - | <form method=" | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | <div style=" | ||
| - | <div class=" | ||
| - | <div class=" | ||
| - | <div class=" | ||
| - | 湖南省长沙市 湖南大学 | ||
| - | 天马学生公寓 3 区 XX 栋 XXX 室 <br /> | ||
| - | Email: admin@annhe.net< | ||
| - | QQ: 000000000< | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | <div class=" | ||
| - | <div class=" | ||
| - | <div class=" | ||
| - | < | ||
| - | <div style=" | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | </ | ||
| - | </ | ||
| - | |||
| - | 样式表： | ||
| - | <code css> | ||
| - | # | ||
| - | } | ||
| - | # | ||
| - | # | ||
| - | |||
| - | # | ||
| - | # | ||
| - | # | ||
| - | |||
| - | .cleaner { clear: both } | ||
| - | .h10 { height: 10px } | ||
| - | .float_l { float: left } | ||
| - | .float_r { float: right } | ||
| - | |||
| - | </ | ||
| - | |||
| - | 百度地图js代码: | ||
| - | |||
| - | 显示效果： | ||
| - | {{ 课程: | ||
| - | |||
| - | |||
| - | |||
| - | ===== 实验总结 ===== | ||
| - | 之前自学过HTML，但是仅仅写过一些单一的网页，本次实验通过一个简单WEB站点的设计，使我对HTML+CSS更加熟悉。同时也体会到WEB设计不仅仅是写HTML代码，网页的布局及图片设计也很重要。因为自己不会作图，此次实验全部图片只能在网上搜索，要筛选图片，有时候截图直接放大缩小，影响了图片质量。样式表的设计也有一些问题，比如某些相似的元素，用类选择器更加方便，但是一开始用了id选择器，当发现时改动又比较麻烦，所以只是后续页面用了类选择器，这样可能会带来一些冗余的CSS代码。 | ||
| - | ===== 附录 ===== | ||
| - | 源代码：{{课程: | ||
| - | 在线演示：http:// | ||
| - | |||
| - | |||
| - | |||
| - | |||
01-基础学习/课程/课程实验/湖南大学网站建设与管理课程设计/首页.1608380651.txt.gz · 最后更改: 2020/12/19 20:24 由 annhe
除额外注明的地方外，本维基上的内容按下列许可协议发布： CC Attribution-Noncommercial-Share Alike 4.0 International
